Configuring your computer to build App Inventor 2 extensions

Photo by Christian Wiediger on Unsplash

Update 13 March 2021

With the launch of Rush, which is improved tooling for building extensions, this article is now outdated. To know more about what Rush is and how to use it, check out this community post.

In this guide, I will help you to set up all the necessary things that you need to make extensions on your Mac or Windows machine. Let’s keep it short here and get started. 😉

What you’ll need

1. About 15 to 20 minutes.
2. A computer or laptop (running on macOS or Windows).
3. Internet connection.

For being able to build extensions, you’ll need a few things installed and set up on your computer. Let’s grab them. 🐱‍🏍

1. Java Development Kit

AI2 extensions are written in Java. And for our machine to be able to compile the Java code, we need to install a Java Development Kit (more commonly referred to as a JDK). I’m not going to get too deep into this as I assume you to be at least a bit familiar with Java.

For Windows users 💻

Getting JDK:

First, check if you’ve JDK already installed on your machine. To do this, open the Command Prompt and run this command — java -version . If you see an output similar to the one below then you’ve JDK already installed.

java version "1.8.0_251"
Java(TM) SE Runtime Environment (build 1.8.0_251-b08)
Java HotSpot(TM) 64-Bit Server VM (build 25.251-b08, mixed mode)

If you don’t see this, head over to https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html and download the JDK (the provided link is for JDK 8). Once done, install it by following the Next and Install prompts.

Setting up the Environment Variables:

• Right-click on the Computer icon from the desktop.
• Choose Properties from the context menu.
• Click Advanced system settings link.
• Select Environment Variables.
• Now create a new entry named JAVA_HOMEif it doesn’t exist and enter the path where JDK is installed, for example, C:\Program Files\Java\java-1.8.0_251 .
• Next, create another entry named PATH if it doesn’t exist and then paste this — %JAVA_HOME%\bin; %JAVA_HOME%\jre\bin; C:\ProgramData\Oracle\Java\javapath as the value. If it already contains some value, simply separate it with a semicolon (;).

Verifying the installation:

Open Command Prompt and run this command — java -version . You will see an output similar to this:

java version "1.8.0_251"
Java(TM) SE Runtime Environment (build 1.8.0_251-b08)
Java HotSpot(TM) 64-Bit Server VM (build 25.251-b08, mixed mode)

For macOS users 🍎

Getting JDK:

First, check if you’ve JDK already installed on your machine. To do this, open the Terminal and run this command — java -version . If you see an output similar to the one below then you’ve JDK already installed.

java version "1.8.0_251"
Java(TM) SE Runtime Environment (build 1.8.0_251-b08)
Java HotSpot(TM) 64-Bit Server VM (build 25.251-b08, mixed mode)

If you don’t see this, head over to https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html and download the JDK (the provided link is for JDK 8). Once done, install it by following the Continue and Install prompts.

Setting up JAVA_HOME:

• Open the Terminal once again.
• Type vim ~/.bash_profile and hit enter. You’ll be shown a warning.
• To continue, type E , and hit enter. A window will open
• Now copy this line — export JAVA_HOME=$(/usr/libexec/java_home) and paste it in the window.
• Press the Escape key and type :wq. Hit Enter.
• Next, type source ~/.bash_profile and hit enter.
• Finally, verify whether JAVA_HOME has been correctly set up or not by typing echo $JAVA_HOME and hit enter. You should see an output similar to this:

/Library/Java/JavaVirtualMachines/jdk1.8.0_251.jdk/Contents/Home

Verifying the installation:

Verify the installation by opening the Terminal and running java -version command. You will see an output similar to this:

java version "1.8.0_251"
Java(TM) SE Runtime Environment (build 1.8.0_251-b08)
Java HotSpot(TM) 64-Bit Server VM (build 25.251-b08, mixed mode)

2. Apache Ant

Apache Ant is a Java library and command-line tool which is used to build Java projects. AI2 uses Ant as its primary build system. And therefore, to build and pack our extensions up, we need to install Ant. Let’s not worry about it much and get it set up on our machine quickly. ⚡

For Windows users 💻

Getting Ant:

Go to https://ant.apache.org/bindownload.cgi and download the latest version of Ant. Unzip the downloaded ZIP file and place it in your desired location. Make sure not to place it in a directory with spaces in its name.

Setting up the Environment Variables:

• Follow the first four steps from JDK installation to open Environment Variables settings.
• Create a new entry named ANT_HOME and as a value, enter the path of the location where you’ve unzipped Ant, for example, C:\Ant\apache\ant-1.10.1 .
• Edit the PATH variable we created earlier and add this to it — %ANT_HOME%\bin . Make sure you add a semicolon (;) before adding it.
• Create a new entry named CLASSPATH if it doesn’t exist and add this as value — %ANT_HOME%\bin . If it already has some value in it, make sure you separate it with a semicolon (;).

Verifying the installation:

Open Command Prompt and run this command — ant -version . You should see an output similar to this:

