Extensions (tutorial)
Published October 1, 2021
To understand how to use extensions, first we need to answer the question: what are extensions?
🏷️ Tags: #newbie, #tutorials-and-guides, #extensions
What are extensions?
Extensions are extended components in MIT App Inventor that you cannot find in the components list. For example, you may need an extension component called a Rating Bar because there isn't any extensions that is a rating bar in MIT App Inventor.
Extensions are AIX files. Make sure you upload the correct extension file.
To make an extension, you will need to code. Fortunately, for beginners, you don't have to, because probably someone has coded for you. Coding extensions is not easy, so occasionally you have to purchase extensions. These are usually ad extensions, helping you to add apps into your app.
A very useful link is the Pura Vida Apps (Extensions Directory) made by Taifun Baer. You can find useful extensions in that link.
How to import extensions?
I have already made an extension for you: Geometry. This extension helps you to calculate the areas, perimeters, or properties of different shapes.
Download the extension's AIX file by the download button below.
The extension's name is com.gordonlu.geometry. Do not change the name. Make sure it is in your Downloads.
Go to MIT App Inventor.
Under Palette, you find a category called Extensions. Click on the drawer.
Click 'Import extension'.
Find my extension in the popup that allows you to choose the files. First go to Downloads, then find it.
Select the extension in the popup.
Click 'Import'.
After a few seconds, you can find my extension under the Extension category. Drag it into the Viewer just like dragging a component to the Viewer.
I will publish a demo later.
Blocks of my extension?
Add a Label to the Viewer in the Designer window.
Open the Blocks editor.
Click on my extension Geometry1. You can see there are a lot of purple blocks there.
Choose the block call Gemoetry1. AreaOfRectangle. Drag the block to the Viewer.
You see the sockets length and width of the block.
a. Add a math number block for both of the sockets.
b. Reset the number of the first math block (attached to length) to 5.
c. Reset the number of the second math block (attached to width) to 4.
Drag out a set Label1. Text to green block to the Blocks editor.
Combine the green and purple blocks together.
Drag out a when Screen1. Initialize block.
Snap the event (yellow) and the setter (green) together. You should have something like this.
Test your app out
Now, test your app out by going to Connect, then AI Companion. The connection guidelines of the website will be published later.
After you test your app out, what is the text of your label? Of course, 20. If you see this, that means you have a successful connection and you have completed this tutorial!
Make sure to check out Pura Vida Apps to see guidelines of how to use extensions. For example, if you have a multi-screen app and you need extensions, when testing the app out, in order to prevent bugs, additionally drag the extension to the Viewer in Screen1.
