Tutoriales‎ > ‎

Tu primera aplicación

Vamos a crear la primera aplicación con nuestro teléfono Android: HolaRonronea

Esta página te ayudará a empezar la construcción de tu primera aplicación: Una imagen de un gatito que maúlla cuando la tocamos. Puedes ver un vídeo con el desarrollo de esta aplicación. Cuando termines el desarrollo de Hola Ronronea  estarás listo para diseñar y construir aplicaciones por tu cuenta. Antes de empezar, asegúrate  de haber configurado correctamente el equipo.

A medida que desarrollemos Hola Ronronea, aprenderás cómo utilizar las tres herramientas fundamentales de trabajo de  App Inventor:
  • El Diseñador (designer), el lugar donde se diseña la aplicación. Se ejecuta en el navegador web.
  • El Editor de bloques (blocks editor), aplicación Java donde configuramos  el comportamiento de nuestro desarrollo. Es una aplicación independiente, que corre en una ventana diferente a la instancia del navegador.
  • El teléfono, conectado al ordenador mediante un cable USB. Puede ser sustituido por el Emulador.

En este primer tutorial me referiré a los diferentes elementos de App Inventor en español e inglés, tal como se ve en la lista de viñetas anterior. Sin embargo, debemos tener en cuenta que, por el momento, App Inventor no ha sido traducido, y por tanto no encontraremos las herramientas, secciones, componentes, botones, etc. en inglés durante el uso del paquete de software de App Inventor. Por este motivo, en próximos tutoriales, ya me referiré a esos mismos elementos sólo en inglés, que es como los encontraremos en la aplicación MIT App Inventor Beta.

Para construir Hola Ronronea tendrás una imagen de una gatita y el sonido de un maullido. Descargar estos archivos al ordenador:

Iniciar el diseño y crear un nuevo proyecto

En el navegador Web, apunta a la página web de App Inventor en  http://beta.appinventor.mit.edu/  Si esta es la primera vez que has usado App Inventor, verás la página de Proyectos vacía, sin proyectos en ella todavía. Debería tener este aspecto:

Crear un nuevo proyecto

  1. Haga clic en New en el lado izquierdo, cerca de la parte superior de la página.
  2. Introduzca el nombre del proyecto HolaRonronea (una sola palabra, sin espacios) en el cuadro de diálogo que aparece, haga clic en Aceptar.

El navegador abrirá el Diseñador, el lugar donde se seleccionan los componentes para su aplicación, y debe tener este aspecto:


Seleccione los componentes para el diseño de su aplicación

Los componentes de App Inventor se encuentran en el lado izquierdo de la pantalla de diseño, bajo el título Palette Los componentes son los elementos básicos que se utilizan para hacer las aplicaciones en el teléfono Android. Son como los ingredientes de una receta. Algunos componentes son muy simples, como el componente Label, que sólo muestra un texto en la pantalla, o el componente Button que mostrará un botón en la pantalla del teléfono que al ser pulsado iniciará una acción. Otros componentes son más elaborados: el componente Canvas es un lienzo de dibujo que puede almacenar imágenes fijas o animaciones, el AccelerometerSensor es un sensor de movimiento que funciona como un mando de Wii y detecta cuando movemos o agitamos el teléfono, los componentes que crean o envían mensajes de texto, los componentes que reproducen música y video, componentes capaces de obtener información de sitios Web, y así sucesivamente.

Para utilizar un componente en su aplicación, tendrá que hacer clic y se arrastra sobre el visor (Viewer), en el centro de la pantalla de diseño. Cuando añadas un componente en el visor, también aparece en la lista de componentes (Components), a la derecha del visor..

Los componentes tienen propiedades, que se presentan en la parte derecha de la pantalla (Properties) y que se pueden ajustar para cambiar la forma en que el componente interactuará con la aplicación. Para ver y cambiar las propiedades de un componente, primero debe seleccionar el componente deseado en la lista de componentes.

Pasos a seguir para seleccionar los componentes y propiedades de configuración

Queremos que HolaRonronea tenga un botón con la propiedad de imagen ajustada al archivo que has descargado antes, con la imagen del gatito, kitty.png. Estableceremos esto del modo siguiente:

  1. Arrastra y suelta un Button hasta Screen1, en el área del visor (viewer)El componente Button se encuentra en la sección Basic de la paleta (palette).
  2. En la lista de propiedades de Button1, el botón que acabamos de disponer, en imagen, haz clic sobre ninguno (none) ...
  3. Haga clic en agregar (Add) ... .
  4. Selecciona el archivo kitty.png, que has descargado antes.
  5. Eliminar Text for Button1, que aparece bajo la propiedad text mediante la tecla de retroceso.
