App Inventor 2: Environment of Development to Make Apps for Android

App Inventor 2: Environment of Development to Make Apps for Android

App Inventor 2: environment of development to make appS for android

In order to make an App it is possible to use "App Inventor”, the online platformthat the Institute of Technology of Massachusetts offers topeople who want to make apps. App Inventor is available online at this link: through the browser (Chrome,Firefox or Safari).

MIT App Inventoris asoftwarethat allows to exclusively create apps for Android platform, it is used in 159 countries and it counts about two million consumers.

This platform has a graphic interface that also allows the less experts to organize every aspect of their own app without a code.

At this link: is possible to find instructionsto use this platform whichcan be accessedwitha Google Account.

App Inventor is composed by three parts:

-Components Design that opens in the browser window. In this environment it is possible to select the components for your app and to specify their properties.

-The Blocks Editor opens in another window that is separated from Components Designer and it is used to insert instructions.

-An emulator which teststhe behavior of the created appeven if the official site recommends usingthe ownAndroidsmartphone or tablet to test the app.

To start

To create a projectyou must click “Start new project”, insert the project name(a word without spaces) and click “Ok”.

TheComponents Designer

The first window to open is“Components Designer”.

The components are all the elements or objects that can be used to create the App. Some components are very simplelike aLabelthat shows the text on the desktop or like aButton. Other components are more elaborated: a Canvas can contain fixed images or animations; an Accellerometersensor, a motion sensorthat works asa Wii controllerandit detects whenyou move orshake thephoneor components that make or send messages, play music and videos, get information from websites, etc.

The Designer is subdivided into different areas:

  • On the left there is a list of components that can be used in the project.Any componentthat has been draggedin the Viewer (Central part)thenappearsalsoon the right.
  • In the center there is the Viewer. Hereyou place componentsasyouwish them to appearin the app and you can get a preview of the app. To see howyour applicationwill really look , you shoulddownload it on yourphoneordisplay itin the emulatorof App Inventor. On the right of the Viewer there is the list of components used in the project. Any component dragged into the Viewer is displayed in this list. At the beginning, the project has only one component listed: Screen1, which represents the screen of the phone. Under the components listthere is a sector which shows media (images and sounds) contained in the project.
  • On the right, there isa section that showsthe components properties; when you click on a component in the Viewer, you can see its properties listed on the right. The properties are details of the component that may be changed. For example, when you click on a Label, you can visualizethe properties of the color, text, font, etc.At the beginning,properties of the display (called screen1) are shown in this area. Such properties includea background color, a background imageand a title. If you want to open the commands editor (Blocks Editor) from this window, click

on “Blocks”.

According to the block that you choose (Control, Logic, Math, etc.), App Inventor shows youthe blocksavailable to buildeventsorassign properties andvaluesin the central part.

By dragging the blocks to the center and opportunely assembling them, you can make the app you want.

The basketat the bottom rightcan be used toremove the blocksto be deleted.

How to test theapp

To test the app you should choose

“Al Companion” from Connect menu.

On the display,a QR code appears and it is readby “MIT AI2 Companion”,which is downloaded and installedfrom Play Store on own smartphone:it allows you to see the executionof the app.

If there isn’t a Wi-Fi, you can connect your smartphone with the cable to the USB port. If you haven’t got an Android smartphone, you can start the program “Ai Starter” (available to theaddress ) on your computer and then launch the emulator, in the “Connect” menu.

Conclusions


App Inventor 2 isa programming environmentforApp availableonlineand free.

In this environment, you can make appsselecting components in the Designer andthenyou define the behaviorof the componentsby assemblingthe blocksin the Block. You cancompile applicationsthatare builtanddownload them on yourcomputer and your phone.Once installed on the phone, the App becomes a real , functional App and it is independent from App Inventor.

How to create the app to play sounds

This app created by App Inventor2 allows to play sounds of the cat and of the Ferrari.

To begin:

  • Insert two buttons in the first screen and insert imagesof the Ferrari and of the cat in their Image property
  • You need to have the two sounds in WAV format to associate them to the two buttons.
  • Go to media and drag the two sounds buttons in the home screen.
  • In Source property of the sound button, insertthe sounds with a click on Upload file.
  • Insert ‘accelerometerSensor1’ which allows to playthe Ferrari sound by shaking the phone. You’ll find this key in the Sensor window.

