Tutorial Appinventor 5pd3q

Presentación http://kio4.com/appinventor/index.htm#indice

- ¿Qué es Android? Android es un sistema operativo gratuito que utiliza muchos teléfonos móviles actuales (teléfonos inteligentes = smartphone), está basado en LINUX. Android pertenece a Google. Cada cierto tiempo aparecen nuevas versiones: 1.5 (Cupcake), 1.6 (Donut), 2.0 (Eclair), 2.2 (Froyo), 2.3 (Gingerbread), 3.2 (Honeycomb), 4.0 (Ice Cream Sandwich), 4.1 (Jelly Bean), 4.2 Jelly Bean (Gummy Bear), 4.3 (Jelly Bean), 4.4 (KitKat), 4.5 (kit kat), 5.0 (Lollipop) ... También existen otros sistemas operativos para teléfonos como el iOS de Apple (20 %) y Windows Phone de Microsoft (2 %), pero en España se está imponiendo el Android (78 %). (Ver gráfico estadístico de como en España se está imponiendo el Android) El Android lo podemos programar fácilmente y realizar programas de fórmulas matemáticas, juegos, ubicación en los mapas de Google, mover un robot mediante Bluetooth, contestación automática de SMS,...

Saber más de Android en la Wikipedia.

- ¿Para aprender a programar el Android necesito tener un teléfono móvil con Android? No. Solo necesitas un ordenador y conexión a Internet. En el ordenador puedes hacer los programas y probarlos en un emulador instalado en el mismo ordenador. Si tienes un teléfono móvil o tablet con Android puedes pasar los programas realizados al móvil para ver cómo funcionan y utilizarlos.

- ¿Qué programa se utiliza para programar el Android? Indico tres formas muy utilizadas de programación: 1.- Con Android SDK y Eclipse . Se realizan los programas escribiendo códigos en Java. Es la forma que utilizan los buenos programadores. Puedes ver ejemplos en este vídeo. 2.- Mediante una aplicación de pago (40 € aproximadamente) llamada (B4A) BASIC4Android, para realizar programas de manera parecida a como se hace con Visual Basic IMPORTANTE: si te interesa esto de hacer programas sencillos para Android consulta este tutorial de aprendizaje e iniciación que he realizado: ¡Error! Referencia de hipervínculo no válida. 3.- Mediante App inventor. Es una forma intuitiva de hacer programas situando convenientemente las instrucciones como si fueran piezas de un puzzle. Utilizaremos App inventor para realizar nuestros programas. Lo que sí necesitas es estar conectado a Internet para poder utilizar el App inventor. - App Inventor apareció el 12 de julio de 2010, y se abrió a todo el público en 15 de diciembre de 2010. - Lo desarrollaron entre Hal Abelson de MIT y los ingenieros de Google Ellen Spertus y Liz Looney, junto con David Wolber profesor de USFCA y divulgador de la aplicación. - A principo de agosto de 2011 Google anunció que ya no

mantendría esta aplicación, pero que la haría código libre destinado a la educación. - Una semana después el Instituto Tecnológico de Massachusetts (MIT), una institución de educación superior privada situada en Cambridge, Massachusetts (EE.UU.), anunció que se haría cargo del proyecto. Ver web. - El 31 de dicembre de 2011 App Inventor de Google dejó de funcionar. - El 4 de marzo de 2012, el Instituto Tecnológico de Massachusetts (MIT) volvió a poner el proyecto en Internet. - En diciembre de 2013, MIT saca AI 2, una nueva versión de App Inventor: http://ai2.appinventor.mit.edu - En noviembre de 2014 sale la opción de idioma, con lo cual podemos ver la mayoría de los elementos en español. - El 15 de julio de 2015 desaparece App inventor (el antiguo). Existe una aplicación web para pasar los proyectos .zip del App inventor al .aia del App inventor 2. Aplicación online.

- ¿Cómo es el código? - En forma de Bloques...

Los programas se realizan mediante bloques, que son una especie de piezas de puzzle. No tiene programa fuente escrito en texto.

- ¿De dónde me bajo el App inventor? El App inventor no es un programa que te tengas que bajar al ordenador. Funciona en cloud computing, el programa funciona mediante la conexión a Internet, tu trabajas con el programa conectado directamente al servidor de App inventor. Es como una página web y en ella realizas las operaciones. Solo necesitas una

cuenta de gmail. NOTA: hay versiones para poderlas instalar en el ordenador y trabajar sin estar conectado a internet (offline).

Para que funcione necesitas tener instalado JAVA. También necesitas una cuenta de Google Gmail. http://appinventor.googlelabs.com

