Difference between revisions of "Introducció a App Inventor"

From Edutec Wiki
Jump to: navigation, search
(Página creada con « == Sobre App Inventor! == App Inventor és una plataforma creada per ''Google Labs'' amb l’objectiu de realitzar aplicacions mòbils per sistemes operatius Android (mol...»)
 
Line 5: Line 5:
  
 
L’any 2009 es va iniciar el seu desenvolupament al ''MIT Center for Mobile Learning'' i actualment conté una comunitat de més de tres milions d’usuaris procedents de 200 països diferents.  
 
L’any 2009 es va iniciar el seu desenvolupament al ''MIT Center for Mobile Learning'' i actualment conté una comunitat de més de tres milions d’usuaris procedents de 200 països diferents.  
 
+
<p style="text-align: center;">[[File:Inventor1.png|RTENOTITLE]]</p>
[[File:Inventor1.png]]
+
 
+
 
== Primer contacte ==
 
== Primer contacte ==
 
+
<p style="text-align: justify;">App Inventor és un programa que funciona en línia, on podem accedir-hi fent clic aquí. Com a requisit per poder-lo utilitzar, és necessari introduir&nbsp; una conta de correu electrònic i contrasenya de Google. Una vegada fet això, i acceptat els termes d’ús ens apareixerà una pantalla com aquesta:</p>
App Inventor és un programa que funciona en línia, on podem accedir-hi fent clic aquí. Com a requisit per poder-lo utilitzar, és necessari introduir&nbsp; una conta de correu electrònic i contrasenya de Google. Una vegada fet això, i acceptat els termes d’ús ens apareixerà una pantalla com aquesta:
+
 
+
 
&nbsp;
 
&nbsp;
 
+
<p style="text-align: center;">[[File:Inventor2.png|RTENOTITLE]]</p>
[[File:Inventor2.png]]
+
 
+
 
<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|RTENOTITLE]]</p>
[[File:Inventor3.PNG]]
+
 
+
 
La primera vegada que entrem al programa, ens apareix un missatge exposant-nos que encara no disposem de cap projecte, així que ens convida a començar-ne un de nou. També tenim una altre opció per crear-ne un prement sobre “nou projecte”. &nbsp;
 
La primera vegada que entrem al programa, ens apareix un missatge exposant-nos que encara no disposem de cap projecte, així que ens convida a començar-ne un de nou. També tenim una altre opció per crear-ne un prement sobre “nou projecte”. &nbsp;
 
+
<p style="text-align: center;">[[File:Inventor4.PNG|RTENOTITLE]]</p>
[[File:Inventor4.PNG]]
+
 
+
 
<br/> Al prémer nou projecte el primer que ens demana és que l’anomenem, així que introduïm un nom (sense espais).
 
<br/> Al prémer nou projecte el primer que ens demana és que l’anomenem, així que introduïm un nom (sense espais).
 +
<p style="text-align: center;">[[File:Inventor5.PNG|RTENOTITLE]]</p>
 +
== <span id="El_entorno">La interfície</span> ==
 +
<p style="text-align: justify;"><span id="El_entorno">Pel que fa a la interfície del programa aquesta està dividida en dues seccions: el dissenyador i l’editor de blocs. En el primer espai es construeix l’estètica de l’aplicació afegint components que necessitem i opcionalment, configurant les propietats d’aquests. En quant a l’editor de blocs, aquí és on es dóna comportament a l’aplicació mitjançant l’ús d’instruccions representades amb blocs (similars a Scratch).</span></p>
 +
*
 +
=== Dissenyador ===
  
&nbsp;
 
 
[[File:Inventor5.PNG]]
 
 
<span id="El_entorno">La interfície</span>
 
 
<span id="El_entorno">Pel que fa a la interfície del programa aquesta està dividida en dues seccions: el dissenyador i l’editor de blocs. En el primer espai es construeix l’estètica de l’aplicació afegint components que necessitem i opcionalment, configurant les propietats d’aquests. En quant a l’editor de blocs, aquí és on es dóna comportament a l’aplicació mitjançant l’ús d’instruccions representades amb blocs (similars a Scratch).</span>
 
 
<span id="El_entorno">-</span>Dissenyador:
 
  
 
<span id="El_entorno">El dissenyador està dividit en 5 seccions, d’esquerre a dreta: la </span>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.
 
