UTN.ba - Introducción a App Inventor

Departamento de Aprendizaje Visual

1

Introduccin a AppInventor2 A lo largo del mismo vamos a aprender el uso de esta entretenida utilidad web desarrollada por Google y brindada por el MIT (Instituto Tecnolgico de Massachusetts) para el desarrollo de apli-caciones para telfonos celulares (as como otros dispositivos) con sistema operativo Android. Para esto necesitaremos contar las siguientes herramientas:

Para Ingresar a la Pgina Web de App Inventor 2:

1) Computadora y Sistema Operativo: Una Computadora con conexin a internet y puertos USB. Se puede optar por las siguien-tes 3 posibilidades:

a. PC con Windows, ya sea Windows XP, Windows Vista o Windows 7. b. PC con GNU/Linux, ya sea Ubuntu 8, Debian 5 o versiones superiores de estos. c. Macintosh con procesador Intel y Mac OS X 10.5 o superior.

2) Navegador:

Se puede optar por los siguientes: a. Mozilla Firefox 3.6 o superior. b. Google Chrome 4.0 o superior. c. Apple Safari 5.0 o superior.

No se puede utilizar Microsoft Internet Explorer de momento.

3) Una Cuenta de Gmail. Explicaremos como crear la misma en pasos posteriores.

Para probar las Apps: Se puede optar por las siguientes 3 posibilidades:

a. Utilizando el emulador (el cual veremos ms adelante) directamente en la PC. b. Utilizando un dispositivo Android conectado a travs de USB a la computadora. c. Utilizando un dispositivo Android conectado a la misma red Ethernet que la

computadora a travs de WiFi. Para los dos ltimos casos, el telfono o tablet debe contar con sistema operativo Android 2.3 (Gingerbread) o superior y tener instalada la aplicacin MIT AI2 Companion App que se puede descargar desde el siguiente link: https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3

Adems, deberemos instalar en la PC el programa aiStarter. Este programa es necesario tanto para enlazar como para emular el dispositivo Android. El mismos se puede descargar de aqu:


2

http://appinv.us/aisetup_windows

Este programa requiere del uso de Java, que es provisto por Oracle gratuitamente en esta direc-cin:

https://www.java.com/es/download/

Antes de comenzar a trabajar con el entorno necesitaremos disponer de una cuenta de Google, la cual utilizaremos para loggearnos en el sitio de App Inventor. La misma la podremos crear en la pgina de Gmail:

https://mail.google.com/

En la esquina superior derecha encontraremos el botn Crear una cuenta (en azul). Le damos clic y nos aparecer la siguiente pgina:


3

Rellenamos los campos que aparecen en la columna gris con nuestra informacin (nombre, apellido, nombre de usuario, una contrasea cualquiera de ocho caracteres, fecha de nacimiento, sexo, nmero de telfono (opcional) y una direccin de correo actualmente en uso) Ingresamos el cdigo de verificacin o capcha de la imagen, tildamos la casilla de verificacin al lado de Acepto las Condi-ciones del servicio y la Poltica de privacidad de Google, y da-mos clic en Siguiente paso. Listo, ya tenemos nuestra cuenta de Google. Nos propondr agregar ms informacin a nuestro perfil de usuario para usarlo en Google+ (la red social de Google), pero esto no ser necesa-rio para utilizar el servicio de App Inventor. Ya estamos listos para dirigirnos a la pgina de App Inventor, cuya direccin es:

http://appinventor.mit.edu/explore/


4

Para comenzar, damos clic en Create (el icono naranja arriba a la derecha) y nos abrir una pgina de loggeo con un cuadro como el de la derecha. Aqu debemos ingresar la direccin de correo Gmail que creamos anteriormente (nombre de [email protected]) y la contrasea de la misma. Damos clic en Iniciar Sesin y se nos abrir la siguiente pgina:


5

En la misma verificamos que la cuenta que usaremos para loggearnos es la misma que ingresamos en el paso anterior, damos clic en Permitir y ya estaremos listos para empezar a utilizar los servi-cios del MIT App inventor. Al hacer esto se nos presenta la siguiente pgina de bienvenida:

Hacemos clic en el botn Continue del cuadro de bienvenida y listo, ya habremos ingresado den-tro del entorno de desarrollo App Inventor. Es posible que antes de esto nos aparezca un recuadro proponindonos contestar una encuesta para mejorar el servicio. De estar interesados en completar la misma mas tarde cliqueamos en Take Survey Later, de otro modo daremos clic en Never Take Survey y ya no nos aparecer ms este cartel.


6

Una vez hecho esto, nos aparecer otro cartel indicndonos que no disponemos de ningn proyec-to dentro de AppInventor2, y que de haber trabajado en el AppInventor anterior (AppInventor 1, por as decir), nuestros proyectos se encuentran a salvo todava en esa otra versin.

Simplemente ignoramos este cartel y nos disponemos a comenzar. Para esto basta cliquear en cualquier parte de la pgina, con lo que vamos a cliquear directamente en el botn New Project que se encuentra en la esquina superior derecha, debajo del logo del MIT App Inventor 2. Automticamente nos parece un cuadro de dialogo en el cual vamos a indicar el nombre que lleva-r el proyecto, supongamos por caso Proyecto01.


7

Damos enter y por unos segundos veremos la siguiente pantalla, que es donde nos van a aparecer todos los proyectos que vayamos creando en forma de listado:


