APP INVENTOR 2 - FEMMINELLI - SCUOLAfemminelli.altervista.org/rfGetStarted_AI2.pdf · APP INVENTOR...

Prof. Roberto Femminelli 17 Febbraio2016

APP INVENTOR 2

BUILD YOUR OWN APPS

Prof. R. Femminelli

LESSON 1Android

“The World of Magic”

Prof. R. Femminelli

ANDROID WORLD

Prof. R. Femminelli

QUESTIONS & ANSWERS

� Do you use a smartphone?

� Do you ever use videogames on your smartphone?

� Can you describe your smartphone?� Can you describe which your tipical use of

smartphone is?

� Which are the Apps that you use more frequently?

� Have you ever built an App?

� Do you desire to build your own app?

Prof. R. Femminelli

Would you like to

?

Prof. R. Femminelli

LESSON 2MIT APP INVENTOR

Prof. R. Femminelli 22 maggio 2016

Pag. 6

MIT APP INVENTOR

� MIT App Inventor is a simple development environment for Android Applications, created by Google, but now owned by the Massachusetts Institute of Technology (MIT).

� This Development Environment was created to program simple applications for Android.

� You can access it by using a browser like Firefox or Chrome (IE is not supported) typingthe following URL: http://appinventor.mit.edu.


Pag. 7

HOW TO ACCESS THE IDE

� Once you enter the website http://appinventor.mit.edu you can get inside the IDE by clicking the orange "Create Apps!" button from the top right corner of the page.

� You need a Google Account to login to the IDE.


Pag. 8

HOW TO SET UP YOUR PHONE

� Using an Android device and and WiFiInternet connection,

� You need to install the AI Companion App(AI2 Companion) on your device.

� Download and install the MIT AI2 CompanionApp on your phone (free).

� Connect both your computer and your deviceto the SAME WiFi Network

� Open an App Inventor project and Connect itto your device using a QRCode


Pag. 9

How the Designer Editor work

� The App Inventor Components are locatedon the left hand side of the Designer Window under the title Palette. Componentsare the basic elements you use to make Appson the Android phone.

� To use a component in your app, you need toclick and drag it onto the viewer in the middle of the Designer. When you add a componentto the Viewer it will also appear in the components list on the right hand side of the Viewer.


Pag. 10

How the Designer Editor work

� Components have properties that can beadjusted to change the way the componentappears or behaves within the app. To viewand change the properties of a component, you must first select the desired component in your list of components.


Pag. 11

How the Blocks Editor work

� To start programming the behavior of the app, you need to go to the Blocks Editor. Click the Blocks button to go to the BlocksEditor.

� Once you have the Blocks Editor in front of you, continue to the next step to start programming your app with blocks.


Pag. 12

Event handler blocks

� Those mustard yellow blocks are called event handler blocks. The eventhandler blocks specifiy how the phone shouldrespond to certain events: a button has beenpressed, the peone is being shaken, the useris dragging her finger over a canvas, etc. The event handler blocks are mustard yellow in color and use the word when. Forexample, when Button1.Click is an eventhandler


Pag. 13

Command blocks

� The purple blocks are called command blocks, which are placed in the body of event handlers. When an eventhandler is executed, it runs the sequence of commands in its body. A command is a block that specifies an action to be performed (e.g., playing sound) when the event (e.g., pressing Button1) is triggered.

� E.g. you can see that the command block isin the event handler.


Pag. 14

SUME UP

� You build apps by selecting components and then telling them what to do and when to do it.

� You use the Designer to select componentsand set each component's properties. Some components are visible and some aren't.

� You can add media (sounds and images) toapps by uploading them from your computer.


Pag. 15

SUME UP 2

� You use the Blocks Editor to assembleblocks that define the components' behavior

� when ... do ... blocks define event handlers, that tell components what to do when something happens.

� call ... blocks tell components to do things.


Pag. 16

Sharing and Packaging Apps

� While your device (emulator or phone/tablet) has been connected to App Inventor, yourapp has been running in real time on yourdevice.

� If you disconnect the emulator/phone/tablet from the Blocks Editor, the app will vanish.

� You can always make it return byreconnecting the device.

� To have an app running without beingconnected to App Inventor ……….