Tu diseño debería tener este aspecto:

Abre el Editor de bloques (Blocks Editor), y conecta el teléfono

El diseñador (Designer) es una de las tres herramientas clave que utilizarás en la creación de aplicaciones. El segundo es el Editor de bloquesEl tercero es el teléfono. Vamos a usar el Editor de bloques para asignar los comportamientos de los componentes, como qué debe suceder cuando el usuario de la aplicación presiona un botón.

El editor de bloques se ejecuta en una ventana separada. Al hacer clic en Abrir el editor de bloques (Open the Blocks Editor) de la ventana de diseño, el archivo de programa del editor de bloques se debe descargar y ejecutar. Este proceso puede tardar 30 segundos o más. Si no se abre el Editor de bloques, podría ser porque el navegador no está configurado para ejecutar aplicaciones Java descargadas de forma automática. Una vez descargado, veremos el archivo del editor de bloques, llamado AppInventorForAndroidCodeblocks.jnlp y debemos abrirlo. Una vez hecho esto, se activa Java, que nos solicitará si queremos ejecutar la aplicación, a lo que responderemos que sí. Entonces, la ventana del editor de bloques debe verse como se muestra abajo, con "cajones" para los bloques de programa a la izquierda, y un gran espacio vacío para la colocación de los bloques que uniremos para montar el programa, que se va a hacer a continuación.

Antes de continuar con la construcción de la aplicación, tendrás que conectar el teléfono. Asegúrete de que se ha configurado el teléfono de modo correcto Ahora conecta tu teléfono al ordenador mediante un cable USB, y haz clic en Conectar dispositivo (Connect to device) en la parte superior de la ventana del editor de bloques. Verás una lista desplegable con el teléfono en dicha lista, identificado por su tipo de modelo (por ejemplo, HT99TP800054). Haz clic sobre él. Vas a ver una flecha amarilla animada sobre un teléfono, indicando que App Inventor se está conectando al teléfono. El establecimiento de esta conexión puede tardar un minuto o dos. Una vez la conexión se completa, la flecha deja de moverse y se pone verde, y si nos fijamos en la pantalla del teléfono, verás el gatito. ¡La aplicación empieza a ejecutarse!

Si, por el contrario, no dispones de teléfono y quieres desarrollar la aplicación con el emulador, sustituye lo indicado en el párrafo anterior por lo que indicamos en la página sobre el emulador.

Próximos pasos

En este punto, debes tener el diseñador abierto en el navegador, el editor de bloques abierto en otra ventana, y el dispositivo elegido (teléfono o emulador) conectado con el Editor de bloques.

A continuación haremos lo siguiente para completar la aplicación:

