PDF de programación - Guía de iniciación a App Inventor

GUÍA DE INICIACIÓN

A APP INVENTOR



Guía de iniciación a APP INVENTOR (2015)

1

Tabla de contenido

GUÍA DE INICIACIÓN A APP INVENTOR

Objetivo
¿Qué es AppInventor?
Sesión #1

Objetivos
Crear una cuenta Google
Instalar App Inventor 2
Configurar el idioma
¡Empezamos!
Instalar MIT AI2 Companion en el dispositivo Android, o conocer el
emulador
¡Empezamos a programar!
Incluir un botón en la pantalla
Añadir un sonido
Ahora a vibrar
Conocer la página web de App Inventor (tutoriales, ejemplos, guías etc.)
Ideas para profundizar nosotros mismos

Sesión #2

Crear una aplicación para dibujar
Coordenadas x e y
Cambiar el tamaño del pincel con un Deslizador
Guardar un archivo con el dibujo que hemos hecho
Ideas para mejorar la aplicación

Sesión #3

Objetivos para hoy
¿Qué número está pensando?
Definimos la interfaz del juego
Generamos un número aleatorio
Guardamos el número en una variable
Pedimos un número al jugador
Hacemos comparaciones con la instrucción si-entonces
Comparamos los números
Bloque tomar para conocer el valor de una variable, texto o etiqueta
Bloque poner para guardar el valor de una variable, texto o etiqueta
Bucles si-entonces anidados
Uso de un reloj para calcular el tiempo
Otras propuestas de mejora para la aplicación
Mejoras en la interfaz de usuario

Sesión #4

Objetivos para hoy
Componentes ImageSprite y Pelota
Definición del escenario de juego
Proporciones y límites. Matemática aplicada
Definir el objetivo del juego
El movimiento de la pelota
Crear los bichos a aplastar


Esta obra está licenciada bajo la Licencia Creative Commons Atribución 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.



Guía de iniciación a APP INVENTOR (2015)

2

Manejo de los enemigos
Procedimiento para tareas definidas y repetitivas
Implementar la mecánica del juego
Gestión del marcador
Reorganizando los bloques de código
Limitar el tiempo para crear tensión
¿Cuándo termina el juego?
Fin del juego
Congelando el tiempo
Añadir un botón para empezar de nuevo
Un último detalle
Ideas para mejorar el juego

Comentarios finales



Esta obra está licenciada bajo la Licencia Creative Commons Atribución 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.



Guía de iniciación a APP INVENTOR (2015)

3



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 propias ideas, 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.

Este documento fue escrito inicialmente para utilizarlo como guía durante las sesiones


de iniciación a App Inventor que se desarrollan cada tarde del sábado en el Coder Dojo
del centro MediaLab Prado de Madrid, en España. Las posibilidades de App Inventor


son extensísimas, y la intención es simplemente que sirva de ayuda en los primeros
pasos, para que el estudiante pueda después continuar por sí mismo, buscando más

recursos de aprendizaje en la web, y llevado a cabo sus propias ideas.

Muy gustosamente atenderé las preguntas, dudas, comentarios o ideas a través del

correo electrónico ​[email protected]​, o la cuenta de Twitter @raulconm



¡Feliz programación!



Raúl C.


Esta obra está licenciada bajo la Licencia Creative Commons Atribución 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.



Guía de iniciación a APP INVENTOR (2015)

4



¿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
5. Conocer la página web de App Inventor (tutoriales, ejemplos, guías etc.)



Crear una cuenta Google
Es necesario crear una cuenta Google porque App Inventor es un trabajo conjunto


entre Google y el MIT (​http://web.mit.edu/​). Recuérdese que Android es de Google.
Abrir el navegador. OJO, tiene que ser Google Chrome, Safari o Firefox. Internet

Explorer aún no es compatible con App Inventor.
Ir a la página ​https://accounts.google.com/
Utilizar una cuenta ya existente o crear una nueva. Nos hará falta para usar App


Inventor.
Seguir las instrucciones de la página de Google para crear una nueva cuenta.



Instalar App Inventor 2
Buscamos “App Inventor” en el buscador de Google.
Hacer clic sobre ​Front Page | Explore MIT App Inventor​. 


Esta obra está licenciada bajo la Licencia Creative Commons Atribución 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.



Guía de iniciación a APP INVENTOR (2015)



Se abrirá la siguiente página:


 



Hacemos clic sobre el botón ​Create​. Si no hemos abierto sesión en Google, el
navegador nos pedirá que lo hagamos ahora.



5



Esta obra está licenciada bajo la Licencia Creative Commons Atribución 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.



Guía de iniciación a APP INVENTOR (2015)

6



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.



Esta obra está licenciada bajo la Licencia Creative Commons Atribución 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.



Guía de iniciación a APP INVENTOR (2015)

7



El interfaz está traducido al castellano, pero podemos aún encontrar algunos textos

genéricos de ayuda en inglés. En todo caso, serán muy pocos, y no deberíamos


encontrar problemas para trabajar con la herramienta sin saber inglés.



¡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).



Esta obra está licenciada bajo la Licencia Creative Commons Atribución 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.



Guía de iniciación a APP INVEN