8

Pero debido a que, slo contamos con este proyecto (por ser el primero), este se abrir automti-camente, con lo cual estaremos frente a una pantalla como la que sigue a continuacin, a la cual hemos agregado algunas descripciones generales:

Cmo podemos apreciar, en la parte superior de la pgina se encuentra una barra de mens de color gris:

Estos mens son Project (Proyecto), Connect (Conectar), Build (Construir) y Help (Ayuda). Dentro de Project encontraremos

- My Projects: Nos devuelve a la pgina anterior, en la cual se encuentra el listado de todos los proyectos que hayamos creado.

- Start new Project: Nos permite comenzar un nuevo proyecto de cero.

- Import Project (.aia) from my computer: Nos permite importar un proyecto que ten-

gamos guardado en nuestra pc (o en un pendrive), el cual debe encontrarse en el for-mato con extensin aia.


9

- Delete Project: Para eliminar un proyecto dentro de My Projects, luego de que haya-mos tildado la casilla de verificacin a la izquierda de este. Tener en cuenta que una vez borrados los proyectos, NO se podrn recuperar.

- Save project: Guarda el proyecto actual, sin cerrar el mismo.

- Save Project as: Permite guardar el proyecto con un nuevo nombre. Por defecto, se nos propondr el mismo nombre de proyecto pero con el agregado del sufijo _copy. Una vez hecho esto, el proyecto con el nuevo nombre se nos abrir automticamente para que continuemos trabajando en este.

- Checkpoint: Muy similar a Save Project as, con la diferencia de que el nombre pro-puesto llevara el sufijo _checkpointN, donde N es un nmero que se incrementa ca-da vez que generamos un checkpoint (punto de chequeo), y que el proyecto con el nuevo nombre no se abrir automticamente. Nos ser de mucha utilidad cuando no estamos seguros de que los cambios que vamos a realizar, vayan a resultar como esperamos, y deseamos tener una copia del proyecto hasta el punto actualmente alcanzado, para poder retomar desde aqu de ser esto ne-cesario.

- Export selected project (.aia) to my computer: Nos permite exportar el proyecto que

seleccionemos dentro de My Projects hacia la PC, creando un archivo con extensin aia. Esto es muy til tanto para tener un backup como para compartir nuestro proyec-to con otros usuarios.

- Export all project: dem anterior pero seleccionando ms de un proyecto a la vez.

En dicha barra tambin aparecen los links My Projects, que nos devuelve a nuestra lista de proyec-tos, Guide donde encontraremos informacin de soporte, Report an Issue para enviar un informe de error, y por ltimo nuestro nombre de usuario donde al cliquear podremos cerrar la sesin.


10

Conexiones y prueba de apps

- Para probar las apps desde WiFi hace falta solo el MIT companion app en el dispositi-vo. Tanto la computadora como el dispositivo tienen que estar conectados a la misma red WiFi o en el caso de la pc un cable modem con conexin WiFi y cable de red. Den-tro del entorno de app inventor hay que seleccionar en conexiones la opcin AI com-panion. Aparecer un cdigo QR como el siguiente:

Iniciar la MIT AI2 Companion en el dispositivo y escanear el cdigo QR y listo.

- Para usar el Emulador o la conexin por USB se debe tener instalado el software Ap-pInventor_Setup_Installer_v_2_2, que se puede descargar de esta direccin: http://appinv.us/aisetup_windows (si por alguna razn ya tuvieran instalada una ver-sin anterior, ser necesario desinstalar dicha versin y reiniciar la mquina antes de instalar la nueva versin). En la mayora de los casos, App inventor es capaz de localizar y detectar el programa por s mismo, pero en el caso de que el mismo consulte por la ubicacin del software, la ruta por defecto es C:\Archivos de Programa\Appinventor\commands-for-Appinventor. Para el caso de utilizar una conexin USB para hacer las pruebas directamente en un telfono celular u otro dispositivo Android, ser necesario instalar los driver de dicho


11

dispositivo en la computadora, para lo cual debern referirse al manual de usuario de dicho dispositivo. Tambin se necesita tener instalado en el dispositivo Android la App MIT AI2 Compa-nion que se puede instalar desde Google Play a travs de este link: https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3 Hay una pgina para probar la conexin de nuestro dispositivo que es: http://appinventor.mit.edu/test/


12

Glosario de Trminos en App Inventor Argumento A menudo, en Ciencias de la Computacin, las entradas en los procedimientos o eventos se deno-minan argumentos. Estos argumentos son variables locales cuyo alcance est dentro de ese pro-cedimiento o evento. Comportamiento Se dice que una aplicacin que tiene un comportamiento cuando responde a las acciones del usuario y de los eventos externos que esta pueda percibir. Bloque App Inventor es un lenguaje de programacin por bloques. Los bloques son las piezas que se co-nectan para poder decirle a la aplicacin lo que debe hacer. Se pueden encontrar en el Editor de bloques. Blockly Blockly es el nombre del editor de programacin visual que App Inventor utiliza para mostrar los bloques en el navegador. Editor de bloques La pantalla se encuentra haciendo clic en el botn de Blocks en la pantalla de diseo. Aqu es don-de usted dice a su aplicacin lo que debe hacer. Comentario Los comentarios permiten escribir recordatorios u observaciones rpidas sobre los bloques de cdigo. Se pueden utilizar para explicar lo que ciertos bloques hacen o lo que se desea que hagan en el futuro. Como los comentarios no se ejecutan, son para el programador y no para la mquina. El uso de comentarios permite que se pueda entender mejor el cdigo cuando se llega de nuevo a l ms adelante. Usted puede aadir o eliminar un comentario, haga clic en un bloque. Componente Los componentes, son las piezas de su aplicacin que hacen acciones para usted. En la pantalla de diseo, los componentes se arrastran desde la paleta de componentes y se colocan en el telfono. Ejemplos de componentes son Label, sonido, o botn. Diseador La pantalla en la que puede arrastrar y soltar las piezas componentes y el diseo utilizando la in-terfaz de usuario. Cajn El segundo cuadro en la jerarqua de bloques que va Paleta para Cajn de Block. Un ejemplo de un cajn es de control.


