Difference between revisions of "Introducció a App Inventor"
| Line 1: | Line 1: | ||
| − | [[File:Inventor1.png|border|left|400px|Inventor1.png]][http://appinventor.mit.edu/explore/front.html '''App Inventor'''] és una plataforma creada per ''Google Labs'' amb l’objectiu de realitzar aplicacions mòbils per sistemes operatius Android | + | [[File:Inventor1.png|border|left|400px|Inventor1.png]][http://appinventor.mit.edu/explore/front.html '''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 '''[[Introducció_a_Snap4Arduino|Snap4Arduino]]''', per exemple. | ||
| − | == | + | |
| − | <p style="text-align: justify">'''App Inventor''' és un programa que funciona en línia | + | |
| + | == 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 == | ||
| + | <p style="text-align: justify">'''App Inventor''' és un programa que funciona en línia. S’hi pot accedir clicant [http://appinventor.mit.edu/explore/front.html 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:</p> | ||
| | ||
<p style="text-align: center">[[File:Inventor2.png|RTENOTITLE]]</p> | <p style="text-align: center">[[File:Inventor2.png|RTENOTITLE]]</p> | ||
<br/> 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ú: | <br/> 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ú: | ||
<p style="text-align: center">[[File:Inventor3.PNG|800px|RTENOTITLE]]</p> | <p style="text-align: center">[[File:Inventor3.PNG|800px|RTENOTITLE]]</p> | ||
| − | La primera vegada que | + | <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”. |
<p style="text-align: center">[[File:Inventor4.PNG|800px|RTENOTITLE]]</p> | <p style="text-align: center">[[File:Inventor4.PNG|800px|RTENOTITLE]]</p> | ||
| − | <br/> | + | <br/> 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”. | ||
| + | |||
<p style="text-align: center">[[File:Inventor5.PNG|800px|RTENOTITLE]]</p> | <p style="text-align: center">[[File:Inventor5.PNG|800px|RTENOTITLE]]</p> | ||
| − | == | + | |
| − | + | == 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 === | === Dissenyador === | ||
| Line 98: | Line 114: | ||
[[File:Inventor27.png|border|center|RTENOTITLE]]<span>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.</span> | [[File:Inventor27.png|border|center|RTENOTITLE]]<span>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.</span> | ||
<p style="text-align: center">[[File:Inventor28.png|RTENOTITLE]]</p> | <p style="text-align: center">[[File:Inventor28.png|RTENOTITLE]]</p> | ||
| − | | + | |
<p style="text-align: center"> </p> | <p style="text-align: center"> </p> | ||
Latest revision as of 16:55, 17 June 2019
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.
Contents
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:
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ú:
<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”.
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”.
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.
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).
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”.
Observem que ens apareix una finestra al centre de la pantalla on hem de posar nom al projecte. Comencem escrivint “Exercici1”.
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ó.
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:
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:
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).
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.
Per últim podem retocar la mida o les característiques (negreta, cursiva, etc.) del text, entre d’altres.
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:
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”.
Comencem arrastrant a la pantalla de programació el bloc que ens permet posar un color de fons:
Escollim el color groc que trobem a la categoria “colors” i l’encaixem a la peça que tenim:
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.
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.
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à.
- 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:
- Part 4
Per últim, farem un canvi de color de fons amb un únic esdeveniment i botó però fent ús d’un condicional.
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
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”.
