HelloPurr

Creación de tu primera aplicación: HelloPurr

Ahora que has configurado tu ordenador y tu dispositivo, y has aprendido cómo funcionan el Diseñador y el Editor de Bloques, estás listo para completar tu aplicación HelloPurr. En este punto, deberías tener el Diseñador abierto en el navegador, el Editor de Bloques abierto en otra ventana (que se mostrará mediante un icono de una taza de café de java en tu barra de tareas) y el dispositivo elegido teléfono o emulador Android conectado al Editor de Bloques. (Consulta las  Instrucciones de configuración si no tienes todas estas cosas funcionando.)

HelloPurr: toca al gatito y óyelo maullar

HelloPurr es una app muy sencilla que puedes crear en poco tiempo. Has de crear un botón con una foto de un gato y programarlo para que cuando hagas clic en él se reproduzca el sonido de un maullido.

Para construir  HelloPurr, necesitarás la foto del gatito y el sonido del maullido. Descarga los siguientes archivos en tu ordenador. Para descargarla: después de pinchar en el link, haz clic con el botón derecho sobre la imagen y la barra de sonido y selecciona "Guardar como." Guarda ambos archivos en tu escritorio o una ubicación fácil de localizar.

También puedes ver un vídeo de cómo se construye esta app.

Selección de componentes para diseñar tu app

Los componentes Components) de App Inventor se encuentran en la parte izquierda de la ventana del Diseñador, donde pone "Palette" (Paleta). Los componentes son elementos básicos que se utilizan para crear apps en teléfonos Android. Son como los ingredientes de una receta. Algunos componentes son muy sencillos, como el componente "Label" (etiqueta), que simplemente muestra un texto en pantalla, o el componente "Button" (botón) que cuando pulsas inicia una acción.

También hay otros componentes más elaborados: el "Canvas" (lienzo) en el que puedes poner imágenes fijas o animaciones; el "AccelerometerSensor" (acelerómetro), sensor que funciona como un controlador de la Wii y detecta cuando mueves o agitas el teléfono; y otros componentes que crean o envían mensajes de texto, reproducen música y vídeo, obtienen información de sitios web, etc.

