2016/8/24
App Inventor Extensions
App Inventor Extensions
App Inventor extensions
Initial Release 1.0 (part of MIT App Inventor Release nb149)
DRAFT: September 27, 2015
sample extensions are at: http://appinventor.mit.edu/extensions/
source code for sample extensions at: http://appinventor.mit.edu/extensions
forum for feedback and comments: Extensions section of the appinventor forum
Please help us test and provide your feedback. The extensions feature is still under development, and the internal
formats are not yet stable. If you build extensions, be aware that you will probably need to rebuild them when the
system changes. This applies not only the the extensions themselves, but to the projects that import them. For now,
use this document to experiment with building extensions for your own use. If you publish your extensions for others
to import into their own projects, be sure to warn people that your extensions may go of date and will need to be
updated.
Note: App Inventor extensions are supported only on Android devices running API Level 8 (Android system 2.2 Froyo)
and above. This applies to creating extensions, building projects that import extensions, and running packaged APKs
of projects that use extensions.
1. Overview of App Inventor extension components
2. Testing the current prototype
3. How to use extension components
3.1 Importing extension components
3.2 Some sample extensions to try
3.3 Building projects with extension components
3.4 Deleting extension components
3.5 Sharing projects that use extension components
3.6 Extension component repositories
3.6 Naming extension components
3.7 Updating projects that use extensions
4. How to create extension components
4.1 Practice building a simple component
4.2 Create your extension as an ordinary component and test it
4.2.1 Restrictions on extension components
4.2.2 Requesting permissions for the extensions you define
4.2.3 Using external libraries
4.3 Choose a package name for your extension
4.3.1 Change your extension to have the desired package name
4.4 Create the aix file for your new component
4.5 Sharing your extension
Acknowledgements
Appendix A: Temporary instructions for obtaining the source code
1. Overview of App Inventor extension components
App Inventor apps are built using components. Components let the apps use the builtin features of the mobile device
(like Camera or LocationSensor) or services on the Web (like Twitter or FusionTables). App Inventor includes a large
collection of components, and the App Inventor development team adds new capabilities to the system by
implementing new components.
https://docs.google.com/document/d/1orlYWGlHOY0hmAC0zjadQ4DET2K8U34C8hv5zmuxZLU/pub#h.5z6xqsl8lmwf
1/14
2016/8/24
App Inventor Extensions
There have been many requests to include additional features in App Inventor. Some of these are specialpurpose
features that would have only a few users, where it would be undesirable to include these in the core system for
everyone. Other features might be good additions to the core system, but the App Inventor development team’s effort
has gone to other priorities.
Anyone can use the App Inventor free and open source code to implement their own components, but until now the
only way to make these available to others has been to include them in private versions of App Inventor that are hosted
and managed individually.
App Inventor Extensions lets anyone create Extension Components. Extension components can be used in building
projects, just like other components. The difference is that extension components can be distributed on the Web and
loaded into App Inventor dynamically: they do not have to be built into the App Inventor system, and they can be
imported into projects as needed. With extensions, the range of App Inventor apps can be virtually unlimited.
One use of extensions, for example, is for educators and educational software developers to provide extension
components tailored to specific lessons and activities that students can use in building apps. Examples might be
simulations or data analysis tools. Those apps might be unfeasible to create directly with the builtin App Inventor
blocks, either because of processing speed or programming complexity. But those same apps might be readily
programmable in the App Inventor framework, using extension components that perform the necessary processing.
Anyone can create extension components. This requires gaining familiarity with the App Inventor source code (located
on Github) and programming the extension in Java. Extension components are packaged as aix files. Once you
create an extension component, anyone can use it in their App Inventor projects. Extension component aix files can
be housed anywhere on the Web. The aix files need not be stored at MIT or any other particular place, although MIT
hosts a repository where people can make aix files available for sharing and public use.
Note: One limitation of the current extension component implementation is that it creates nonvisible
components only (i.e., components that do not show on the designer screen). MIT plans to remove this
restriction in future versions of the extension component system.
2. Testing the current prototype
Please send your comments and reports on you experiences with the test instance, by reporting them in the App
Inventor Support forum under the extensions category.
Caution: Do not transfer projects between the current testing instance and main MIT App Inventor. If a project uses
extensions, it cannot run on the main MIT App Inventor system. You can take an ordinary project and upload it to the
test system and add an extension, but the result cannot be exported back into the main MIT App Inventor.
3. How to use extension components
You use an App Inventor extension component just as you would use an ordinary builtin component, except that you’ll
first need to import the extension into your project.
3.1 Importing extension components
Before you can import an extension component, you must have a project open. Start a new project, or open an
existing one. To import an extension, look in the components palette at the left of the screen under Extensions and
click the “Import extension” link as in the figure below. This will bring up a window that lets you specify an extension to
import. Extensions are defined by aix files. You can import an extension from an aix file on your computer or you can
specify a URL to import from the Web.
https://docs.google.com/document/d/1orlYWGlHOY0hmAC0zjadQ4DET2K8U34C8hv5zmuxZLU/pub#h.5z6xqsl8lmwf
2/14
2016/8/24
App Inventor Extensions
When you import an extension, App Inventor will give you the opportunity to rename it, as shown in the figure.
Figure 1: Importing an extension
https://docs.google.com/document/d/1orlYWGlHOY0hmAC0zjadQ4DET2K8U34C8hv5zmuxZLU/pub#h.5z6xqsl8lmwf
3/14
2016/8/24
App Inventor Extensions
Figure 2: Renaming an extension when you import it.
You’ll generally want to keep the default name. See the section below on naming for cases where you might want to
choose a different name.
Once you import an extension, it will appear in the components palette under the extensions category as shown in the
figure below.
After importing an extension, make sure to restart the companion app, else an error may occur.
https://docs.google.com/document/d/1orlYWGlHOY0hmAC0zjadQ4DET2K8U34C8hv5zmuxZLU/pub#h.5z6xqsl8lmwf
4/14
2016/8/24
App Inventor Extensions
Figure 3: An imported extension shown in components palette
3.2 Some sample extensions to try
Here are some sample extension components to experiment with. You can find these in the MIT App Inventor
Extensions repository at http://appinventor.mit.edu/extensions/. MIT will be adding more examples to this collection,
and would like to evolve it into a site for people to share extensions. You can import the extensions using the URL
indicated, or you can download the aix files to your local computer and import the files from there.
● VectorArithmetic created by Ethan Hon
Takes in two vectors and can add them to return a result vector.
https://drive.google.com/uc?
export=download&id=0B22N7pfciq0CSHlFQVBCRk5OYlB3U3FDWFNlNDhvOVp5bDM4
● ImageProcessor created by Justus Raju
ImageProcessor can do a weighted combine of two images, return the greyscale of an image.
http://appinventor.mit.edu/extensions/data/extensions/ai.cdk.justus.ImageProcessor.aix
Here is a clean project that demos the use of the component. You can import this aia directly too.
http://appinventor.mit.edu/extensions/data/demo/ImageProcessorDemo.aia
● SoundAnalysis created by Mouhamadou Oumar Sall
Multimedia component that analyzes the pitch of a sound through the microphone and returns it. It can be used
as an input to different situations, for instance to control some components with a specific sound whistle(pitch >
500Hz) or clap(pitch > 2000Hz).
https://drive.google.com/uc?
export=download&id=0B22N7pfciq0CUTZONWpKZUw2YXJlWHBMcERuaUliZWREdU5R
● ScaleDetector created by Hal Abelson
This component add a pinch detector capability to a Canvas. For an explanation, see Using App Inventor
extensions to implement multitouch.
3.3 Building projects with extension components
https://docs.google.com/document/d/1orlYWGlHOY0hmAC0zjadQ4DET2K8U34C8hv5zmuxZLU/pub#h.5z6xqsl8lmwf
5/14
2016/8/24
App Inventor Extensions
Once you have imported an extension component into a project, it will appear in the component palette under the
Extensions section. You use the extension component just like any other component by dragging it from the palette to
the designer screen, where it will
appear under the designer screen as an nonvisible component. (Currently, all extension components are nonvisible
components.) You’ll also see it in the Blocks Editor, together with blocks for its methods, properties and events. The
figures below illustrate how an imported ImageProcessor extension would appear the Blocks Editor.
Figure 4: Blocks for an imported ImageProcessor component
3.4 Deleting extension components
To delete an extension from the project, click the X beside the extension. This will remove all uses of the extension and
its blocks from the the project and you will not see it in Extensions palette panel anymore.
https://docs.google.com/document/d/1orlYWGlHOY0hmAC0zjadQ4DET2K8U34C8hv5zmuxZLU/pub#h.5z6xqsl8lmwf
6/14
2016/8/24
App Inventor Extensions
Figure 5: Click the X to delete an imported extension.
3.5 Sharing projects that use extension components
You export and import projects that use extension components just like other App Inventor projects, as aia files. You
need not do anything different in publishing the project than in publishing other App Inventor projects. If someone
imports a project (aia file) that uses an extension, they do not have to import the extension (aix file) separately: When
they open the project, the extension will appear in the components palette (under Extensions) together with the
project’s other components.
3.6 Extension component repositories
Extensions can be downloaded from any URL (provided you have access to it). Anyone who creates extensions can
make the aix files available however they choose. It might also be convenient to create collections of extensions,
called extension component repositories for private or shared use. For instance, an educator might create a repository
of extension components for use in a course.
The MIT AppInventor project has created a public repository for general use, to encourage people to create and share
extensions. The repository is located at http://appinventor.mit.edu/extensions.
3.6 Naming extension components
Extensions are created by different people working independently. So it’s likely that different extensions might have
the same name. For example, there might be two different extensions called ImageProcessor, and you’d like to import
them both. There’s no problem using the two extensions if you use them in different projects (other than that you
might get confused). But you can’t import two extension with the same name into a single project. When you import
and extension to a project, App Inventor will give you the opportunity to rename it, as shown in Figure 2. This will let
you keep the extension names unique and also (should you prefer) choose names for the extensions that are more
convenient for you than the original names.
https://docs.google.com/document/d/1orlYWGlHOY0hmAC0zjadQ4DET2K8U34C8hv5zmuxZLU/pub#h.5z6xqsl8lmwf
7/14
2016/8/24
App Inventor Extensions
(warning when you give the extension a name that already exists in the project)
`
If you are developing extensions (not just using them) you can choose extension package names help minimize name
conflicts. See the section on packages below.
3.7 Updating projects that use extensions
We have not addressed the issue of what happens when extensions are updated and how people using the extension
can be notified about this. There are two scenarios to consider:
1. The extension developer creates a new version of the extension, but the old version still works.
2. The App Inventor system is updated so that the extension no longer works.
In either case, people importing the extension will need to look to extension developer to provide information about
updating projects that import the extension
Warning: The extensions system is still experimental and the internal format of extensions is changing. If you create a
project (aia file) that imports an extension, it is possible that the extension (and the project) will stop working when the
extensions system in upgraded. You’ll have to rely on the extension developer to provide an updated extension.
4. How to create extension components
NOTE: As of 06/19/2016 Extensions must *not* be built in the com.google.appinventor.components.runtime package.
You should use a different package name. See section 4.3.1 for more information.
Extension components are created by programming in Java. The Java code can be original code that you write, and it
can also include Java libraries (jar files) from other sources.
You can create extension components for private use, or you can share them by sending people the aix files or making
the files available on the Web.
The process of creating an extension component is essentially the same as what people go through in creating an
ordinary App Inventor components, both for MIT App Inventor or for local versions built using the App Inventor free and
open source code. The difference is that the only way to make an ordinary component available to other people is to
host your own App Inventor instance, whereas with an extension component, you can publish the aix files so that
anyone can import it into any version of App Inventor.
Building an extension component is no more difficult than building an ordinary component but then again, it’s no
easier. If you’ve never created a component before, you should start by reading the these guides:
● How to Build App Inventor from the MIT sources
This shows how to get the MIT App Inventor sources and how to use them to create a local App Inventor
instance on your own computer for personal use
Note: Please see Appendix A: Temporary instructions for obtaining the source code. This shows how to get the
source for the extensions version of App Inventor, during this period when we are still testing.
● How to Add a Component
https://docs.google.com/document/d/1orlYWGlHOY0hmAC0zjadQ4DET2K8U34C8hv5zmuxZLU/pub#h.5z6xqsl8lmwf
8/14