• Like
Taller app inventor
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Taller app inventor

  • 3,717 views
Published

Taller App Inventor

Taller App Inventor

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,717
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
98
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mi primera aplicación en App Inventor. Para crear una aplicación con App Inventor debemos realizar tres tareas básicas: 1. Crear el aspecto visual de la aplicación utilizando el Diseñador de Componentes que nos permitirá seleccionar los botones, cajas de texto, imágenes y otros componentes que van a aparecer en la pantalla del teléfono cuando la aplicación se ejecute. 2. Modificar las propiedades de esos componentes y 3. Establecer el comportamiento de esos componentes utilizando para ello el Editor de Bloques. Crear la interfaz de usuario. Empezaremos con un ejemplo sencillo: una aplicación que, permita al usuario introducir un número entero y a continuación muestre el cuadrado de ese número. Para generar la aplicación debemos ingresar a la herramienta App Inventor utilizando nuestra cuenta de Google: http://beta.appinventor.mit.edu A continuación vamos a crear un proyecto. En la ventana hacemos clic en el botón New. Figura 1: Crear un proyecto. Figura 2: Escribir el nombre del proyecto.
  • 2. Se mostrará una ventana de diálogo que nos solicitará el nombre del proyecto al que denominaremos: DobleNumero (el nombre no lleva espacios). Después de introducir el nombre del proyecto hacemos clic en el botón OK. Con la acción anterior se crea nuestro proyecto y entonces podemos observar el Diseñador de Componentes: Figura 3: Diseñador de Componentes. En el lado izquierdo de la ventana tenemos la Paleta de Componentes que podemos utilizar en nuestras aplicaciones. Al lado derecho de la Paleta de Componentes tenemos el Visor, una superficie que simula una pantalla del teléfono que aparecerá cuando se ejecuten nuestras aplicaciones. Para dibujar la interfaz de nuestras aplicaciones simplemente arrastramos el componente de la Paleta de Componentes y lo colocamos en el Visor. Para empezar a crear nuestra aplicación, necesitaremos dos componentes: una caja de texto y un botón. Estos componentes los ubicamos en la sección Basic de la Paleta de Componentes y lo que tenemos que hacer es arrastrarlos y colocarlos en el Visor. Figura 4: La Paleta de Componentes y el Visor.
  • 3. Cada componente que se encuentra en el Visor aparecerá en la sección de Componentes a la derecha del Visor. Por defecto, a cada componente se le asigna un nombre que incluye su tipo y un número (por ejemplo TextBox1, Button1). Figura 5: El Visor y sus Componentes. Propiedades de los componentes. Podemos seleccionar un componente en la sección Components y cambiar sus propiedades en la sección Properties. Figura 6: Componentes y sus propiedades. Para la caja de texto vamos a dejar vacía la propiedad Text y escribimos en la propiedad Hint el texto: “Introduce un Número”.
  • 4. Figura 7: Propiedad Hint de la caja de texto. Realizamos el mismo procedimiento para el botón (Button1), lo seleccionamos de Componentes y en Propiedades modificamos la propiedad Text con el texto: “Calcular”. Figura 8: Propiedad Text de un Botón. Programar el comportamiento de la aplicación. Para programar el comportamiento de la aplicación hacemos clic en el botón que lleva por título: “Open the Blocks Editor”. Figura 9: Abrir el Editor de bloques. A continuación se nos solicita descargar en nuestra computadora un archivo de Java con extensión de jnlp. Hacemos clic en el botón Aceptar.
  • 5. Figura 10: Descargar archivo para iniciar el Editor de Bloques. Una vez descargado el archivo lo ejecutamos para iniciar el Editor de Bloques. Nos mostrará una advertencia de seguridad. Hacemos clic en el botón Ejecutar. Figura 11: Antes de iniciar el Editor de Bloques. El Editor de Bloques se compone de dos pestañas: Built-In y My Blocks. En Built-In tenemos los bloques de programación disponibles. Utilizaremos la sección My Blocks para agregar funcionalidad de nuestra aplicación (observa que los elementos de las pestañas se identifican por colores).
  • 6. Figura 12: El Editor de Bloques con sus pestañas Built-In y My Blocks. Vamos a seleccionar de la pestaña de My Blocks el componente Button1. Figura 13: Eventos disponibles para el Button1.
  • 7. A continuación vamos a seleccionar el evento Click y lo arrastramos en el área de bloques del programa. Figura 14: Evento Click del botón. Este bloque significa lo siguiente: “cuando el usuario hace un clic sobre el botón, hacer ...”. En nuestro caso, cuando el usuario haga un clic sobre el botón, la aplicación debe recuperar el contenido de la caja de texto, realizar calcular el doble del número y a continuación asignar el resultado de nuevo a la caja de texto. Primero vamos a realizar el cálculo aritmético, seleccionamos de la pestaña Built-In la opción Math y a continuación seleccionamos el bloque para multiplicar. Figura 15: Editor de Bloques, opción Math.
  • 8. Lo colocamos en el área de trabajo: Figura 16: Componentes para multiplicar. De la pestaña My Blocks seleccionamos la caja de texto con el componente TextBox1.Text de el bloque TextBox1: Figura 17: El componente TextBox1. Luego lo ensamblamos (colocamos) en el componente para multiplicar: Figura 18: Componentes. Para poder multiplicar el contenido de la caja de texto con el valor 2 seleccionamos el bloque number y modificamos el texto por omisión (123) por el valor de 2:
  • 9. Figura 19: Sección Math, componente para un número. Lo ensamblamos al componente de la multiplicación: Figura 20: La multiplicación de TextBox1 y number. Para mostrar el resultado del cálculo agregamos el bloque TextBox1.Text de TextBox1: Figura 21: TextBox1.Text de TextBox1. A TextoBox1.Text le asociamos el resultado del calculo aritmético:
  • 10. Figura 22: Ensamblado de componentes. Finalmente asociamos las operaciones definidas anteriormente con el evento Click del botón: Figura 23: Asociar las operaciones con el evento Click de Button1. Ejecutar la aplicación. Para ejecutar nuestra aplicación en App Inventor tenemos que crear un emulador del teléfono. Para ello tenemos que hacer un clic en el botón que dice New emulator. Figura 24: New Emulator.
  • 11. Antes de iniciar la ejecución del emulador App Inventor nos mostrará la siguiente ventana indicándonos que el proceso de carga puede durar de 2 a 3 minutos: Figura 25: Emulador. Una vez que el emulador está listo obtenemos una ventana simulando un teléfono. Lo que sigue es conectar nuestra aplicación con el emulador. Para ello seleccionamos el botón Connect to Device: emulator -5554. Figura 26: Conectar al emulador. En el lado derecho nos aparecerá un indicador en amarillo. Una vez que este en color verde tenemos nuestra aplicación en el emulador y podemos interactuar con ella.
  • 12. Figura 27: La aplicación DobleNumero. Si obtienes una ventana similar a la mostrada anteriormente: ¡Felicidades!, acabas de crear tu primera aplicación en App Inventor.
  • 13. Superficie de un triángulo. Construya un programa tal, que dadas la base y la altura de un triángulo, calcule e imprima su superficie.