Primera aplicación con app inventor para android

Ejercicio 01
G a b i n o G o n z á l e z V e g a Página 1
www.chapolleo.blogspot.comhttp://tecnoloxias.webnode.es/
En este ejercicio vamos a tener nuestra propia mascota, de tal forma que
cuando la tocamos ronronea y si agitamos el teléfono maúlla.
Como objetivos del ejercicio tenemos:
1. Familiarizarnos con el entorno “Component Designer” para seleccionar
y colocar los componentes necesarios para la aplicación.
2. Agregar sonidos e imágenes.
3. Trabajar con “Blocks editor” con el fin de determinar el
comportamiento de los componentes de la aplicación
4. Utilizar “App Inventor” con el fin de probar las aplicaciones.
5. Empaquetar la aplicación para su posterior distribución.
Ejercicio PASO A PASO.
1. Abrimos APP INVENTOR
2. En la página de la aplicación clicamos sobre el botón

Ejercicio 01
3. Accedemos con nuestra cuenta de gmail
4. Nos aparecerá la ventana de Inicio
5. Clicamos en Nuevo (New) y nos aparecerá
una ventana emergente donde tenemos
que poner el nombre de la aplicación. Hay
que tener en cuenta que APP INVENTOR
no permite ni espacios ni caracteres
especiales.
6. Una vez puesto el nombre clicamos sobre Bueno (Ok) y nos abrirá la ventana
“Component Designer”
1
2
3
4
5

Ejercicio 01
Palette
En esta sección encontramos todos los componentes disponibles en App
Inventor.
 Basic: se encuentran los elementos esenciales como los botones,
cuadros de imagen, cuadros de texto, etc…
 Media: están los elementos necesarios para la grabación y
reproducción de vídeo, sonido e imágenes.
 Animation: con ellos tenemos la posibilidad de generar elementos
que se muevan por la pantalla.
 Social: permiten la comunicación bien por email, twitter, sms,…
 Sensors: están los distintos sensores que tiene un Smartphone.
 Screen Arrangement: perminten agrupar los elementos en la
pantalla.
 LEGO MINDSTORMS: podemos gobernar un robot de LEGO desde
nuestra propia aplicación.
 Other stuff: miscelánea de elementos que permiten abrir otra
aplicación, convertir texto en voz, etc..
 Not ready for prime time: elementos en version Beta.
Viewer
En este cuadro veremos como se
distribuirán los diferentes elementos en la
pantalla de nuestro Smartphone.
Los elementos no visibles, como pueden
ser los sensores, se mostrarán en la parte
inferior.
Components
Aquí encontraremos la lista de los componentes que estamos utilizando en
nuestra aplicación. Cualquiera que se arrastre hasta el visor se añadirá a la
lista.
Es en esta cuadro donde podremos eliminar un elemento o cambiarle el
nombre
Properties
Muestra las propiedades de los componentes. Al hacer clic sobre uno de
los componentes en el Viewer o en Components sus propiedades concreta
aparecerán aquí.
Las propiedades que podemos modificar son del estilo del tipo de fuente y
tamaño, formas, colores, etc… Estas propiedades las podemos cambiar
aquí y/o luego mediante código.
Media
Aquí tendremos todos los contenidos multimedia (imágenes, sonidos) que
se emplearán en la aplicación.
5
4
3
2
1

Ejercicio 01
7. Crear una etiqueta.
a. En la sección Palette, hacemos clic sobre Label y lo arrastramos hasta el
visor. Nos aparecerá un rectángulo con el texto Text for Label1.
b. En la sección Propierties podremos cambiar el aspecto de la etiqueta.
Para que las propiedades que nos aparecen sean las de la
etiqueta, esta tiene que estar seleccionada en la columna Components.
Las propiedades se pueden variar al hacer clic sobre cada una de
ellas. Varíalas para que coincidan con las de la figura.
 BackgroundColor: permite cambiar el color de fondo.
 FontBold: negrita
 FontItalic: cursiva
 FontSize: tamaño de fuente
 FontTypeface: tipo de fuente
 Text: texto que aparecerá en la etiqueta.
 TextAlignment: alienación del texto dentro de la etiqueta