13

Desplegable Algunos bloques tienen una pequea flecha de la derecha a la derecha del nombre del bloque. Puede hacer clic en esta flecha para cambiar el nombre y la funcin del bloque. El bloque get es un ejemplo de un men desplegable. Para obtener ms ayuda sobre este tema, echa un vistazo a la pgina de mens desplegables. Emulador El nombre del telfono falso que aparece en su computadora si usted no tiene un dispositivo An-droid a trabajar es un emulador. Event Driven Decimos que una aplicacin est orientada a eventos, ya que depende de los acontecimientos para saber qu hacer. Usted no le dice a su aplicacin que esperar hasta que un mensaje de texto antes de hacer otra cosa. En su lugar, mediante el uso de controladores de eventos, le dice a su aplicacin que cuando se produce un evento, realizar esta tarea. Esto evita que el telfono de gas-tar toneladas de tiempo de espera para que los eventos suceden mientras se detiene todo lo de-ms que esperar. Con controladores de eventos, el telfono se puede seguir haciendo lo que se le asign a hacer a menos que un controlador de eventos se interrumpe. Se dice que el flujo del pro-grama se determina por los acontecimientos. Getter A Getter es el bloque que se encuentra en el cajn Variables que dice llegar con una lista desple-gable al lado de l. Este bloque se utiliza para devolver una variable local o global. Lista Las listas se utilizan para almacenar informacin. Si queras hacer un seguimiento de todos los nombres de usuario de las personas que utilizan la aplicacin, que se quiere almacenar esa infor-macin en una lista. Cuando se aaden elementos a una lista, que se colocan en una cierta posi-cin en la lista. La posicin de un elemento en una lista a menudo se llama su ndice. En App Inven-tor, el primer elemento de una lista tiene un ndice de 1, la segunda tiene un ndice de 2, y as su-cesivamente. Mutador Algunos bloques tienen un signo ms blanco en ellos en una caja azul. Estos bloques se denominan mutators. Si hace clic en el signo ms, una burbuja aparece con el bloque de la izquierda que re-presenta su funcin y todas sus entradas y el bloque de la derecha con el nombre de una de las entradas. Puede arrastrar este bloque de entrada en el bloque de funcin y entonces su bloque de funcin tomar ahora una entrada adicional. Lista y max son ejemplos de mutators. Para obtener ms ayuda sobre este tema, echa un vistazo a la pgina mutators. Paleta El cuadro ms amplio / exterior que tiene cajones.


14

Procedimiento Un procedimiento es un conjunto de instrucciones. En App Inventor, un procedimiento es un con-junto de bloques bajo un bloque de procedimiento. Para obtener ms ayuda sobre este tema, echa un vistazo a la pgina de los procedimientos. Propiedades Cada componente tiene propiedades que se pueden cambiar o inicializados en la pantalla del Di-seador en virtud de las propiedades que se encuentran en el lado derecho. Tambin se pueden cambiar o se utilizan en la vista mediante el uso de bloques de getter o setter bloques de propie-dades. Estos bloques decir algo como get / set Button1.Height. Setter Un colocador es otro bloque que se encuentra en el cajn que dice Variables conjunto desplegable para. Este bloque se usa para asignar nuevos valores a las dos variables locales y globales. Variable Una variable es contenedor que almacena un valor. Hay dos tipos de variables: globales y locales. Para obtener ms informacin sobre este tema, echa un vistazo a la pgina de Global vs variables locales.


15


16

Construccin de la primera aplicacin: HelloPurr Ahora que ya hemos dado los primeros pasos en la construccin de una App, vamos a construir una aplicacin completa y funcional. La misma se llamar HelloPurr. Recomendamos antes de empezar, ya tener enlazado el dispositivos Android (o bien el emulador) al entorno de AppInventor, de manera que los cambios que realicemos se vean reflejados rpida-mente en dicho dispositivo.

HelloPurr: Acariciar al gatito para que haga miau!

HelloPurr es una aplicacin muy sencilla, la que podremos construir en un tiempo muy corto. Va-mos a crear un botn, el cual contendr en el la imagen de un gato, y a continuacin, vamos a programar dicho botn para que cuando se haga clic en l, se reproduzca en sonido de un "miau". Por estas razones, vamos a necesitar dos archivos: un archivo de imgenes con la foto de un gato, y un archivo de audio con el sonido de un "miau". Aqu estn los mismos, para que puedan copiar-los a su PC:

meow.mp3


17

Seleccionar los componentes para disear la aplicacin

