Creating Your First Extension Guide
Published on January 22, 2022
Revamped on February 5, 2023
After months of playing around with AppInventor, you already know the basics of programming with AppInventor, and now, you are ready to move on to another level. You can now learn how to create extensions, components that are not native to AppInventor. With the help of extensions there are endless possibilities for apps, but first we need to start with something simple to get started.
We will be using a platform called Niotron IDE. What sets it apart from other extension builders is that this does not require complex Java installations and configuration. This makes it beginner-friendly and easy to understand. You are advised to work on a PC.
🏷️ Tags: #tutorials-and-guides, #extensions
Step 1. Setting up your project
To get started, browse https://ide.niotron.com. After a few seconds, you should be required to sign in to Niotron. If you are an existing Niotron user, sign in, else create a new account.
After logging in to Niotron IDE, you will be redirected to the Niotron dashboard. Click on Extension IDE in the left navigation bar.
You are now in Niotron IDE, ready to create new extensions. Create a new project to get started.
4. A screen will be opened for you to enter the properties of your extension. Enter the fields as follows.
Explanations
The project name is the name of your extension. It must not contain underscores (_) and must follow the UpperCamelCase naming convention; all words are joint without spaces and all of the first alphabet of each word are capitalized. Extension names cannot contain spaces.
The package name is a unique identifier of your extension. This is used for AppInventor to differentiate your extension from other similar extensions. You can set this to anything you want, but my suggestion is that you include your name and your extension along with this. Examples are listed below.
com.gordonlu.camera
io.gordonlu.camera
The icon URL specifies the URL of your extension's icon. To make this work for AppInventor, this must be set to 16x16px. You can find an image, resize it in Google Drawings, then publish the drawing and obtain the URL. This is not mandatory.
The help URL is for a documentation of your extension. This is not mandatory, and you can leave it blank.
A description is required for your extension. When the users press the Help icon next to your extension, this will show up. You should explain what your extension does in your description, in layman's terms and as simple as possible.
6. Continue and you will see a chunk of code on your screen. We use Java to create extensions, and we will be working with Java.
7. Delete all of the code and replace it with this.
package com.aicode.operations;
import com.google.appinventor.components.annotations.*;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.runtime.AndroidNonvisibleComponent;
import com.google.appinventor.components.runtime.ComponentContainer;
@DesignerComponent(
version = 1,
description = "A simple extension to operate addition and subtraction.",
category = ComponentCategory.EXTENSION,
nonVisible = true,
iconName = "")
@SimpleObject(external = true)
public class Operations extends AndroidNonvisibleComponent {
public Operations(ComponentContainer container){
super(container.$form());
}
@SimpleFunction(description = "Adds up two numbers.")
public double Add(double number1, double number2){
return number1 + number2;
}
@SimpleFunction(description = "Subtracts number2 from number1.")
public double Subtract(double number1, double number2){
return number1 - number2;
}
}
8. Compile your extension to obtain the AIX file.
Step 2. Compiling Your Extension
After you have compiled your extension, you should see that an extension is downloaded to your computer. This is the final product of your extension.