_____________________ ____

- ¿En qué dirección entro para programar? En estos momentos, si vas a estudiar App inventor 2, entra en esta dirección y te autentifica con tu dirección de correo de gmail...

http://ai2.appinventor. mit.edu App inventor 2 en español http://beta.appinventor.mit.edu (versión antigua)

_____________________ ____ Interface - Podemos trabajar en español, en inglés, francés, italiano...

App inventor 2 en español offline - Hemos visto que para trabajar con AI2 debemos estar conectados a Internet, ¿se podría trabajar de

alguna manera offline, es decir sin estar conectado? - Pués sí, para ello un equipo distinto al MIT ha creado un AI2 Ultimate con Personal Server. Esto instala el AI2 en nuestro ordenador, utilizando JAVA. Luego en un navegador escribimos http://localhost:8888 y podemos trabajar directamente con nuestro ordenador sin estar conectado a Internet. La versión ai2u 2.3 ya viene en español.

- App Inventor 2 Ultimate con Personal Server. Instalar estos paquete en nuestro ordenador para poder trabajar con A.I. offline, es decir sin estar conectado a Internet. Dispone una nueva versión de AI Starter. Más detalles.

Bajar de aquí. Arrancamos el Server, vamos a un navegador y escribimos http://localhost:8888

Atención, con esta forma de instalación lo que estamos haciendo es creando un servidor web

local con App inventor, de manera que los demás ordenadores de tu red local puedes escribir en un navegador tu ip local, por ejemplo 192.168.1.2:8888 y conectarán con tu servidor web con App Inventor, ponen cualquier nombre [email protected] y pueden entrar. Estúdialo. Tutorial. Ayuda. - También existe la opción Portable, sin necesidad de instalación. - Hay otra versión offline llamada AILiveComplete (instalación) - En estas fechas App Inventor 2 online, solo permite códigos de hasta 5 MB, en cambio si utilizar los método offline los puede hacer de mucho mayor tamaño.

__________________________________________ __________________ __________________________________________ __________________ __________________________________________ __________________ __________________________________________ __________________ __________________________________________ __________________

EMPEZAMOS AQUÍ... _________________

1.- Nuestro primer proyecto. Teorema de Pitágoras. p1_pitagora s.aia

Baja este archivo a tu ordenador y luego súbelo a App inventor (Proyectos / Importar proyecto)

- Vamos a crear un proyecto. En nuestro caso va a ser el teorema de Pitágoras. Introducimos los dos catetos, pulsamos un botón y obtendremos la hipotenusa. Nota: cateto viene del latín cathetus, y este del griego ???et??, significa: perpendicular.

- Pulsamos Proyectos / Comenzar un proyecto nuevo... Le ponemos como nombre: pitagoras

_________________ Diseñador

Screen1 es la pantalla de nuestro móvil. En Paleta están los elementos o componentes que podemos poner en la pantalla de nuestro móvil. Botones, casilleros, imagenes, etiquetas,... Vamos a arrastrar desde la Paleta a la pantalla Screen1: Una Etiqueta (Etiqueta1) Un Campo de texto (CampoDeTexto1) NOTA: en sus Propiedades marcamos "SoloNúmeros". Borramos información de Pista Otra Etiqueta (Etiqueta2) Otro Campo de texto (CampoDeTexto2) NOTA: en sus Propiedades marcamos "SoloNúmeros". Borramos información de Pista Un Botón (Botón1) Otra Etiqueta (Etiqueta3)

Fíjate a la derecha están las Propiedades de cada elemento... Si marcas Etiqueta1, en la derecha puedes ponerla en Negrita, cambiar el Tamaño de letra, el texto que quieres que aparezca en esa etiqueta (Texto) El Botón1, lo puedes poner que su ancho coincida con la pantalla. Ancho: Ajustar al contenedor Si pulsamos sobre Screen1, mediante las Propiedades podemos cambiar el Título de la pantalla, le pondremos Pitágoras. Pongamos también en Screen1, OrientaciónDeLaPantalla en Vertical, para mantener esta posición.

Cada cierto tiempo pulsamos en Proyecto / Guardar proyecto, para guardar los cambios que vayas realizando... (Aunque el realidad el proyecto se guarda automáticamente, no hace falta guardarlo "manualmente".)

Diseñador y Bloques. Para Diseñar nuestros controles pulsamos Diseñador. Para poner los Bloques del código pulsamos Bloques.

_________________ Bloques Pulsamos en Bloques para poner los Boques de códigos...