Como comentamos anteriormente, los componentes que vamos agregar a nuestra App se en-cuentran en el lado izquierdo del entorno de diseo, dentro de la columna Palette.

Dichos componentes son los elementos bsicos que necesitamos para hacer nuestras aplicaciones Android.

Estos son como los ingredientes de una receta. Algunos componentes son muy simples, como el componente Label, que slo muestra un texto en pantalla, o el componente Button (punto 1 en la imagen a la izquierda), que al tocarlo realiza una accin.

Otros componentes son ms elaborados: el componente Canvas puede almacenar imgenes fijas o animaciones, el componente acelermetro que funciona como el control de una consola Wii, los componentes que reproducen msica y video, etc.

Para utilizar un componente en su aplicacin, tendr que hacer clic y arrastrarlo hacia la ventana Viewer en el centro de la pantalla Designer. Cuando se agrega un componente a la ventana Vie-wer (punto 1 en la imagen de ms abajo), este aparecer en la lista de componentes al lado dere-cho la misma.

Los componentes (punto 2 en la imagen a continuacin) tienen propiedades que se pueden ajustar para cambiar la forma en la cual componente aparece o se comporta dentro de la aplicacin. Para ver y cambiar las propiedades de un componente (punto 3 en la imagen a continuacin), primero debe seleccionar el componente deseado en la lista de componentes.


18

Pasos para la seleccin de componentes y configuracin de sus propiedades

HelloPurr tendr un componente Button que muestra la imagen del gatito que se encuentra ms arriba. Para lograr esto siga estos pasos:

- Paso 1a. Desde la columna Palette, arrastre y suelte el componente Button sobre la Screen1 (1).

- Paso 1b. Para que el botn tenga la imagen del gatito, vaya a la propiedad Image den-

tro del panel Propierties, haga clic en el texto "None ..." y luego en "Upload File ..." (2). Una ventana se abrir para que podamos elegir el archivo de imagen. Cliqueamos en "Browse" y vamos a la ubicacin del archivo de imagen del gatito que copiamos a la PC (3). Lo seleccionamos y damos clic en "Abrir", y a continuacin, en "OK".

- Paso 2 - Cambiar la propiedad Text del botn Button1: Vamos a la propiedad Text (texto), eliminamos la leyenda "Text de Button1", dejando dicha propiedad en blanco, de modo que no aparezca nada escrito sobre la cara del gatito. Si la imagen del gatito aparece incompleta, podemos solucionarlo seleccionando la opcin Fill parent de las propiedades Height (alto) y Width (ancho) del botn.


19

Para ello, haga clic en el componente Button1, vaya debajo de todo en el panel pro-piedades, y haga clic en la palabra "Automtic ..." dentro de la propiedad Width. Se activar una la lista desplegable, en la cual podr seleccionar la opcin "Fill parent" (completar cuadro). Haga lo mismo con la propiedad Height.

- Paso 3a. Desde la columna Palette, arrastre y suelte el componente Label a la ventana Viewer (1), situndolo debajo de la imagen del gatito. Dicho componente aparecer en su lista de componentes como Label1.

- Paso 3b. Cambiemos ahora la propiedad Text de Label1 por el texto "Pet the Kitty" (2). Podremos ver cmo cambia el texto dentro de entorno de diseo al mismo tiempo que en el dispositivo (o el emulador, dependiendo del caso).

- Paso 3c. Cambiemos tambin el tamao de la letra de Label1. Para esto, deberemos hacer clic en la propiedad FontSize, y cambiar su valor, en este caso, a 30 (3).

- Paso 3d. Por ltimo, Cambiemos el color de fondo de Label1, haciendo clic en el cua-dro BackgroundColor (4). Se puede elegir cualquier color gusten. Tambin se puede cambiar color del texto de Label1 haciendo clic en TextColor (5). En este caso, hemos establecido el color de fondo como azul, mientras que para el color del texto elegimos el amarillo.

- Paso 4a. Dentro de la columna Palette, haga clic sobre el submen Media. Ah se en-cuentra el componente Sound, el cual debemos arrastrar y soltar dentro de la ventana Viewer (1). No importa donde sea que este caiga, ya que el mismo aparecer en la


20

parte inferior de dicha ventana, en el rea de marcada como Non-visible components (componentes no visibles).

- Paso 4b. Hagamos clic ahora en el botn Upload File del cuadro Media (2). Dentro de la ventana que se nos presenta (3), buscaremos a la ubicacin del archivo de sonido que copiamos a la PC con anterioridad (meow.mp3); lo seleccionamos y lo subimos al proyecto dando clic en OK.

- Paso 4c. En el panel Propierties del componente Sound1, ver que la propiedad Sour-ce (fuente) muestra la leyenda None (Ninguno). Haga clic en la palabra None para cambiar la fuente del componente Sound1 a meow.mp3 (4).

Programacin con el Editor de bloques

Hasta ahora slo hemos realizado la organizacin de la pantalla y de los componentes de la App en el entorno Designer. Para empezar a programar el comportamiento de la App, es necesario ir al Editor de bloques (Blocks). Hagamos clic en el botn Blocks para ir al editor de bloques.

Una vez que tengamos el Editor de bloques en pantalla, continuaremos con los siguientes pasos, para programar la aplicacin.


21

Reproducir un Sonido

