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