control de proyectos app arduino i
TRANSCRIPT
![Page 1: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/1.jpg)
Control de Proyectos con el Móvil I
Introducción AppInventor
Antonio Vives
![Page 2: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/2.jpg)
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)
![Page 3: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/3.jpg)
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/
![Page 4: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/4.jpg)
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.
![Page 5: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/5.jpg)
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
![Page 6: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/6.jpg)
Diseñador
![Page 7: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/7.jpg)
Diseñador Consta de:• Paleta
• Visor
• Componentes
• Propiedades
![Page 8: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/8.jpg)
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.
![Page 9: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/9.jpg)
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
![Page 10: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/10.jpg)
Diseñador; Componentes
Según vayamos incorporando componentes estos irán apareciendo en esta ventana.
Aquí podemos cambiarles el nombre.
![Page 11: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/11.jpg)
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.
![Page 12: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/12.jpg)
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
![Page 13: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/13.jpg)
Bloques
La programación se realiza uniendo los diferentes bloques, como si de un puzzle se tratara.
![Page 14: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/14.jpg)
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.
![Page 15: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/15.jpg)
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
![Page 16: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/16.jpg)
Ejemplo: Gato que maúlla. Bloques
![Page 17: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/17.jpg)
Ejemplo: Pintar un lienzo
• 3 botones para los colores y uno para borrar
•Un Lienzo; la imagen del gato
![Page 18: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/18.jpg)
Pintar un lienzo
![Page 19: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/19.jpg)
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
![Page 20: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/20.jpg)
Programa: Sumar 2 números
![Page 21: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/21.jpg)
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.
![Page 22: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/22.jpg)
Ejemplo: Calculadora
• Pagina principal
• Añadir diferentes Screens, una para cada opreración
• Cada Screen se programa la operación.
![Page 23: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/23.jpg)
Programa: Cambio de screen
Acabar la aplicación para que funcione la
calculadora
![Page 24: Control de proyectos app arduino I](https://reader036.vdocuments.pub/reader036/viewer/2022062223/58e9436d1a28ab84768b62ab/html5/thumbnails/24.jpg)
Gracias y a hasta la próxima