- Paso 1. Del lado izquierdo del Editor de bloques, en el panel Blocks, haremos clic en la opcin Button1, debajo del submen Screen1. Se nos presentar una lista con los blo-ques que tenemos disponible para el botn Button1. Arrastre y suelte el bloque when_Button1.Click en el rea de trabajo, dentro de la ventana Viewer.

Los bloques de color mostaza que tenemos dentro de este men, son lo que llamaremos bloques de control de eventos. Los bloques de control de eventos especifican cmo debe responder el dispositivo a ciertos eventos: un botn ha sido pulsado, el dispositivo est siendo sacudido, el usuario est arrastrando su dedo sobre la pantalla, etc. Podemos distinguir a los bloques de control de eventos porque comienzan con la palabra when (cuando), adems de por su color. En este caso, when_Button1.Click es un ejemplo de bloque de control de eventos.


22

- Paso 2. Hagamos clic ahora sobre la opcin Sound1. Seleccionamos el bloque call_Sound1.Play, y lo colocamos dentro de la seccin de tareas (do) del bloque when_Button1.Click. Los bloques se conectan entre s como las piezas de un rompe-cabezas, y se puede or el sonido de un clic cuando estos se conectan.

Los bloques de color prpura se denominan bloques de comandos. Estos bloques se colocan den-tro de la seccin de tareas de los bloques de control de eventos, de manera que cuando estos ltimos son ejecutados, lo que se ejecuta es la secuencia de comandos dentro de ellos. Un co-mando es un bloque que especifica una accin a realizar (por ejemplo, la reproduccin de sonido) cuando se activa un evento (al pulsar, por ejemplo, el botn Button1).

Al llegar a este punto, los bloques colocados deben tener este aspecto:


23

Ahora usted puede ver que el bloque de comandos se encuentra en el controlador de eventos. Este conjunto de bloques significa; "Cuando se hace clic en el botn Button1, se reproduce el so-nido Sound1".

Podemos decir que los bloques de control de eventos indican la categora de la accin a realizar (por ejemplo, el presionar un botn), mientras que los bloques de comando especifican el tipo de accin y sus detalles (por ejemplo, la reproduccin de sonido especfico).

Probemos la App! Al tener nuestro dispositivo Android enlazado a la PC (o al estar usando el emu-lador), veremos que dentro de mismo tenemos la pantalla con la imagen del gatito tal y como la armramos dentro del entorno de diseo. Vern que al tocar (o hacer click) sobre el gatito se es-cuchara un maullido. Felicitaciones, su primera aplicacin se est ejecutando!

Empaquetado de la aplicacin

Si durante el armado de la App mantuvieron enlazado un dispositivo Android (o el emulador) a la PC, habrn notado que la misma ha estado funcionando en tiempo real en dicho dispositivo, o sea, se ha ido armando dentro del mismo.

En cuanto desconectemos el dispositivo (o cerremos el emulador) de la PC, la aplicacin va a desa-parecer de dicho dispositivo. Podremos volver a enlazar con la PC todas las veces que queramos, de manera que la App vuelva a ejecutarse dentro del dispositivo. Pero lo deseamos es tener la App en ejecucin sin tener que estar conectado a App Inventor. Para esto necesitamos empaquetar la aplicacin, de manera que obtengamos un archivo "paquete", cuya extensin ser .apk.

Para realizar el empaquetado de la aplicacin, haremos clic en el men Build, dentro de la barra gris, en la parte superior de la pantalla. Dentro de este men tendremos dos opciones posibles,

App (provide QR code) y App (sabe to my computer):

1. App (provide QR code): Al cliquear esta opcin se nos presentar en pantalla un cdigo QR, con el cual vamos a poder instalar la App en aquellos dispositivos que cuenten cmara de fo-tos y conexin a internet. Para poder utilizar esta opcin, ser necesario contar con alguna aplicacin de escaneo de cdigos QR, tal como Googles o cualquier otra de las que se encuen-tran disponibles gratuitamente en Google Play.

Nota: el cdigo QR funcionar slo con aquellos dispositivos que tengan asociada la misma cuenta de Google que la utilizada dentro de App Inventor.


24

2. App (sabe to my computer): Con esta opcin vamos a poder descargar la App a la PC en la forma de un archivo apk, el cual podremos compartir con otras personas, sin necesidad de que estas usen App Inventor. Para esto, una vez que tengamos nuestro archivo .apk, de-bemos copiarlo dentro de la memoria SD del dispositivo en el cual deseamos instalar la App. Luego, utilizando alguna de las aplicaciones de exploracin archivos que podemos en en-contrar gratuitamente en Google Play, intentaremos abrir dicho archivo .apk. Nuestro dis-positivo reconocer automticamente que se trata de un archivo de instalacin Android, y nos propondr instalar entonces la App que este contiene. Tocamos en aceptar, y listo! Ya tendremos instalada la App para usarla en cualquier momento que queramos.

Ejercicio Desafo! Hacer que el gato ronronee

Vamos a modificar la App para hacer que el gato ronronee. El reto es hacer que cuando haga-mos clic sobre el botn que contiene la imagen, el telfono vibre al mismo tiempo que se reprodu-ce el sonido. Bloques a utilizar:

- when_Button1.Click - call_Sound1.Play - call_Sound1.Vibrate - Bloque numrico

Manos a la Obra!


25

Canvas

Introduciremos el componente Canvas (lienzo) para crear grficos simples en dos dimensiones. Vamos a construir una App que nos permitir dibujar en la pantalla del telfono con diferentes colores.