<span id="El_entorno">El dissenyador està dividit en 5 seccions, d’esquerre a dreta: la </span>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.
 +
<p style="text-align: center;">[[File:Inventor6.png|RTENOTITLE]]</p>
 +
*
 +
=== <span id="El_entorno">'''Editor de blocs'''</span> ===
  
&nbsp;
 
 
&nbsp;
 
 
[[File:Inventor6.png]]
 
 
<span id="El_entorno">'''Editor de blocs'''</span>
 
  
 
<span id="El_entorno">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: </span>blocs de programació, arxius mèdia (també present en la part de dissenyador) i visor (en aquest cas de blocs).
 
<span id="El_entorno">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: </span>blocs de programació, arxius mèdia (també present en la part de dissenyador) i visor (en aquest cas de blocs).
 +
<p style="text-align: center;">[[File:Inventor7.png|RTENOTITLE]]</p>
 +
== <span id="El_entorno">'''Exercici pràctic'''</span> ==
  
&nbsp;
+
<span id="El_entorno">Fins ara hem explorat la interfície del programa, així que ja estem preparats per programar! Trobem organitzat l’exercici segons diferents parts:</span>
  
&nbsp;
+
*
 +
=== <span id="El_entorno">'''Part 1:'''</span> ===
  
&nbsp;
 
 
[[File:Inventor7.png]]
 
 
<span id="El_entorno">'''Exercici pràctic'''</span>
 
 
<span id="El_entorno">Fins ara hem explorat la interfície del programa, així que ja estem preparats per programar! Trobem organitzat l’exercici segons diferents parts:</span>
 
 
<span id="El_entorno">'''Part 1:'''</span>
 
  
 
<span id="El_entorno">Seleccionem la pestanya “projectes” i tot seguit “començar nou projecte”.</span>
 
<span id="El_entorno">Seleccionem la pestanya “projectes” i tot seguit “començar nou projecte”.</span>
 
+
<p style="text-align: center;">[[File:Inventor8.png|RTENOTITLE]]</p>
&nbsp;
+
 
+
[[File:Inventor8.png]]
+
 
+
 
<span id="El_entorno">Observem que ens apareix una finestra al centre de la pantalla on hem de posar nom al projecte. Comencem escrivint “Exercici1”.</span>
 
<span id="El_entorno">Observem que ens apareix una finestra al centre de la pantalla on hem de posar nom al projecte. Comencem escrivint “Exercici1”.</span>
 
+
<p style="text-align: center;">[[File:Inventor9.png|700px|RTENOTITLE]]</p>
[[File:Inventor9.png]]
+
 
+
 
<span id="El_entorno">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ó.</span>
 
<span id="El_entorno">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ó.</span>
 
+
<p style="text-align: center;">[[File:Inventor10.png|700px|RTENOTITLE]]</p>
[[File:Inventor10.png]]
+
 
+
 
<span id="El_entorno">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:</span>
 
<span id="El_entorno">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:</span>
 
+
<p style="text-align: center;">[[File:Inventor11.PNG|RTENOTITLE]]</p>
&nbsp;
+
 
+
[[File:Inventor11.PNG]]
+
 
+
 
<span id="El_entorno">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.</span>
 
<span id="El_entorno">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.</span>
  
Line 87: Line 51:
  
 
<span id="El_entorno">Ens hauria d’aparèixer el botó de la següent manera:</span>
 
<span id="El_entorno">Ens hauria d’aparèixer el botó de la següent manera:</span>
 
+
<p style="text-align: center;">[[File:Inventor12.PNG|RTENOTITLE]]</p>
[[File:Inventor12.PNG]]
+
 
+
 
<span id="El_entorno">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).</span>
 
<span id="El_entorno">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).</span>
 
+
<p style="text-align: center;">[[File:Inventor13.PNG|RTENOTITLE]]</p>  
<span id="El_entorno">[[File:|57x21px]]</span>[[File:|29x13px]][[File:Inventor13.PNG]]
+
 
+
 
<span id="El_entorno">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.</span>
 
<span id="El_entorno">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.</span>
 
+
<p style="text-align: center;"><span id="El_entorno">[[File:Inventor14.PNG|RTENOTITLE]]</span></p>
<span id="El_entorno">[[File:|29x13px]][[File:Inventor14.PNG]]</span>
+
 
