Primer contacte amb

App Inventor

Optativa d'informàtica
Curs 2019/2020
Joan Martínez
 Què aprendràs en aquest tema?
 En aquest tema començarem a treballar amb App Inventor per conèixer el
seu funcionament i les seves possibilitats.
 Se us proposen una sèrie de materials, tant escrits com en forma de
videotutorials per ajudar-vos a fer les primeres passes.
 Les activitats que heu de realitzar són molt simples i estan molt guiades,
però us donaran pautes per poder desenvolupar posteriorment la vostra
app.
 Els diversos apartats són:
 Què és App Inventor?
 El web d'App Inventor
 Pràctiques amb App Inventor
 Què aprendràs en aquest tema?

 Per a cadascuna de les activitats hauràs de lliurar:

 L'aplicació empaquetada en format .apk (Android application package)
 El codi font de l'aplicació (.aia)
 En aquest enllaç trobaràs com fer-ho:
http://appinventor.mit.edu/explore/ai2/share.html
 Què és APP INVENTOR?

 App Inventor és un entorn de programació visual per blocs, lliure, que permet
generar aplicacions per a dispositius mòbils Android de forma simple i ràpida.
 Aquest entorn va ser ideat per Google i posteriorment va continuar el seu
desenvolupament el Massachusetts Institute of Technology (MIT), que és el
responsable actual.
 Darrera d'App Inventor hi ha tota una comunitat d'usuaris que comparteixen les
seves creacions, molts exemples de programes disponibles i recursos de consulta
en forma de vídeotutorials pas a pas.
 Aquest és l'entorn de programació que fareu servir per desenvolupar el vostre
projecte.
 En aquest tema farem els primers passos creant aplicacions senzilles per tal que
us comenceu a familiaritzar amb les seves possibilitats.
 Entorn APP INVENTOR?

 Quan anem a http://appinventor.mit.edu arribem a una plana on trobem

aquesta capçalera:

 Podem navegar per la web de l'App Inventor, veure la documentació i els

recursos que hi ha i, finalment, si volem entrar a l'entorn de programació,
hem de fer clic al botó Create apps! Per accedir-hi ens hem de validar amb
un compte de Google.
 Un cop validats, accedim a una pantalla on hi haurà tots els projectes que
anem creant. Per començar a treballar creem un nou projecte amb el
botó Start new project i li donem un nom:
 Entorn APP INVENTOR?

 Quan ane
 Entorn APP INVENTOR?

 Quan ane
 Entorn APP INVENTOR?

 En aquest entorn de treball podem distingir diferents zones, que en aquesta

imatge estan marcades en diferents colors:
 Vermell: Els diferents components, agrupats per categories, que podem utilitzar en la nostra
app.
 Blau fosc: Espai, que vol representar la pantalla del dispositiu mòbil, on cal col·locar els
diferents components a utilitzar.
 Rosa: Zona on hi ha el llistat de tots els components utilitzats, des d'on se'ls pot canviar el
nom o eliminar-los.
 Carbassa: Espai on podem veure i modificar les propietats del component que estigui
seleccionat.
 Groc: Espai des d'on pujar fitxers multimèdia (imatges, sons…) a la nostra app.
 Blau cel: Botons per definir diferents pantalles a la nostra app.
 Morat: Botons per canviar entre el mode disseny i el mode programació.
 Verd fosc i verd clar: Zona de menús del programa.
 Mètodes de treball

 L'App Inventor té tres modes de treball diferents. Els botons de la

zona de color morat ens permeten canviar entre el mode
disseny (Designer), on dibuixem com serà la pantalla de la nostra app,
i el mode programació (Blocks), on podrem programar el
comportament dels diferents components:
 Entorn APP INVENTOR?

 Quan ane
 Mode designer (dissenyador)

 Aquest mode ens permet afegir components arrossegant-los

directament a la part central i observar com es visualitzaria a l’aparell.
Els elements a afegir estan situats a la part esquerra i els elements
afegits al requadre “Components” a la dreta. Sota dels components
podem veure a l’altre requadre que hi ha la possibilitat de pujar
fitxers multimèdia per fer-los servir a les nostres aplicacions (sons,
fotografies, vídeos).
 Entorn APP INVENTOR?

 Quan ane
 Mode blocks (programació)

 En aquest mode podem veure tots els components que hem afegit al
nostre projecte a la pantalla 1 (Screen 1), i, en seleccionar cadascun d'ells,
veiem totes les instruccions que podem utilitzar amb aquest component. A
la part superior esquerra tenim tota la sèrie de blocs per defecte (Built-in)
que sempre podrem utilitzar en els nostres projectes independentment
dels components que hi hagi.
 A la part superior dreta trobem un dibuix d’una motxilla. Dins d’ella podem
desplaçar i guardar trossos de programa de forma que podem
reaprofitar-los a d’altres pantalles del mateix projecte o a d’altres
projectes que tinguem començats. La imatge de la paperera a la part
inferior indica on arrossegarem els trossos de programa que volem
eliminar.
 Mode execució

 Finalment, el tercer mode de treball és el mode

execució, on podem veure en funcionament el
programa que hem creat. Hi ha tres formes de
veure aquest mode:
 Connectar l'ordinador i el dispositiu mòbil a una
mateixa wifi (AI Companion)
 Utilitzar l'emulador de dispositiu mòbil des del
mateix ordinador
 Connectar el dispositiu mòbil a l'ordinador amb
un cable USB
 Mode blocks (programació)

 Creeu una carpeta dintre de la carpeta del crus amb el nom

Comencem_App_Inventor

 Aquí teniu algunes webs interesants:

 http://appinventor.mit.edu/
 http://appinventor.mit.edu/explore/beginner-tutorials-short.html
 Pràctiques

 A continuació realitza aquestes pràctiques, recorda de pujar el fitxer

*.aia al teu drive de cadascuna de les pràctiques amb el nom
corresponent.
 Pràctica 1

 Creant la teua primera aplicació. HelloCodi

 HelloCodi és una aplicació senzilla que podeu crear en molt poc temps. Creeu
un botó que tingui una imatge de Codi l’abella al damunt i, a continuació,
programeu el botó de manera que quan es faci clic, el telèfon sonarà.
 http://appinventor.mit.edu/explore/ai2/hello-codi.html
 Un cop hagis completat el tutorial i hagis verificat el correcte
funcionament de l'app, envia el fitxer *.aia amb el
nom hellocodi_cognoms.aia al teu professor o professora.
 ATENCIÓ: Guarda el fitxer que has creat al teu Drive personal.
 Pràctica 2

 PART 1:
 http://appinventor.mit.edu/explore/sites/all/files/hourofcode/TalkTo
MePart1.pdf
 Guarda el fitxer amb el nom: TalkToMe.aia
 PART 2:
 http://appinventor.mit.edu/explore/sites/all/files/hourofcode/TalkTo
MePart2.pdf
 Guarda el fitxer amb el nom: TalkToMe2.aia
 Pràctica 3

 http://appinventor.mit.edu/explore/sites/all/files/hourofcode/BallBo
unceTutorial.pdf
 Guarda el fitxer amb el nom: BallBounce.aia
 Pràctica 3

 http://appinventor.mit.edu/explore/sites/all/files/hourofcode/Digital
Doodle.pdf
 Guarda el fitxer amb el nom: DigitalDoodle.aia