aplicación android

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

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

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

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

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

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

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

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

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

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

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