App Inventor

Become an app developer fast

Hello everybody, today we are going to learn how to make android apps without knowing java. We will be using an app maker called App Inventor 2 by MIT.

App Inventor

App Inventor is an open-source web application originally provided by Google, and now maintained by the Massachusetts Institute of Technology (MIT).
It allows computer programming starters to create software applications for the Android operating system (OS). It uses a graphical interface, very similar to Scratch user interface, which allows users to drag-and-drop visual objects to create an application that can run on Android devices.

How to use it

To start creating your own apps, follow these simple steps

And you are done.

How to make my first app

To start a new project, click on Start new project.

new project

Write a name for your new project app.

enter image description here

Wait a few seconds, your project should open automatically (if not, click on the name of the project).

Keep in mind you can change the language of the interface on the top right of the screen. It’s important that you avoid changing the language on the same project or bugs may occur.

The interface

Now that you have your app running, it’s important that you understand how App Inventor 2 works. AI is divided in 2 main sections:

  • Designer: where you add all the objects of your app (like buttons, images, alert messages, maps, sensors, videos…)
  • Blocks: where you tell what each object is supposed to do when you interact with them

enter image description here

On the right you can find the buttons to change from Designer to Blocks.

Designer

enter image description here

The designer is pretty easy to use. Just search for the object you want on the left list called palette, click and drag it to the phone drawing.

palette

Once you drop the item you want, it should be added to the tree display list called components.

components

If you select the button object, you should see a list of properties of it. Here you can change the style and some functionally of each component.

Blocks

The blocks section is a little more complicated to use, but compared to learning java it’s a piece of cake.

blocks

When you select a component, a list of blocks is show. To know what each block do just hover the mouse over it. To use it, just drag and drop it.

blocks

Example

Lets build a simple example so you get how this works. You will notice the idea is pretty simple and the limitations are mostly your imagination.
Follow this steps:

  • create a new project and name it CopitoSystem
  • in designer mode: drag and drop a button component
  • drag and drop a web viewer component
  • select the button component and in the properties bar (right bar) change its text for Load CopitoSystem

example

  • change to blocks view
  • click on the button element and drag the first option (when Button1.click) into the canvas

button

  • now click the webviewer element and drag the go to url block into the button block

webviewer

blocks

  • drag an empty text block

blocks

blocks

  • go to the top menu, select the build option and choose one of the 2 options

blocks

Done, now you can install it in your phone and test it. I usually go for the QR code download, it’s faster than running the laggy emulator.

Keep in mind you must allow external apps installation option in Android in order to install your just created app.

If everything went as expected, you should see something like this:

appinventor

That’s all for now, if you liked this post or have any question feel free to leave us a comment!


Leave a comment