Prof. R. Femminelli

Sharing and Packaging Apps

� A)…you must "package" the app to produce an application package (apk file) that can beinstalled on a device (executable form)

� You can use the same strategy to share yourapp

� Furthemore you can share your app in source code form (.aia) that can be loadedinto App Inventor and remixed.

� http://appinventor.mit.edu/explore/ai2/share.html


Pag. 18

REFERENCE

http://appinventor.mit.edu/explore/resources.html


Pag. 19

REFERENCE

� This page describes the components you can use in App Inventor to build your apps: http://ai2.appinventor.mit.edu/reference/components/

� This page contains both video and hypertextual tutorialshttp://appinventor.mit.edu/explore/ai2/tutorials.html


Pag. 20

EXERCISE N.1 : “Pat the Kitty”

� HelloPurr: tap the kitty, hear him meow

� HelloPurr is a simple app that you can build in a very short time. You create a button thathas a picture of a cat on it, and then program the button so that when it is clicked a "meow" sound plays.

� Solution: http://appinventor.mit.edu/explore/ai2/hellopurr.html

Prof. R. Femminelli

LESSON 3

DRAWING AND ANIMATION


Pag. 22

Drawing and Animation

� Canvas

� Balls� ImageSprites

� The difference between a Ball and an ImageSprite is that the latter can get itsappearance from an image file, while a Ball"s appearance can only be changed by varyingitsPaintColor and Radiusproperties.


Pag. 23

Canvas

� http://ai2.appinventor.mit.edu/reference/components/animation.html#Canvas

� A two-dimensional touch-sensitiverectangular panel on which drawing can bedone and sprites can be moved.

� The Width and Height are measured in pixelsand must be positive.


Pag. 24

Canvas

� Any location on the Canvas can be specifiedas a pair of (X, Y) values, where� X is the number of pixels away from the left

edge of the Canvas� Y is the number of pixels away from the top

edge of the Canvas


Pag. 25

ImageSprite

� A 'sprite' that can be placed on a Canvas, where it can react to touches and drags, interact with other sprites (Balls and other ImageSprites) and the edge of the Canvas, and move according to its propertyvalues. Its appearance is that of the imagespecified in its Picture property (unlessits Visible property is False.


Pag. 26

Balls

� A round "sprite" that can be placed on a Canvas, where it can react to touches and drags, interact with other sprites(ImageSprites and other Balls) and the edgeof the Canvas, and move according to itsproperty values


Pag. 27

Main SPRITE Properties

� Enabled

� Heading� Returns the sprite's heading in degrees above

the positive x-axis. Zero degrees is toward the right of the screen; 90 degrees is toward the top of the screen.

� Interval� The interval in milliseconds at which the

sprite's position is updated.


Pag. 28

Main SPRITE Properties

� PaintColor - Radius

� Speed: the speed at which the sprite moves. The sprite moves this many pixels everyinterval.

� Visible :true if the sprite is visible.� X: the horizontal coordinate of the left edge of

the sprite, increasing as the sprite moves tothe right.

� Y: the vertical coordinate of the top of the sprite, increasing as the sprite moves down.


Pag. 29

Main SPRITE Events

� Flung(number x, number y, number speed, number heading, number xvel, number yvel)� When a fling gesture (quick swipe) is made on

the sprite: provides the (x,y) position of the start of the fling, relative to the upper left of the canvas. Also provides the speed (pixels per millisecond) and heading (0-360 degrees) of the fling, as well as the x velocity and y velocity components of the fling's vector.


Pag. 30

Example

� For example, to have a Ball move 4 pixelstoward the top of a Canvas every 500 milliseconds (half second), you would set the Speed property to 4 [pixels], theInterval property to 500 [milliseconds], the Heading property to 90 [degrees], and the Enabled property to True. These and itsother properties can be changed at any time.

APP INVENTOR 2 - FEMMINELLI - SCUOLAfemminelli.altervista.org/rfGetStarted_AI2.pdf · APP INVENTOR...

Documents

Transcript of APP INVENTOR 2 - FEMMINELLI - SCUOLAfemminelli.altervista.org/rfGetStarted_AI2.pdf · APP INVENTOR...