How to Get Started with MIT App Inventor

Mobile apps play a crucial role in the Internet of Things (IoT) ecosystem, serving as interfaces through which users can interact with and control IoT devices. Various IoT devices used in consumer electronics, home automation, logistics, and inventory, among others, are controlled or managed through mobile applications.

For example, users can rely on an application installed on their smartphones to control different appliances, security systems, alarms or other devices – similar to a remote control. An app can also offer real-time monitoring of these devices, providing timely notifications and alerts. They can also be useful for visualizing data (such as sensor data) received from IoT systems in a comprehensive manner.

Essentially, an application serves as a centralized control center for managing multiple IoT devices that share a common or different network. Mobile apps allow users to securely access their connected devices and provide a platform for customizing IoT systems and customizing settings according to user preferences.

For embedded engineers, application development is a unique domain. Understanding how mobile apps interact with and manage different devices is critical. For those who need to develop a mobile app or prototype for IoT devices (for smaller or mid-tier IoT projects), there are useful visual programming platforms, including those for non-tech-savvy users.

One such programming platform for developing apps is MIT App Inventor. In this article, we will discuss the MIT App and how to best start using it.

What is MIT App Inventor?
MIT App Inventor is a web-based, open-source platform for creating mobile apps for Android devices. Google initially developed it and it is now maintained by the Massachusetts Institute of Technology (MIT). The platform provides a visual programming interface where users can create a mobile application using drag-and-drop visual elements. Instead of writing code, users assemble blocks that represent different functions and behaviors of the application. Developing applications in this way does not require knowledge of any programming language.

Users can create a stylish and fully functional mobile app by combining various visual elements according to appropriate logic. Although MIT App Inventor only works for Android devices, there are third-party tools for adapting an app designed for iOS.

MIT App Inventor is the first platform to introduce block-based programming into mobile app development. Many other block-based programming platforms for mobile app development, such as Thunkable, Kodular, and AppyBuilder, are based on or inspired by MIT App Inventor.

The story
Around 2007, MIT professor Hal Abelson of Google created the concept of App Inventor. This occurred during a Google initiative to make app development accessible to non-programmers. In 2009, Google began testing App Inventor in several schools and universities. A year later, Google decided to make the technology open source, seeing its educational potential.

MIT later took over the project, integrating it into the newly created MIT Mobile Learning Center, which Abelson co-directs. MIT relaunched App Inventor in 2012, hosting it on its own servers and continuing its advancement.

Since its relaunch, MIT App Inventor has undergone several improvements with a new update almost monthly. In 2021, support for iPhones and iPads was also added with the release of the iOS Companion app.

Currently, MIT App Inventor continues to lead the way in blockchain-based mobile app development, despite competition from platforms like Thunkable, Kodular, and AppyBuilder. More than one million monthly users have more than 85.4 million apps built using MIT App Inventor.

Why choose MIT App Inventor?
You should try MIT App Inventor to develop mobile apps for IoT projects for several reasons. The platform has a fairly long history and has evolved, providing a beginner-friendly block-based option for app development. No programming languages ​​are required for use, which means there is little likelihood of syntax errors and other text programming complexities.

Of course, a significant advantage is that MIT App Inventor is free and open source. Although the created apps only run on Android, they can be easily adapted for iOS using third-party tools like PhoneGap/Cordova, Kodular, Thunkable or AppyBuilder. The MIT app is ideal for rapid prototyping and suitable for IoT.

Applications developed using the MIT App remain on the MIT server so that a project can be managed and resumed from anywhere at any time. Applications can also be tested live using an emulator (aiStarter), a WiFi connection, a USB connection and an Android smartphone or Chromebook.

IoT integration, location services, social media integration, artificial intelligence, and multilingual support are some of the most tempting features to use with MIT App Inventor.

What can you do with MIT App Inventor?
You can create apps for controlling IoT devices, location tracking, multimedia, utilities, integrated social media apps, and more. MIT App Inventor is also an excellent solution for quickly prototyping app ideas. Advanced users can create their own custom extensions to add new functionality and features.

It is an easy-to-use platform to learn and experiment with mobile app development. However, this block-based programming platform has limitations for developing advanced or enterprise-grade applications.

Inventor Interface
To create a mobile app using MIT App Inventor, first visit the MIT App Inventor website .

Click on the 'Create Apps' button and log in to App Inventor through your Google account. Make sure you complete authentication to continue. Once you have successfully logged into App Inventor, you will see the project dashboard.

Click the 'Start a blank project' button and name the project. Consider naming your first project 'HelloAppInventor'. After creating a new project, an App Inventor Designer and an App Inventor Block Editor will appear in the dashboard.

App Inventor Designer presents the interface where you can add visual components to your application. Components are added to a canvas so you can see how they would appear in the application. A mobile application can contain one or more screens.

In the App Inventor Block Editor, program blocks can be added, which define the application logic and how the visual components should behave.

At the top of App Inventor Designer, there are buttons that allow you to add, remove, and navigate screens.

On the left side, you will see a palette window where you can find components for your application, which you can drag to the main screen in the 'Viewer'. In the center, there is a preview window where the application screens are displayed. You will find the 'Component' and 'Media' windows to the right of the viewer window.

The component window shows components dragged and added to the canvas of a mobile application. The media window shows multimedia components added to the screen. The 'Properties' window is on the right side of App Inventor Designer. Indicates which of the properties are selected in the component window.

In the App Inventor Block Editor, the Blocks window is on the left side where you will find behavior blocks that you can add to your application. In the blocks window there are drawers for expanding various types of program blocks.

