Introducció a App Inventor

From Edutec Wiki
Jump to: navigation, search
Inventor1.png
App Inventor és una plataforma creada per Google Labs amb l’objectiu de realitzar aplicacions mòbils per sistemes operatius Android. L’any 2009 es va iniciar el seu desenvolupament al MIT Center for Mobile Learning i es va alliberar al públic l'any 2010.

App Inventor permet programar aplicacions mòbils, és a dir, programes per al seu ús en dispositius com telèfons mòbils i tauletes. Es poden crear veritablement pel seu ús social, en aprenentatge i servei i per a treballs d'emprenedoria, tot aprenent el procediment per a fer projectes, segons els pensaments de disseny i enginyeril.

La seva intuïtiva programació visual per blocs permet un ús molt fàcil si es desitja i alhora, si cal, més complexitat i per tant anar més enllà que amb altres entorns de programació per blocs. Les aplicacions mòbils poden complementar o interactuar amb projectes de robòtica amb plaques com les Arduino i fets amb Snap4Arduino, per exemple.

 

Comunitat d'usuàries

Actualment compta amb una comunitat de més de tres milions d’usuàries procedents de dos-cents països diferents que comparteix més de cent mil projectes d’arreu del món, que poden ser modificats i ampliats. Les innovacions se solen compartir també, tot acreditant els projectes originals. Promou la col·laboració, típica de la programació i l'enginyeria, entre els membres de la comunitat.

Accès i registre

App Inventor és un programa que funciona en línia. S’hi pot accedir clicant aquí. El requisit per poder-lo utilitzar, com està fet per Google, és introduir un compte de correu electrònic que sigui de Google (tipus gmail). Cal afegir una contrasenya i acceptar els termes d’ús. Una vegada fet això, apareixerà una pantalla com aquesta:

 

RTENOTITLE


Per defecte l’idioma es troba en anglès, és possible modificar-lo mitjançant la opció que ens apareix a dalt a la dreta de la barra de menú:

RTENOTITLE

<meta charset="utf-8"></meta> La primera vegada que s’entra al programa, un missatge indicarà que encara no s’ha realitzat cap projecte i convida a començar-ne un de nou. Una altra opció és prémer directament el botó “nou projecte”.  

RTENOTITLE


En prémer “nou projecte” cal posar un nom, que no contingui espais (només lletres, nombres i/o guions baixos). Es fa a la finestra emergent i després cal prémer el botó "Acceptar”.

RTENOTITLE

La interfície

La interfície del programa consta de dues pantalles que es poden alternar en qualsevol moment: el mode dissenyador d’interfaç de l’app i el de programació per blocs:

  • Mode dissenyador: Aspecte i estètica de l’aplicació. És on s’afegeixen i s'organitzen espaialment els elements.
  • Mode blocs: Comportament de l’aplicació usant blocs encaixables de colors. És on es programen els elements.


Dissenyador

El dissenyador està dividit en 5 seccions, d’esquerre a dreta: la paleta de components, el visor, la llista de components afegits, el gestor d’arxius mèdia i el quadre de propietats. Veurem les seves funcions a continuació amb el projecte d’exemple.

RTENOTITLE

Editor de blocs

En aquesta secció és on es realitza la programació de tots els components que hem inserit a l’apartat del dissenyador. Observem que aquesta secció està dividida en 3 parts: blocs de programació, arxius mèdia (també present en la part de dissenyador) i visor (en aquest cas de blocs).

RTENOTITLE

 

Funcions

Pràctica d'exemple

Fins ara hem explorat la interfície del programa, així que ja estem preparats per programar! Trobem organitzat l’exercici segons diferents parts:

  • Part 1:

Seleccionem la pestanya “projectes” i tot seguit “començar nou projecte”.

RTENOTITLE

Observem que ens apareix una finestra al centre de la pantalla on hem de posar nom al projecte. Comencem escrivint “Exercici1”.

RTENOTITLE

Si hem realitzar correctament els passos ens hauria d’aparèixer la pantalla d’edició del projecte com la que observem a la imatge inferior. Anteriorment hem vist a grans trets les diferents parts de les que disposem, així que anem a aprofundir-hi tot iniciat un repte. Aquest consisteix en canviar el color de fons de la pantalla tot fent clic a un botó.

RTENOTITLE

Haureu intuït que el primer que necessitem és un botó. Per col·locar un botó a la pantalla, arrastrem el primer element que trobem a la paleta d’elements situada a l’esquerre. Fixem-nos a la imatge inferior:

RTENOTITLE

Al col·locar el botó a la pantalla, aquest es posiciona per defecte a la part superior dreta d’aquesta. De la mateixa manera també ens apareix amb un text ja predeterminat. Per poder modificar la posició del botó en la pantalla, hem de fer-ho des del component “pantalla1” que es troba situat a la categoria “components” a la part dreta del visor.

