Programación MIT App Inventor

30/4/2016

Programación II: Scratch, MIT App Inventor. Primeros programas.

19th April 2015


Ahora ya tenéis nociones de programación por bloques y con código es hora de profundizar un poco y de crear aplicaciones. Existe Existe una opción web, http://scratch.mit.edu [http://scratch.mit.edu/] , visual, intuituva, fácil de crear y repasa los conceptos básicos de programación. Nosotros nos centrarem os en MIT APP Inventor [http://ai2.appinventor.mit.edu/] [http://ai2.appinve ntor.mit.edu/] , un lenguaje de bloques creado para programar para teléfonos móviles de forma amable para el programador novato por el Instituto de Tecnología Tecnol ogía de Massachussets [http://es.wikipedia.org/wiki/Instituto_Tecnol%C3%B3gico_de_Massachusetts] [http://es.wikipedi a.org/wiki/Instituto_Tecnol%C3%B3gico_de_Massachusetts] . NOTA: Aunque App Aunque App Inventor da la opción de trabajar en castellano, recomiendo recomiendo usarlo en inglés inglés ya que la terminología es es mucho más parecida a la de los lenguajes de programación programación más avanzados y permite acostumbrarse y entrenar su sintaxis, parte muy importante de la programación.

[http://4.bp.blogspot.com/[http://4.bp .blogspot.com/nlCL2CeL2LY/VQHI2pg4wnI/AAAAAAAAAW4/Dl_-B7qCt8E/s1600/welc lCL2CeL2LY/VQHI2pg4wnI/AAAAAAAAAW4/Dl_-B7qCt8E/s1600/welcome_v2.png] ome_v2.png]

En desarrollo de una u na aplicación móvil sencilla podemos considerar las siguientes etapas: siguientes etapas: 1. Idea, planificación y diseño: diseño : Tenemos que decidir qué tarea queremos que lleve a cabo la aplicación y cómo lo va a hacer (cómo será el diseño, y la interactuación con el usuario).

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

Leonard planificando una aplicación en The Big Bang Theory

Ejemplo: queremos hacer una aplicación que calcule el resto de dividir dos números. http://fuentic1415.blogspot.mx/2015/04/programacion-ii-scratch-mit-app.html

1/9

30/4/2016


2. Creación y preparación de los elementos básicos : Debemos empezar a situar los elementos necesarios (una o varias pantallas, cada una con sus items de texto, introducción de datos, botones, imágenes, gráficos...). Ejemplo: Situamos los elemenos que queremos en nuestra aplicación:

[http://2.bp.blogspot.com/-XwK28C16E4Q/VS9rK9URb7I/AAAAAAAAAaA/xeXHLjuAwk/s1600/Captura%2Bde%2Bpantalla%2B2015-04-15%2Ba%2Bla(s)%2B09.39.06.png]

Los elementos que usaremos en principio

[http://1.bp.blogspot.com/Q9f9UOf4bys/VS9flkeIgtI/AAAAAAAAAZM/NubPpegngIg/s1600/Captura%2Bde%2Bpantalla%2B2015-0416%2Ba%2Bla(s)%2B09.06.19.png]

Nuestra aplicación consta de etiquetas de texto (labels), cajas de edición (TextBox) y un botón (Button). http://fuentic1415.blogspot.mx/2015/04/programacion-ii-scratch-mit-app.html

2/9

30/4/2016


3. Programación y lógica de la aplicación. Debemos darle las instrucciones a los elementos del programa para que interactúen con el usuario y realicen los cálculos y tareas pertinentes. Ejemplo: el código en bloques de la aplicación en su primera versión es:

[http://2.bp.blogspot.com/oBCfFOkZCcU/VS9ghpypTrI/AAAAAAAAAZU/uEg5WDyi4QQ/s1600/Captura%2Bde%2Bpantalla%2B2015-0416%2Ba%2Bla(s)%2B09.10.41.png]

Le indicamos a la aplicación que cuando se pulse el botón escriba en la tercera etiqueta de texto "O resultado é:" seguido del resto que resulta al dividir lo que haya escrito en TextBox1 y en TextBox2.

4. Prueba y depuración. En programación es casi imposible que las cosas salgan bien a la primera, así que hay que probar suficientemente la aplicación y depurar el programa hasta que funcione sin fallos (bugs, en inglés). Debemos evaluar todas las posibilidades de interactuación, y realizar las mejoras que consideremos oportunas.

Ejemplo: comprobamos que al introducir los números 15 y 6, la aplicación nos muestra el resto correctamente, que debe ser 3.

http://fuentic1415.blogspot.mx/2015/04/programacion-ii-scratch-mit-app.html

3/9

30/4/2016


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

Pero si hacemos más pruebas, comprobamos que podemos introducir texto en vez de números, lo que nos devuelve un mensaje de error. Así que decidimos realizar una corrección en el programa, seleccionando en las cajas de texto la opción NumbersOnly de modo que sólo nos permite introducir números:

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

Mensaje de error que afea nuestra aplicación

5. Puesta a punto del diseño y la estética de la aplicación . Una vez que nuestra aplicación funciona, podemos darle el acabado final, mejorar el aspecto, la disposición de los elementos, las http://fuentic1415.blogspot.mx/2015/04/programacion-ii-scratch-mit-app.html

4/9

30/4/2016


formas y colores hasta que sea funcional y atractivo, o por si queremos darle un aspecto personal. Una interfaz visual cómoda, intuitiva y apropiada es fundamental para que la aplicación sea buena. Ejemplo: la aplicación una vez realizados algunos retoques quedaría así:

[http://3.bp.blogspot.com/-bLzMD2tV0k/VS9pGCbHyNI/AAAAAAAAAZ0/eS8ALgfJIDU/s1600/Apd9R3JC5FCyAutGGDI-A1UctmrGPIEyMVexOPO3UsXC.jpg]

La aplicación ya en móvil y con algunos ajustes en el diseño

6. Depuración final: Este punto puede prolongarse tanto como queramos, ya que con las posibilidades de comunicación que hay hoy en día, podemos ofrecer a los usuarios actualizaciones frecuentes para mejorar la aplicación, salvo que consideremos una versión definitiva que no admita mejoras. La depuración final nos hará repetir los pasos anteriores centrándonos en aquellas partes susceptibles de mejora. Ejemplo: en nuestra aplicación, por ejemplo, podríamos incluír un botón que limpiara la pantalla. Aquí vemos dos diagramas subrayando en otros términos la misma idea sobre las fases de desarrollo:


5/9

30/4/2016


[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/uGxDpJP-wws/s1600/ciclo-de-vida.jpg]

https://wagonzalez2.files.wordpress.com [https://wagonzalez2.files.wordpress.com/]

Actividad: 1. Las próximas actividades, que se irán introduciendo en las siguientes entradas del blog, consistirán en programas sencillos para aprender la base de App Inventor. Date de alta en la aplicación con tu cuenta Google. Para acostumbrarte al manejo de APP Inventor trata de reproducir la aplicación Calcula Resto que se detalla más arriba: 1º. Crea una nueva aplicación. Comienza arrastrando los elementos diseñador (designer ) y modificando las etiquetas de texto en la columna derecha.


señalados

en

el

6/9

30/4/2016


[http://1.bp.blogspot.com/Q9f9UOf4bys/VS9flkeIgtI/AAAAAAAAAZM/NubPpegngIg/s1600/Captura%2Bde%2Bpantalla%2B2015-0416%2Ba%2Bla(s)%2B09.06.19.png]

Nuestra aplicación consta de etiquetas de texto (labels), cajas de edición (TextBox) y un botón (Button).

2º. Cambia al editor por bloques en la esquina superior derecha de la pantalla ( blocks). Incluye los elementos que se muestran abajo, eligiéndolos en el lugar que corresponde en la columna izquierda:

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

- "When Button1 click " - Se selecciona pulsando sobre el botón. Le dice al programa lo que debe hacer al detectar una pulsación - "set Label3.text " - Se selecciona pulsando sobre el Label. Le dice al programa el texto que debe aparecer en la etiqueta denominada "Label3". - " join" - Se selecciona pulsando sobre "Text". Sirve para encadenar texto. En nuestro caso encadenamos "O resultado é:" y una operación matemática llamada módulo, que nos da el resto de una división. - "modulo of " - Se selecciona pulsando sobre "Math". Como dividendo debemos incluír el texto que hay en la primera caja que introduce el usuario y como divisor el que hay en la segunda ( TextBox1.Text y TextBox2.Text ). 3º. Para probar la aplicación existen varias opciones :

- Existe un emulador (Connect/Emulator ) que se puede ejecutar tras descargar el programa http://fuentic1415.blogspot.mx/2015/04/programacion-ii-scratch-mit-app.html

7/9

30/4/2016


correspondiente en el ordenador . Suele ser algo lento y no siempre se muestra la aplicación correctamente. - La opción más cómoda es utilizar la aplicación MIT AI2 Companion App, que podeis descargar en vuestros teléfonos móviles escaneando el siguiente código QR:

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

- A través de este programa podremos probar nuestra aplicación cuando el ordenador y el móvil estén conectados a la misma red WIFI (Connect/AI Companion), o en caso contrario conectándolo a través de una conexión USB (Connect/USB). - Para usar la conexión USB antes hay que activar el modo de depuración en el móvil , que, dependiendo de la versión de Android se realiza a través de los menús de ajustes o a través de un "easter egg" en las últimas versiones de Android, pulsando repetidamente sobre "Número de compilación". - Otra opción es hacer un Build (compilación) del archivo APK que permitirá instalar la aplicación programada en vuestro móvil. Es un proceso algo más lento, pero también es cómodo, ya que se genera un código QR que descarga el instalador de la app en vuestro móvil al escanearlo. 4º. Juega un poco con las cuestiones de diseño y plantea posibles mejoras y actualizaciones del programa. Crea un icono con algún editor gráfico y genera el APK de la aplicación para instalar la versión definitiva en el móvil. Consúltame en caso de duda.


8/9

30/4/2016


[http://3.bp.blogspot.com/-bLzMD2tV0k/VS9pGCbHyNI/AAAAAAAAAZ0/eS8ALgfJIDU/s1600/Apd9R3JC5FCyAutGGDI A1UctmrGPIEyMVexOPO3UsXC.jpg] La aplicación ya en móvil y con algunos ajustes en el diseño, hacedlo a vuestra manera.

5º. Sube el APK a Dropbox de forma pública. Genera un código QR desde este enlace [http://www.codigosqr.com/generador-de-codigos-qr/] y publícalo en tu blog (explicando que es una aplicación creada con APP inventor y lo que hace) para que los lectores puedan probarla en tu móvil. Publicado 19th April 2015 por Alberto Fuentic Etiquetas: Android, código QR, MIT APP inventor, programación, Scratch, TEMA 4 - Programación 0

Añadir un comentario

Introduce tu comentario...

Comentar como:

Publicar

Cuenta de Goo

Vista previa


9/9

Programación MIT App Inventor

Recommend Documents