Objetivo

Vamos a construir una aplicacin que llamaremos PaintPot, en honor a uno de los primeros pro-gramas desarrollados en la dcada de 1970, el cual demostraba el gran potencial de las compu-tadoras personales. La aplicacin cumplir los siguientes requisitos:

Se seleccionar con el dedo el color con el que se va a dibujar. Al arrastrar el dedo por la pantalla, se dibujar una lnea de dicho color. Con un solo toque sobre la pantalla se dibujar un punto. Al tocar un botn en la parte inferior de la pantalla, est se limpiar. Incluir una imagen como fondo del dibujo.

Este mdulo presenta los siguientes conceptos de App Inventor:

El componente Canvas, utilizado para dibujar. Determinar la disposicin en pantalla utilizando el componente Arrangement. Bloque de control de eventos que utilizan argumentos. Variables.


26

Antes de Comenzar

Asegrese de que su PC y su dispositivo (o emulador) se encuentren enlazados. Inicie un nuevo proyecto con el nombre "PaintPot".

Ttulo de la pantalla

Empecemos por cambiar el ttulo de la pantalla. Para esto, debern seleccionar el componente Screen1 dentro del panel Components. Luego, dentro del panel Properties encontraremos la pro-piedad Title (ttulo). En ella debemos escribir el texto "PaintPot". Al apretar enter, veremos que el ttulo de la Screen1 cambiar, y que este cambio se ver automticamente reflejado en el disposi-tivo enlazado (o emulador).

Hay tres elementos dentro de App Inventor a los cuales se puede considerar como nombres, y es fcil confundirlos:

1. El nombre que elegimos para el proyecto en el cual hemos de trabajar (en este caso, Pai-ntPot). Este ser tambin el nombre de la App, en el caso de que se la empaquete en un archivo .apk para luego instalarla en un dispositivo.

2. El nombre "Screen1", que es el nombre del componente de pantalla, el cual puede verse en el panel Components del entorno de diseo. En la versin actual de App Inventor no es posible cambiar el nombre del primer componente de pantalla, pero s se pueden crear nuevas pantallas, a las cuales se les podr cambiar el nombre de componente.

3. La propiedad Title (ttulo) de la pantalla, que es lo que aparece en la barra de ttulo del dispositivo Android al ejecutar la App. Title es una propiedad del componente de pantalla Screen1. El texto por defecto de la propiedad Title ser "Screen1", que es el que se ha utilizado dentro HelloPurr. Sin embargo, este se puede modificar, como podemos observar al reescribirlo como PaintPot.

Reiterando, el nombre y el ttulo del componente Screen1 son inicialmente iguales, pero podremos cambiar el ttulo, modificando la propiedad Title.

Seleccionar los componentes

Para armar la App PaintPot , vamos a necesitar los siguientes componentes:

Cuatro botones: Tres botones para la seleccin del color; uno rojo, otro azul, y uno verde; y un botn adicional para limpiar o borrar el dibujo.

Un componente Canvas (lienzo), que proveer la superficie sobre la cual dibujar. Dentro de dicho componente colocaremos una imagen de fondo, la misma que usamos para HelloPurr. Esto se logra cargando dicha imagen dentro de la propiedad BackgroundImage del componente Canvas. Tambin es posible dibujar sobre un lienzo en blanco con slo dejar dicha propiedad como est por defecto.

Tambin vamos a utilizar un componente no visible: el componente HorizontalArrange-ment para hacer que los tres botones de color aparezcan alineados.


27

Eso hace seis componentes en total. Vamos a por ellos para construir la App.

Botones de Seleccin del Color

Vamos a colocar un botn, al cual le cambiaremos la propiedad Text por la palabra "Rojo", y seleccionaremos como color de fondo el rojo, seleccionando este color en la propiedad BackgroundColor.

Luego, haremos clic sobre Button1 dentro del panel Components. Ms abajo y dentro de este mismo panel encontraremos el botn Rename... (Renombrar). Con dicho botn va-mos a cambiar el nombre de dicho componente de "Button1" a "BotonRojo".

Del mismo modo, haremos dos botones ms; uno para el azul y otro para el verde, y los llamaremos BotonAzul " y "BotonVerde" respectivamente. Dichos botones aparecern alineados verticalmente debajo del botn rojo.

El entorno de diseo nos debera quedar de manera similar a como aparece a continuacin, con los nombres los componentes Button cambiados, en lugar de dejarlos con los nombres predeter-minados como hicimos con HelloPurr. El uso de nombres significativos hace que los proyectos sean ms legibles y fciles de entender a la hora de revisarlos.

Mejorar la Disposicin de los Componentes en Pantalla

Al momento debemos tener tres botones, alineados uno encima del otro. El siguiente paso es ha-cer que estos se alineen horizontalmente. Para ello, utilizaremos el componente HorizontalArran-gement (alineacin horizontal).


28

1. Dentro del panel Palette, en la categora Layout, encontraremos el componente Horizon-talArrangement. Colocaremos uno de estos debajo de los botones de color. Luego, en el panel Components cambiaremos su nombre de "HorizontalArrangement1" a "TresBoto-nes".

2. En el panel Properties, cambiaremos la propiedad Width del componente TresBotones por "Fill parent ...". Esto har que el mismo ocupe todo el ancho de la pantalla.