En el Diseñador:
  • Agregar un componente de etiqueta (label que ponga "Acaricia al gatito".
  • Subir el archivo meow.mp3
  • Agregar un componente de sonido (soundque reproduzca el archivo meow.mp3.
En el Editor de bloques:
  • Crear un controlador de eventos que dispare el componente de sonido cuando el usuario pulsa el botón.

Adición de la etiqueta

En la paleta y el visor:

  1. Arrastra y suelta el componente Label hasta el visor (Viewer) , situándolo por debajo del gatito. Aparecerá en la lista de componentes como Label1

Bajo propiedades (properties)

  1. Cambia la propiedad Text de Label1 de forma que ponga "Acaricia al gatito". Cuando el cursos cambie a otra área verás aparecer este texto en el botón en tu ordenador y en el dispositivo Android.
  2. Cambiar el Color de fondo (BackgroundColor) de Label1. Puedes cambiar a azul.
  3. Cambiar el color del texto (TextColor) de Label1, por ejemplo pasándolo a amarillo.
  4. Cambiar el tamaño de su fuente (FontSize) de Label1 poniéndola a 30.
El diseñador debe parecerse a esto:

Agregando el maullido

En la paleta (Palette): 

  1. Haz clic en la sección Media
  2. para ampliarla y ver sus componentes.
  3. Arrastra un componente Sound y colócalo en el visor (Viewer) Independientemente de donde lo dejes caer, aparecerá en la parte inferior del visor, como componente no visible (non-visible-components) y como Sound1.

En el área de medios (Media)

  1. Haz clic en Agregar (Add) ...
  2. Sube el archivo meow.mp3 a este proyecto.

Bajo Propiedades (Properties)

  1. Establece la propiedad fuente (source) del componente Sound1 haciendo clic sobre la misma. Cuando aparezca el cuadro de selección,  pulsa sobre meow.mp3 y sobre OK. Esto asocia el maullido contenido en este archivo a Sound1.
El diseñador debe parecerse a esto:

Hacer el juego de sonido

Con el Editor de bloques vamos a definir la forma en que la aplicación se va a comportar. Le diremos a los componentes lo que deben hacer y cuándo hacerlo. Vas a decirle al botón, que en realidad es la fotografía del gatito, que reproduzca el sonido del maullido cuando el usuario lo toque. Si los componentes son los ingredientes de una receta, puedes pensar en bloques como las instrucciones de elaboración del plato.

El editor de bloques tiene dos pestañas en la esquina superior izquierda: Integrados (Built-in) mis bloques (My blocks) Los botones situados debajo de cada pestaña muestran los bloques cuando se hace clic. Los Integrados son un conjunto de bloques genérico, que encontraremos disponibles independientemente de la aplicación que vayamos a crear. Son siempre los mismos. Los bloques debajo de la pestaña de mis bloques contienen bloques específicos, vinculados con el conjunto de componentes que hemos elegido para la aplicación. Varían según los componentes seleccionados previamente y cambian si cambiamos componentes sobre la marcha.

Para hacer que se reproduzca el sonido al tocar (pulsar) el botón con la foto del gatito, tendrás que pulsar la pestaña My Blocks, desplegar los bloques de la sección Button1 y arrastrar y soltar al lienzo central el bloque When Button1.Click do, que se refiere a la circunstancia que el usuario pulse el botón y, tras desplegar los bloques de la sección Sound1, arrastrar el bloque callSound1.Play al lienzo central, aproximándolo al bloque When Button1.Click do, de modo que ambos encajen como en un rompecabezas, lo que la aplicación nos indica con un sonoro clic, perfectamente audible

Una vez hecho esto, pulsando sobre la foto (esto es tocando la pantalla en la foto y retirando el dedo rápidamente, lo que android considera un Click), oiremos como el teléfono emite el maullido.

El Editor de bloques debe asemejarse a esto:

Embalaje de su aplicación

¡Felicitaciones, tienes tu primera aplicación en ejecución! Si está usando un teléfono, entonces la aplicación se ejecuta en el teléfono, pero sólo funciona cuando el teléfono está conectado a App Inventor. Si se desenchufa el cable USB, la aplicación va a desaparecer. Puedes volver a conectar el teléfono para hacer que regrese. Para obtener una aplicación que se ejecuta sin estar conectado a App Inventor, debes "empaquetar" la aplicación para producir un paquete de la aplicación (archivo APK). Al pulsar paquete para el teléfono (Package for phone) en la parte superior derecha de la página del diseñador se presentarán tres opciones:

  1. Si el teléfono está conectado, puedes descargar e instalar directamente la aplicación en el teléfono.
  2. Puede descargar la aplicación al ordenador, como un archivo APK, que se puede distribuir y compartir, e instalar manualmente en los teléfonos que utilizan el programa Android.
  3. Se puede generar un código de barras, que se puede utilizar para instalar la aplicación en tu teléfono con la ayuda de un escáner de código de barras, como el escáner de código de barras ZXing (disponible gratuitamente en el Android Market). Este código de barras funciona sólo para tu propio teléfono.Si deseas compartir la aplicación con los demás, tendrás que descargar el archivo APK al ordenador y compartir el archivo.

Resumen

Las ideas clave son las siguientes:

  • Puedes construir aplicaciones mediante la selección de los componentes (ingredientes) y luego decirles qué hacer y cuándo.

  • Puedes utilizar el Diseñador para seleccionar los componentes. Algunos componentes serán visibles y otros no.

  • Puedes agregar elementos multimedia (imágenes, vídeos y sonidos) para las aplicaciones, cargándolos desde tu ordenador.

  • Puede utilizar el Editor de bloques para ensamblar los bloques que definen el comportamiento adecuado de los componentes, según las acciones efectuadas por el usuario o la interacción con otros componentes.

Próximos pasos

Ahora que tienes el equipo configurado y conoces los fundamentos de funcionamiento de App Inventor, te sugerimos:



¿Algo falla? Visita la página de solución de problemas, o busca ayuda en el Foro de usuarios.

Subpáginas (1): Usando el emulador
Comments