Extension development for newbies [off topic]

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. […]

  1. Set up a local version of App Inventor for your own use, building a simple extension component for it, as practice.
  2. Build your desired component for your local instance and test it carefully.
  3. Modify your component to have the correct package name.
  4. Generate an aix file, so that the extension can be imported.
  5. Test the aix file by importing the extension into a project you build on the public App Inventor server.
  6. 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 MakeAuthKey once 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

12 Likes

Yo utilizó laragon

Hey, @Red_Panda!


– I just want to note you 7 things: –

  1. You do not need to download Java Runtime Environment.
  2. As you said, Git is not required for newbies. But if someone is interested, I recommend using Git Bash.
  3. You should note users to download Google App Engine Standard Java Environment.
  4. You are missing the most important part Environmental Variables
  5. In order to compile Local App Inventor Instance, you first need to run ant MakeAuthKey.
  6. You have to run ant clean after before every single “build”.
  7. You cannot compile apps with local App Inventor instance. You have to run ant RunLocalBuildServer first.

But still, this is a great tutorial! Thanks for helping our community.

5 Likes

First, thank you for improving this tutorial. I will add the things I forgot. Some things like Environmental Variables will be added later

3 Likes

I am getting error for the command ‘ant’

If i run ‘ant extensions’ it build success
ant MakeAuthKey - build success
problem only for the command ‘ant’
Please rectify the problem.

You have ready posted this here:
https://groups.google.com/forum/#!topic/app-inventor-open-source-dev/QVTy_r59GAY

(It was me that answered you there)

1 Like

I have tried setting up the environment But got this message:

BUILD FAILED
C:\appinventor-sources-master\appinventor\build.xml:16: The following error occu rred while executing this line:
C:\appinventor-sources-master\appinventor\build-common.xml:284: The following er ror occurred while executing this line:
C:\appinventor-sources-master\appinventor\blocklyeditor\build.xml:63: Java retur ned: 1
Total time: 19 seconds

Please help me.

Have you tried this


?

1 Like

for questions about working with the App Inventor Sources you might want to ask in the Open Source Group next time …
there you will also find the experts from the MIT App Inventor team to answer questions…

Taifun

1 Like

Let me first say, this is great post, along with all the updates that other members suggested.

But Lots of internal links are not working

one of them is
http://javadoc.app-inventor-releases.googlecode.com/hg/com/google/appinventor/client/widgets/properties/PropertyEditor.html.

Can you please check :slight_smile:

1 Like

Where did you find that link?

I found that link in the documents that you shared , there is an inbound link attached in one of the page .

How i found that link

  1. YOu wrote some link one of them is HOW TO ADD A COMPONENT (Point 3 ) that goes here https://docs.google.com/document/d/1xk9dMfczvjbbwD-wMsr-ffqkTlE3ga0ocCE1KOb2wvw/pub

  2. Once the document is open, go to point 1b Class Heirarchy

  3. CLick the hyperlink, that says Component ( there you will get error )

The link is offline because it was hosted with Google Code, a project which was taken offline. By examining the URL, I found out that this is just the javadoc from the component class. You can find it here

2 Likes

Perfect !! Thank you for posting the link :slight_smile:

Java development for newbies https://codegym.cc/

1 Like

2019 Java development for newbies https://www.welookups.com and https://www.javacodegeeks.net