3. Moveremos ahora los tres botones dentro de dicho HorizontalArrangement, de manera que estos queden uno al lado del otro.

Sugerencia: La mover un componente dentro de la pantalla, veremos una lnea de color azul que nos indicar donde quedar situada la pieza al momento de soltarla. Utilice dicha gua para lograr el orden deseado.

Si miramos en la lista de componentes del proyecto, veremos que los tres botones aparecen ahora debajo del componente TresBotones, con un espacio de sangra. Esto quiere decir que los boto-nes son ahora subcomponentes de TresBotones. Observemos adems que todos los componen-tes aparecen a su vez sangrados debajo de Screen1, o sea, son subcomponentes de la pantalla.

En este punto, debemos ser capaces de ver los tres botones alineados en la pantalla del dispositivo (o emulador) enlazado, aunque no todo se ver exactamente como en el entorno de diseo. Por ejemplo, vemos un contorno alrededor del HorizontalArrangement dentro del entorno de diseo, no as en el dispositivo.

En general, los distintos tipos de Arrangements se utilizan para crear diseos sencillos. Se pue-den crear diseos ms complejos anidando varios componentes de este tipo dentro de una misma pantalla.


29

El Canvas y el Botn Borrar

Los dos ltimos componentes son el Canvas y el Botn Borrar.

1. Coloquemos un componente Canvas dentro de la ventana Viewer. El mismo se encuentra en la columna Palette, dentro de la subcategora Drawing and Animation. Luego, cam-biemos su nombre a "CanvasDeDibujo". Luego, estableceremos su propiedad Width como "Fill parent", mientras que su propiedad Height la estableceremos en 300 pxeles.

2. Podremos agregar a dicho Canvas una imagen de fondo. Para esto, haga clic en el campo que contiene el texto "None ..." junto a BackgroundImage dentro del panel Properties de dicho Canvas. Podemos utilizar por ejemplo, el mismo archivo kitty.png que usramos pa-ra para la App HelloKitty, as como tambin cualquier otra imagen de la que dispongan.

Se puede utilizar cualquier imagen que se desee, pero para conseguir los mejores resul-tados, el tamao de la imagen debe ser cercano al tamao del Canvas que se mostrar dentro del dispositivo (en pxeles). Adems, cuanto mayor sea el tamao de la imagen, mayor ser el tiempo que tardar en cargarse, y podran exceder la capacidad de memoria que el telfono le asigna a las aplicaciones.

3. Coloquemos el ltimo botn en la pantalla debajo del Canvas. Cambiaremos su nombre a "BotonBorrar", y dentro del panel Properties, su atributo Text por el texto "Borrar".

Ya hemos completado los pasos para configurar el aspecto de la App. As es como debera verse dentro del entorno Designer.


30

A continuacin, vamos a definir cul ser el comportamiento de la App.

Determinar el Comportamiento de la Aplicacin

Hagamos clic en el botn de Blocks para cambiar al Editor de Bloques. Primero que aremos ser configurar los botones que cambian el color con el que se pinta. Posteriormente, agregaremos bloques para definir lo que sucede cuando alguien se toca o se desliza el dedo sobre la pantalla.

Uso de los Controladores de Evento para los Botones

En el Editor de bloques:

1. Dentro de la columna Blocks, cliqueamos sobre BotonRojo y arrastramos el bloque when_BotonRojo.Click.

2. Dentro de la columna Blocks, cliqueamos ahora sobre CanvasDeDibujo. Seleccionamos

el bloque set_CanvasDeDibujo.PaintColor_to y lo colocamos en la seccin de tareas de when_BotonRojo.Click .

3. Dentro de la columna Blocks, cliqueamos sobre el submen Colors, seleccionamos el blo-

que de color rojo y lo encastramos al bloque set_CanvasDeDibujo.PaintColor_to

4. Repetiremos los pasos del 1 al 3 para hacer lo propio con los botones tanto Azul como Verde.

5. El ltimo botn a configurar es el botn Borrar. Dentro de la columna Blocks, cliqueamos

sobre BotonBorrar y seleccionamos el bloque when_BotonBorrar.Click. Luego cliquea-mos sobre CanvasDeDibujo, seleccionamos el bloque call_CanvasDeDibujo.Clear y lo colocamos en la seccin de tareas de when_BotonRojo.Click.

Los bloques de los botones deberan resultar similares a esto:


31

Uso de los Bloques de Control para el Touch

Vamos con el siguiente paso: dibujar dentro del Canvas. Vamos a organizar las cosas para que al tocar el Canvas, se obtenga un punto en el lugar donde se toca, pero si arrastra el dedo lentamen-te sobre este, se dibuja una lnea.

Dentro del Editor de bloques, en la columna Blocks, cliqueamos sobre CanvasDeDibujo y seleccionamos el bloque when.CanvasDeDibujo.Touched. Tan pronto como colocamos di-cho bloque en la ventana Viewer podremos observar tres nombres de argumentos (resal-tados en naranja), ubicados en la parte superior del bloque; estos son X, Y, y touchedSpri-te. A estos argumentos tambin se los conoce como variables locales, y se los pueden uti-lizar mediante cualquiera de los bloques para variables ya vistos. Tambin podremos ac-ceder a estas variables cliqueando sobre el nombre que aparece resaltado en naranja y se-leccionando el bloque correcto en el men desplegable.

