ParisMapTour

En aquesta aplicació farem un tour per Paris, escollirem una destinació i l'aplicació en portarà amb google maps.
Per fer això utilitzarem el component Listpicker (per fer un llistat de llocs) i activitystarter


1.Obrir APPInventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo ParisMaptour Recordeu que no accepta espais
4. En el dissenyador hem d'afegir:
 - una imatge
 - webWiewer(el trobareu a SOCIAL)
-una etiqueta (LABEL)
- listpicker
- ActivityStarters (el trobareu a CONNECTIVITY)

Fixeu-vos:

fixeu-vos en la programació

Read More

Efecte Swipe (Lliscar el dit) amb APP Inventor

L' efecte Swipe o "lliscar el dit"és un efecte bastant comú en nombroses aplicacions mòbils.
Si tenim una llista d'imatges que volem mostrar a la nostra APP, el més senzill  és col·locar-les totes amb noms correlatius, això és: 1, 2, 3 , ...etc. sense oblidar-nos de la seva extensió corresponent ja sigui ".png" o ",jpg".

Descarregar les imatges

1.Obrir APPInventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo Flung Recordeu que no accepta espais
4. En el dissenyador hem d'afegir: - un canvas i un notificador

Les imatges les carregarem sobre un component de tipus Canvas(Llenç) i seran desplaçades conforme al moviment del dit de l'usuari.

Utilitzant aquest llenç controlarem l'esdeveniment flung (Llançat) així com l'adreça del dit de l'usuari. Es pot desplaçar lleugerament cap amunt o cap avall per això utilitzem la funció valor absolut i en funció d'ella incrementarem o disminuirem la posició actual de l'índex sobre la llista que mostra les imatges. Simplement com a consideració a l'anterior és que hem de tenir en compte que arribats a l'índex 0 o a l'índex que té el nombre d'imatges + 1 tindrem literalment que "donar la volta".

5. A l'apartat blocs

En primer lloc donarem valor a les variables

Read More

Accedir a la galeria de fotos amb APP Inventor

