Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Control de Proyectos
con el Móvil I
Introducción AppInventor
Antonio Vives
Control de proyectos con el móvil
Para ello necesitamos dos cosas:
• Un microcontrolador (Arduino)
• Un lenguaje de progra...
Entorno App inventor
Es un entorno de desarrollo de aplicaciones para
dispositivos Android, cuya programación es
parecida ...
App Inventor
Consta de dos herramientas:
- Diseñador (Designer). Es la herramienta de diseño, nos permite
seleccionar los ...
Barra de menús
En la Barra de menú es donde
podemos seleccionar:
- Nuestros proyectos
- Conectar el móvil a la aplicación
...
Diseñador
Diseñador Consta de:
• Paleta
• Visor
• Componentes
• Propiedades
Diseñador; Paleta
• En la paleta podemos elegir los
dispositivos necesarios para crear
nuestra App, desde un botón, hasta ...
Diseñador; Visor
El visor corresponde a
la pantalla de nuestro
móvil y que nosotros
diseñaremos a nuestro
gusto con los
co...
Diseñador; Componentes
 Según vayamos
incorporando
componentes estos irán
apareciendo en esta
ventana.
 Aquí podemos
cam...
Diseñador; Propiedades
 Aquí podemos cambiar
las propiedades de todos
los componentes que
hemos añadido al visor.
 Aspec...
Bloques
 Tenemos bloques de carácter
general (Integrados).
 Y bloques específicos
correspondientes a cada uno de
los com...
Bloques
 La programación
se realiza uniendo
los diferentes
bloques, como si
de un puzzle se
tratara.
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.
 Tenemo...
Ejemplo: Gato que maúlla.
Diseñador
• Un Botón en el
que colocaremos
la imagen del gato
• Una Etiqueta
TOCA EL GATO
• Un S...
Ejemplo: Gato que maúlla.
Bloques
Ejemplo: Pintar un lienzo
• 3 botones para los
colores y uno para
borrar
•Un Lienzo; la imagen
del gato
Pintar un lienzo
Ejemplo: Sumar 2 números
• Varias etiquetas para
indicar lo que se va a
hacer
• 2 campos de texto
para introducir datos
• ...
Programa: Sumar 2 números
Otros ejemplos:
 Crear una App en la que podamos elegir que operación (suma,
resta, multiplicacioón o división) queremos ...
Ejemplo: Calculadora
• Pagina principal
• Añadir diferentes
Screens, una para
cada opreración
• Cada Screen se
programa la...
Programa: Cambio de screen
Acabar la aplicación para
que funcione la
calculadora
Gracias y a hasta la próxima
Upcoming SlideShare
Loading in …5
×

Control de proyectos app arduino I

2,242 views

Published on

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

Published in: Education
  • Be the first to comment

Control de proyectos app arduino I

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

×