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

Transcription

1 1

2 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 platform that the Institute of Technology of Massachusetts offers to people who want to make apps. App Inventor is available online at this link: through the browser (Chrome, Firefox or Safari). MIT App Inventor is a software that 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: it is possible to find instructions to use this platform which can be accessed with a 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 tests the behavior of the created app even if the official site recommends using the own Android smartphone or tablet to test the app. To start To create a project you must click Start new project, insert the project name (a word without spaces) and click Ok. 2

3 The Components 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 simple like a Label that shows the text on the desktop or like a Button. Other components are more elaborated: a Canvas can contain fixed images or animations; an Accellerometersensor, a motion sensor that works as a Wii controller and it detects when you move or shake the phone or components that make 3

4 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 component that has been dragged in the Viewer (Central part) then appears also on the right. In the center there is the Viewer. Here you place components as you wish them to appear in the app and you can get a preview of the app. To see how your application will really look, you should download it on your phone or display it in the emulator of 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 list there is a sector which shows media (images and sounds) contained in the project. On the right, there is a section that shows the 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 visualize the properties of the color, text, font, etc. At the beginning, properties of the display (called screen1) are shown in this area. Such properties include a background color, a background image and a title. If you want to open the commands editor (Blocks Editor) from this window, click on Blocks. 4

5 According to the block that you choose (Control, Logic, Math, etc.), App Inventor shows you the blocks available to build events or assign properties and values in the central part. By dragging the blocks to the center and opportunely assembling them, you can make the app you want. The basket at the bottom right can be used to remove the blocks to be deleted. How to test the app To test the app you should choose Al Companion from Connect menu. 5

6 On the display, a QR code appears and it is read by MIT AI2 Companion, which is downloaded and installed from Play Store on own smartphone: it allows you to see the execution of 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 the address ) on your computer and then launch the emulator, in the Connect menu. Conclusions App Inventor 2 is a programming environment for App available online and free. In this environment, you can make apps selecting components in the Designer and then you define the behavior of the components by assembling the blocks in the Block. You can compile applications that are built and download them on your computer and your phone. Once installed on the phone, the App becomes a real, functional App and it is independent from App Inventor. 6

7 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 images of 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, insert the sounds with a click on Upload file. Insert accelerometersensor1 which allows to play the 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 blocks play 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 7

8 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. 8

9 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" (button 6 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" (button 7 etc...) TextToSpeech3 reproduces the number. 9

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

11 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/c is 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 by naming 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 upload the sounds. DO = C RE = D MI = E FA= F SOL = G LA = A SI = B 11

12 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, will look for the sounds to play when you click the note. - Finally the button sound.1.play is needed to play a sound. 12

13 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. 13

14 " 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 14

15 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 screen will 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 two preceding screens. The screen is divided into two Vertical Arrangements. 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. 15

16 Also, there is a Sound component which 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. 16

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