Extension development for newbies
Basic knowledge
App Inventor extensions are developed in Java, so a bit of knowledge is required. Developing extensions is only possible because the App Inventor source code is open source. Most extensions work on all App Inventor platforms (App Inventor, Appy Builder and Thunkable). The exact instructions strongly depend on your OS, but I will try to keep them as general as possible. I am a beginner myself, so any help and suggestions are welcome. This tutorial will give you a general view from newbie to newbie.
What software you will need
- Java Development Kit (JDK): Download here
- Apache ant: Download here
- Google Appengine SDK: Download here (Make sure to download Standard Java Environment)
- The App Inventor Sources: Download here
- An editor for Java code (I use Notepad++)
Maybe you are going to regret that later, but I decided that Git and build server are not needed for newbies.
Setting up your development environment (document)
Download the mentioned software above and unpack them respectively install them. Then set your Environment Variables. Under Windows 8 and higher do right Click on Windows Logo -> System -> Advanced Configuration -> Enviroment Variables. Add your ant and Java home directories to your path variable (use the /bin folder for that). Then add two new variables ANT_HOME and JAVA_HOME with the corresponding folder paths. Last but not least you need to add ANT_OPTS with the parameter -Xms512m. Detailed information can be found here
Things to notice
Make sure that the JRE and JDK are the same version. Make sure that your environment variables are set correctly. It is easier to put JDK, ant and appengine in a folder that does not contain spaces. If you do that, you have to add apostrophes before and after every path you write in the command line.
##Using Git (optional)
You can use Git for easier version control. You can use any Git software you want e.g.
-
Git Bash (also exists as Git CMD)
- command line, can execute ant commands
-
GitHub
- GUI, most popular website
-
Bitbucket
- GUI, similar to GitHub
Fork or Clone?
Clone the App Inventor Sources if you are a beginner and do not plan to change App Inventorâs core components. Fork them if you plan to contribute to the App Inventor Sources.
Procedure (document)
The App Inventor team did sum this up very good:
Here are the steps we recommend in building an extension component. [âŚ]
- Set up a local version of App Inventor for your own use, building a simple extension component for it, as practice.
- Build your desired component for your local instance and test it carefully.
- Modify your component to have the correct package name.
- Generate an aix file, so that the extension can be imported.
- Test the aix file by importing the extension into a project you build on the public App Inventor server.
- Publish your extension.
But letâs do this step by step. If you are familiar with using extensions, you can start with chapter 3 of the official instructions. For your first extension, copy the code of an existing component, try to change the appearance and build the component as an extension. You find all existing components in the folder /appinventor-sources/appinventor/components/src/com/google/appinventor/components. Then start with a new file called YourExtensionName.java in the appinventor/components/src/ directory
Used commands
All commands must be executed in your appinventor folder (the folder that contains e.g. the build.xml and the Readme). Use the command line tool of your OS for them.
-
ant- Compiles your local App Inventor instance and builds it
-
ant extensions- Compiles your extension and generates the .aix file(s)
-
ant clean- Cleans your workspace. Has to be run before every build. Can be useful sometimes
-
(path_to_appengine)/bin/dev_appserver.(file) --port=8888 --address=0.0.0.0 appengine/build/war/- Launch an App Inventor instance on your local machine. Replace (path_to_appengine) with the actual path and (file) with cmd (for Windows) or sh (for Linux/macOS)
- You have to run
ant MakeAuthKeyonce to use your Local App Inventor Instance - Type localhost:8888 in your browser to use it
-
ant RunLocalBuildServer- starts a local build server (the local App Inventor instance cannot compile apps)
Links:
Official App Inventor instructions
How to Build App Inventor from the Sources
How to Add a Component (App Inventor)
How to create an extension by @Sander0542
App Inventor Sources Google Group
Instructions from Bryan Qiang
Similar thunkable topic (incl. how to set Environment Variables)
Java tutorial from tutorialspoint
Learn Java with Greenfoot
What to expect from this topic
I know that it is very short and I plan to expand it in the future. I wanted to pass my experience to everyone interested in extension developing.
You can help
You can help to improve and expand this tutorial by writing How Toâs. Currently needed are:
- How to set your Environment Variable in Linux/macOS
- What an extension must contain
- Using Git
- Using build servers
- Types of variables, properties, etc.
- Tips from Power Thunkers
Contact me via PM if you are interested in collaborating (you will be mentioned of course).
Changelog:
2017-07-10: Initial release
2017-07-11: Improved description
2017-07-12: Expanded tutorial
2017-09-06: Tutorial is now OT, for the full tutorial visit my website
