Skip to content

Creating Extensions

Info

Now you can just skip this tutorial and paste your code in Kodular IDE!

Tools you will need

Warning

This guide assumes you to be a Windows user.

Step 1: Setting up Java JDK

  • Install JDK

Warning

Be sure not to install it in a directory whose path contains spaces

  • Set the Environmental Variables:

    • Set JAVA_HOME to where you installed Java JDK.

    For example: C:\Program Files\Java\jdk1.8.0_131

    • Edit PATH and add those:

    %JAVA_HOME%/bin, %JAVA_HOME%/jre/bin, C:\ProgramData\Oracle\Java\javapath

  • Check Java installation:

    $ java -version  
java version "1.8.0_131"  
Java(TM) SE Runtime Environment (build 1.8.0_131-b11)  
Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)

Step 2: Setting up Apache Ant

  • Unzip the folder and move it to a place where it is safe. For example: C:\apache-ant-1.10.1

Warning

Be sure not to install it in a directory whose path contains spaces

  • Set the Environmental Variables:
    • Set ANT_HOME to where you have the Ant folder placed. For example: C:\Ant\apache-ant-1.10.1
    • Edit Path and add %ANT_HOME%\bin
    • Edit ClassPath and add %ANT_HOME%\bin

  • Check Ant installation:

    $ ant -version  
Apache Ant(TM) version 1.10.1 compiled on February 2 2017

Step 3: Setting up Git

  • Set it up as written in this tutorial

  • Check Git installation:

    $ git version  
git version 2.11.0.windows.3

Step 4: App Inventor Sources

  • Unzip the folder and move it to a place where it is safe

Warning

Be sure not to place it in a directory whose path contains spaces

Step 5: Building an Extension

package io.kodular; // package of the extension will be "com.kodular.SimpleMaths"

// Only these imports are required to interact with Kodular
import com.google.appinventor.components.annotations.*;
import com.google.appinventor.components.runtime.*;
import com.google.appinventor.components.common.*;

@DesignerComponent(version = 1, // Update version here, You must do for each new release to upgrade your extension
                   description = "Simple Maths extension created by you",
                   category = ComponentCategory.EXTENSION,
                   nonVisible = true,
                   iconName = "images/extension.png") // Change your extension's icon from here; can be a direct url
@SimpleObject(external = true)
public class SimpleMaths extends AndroidNonvisibleComponent {

    public SimpleMaths(ComponentContainer container) {
        super(container.$form());
    }

    @SimpleFunction(description = "Simple addition of two numbers")
    public int Add(int a, int b) {
        return a + b;
    }

    @SimpleFunction(description = "Simple subtraction of two numbers")
    public int Subtract(int a, int b) {
        return a - b;
    }
}
  • Save the above code to appinventor-sources/appinventor/components/src/io/kodular/as SimpleMaths.java
  • Go back to the appinventor folder.
  • Open Command Prompt on that directory.
  • Type ant extensions and click on enter.

Wait for the extension to build...

Success

If it says: BUILD SUCCESSFUL, then you just created an extension. :-)

Danger

But if it says: BUILD FAILED, then you did something wrong and have to look over again. :-(

Step 6: Sharing Extensions

Your extension file (.aix file) should appear in the directory:

appinventor-sources/appinventor/components/build/extensions

Now, you can easily share the aix files with anyone and can import it into Kodular seemlessly.

  • For more information about extensions, read here

  • Keep making more and more and more extensions and help our community to build the best app.

  • Share your extensions with our community and become an "Extension Developer".

If you want more help, feel free to ask us on Kodular Community.