El component ImagePicker (la galeria d' imatges) en App Inventor és un selector d'imatges que permet escollir una imatge des de la galeria de fotos del mòbil.

ImagePicker és un botó que quan l'usuari el premi apareixeran la galeria de fotos i pot seleccionar una fotografia.

Quan un usuari fa una fotografia amb el mobil existeix la propietat ImagePath que no és mes que una cadena de text que representa la fotografia.


ESDEVENIMENTS
AfterPicking L' usuari selecciona un element en el selector d'imatges.
BeforePicking L'usuari ha pulsat sobre el selector d'imatges però encara no ha seleccionat cap element
GotFocus  Selector d' imatges es convirteix en l'element enfocat.
LostFocus Selector d' imatges ja no és l'element enfocat.

Anem a fer una app en la que seleccionem una fotografia de la nostra galeria de fotos

1. Obrir APPInventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo imagepicker Recordeu que no accepta espais
4. En el dissenyador hem d'afegir:
 - una imatge.. (li donarem 300 pixels d'alçada i d'amplada)
 - imagePicker (la trobareu a media)

Read More

Trobar una ubicació amb APP Inventor

L'aplicació consisteix a trobar la ubicació on estem, veure-la amb google maps i compartir-la per whastapp, gmail, etc....

1. Obrir APPInventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo  Locationsensortest Recordeu que no accepta espais
4. En el dissenyador hem d'afegir:
  - 4 etiquetes (labels): per la latitud, longitud, altitud i direcció
  - 2 botons (Button)
  - Sharing (el trobareu a SOCIAL)
  - ActivityStarters (el trobareu a CONNECTIVITY)
  - Location sensor  (el trobareu a SENSOR)

Fixeu-vos en la imatge

En bocks, aneu en compte amb els quadres de text, heu de posar el mateix

Per comprovar si l'aplicació funciona heu de tenir el GPS activat

Read More

Situar punts en un mapa amb app inventor

Per veure un mapa de Google en el nostre dispositiu mòbil, hem de fer una crida al Google Maps des de la nostra app.
Això ho farem incorporant en el dissenyador el component ActivityStarter i configurant l'inici de la nostra app de la següent forma:

En el component text hem d'afegir exactament el que veieu a la imatge

L'ActiviyStarter és un component d'App Inventor que permet engegar altres aplicacions des de la nostra app.
En aquest cas li estem dient a App Inventor que volem treballar amb l'aplicació Google Maps.

L'ActivityStarter té una altra propietat, el DataUri, amb la que indicarem a GoogleMaps com és el mapa que volem veure.

 Un cop ho tenim tot configurat, cal dir-li a l'ActivityStarter que engegui l'aplicació que volem veure:

Read More

APP Inventor

App Inventor permet desemvolupar aplicacions per telèfons mòbils basats en el sistema operatiu Android mitjançant un  navegador web, o un telèfon connectat a l'ordinador, o amb un emulador.



En primer lloc, s'ha d'instalar APP Inventor amb Windows


Para construir les  aplicaciones es treballa amb tres eines:

La primers és el Disenyador de App Inventor (App Inventor Designer), on es poden seleccionar els components per l'aplicació. Per accedir has de clicar a beta inventor MIT

La segona es l'editor de Blocs d' App Inventor (App Inventor Blocks Editor) , on s'ensablen els blocs del programa  per especificar com es tenen que comportar els components.

i la tercera es l'emulador o telèfon

Més informació

Read More

Instal·lació d'APP Inventor

El primer pas és instal·lar correctament l'App Inventor. Malgrat és un programa que s'utilitza on-line, i on tot el que generem queda emmagatzemat al núvol, cal que l'ordinador on es treballarà tingui l'emulador correctament instal·lat pels casos on hi ha possibilitat d'utilitzar un dispositiu mòbil real.

App Inventor funciona completament al núvol, sense cap necessitat d'instal·lar res. Ara bé, per anar provant les apps a mida que es van construint hi ha tres opcions:

• Connectar el dispositiu Android i l'ordinador a una mateixa xarxa wifi. És l'opció recomanada i la que funciona de forma més senzilla sense necessitat d'instal·lar res a l'ordinador. 


• Connectar el dispositiu Android a l'ordinador via USB. Funciona correctament, però cal tenir els drivers del dispositiu i instal·lar-los a l'ordinador. En un centre on cada alumne pot tenir un dispositiu diferent i on passen molts alumnes per cada ordinador és una opció complicada de mantenir. 


• Utilitzar un emulador de dispositiu Android. Funciona correctament, encara que no transmet les mateixes sensacions als alumnes utilitzar un dispositiu físic que un emulador. D'altra banda permet veure el funcionament de l'app sense haver de tenir cap dispositiu. Aquesta opció implica haver d'instal·lar un emulador a l'ordinador; a més a més, només està documentada la instal·lació de l'emulador per Windows i Mac. 

PRIMERES PASSES
1. Has de registrar-te com a usuari en appinventorMIT amb el teu compte de google
2. Configuració de l'ordinador

Read More

Comencem amb APP Inventor

• El primer que hem de fer és entrar en el web d'APP Inventor
• A la part superior trobareu un menu, cliqueu a CREATE APPS

• Registreu-vos amb el vostre compte de gmail.
• La primera vegada que entre us sortira aquest diàleg. Cliqueu a PERMET

• S'obrirà una pantalla que no hi ha res perque encara no heu fet cap projecte (APP)

• Recomano deixar l'anglès com a idioma, us serà més fàcil per familiaritzar-vos amb el noms.
• Començem clicant a START NEW PROJECT

Recordeu que els noms dels projectes no contenen espais!!!

Read More

El dissenyador

El dissenyador consta de 4 parts.
1. La paleta on trobem
2. El visor
3. Els components
4. Les propietats

Read More

Interacció amb l'usuari en APP Inventor

Les aplicacions per mòbil o els programes informàtics requereixen de la introducció de dades per part dels usuaris.
Aquestes dades poden ser númeriques o de text. Per poder-les introduïr anirem a la paleta en la zona del dissenyador.

ENTRADA DE DADES:
Introduirem les dades mitjançant els TextBox (Quadres de text) .

SORTIDA DE DADES:
Obtindrem informació textual mitjançant els TextBox (Quadre de text) i els Label (Etiqueta).
Iniciarem l'execució clicant sobre un Button (Botó)

Read More

Les variables

Les variables són elements contenidors d'informació.Es defineixen mitjançant un nom i es poden assignar (SET) o llegir (GET) valors.
Les variables poden ser globals o locals. Si són globals, seran accesibles des de qualsevol lloc del programa, i si son locals, solament seran accesibles des de la rutina on s'estiguin utilitzant.

Read More

El notificador

El notificador (Notifier) és un component no visible que pot mostrar diferents tipus d'alertes i pot registrar les respostes de l'usuari a les mateixes.

El podeu utilitzar per mostrar avisos i alertes als usuaris de la nostra aplicació i també pot registrar les respostes per poder depurar la nostra aplicació.

Farem una aplicació amb el nom exemplesnotificador on podem veure les diferents opcions que hi ha
Dissenyador

En programació:

Read More

Guardar les aplicacions al drive

Les aplicacions que heu anat fent s'han de guardar al vostre drive compartit amb mi. Recordeu que la carpeta ha de tenir el nom: cursX_cognom_Nom   Exemple: 4C_Rovira_Jaume  Dins d'aquesta carpeta tindreu subcarpetes amb els noms del temes del curs

Per baixar l'APP

Una vegada descarregada a l'ordinador, l'heu de pujar a la carpeta amb el nom Pràctiques APP Inventor que hi haurà dins de la carpeta creada anteriorment.

Read More

Hello Purr

La primera pràctica amb APPInventor 2 és Hello Purr, on cal saber crear i utilitzar un botó, posar un text, emetre un so i fer vibrar el mòbil.
1. Entrar al programa amb el vostre compte de google: MIT App Iinventor
2. Tutorial Hello Purr, d'aqui podeu descarregar l'arxiu de so meow.mp3 i la imatge kitty.png
3. Heu de guardar  el codi font (.aia) i el  codi executable (.apk) en la vostra carpeta de drive compartida amb la profe.Per guardar-los:

Podeu veure també aquest video





El resultat final és:

Read More

Compara edat

Farem una app en que donada una edat, podem determinar si és més gran o menor que 16 anys. 

Per fer-lo utilitzarem l'estructura condicional IF-THEN-ELSE per comparar l'edat introduïda amb el 16 i decidir el text a mostrar en el quadre de text.

1. Obrirem APP Inventor
2. En en disenyador afegirem una etiqueta, un textbox (per introduir la edat) , un button, i una altra etiqueta. Poder ordenar l'aplicació afegint horizontan arrengement i colors

3. En bock afegirem

Read More

Talk to me

Aquesta pràctica es dira Talktome.
Es tracta d'introduir un text i al premer un botó, el programa ens parlarà.
Per això:
1. Obrir l'app inventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo Talktome Recordeu que no accepta espais
4. En el dissenyador hem d'afegir:
- textBox
- Button
- TextToSpeech
- AccelerometerSensor

Ho podeu veure en la següent imatge

Quan hem dissenyat anem a blocks. El resultat és el següent

Per comprobar l'aplicació, heu de tenir baixada al mòbil l'aplicació MIT AI2Companion. Es pot trobar a la play Store.

Read More

Calculadora suma

Aquesta pràctica es dira Calculadorasuma
Es tracta d'introduir dos numeros i al premer un botó, el programa ens sumara i donarà el resltat
Per això:
1. Obrir l'app inventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo CalculadoraSuma Recordeu que no accepta espais
4. En el dissenyador hem d'afegir:
- textBox. Li canvieu el nom per primerotextBox1
- textBox. Li canvieu el nom per segundotextBox2
- Label. Li canvieu el nom per resutadoLabel
- Button. Li canvieu el nom per sumarButton


Ho podeu veure en la següent imatge

El resultat és:

Read More

Teorema de Pitagores. APP

Anem a fer una aplicació anomenada TeoremaDePitagores.
1. Obrir el APP inventor
2. Start new project. TeoremaDePitagores
3. Introduirem 3 etiquetes (label), dos capses de text i un boto per calcular, tal com indica el dibuix

El resultat és:

Read More

Bola màgica 8

Aquesta pràctica es dira Bola8magica.
Es tracta de fer preguntes a una bola i ens contestara al'hora que movem el mobil.
1. Obrir l'app inventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo Bola8magica Recordeu que no accepta espais
4. En el dissenyador hem d'afegir:
- Button, aqui introduirem la imatge de la bola (imageball.jpg)
- un VerticalArrengement on aniran 2 etiquetes (labels)
- un so (tada.mp3)
- AccelerometerSensor

Per descarregar les imatges i el so

Ho podeu veure en la següent imatge.

En els blocks introudirem les llistes. El resultat és:

Read More

Bruixola

En aquesta pràctica anem a contruir una bruixola.
Introduirem el sensor d'orientació i imagesprite

1. Obrir l'app inventor
2. CREATE APPS. Recordeu el vostre usuari (correo gmail) i contrasenya
3. START NEW PROJECT. Anomeneu-lo Bruixola Recordeu que no accepta espais
4. Baixeu les imatges bruixola i compas
5. En el dissenyador has d'afegir:
- un canvas. Aqui poseu la imatge de la bruixola
- un imagesprite. Aquesta imatge serà el compas
- Table arrengement i dins 2 etiquetes (labels)
- OrientatorSensor (es el que fara que funcioni la bruixula)

azimut : aquest valor esta relacionat amb la funció del sensor. Tindrà el valor 0 quan apunt al Nord, 90 quant apunti a l'Est, 180 al Sud i 270 a l'Oest.


La programació consisteix:

Teniu un Tutorial Bruixula per si voleu saber-ne més

Read More