Ejercicio 01

En este ejercicio vamos a tener nuestra propia mascota, de tal forma que
cuando la tocamos ronronea y si agitamos el telfono malla.

http://tecnoloxias.webnode.es/

Como objetivos del ejercicio tenemos:

1. Familiarizarnos con el entorno Component Designer para seleccionar
y colocar los componentes necesarios para la aplicacin.
2. Agregar sonidos e imgenes.
3. Trabajar con Blocks editor con el fin de determinar el
comportamiento de los componentes de la aplicacin
4. Utilizar App Inventor con el fin de probar las aplicaciones.
5. Empaquetar la aplicacin para su posterior distribucin.

Ejercicio PASO A PASO.

1. Abrimos APP INVENTOR

www.chapolleo.blogspot.com

2. En la pgina de la aplicacin clicamos sobre el botn

Gabino Gonzlez Vega

Pgina 1

Ejercicio 01

http://tecnoloxias.webnode.es/

3. Accedemos con nuestra cuenta de gmail

4. Nos aparecer la ventana de Inicio

www.chapolleo.blogspot.com

5. Clicamos en Nuevo (New) y nos aparecer

una ventana emergente donde tenemos
que poner el nombre de la aplicacin. 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
4

Gabino Gonzlez Vega

Pgina 2

Palette

http://tecnoloxias.webnode.es/

Ejercicio 01

En este cuadro veremos como se

distribuirn los diferentes elementos en la
pantalla de nuestro Smartphone.

Components

Aqu encontraremos la lista de los componentes que estamos utilizando en

nuestra aplicacin. Cualquiera que se arrastre hasta el visor se aadir a la
lista.
Es en esta cuadro donde podremos eliminar un elemento o cambiarle el
nombre

Properties

Los elementos no visibles, como pueden

ser los sensores, se mostrarn en la parte
inferior.

Muestra las propiedades de los componentes. Al hacer clic sobre uno de

los componentes en el Viewer o en Components sus propiedades concreta
aparecern aqu.
Las propiedades que podemos modificar son del estilo del tipo de fuente y
tamao, formas, colores, etc Estas propiedades las podemos cambiar
aqu y/o luego mediante cdigo.

Media

www.chapolleo.blogspot.com

Viewer

En esta seccin 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: estn los elementos necesarios para la grabacin y
reproduccin de vdeo, sonido e imgenes.
Animation: con ellos tenemos la posibilidad de generar elementos
que se muevan por la pantalla.
Social: permiten la comunicacin bien por email, twitter, sms,
Sensors: estn 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 aplicacin.
Other stuff: miscelnea de elementos que permiten abrir otra
aplicacin, convertir texto en voz, etc..
Not ready for prime time: elementos en version Beta.

Aqu tendremos todos los contenidos multimedia (imgenes, sonidos) que

se emplearn en la aplicacin.

Gabino Gonzlez Vega

Pgina 3

Ejercicio 01

http://tecnoloxias.webnode.es/

7. Crear una etiqueta.

a. En la seccin Palette, hacemos clic sobre Label y lo arrastramos hasta el
visor. Nos aparecer un rectngulo con el texto Text for Label1.

b. En la seccin Propierties podremos cambiar el aspecto de la etiqueta.

www.chapolleo.blogspot.com

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. Varalas para que coincidan con las de la figura.
BackgroundColor: permite cambiar el color de fondo.
FontBold: negrita
FontItalic: cursiva
FontSize: tamao de fuente
FontTypeface: tipo de fuente
Text: texto que aparecer en la etiqueta.
TextAlignment: alienacin 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 nmero exacto

de pixels que tendr.

Height: alto de la etiqueta, tiene las mismas opciones que

Width.

Gabino Gonzlez Vega

Pgina 4

Ejercicio 01
8. Aadir un botn

www.chapolleo.blogspot.com

http://tecnoloxias.webnode.es/

El botn lo utilizaremos para cargarlo con la imagen del gato y luego, mediante
programacin haremos que al tocar el botn el gato maulle.
a. En la seccin Palette, hacemos clic sobre Button y lo arrastramos hasta
el visor. Nos aparecer un rectngulo 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 tuviramos 5 botones en la aplicacin no
sera muy til que su nombre fueran Button1, Button2, ya que
tendramos que recordar para que serva cada botn, por ello es
interesante que le pongamos un nombre propio a cada uno de los
elementos para poderlos identificar con la funcin que van a tener
dentro de la aplicacin. Dicho esto, debemos seleccionar el Button1 en
la columna Components clicar sobre el botn 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 botn, para ello debemos descargarla desde aqu.
Para asignarla al botn debemos ir a la columna Propierties del botn.

Gabino Gonzlez Vega

Pgina 5

Ejercicio 01

http://tecnoloxias.webnode.es/

Para que las propiedades que nos aparecen sean las del botn,
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 botn aparecer cargado con la
imagen y adems aparecer el archivo en el
cuadro media