En la parte izquierda tenemos los Bloques para poner códigos y los controles que hemos puesto en la pantalla Screen1. Vamos a utilizar 3 variables numéricas: un cateto (x), otro cateto (y), la hipotenusa (z). Las variables que vayamos a utilizar las declaramos previamente. - Se puede utilizar copiar y pegar bloques (Ctrl-C y Ctrl V) y luego adaptar valores. Mediante el bloque Variables creamos las variables x, y, z. Mediante el bloque Matemáticas disponemos que sean variables numéricas iniciadas a 0.

Queremos que cuando hagamos Click en el Botón1, se realice la fórmula del teorema de Pitágoras. (cuando Botón1 Click ejecutar) En Botón1 sacamos Botón1_Click Lo primero será que las variables x, y tomen el valor de los CampoDeTexto1 y CampoDeTexto2.

Luego la variable z obtendrá el valor obtenido en el cálculo. Necesitamos operaciones como raíz cuadrada, cuadrado (^), suma... obtenemos estos bloques pulsando el botón Matemáticas.

Una vez que tenemos el resultado en la variable z, lo ponemos en la etiqueta Etiqueta3. Presentamos un texto unido con el valor z.

Dentro de Botón1.Click - Tomamos el contenido del CampoDeTexto1.Text y lo asignamos a la variable x - Tomamos el contenido del CampoDeTexto2.Text y lo asignamos a la variable y - Hacemos la raiz cuadrada de x elevado a 2 más y elevado a dos y ese resultado lo asignamos a z - Ponemos en el Etiqueta3.Texto la unión de "La hiponenusa vale..." y el valor de z. Las piezas de las operaciones matemáticas las tomamos de Integrados. Los CampoDeTexto, Etiqueta, Botón y las variables establecidas las tomamos de Screen1

IMPORTANTE: en AI2 algunas funciones matemáticas están un poco escondidas, el logaritmo y e^, están desplegando en el bloque neg El acos, asen, atan... se encuentran pulsando en la flecha del bloque.

- Tened cuidado siempre con el separador decimal, a veces es el punto y otras veces la coma. En el código siempre es el punto: pi = 3.1416, pero en los CamposDeTexto unas veces es el punto y otra la coma, probad.

__________________________________________ _____________ __________________________________________ _____________ __________________________________________ _____________ __________________________________________ _____________ INSTALACIÓN EN EL MÓVIL para prueba y depuración (debug). Ya lo tenemos, vamos a ver si funciona. Hay 3 formas de comprobarlo:

_______________________________________ PRIMERA FORMA: 1.- Pasar el programa a tu móvil mediante WiFi y la aplicación MIT AI2 Companion App. (Esta es la manera aconsejable). - Conecta tu móvil a la misma red WiFi que tenga el ordenador donde estás trabajando. - Instala en tu móvil MIT AI2 Companion: http://appinventor.mit.edu/explore/ai2/setup-device-wifi

- Arranca el programa MIT AI2 Companion que has instalado en tu móvil. - En el ordenador, pulsa en Conectar y luego en AI Companion

Te saldrá un QR y un código.

- En tu móvil saldrá esta pantalla. Escribe el código anterior o bien escanea el QR. El programa pasará a tu móvil. - El programa quedará conectado hasta que los desconectemos (Conectar / Reinciar Conexión) - Si cambiamos algo en el Designer o en los Bloques inmediatamen te pasará al programa del móvil. - De esta manera podemos depurar (debug) los programas que realicemos hasta que funcionen correctamente.