Observem que al fer clic sobre “pantalla1” ens apareixen les propietat d’aquesta al costat. Qualsevol dels elements que inserim a la pantalla els podrem gestionar des d’aquest espai. Així doncs, el que volem es centrar el botó, per tant, busquem les opcions de disposició horitzontal i li canviem l’estat a “centrat”. Fem el mateix amb la disposició vertical que es troba just a sota.

Ens hauria d’aparèixer el botó de la següent manera:

RTENOTITLE

El següent pas és canviar el text de dins del botó i la seva forma. Aquestes propietats a diferència de les anteriors es modifiquen des del component del botó. Observem que al fer clic al botó ens apareixen unes propietats diferents a la dreta. En primer lloc, busquem la categoria “text” i modifiquem aquest. Com que el que volem és que quan es premi el botó aquest canvi el color de fons li posem “Clica’m”. Cal tenir en compte que canviar el nom del botó que apareix a la pantalla no és el mateix que canviar el nom del component (de l’objecte).

RTENOTITLE

El següent pas és canviar la mida del botó. Això es fa des de la categoria “Alçada” i “Amplada”. Al obrir cadascuna d’aquestes tenim la opció de fer-lo tant ample o alt com la grandària de la pantalla amb la opció “Ajustar al contenidor”. En aquest cas farem ús dels píxels i el posarem a 150x150.

RTENOTITLE

Per últim podem retocar la mida o les característiques (negreta, cursiva, etc.) del text, entre d’altres.

RTENOTITLE

Fins aquí ens hem dedicat a crear la part estètica del botó. Ara entrem en la programació.

Per passar a la programació hem de canviar de secció i anar a la de blocs:

RTENOTITLE

Ja a la zona de blocs, observem que si fem clic sobre “pantalla1” se’ns mostren tots aquells blocs amb els que es pot treballar la pantalla. El mateix passa amb el component “botó1”.

RTENOTITLE

Comencem arrastrant a la pantalla de programació el bloc que ens permet posar un color de fons:

 RTENOTITLE

Escollim el color groc que trobem a la categoria “colors” i l’encaixem a la peça que tenim:

RTENOTITLE

Ara només ens falta determinar quan volem que s’executi aquesta acció, que  en aquest cas és quant es cliqui el botó que hem dissenyat.

RTENOTITLE

Per comprovar si el que hem programar funciona cal fer-ho consultant l’apartat “descarrega” d’aquest programa”.

  • Part 2

El següent pas, consisteix en  crear un segon botó per tal de canviar la pantalla a dos colors. Seguirem el mateix procediment que hem fet pel primer botó (podem llegir-nos de nou el procediment anterior per crear-ne aquest nou). També caldrà canviar el text del botó que ja teníem, en comptes de clica’m li escriurem el color que volem que canviï el fons.

RTENOTITLE

En quan a la programació durem a terme el mateix procediment, és a dir, duplicarem el bloc que ja teníem per un d’igual però li canviarem el “botó1” pel “botó2” i també el color al que canviarà.

RTENOTITLE

  • Part 3

Fins aquí hem programat 1 acció amb 1 sol botó (canvi de fons quan fem clic al botó), 2 accions amb 2 botons diferents ( un botó per cada color de fons) i el següent repte que proposem és2 accions amb 1 sol botó. En aquest cas, eliminem un dels botons que hem generat ja que només n’utilitzarem un. Acte seguit farem servir dos activadors d’esdeveniments diferents pel mateix botó; quant fem “clic” i quant fem un “clic llarg”. Fixem-nos amb l’exemple inferior:

RTENOTITLE

RTENOTITLE

RTENOTITLE

  • Part 4

Per últim, farem un canvi de color de fons amb un únic esdeveniment i botó però fent ús d’un condicional.

RTENOTITLE

 

 

Visualització dels projectes

Per poder visualitzar el projecte que anem creant, és possible fer-ho de diferents formes. En aquest cas exposarem la més practica d’utilitzar, ja que no és necessari instal·lar cap programar a l’ordinador. No obstant, si que és necessari instal·lar una aplicació en el dispositiu on provarem el projecte realitzat (en el mòbil o tableta). Es tracta d’un App que funciona com a lector del projecte per tal de poder-ne anar veient els resultats del que anem creant.  

Aquesta opció de la que parlem funciona a través de wi-fi. Aquí tenim l’enllaç per descarregar-la: Descarga en la Play Store

Appinventor MIT AI Companion.jpg

Un cop tenim l’aplicació descarregada al dispositiu, retornem a l’app inventor i  fem clic sobre la opció “connectar” de la barra de menú i d’entre les opcions que es despleguen, seleccionem la primera “Al Companion”.

RTENOTITLE
Observem que ens apareix un codi QR amb 6 lletres. De manera que obrim l’aplicació que ens hem descarregat i escanegem  aquest codi o ve escrivim les 6 lletres.

RTENOTITLE