Fes l'app de la teva entitat amb App Inventor!

Associació per a Joves TEB - Informàtic
Autor/a: 
Xavi Aranda - Associació per a Joves TEB
App Inventor disposa d'una secció de disseny molt senzilla d'utilitzar.
La programació amb App Inventor, es fa mitjançant mòduls
Mitjançant un Codi QR podreu provar la vostra app al vostre dispositiu mòbil.
Un cop provada l'aplicació, podreu empaquetar-la i instalar-la al vostre dispositiu mòbil

Fes l'app de la teva entitat amb App Inventor!

Associació per a Joves TEB - Informàtic
Resum: 

App Inventor és una eina per crear aplicacions per dispositiu mòbil sense necessitat de teclejar codi. L'app que creeu la podreu instal·lar al dispositiu i també penjar-la al Google Play Store.

App Inventor és una eina creada per membres del prestigiós Massachusetts Institute of Technology (MIT). Mitjançant aquesta eina, es poden crear aplicacions per dispositius mòbils Android. Una de les particularitats d'aquesta eina, és que la programació es basa en un sistema modular de peces. Aquest fet evita que l'usuari hagi de teclejar codi de programació, i per tant estalvia molts errors de tecleig. El sistema modular s'utilitza molt a les escoles de primària i secundària per ensenyar a programar aplicacions. Tot i així App Inventor és una eina molt completa, i això ha provocat que molts usuaris, tan petits com grans, l'utilitzin per crear les seves pròpies aplicacions.

A continuació us ensenyarem una mica el funcionament de l'App Inventor mitjançant l'exemple de crear una petita aplicació per la vostra entitat.

L'entorn de desenvolupament de App Inventor i les seves seccions.

Podeu treballar amb App Inventor des de l'entorn web o descarregant-vos l'aplicació al vostre ordinador. Per fer-lo anar des de l'entorn web, necessitareu un compte de Google. Un cop realitzat el registre, heu d'anar a la pàgina de App Inventor, clicar a “Create Apps!”. Automàticament entrareu a l'entorn de desenvolupament de l'App Inventor.

Heu de diferenciar les següents seccions:

  • Secció de disseny: és la secció on es dissenyen les diferents pantalles que tindrà la vostra app. Dins d'aquesta secció hi han les següents subseccions:


    • Elements de la interfície d'usuari: ho trobareu a l'esquerra de tot. Són tots els elements que l'usuari podrà veure a la pantalla (botons, llistes, imatges, desplegables, càmera) i altres elements no visibles per l'usuari però que són molt importants (emmagatzematge, bluetooth).
    • 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...
  • Secció de programació modular: é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.

Per l'exemple d'aplicació que creareu, heu d'afegir 4 pantalles més. En total, en tindreu 5. Aquestes pantalles corresponent a les següents seccions: últimes notícies, qui som?, que fem? I on som?.

Afegir elements a la interfície de l'usuari.

Una aplicació disposa de vàries pantalles. I dins d'aquestes pantalles hi han 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ó d'exemple, i les propietats que han de tenir:

  • Pantalla 1: serà la pantalla principal de la vostra aplicació, la que tindrà el menú. Contindrà diferents botons:
    • Botó 1: Qui som?
    • Botó 2: Què fem?
    • Botó 3: On som?
    • Botó 4: Últimes notícies
    • Per afegir aquests elements, només heu d'anar a la secció disseny, i arrossegar quatre cops l'element botó a la pantalla 1. A les propietats dels botons, heu d'escriure els noms de “Qui som?, Què fem?, On som? i “Últimes notícies”.



  • Pantalla 2: serà la pantalla “Qui som?”
    • Només heu d'afegir l'element Visor Web a la pantalla 2. Aquest element permet visualitzar una pàgina web. En el vostre cas, es podrà veure la pantalla “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 “Qui som?” de la vostra pàgina web.


  • Pantalla 3: serà la pantalla “Què fem?”
    • Heu d'afegir un altre Visor Web a la pantalla 3. Aquest cas, el visor web ensenyarà la pantalla “Què fem?” 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 “Què fem?” de la vostra pàgina web.
  • 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, justament 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, justament a “url inicial” heu d'escriure l'enllaç de la pàgina “Blog” o “Notícies” de la vostra pàgina web.

Afegir accions i ordres als diferents elements.

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 elements. Per a 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'afegir les ordres de “integrats” i “control” anomenades “Quant botóX. Clic executar obrir una altra pantalla nom de la pantalla “nom de la pantalla””. Aquesta ordre el que fa és obrir una pantalla quan es faci clic sobre un botó. En el cas de l'exemple, s'ha de fer per a cada botó.

Provar l'aplicació al telèfon mòbil.

Un cop ja heu programat les accions dels diferents elements, és hora de provar l'aplicació. Per a fer-ho, ho fareu mitjançant l'aplicació “MIT App Inventor 2 Companion”. Un cop teniu instal·lada l'aplicació al vostre dispositiu mòbil, heu d'anar a l'entorn de l'App Inventor, “Connectar” i “AI Companion”. Us sortirà una finestra emergent amb un codi QR i una clau alfabètica.

Executeu l'aplicació “MIT App Inventor 2 Companion” del vostre dispositiu mòbil i cliqueu al botó de “scan QR code”. Escanegeu el codi QR que us ha sortit a la pantalla del vostre ordinador. Automàticament veureu que us carrega l'aplicació que esteu desenvolupant al vostre mòbil. Mitjançant aquesta aplicació mòbil, podreu provar l'aplicació que esteu desenvolupant.

Empaquetar l'aplicació al telèfon mòbil.

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 a 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. Per a fer-ho, recordeu que heu de tenir desactivada la opció de seguretat anomenada “Permetre instal·lar aplicacions d'origen desconegut”.

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