www.chapolleo.blogspot.com

Tambin se podra subir el archivo de la

imagen desde este cuadro, el proceso es
similar.
Debemos dejar en blanco la propiedad del
botn Text para evitar que aparezca texto
sobre la imagen.
En la siguiente imagen aparecen las
propiedades que debe tener el botn 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 aplicacin, para ello vamos al
cuadro Media y clicamos sobre Upload new, se nos abre un cuadro de
dilogo 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.

Gabino Gonzlez Vega

Pgina 6

Ejercicio 01

www.chapolleo.blogspot.com

http://tecnoloxias.webnode.es/

c. Para poder reproducir el sonido en una aplicacin necesitamos el

componente Sound que encontraremos en el cuadro Palette, seccin
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
dilogo 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.

Gabino Gonzlez Vega

Pgina 7

Ejercicio 01

Ya tenemos la apariencia de nuestra aplicacin y slo nos queda introducir el

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

www.chapolleo.blogspot.com

http://tecnoloxias.webnode.es/

10. Programar.

Gabino Gonzlez Vega

Pgina 8

Ejercicio 01

http://tecnoloxias.webnode.es/

El editor est dividido en dos partes, en la columna de la izquierda estn todos

los elementos de programacin necesario, esta a su vez est formada por tres
pestaas:

En Built-In encontramos My Blocks contiene todos los Advanced permite actuar sobre
todos
los
elementos elementos
que
hemos todos los elementos de una
bsicos de progamacin, colocado
en
nuestra misma clase a la vez.
funciones
lgicas,
de aplicacin.
control, etc
Al clicar sobre cualquiera de estos elementos se nos abre una pestaa con
todas sus opciones, slo queda seleccionar la que necesitamos y arrastrar hasta
el cuadro de programacin situada a la derecha.

www.chapolleo.blogspot.com

Vamos a empezar a programar nuestra aplicacin.

a. Vamos a hacer que al tocar el gato este malle. Como la imagen del
gato est cargada en el botn debemos ir a este, para ello vamos a My
Blocks BotonGato y se nos desplaza una pestaa con todas las
opciones posibles, de ellas tomamos When BotonGato.click do

Gabino Gonzlez Vega

Pgina 9

b. Al tocar el botn 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 diseo el
resultado ser que al tocar el botn el gato
maullar.
c. Ahora vamos a hacer que el gato ronronee,
para ello vamos a introducir una vibracin
cuando tocamos el botn, para ello
volvemos al elemento Sound1 y buscamos
el procedimiento call Sound1.Vibrate y lo
encajamos dentro del botn.
d. Como vemos este procedimiento nos pide un valor de milisegundos que
corresponde al tiempo que estar vibrando el SmartPhone, para
introducir dicho nmero debemos hacer clic que cualquier parte de
panel (fuera del botn) y nos saldrn seis opciones.

www.chapolleo.blogspot.com

http://tecnoloxias.webnode.es/

Ejercicio 01

Gabino Gonzlez Vega

Pgina 10

Ejercicio 01

http://tecnoloxias.webnode.es/

e. Clicamos sobre Math y nos saldrn una lista con todas la posibilidades
matemticas que posee App Inventor, de ellas seleccionamos la primera
123

www.chapolleo.blogspot.com

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
telfono, para ello debemos saber cuando estamos moviendo el
telfono y esa informacin nos la d el sensor de aceleracin.
Para introducir dicho sensor en nuestra aplicacin debemos volver al
Component Designer y all ir a Palette Sensors

Gabino Gonzlez Vega

Pgina 11

Ejercicio 01

www.chapolleo.blogspot.com

http://tecnoloxias.webnode.es/

AccelerometerSensor y arrastramos hasta la pantalla, como es un

sensor se colocar en la zona de Non-Visible Components.

i.

j.

El sensor nos aparecer en el Blocks Editor dentro de My Blocks con el

nombre AccelerometerSensor1, clicando sobre l nos aparecern todas
las opciones del mismo, en este caso nos interesa saber cuando se agita
el SmartPhone por ello seleccionamos la opcin When
AccelerometerSensor1.Shaking do y la arrastramos al tapiz
Si lo que queremos es que el gato maulle slo tenemos que introducir el
elemento Sound1.Play

Gabino Gonzlez Vega

Pgina 12

Ejercicio 01

11. Empaquetado para distribucin.

a. Una vez terminada la programacin slo 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

www.chapolleo.blogspot.com

http://tecnoloxias.webnode.es/

k. El programa completa quedara de la siguiente forma:

Gabino Gonzlez Vega

Pgina 13

Ejercicio 01

c. Si lo que queremos es descargar el cdigo 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 botn
More Actions seleccionamos Download Source

www.chapolleo.blogspot.com

http://tecnoloxias.webnode.es/

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 telfono conectado al equipo.

Gabino Gonzlez Vega

Pgina 14