(centrado, izquierda,…)
 TextColor: color de texto
 Visible: si la etiquea está visible u oculta.
 Width: ancho de la etiqueta, al hacer clic nos aparece la
ventana siguiente:
• Automatic: toma el ancho necesario
para el texto.
• Fill partent: toma el ancho de
pantalla.
• Pixels: indicamos el número exacto
de pixels que tendrá.
 Height: alto de la etiqueta, tiene las mismas opciones que
Width.

Ejercicio 01
8. Añadir un botón
El botón lo utilizaremos para cargarlo con la imagen del gato y luego, mediante
programación haremos que al tocar el botón el gato maulle.
a. En la sección Palette, hacemos clic sobre Button y lo arrastramos hasta
el visor. Nos aparecerá un rectángulo con el texto Text for Button1.
b. A la hora de programar es muy importante poder reconocer cada uno
de los elementos, es decir, si tuviéramos 5 botones en la aplicación no
sería muy útil que su nombre fueran Button1, Button2,… ya que
tendríamos que recordar para que servía cada botón, por ello es
interesante que le pongamos un nombre propio a cada uno de los
elementos para poderlos identificar con la función que van a tener
dentro de la aplicación. Dicho esto, debemos seleccionar el Button1 en
la columna Components clicar sobre el botón Rename, situado al final
de dicha columna.
Nos aparecerá la ventana emergente Rename Component, en ella
podremos ver el nombre que
tiene actualmente el elemento
(Button1) y tenemos una caja de
texto donde indicar el nuevo
nombre, este nombre no puede
contener espacios.
c. Ahora deberemos cargar la
imagen del gato en el botón, para ello debemos descargarla desde aquí.
Para asignarla al botón debemos ir a la columna Propierties del botón.

Ejercicio 01
Para que las propiedades que nos aparecen sean las del botón,
este tiene que estar seleccionada en la columna Components.
Al clicar sobre la
propiedad Image se nos
abre el siguiente cuadro:
Clicando sobre Upload
new se abre la ventana
emergente propia de la
carga de archivos,
buscamos la imagen en
nuestro ordenador y la
subimos, el botón aparecerá cargado con la
imagen y además aparecerá el archivo en el
cuadro media
También se podría subir el archivo de la
imagen desde este cuadro, el proceso es
similar.
Debemos dejar en blanco la propiedad del
botón Text para evitar que aparezca texto
sobre la imagen.
En la siguiente imagen aparecen las
propiedades que debe tener el botón al
finalizar
9. Agregar el sonido
a. Descargamos el sonido del gato en nuestro ordenador que lo puedes
conseguir aquí.
b. Debemos cargar el sonido en nuestra aplicación, para ello vamos al
cuadro Media y clicamos sobre Upload new…, se nos abre un cuadro de
diálogo para cargar la imagen, la
seleccionamos en nuestro
ordenador y la subimos, ahora en
el cuadro Media nos aparecerá la
imagen del gato y el sonido del
maullido.

Ejercicio 01
c. Para poder reproducir el sonido en una aplicación necesitamos el
componente Sound que encontraremos en el cuadro Palette, sección
Media  Sound, lo seleccionamos y arrastramos hasta Viewer, como
es un elemento no visible nos aparecerá al pie de la pantalla.
d. Ahora debemos cargar el elemento Sound1 con el sonido que
queremos, para ello en sus propiedades debemos ir a Source, al clicar
sobre ella se nos abre un cuadro de
diálogo donde ya está el sonido
cargado, lo seleccionamos y clicamos
sobre Ok. La propiedad
MinimumInterval nos marca los
milisengundos que estarará
sonando, ponemos 1000 para que el
maullido dure un segundo.

Ejercicio 01
10. Programar.
Ya tenemos la apariencia de nuestra aplicación y sólo nos queda introducir el
código para que funcione tal cual deseamos. Para ello debemos abrir el editor
de bloques para ello debemos clicar sobre Open the Blocks Editor situado en la
parte superior derecha, con ello se descarga un archivo Java que debemos
ejecutar, una vez rematado el proceso se nos abre la ventana del editor de
bloques.