Como hemos visto anteriormente, el uso de los bloques de control eventos tales como when.BotonRojo.Click es bastante simple, porque no hace falta saber nada ms sobre el Click aparte del hecho de que sucedi.

Otros controladores de eventos, tales como when.CanvasDeDibujo.Touched necesitan informa-cin sobre el evento. En App Inventor, esta informacin se expresa como el valor de los argumen-tos relacionados con el bloque de control de eventos. Para el evento when.CanvasDeDibujo.Touched, los dos primeros argumentos representan la coordenadas X e Y de donde ocurri el contacto. Dejaremos el uso de touchedSprite para otra ocacin.

Cuando este evento tctil se produzca, har que dentro del Canvas se dibuje un pequeo crculo en el punto de coordenadas (x, y). Seleccionamos el bloque call.CanvasDeDibujo.DrawCircle y colocarlo en la seccin de tareas del bloque when.CanvasDeDibujo.Touched.

Del lado derecho del bloque call.CanvasDeDibujo.DrawCircle encontraremos tres encastres en los que se debe especificar los valores para las coordenadas X e Y en los que se debe dibujar el crculo, y el valor de r, que es el radio del crculo. Para X e Y, utilizaremos los valores de los argumentos que suministrados por el bloque when.CanvasDeDibujo.Touched, para esto:

1. Haremos clic sobre la variable local X (resaltada en color naranja). Dentro del men que se despliega encontraremos el bloque get.x; lo seleccionamos y colocamos en el encastre co-rrespondiente a x en el bloque call.CanvasDeDibujo.DrawCircle.


32

2. Haremos lo mismo con la variable local Y. 3. Tambin tendremos que especificar el radio del crculo a dibujar. Cinco (pxeles) es un

buen valor para esta App. Haga clic en un rea vaca de la ventana Viewer, escriba el n-mero 5 y presione enter; esto crear un bloque de numrico con un valor igual a 5. Escribir en el rea en blanco de la pantalla se llama typeblocking y resulta muy til como atajo. Es-to puede hacerse con cualquier bloque, no slo nmeros. Coloquemos el bloque numrico con el valor 5 en el encastre r.

As es como debera quedar el bloque when.CanvasDeDibujo.Touched:

En el caso de que estemos trabajando con un dispositivo android enlazado, podremos probar lo realizado hasta ahora en el mismo. Toque alguno de los botones de color. Ahora, toque dentro del Canvas; deber observarse una mancha en cada lugar donde toca. Al tocar el botn Borrar, debe-ra limpiarse el dibujo y quedar como al principio.

-------------------------------------------------------------------------------------------------------------

Dibujar una Lnea Cuando se Arrastra el Dedo

Por ltimo, vamos a agregar el bloque de control para que al deslizar el dedo, se dibuje una lnea. Aqu est la diferencia entre un toque y un arrastre:

Un toque es cuando ponemos el dedo sobre la pantalla y lo levantamos sin moverlo. Un arrastre es cuando ponemos el dedo sobre la pantalla y lo movemos manteniendo el

contacto.

Al arrastrar el dedo por la pantalla, describiendo por ejemplo una lnea curva, lo que sucede en realidad es que se irn dibujando cientos de pequeas lneas rectas entre cada punto del recorri-do: cada vez que se mueve el dedo, aunque sea por muy poco, se extender la lnea graficada des-de la ltima posicin que ocupara su dedo hasta la posicin inmediatamente posterior.

Para cumplir con la tarea, vamos a utilizar un bloque de control llamado Dragged (arrastrado), el cual se encuentra entre los bloque que operan dentro del Canvas. Este cuenta con 6 argumentos. Se trata de tres pares de coordenadas X e Y, las cuales describen:

La posicin del dedo donde comenz el arrastre (startX y startY).


33

La posicin actual del dedo (currentX y currentY). La posicin del dedo inmediatamente anterior a la actual (prevX y prevY).

Vemos tambin que existe un argumento llamado draggedSprite, que no vamos a utilizar por el momento.

Vamos a colocar ahora los bloques que necesitamos para lograr dibujar una lnea:

1. Seleccionamos el bloque when.CanvasDeDibujo.Dragged y lo colocamos en el rea de trabajo. Para esto, vamos a la columna Blocks, cliqueamos sobre CanvasDeDibujo, y arras-tramos dicho bloque (el cual aparece al principio de la lista) hacia la ventana Viewer.

2. En la misma ubicacin de la columna Blocks vamos a encontrar el bloque call.CanvasDeDibujo.DrawLine. Lo seleccionamos y colocamos dentro del rea de tareas del bloque when.CanvasDeDibujo.Dragged.

3. Por ltimo, completamos el bloque call.CanvasDeDibujo.DrawLine. Para esto, cliqueamos sobre el argumento prevX, seleccionamos el bloque get.prevX y lo colocamos en el encas-tre x1. Haremos lo mismo con los otros encastres: get.prevY para y1, get.currentX para x2 y get.currentY para y2.

Aqu est el resultado:

Pruebe ahora la App dentro del dispositivo android (o emulador) enlazado: arrastre el dedo por la pantalla para dibujar lneas y curvas. Toque la pantalla para hacer puntos. Utilice el botn Limpiar para limpiar la pantalla.

FIN

UTN.ba - Introducción a App Inventor

Documents

Transcript of UTN.ba - Introducción a App Inventor