Now continue with the planning. In the upper right, click on the Blocks button .

If you click on the images, these blocksplay the sounds.

-The button1.click block will play the sound1.Play. The button2.click block will reproduce the sound2.Play.

-The “sound.vibrate millisecs” block controls the intensity of vibration and 500 is the value we place on vibration.

-The “AccelerometerSensor1.Shaking” block is used to play the sound of the Ferrari when you shake the phone

We learn the numbers

This app, created for children from different European countries, is designed to translate the following numbers (1 to 5)into different languages (Italian, German, Finnish and Portuguese).

Displayed are both numbers and their transcription in English, our working language, our communication language, the vehicular language.

Pressing 'click' corresponding to the flag chosen, you can hear the right pronunciation of the number selected.

Now we'll see the commands, by which you can run the app.

These are the buttons used to play the numbers in Italian. So when (When) you click on the button "click" (button1 etc ...) TextToSpeech1 reproduces the number in Italian language.

These are the buttons used to play the numbers in German. So when (When) you click on the button "click" (button6 etc ...) TextToSpeech2 reproduces the number.

These are the buttons which are used to reproduce the numbers in Finnish. So when (When) you click on the button "click" (button7 etc ...) TextToSpeech3 reproduces the number.

These are the buttons which are used to reproduce the numbers in Portuguese. So when (When) you click on the button "click" (button8 etc ...) TextToSpeech4 reproduces the number.

HOW TO CREATE A XYLOPHON

This app can replay the sounds of the different musical notes.
In the first screen we find eight buttons of command called buttons, whose sounds are connected by seven musical notes (the‘do’ note/Cis replayed twice). Now we will show you the passages to create this app.

To start:

  • Put in eight buttons (button) in the first screen then change the text bynaming the notes.
  • Line up center buttons and color it.
  • Then you need to have the different sounds in format wav to put them into another directory.
  • After saving the sounds in the directory, go to media and click the button sound in Home.
  • In media, the button ‘Upload file’ allows to uploadthe sounds.

On the top right click on button Blocks.
Once you have clicked on the button corresponding to the note, for ex. Button1, you set Sound1 to 1.wav and so when you call it, the sound DO = C will be reproduced.

Then do the same for all different notes consecutively (until button8.click).

-The button sound1.source, together with audio track, willlook for the sounds to play when you click the note.

-Finally the button sound.1.Play is needed to play a sound.

App blackboard

This app has some functions, like Paint.

It allows us to draw and color in the box with the different colors offered .

In addition you can choose from four different sizes the width of the pencil that you want to use .

Obviously, if you do not like the result of your artwork, you can completely delete it by clicking "Clear all " and do it all again, or delete only small sections of your design, using types of different sizes ( click : " R1 " small eraser , " R2 " large eraser ) .

On the other hand, if you like the design and want to keep it, give it a name and click "Save " , so the program will save it on your device.

" When ( pen 1,2,3,4 ) .Click " allows us to choose the different size of pen to use

" When ( pink, red , green) .Click " allows us to choose the color of the pen

" When ( clean ) .Click " allows us to select the eraser

" When ( textbox) .Click " allows us to insert a text box

" Initialize globs ( y , a) " makes the y variables and at equal to 0

" When ( saves ) .Click " allows to save the image created in the phone picture folder

" When ( slider1 ) .positionchanged " allows to create dots of various sizes

PianoPiano_ForteForte

DESCRIPTION

PianoPiano_ForteForte is an app which tries for to emulate the best sound of the piano. When you open the app in your android phone the following screenwill appear:

When you click the “Suona” button, another screen appears and you can listen to a sound which reproduces a scale of C Major. The App can open itself in vertical or in horizontal direction.

Now you can play the piano and have fun!

DEVELOPMENT

The app is formed by a Screen which contains twopreceding screens.
The screen is divided into two VerticalArrangements.

VerticalArrangement1 contains the Piano screen, with all buttons, which correspond to the keys of the piano.

VerticalArrangement2 contains the initial image of the piano, the starting button and other improvement elements of the graphic.

Also, there is a Sound componentwhich allows to use audio files and play them.

CODING

Button15 is the “Suona” button and it allows to go from one arrangement to another, through their formulations of visibility and it also looks for the “Intro.wav” file and plays it.

The buttons of the keys load sounds of various musical notes and play them.

1