30/4/2016

ProgramacinII:Scratch,MITAppInventor.Primerosprogramas.

19thApril2015

ProgramacinII:Scratch,MITAppInventor.Primeros
programas.

Ahorayatenisnocionesdeprogramacinporbloquesyconcdigoeshoradeprofundizarunpocoydecrear
aplicaciones.Existeunaopcinweb,http://scratch.mit.edu[http://scratch.mit.edu/] ,visual,intuituva,fcildecrear
y repasa los conceptos bsicos de programacin. Nosotros nos centraremos en MIT APP Inventor
[http://ai2.appinventor.mit.edu/] ,unlenguajedebloquescreadoparaprogramarparatelfonosmvilesdeforma
amable para el programador novato por el Instituto de Tecnologa de Massachussets
[http://es.wikipedia.org/wiki/Instituto_Tecnol%C3%B3gico_de_Massachusetts].
NOTA:AunqueAppInventordalaopcindetrabajarencastellano, recomiendousarloeninglsyaquela
terminologa es mucho ms parecida a la de los lenguajes de programacin ms avanzados y permite
acostumbrarseyentrenarsusintaxis,partemuyimportantedelaprogramacin.

[http://4.bp.blogspot.com/
nlCL2CeL2LY/VQHI2pg4wnI/AAAAAAAAAW4/Dl_B7qCt8E/s1600/welcome_v2.png]

Endesarrollodeunaaplicacinmvilsencillapodemosconsiderarlassiguientesetapas:
1. Idea, planificacin y diseo: Tenemos que decidir qu tarea queremos que lleve a cabo la
aplicacinycmolovaahacer(cmosereldiseo,ylainteractuacinconelusuario).

[http://1.bp.blogspot.com/
MzG6i5Wvj8M/VS4D4Dw0ejI/AAAAAAAAAXM/FI3mqkTRMgc/s1600/TBBTseason4e12a.jpg]
LeonardplanificandounaaplicacinenTheBigBangTheory

Ejemplo:queremoshacerunaaplicacinquecalculeelrestodedividirdosnmeros.
http://fuentic1415.blogspot.mx/2015/04/programacioniiscratchmitapp.html

1/9

30/4/2016

ProgramacinII:Scratch,MITAppInventor.Primerosprogramas.

2.Creacinypreparacindeloselementosbsicos:Debemosempezarasituarloselementos
necesarios (una o varias pantallas, cada una con sus items de texto, introduccin de datos,
botones,imgenes,grficos...).
Ejemplo:Situamosloselemenosquequeremosennuestraaplicacin:

[http://2.bp.blogspot.com/XwK28C16E4Q/VS9rK9URb7I/AAAAAAAAAaA/x
eXHLjuAwk/s1600/Captura%2Bde%2Bpantalla%2B20150415%2Ba%2Bla(s)%2B09.39.06.png]
Loselementosqueusaremos
enprincipio

[http://1.bp.blogspot.com/
Q9f9UOf4bys/VS9flkeIgtI/AAAAAAAAAZM/NubPpegngIg/s1600/Captura%2Bde%2Bpantalla%2B201504
16%2Ba%2Bla(s)%2B09.06.19.png]
Nuestraaplicacinconstadeetiquetasdetexto(labels),
cajasdeedicin(TextBox)yunbotn(Button).
http://fuentic1415.blogspot.mx/2015/04/programacioniiscratchmitapp.html

2/9

30/4/2016

ProgramacinII:Scratch,MITAppInventor.Primerosprogramas.

3.Programacinylgicadelaaplicacin.Debemosdarlelasinstruccionesaloselementosdel
programaparaqueinteractenconelusuarioyrealicenlosclculosytareaspertinentes.
Ejemplo:elcdigoenbloquesdelaaplicacinensuprimeraversines:

[http://2.bp.blogspot.com/
oBCfFOkZCcU/VS9ghpypTrI/AAAAAAAAAZU/uEg5WDyi4QQ/s1600/Captura%2Bde%2Bpantalla%2B201504
16%2Ba%2Bla(s)%2B09.10.41.png]
Leindicamosalaaplicacinquecuandosepulseelbotnescribaenlaterceraetiquetadetexto"Oresultado:"
seguidodelrestoqueresultaaldividirloquehayaescritoenTextBox1yenTextBox2.

4. Prueba y depuracin. En programacin es casi imposible que las cosas salgan bien a la
primera, as que hay que probar suficientemente la aplicacin y depurar el programa hasta que
funcionesinfallos(bugs,eningls).Debemosevaluartodaslasposibilidadesdeinteractuacin,y
realizarlasmejorasqueconsideremosoportunas.

Ejemplo:comprobamosquealintroducirlosnmeros15y6,laaplicacinnosmuestraelrestocorrectamente,
quedebeser3.

http://fuentic1415.blogspot.mx/2015/04/programacioniiscratchmitapp.html

3/9

30/4/2016

ProgramacinII:Scratch,MITAppInventor.Primerosprogramas.

[http://1.bp.blogspot.com/
wChpZqfxp0o/VS9hVp9WDKI/AAAAAAAAAZc/2QfXEqtXlKY/s1600/Captura%2Bde%2Bpantalla%2B201504
16%2Ba%2Bla(s)%2B09.13.41.png]

Pero si hacemos ms pruebas, comprobamos que podemos introducir texto en vez de nmeros, lo que nos
devuelveunmensajedeerror.Asquedecidimosrealizarunacorreccinenelprograma,seleccionandoenlas
cajasdetextolaopcinNumbersOnlydemodoqueslonospermiteintroducirnmeros:

[http://2.bp.blogspot.com/
YsTpCD6rg5Q/VS9hybUw11I/AAAAAAAAAZk/Toywgeftjtg/s1600/Captura%2Bde%2Bpantalla%2B201504
16%2Ba%2Bla(s)%2B09.15.25.png]
Mensajedeerrorqueafeanuestraaplicacin

5. Puesta a punto del diseo y la esttica de la aplicacin. Una vez que nuestra aplicacin
funciona,podemosdarleelacabadofinal,mejorarelaspecto,ladisposicindeloselementos,las
http://fuentic1415.blogspot.mx/2015/04/programacioniiscratchmitapp.html

4/9

30/4/2016

ProgramacinII:Scratch,MITAppInventor.Primerosprogramas.

formasycoloreshastaqueseafuncionalyatractivo,oporsiqueremosdarleunaspectopersonal.
Una interfaz visual cmoda, intuitiva y apropiada es fundamental para que la aplicacin sea
buena.
Ejemplo:laaplicacinunavezrealizadosalgunosretoquesquedaraas:

[http://3.bp.blogspot.com/bLzMD2
tV0k/VS9pGCbHyNI/AAAAAAAAAZ0/eS8ALgfJIDU/s1600/Apd9R3JC5FCyAutGGDIA1UctmrGPIEyMVexOPO3UsXC.jpg]
Laaplicacinyaenmvilyconalgunos
ajusteseneldiseo

6. Depuracin final: Este punto puede prolongarse tanto como queramos, ya que con las
posibilidades de comunicacin que hay hoy en da, podemos ofrecer a los usuarios
actualizaciones frecuentes para mejorar la aplicacin, salvo que consideremos una versin
definitiva que no admita mejoras. La depuracin final nos har repetir los pasos anteriores
centrndonosenaquellaspartessusceptiblesdemejora.
Ejemplo:ennuestraaplicacin,porejemplo,podramosinclurunbotnquelimpiaralapantalla.
Aquvemosdosdiagramassubrayandoenotrostrminoslamismaideasobrelasfasesdedesarrollo:

http://fuentic1415.blogspot.mx/2015/04/programacioniiscratchmitapp.html

5/9

30/4/2016

ProgramacinII:Scratch,MITAppInventor.Primerosprogramas.

[http://1.bp.blogspot.com/
yU5mpdwyeww/VS4HUaEg6dI/AAAAAAAAAXY/YFN3EjOqkDk/s1600/fases.png]
http://ciclodevidasoftware.wikispaces.com[http://ciclodevidasoftware.wikispaces.com/]

[http://3.bp.blogspot.com/
tndx9iS7cqM/VS4HW4nxTAI/AAAAAAAAAXo/uGxDpJPwws/s1600/ciclodevida.jpg]
https://wagonzalez2.files.wordpress.com[https://wagonzalez2.files.wordpress.com/]

Actividad:
1. Las prximas actividades, que se irn introduciendo en las siguientes entradas del blog, consistirn en
programassencillosparaaprenderlabasedeAppInventor.DatedealtaenlaaplicacincontucuentaGoogle.
Para acostumbrarte al manejo de APP Inventor trata de reproducir la aplicacin Calcula Resto que se
detallamsarriba:
1. Crea una nueva aplicacin. Comienza arrastrando los elementos sealados en el
diseador(designer)ymodificandolasetiquetasdetextoenlacolumnaderecha.

http://fuentic1415.blogspot.mx/2015/04/programacioniiscratchmitapp.html

6/9

30/4/2016

ProgramacinII:Scratch,MITAppInventor.Primerosprogramas.

[http://1.bp.blogspot.com/
Q9f9UOf4bys/VS9flkeIgtI/AAAAAAAAAZM/NubPpegngIg/s1600/Captura%2Bde%2Bpantalla%2B201504
16%2Ba%2Bla(s)%2B09.06.19.png]
Nuestraaplicacinconstadeetiquetasdetexto(labels),
cajasdeedicin(TextBox)yunbotn(Button).

2. Cambia al editor por bloques en la esquina superior derecha de la pantalla (blocks). Incluye los
elementosquesemuestranabajo,eligindolosenellugarquecorrespondeenlacolumnaizquierda:

[http://1.bp.blogspot.com/vxgDXDCYoy4/VS93gMwZnTI/AAAAAAAAAaQ/4spE6v3l2us/s1600/codigo1.png]

"WhenButton1click"Seseleccionapulsandosobreelbotn.Ledicealprogramaloquedebehaceral
detectarunapulsacin
"setLabel3.text"SeseleccionapulsandosobreelLabel.Ledicealprogramaeltextoquedebeaparecer
enlaetiquetadenominada"Label3".
"join"Seseleccionapulsandosobre"Text".Sirveparaencadenartexto.Ennuestrocasoencadenamos
"Oresultado:"yunaoperacinmatemticallamadamdulo,quenosdaelrestodeunadivisin.
"moduloof"Seseleccionapulsandosobre"Math".Comodividendodebemosinclureltextoquehayenla
primeracajaqueintroduceelusuarioycomodivisorelquehayenlasegunda(TextBox1.TextyTextBox2.Text).
3.Paraprobarlaaplicacinexistenvariasopciones:

Existe un emulador (Connect/Emulator) que se puede ejecutar tras descargar el programa

http://fuentic1415.blogspot.mx/2015/04/programacioniiscratchmitapp.html

7/9

30/4/2016

ProgramacinII:Scratch,MITAppInventor.Primerosprogramas.

correspondiente en el ordenador. Suele ser algo lento y no siempre se muestra la aplicacin

correctamente.
LaopcinmscmodaesutilizarlaaplicacinMITAI2CompanionApp,quepodeisdescargar
envuestrostelfonosmvilesescaneandoelsiguientecdigoQR:

[http://3.bp.blogspot.com/
WKubGrEC6Ek/VQHEE0ZooQI/AAAAAAAAAWs/93nzPPapfHs/s1600/ai2storecompanionQR.png]

Atravsdeesteprogramapodremosprobarnuestraaplicacincuandoelordenadoryelmvil
estn conectados a la misma red WIFI (Connect/AI Companion), o en caso contrario
conectndoloatravsdeunaconexinUSB(Connect/USB).
ParausarlaconexinUSBanteshayqueactivarelmododedepuracinenelmvil,que,
dependiendodelaversindeAndroidserealizaatravsdelosmensdeajustesoatravsdeun
"easter egg" en las ltimas versiones de Android, pulsando repetidamente sobre "Nmero de
compilacin".
Otra opcin es hacer un Build (compilacin) del archivo APK que permitir instalar la
aplicacin programada en vuestro mvil. Es un proceso algo ms lento, pero tambin es
cmodo,yaquesegenerauncdigoQRquedescargaelinstaladordelaappenvuestromvilal
escanearlo.
4. Juega un poco con las cuestiones de diseo y plantea posibles mejoras y actualizaciones del programa.
CreauniconoconalgneditorgrficoygeneraelAPKdelaaplicacinparainstalarlaversindefinitivaenel
mvil.Consltameencasodeduda.

http://fuentic1415.blogspot.mx/2015/04/programacioniiscratchmitapp.html

8/9

30/4/2016

ProgramacinII:Scratch,MITAppInventor.Primerosprogramas.

[http://3.bp.blogspot.com/bLzMD2
tV0k/VS9pGCbHyNI/AAAAAAAAAZ0/eS8ALgfJIDU/s1600/Apd9R3JC5FCyAutGGDI
A1UctmrGPIEyMVexOPO3UsXC.jpg]
Laaplicacinyaenmvilyconalgunos
ajusteseneldiseo,hacedloavuestramanera.

5. Sube el APK a Dropbox de forma pblica. Genera un cdigo QR desde este enlace [http://www.codigos
qr.com/generadordecodigosqr/] y publcalo en tu blog (explicando que es una aplicacin creada con APP
inventoryloquehace)paraqueloslectorespuedanprobarlaentumvil.
Publicado19thApril2015porAlbertoFuentic
Etiquetas:Android,cdigoQR,MITAPPinventor,programacin,Scratch,TEMA4Programacin
0 Aadiruncomentario

Introducetucomentario...

Comentarcomo:

Publicar

CuentadeGoogle

Vistaprevia

http://fuentic1415.blogspot.mx/2015/04/programacioniiscratchmitapp.html

9/9