Tema 1 Hola Gatito Introducción
En este capítulo conocerás los elementos clave de App Inventor; la ventana de diseño y la ventana de edición de bloques, y bloques, y verás los pasos básicos necesarios para conseguir crear tu primera app.
La app Hola Gatito
En nuestra primera app aparecerá la imagen de un gatito en pantalla que maullará cuando la toques y vibrará cuando agites tu dispositivo. Qué vamos a aprender •
•
•
•
•
Crearemos app’s seleccionando componentes desde la ventana de diseño y luego los programaremos para que hagan aquello que queramos en la ventana de edición de bloques. Veremos que algunos componentes son visibles en la pantalla de la app pero otros, en cambio, no lo son. Añadiremos contenido multimedia a la app (la imagen del gatito y un sonido). Probaremos la app a la vez que la construimos (live testing). Esto te permitirá ver cómo funciona la app en tu dispositivo a medida que vamos trabajando en ella. Para terminar, empaquetaremos la app y la instalaremos en nuestro dispositivo.
o t i t a G
Juan Francisco Fuster
a l o H
1
Entorno de trabajo de App Inventor
Para empezar a programar con App Inventor, abre un navegador y conéctate a http://ai2.appinventor.mit.edu, introduce los datos de acceso a tu cuenta de usuario de Gmail si el navegador te los pregunta y pulsa el botón Continue. El entorno de trabajo está formado por tres partes: •
•
•
La ventana de diseño. La usaremos para insertar componentes en la app y definir sus propiedades. La ventana de edición de bloques. Nos permitirá especificar qué queremos que hagan los componentes de nuestra app y cuándo. Un dispositivo Android o un emulador Android, gracias al cuál podremos probar nuestra app a medida que la vamos creando.
Ventana de diseño
o t i t a G
Juan Francisco Fuster
a l o H
2
Venta de edición de bloques
La primera vez que te conectes a http://ai2.appinventor.mit.edu verás tu Página de Proyectos, es decir, una relación de las apps que has creado con App Inventor. Obviamente, la primera vez estará vacía. Para empezar a crear tu primera app, haz clic en Project y después en New Project . Ahora, introduce el nombre de tu proyecto, por ejemplo: HolaGatito, y pulsa Ok . ¡Atención! El nombre de los proyectos no puede contener espacios en blanco. Si quieres, en su lugar utiliza el símbolo de guión. La primera ventana que se abrirá es la ventana de diseño. El editor de bloques está disponible si haces clic sobre el botón Blocks que aparece en la esquina superior derecha de la ventana. App Inventor es una herramienta de could computing (o computación en la nube), es decir, tu app se almacenará en el servidor de App Inventor y cualquier modificación o ampliación sobre ella tendrás que realizarla a través de la página http://ai2.appinventor.mit.edu. Además, necesitarás una conexión a Internet cada vez que quieras ponerte a trabajar en tu app.
o t i t a G
Juan Francisco Fuster
a l o H
3
Diseño de componentes
Empezaremos a trabajar en la ventana de diseño. Podemos usar los componentes predefinidos para incluirlos en nuestra app y dotarla de contenido. Algunos componentes son muy sencillos, como el componente Label , que muestra un texto en pantalla. Otros son mucho más complicados, como el componente Canvas que puede contener imágenes y animaciones. Nada más empezar con un proyecto nuevo, la ventana de diseño será como la siguiente:
Ventana de diseño
En la ventana se distinguen las siguientes partes: •
•
•
En la parte central encontramos un espacio llamado Viewer (visor). Este es el lugar donde insertaremos los componentes que necesitamos para nuestra app, y muestra una primera vista de cómo quedará la app al final en un dispositivo, pero esta vista no es más que una aproximación. Para ver realmente como quedará la app tendrás que utilizar tu dispositivo o bien un emulador tal y como describimos en el tema anterior: Requisitos Previos. En el lado izquierdo de la ventana está la Palette (paleta), que es una lista de los componentes que podemos usar. La Palette está dividida en secciones; en este momento, sólo estarán visibles los componentes de la categoría User Interface, pero puedes ver los demás haciendo clic en el nombre de cada una de las categorías. A la derecha de Viewer está Components (componentes), donde se muestra la lista de componentes que estamos usando en nuestra app. Inicialmente, el único componente disponible es: Screen1 que simboliza la pantalla del dispositivo Android.
Juan Francisco Fuster
o t i t a G a l o H
4
•
Debajo de la lista de componentes tenemos un espacio más llamado Media que mostrará los archivos de imagen y sonido que vamos a utilizar en nuestra app y que previamente tendremos que haber subido al servidor de App Inventor con Upload new .
A la derecha del todo se encuentra la sección de Properties (propiedades), que muestra las propiedades de los componentes. Así, después de seleccionar un componente en la sección Components podremos ver y modificar sus propiedades en el panel de Properties. Ahora mismo, podrás ver las propiedades del único componente de nuestra app, el componente Screen1. Algunas de sus propiedades son el color de fondo (backgroundcolor ), la imagen de fondo (backgroundimage) y el título de la pantalla (title). Para nuestra primera app, necesitaremos dos componentes: el componente Label permitirá mostrar un texto en pantalla (“Acaricia al gatito”) y un componente Button con una imagen de un gatito en él. También necesitaremos un componente Sound , que a diferencia de los anteriores no será visible en la pantalla pero que nos permitirá reproducir el maullido del gatito cuando pulsemos el botón. Por último, incluiremos también un componente Accelerometer para detectar cuándo el usuario agita el dispositivo. Vamos a verlo paso a paso.
Crear una etiqueta
El primer componente que vamos añadir es una Label (etiqueta) para mostrar un texto. 1. En la paleta, haz clic en la categoría User Interface (interfaz de usuario) para ver los componentes disponibles. Haz clic en Label (etiqueta) y arrástralo hasta el área de vista. Allí veras un rectángulo con el texto: “Text for label1”. 2. En la ventana de propiedades, busca una propiedad llamada Text y cambia el texto que aparece allí por “Acaricia al gatito” y pulsa intro. Verás como el texto se modifica también en la sección de vista. 3. Cambia el color de fondo de la etiqueta haciendo clic en el cuadro BackgroundColor que actualmente será None Selecciona el color blue. Cambia también el color del texto de la etiqueta usando la propiedad TextColor; por ejemplo usa el color Yellow . Para terminar, cambia el tamaño de la fuente a 20 puntos desde la propiedad FontSize. .
o t i t a G
Juan Francisco Fuster
a l o H
5
Ya tenemos nuestra primera etiqueta
Añadir un botón
El siguiente paso es añadir un botón (Button) a nuestra app y haremos que este componente muestre la imagen del gatito. Para empezar, selecciona el componente Button desde la paleta y arrástralo hasta la vista, colocándolo justo debajo de la etiqueta anterior. Verás que aparece un botón con un aspecto clásico. Ahora que tenemos el botón haremos que aparezca en él la imagen del gatito: 1. Primero, debes descargar y guardar en tu ordenador la imagen que vamos a usar. Dicha imagen está disponible en la sección de Descargas de este tema. Si quieres, aprovecha ahora y descarga también el sonido que reproduciremos cuando alguien toque al gatito. 2. Asegúrate que tienes seleccionado el botón en la lista de componentes; así, en la ventana de propiedades podrás ver las que son sus propiedades. 3. En la ventana de propiedades, haz clic en Image (que actualmente tiene el valor None) y pulsa el botón Upload file (cargar fichero). Selecciona la imagen del gatito que has descargado previamente a tu ordenador y haz clic en OK. 4. Después de cargar la imagen, kitty.png aparecerá en la lista como una opción para la imagen del botón. Selecciónala y pulsa OK . La imagen del gatito se mostrará inmediatamente en pantalla. Observa que la imagen también estará disponible en la sección Media. 5. Como comprobarás, sobre la imagen del gatito todavía aparece el texto que habíamos introducido antes. Busca la propiedad Text del botón y borra el texto que hay allí.
Juan Francisco Fuster
o t i t a G a l o H
6
Ahora tenemos una etiqueta y un botón con la imagen del gatito
Añadir el maullido del gatito
Cuando el usuario toque el botón, queremos que el se escuche el maullido del gatito. Para ello, necesitamos el sonido (disponible en la sección de Descargas del tema) y un componente que se encargue de su reproducción. 1. Si todavía no lo has hecho, descarga el sonido del gatito y después súbelo a tu app usando el botón Upload file disponible en la sección Media. 2. En la ventana de diseño ( Designer ) haz clic en la categoría Media de la paleta (Palette). Haz clic y arrastra el componente Sound hasta tu app. Independiente de donde sueltes el clic, el componente de sonido se situará en la parte inferior de la sección vista; en un apartado llamado Non-visible componentes (componentes no visibles). 3. Haz clic sobre Sound1 en la sección de componentes no visibles para poder visualizar sus propiedades. Usa la propiedad Source (origen) para seleccionar el archivo .mp3 que has subido en el paso 1.
o t i t a G
Juan Francisco Fuster
a l o H
7
Prueba en vivo (live testing)
Gracias a la prueba en vivo puedes comprobar cómo funciona tu app en tu dispositivo Android mientras trabajas en ella. En el tema 0 ya repasamos todos los elementos de configuración necesarios para poder usar este tipo de prueba. Si tienes tu dispositivo Android conectado y configurado y se encuentra en la misma Wi-Fi que el ordenador, en la ventana de App Inventor, selecciona Connect y después haz clic sobre AI Companion.
En tu dispositivo, lanza la aplicación MIT AI2 Companion y selecciona Scan QR Code. Después, escanea el código QR que aparece en la pantalla de tu ordenador.
Si todo funciona como es debido, podrás ver la app en tu dispositivo y, a medida que hagas cambios en la app los verás también en el dispositivo. Si puedes ver la app en tu dispositivo, toca la imagen del gatito. Evidentemente, todavía no se reproducirá el sonido; aún nos queda un poquito de trabajo… Debemos indicar a la app cuándo debe reproducir el sonido del maullido pero eso tendremos que hacerlo desde la ventana de edición de bloques ( Blocks). o t i t a G
Juan Francisco Fuster
a l o H
8
Añadir comportamiento a los componentes
Ha llegado el momento de conocer el lenguaje de programación que incluye App Inventor; lo usaremos para decirle a nuestra app cuándo debe reproducir el sonido del gatito. Para empezar, haz clic en el botón Blocks para cambiar a la ventana de edición de bloques. En el panel izquierdo podrás ver una lista de los bloques disponibles en el lenguaje de programación de App Inventor, aparecen todos bajo la categoría Built-in. Justo debajo, verás tambiénScreen1 y dentro de ella, la lista de los componentes que previamente habíamos incluido en nuestra app desde la vista de diseño.
Por hacer una analogía, podemos decir que si los componentes son los ingredientes de una receta de cocina entonces los bloques son las instrucciones de la receta que nos permitirá cocinarlos. También puedes comprobar que si haces clic en uno de los componentes (en la imagen anterior se ha hecho sobre Button1) entonces se verá la lista de eventos, métodos y propiedades asociados a dicho componente. Para programar qué queremos que suceda cuando se toca el botón, haz clic sobre Button1 y después selecciona el evento when Button1.Click y arrástralo al espacio en blanco. Todos los componentes que incluyen la palabra when (cuando) se llaman programadores de eventos, es decir, especifican cómo se comportará el componente en cuestión cuando sucede algo (en nuestro caso: cuando se haga clic sobre el botón).
o t i t a G
Juan Francisco Fuster
a l o H
9
Definimos una respuesta a una acción del usuario (tocar el botón del gatito)
Haz clic en Sound1 en el panel izquierdo para seleccionar el componente de sonido. Después, selecciona el bloque Sound1.Play y arrástralo hasta la ventana de bloques, justo dentro del bloque when Buttton1.Click . Ahora podrás comprobar que el nuevo bloque ha encajado dentro del primero tal y como se muestra en la imagen siguiente. Recuerda también que, previamente ya habíamos asignado el sonido del maullido a este componente.
Ahora cuando toquemos el botón se escuchara el sonido del gatito
Prueba tu app
Comprueba que todo esté funcionando como es debido. Es importante probar tu aplicación cada vez que añades algo nuevo. Toca la imagen del gatito en tu dispositivo (o haz clic si estás usando el emulador). Deberás escuchar el maullido.
Añadir un ronroneo
Vamos a hacer que el gatito maúlle y también que ronronee cuando tocamos el botón. Simularemos en ronroneo haciendo vibrar el dispositivo. Aunque parezca muy difícil de hacer en realidad es muy sencillo; el componente Sound incluye la posibilidad de hacer vibrar el dispositivo. De hecho, en la vista de diseño no Juan Francisco Fuster
o t i t a G a l o H
10
tendremos que hacer nada, tan sólo tendremos que añadir un bloque más en la vista de bloques: 1. Desde la ventana de bloques, haz clic en el componente Sound1. 2. Selecciona el bloque call Sound1.Vibrate y arrástralo hasta situarlo justo debajo del bloque call Sound1.Play . El bloque se colocará en su sitio tal y como se aprecia en la imagen siguiente:
Reproducir el sonido y vibrar simultáneamente
3. Comprueba que el bloque Vibrate incluye la opción milisegundos. Se trata de un parámetro que necesariamente tendremos que especificar, y que en este caso, se refiere a la cantidad de tiempo que queremos que vibre el dispositivo (tiempo especificado en milésimas de segundo). Si, por ejemplo, queremos que el dispositivo vibre durante medio segundo, tendremos que asignarle un valor de 500. 4. Ahora haz clic en Math y verás que el primer elemento de la lista es un bloque con un cero. Haz clic en dicho bloque y arrástralo hasta hacerlo encajar con la ranura de los milisegundos del bloque anterior. 5. Por último, haz clic sobre el cero y escribe 500 para conseguir nuestro objetivo.
o t i t a G
Juan Francisco Fuster
a l o H
11
Asignar un valor numérico(cero por defecto)
Cambiar el valor a 500
Encajar el valor 500 en la ranura
Prueba tu app
¡Pruébalo! Toca la imagen del gatito en tu dispositivo y comprueba que además del sonido también se produce la vibración.
Juan Francisco Fuster
o t i t a G a l o H
12
Agitar el dispositivo
Vamos a añadir un último elemento para que al agitar nuestro dispositivo también se reproduzca el sonido del gatito. Para conseguirlo necesitaremos un componente más llamado AccelerometerSensor o acelerómetro. 1. Vuelve a la vista de diseño. Despliega la categoría de sensores de la paleta y haz clic sobre el componente AccelerometerSensor . Arrástralo hasta cualquier lugar de la Screen1 y no te preocupes si no aparece allí. Fíjate que se habrá situado en la parte inferior de la ventana, en el espacio disponible para los componentes no visibles. 2. Tendremos que distinguir una nueva situación; que se agite el dispositivo y por tanto, necesitaremos un nuevo controlador de eventos. Así pues, cambia a la ventana de edición de bloques. Haz clic sobre el componente Accelerometersensor1 situado en el panel izquierdo. 3. Ahora, selecciona el evento AccelerometerSensor1.Shaking y arrástralo a la ventana de trabajo. 4. Por último, tal y como ya hicimos para reproducir el sonido anteriormente, vuelve a hacer lo mismo para que el sonido se reproduzca dentro de este nuevo bloque. Observa la imagen siguiente:
Los bloques de nuestra app
Descarga la app a tu dispositivo
La prueba en vivo te permite comprobar fácilmente la app mientras trabajas en ella. El único problema es que una vez terminado el trabajo, cuando desconectes tu dispositivo, la app dejará de funcionar. Para conseguir la app de forma definitiva en el dispositivo necesitaremos instalarla. Lo primero que debemos hacer es asignar una imagen para el icono que representará nuestra app en el dispositivo. Desde la vista de diseño, selecciona el componente Screen1 y asígnale una imagen a la propiedad Icon. Si quieres, puedes utilizar la misma imagen del gatito o subir otra cualquiera.
Juan Francisco Fuster
o t i t a G a l o H
13
Ahora, asegúrate que tu dispositivo puede ejecutar app’s que no provengan de la tienda oficial de Google, la Play Store. Para la mayoría de dispositivos tendrás que ir a Ajustes / Aplicaciones y marcar la casilla Permitir app’s de fuentes desconocidas. De nuevo en la ventana de diseño de App Inventor, haz clic en Build y selecciona App (provide QR code for .apk). Al cabo de unos segundos, aparecerá el código QR; escanéalo con una app adecuada. Tu dispositivo te pedirá que introduzcas tu contraseña de tu cuenta de Google. Después de introducirla, comenzará la descarga de tu app y lo podrás comprobar en el área de notificaciones de tu dispositivo. Cuando la descarga finalice, ya puedes proceder a su instalación. Al terminar la instalación, echa un vistazo a las app’s disponibles en tu dispositivo y verás que tu app HolaGatito ya está disponible. Puedes tocar sobre su icono para comenzar su ejecución tal y como harías con cualquier otra app. Es importante comprender que esto significa que tu app ha sido empaquetada, descargada e instalada en tu dispositivo. Es decir, que si realizas cambios en ella desde App Inventor tendrás que repetir el proceso completo de descarga e instalación para poder apreciar los cambios en la app de tu dispositivo.
Compartir la app
Una vez que has creado una app, la puedes compartir de varias formas. Para compartir el paquete ejecutable (el archivo .apk), primero haz clic en Build y selecciona la opción Application (save to my computer). Así podrás crear un archivo con extensión .apk en tu ordenador. Puedes compartir tu app enviando por correo electrónico el archivo anterior a tus familiares, amigos o alumnos. También puedes compartir la app si subes el archivo .apk a internet, por ejemplo a tu carpeta de DropBox o Google Drive y después crear un enlace a dicho archivo que puedes compartir con otras personas. Pero recuerda que para que otras personas puedan instalar tu app en sus dispositivos deben tener activada en su dispositivo Android la opción que permite instalar app’s de fuentes desconocidas, es decir, app’s que no provienen de la tienda oficial de Google (Play Store). También puedes, si lo deseas, compartir el código fuente (los bloques) de tu app con otras personas. Para hacerlo, haz clic en My Projects, selecciona la app que quieres compartir (en este caso HolaGatito) y después haz clic en Project / Export Selected Project . Este proceso creará un fichero en tu ordenador con la extensión .aia. Puedes enviar por email dicho archivo a otras personas que también quieran aprender a usar app’s con App Inventor. Los destinatarios podrán hacer clic en Project / Import Project desde su cuenta de App Inventor para ver tu aplicación, editarla, ampliarla, etc.
Ampliaciones
Después de construir tu primera app, hay algunas cosas que puedes mejorar por ti mismo, por ejemplo: •
Si agitas el dispositivo, el sonido del gatito suena un poco extraño… como si tuviera eco. Esto es debido a que el acelerómetro está ejecutando el evento shaking varias veces por segundo y, por tanto, el sonido del gatito empieza su
Juan Francisco Fuster
o t i t a G a l o H
14
reproducción varias veces en un solo segundo provocando que los distintos sonidos se solapen. Si vas a la ventana de diseño, seleccionas el componente de sonido y compruebas sus propiedades verás una llamada Minimuminterval , que determina el tiempo que se debe esperar el componente sound como mínimo antes de volver a reproducir el sonido. Si usas un valor mayor al actual e igual o superior a la duración del maullido entonces conseguirás solucionar el problema. Pruébalo tu mismo.
Resumen
Algunos de los puntos más importantes que hemos tratado en este tema son: •
•
•
•
•
•
•
Podemos construir app’s seleccionando componentes en la vista diseño y diciéndoles qué deben hacer y cuándo desde la ventana de edición de bloques. Hay algunos componentes que son visibles pero otros no so son. Los visibles aparecen en la pantalla de la app y los invisibles en un espacio designado para ello en App Inventor. Para definir el comportamiento de los distintos componentes de nuestra app usamos bloques predefinidos en el editor de bloques. Por ejemplo, Sound1.Play reproduce el sonido correspondiente al componente Sound1. Algunos componente necesitan información adicional para funcionar. Por ejemplo Vibrate necesita que le indiquemos cuántos milisegundos queremos que vibre. Los números también se representan como bloques. App Inventor tiene algunos componentes que son sensores. El AccelerometerSensor puede detectar cuando movemos o agitamos el dispositivo. Después de terminar una app, podemos empaquetarla para instalarla en nuestro dispositivo y también para distribuirla a otras personas.
o t i t a G
Juan Francisco Fuster
a l o H
15