Apache Ant(TM) version 1.10.6 compiled on May 2 2019

For macOS users 🍎

Getting Ant:

We’ll use Homebrew for this step, so, make sure you have installed it already. You can Google the installation process in case you don’t have it.

• Open the Terminal and run the following commands:

$ brew update
$ brew install ant 

• You’ll see an output similar to this:

==> Installing dependencies for ant: openjdk
==> Installing ant dependency: openjdk
==> Downloading https://homebrew.bintray.com/bottles/openjdk-13.0.2+8_2.catalina.bottle.tar.gz
==> Downloading from https://akamai.bintray.com/65/65adca036393f528e3830cab8b0aafec94be870de087d94cfe098fd5935
    ######################################################################## 100.0%
==> Pouring openjdk-13.0.2+8_2.catalina.bottle.tar.gz
==> Caveats
For the system Java wrappers to find this JDK, symlink it with
sudo ln -sfn /usr/local/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk
openjdk is keg-only, which means it was not symlinked into /usr/local,
because it shadows the macOS `java` wrapper.

If you need to have openjdk first in your PATH run:
echo 'export PATH="/usr/local/opt/openjdk/bin:$PATH"' >> ~/.bash_profile

For compilers to find openjdk you may need to set:
export CPPFLAGS="-I/usr/local/opt/openjdk/include"

==> Summary
🍺  /usr/local/Cellar/openjdk/13.0.2+8_2: 631 files, 314.6MB
==> Installing ant
==> Downloading https://www.apache.org/dyn/closer.lua?path=ant/binaries/apache-ant-1.10.7-bin.tar.xz
==> Downloading from https://downloads.apache.org/ant/binaries/apache-ant-1.10.7-bin.tar.xz
    ######################################################################## 100.0%
==> Downloading https://www.apache.org/dyn/closer.lua?path=ant/ivy/2.4.0/apache-ivy-2.4.0-bin.tar.gz
==> Downloading from http://apache.mirrors.hoobly.com/ant/ivy/2.4.0/apache-ivy-2.4.0-bin.tar.gz
    ######################################################################## 100.0%
==> Downloading https://www.apache.org/dyn/closer.lua?path=commons/bcel/binaries/bcel-6.4.0-bin.tar.gz
==> Downloading from https://mirrors.gigenet.com/apache/commons/bcel/binaries/bcel-6.4.0-bin.tar.gz
#=#=#
curl: (22) The requested URL returned error: 404
Trying a mirror...
==> Downloading https://archive.apache.org/dist/commons/bcel/binaries/bcel-6.4.0-bin.tar.gz
    ######################################################################## 100.0%
🍺  /usr/local/Cellar/ant/1.10.7_1: 1,670 files, 41.9MB, built in 33 seconds
==> Caveats
==> openjdk
For the system Java wrappers to find this JDK, symlink it with
sudo ln -sfn /usr/local/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk

openjdk is keg-only, which means it was not symlinked into /usr/local,
because it shadows the macOS `java` wrapper.

If you need to have openjdk first in your PATH run:
echo 'export PATH="/usr/local/opt/openjdk/bin:$PATH"' >> ~/.bash_profile

For compilers to find openjdk you may need to set:
export CPPFLAGS="-I/usr/local/opt/openjdk/include" 

• Notice the path (/usr/local/Cellar/ant/1.10.7_1) after the 🍺 icon, which in my case is at the 18th line from the bottom, in the output. Copy and save it for later use.

Configuring .bash_profile:

• Follow the first three steps from the Setting up JAVA_HOME section.
• Enter the following stuff and replace <WRITE HERE>in the first line with the path that you copied in the previous step:

export ANT_HOME=<WRITE HERE>
export PATH=${PATH}:${ANT_HOME}/bin

• Hit Escape key, type :wq and hit enter.
• Next, type source ~/.bash_profile and hit enter.
• Finally, verify whether ANT_HOME has been correctly set up or not by typing echo $ANT_HOME and hit enter.

3. Download the Extension Template repository

Extension Template is a system to help you build extensions. It was recently released by the MIT App Inventor team. With this, you no longer need to download the whole AI2 sources that are around 1.6 GB large to build extensions.

• First, go to this URL — https://github.com/mit-cml/extension-template. It will take you to the Extension Template’s GitHub repository.
• Now, click on “Clone or download” and then download the repository by clicking on “Download ZIP”.

Extension Template repository — GitHub

• Once the downloaded, unzip the repo in your desired directory and you’re done.

An alternate way of cloning the repository locally would be by using Git or GitHub Desktop, but to keep this tutorial as simple as possible, I haven’t covered it.

Great! Now your machine is successfully configured to build extension components for App Inventor 2 and its clones.

What next 🔥

Now that you have everything set up correctly, you can start developing your own extensions, but, in case you don’t know how to write extensions, check out this guide by me to get started — Writing your first App Inventor 2 extension. 😃

If you’ve faced any difficulty while following the guide, please let me know in the comments or simply contact me through my Telegram or Twitter. 😊