Tresavis

App Inventor es un servei basat en el núvol, per fer les nostres pròpies Apps per mòbils.

Es pot accedir a App Inventor amb els navegadors Chrome, Firefox, Safari. Es compatible amb Windows, Mac o Linux.

Es un editor online per construir aplicacions per mòbils Android, el codi s'escriu en forma de blocs. Permet descarregar el codi directament de la web al mòbil

---

Tipus de connexió.

AHi ha tres maneres de connectar el nostre mòbil Android amb AppInventor per el funcionament de les Apps:

1. Mòbil i Wifi.

2. Mòbil i cable USB.

3. Emulador en pantalla.

En aquest tutorial farem servir el segon sistema, per cable USB.

Connectant al mòbil per cable USB.

---

Per comunicar-se App Inventor amb el nostre mòbil, es necessari instal·lar en el mòbil el programari AI2 Companion App i en el ordinador la App Inventor Setup software Package.

Pas 1: Instal·lar el software de configuració en el ordinador Windows.

1. Instal·lar la App Inventor Setup software Package.

2. Instal·lar els drivers de Windows.

Instal·lar la App Inventor Setup software package.

Es té que instal·lar com administrador.

Descarregar el instal·lador en : https://appinv.us/aisetup_windows

Seguir els passos del Wizard del instal·lador, no canviar la localització de la instal·lació, que en ordinadors de 64 bits es :

C:\Program Files (x86)\AppInventor\commands-for-appinventor

Instal·lar els drivers de Windows.

App Inventor Setup software conté Google USB driver, els cuals serveixen per els seguents mobils:

T-Mobile G1* / ADP1

T-Mobile myTouch 3G* / Google Ion / ADP2

Verizon Droid (not Droid X)

Nexus One

Nexus S

Si el nostre mòbil està en la llista, els drivers ja estan dins del programari instal·lat en el pas anterior. Altrament es tenen que instal·lar els divers manualment en :

https://developer.android.com/sdk/oem-usb.html

Comprovar la instal·lació dels divers.

Obrir cmd, la línia de comandes, escriu:

cd C:\Program Files (x86)\AppInventor\commands-for-Appinventor

Si escrivim dir, veurem el contingut de la carpeta, mirar si hi ha el fitxer adb.exe

Connectar el mòbil o tablet al USB del ordinador, te que mostrar dispositiu de depuració USB connectat, escriu en la línia de comandes, adb devices:

adb devices

Ha trobat el dispositiu, en aquest cas una tablet LG, el ordinador i la tablet es poden comunicar i els drivers estan OK.

Pas 2: Descarregar i instal·lar MIT AI2 Companion App en el telèfon o la tablet.

Clicar el seguent link, per descarregar la app de Play Store:

https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3

Pas 3: Iniciar aiStarter en Windows.

Per utilitzar el emulador i el cable USB es necessari el programa aiStarter, el qual es troba a dins del paquet instal·lat abans. Es té que iniciar manualment aiStarter. Si el inici ha anat bé es mostra la següent pantalla:

Pas 4: Configurar el mòbil per el USB (Iniciar USB depuració).

Anar a configuració, opcions de desenvolupador, marcar Depuració USB. En Android 4.2 i mes nous, opcions de desenvolupador estan amagades per defecte. Per permetre els seu us, anar a configuració, sobre la tauleta o en mòbil, el numero de compilació i tocar-lo 7 vegades i ja estaran activades les opcions de desenvolupador.

Pas 5: Connectar el ordinador i el dispositiu per USB.

Assegurar-se de que el dispositiu està connectat en el mode de dispositiu d'emmagatzematge massiu, també es te que permetre la depuració USB.

Pas 6: Test de connexió.

Anar a la pagina del tester de MIT App Inventor:

https://appinventor.mit.edu/test.html

Per fer un test de la nostre connexió.

La configuració esta acabada, estem preparats per construir la primera APP.

Tenim que crear una compte d'usuari en App Inventor per poder accedir a la aplicació i poder guardar els projectes creats.

Aplicació de exemple.

Es vol escriure HOLA TRESAVIS en la pantalla del mòbil al clicar un botó.

Hi ha dos components principals en App Inventor, el dissenyador i editor de blocs.

Comencem per el disseny i després el codi.

Disseny.

El dissenyador permet afegir els components a l'aplicació nostre, com son els labels, botons, etc.

A l'esquerra tenim la llista de components, label, button, textBox, etc. Al mig la nostre app i a la dreta els components afegits i les seves propietats, les quals es poden modificar.

Afegim un botó i un label.

Canviem les propietats del Button1 i del Label1, el text del botó al canviem i posem Clicar aquí i el text del Label, el deixem en blanc de moment. Canviem també els colors de fons dels dos components.

Codi.

En el editor de blocs, obrim les comandes del Button1, nomes clicant sobre ell a l'esquerra del editor i seleccionem:

when Button1.click do

després en les comandes de Label1:

set Label1.text to

i per últim en el apartat de Text afegim el text buit i completem amb la frase :

HOLA TRESAVIS.

Ajuntem les comandes com un puzle i queda de la manera següent:

Provem la app en el emulador.

Connectar el emulador.

Primer aiStarter té que estar iniciat en el nostre ordinador. Després en App Inventor en el menu, Connect, clicar Emulator.

Esperar que es connecti el emulador i ja es podrà testejar la nostre aplicació.

Descarreguem directament la app al mòbil o tauleta.

En el menú de App Inventor , Build, clic provide QR code for .apk. Proporciona el codi QR de descarga de la nostre App.

En el mòbil o tauleta obrim Mit AI2 Companion i obtenim la descarrega de la app fen servir el lector de codi QR, scan QR code.

Instal·lem la nostre app i el resultat es el seguent: