Ejercicio 01 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:
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h
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.
1. Abrimos APP INVENTOR 2. En la página de la aplicación clicamos sobre el botón
m o c . t o p s g o l b . o e l l o p a h c . w w w
Gabino González Vega
Página 1
Ejercicio 01 3. Accedemos con nuestra cuenta de gmail 4. Nos aparecerá la ventana de Inicio
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h 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”
m o c . t o p s g o l b . o e l l o p a h c . w w w
1 4
3
2
5
Gabino González Vega
Página 2
Ejercicio 01
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h
1
e t t e l a P
En este cuadro veremos como se distribuirán los diferentes elementos en la pantalla de nuestro Smartphone.
2
r e w e i V
m o c . t o p s g o l b . o e l l o p a h c . w w w
3
4
5
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.
Los elementos no visibles, como pueden ser los sensores, se mostrarán en la parte inferior.
s t n e n o p m o C
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
s e i t r e p o r P
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.
a i d Aquí tendremos todos los contenidos multimedia (imágenes, sonidos) que e M se emplearán en la aplicación.
Gabino González Vega
Página 3
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.
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h 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.
m o c . t o p s g o l b . o e l l o p a h c . w w w
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.
Gabino González Vega
Página 4
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.
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h
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
m o c . t o p s g o l b . o e l l o p a h c . w w w
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.
Gabino González Vega
Página 5
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:
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h
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.
m o c . t o p s g o l b . o e l l o p a h c . w w w
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.
Gabino González Vega
Página 6
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.
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h
m o c . t o p s g o l b . o e l l o p a h c . w w w
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
MinimumInterval nos
milisengundos
propiedad marca los
que
estarará
sonando, ponemos 1000 para que el maullido dure un segundo.
Gabino González Vega
Página 7
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
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h
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.
m o c . t o p s g o l b . o e l l o p a h c . w w w
Gabino González Vega
Página 8
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:
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h
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 n ecesitamos 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
m o c . t o p s g o l b . o e l l o p a h c . w w w
BotonGato y se nos desplaza una pestaña con todas las
opciones posibles, de ellas tomamos When BotonGato.click do
Gabino González Vega
Página 9
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,
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h
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.
m o c . t o p s g o l b . o e l l o p a h c . w w w
Gabino González Vega
Página 10
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
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h
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
m o c . t o p s g o l b . o e l l o p a h c . w w w
milisengundos o lo que es lo mismo, 1 segundo.
h. Con esto, el gato maullará y ronroneará cada vez qu e 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
Gabino González Vega
Página 11
Ejercicio 01 AccelerometerSensor y arrastramos hasta la pantalla, como es un
sensor se colocará en la zona de Non-Visible Components.
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h
m o c . t o p s g o l b . o e l l o p a h c . w w w
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
Gabino González Vega
Página 12
Ejercicio 01
k. El programa completa quedaría de la siguiente forma:
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h
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
m o c . t o p s g o l b . o e l l o p a h c . w w w
Gabino González Vega
Página 13
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.
/ s e . e d o n b e w . s a i x o l o n c e t / / : p t t h
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
m o c . t o p s g o l b . o e l l o p a h c . w w w
Gabino González Vega
Página 14