UNIVERSIDAD TECNOLÓGICA DEL ESTADO DE

ZACATECAS

UNIDAD ACADÉMICA DE PINOS

Tecnologías De La Información Y Comunicación

Desarrollo De Aplicaciones III

Eloy De Lira Contreras

Aplicación En appInvetor

5to cuatrimestre A

José Francisco Arenas Jiménez

Pinos Zacatecas

17/02/2015

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. 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:

foto del gatito

miau sonido

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:

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 bloques. El 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.

SIGUIENTE 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 (sound) que 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.

ADICCIÓN 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

para ampliarla y ver sus componentes.

2. 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) y 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.Playal 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.

Y LISTO ESPERO QUE HAIGA SIDO MUCHA AYUDA