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 de Android en la Wikipedia. Wikipedia.
- ¿Para aprender a programar el Android necesito tener un teléfono móvil con Android? c onexión a Internet. En el No. Solo necesitas un ordenador y conexión
ordenador puedes 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 có mo funcionan y utilizarlos.
- ¿Qué programa se utiliza para programar el Android? formas muy utilizadas de programación: Indico tres formas muy 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. 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 es to de hacer programas sencillos para IMPORTANTE: si te interesa esto Android consulta este tutorial tutorial de aprendizaje e iniciación que 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 Wo lber profesor de USFCA y divulgador de la aplicación. - A principo 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. 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 2. Aplicación online. 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. 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 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 ? ? ? e t ? ? , 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 peg ar bloques (C trl-C y C trl 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 usuario (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 B arC ode S canner
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 (DOWNLOAD)
___________________________________ 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 DHCP.
_________ _______ 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 usuario 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 th e 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 th e basics of App Inventor — using the Component Designer to build a user 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 c onnect it to the phone. Download 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 user 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 user interface. When you are done, it should look something like the picture below. Don't worry about lining up the h oles 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 th e Viewer. Component Type
Palette Group
What you'll name it
Purpose of Comp
Canvas
Drawing and Animation
GameCanvas
The game field
ImageSprite (5)
Drawing and Animation
Hole1 ... Hole5
Holes from which
ImageSprite
Drawing and Animation
Mole
The mole
HorizontalArrangement
Layout
ScoreArrangement
To display the sco
Label
User Interface
ScoreTextLabel
To hold "Score: "
Label
User Interface
ScoreValueLabel
To hold the score
Clock
User Interface
MoleClock
To control the mol
Sound
Media
Buzzer
To vibrate when t
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
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
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 n
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 lat
call MoveMole
Procedures
Call MoveMole to make the first place
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 t he 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.
Registering 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 touche
set ScoreValueLabel.Text to
ScoreValueLabel
...update the visible scor
+
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 t he sample app.
