Difference between revisions of "Introducció a App Inventor"

From Edutec Wiki
Jump to: navigation, search
Line 84: Line 84:
 
 
 
 
  
 +
 
  
 
=== <span id="El_entorno">Visualització dels projectes</span> ===
 
=== <span id="El_entorno">Visualització dels projectes</span> ===
Line 91: Line 92:
 
<span id="El_entorno">Aquesta opció de la que parlem funciona a través de wi-fi. Aquí tenim l’enllaç per descarregar-la: </span>[https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3 Descarga en la Play Store]
 
<span id="El_entorno">Aquesta opció de la que parlem funciona a través de wi-fi. Aquí tenim l’enllaç per descarregar-la: </span>[https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3 Descarga en la Play Store]
  
[[File:Appinventor MIT AI Companion.jpg|border|center]]
+
[[File:Appinventor MIT AI Companion.jpg|border|center|Appinventor MIT AI Companion.jpg]]
  
 
<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”.</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”.</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 &nbsp;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 &nbsp;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>  
 
+
&nbsp;
== Bitbot.cat ==
+
 
+
Aquest és un article del programa [https://bitbot.cat/ '''Bitbot.cat'''], podeu consultar la resta d'articles a:
+
 
+
*[[Recursos_formació_BitBot|Formació presencial '''Bitbot.cat''']]
+
*[[Bitbot|Formació semipresencial '''Bitbot.cat''']]
+
 
+
'''Bitbot.cat''' és un programa implusat per la Secretaria de Telecomunicacions, Ciberseguretat i Societat Digital de la '''Generalitat de Catalunya''', en col·laboració amb el Departament d’Ensenyament, que neix amb l’objectiu d’impulsar la millora de les competències digitals del jovent i promoure el creixement de les vocacions tecnològiques.
+
 
+
Una de les accions que es proposa aconseguir és la capacitació de monitores i monitors per a conduir i desenvolupar '''activitats educatives de lleure en els camps de la robòtica i la programació''', per tal d’anar formalitzant aquesta oferta amb '''monitores i monitors certificats'''.
+
 
<p style="text-align: center">&nbsp;</p>
 
<p style="text-align: center">&nbsp;</p>

Revision as of 16:25, 21 May 2019

Inventor1.png
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, es va alliberar al públic l'any 2010 i actualment conté una comunitat de més de tres milions d’usuaris procedents de 200 països diferents.  

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 un compte de correu electrònic i contrasenya de Google. Una vegada fet això i acceptats els termes d’ús, 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

 

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

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

Appinventor MIT AI Companion.jpg

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

RTENOTITLE
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