Para utilizar un componente en tu  app, haz clic sobre él y arrástralo al Viewer (visor) que se encuentra en el centro del Diseñador. Cuando agregas un componente al Viewer (#1 below), éste aparece también en la lista de componentes a la derecha del visor.

Los componentes (#2 abajo) tienen propiedades que pueden ajustarse para cambiar la apariencia del componente en la app. Para ver y cambiar las propiedades de un componente (#3 abajo), primero has de seleccionar el componente deseado en la lista de componentes.

Pasos para seleccionar componentes y establecer propiedades

Queremos que HelloPurr tenga un componente de botón que tenga el archivo kitty.png que descargarse anteriormente como propiedad de imagen. Para ello:

Paso 1. Arrastra desde la paleta  Basic el componente "Button" (botón) a Screen1 (pantalla 1) (nº1). En el panel Properties (propiedades), bajo "Image" (imagen), haz clic en el texto "none..."  (ninguno) y en "Add…"  (añadir) (nº2). Selecciona el archivo kitty.png que descargaste anteriormente (nº3).

Paso 2. Borra el texto "Text for Button1" que aparece bajo la propiedad Text (texto) utilizando la tecla de retroceso. Esto es lo que debería aparecer en el Diseñador:

Si la imagen del gato no está apareciendo entera, puedes arreglarlo estableciendo las propiedades Height (Alto) y Width (Ancho) del botón "Fill Parent" (Alinear con el componente donde está insertado). Para hacer esto, selecciona la propiedad "Fill parent" (Alinear con el componente donde está insertado) para ambas propiedades (Haz click en la palabra "Automatic.." (Automatico) para abrir la lista desplegable).

Paso 3. Arrastra desde la paleta "Basic" el componente "Label"(etiqueta) al Viewer (visor) (nº1), colocándolo bajo la imagen del gatito. Aparecerá en tu lista de componentes como Label1.

En el panel Properties (propiedades), bajo cambia la propiedad Text (texto) de Label 1 para que ponga "Pet the Kitty" (nº2). Verás cómo cambia el texto en el Diseñador y en tu dispositivo. Cambia la propiedad FontSize (tamaño de letra) de Label1 a 30 (nº3). Cambia la propiedad BackgroundColor (color de fondo) de Label1 haciendo clic en la caja (nº4). Puedes cambiarlo por el color que prefieras. Cambia la propiedad TextColor  (color de texto) de Label1 por el color que prefieras. En este caso, se ha elegido el azul como color de fondo y amarillo como color de texto.

Paso 4. En la paleta, haz clic en el cajón Media (multimedia) y arrastra el componente "Sound" (sonido) soltándolo en el visor (nº1). Lo sueltes donde lo sueltes, aparecerá en la parte inferior del visor marcada como "Non-visible components" (componentes no visibles). En el panel Media (multimedia), haz clic en Add... (añadir) (nº2) Carga el archivo meow.mp3 a este proyecto (nº3). En el panel Properties (propiedades), haz clic en el texto "none..."  (ninguno), para cambiar la propiedad Source (fuente) del componente Sound1 al archivo meow.mp3 (nº4).

Programar con el Editor de Bloques

Hasta ahora has estado organizando la pantalla de tu aplicación en el Designer (Diseñador), el cual está en la ventana del navegador Web. Para empezar a programar el comportamiento de la aplicación debes ir al Blocks Editor (Editor de Bloques). Si no tienes un Blocks Editor (Editor de Bloques) funcionando, haz click en el botón Open the Blocks Editor (Abrir Editor de Bloques) en la ventana superior derecha. Si necesitas ayuda iniciando el Blocks Editor (Editor de Bloques), vuelve a las instrucciones de configuración para más información.

Nota: Una forma fácil de cambiar entre el Editor de Bloques y el Diseñador es usar la barra de tareas que muestra las aplicaciones ejecutándose en tu ordenador. El Editor de Bloques se está ejecutando localmente como un programa Java y está representado como un icono de Taza de Café. El Designer (Diseñador) está ejecutándose en tu navegador Web así que puedes acceder a él haciendo click en tu icono del navegador.

Una vez que tienes el Editor de Bloques en frente de ti, continua con los siguientes pasos para empezar a programar tu aplicación con bloques.

Hacer que el sonido se reproduzca

Paso 1. En la paleta My Blocks, haz clic en el cajón Button1  (botón 1) y arrastra el bloque Button1.Click (clic botón 1) para colocarlo en el área de trabajo.

Esos bloques verdes son bloques de  event handler  (gestión de eventos). Los bloques de gestión de eventos especifican cómo ha de responder el teléfono ante ciertos eventos: cuando se presiona un botón, se agita el teléfono, el usuario arrastra el dedo por un lienzo, etc. Son de color verde y utilizan la palabra "when" (cuando). P. ej., when when Button1.Click (cuando clic en botón1).

Paso 2. A continuación, haz clic en el cajón  Sound1  (sonido 1) y arrastra el bloque Sound1.Play (reproducir sonido 1) en la sección "do" (hacer) del bloque when Button1.Click (cuando clic en botón1). Los bloques se conectan como piezas de puzzle y escucharás un sonido cuando encajen.

Los bloques morados y azules se llaman  "command blocks" (bloques de comando), que se sitúan en el cuerpo de los "event handlers" (gestores de eventos). Cuando se ejecuta un gestor de eventos, éste ejecuta una secuencia de comandos en su cuerpo. Un comando es un bloque que especifica una acción que se ha de ejecutar en un teléfono (p. ej. reproducir un sonido) cuando se ejecuta un evento (p. ej. pulsar el botón 1).

En este punto, tus bloques serían así:

Ahora puedes ver que el bloque de comando está en el gestor de eventos. Este conjunto de bloques significa que cuando se pulsa el botón 1 se ejecuta el comando reproducir sonido. El gestor de eventos es como una categoría de acción (p. ej. se pulsa un botón) y el comando especifica el tipo/detalles de la acción (p. ej. se reproduce un sonido)..

Puedes leer más sobre como funcionan los bloques aquí.

¡Enhorabuena, ya tienes tu primera app funcionando! Cuando tocas el botón  deberías oír el maullido del gatito.

Nota: existe un problema conocido con el componente de sonido en algunos dispositivos. Si te sale "OS Error" y el sonido no se reproduce - o se produce con mucho retraso, vuelve al Diseñador e intenta usar el componente "Player" (reproductor), dentro de "Media" en lugar del componente "Sound".

Empaquetar tu app

Si estás utilizando un teléfono, la app se está ejecutando el teléfono, pero sólo mientras éste está conectado a App Inventor. Si desconectas el cable USB, la app desaparecerá. Puedes volver a conectarlo para que aparezca de nuevo. Para hacer que la app se ejecute sin que el teléfono esté conectado a App Inventor, tienes que empaquetar la app (archivo apk).

Para "empaquetar" ("package") app, conecta el teléfono a tu ordenador y asegúrate de que el icono del teléfono está en verde

Si pulsas sobre Package for Phone (empaquetado para teléfono) en la parte superior derecha de la página del Diseñador aparecerán tres opciones de empaquetado:

1. Download to Connected Phone (Descargar al teléfono conectado): Si el teléfono está conectado, puedes descargar la app e instalarla automáticamente en el teléfono. Ten en cuenta que esto funciona incluso aunque estés utilizando el emulador como tu dispositivo!

2. Download to this Computer (Descargar a este ordenador): Puedes descargar la app en tu ordenador como un archivo apk, que puedes distribuir y compartir las veces que quieras, e instalarla manualmente en teléfonos usando el programa Android ADB.

3. Show Barcode (Mostrar código de barras): Puedes generar un código de barras que podrás utilizar para instalar la app en tu teléfono con la ayuda de un lector de códigos de barras, como ZXing disponible gratis en Google Play (anteriormente Android Market).

Nota: Este código de barras solo servirá para tu teléfono. Si quieres compartir la app con otras personas, tienes que descargar el archivo apk en tu ordenador y compartirlo.

¡Reto! Haz que el gato ronronee

El reto consiste en conseguir que el gato maúlle cuando se agita el teléfono. Ve al Editor de Bloques y abre el cajón  Sound1 (sonido 1), arrastra el bloque  Sound1.Vibrate (sonido 1, vibrar) y suéltalo bajo el bloque Sound1.Play block. (sonido 1, reproducir). Verás un icono de advertencia amarillo en la esquina izquierda del bloque, que significa que al bloque le falta un componente.

El bloque Sound1.Vibrate (sonido 1, vibrar) tiene un hendidura, lo que significa que tienes que conectarle algo que especifique los detalles de la acción. En este caso tenemos que especificar la duración de la vibración. Los números se calculan en milisegundos: para que el teléfono vibre medio segundo tenemos que introducir un valor de  500 milliseconds.

Ve a la paleta "Built-In" y en el cajón Math (matemáticas), arrastra el bloque número y suéltalo en la hendidura del bloque Sound1.Vibrate (sonido 1, vibrar).

Una vez colocado el bloque número, haz clic en el número "123". Se subrayará el número en negro, entonces escribe "500" en tu teclado.

¡Hecho! Date cuenta de que el icono de advertencia amarillo ha desaparecido: al bloque ya no le falta un componente.

Ahora conecta tu teléfono y toca la imagen del gato en la pantalla. El teléfono debería vibrar y maullar al mismo tiempo.

Resumen

A continuación te resumimos las ideas principales vistas
hasta ahora:

  • Crearás tu app seleccionando los componentes (ingredientes) y diciéndoles cómo actuar y cuándo actuar
  • Utilizarás el Diseñador para seleccionar los componentes. Algunos componentes son visibles y otros no.
  • Puedes añadir archivos multimedia (sonidos e imágenes) a las apps cargándolos desde tu ordenador.
  • Utilizarás el Editor de Bloques para unir los bloques que definirán el comportamiento de los componentes.
  • Los bloques "when ... do ..." (cuando... haz...) definen controladores de eventos que le dicen a los componentes qué hacer cuando algo ocurre
  • call ... blocks tell components to do things.

Siguientes pasos

Ahora que has configurado tu ordenador y has aprendido el funcionamiento básico de App Inventor, te recomendamos:

¿Algo no funciona bien? Visita la  página de resolución de problemas, o consulta el Foro de Usuarios de App Inventor para obtener ayuda.

Attached File(s): 

HelloPurr.zip