GUÍA INICIACIÓN APP INVENTOR, porRaúl C. (Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.)
Objetivo
A pesar de ser un recurso muy útil para iniciarse en el mundo de la programación, no parece haber demasiados tutoriales o guías de App inventor en castellano. Este documento pretende facilitar un poco las cosas a los hispanohablantes que quieren acercarse al apasionante mundo de la programación a través de la fantástica herramienta que es App Inventor. El documento está organizado en sesiones de trabajo, sólo con el fin de estructurar mínimamente los proyectos y clarificar los objetivos. Las sesiones no tienen una duración determinada, y cada uno puede avanzar a su propio ritmo. Es muy conveniente que el estudiante se desvíe del guión principal cuando lo considere interesante, y desarrolle sus propiasideas, para volver de nuevo al guión al principio de la siguiente sesión. La programación es una artesanía, y la creatividad, la libertad, y la imaginación son fundamentales.
¿Qué es AppInventor?
App Inventor parte de una idea conjunta del Instituto Tecnológico de Massachusetts y de un equipo de Google Education. Se trata de una herramienta web de desarrollo para iniciarse en el mundo de la programación. Con él pueden hacerse aplicaciones muy simples, y también muy elaboradas, que se ejecutarán en los dispositivos móviles con sistema operativo Android. App Inventor es un lenguaje de programación basado en bloques (como piezas de un juego de construcción), y orientado a eventos. Sirve para indicarle al “cerebro” del dispositivo móvil qué queremos que haga, y cómo. Es por supuesto muy conveniente disponer de un dispositivo Android donde probar los programas según los vamos escribiendo.
Sesión #1
Objetivos
1. Crear una cuenta Google
2. Instalar App Inventor 2
3. Instalar MIT AI2 Companion en el dispositivo Android, o conocer el emulador
4. Crear una aplicación e instalarla en el móvil
Instalar App Inventor 2
- Buscamos “App Inventor” en el buscador de Google.
- Hacer clic sobre MIT App Inventor | Explore MIT App Inventor
- Se abrirá la siguiente página: http://appinventor.mit.edu/explore/
- Hacemos clic sobre el botón Create Apps. Si no hemos abierto sesión en Google, el navegador nos pedirá que lo hagamos ahora.
- Al acceder a la cuenta de Google veremos nuestra página en App Inventor.
- Configurar el idioma App Inventor nos muestra inicialmente el interfaz en inglés, sin embargo, podemos utilizarlo también en castellano. La elección del idioma se hace pulsando sobre el icono de la bola del mundo situado en la esquina superior derecha de la página de App Inventor.
- ¡Empezamos!
- Una vez configurado en castellano pulsamos el botón Comenzar un proyecto nuevo... y le damos a nuestro proyecto el nombre “Miau” Esto nos lleva a la ventana principal de App Inventor.
La pantalla que estamos viendo se divide en partes:
- A la izquierda están los objetos que vamos a usar para diseñar la pantalla de nuestra aplicación. Botones, imágenes, dibujos, etc. Es como la paleta de un pintor
- Después explicaremos la parte derecha
- ¿Qué es la pantalla del centro? Representa la pantalla del móvil, y sirve para DISEÑAR el aspecto de la aplicación. La llamaremos Visor
Arriba a la izquierda hay un botón importante: Conectar. Para poder probar cómo funciona lo que vamos haciendo necesitamos transferirlo a un móvil, o usar el emulador incluido en App Inventor (esta opción es menos recomendable).
Para conectar App Inventor con el móvil hacer clic en Conectar, y elegir la opción AI COMPANION. Se abrirá una pantalla como esta:
Instalar MIT AI2 Companion en el dispositivo Android, o conocer el emulador
- Para poder utilizar nuestro dispositivo como banco de pruebas tenemos que descargarnos de Google Play Store una aplicación que se llama “AI2 Companion”. Buscarla en Google Play Store con ese nombre y descargarla ahora. Ocupa poco, y sólo hará falta descargarla una vez. ENLACE A LA APLICACIÓN
- Abriremos ahora en el móvil/TABLET la aplicación que hemos descargado, haciendo clic sobre el icono MIT AI2 Companion. Puede estar en la página principal o dentro del grupo de Aplicaciones.
- Cuando se abra, elegiremos Connect with code (color naranja), y escribiremos el código de letras y números (alfanumérico) que aparece en la pantalla del ordenador. Quien pueda leer códigos QR puede hacerlo desde la pantalla ahora pulsando en el botón azul scan QR code. Para que esto sea posible el ordenador y el dispositivo deben estar en la misma red, es decir, que deben tomar la IP del mismo rango, típicamente del mismo enrutador (router). Si no disponemos de WIFI podremos utilizar el emulador, o una conexión USB (ver detalles para USB en la web de App Inventor).
- Para abrir el emulador, haremos clic sobre Conectar y elegiremos la opción Emulador. No hay que hacer nada más, tarda un poco, pero una vez que cargue se verá la pantalla en blanco de nuestra aplicación.
- Una vez establecida la conexión entre App Inventor y el móvil veremos una pantalla en blanco con el título Screen1
¡Empezamos a programar!
Antes de nada, para este ejercicio necesitamos dos recursos que tenemos que descargar en nuestro ordenador:
- Kitty.png
- Miau.mp3
Podemos descargarlos del siguiente contenedor:
- http://coderdojo-medialabprado.4shared.com
- Haremos clic con el botón izquierdo sobre el archivo que queremos descargar.
- Se abrirá una pantalla mostrando el archivo. Pulsaremos entonces sobre el botón Descargar