+
 
<span id="El_entorno">Per últim podem retocar la mida o les característiques (negreta, cursiva, etc.) del text, entre d’altres.</span>
 
<span id="El_entorno">Per últim podem retocar la mida o les característiques (negreta, cursiva, etc.) del text, entre d’altres.</span>
 
+
<p style="text-align: center;"><span id="El_entorno">[[File:Inventor15.PNG|RTENOTITLE]]</span></p>
<span id="El_entorno">[[File:|29x13px]][[File:Inventor15.PNG]]</span>
+
 
+
 
<span id="El_entorno">Fins aquí ens hem dedicat a crear la part estètica del botó. Ara entrem en la programació.</span>
 
<span id="El_entorno">Fins aquí ens hem dedicat a crear la part estètica del botó. Ara entrem en la programació.</span>
  
 
<span id="El_entorno">Per passar a la programació hem de canviar de secció i anar a la de blocs:</span>
 
<span id="El_entorno">Per passar a la programació hem de canviar de secció i anar a la de blocs:</span>
 
+
<p style="text-align: center;">[[File:Invntor16.PNG|RTENOTITLE]]</p>
[[File:Invntor16.PNG]]
+
 
+
 
<span id="El_entorno">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”.</span>
 
<span id="El_entorno">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”.</span>
 
+
<p style="text-align: center;">[[File:Inventor17.PNG|RTENOTITLE]]</p>
[[File:Inventor17.PNG]]
+
 
+
 
<span id="El_entorno">Comencem arrastrant a la pantalla de programació el bloc que ens permet posar un color de fons:</span>
 
<span id="El_entorno">Comencem arrastrant a la pantalla de programació el bloc que ens permet posar un color de fons:</span>
 
+
<p style="text-align: center;"><span id="El_entorno">&nbsp;[[File:Inventor18.png|RTENOTITLE]]</span></p>
<span id="El_entorno">&nbsp;[[File:Inventor18.png]]</span>
+
 
+
 
<span id="El_entorno">Escollim el color groc que trobem a la categoria “colors” i l’encaixem a la peça que tenim:</span>
 
<span id="El_entorno">Escollim el color groc que trobem a la categoria “colors” i l’encaixem a la peça que tenim:</span>
 
+
<p style="text-align: center;">[[File:Inventor19.png|RTENOTITLE]]</p>
[[File:Inventor19.png]]
+
 
+
 
<span id="El_entorno">Ara només ens falta determinar quan volem que s’executi aquesta acció, que&nbsp; en aquest cas és quant es cliqui el botó que hem dissenyat.</span>
 
<span id="El_entorno">Ara només ens falta determinar quan volem que s’executi aquesta acció, que&nbsp; en aquest cas és quant es cliqui el botó que hem dissenyat.</span>
 +
<p style="text-align: center;">[[File:Inventor20.png|RTENOTITLE]]</p>
 +
<span id="El_entorno">Per comprovar si el que hem programar funciona cal fer-ho consultant l’apartat “descarrega” d’aquest programa”.</span>
  
[[File:Inventor20.png]]
+
*
 
+
=== <span id="El_entorno">'''Part 2'''</span> ===
<span id="El_entorno">Per comprovar si el que hem programar funciona cal fer-ho consultant l’apartat “descarrega” d’aquest programa”.</span>
+
  
<span id="El_entorno">'''Part 2'''</span>
 
  
 
<span id="El_entorno">El següent pas, consisteix en &nbsp;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.</span>
 
<span id="El_entorno">El següent pas, consisteix en &nbsp;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.</span>
 
+
<p style="text-align: center;"><span id="El_entorno">[[File:Inventor21.PNG|RTENOTITLE]]</span></p>
<span id="El_entorno">[[File:|54x18px]][[File:Inventor21.PNG]]</span>
+
 
+
 
<span id="El_entorno">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à.</span>
 
<span id="El_entorno">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à.</span>
 +
<p style="text-align: center;">[[File:Inventor22.png|RTENOTITLE]]</p>
 +
*
 +
=== <span id="El_entorno">'''Part 3'''</span> ===
  
[[File:Inventor22.png]]
 
 
<span id="El_entorno">'''Part 3'''</span>
 
  
 
<span id="El_entorno">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 és'''2 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:</span>
 
<span id="El_entorno">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 és'''2 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:</span>
 +
