Introducción a App Inventor En la II se explicará el control de proyectos con el móvil

1. Control de Proyectos
con el Móvil I
Introducción AppInventor
Antonio Vives

2. Control de proyectos con el móvil
Para ello necesitamos dos cosas:
• Un microcontrolador (Arduino)
• Un lenguaje de programación para crear la App (App Inventor)

3. Entorno App inventor
Es un entorno de desarrollo de aplicaciones para
dispositivos Android, cuya programación es
parecida al scratch.
Para su utilización solo necesitamos tener una
cuenta de google. Y acceder a:
http://appinventor.mit.edu/

4. App Inventor
Consta de dos herramientas:
- Diseñador (Designer). Es la herramienta de diseño, nos permite
seleccionar los componentes de la App que queremos utilizar y
definir el entorno de usuario de la misma.
- Editor de Bloques (Blocks). Es donde se programa mediante
bloques el comportamiento de la App.

5. Barra de menús
En la Barra de menú es donde
podemos seleccionar:
- Nuestros proyectos
- Conectar el móvil a la aplicación
- Generara la App
También podemos cambiar:
- Diseñador
- Bloques

6. Diseñador

7. Diseñador Consta de:
• Paleta
• Visor
• Componentes
• Propiedades

8. Diseñador; Paleta
• En la paleta podemos elegir los
dispositivos necesarios para crear
nuestra App, desde un botón, hasta la
cámara del móvil o su acelerómetro.
• Solo tenemos que arrastrar el
componente desde la paleta hasta el
visor.

9. Diseñador; Visor
El visor corresponde a
la pantalla de nuestro
móvil y que nosotros
diseñaremos a nuestro
gusto con los
componentes elegidos
desde la paleta

10. Diseñador; Componentes
 Según vayamos
incorporando
componentes estos irán
apareciendo en esta
ventana.
 Aquí podemos
cambiarles el nombre.

11. Diseñador; Propiedades
 Aquí podemos cambiar
las propiedades de todos
los componentes que
hemos añadido al visor.
 Aspecto, tamaño, color,
orientación, etc.

12. Bloques
 Tenemos bloques de carácter
general (Integrados).
 Y bloques específicos
correspondientes a cada uno de
los componentes incorporados al
visor
En esta pantalla es donde
vamos a desarrollar la función
de cada uno de los
componentes

13. Bloques
 La programación
se realiza uniendo
los diferentes
bloques, como si
de un puzzle se
tratara.

14. Lanzar App al móvil.
 Para lanzar la aplicación al móvil el ordenador y el
móvil deben de estar en la misma red.
 Tenemos que bajarnos en el móvil la aplicación “MIT
AI2 Companion”.
 Le damos al botón del menú conectar y elegimos AI
Companion y la ejecutamos en el móvil.
 Leemos el código SQR y lo que tenemos en el visor
aparece en la pantalla del móvil.

15. Ejemplo: Gato que maúlla.
Diseñador
• Un Botón en el
que colocaremos
la imagen del gato
• Una Etiqueta
TOCA EL GATO
• Un Sonido que le
asociaremos el
sonido del gato

16. Ejemplo: Gato que maúlla.
Bloques

17. Ejemplo: Pintar un lienzo
• 3 botones para los
colores y uno para
borrar
•Un Lienzo; la imagen
del gato

18. Pintar un lienzo

19. Ejemplo: Sumar 2 números
• Varias etiquetas para
indicar lo que se va a
hacer
• 2 campos de texto
para introducir datos
• 1 botón para dar el
resultado

20. Programa: Sumar 2 números

21. Otros ejemplos:
 Crear una App en la que podamos elegir que operación (suma,
resta, multiplicacioón o división) queremos hacer, una vez
seleccionada la operación aparecerá la pantalla
correspondiente y realizamos la operación. Para crear esta
App tenemos que definir diferentes pantallas (Screen) y la
pulsar el botón correspondiente cambiamos de pantalla
llamándola por su nombre.

22. Ejemplo: Calculadora
• Pagina principal
• Añadir diferentes
Screens, una para
cada opreración
• Cada Screen se
programa la operación.

23. Programa: Cambio de screen
Acabar la aplicación para
que funcione la
calculadora

24. Gracias y a hasta la próxima