Com fer una aplicació mòbil amb App Inventor

Podeu desenvolupar l'aplicació en línia o descarregar-vos l'aplicació. Per fer-lo anar des de l'entorn web, necessitareu un compte de Google. Un cop fet el registre, seleccioneu 'Crear apps' i 'Crear un projecte nou'.

Heu de diferenciar les següents seccions:

• Dissenyador: és la secció on es dissenyen les diferents pantalles que tindrà la vostra app. Dins d'aquesta secció hi ha les següents subseccions.
   
  • Paleta: aquest menú el trobareu a l'esquerra de tot i conté tots els elements que la persona usuària podrà veure a la pantalla (botons, llistes, imatges, desplegables, càmera) i altres elements no visibles per a l'usuari però que són molt importants (emmagatzematge, bluetooth). Inclou elements de la interfície com ara botons, elements de disposició per ordenar la informació, elements multimèdia com so, i molts d'altres.
  • Pantalla: és la pantalla que l'usuari veurà al seu dispositiu mòbil. Aquí podreu anar col·locant els elements de la interfície d'usuari que tindrà la vostra app.
  • Components: Just al costat de la pantalla. Són tots els elements que té cada pantalla, amb el seu nom corresponent.
  • Propietats dels elements: Cada element disposa d'unes propietats, com per exemple: alineació, icona, títol...
     
• Blocs: és la secció on mitjançant mòduls, es programen les accions dels elements de la vostra aplicació. Dins d'aquesta secció, trobareu:
   
  • Blocs: són les peces de programació. Semblen peces de puzle i entre elles només es connectaran les que tenen una lògica corresponent.
  • Visor: és l'espai on es col·loquen les peces.

Una altra part molt important a tenir en compte és el desplegable de les pantalles. En aquest desplegable, podreu seleccionar la pantalla de la vostra aplicació per treballar-hi. Si necessiteu més pantalles, podreu afegir-ne tantes com vulgueu.

Una aplicació disposa de diverses pantalles i, dins d'aquestes pantalles, hi ha una sèrie d'elements que realitzen unes funcions molt característiques.

A continuació us descrivim els elements que han d'anar a cada pantalla de la vostra aplicació segons un exemple, i les propietats que han de tenir:

• Pantalla 1: serà la pantalla principal de la vostra aplicació i la que contindrà el menú. Tindrà diferents botons:
  • Botó 1: Qui som?
  • Botó 2: Què fem?
  • Botó 3: On som?
  • Botó 4: Últimes notícies

Per afegir aquests elements, heu d'anar al dissenyador i arrossegar quatre cops l'element botó a la pantalla 1. A les propietats dels botons, heu d'escriure a 'Text' els noms: “Qui som?", "Què fem?", "On som?" i “Últimes notícies”.

• Pantalla 2: serà la pantalla 'Qui som?'.

Heu d'afegir l'element Visor Web a la pantalla 2. Aquest element permet visualitzar una pàgina web. Així, es podrà mostrar l'apartat 'Qui som?' de la vostra pàgina web. A la propietat del visor web, justament a 'url inicial', heu d'escriure l'enllaç de la pàgina corresponent.

• Pantalla 3: serà la pantalla 'Què fem?'.

Heu d'afegir un altre Visor Web a la pantalla 3. En aquest cas, el visor web ensenyarà la pantalla 'Què fem?' de la vostra pàgina web. A la propietat del visor web, juntament a 'url inicial', heu d'escriure l'enllaç de la pàgina corresponent.

• Pantalla 4: serà la pantalla 'On som?'.

Heu d'afegir el quart element Visor Web a la pantalla 4. A la propietat del visor web, juntament a 'url inicial', heu d'escriure l'enllaç de la pàgina 'On som?' de la vostra pàgina web.

• Pantalla 5: serà la pantalla 'Últimes notícies'.
  • Heu d'afegir el cinqué Visor Web a la pantalla 5. En aquest cas, aquest visor mostrarà la pantalla del vostre blog. A la propietat del visor web, juntament a 'url inicial', heu d'escriure l'enllaç de la pàgina 'Blog' o 'Notícies' de la vostra pàgina web.

Un cop ja teniu les pantalles creades i els elements col·locats al seu lloc corresponent, toca programar les accions i les ordres de cada element. Per fer-ho heu d'anar a la secció dels Blocs. A cada pantalla podreu programar diferents accions.

En el cas de la pantalla 1, heu d'arrossegar al visor el bloc de 'control' anomenat 'Quan botó1. Clic fes', també el bloc de control 'obre una altra pantalla nom', i encaixar-los. Al nom de la pantalla, hi posarem el nom on volem redireccionar la persona usuària.

Paral·lelament us podeu descarregar l'aplicació Mit AI2 Companion al dispositiu mòbil per veure provar la vostra aplicació a mesura que l'aneu desenvolupant.

Des del menú superior, a l'apartat 'Connecta', podeu connectar amb l'aplicació a través d'un codi QR i anar seleccionant 'Refrescar la pantalla del Companion' per veure com queda.

Quan ja heu fet totes les proves, heu arreglat els vostres 'bugs' i els teniu solucionats, és hora d'empaquetar la vostra aplicació. Què significa empaquetar l'aplicació? Doncs agafar tots els fitxers que componen l'aplicació i convertir-lo en un sol fitxer amb extensió '.apk'.

Per fer-ho, heu d'anar a 'Generar' i 'App (guardar arxiu .apk al meu ordinador)'. Amb aquest arxiu, us podreu instal·lar l'aplicació al vostre mòbil. Recordeu que per això heu de tenir desactivada l'opció de seguretat anomenada 'Permetre instal·lar aplicacions d'origen desconegut'.

En el cas que volguéssiu penjar l'aplicació a Play Store, a la pàgina d'App Inventor hi ha diferents tutorials que expliquen com fer-ho.