_______________________________________ SEGUNDA FORMA: 2.- Instalamos un EMULADOR en nuestro ordenador con Windows (este emulador también vale para LINUX aunque es más difícil de instalar), de esta manera podemos hacer las pruebas de funcionamiento en el emulador del ordenador y cuando funcione correctamente lo pasaremos al móvil. En este caso no nos hace falta móvil ni Wifi para probar nuestra aplicación. (http://explore.appinventor.mit.edu/ai2/setup-emulator )

- Instalamos en nuestro ordenador con Windows el App Inventor y aiStarter. http://explore.appinventor.mit.edu/ai2/windows (100 MB) (También se puede instalar este programa en LINUX, pero es algo más complicado) - Arranca en tu ordenador el aiStarter.

- En nuestro programa pulsamos en Conectar / Emulador Al cabo de un rato saldrá en nuestro Windows un emulador de Android. Igual que en los casos anteriores, si cambiamos algo del Diseñador o de los Bloques, ese cambio pasará al Emulador.

NOTA: si quieres que el emulador se ponga de forma horizontal, pulsa la combinación de teclas Ctrl F11 NOTA: el Emulador es lento y necesita un buen ordenador para que funcione bien.

___________________________________ TERCERA FORMA:

3.- En caso que no tengas WiFi, conectaremos nuestro programa desde el ordenador al móvil mediante cable USB. (http://appinventor.mit.edu/explore/ai2/setup-device-usb.html) - Instalamos en nuestro ordenador con Windows el App Inventor y aiStarter. http://explore.appinventor.mit.edu/ai2/windows (100 MB) (También se puede instalar este programa en LINUX, pero es algo más complicado) - Instala en tu móvil MIT AI2 Companion: http://appinventor.mit.edu/explore/ai2/setup-device-wifi - Arranca en tu ordenador el aiStarter y conecta por USB el ordenador al móvil.

- Arranca el MIT A2 Companion en el móvil.

- Probar si están funcionando la conexión: http://appinventor.mit.edu/test/ - Ve al programa que estás realizando y pulsa Connect / USB Tu aplicación pasará al móvil y entrará en funcionamiento.

El programa pasará a tu móvil. - El programa quedará conectado hasta que los desconectemos (Connect / Reset Connection) - Si cambiamos algo en el Designer o en los Bloques inmediatamente pasará al programa del móvil. - De esta manera podemos depurar (debug) los programas que realicemos hasta que funcionen correctamente.

___________________________________ ___________________________________ ___________________________________ ___________________________________

Instalar el programa en nuestro móvil para uso de (compilación) - Para cargar los programas ya compilados en tu móvil, es conveniente que éste tenga un escaneador de Código QR, si tu móvil no lo tiene baja e instala éste por ejemplo: ZXing BarCode Scanner

Hemos visto 3 formas de depurar (debug) el programa. Si ya tenemos nuestro programa terminado lo podemos pasar al ordenador y de éste al móvil. Una cosa es depurar (debug) que lo hacemos mediante Conectar y que realizamos el proceso de creación, corrección de errores y pruebas de la aplicación.

Cuando ya tenemos la aplicación totalmente terminada para su uso y distribución, lo que hacemos en compilarla, esto es Generar un archivo de tipo pitagoras.apk que contiene la aplicación preparada para su instalación. En este caso copiaremos en nuestro ordenador el archivo pitagoras.apk y desde nuestro ordenador por USB lo podemos pasar al móvil. Otra forma sería obtener en nuestro ordenador el código QR de nuestro programa, para luego escaneando el QR con el móvil pasarlo a éste. Esta es la forma aconsejable. Estas dos formas la podemos realizar mediante... Generar

Así quedaría el programa depurado, terminado y preparado para la instalación en cualquier móvil...

p1_pitagoras.apk Lo puedes instalar en tu móvil escaneando este código QR:

¿Cómo he creado este código QR? He pulsado en App (guarda archivo .apk en mi ordenador)

Luego el archivo obtenido: p1_pitagoras.apk lo he subido a mi servidor web, concretamente a: http://kio4.com/appinventor/aplicaciones/p1_pitagoras.apk He entrado en esta web: http://goqr.me/ He escrito en el casillero la dirección donde se encuentra mi archivo: http://kio4.com/appinventor/aplicaciones/p1_pitagoras.ap k Ha creado un código QR y lo he bajado ()

___________________________________ Guardar el programa

- Como acabamos de ver, podemos crear nuestro programa y obtendremos un archivo de la forma pitagoras.apk que podemos guardar en nuestro ordenador y instalar en el móvil para su funcionamiento. El archivo pitagoras.apk se denomina programa compilado, es decir preparado para instalarse y funcionar. - Pero si queremos guardar el programa fuente para más tarde mejorarlo o para compartirlo, debemos pulsar en... Mis Proyectos / Exportar a mi ordenador el proyecto (.aia) seleccionado. Obtendremos el archivo pitagoras.aia que podemos compartir. El archivo pitagoras.aia sería el código fuente, es decir podemos ver de la manera que está realizado.

___________________________________ __ ___________________________________ __

___________________________________ __ ___________________________________ __ 2.- MEJORAS. - Colores, Centrado, Imagen p1_pitagoras2 (varias pantallas - Screen) Vamos a continuar con nuestro proyecto de pitagoras mejorándolo. Primero vamos a guardar nuestro proyecto con otro nombre para tener una copia de seguridad, para ello vamos a Mis Proyectos / Guardar proyecto como... y le ponemos de nombre pitagoras2

Continuamos con esta copia llamada pitagoras2. - Mediante las Propiedades cámbiale el color de fondo y de letras de las Etiquetas.

- En los CamposDeTexto, borra el texto de la Pista, este texto aparece como fondo de casillero. BÓRRALO. - En los CamposDeTexto, marca en Solo números, para que salga el teclado numerico. - Vamos a poner una imagen en nuestro proyecto. Baja a tu ordenador esta imagen.

Subimos esta imagen a nuestro Proyecto mediante... Medios / Subir archivo...

Luego sacamos a la pantalla de nuestra aplicación... Medios / SelectorDeImagen en su Propiedad Imagen ponemos la imagen de pitagoras.gif que acabamos de subir. Quitamos el texto de la Imagen. Para centrar la imagen vamos a Disposición y sacamos a la pantalla un DisposiciónHortizontal. Luego introducimos la imagen del SelectorDeImagen en DisposiciónHorizontal. Ponemos DisposiciónHorizontal que ocupe todo el Ancho de su contenedor. Lo centramos.

Podemos centrar los controles horizontalmente, verticalmente o en tabla, de tal manera que podemos poner varios controles en cada una de esa disposición.

__________________________________________ _

3.- Varias pantallas p1_pitagoras2 (varias pantallas - Screen) Continuamos con nuestro proyecto de Pitágoras, es decir el mismo pitagoras2.aia que estamos realizando.

Vamos a crear otro formulario en otra pantalla, en este caso vamos a realizar el cálculo del área del triángulo. - Añadimos una nueva pantalla: Añadir ventana - Le dejamos de nombre Screen2 - Mediante el Diseño situamos una Etiqueta1, un CampoDeTexto1, otra Etiqueta2, otro CampoDeTexto2, un Botón y otra Etiqueta3 NOTA: en las Propiedades de los CampoDeTexto marcamos "SoloNúmeros". Borramos información de Pista

- Mediante Bloques creamos esta disposición:

- Pasamos el programa al emulador

- Pantalla de Menú Menú vamos crear otra ventana, en este caso Screen3, con un menú. Agregamos un VisorDeLista1. Podemos agregar elementos al VisorDeLista1 mediante la Propiedad ElementosDesdeCadena, separando los nombre de los elementos mediante coma. Ponemos: Uno,Dos,Tres

Vamos a Bloques

Aunque anteriormente en el Diseño hemos puesto varios elementos en el VisorDeLista1, vamos a poner otros elementos pero mediante código. Para ello utilizo dos tablas, en una figura el nombre de dos elementos del VisorDeLista1 (Pitágoras, Área del triángulo)

en otra tabla establezco el nombre de dos pantallas (Screen1 y Screen2). Cuando se muestra la pantalla Screen3, se carga en el VisorDeLista1 los elementos de la primera tabla. Cuando pulsamos en un elemento, tomamos el índice de ese elemento y mostramos la pantalla referente a ese elemento según en emparejamiento en las dos tablas. Para que una vez en una de las pantallas podamos volver el menú, vamos a crear en la Screen1 y Screen2 sendos botones Botón2_Click, de manera que cuando los pulsemos se vuelva a la pantalla Screen3.

Podemos hacer pruebas mediante Conectar, pero a veces no funciona de esta manera en los emuladores, se aconseja compilar el programa mediante Generar y pasarlo al móvil compilado. Se puede hacer escaneando el QR obtenido.

__________________________________________ _

4.- Copiar y pegar bloques entre dos pantallas. Mochila. Backpack. - En julio de 2015 sale la posibilidad de copiar y pegar bloques entre pantallas y entre proyectos. - En la parte de bloques aparece una mochila "Backpack". - Pulsando con el botón derecho del ratón sobre un bloque saldrá la posibilidad de Añadir bloques a la mochila. - Una vez los bloques en la mochila, podemos ir a otra pantalla y sacarlos de la mochila.

- También se puede utilizar para copiar y pegar bloques de distintos proyectos. - Backpack.

_______________________________ ____ _______________________________ _______________ Resumen de instalación. - Podemos trabajar online y offline. Online, con conexión a Internet es la forma "oficial", nos creamos una cuenta de correo, por ejemplo de gmail y creamos el código mediante la conexión a un sitio web. Podremos ver el resultado de nuestro código en un emulador instalado en el ordenador, en el móvil/tablet mediante Wifi o en el móvil/tablet mediante cable USB.

Para entrar en esa web vamos a... http://ai2.appinventor.mit.edu/ Offline, se trata de instalar en nuestro ordenador el "programa" App Inventor 2 y trabajar con él sin necesidad de estar conectado a Internet. Podremos ver el resultado de nuestro código en un emulador instalado en el ordenador, en el móvil/tablet mediante Wifi o en el móvil/tablet mediante cable USB. Para bajar el "programa" App Inventor 2 vamos a... http://sourceforge.net/projects/ai2u/files/ - Hay otra versión offline llamada AiLiveComplete!: http://sourceforge.net/projects/ailivecomplete/files/ https://amerkashi.wordpress.com/page/3/ Pulsamos en WinStartBuildServer.cmd y luego escribimos en un navegador localhost:8888 Portable, lo ponemos en un directorio o en un USB y trabajamos sin necesidad de tenerlo instalado. _________________________________ - Ejecución de nuestro código. Tanto si estamos trabajando Offline como Online, hay varias formas de comprobar cómo está funcionando nuestro código: - Instalando en el móvil/tablet una aplicación bajada de la Play de Google, llamada: MIT AI2 Companion, luego necesitamos que la red donde trabajamos tenga Wifi. Es decir, que el móvil tenga Wifi (siempre lo tiene) y nuestro ordenador esté conectado a la misma red Wifi. (NO es necesario que el ordenador esté conectado a Wifi, puede estar conectado con cable a la red, lo que quiero decir es que tanto el móvil como el ordenador estén conectados a la misma red y que ésta tenga Wifi). Pulsaremos en App Inventor AI Companion. Nos saldrá en la pantalla del ordenador un código QR. Arrancamos MIT AI2 en nuestro móvil y escaneamos ese QR para cargar la aplicación que hemos realizado. - Instalando en nuestro ordenador un Emulador, es decir una especie de teléfono móvil que actúe como nuestro móvil. Para ello bajamos: http://explore.appinventor.mit.edu/ai2/windows. Lo instalamos en Windows, nos saldrá un icono Ai2 Starter. Pulsamos ese icono para arrancar este servidor. Luego en App Inventor pulsamos en: Emulador.

- Conectando el móvil al ordenador por cable USB. Instalamos en nuestro ordenador el driver correspondiente a nuestro modelo de móvil. Después instalamos http://appinventor.mit.edu/explore/ai2/setupdevice-usb.html Arrancamos el Ai2 Starter. Luego en App Inventor pulsamos en: USB

_______________________________ Configuración del Router - Si tenemos un Router doméstico en nuestro hogar, no es necesario configurarle nada. - Si estamos en un instituto o centro de trabajo:

Podemos conectar un Router con WiFi a una de los puertos del Switch, par a crearnos una extensión de la red. Observa que para que este Router esté en la misma red, se debe conectar a uno de sus puertos locales LAN (color amarillo en la imagen), NO al conector de Modem WAN (color azul en la imagen). Además debemos entrar en la configuració n del Router, ponerle una contraseña y DESHABI

LITAR su DH. _________ _______ Si dispones de Andared , puedes configurar que tanto el portátil como el móvil funcionen en esta red.

_______________________________ ___

Proyecto Integrado (Introducción a la Programación de Móviles) Entrega Práctica 7:Galeria de imágenes La práctica consiste en hacer una aplicación donde el tiene una galería de imágenes. Cuando pulses en la imagen aparecerá una pantalla con la imagen d

e la foto, un botón con un enlace para la página de la wikipedia y una imagen para volver a la pantalla principal. La práctica tiene un apartado para subir nota donde se perfeccionará

1. Abre el programa con tu cuenta de google y asocia tu móvil android 2. Utiliza un programa de retoque fotográfico para reducir las 4 fotos principales a 100px de ancho.El alto se ajustará automáticamente con respecto al nuevo ancho. 3. Utiliza el elemento CANVAS(Drawing and Animation) para contener a las 5 imágenes. Agranda el elemento Canvas en ancho: Fill parent y altura: ocupe casi toda la ventana 4. Coloca las imágenes utilizando el elemento ImageSprites (Drawing and Animation).Sólamente se podrán pulsar las 4 fotos pequeñas (100px de ancho).

5. Añade 4 screen (pantallas) nuevas para cada una de las 4 imágenes. Ponle un nombre coherente con las fotos 6. Dentro dentro del menú de bloques tendrás que indicar a que pantalla irá cuando se pulse cada una de las 4 imágenes. Nota: open another screenName (control).

1. Crea 4 pantallas diferentes con la imagen grande, un botón para enlazar con una página web (Ej la página de wikipedia sobre el fruto seco en concreto) y la imagen para volver a la pantalla principal. Para po

der entrar en la página web se necesita un elemento(connectivity-ActivityStarter). La imagen de volver atrás solamente tendrá que cerrar la ventana actual (close screen) y aparecerá la principal. 2. El elemento ActivityStarter tenemos que configurarlo para que abra páginas web de la siguiente forma o 

Action: android.intent.action.VIEW

  

DataUri: http://paginaweb

 

3. En el editor de bloques de cada pantalla quedaría de la siguiente forma

Cuando se pulsa el botón ejecutará la función del activystarter y abrirá una página web. El botón de volver para atrás cerrara la página actual y se quedará la principal en pantalla.

http://appinventor.mit.edu/explore/ai2/molemash-2.html Mole Mash 2 with Sprite Layering for App Inventor 2 What You're Building

This tutorial shows you how to build a game similar to the Whac-A-MoleTM arcade game. Specifically, your goal is to tap a mole that randomly pops out of one of five fixed holes. Every time you succeed, your score is increased by one point. In order to highlight new App Inventor features — the Advanced tab and Sprite Z-layering — this app takes a different approach than the original Mole Mash tutorial, which you do not need to have completed in order to do this one. You should, however, be familiar with the basics of App Inventor — using the Component Designer to build a interface and using the Blocks Editor to specify event handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Introduction This tutorial includes: 1.

Creating a list of components

2.

Using functionality from the Advanced section of the Blocks Editor to get and set properties of arbitrary components

3. 4.

Having game events controlled by the Clock component Using Sprite Z-layering to ensure that one sprite (ImageSprite or Ball) appears in front of another

Getting Started Connect to the App Inventor web site and start a new project. Set the screen's Title property to an appropriate name, such as "Mole Mash". Open the Blocks Editor and connect it to the phone. these image files (created by Yun Miao) by right-clicking on them, then add them to the project by pressing the "Add..." button in the Media pane.

Set up the Components The interface will contain a total of 6 ImageSprites: 5 unmoving holes and 1 mole, which will move on top of the holes. Use the component designer to create the interface. When you are done, it should look something like the picture below. Don't worry about lining up the holes evenly. You will specify their locations through their X and Y properties. Additional instructions are below the picture.

Create the following components by dragging them from the Palette into the Viewer. Component Type

Palette Group

What you'll name it

Purpose of Compo

Canvas

Drawing and Animation

GameCanvas

The game field

ImageSprite (5)

Drawing and Animation

Hole1 ... Hole5

Holes from which t

ImageSprite

Drawing and Animation

Mole

The mole

HorizontalArrangement

Layout

ScoreArrangement

To display the scor

Label

Interface

ScoreTextLabel

To hold "Score: "

Label

Interface

ScoreValueLabel

To hold the score (

Clock

Interface

MoleClock

To control the mol

Sound

Media

Buzzer

To vibrate when th

Make the following changes to the components' properties: Component

Action

Canvas1

Set BackgroundColor to Green. Set Width to 320 pixels. Set Height to 320 pixels.

Hole1

Set X to 20 and Y to 60 (upper left).

Hole2

Set X to 130 and Y to 60 (upper center).

Hole3

Set X to 240 and Y to 60 (upper right)

Hole4

Set X to 75 and Y to 140 (lower left).

Hole5

Set X to 185 and Y to 140 (lower right).

Mole

Set Picture to "mole.png". Set Z to 2 so the mole appears in front of the other ImageSprite s, which h

ScoreTextLabel

Set Text to "Score: ".

ScoreTextValue

Set Text to "0".

Don't worry now about setting the Picture property for the holes; we'll set the property in the Blocks Editor.

Add Behaviors to the Components Here is an overview of what we need to create blocks to do: 1.

Create global variable:

2.

a. holes: a list of holes When the app starts: a.

3.

4. 5.

Populate the list of holes.

b. Set each hole's Picture property to "hole.png". c. Call procedure MoveMole (below). Create a procedure MoveMole to: a. Set local variable currentHole to a random hole from the list holes. b. Move the mole to the location of currentHole. Make MoleClock call MoveMole whenever its timer goes off (every second). Implement a handler that does the following when the mole is touched: a.

Add one to the score.

b.

Make the phone briefly vibrate.

c. Call MoveMole . To proceed, switch to the Blocks Editor.

Creating Variables Create the variable holes. For now, we will give it a "dummy" initial value of an empty list; we'll set the real initial value in the Screen1.Initialize event handler, which gets executed each time the app loads the screen. (For technical reasons, components cannot be referred to in variable initialize blocks, which are run before the app has started.) Here is a picture and list of the blocks you will need:

Block type

Drawer

Purpose

initialize global holes to

Variables

Hold a list of holes.

create empty list

Lists

Create an empty list, to be filled in when the program sta

As always, comments (created by right-clicking on a block) are encouraged but not required.

Starting the App The first event to occur in any program in Screen1.Initialize , so we will put start-up code in that handler. Specifically, we will add the hole components to the list holes, set each hole's Picture property to "hole.png", and call MoveMole . Since we have not yet written MoveMole, we will create an empty procedure with that name, which we will fill in later. Below are a picture and table of the blocks you need to create. Note that the "Any ImageSprite" drawer is found under the "Any component" tab at the bottom of the list of Blocks in the Blocks Editor.

Block type

Drawer

Purpose

Screen1.Initialize

Screen1

Specify what should happen when the a

add items to list

Lists

Add the following values to...

get global holes

Variables

...the list of holes:

Hole1

Hole1

-the upper left hole

Hole2

Hole2

-the upper center hole

Hole3

Hole3

-the upper right hole

Hole4

Hole4

-the lower left hole

Hole5

Hole5

-the lower right hole

for each hole in list

Control

Specify that we would like a variable na

get global holes

Variables

...to take on each of the values in the li

set ImageSprite.Picture of component ... to

Any ImageSprite

Set the Picture property of...

get global hole

Variables

...the ImageSprite referred to by the va

" " (hole.png)

Text

...to the picture of the empty hole.

to procedure (MoveMole)

Procedures

Create an procedure, to be filled in late

call MoveMole

Procedures

Call MoveMole to make the first placem

Compare the for each block to the equivalent blocks that would be necessary without it:

Not only is the left set of blocks shorter, it is less repetitious, sparing the programmer from semimindless copy-and-pasting and making it easier to modify, for example, if the name of the picture is changed.

Moving the Mole Now let's fill in the body of the procedure MoveMole, which we'll call when the program starts, when the mole gets touched, and when our timer goes off every second. What we want it to do is to pick a random hole and move the mole on top of it. Here are a picture and list of the new blocks:

Block type

Drawer

initialize local currentHole to

(there are two types of 'initialize local': take the one that fits the procedure block)

Variables

pick a random item

Lists

get global holes

Variables

call Mole.MoveTo

Mole

ImageSprite.X

Any ImageSprite

get local currentHole

Variables

ImageSprite.Y

Any ImageSprite

get local currentHole

Variables

We now need to specify that MoveMole should be called whenever MoleClock's Timer goes off. We just need two blocks to accomplish that:

Block type

Drawer

Purpose

MoleClock.Timer

MoleClock

When the timer goes off...

call MoveMole

Procedures

...move the mole.

ing Touches

Finally, we need to specify what happens when the mole is touched. Specifically, we want to: 1.

Increment the score.

2.

Make the phone vibrate briefly.

3.

Move the mole.

We can easily translate these to blocks:

Block type

Drawer

Purpose

Mole.Touched

Mole

When the mole is touched

set ScoreValueLabel.Text to

ScoreValueLabel

...update the visible score

+

Math

...the result of adding...

1

Math

...1 [and]...

ScoreValueLabel.Text

ScoreValueLabel

...the previous score.

call Buzzer.Vibrate

Buzzer

Make the phone vibrate f

100

Math

...100 milliseconds.

call MoveMole

Procedures

Move the mole to a new l

Final Program

Variations Here are some variations you might want to implement:    

Adding a Reset button to set the score back to 0. Having the score depend not just on the number of hits but also the number of misses and escaped moles. Increasing the speed of the game of mole movement if the player is doing well and decreasing it if the player is doing poorly. Adding a second mole on a different timer. You can see how to implement the first two variations in the original Mole Mash tutorial.

Review Here are some of the ideas covered in this tutorial:     

Putting components in a List. Performing an operation on every component in a List using the for each block and Advanced features. Placing an ImageSprite on top of another, using their Z properties to control which goes in front. Using the Clock component to control game play. Creating a procedure and calling it from multiple places. Looking for more information about Mole Mash? Check out the Book Chapter for more explanation and background information. Done with MoleMash 2? Return to the other tutorials here.

Scan the Sample App to your Phone Scan the following barcode onto your phone to install and run the sample app.

Or the apk

Source Code If you'd like to work with this sample in App Inventor, the source code to your computer, then open App Inventor, click Projects, choose Import project (.aia) from my computer..., and select the source code you just ed. Tutorial Version: 

App Inventor 2 Tutorial Difficulty:



Intermediate Tutorial Type:

  

Sprites Clock Timer Game inShare

                  

Home About Our Team Sponsors News & Stories In The News Stories Team Blog App of the Month Resources Get Started Teach Documentation Tutorials AI Classic Resources Forums Troubleshooting

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License © 2012-2015 Massachusetts Institute of Technology Us