App Inventor

 QUE ÉS APP INVENTOR?

App inventor és un entorn de programació que permet crear aplicacions mòbils de forma senzilla, per la qual cosa la pot fer servir qualsevol persona inclús nens. És una aplicació tant per Android com per IOs, App inventor s'ha creat com un programari de programació visual i intuïtiva, funciona amb un llenguatge basat en blocs. 

CARACTERÍSTIQUES:

• Eina 100% gratuïta.
• Permet crear aplicacions directament des del teu navegador web, només necessites accedir a la seva pàgina web i crear en línia.
• Aprenentatge visual per blocs de codi.
• Pots crear app per sistemes d'Android i iOs.
• Només disponible per telèfons mòbils o tauletes.
• Enfocament didàctic perfecte per ensenyar com eina educativa.

Interfície gràfica:

• Botons
• Camps d'edició de text i d'entrada de contrasenyes
• Imatges
• Etiquetes
• Creador de notificacions
• Barres de desplaçament (Sliders, en anglès)
• Visor de pàgines web (per mostrar una pàgina web, archivo o carpeta en una pàgina d'elements web)

Multimèdia:

• Reproductor i gravador de vídeo
• Càmera de fotos
• Reproductor i gravador d'audio
• Sintetitzador de text a veu (Text-To-Speech, en anglès)

Dibuix i animació:

• Llenços de dibuix (Canvas, en anglès)
• Gràfics animats (Sprites, en anglès)
  

Sensors:

• Acceleròmetre
• Lector de codi de barres i QR
• Geolocalització GPS
• NFC
• Brúixola

Administrador de contactes, trucades...
Connectivitat mitjançant Bluetooth

PROJECTES:

-Hello Pur: Aquest joc consisteix a tocar la pantalla perquè el gat mioli. El primer que vam fer va ser descarregar la imatge del gat i el soroll en MP3.

Disseny: Per crear el disseny és molt senzill, comencem afegint un botó i al costat dret podrem afegir la imatge del gat, eliminem el text perquè no es vegi a la pantalla i canviem el nom del botó a Button1, a continuació afegim una etiqueta que la podem trobar en angles: label, afegim el text de Pet the kitty i canviem la mida de la lletra a 30, poses el color de fons que vulguis. Per últim afegim el Sound que el podem trobar a mèdia, seguidament pugem el soroll del gat i ja estaria el disseny fet, ara seguim amb les instruccions dels blocs

Instruccions: A la part dels blocs, he afegit quatre blocs diferents, el primer el podem trobar a botón 1 i afegim, when Botón1. Click do i afegim Call Sonido1. Play i també Call Sonido1. Vibrate milisecs. Aquí haurem d'afegir un bloc amb un número 500, el podem trobar a maths.

Ho comprovem en el nostre telèfon connectant-lo amb la web, i comprovem que vagui bé el soroll del gat.

Per finalitzar he fet una còpia d'aquest projecte i li he canviat la foto a un lleó i el soroll també.

-PaintPot1: Aquest joc consisteix a dibuixar a sobre del gat amb els colors vermell, blau i verd. A part, he fet un botó que és WIPE, i és per netejar la pintura del gat.

Disseny: Primerament, comencem afegint un botó anomenat disposició horitzontal 1, que el podem trobar a la pestanya layout, la segona, seguidament afegim tres botons i al primer li posem el nom de botónvermell, el segon li posem botónblau i al tercer botónverd, cambiem el color de cada un segons el nom que tingui. Continuem afegint els tres botons sota de la disposició horitzontal. Per continuar afegim un canvas anomenat DrawingCanvas, amb el Height 300 pixels i el Width a Fill parell en el canvas afegim la imatge del gat, i per finalitzar el disseny afegim un altre botó anomenat BotónWipe que serà el botó que netegi el gat.

Instruccions: A la part dels blocs comencem afegint un que es digui: When Botónvermell. Click do i afegim set DrawingCanvas. Paintcolor to i el color vermell, fem al mateix amb els altres botons com tenim a la foto següent. 

Seguidament, creem els següents blocs: when drawingCanvas. Touched do i a dins posem call drawingCanvas. DrawCircle center X, center Y, radius, fill, al que és center X afegim una etiqueta que la podem trobar a variables que es diu get X i a center Y al mateix pero amb get Y, a radius posem 5 que el podem trobar a la pestanya maths i per última fill true que el podem trobar a la pestanya logic. Per finalitzar aquest exercici fem l'últim apartat de blocs: When DrawingCanvas. Dragged do i a dins posem call DrawingCanvas. DrawLine, x1, y2, x2, y2, al que és x1 afegim al bloc get prevX, al que és y1 posem  get prevY, al que és x2 posem get currentX, i per l'últim al de y2 afegim get currentY.

Per últim igual que l'activitat de dalt, l'he fet com jo he volgut, he fet una còpia d'aquest projecte i he canviat la imatge, els colors i per últim té un soroll afegit.

-PaintPot2: Aquest és la mateixa activitat que l'exercici anterior, però he fet algunes modificacions.

-He afegit dos botons nous, al costat de WIPE, he afegit BUTTON BIG i BUTTON SMALL, això ens farà fer circumferències ben fetes, unes més grans i les altres més petites. En els blocs també canvien algunes coses: 

Igual que a les altres activitats també he fet amb un altre animal i també he afegit soroll, he canviat els colors.

-MoleMash: Aquest joc consisteix a clicar sobre un talp que es mou molt de pressa,  cada vegada que cliques sobre seu guanyes un punt.

Disseny: Primer comencem afegint un canvas anomenant-lo Mycanvas amb el height de 300 píxels i el widht de 300 píxels, seguidament afegim un label/etiqueta anomenat ScoreLabel, que seria el marcador i el text Score, seguidament afegim des de la carpeta de Drawing and Animtion afegim ImageSprite i li posem el nom de Mole, posem  l'interval a 500, continuem afegint un clock que el podem trobar a Sensors, li posem el nom de MoleTimer, amb TimeInterval 500, per continuar he afegit dos sounds per poder fer-lo més interessant i millor, seguidament descarreguem la foto que volgué i l'afegim, per últim  i poder acabar la part de disseny afegim un botó anomenat ResetButton amb el text de Reset.

Instruccions: Comencem amb la part de blocs, primer afegim un bloc anomenat to MoveMole do que el podem trobar a l'apartat de procedures, dintre d'aquest bloc afegim set Mole X to i també set Mole Y to els podem trobar picant a sobre de la finestre de Mole i baixant, continuem afegint des de Maths un per multiplicar, i els primers dos afegim random fraction, afegim el de resta i després les pestanyes verdes que veieu a la fotografia que les podem trobar dintre de canvas i mole.

Seguim amb els blocs afegint aquest dos:

Des de variables afegim Initialize global Score to i afegim 0 des de maths, continuem afegint des de procedures afegim To UpdateScore, i dins afegim set ScoreLabel. Text to, i seguidament afegim join des de l'apartat Text, des de text també podem afegir el següent bloc de Score, i per últim i acabar aquest bloc afegim get GlobalScore des de variables.

Seguim amb els blocs ara anem a fer la part més llarga:

Comencem afegint When MoleTimer. Timer do, i afegim des de l'apartat de Mole, Call MoveMole, seguim amb el bloc més llarg, When Mole. Touched X Y do, i afegim des de variables set globalScore to, i afegim de maths la suma, amb get GlobalScore i li sumem 1.

a sota d'això afegim call Noise.Vibrate milisecs i afegim 100, també afegim tres pestanyes més una que es diu call UpdateScore, la següent Call MoveMole i la ultima call Sound1.

Per últim i acabar aquesta activitat fem aquest últim bloc:

When ResetButton. click do, i afegim set GlobalScore to i posem 0, i per últim Call UpdateScore.

Després de tots aquest blocs confirmem que vagi bé, ho podem confirmar des de el telèfon.

-Pong: Aquest joc consisteix en moure una barra per tal que la pilota reboti i no se'n vagi cap a baix.

El primer pas va ser descarregar la foto d'una barra.

Disseny:

Comencem afegint HorizontalArragement, també afegim un label/etiqueta, anomenat ScoreLabel, 

seguidament afegim dos botons, un amb el nom de StartButton i l'atre amb el ResetButton, seguidament afegim canvas amb un ball i imageSprite. Amb això acabem el disseny del pong.

Instruccions: 

Comencem afegint When Ball 1. EdgeReached do i afegim dins d'aquest: If Then Else després de això afegim des de maths el de igualar i afegim get edge i -1.

seguidament com podeu veure a la foto afegim set ball 1. Enabled to i false, i a sota Set ScoreLabel. Text to "Game Over".

On posa else posem Call Ball 1. Bounce edge get edge.

Així acabem el primer bloc gran i ara seguim amb el segon.

When StartButton.click do i afegim Set Ball 1. Enabled to true i també set Ball 1. interval to 10, Set ball1. Heading to random integer from 225 to 315,despres afegim Call ball . MoveTo X Y i Call updateScore scorevalue 0.

Seguim amb els altres blocs:

Comencem afegint initialize global Score to 0, despres afegim to updateScore do i afegim Set GlobalScore to get ScoreValue i després set scoreLabel. Text to Join "score" get globalScore.

Seguim amb més blocs:

Afegim when ball 1. Collided with do i afegim Set other to ImageSprite1 i també call updateScore ScoreValue get globalScore + 1. 

Set Ball 1. Heading to 360-Ball1.Heading

I acabem amb els dos últims blocs:

When ResetButton. Click do i afegim Call Ball 1. Move to X Y, set ScoreLabel. Text to join "score" 0.

i acabem amb l'ultim bloc que diu When ImageSprite1. Dragged do Set ImageSprite. X to Get prevX.

I amb això acabem amb el nostre joc del Pong.