Ejercicio 01
G a b i n o G o n z á l e z V e g a
Página 1
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.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
G a b i n o G o n z á l e z V e g a
Página 2
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.es/
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
G a b i n o G o n z á l e z V e g a
Página 3
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.es/
Pale
tte
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.
Vie
wer
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.
Com
pone
nts 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
Prop
erti
es 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.
Med
ia
Aquí tendremos todos los contenidos multimedia (imágenes, sonidos) que se emplearán en la aplicación.
5
4
3
2
1
Ejercicio 01
G a b i n o G o n z á l e z V e g a
Página 4
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.es/
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
G a b i n o G o n z á l e z V e g a
Página 5
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.es/
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
G a b i n o G o n z á l e z V e g a
Página 6
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.es/
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
G a b i n o G o n z á l e z V e g a
Página 7
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.es/
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
G a b i n o G o n z á l e z V e g a
Página 8
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.es/
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
G a b i n o G o n z á l e z V e g a
Página 9
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.es/
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
G a b i n o G o n z á l e z V e g a
Página 10
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.es/
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
G a b i n o G o n z á l e z V e g a
Página 11
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.es/
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
G a b i n o G o n z á l e z V e g a
Página 12
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.es/
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
G a b i n o G o n z á l e z V e g a
Página 13
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.es/
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
G a b i n o G o n z á l e z V e g a
Página 14
ww
w.c
hapo
lleo.
blog
spot
.com
ht
tp:/
/tec
nolo
xias
.web
node
.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 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