MIT App Inventor
MIT
App Inventor és un entorn de programació visual intuïtiu que permet a tots,
fins i tot als nens, crear aplicacions totalment funcionals per a telèfons
intel·ligents i tauletes. Aquells que
s'inicien en MIT App Inventor poden tenir una primera aplicació senzilla en
funcionament en menys de 30 minuts. I a més, l' eina basada en blocs facilita
la creació d'aplicacions complexes d'alt impacte en un temps significativament
menor que els entorns tradicionals de programació. El projecte MIT App Inventor
busca democratitzar el desenvolupament del programari, alhora que permet a
totes les persones, especialment els joves, passar del consum tecnològic a la
creació de tecnologia.
El compilador que tradueix el
llenguatge visual dels blocs per a l'aplicació en Android utilitza Kawa com a
llenguatge de programació, distribuït com a part del sistema operatiu GNU de la
Free Software Foundation
Inicialment desenvolupat pel professor
Hal Abelson i un equip de Google Educació, mentre que Hal passava un any
sabàtic a Google, App Inventor s'executa com un servei web administrat per
personal del Centre del MIT per a l'aprenentatge mòbil -una col·laboració del
MIT de Ciència computacional i Intel·ligència Artificial de laboratori (CSAIL)
i el laboratori de Mitjans del MIT. El App Inventor comptava en 2015 amb una
comunitat mundial de gairebé dos milions d'usuaris que representaven a 195
països d'arreu del món. Més de 85 mil usuaris setmanals actius de l'eina s'han
construït més de 4,7 milions d'aplicacions d'Android. Una eina de codi obert
que pretén realitzar la programació i la creació d'aplicacions accessibles a
una àmplia gamma d'audiències.
La interfície gràfica: permet a
l'usuari crear aplicacions amb moltes funcionalitats.
Basat en [httpy Blockly] de JavaScript
per crear un llenguatge visual. Aquestes llibreries estan distribuïdes per
Massachusetts Institute of Technology sota la seva llicència lliure.
l'App
Inventor del MIT. Aquests tutorials són versions refinades dels tutorials que
s'han realitzat als llocs de Google i MIT App Inventor des del principi de
l'App Inventor: milers d'iniciants els han utilitzat per aprendre a programar i
aprendre App Inventor.
Aquest
lloc també està dissenyat per al seu ús pels professors. Els materials docents
aquí s'han utilitzat com a base per a nombrosos cursos de secundària,
secundària i universitaris. El curs-en-a-box, que es basa en els cursos de USF
de Wolber, proporciona estructura i material per aconseguir un nou curs en
funcionament en qüestió de dies.
A
l'abast d'uns quants clics, per tant s'obre una gran porta per a moltes
persones que desitgin crear aplicacions sense necessitat de ser programador.
Projectes:
HELLO PURR
HelloPurr és una aplicació senzilla que
es pot generar en molt poc temps. Podem crear un botó que tingui una imatge
d'un gat (o qualsevol altra imatge) i, a continuació, programem el botó perquè
quan es faci clic es reprodueixi un so "meow"(o un altre so).
(descarregar
prèviament la fotografia i el so en
format mp3)
HelloPurr
tindrà un component Button que mostra la imatge( en aquest cas d'un ànec) que
hem descarregat anteriorment.
Cal
canviar la propietat de text del botó: suprimim "Text for Button1",
deixant la propietat de text del botó en blanc perquè no hi hagi escrit sobre
la cara del ànec.
Des de la paleta bàsica, arrosseguem i
deixem anar el component Label al Visor (núm. 1), situant-lo sota la imatge.
Apareixerà sota la llista de components com Label1.
A
la paleta, fem clic al calaix dels mitjans i arrosseguem un component de so i
el col·loquem al visualitzador
Busquem la ubicació de l'arxiu de so mp3 que
hem descarregat abans. Sota el panell Propietats, veiem llavors que la
propietat Font diu cap a cap. Fem clic a
la paraula Cap ... per canviar la font del component Sound1 al nom del axiu mp3
de so.
Fem clic al calaix
Sound1 i arrosseguem el bloc Sound1.Play i
el connectem a la secció "do" quan cliquem Button1. Els blocs
es connecten com a peces de trencaclosques i podem escoltar així un so de clic
quan es connecten
A la paleta integrada, al calaix de
matemàtiques, arrosseguem el bloc de números i el col·loquem al sòcol de
Sound1.Vibrate.
Després de col·locar el bloc de números, fem clic al número "0".
Destaquem el número en negre: escrivim "500.
El nostre apartat de Blocks hauria de ser així:
Pel
que fa al nostre apartat Designer...
Aquesta app ens permet dibuixar línies de color
verd, vermell i blau damunt la imatge del gat ( en el tutorial) i esborrar-les
per començar de nou.
-Tres
botons per seleccionar la pintura vermella, blava o verda (desprès podem
canviar aquests colors), i un altre botó per netejar el dibuix.
-Un
Canvas, la superfície de dibuix. Aquest llenç té un BackgroundImage, que se
suposa que la imatge kitty del tutorial HelloPurr; però nosaltres posem la
fotografia d'un koala en el modificat.
-També
hi ha un component que no veiem: fem servir un arranjament horitzontal per fer
que els tres botons de color s'uneixin.
Això fa cinc components en total. Per
tal de continuar programant l'app anem a Blocks :
Obrim i arroseguem "when ButtonRed.Click do" i dins "set DrawingCanvas.PaintColor to Red" i fem així amb els dos altres colors, " per asignar a cada botó el seu color.
Desprès agafem "when BottonWipe.Click do" i dins ""call DrawingCanvas.Clear" per netejar la pantalla.
Obrim "when DrawingCanvas.Touched do" i dins "call DrawingCanvas.DrawCircle centerX get x centerY get y radius 5 fill true" per pintar els cercles.
Finalment creem el "when DrawingCanvas.Dragged do" i a l'interior arroseguem "call DrawingCanvas.DrawLine x1 get prevX y1 get prevY x2 get currentX y2 get currentY".
El nostre apartat de Blocks hauria de ser així:
Pel que fa al nostre apartat Designer...
PAINT POT II
En el PaintpotII podem dibuixar punts petits o grans punts
mitjançant nous botons. A més, si encara
arrosseguem el dit es produeix una fina
línia com al Paintpot1 ;Això és perquè partIm del PaintpotI per fer aquesta
nova app.
Al Designer, arrosseguem un component
d'HorizontalArrangement sota el
component DrawingCanvas. Anomenem el component "BottomButtons".
Arrosseguem llavors ButtonWipe existent al BottomButtons.
Arrosseguem dos components més de botó de la paleta
BottomButtons, posant-los al costat de ButtonWipe. Els anomenem "ButtonBig
"i "ButtonSmall" i establim el seu text "Big dots"i
"Small dots", respectivament.
A bloks, obrim tres variables per determinar les mides:
"initialize global small to 2", "initialize global dotsize to
2" i "initialize global big to 8".
Arroseguem el nou botó "when ButtonBig.Click do"
i dins "set global dotsize to get global big"i un altre botó
"when ButtonSmall.Click do" i dins "set global dotsize to get
global small".
Finalment canviem el radius 5 del "when
DrawingCanvas.Touched" per "get global dotsize".
En el meu modificat, he afegit molts més colors i he usat
la imatge d'un paó.
El nostre apartat de Blocks hauria de ser així:
Pel que fa al nostre apartat Designer...
MOLEMASH
Aquesta pràctica mostra com crear MoleMash, un joc inspirat
per en el clàssic Whac a Mole-, en el qual criaturas mecàniques breument
estaven fora de forats, i els jugadors
aconseguien punts quan colpejaven una. MoleMash va ser creada per provar la
funcionalitat de la funció sprite.
Al Designer, arrosseguem un llenç, deixant-lo amb el nom
CANVAS1. Definim la seva amplada a
"fill parent... " així que serà tan àmplia com la pantalla i
ajustem l'alçada a 300 píxels.
Arrosseguem un component ImageSprite del grup de dibuix i animació de la paleta.
El posem a qualsevol lloc dins CANVAS1. Fem clic al nom en la part inferior de
la llista de components i canviem el seu nom a
"Mole ". Establim la propietat de la imatge que hem pujat abans.
Arrosseguem un botó, situant-lo sota CANVAS1. Canviem el
nom a "ResetButton " i definim
la propietat de Text a "
Reset".
Arroseguem llavors un component de rellotge i un de so.
A l'apartat de blocks, establim "MoleMove do" i
dintre "set Mole.X to random fraction x (MyCanvas.Width -
Mole.Width)" i "set Mole.Y to random fraction x (MyCanvas.Height -
Mole.Height)", així l'imatge es mourà aleatoriament.
Per una altra banda obrim "UpdateScore do" amb
"set ScoreLabel.Text to join "Score" i get globalscore",
per mostrar el marcador.
Per iniciar el marcador en la puntuació de 0 obrim
"initialize global score to 0"
També arroseguem "when MoleTimer.Timer do" i dins
"call MoleMove"
Obrim "when Mole.Touched do" i dins "set
global score to get global score + 1, call Noise.Vibrate millisecs 100, call
UpdateScore i call MoveMole", per sumar un punt, vibrar i moure la figura
quan aquesta és tocada.
Finalment, per poder tornar a iniciar la partida, afegim un
"when ResetButton.Click do" i dins "set global score to 0, call
UpdateScore".
-En el meu Molemash modificat vaig canviar el Backround al
d'uns forats de terra per on es posen el talps i vaig posar l'imatge d'un altre
talp. També vaig canviar el so alhora de tocar el talp i vaig augmentar la
velocitat a la que aquest es mou a l'apartat de blocks.
Pel que fa al nostre apartat Designer...
PONG
Pong és un joc simple, consisteix en una paleta (que està
controlada per l'usuari) i una pilota. La pilota rebota en la paleta i tres
parets. Si la pilota toca la pala, s' eleva la puntuació de l'usuari, i si la
pilota surt pel costat de la pala, el joc ha acabat.
Al Designer, obrim la paleta bàsic i primer arrosseguem el
component Label1 i canviem el seu nom a
"ScoreLabel " . En el quadre de propietats, treiem el text en
la pantalla del component Label1 per reemplaçar amb " Score" i redimensionem la seva amplada de 150 píxels i l'altura a 30
píxels.
De la paleta bàsica, arrosseguem dos botons a la pantalla
de sota l'etiqueta. Canviem el nom del primer botó a "StartButton " i canviem el
text a
" Start". Canviem també el nom del segon botó a "ResetButton " i el text a "
Reset".
Arrosseguem llavors un component d'HorizontalArrangament a
la pantalla. Arrosseguem ScoreLabel a la
HorizontalArrangement primer i després els dos botons al costat el component
ScoreLabel.
De la paleta basic, obrim
un component Canvas i definim l'amplada a 300 píxels i l'alçada a 390
píxels. Podem canviar el color de fons de Canvas a qualsevol color o fins i tot posar una imatge de fons.
En la paleta Drawing and Animation, arrosseguem una pilota
i un component de imageSpriteal al Canvas de la pantalla. Seleccionem el
component ImageSprite i canviem la seva
imatge a la desitjada.
Seleccionem el Ball1 en el quadre de Components i definim
l'interval a 50, radi fins a 20 i la
velocitat 5. Podem canviar el color de la bola (PaintColor) a qualsevol color
que vulguem.
A l'apartat de blocks, obrim "when Canvas1.Touched
do" amb "set ImageSprite1.X to get x"
Obrim també "when StartButton.Click do" amb
"call UpdateScore scorevalue 0, set Ball1.Enable to true, set
Ball1.Interval to 10, set Ball1.Heading to random integer from 225 to 315, set
Ball1.Speed to 5, call Ball1.MoveTo x Screen1.Width/2 y Ball1.Radius, call
updateScore scorevalue 0";
Arroseguem
"when ImageSprite1.Dragged do" amb "call ImageSprite1.MoveTo x
get currentX y ImageSprite1.Y"
També posem "when Ball1.CollidedWith do" amb
"set other to ImageSprite1, call updateScore scorevalue get global score +
1, set Ball1.Heading to (360 - Ball1.Heading);
Obrim "when Ball1.EdgeReached do" i dins "if
get edge = -1 then set Ball1.Enabled to false, set ScoreLabel.Text to
"Game over!" else call Ball1.Bounce edge get edge"
Gairebé per acabar, arroseguem "initialize global
score to 0";després "to updateScore do" i dins "set global
score to get scorevalue, set ScoreLabel.Text to join "Score" get
global score".
Per acabar arroseguem, "when ResetButton.Click
do" amb "call Ball1.MoveTo x Screen1.Width/2 y Ball1.Radius, set
ScoreLabel.Text to join "Score" 0".
En el meu Pong modificat, vaig canviar la barra per una
raqueta i el color de la pilota. A més, vaig canviar el fons per un patró de
sanefes roses.
El nostre apartat de Blocks hauria de ser així:
Pel que fa al nostre apartat Designer...