Below the blocks window is the media window, where you'll find blocks for adding behaviors to media components. On the right is the Viewer window, where you can drag and add program blocks to the application.

Application architecture
A mobile app created in MIT App Inventor consists of four main building blocks.

1. Components
2. Variable
3. Behaviors/event handlers
4. Procedures

Components are the visual objects or elements that you add to your mobile app. Components are added to a mobile screen through App Inventor Designer.

There can be multiple screens in an application. Components can be visible or invisible elements. Some examples of visible components are Button, Label, Textbox, Password Textbox, etc. Examples of invisible components are LocationSensor, TextToSpeech and Texting, etc.

MIT App-Inventor is an event-driven programming platform. It works by executing procedures (actions) in response to events. These functions are called behaviors or event handlers, defining how the mobile app should respond to external or user-initiated events.

Procedures are reusable groups of program blocks. They are similar to a function in a programming language, which wraps a group of program instructions into a callable identity.

Components
Components are visual objects or elements that you add to your mobile app, and hundreds of them are available in MIT App Inventor. There are so many components available that it is not even possible to list or name each one of them. Furthermore, new ones are continually being added.

Most components can be categorized as follows.

1. User Interface Components: Examples are Buttons, Labels, TextBoxes, Slider, Picker, CheckBox, RadioButton, Switch, Image, VideoPlayer, Canvas, Layout (Horizontal, Vertical, Table), etc.
2. Media Components: Camera, Camcorder, Player, Sound, ImagePicker, VideoPicker, SpeechRecognizer, TextToSpeec,h etc.
3. Sensors: Location sensor, Proximity sensor, Light sensor, Accelerometer sensor, Gyroscope sensor, etc.
4. Connectivity components: BluetoothClient, BluetoothServer, Web, WebViewer, WiFiDirect, etc.
5. Storage components: CloudDB, File, TinyDB, FusionTablesControl, etc.
6. Social Components: ContactPicker, PhoneNumberPicker, Twitter, Sharing etc.
7. Drawing and Animation: ImageSprite, Ball, Canvas, etc.
8. LEGO MINDSTORMS Components: NXT Direct Controllers, EV3 Motors and Sensors
9. Custom components contributed by advanced users.

Variables
Variables store data that can be changed and accessed throughout the application. They can be global or local variables. Global variables are accessible from anywhere in the application and store data that needs to be shared across different parts of the application. They are declared in the Block Editor using the 'initialize global name to' block.

Local variables are accessible in the procedure or event handler where they are declared and are used to store temporary data needed only in a specific block of code. Local variables are declared using the 'initialize local name to' block within a procedure or event handler.

Events and event handlers
Events are specific actions or occurrences that trigger the execution of blocks in the Block Editor. They can be external or user-initiated events.

Examples include:

Event handlers are blocks that define how an application responds to different types, such as user interactions or system changes. These handlers control application behavior in MIT App Inventor. They allow developed applications to dynamically react to user inputs, sensor data and external events. Event handlers are defined by dragging, dropping, and combining multiple program blocks in the App Inventor Block Editor.

1. User interaction events: Button.Click, ListView.AfterPicking, CheckBox.Changed, Slider.PositionChanged etc.
2. Touch events: Canvas.Touched, Canvas.Dragged, etc.
3. Sensor events: AccelerometerSensor.Shaking, OrientationSensor.OrientationChanged, LocationSensor.LocationChanged, etc.
4. Timer events: Clock.Timer.
5. Communication events: BluetoothClient.ReceiveText, Web.GotText, etc.
6. Data storage and retrieval events: File.GotText, TinyDB.DataChanged, etc.
7. Screen events: Screen.Initialize, Screen.BackPressed, etc.
8. Media events: Player.Completed, Sound.Error, etc.
9. Component-specific events: VideoPlayer.Completed, Camera.AfterPicture, etc.

Procedures
Procedures are a way of grouping program blocks into reusable units in MIT App Inventor. Although program blocks are analogous to program statements in a programming language, procedures are similar to functions in a programming language.

Just like functions, procedures in the MIT application can return a value or perform a task without returning any value. Procedures that do not return a value are defined using 'procedure do' blocks. Procedures that return a value are defined using 'to procedure return' blocks.

To use a procedure, you must call it from another part of your application. For those without a return value, you will need to use the 'call procedure do' block. For those with a return value, it will be necessary to use the block that represents the name of the procedure, which will return a calculated value.

Designing for IoT
MIT App Inventor is an excellent platform for developing mobile applications for IoT, supporting various IoT protocols and devices, including Bluetooth and WiFi. IoT capabilities can be expanded by adding custom extensions to App Inventor. This is the most beginner-friendly blockchain-based mobile app development platform for rapid prototyping IoT apps without learning code.

MIT App Inventor is specifically popular among educators, students, and hobbyists interested in creating their own apps without programming language knowledge.

The platform is maintained by MIT and supported by a large user base. It also enables live testing of mobile IoT applications through various methods. However, for enterprise application projects, conventional software frameworks like React Native and Flutter are ideal.

Getting Started with MIT App Inventor
Building IoT mobile apps in MIT App Inventor is simple. After you create a new project in App Inventor, you can design your app's user interface in the Designer interface without knowledge of code.

To build your app's user interface, drag and drop the desired components onto the dashboard canvas and configure their properties. You can add multiple screens to a mobile app.

Once you've completed this, you can define how your application should behave by adding program blocks in the Block Editor interface. You can also combine multiple program blocks into procedures for reuse. Remember that these blocks are similar to program instructions, and procedures are similar to functions in programming languages.