<p style="text-align: center;">[[File:Inventor23.png|700px|RTENOTITLE]]</p> <p style="text-align: center;">[[File:Inventor24.png|700px|RTENOTITLE]]</p> <p style="text-align: center;">[[File:Inventor25.png|RTENOTITLE]]</p>
 +
*
 +
=== <span id="El_entorno">'''Part 4'''</span> ===
  
[[File:Inventor23.png]]
 
 
[[File:Inventor24.png]]
 
 
[[File:Inventor25.png]]
 
 
<span id="El_entorno">'''Part 4'''</span>
 
  
 
<span id="El_entorno">Per últim, farem un canvi de color de fons amb un únic esdeveniment i botó però fent ús d’un condicional.</span>
 
<span id="El_entorno">Per últim, farem un canvi de color de fons amb un únic esdeveniment i botó però fent ús d’un condicional.</span>
 
+
<p style="text-align: center;">[[File:Inventor26.png|RTENOTITLE]]</p>
[[File:Inventor26.png]]
+
== '''<span id="El_entorno">Visualització dels projectes</span>''' ==
 
+
'''<span id="El_entorno">Visualització dels projectes</span>'''
+
  
 
<span id="El_entorno">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</span> 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. &nbsp;
 
<span id="El_entorno">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</span> 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. &nbsp;
Line 159: Line 99:
  
 
<span id="El_entorno">Un cop tenim l’aplicació descarregada al dispositiu, retornem a l’app inventor i &nbsp;fem clic sobre la opció “connectar” de la barra de menú i d’entre les opcions que es despleguen, seleccionem la primera “Al Companion”. Observem que ens apareix un codi QR amb 6 lletres. De manera que obrim l’aplicació que ens hem descarregat i escanegem &nbsp;aquest codi o ve escrivim les 6 lletres.</span>
 
<span id="El_entorno">Un cop tenim l’aplicació descarregada al dispositiu, retornem a l’app inventor i &nbsp;fem clic sobre la opció “connectar” de la barra de menú i d’entre les opcions que es despleguen, seleccionem la primera “Al Companion”. Observem que ens apareix un codi QR amb 6 lletres. De manera que obrim l’aplicació que ens hem descarregat i escanegem &nbsp;aquest codi o ve escrivim les 6 lletres.</span>
 
+
<p style="text-align: center;">[[File:Inventor27.png|RTENOTITLE]]</p> <p style="text-align: center;">[[File:Inventor28.png|RTENOTITLE]]<br/> &nbsp;</p>
[[File:Inventor27.png]]
+
 
+
[[File:Inventor28.png]]<br/> &nbsp;
+
 
+
 
&nbsp;
 
&nbsp;
  

Revision as of 11:52, 1 December 2017

Sobre App Inventor!

App Inventor és una plataforma creada per Google Labs amb l’objectiu de realitzar aplicacions mòbils per sistemes operatius Android (molt aviat també per iOS).

L’any 2009 es va iniciar el seu desenvolupament al MIT Center for Mobile Learning i actualment conté una comunitat de més de tres milions d’usuaris procedents de 200 països diferents.  

RTENOTITLE

Primer contacte

App Inventor és un programa que funciona en línia, on podem accedir-hi fent clic aquí. Com a requisit per poder-lo utilitzar, és necessari introduir  una conta de correu electrònic i contrasenya de Google. Una vegada fet això, i acceptat els termes d’ús ens 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

La primera vegada que entrem al programa, ens apareix un missatge exposant-nos que encara no disposem de cap projecte, així que ens convida a començar-ne un de nou. També tenim una altre opció per crear-ne un prement sobre “nou projecte”.  

RTENOTITLE


Al prémer nou projecte el primer que ens demana és que l’anomenem, així que introduïm un nom (sense espais).

RTENOTITLE

La interfície

Pel que fa a la interfície del programa aquesta està dividida en dues seccions: el dissenyador i l’editor de blocs. En el primer espai es construeix l’estètica de l’aplicació afegint components que necessitem i opcionalment, configurant les propietats d’aquests. En quant a l’editor de blocs, aquí és on es dóna comportament a l’aplicació mitjançant l’ús d’instruccions representades amb blocs (similars a Scratch).

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

Exercici pràctic

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

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”. 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

RTENOTITLE