Ejercicio 01
El editor está dividido en dos partes, en la columna de la izquierda están todos
los elementos de programación necesario, esta a su vez está formada por tres
pestañas:
En Built-In encontramos
todos los elementos
básicos de progamación,
funciones lógicas, de
control, etc…
My Blocks contiene todos los
elementos que hemos
colocado en nuestra
aplicación.
Advanced permite actuar sobre
todos los elementos de una
misma clase a la vez.
Al clicar sobre cualquiera de estos elementos se nos abre una pestaña con
todas sus opciones, sólo queda seleccionar la que necesitamos y arrastrar hasta
el cuadro de programación situada a la derecha.
Vamos a empezar a programar nuestra aplicación.
a. Vamos a hacer que al tocar el gato este maúlle. Como la imagen del
gato está cargada en el botón debemos ir a este, para ello vamos a My
Blocks  BotonGato y se nos desplaza una pestaña con todas las
opciones posibles, de ellas tomamos When BotonGato.click do

Ejercicio 01
b. Al tocar el botón pretendemos que suene un
sonido, para ello debemos ir al elemento Sound1, y
allí seleccionar el procedimiento call Sound1.Play,
como el sonido ya lo cargamos en el diseño el
resultado será que al tocar el botón el gato
maullará.
c. Ahora vamos a hacer que el gato ronronee,
para ello vamos a introducir una vibración
cuando tocamos el botón, para ello
volvemos al elemento Sound1 y buscamos
el procedimiento call Sound1.Vibrate y lo
encajamos dentro del botón.
d. Como vemos este procedimiento nos pide un valor de milisegundos que
corresponde al tiempo que estará vibrando el SmartPhone, para
introducir dicho número debemos hacer clic que cualquier parte de
panel (fuera del botón) y nos saldrán seis opciones.

Ejercicio 01
e. Clicamos sobre Math y nos saldrán una lista con todas la posibilidades
matemáticas que posee App Inventor, de ellas seleccionamos la primera
123
f. La hacemos encajar en milisecs del procedimiento Sound1.Vibrate.
g. Ahora le vamos a cambiar el valor, para ello clicamos sobre 123 e
introducimos el valor 1000, de este modo estará vibrando 1000
milisengundos o lo que es lo mismo, 1 segundo.
h. Con esto, el gato maullará y ronroneará cada vez que lo toquemos, pero
ahora se nos ocurre que queremos que ronronee cuando movemos el
teléfono, para ello debemos saber cuando estamos moviendo el
teléfono y esa información nos la dá el sensor de aceleración.
Para introducir dicho sensor en nuestra aplicación debemos volver al
Component Designer y allí ir a Palette  Sensors 

Ejercicio 01
AccelerometerSensor y arrastramos hasta la pantalla, como es un
sensor se colocará en la zona de Non-Visible Components.
i. El sensor nos aparecerá en el Blocks Editor dentro de My Blocks con el
nombre AccelerometerSensor1, clicando sobre él nos aparecerán todas
las opciones del mismo, en este caso nos interesa saber cuando se agita
el SmartPhone por ello seleccionamos la opción When
AccelerometerSensor1.Shaking do y la arrastramos al tapiz
j. Si lo que queremos es que el gato maulle sólo tenemos que introducir el
elemento Sound1.Play

Ejercicio 01
k. El programa completa quedaría de la siguiente forma:
11. Empaquetado para distribución.
a. Una vez terminada la programación sólo nos queda guardar el trabajo
prepararnos para empaquetar y distribuirla. Para ello volvemos al
Component Designer, en la parte superior derecha nos encontramos
con Package for Phone

Ejercicio 01
b. De las opciones que nos dá, la primera Download to this Computer nos
descarga al equipo el archivo APK, Download to the Connected Phone
nos lo descarga directamente al teléfono conectado al equipo.
c. Si lo que queremos es descargar el código fuente para poder llevarlo a
otra cuenta tenemos que ir a My Projects, situado en la parte superior
de la pantalla y podremos ver todos nuestro proyectos, allí en el botón
More Actions seleccionamos Download Source

Primera aplicación con app inventor para android

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Primera aplicación con app inventor para android

Último

Primera aplicación con app inventor para android