24.- Reloj. Temporizador. Parpadeo de colores en la pantalla.

p24_reloj

- Situamos un Deslizador que presente unos extremos entre 1 y 2000.

_________________Diseño

- Al mover el Deslizador establecer un nuevo Intervalo en el Reloj (Temporizador) de manera que éste actuará cada ese tiempo.

- Cuando actúe el Reloj, se crean tres números aleatoria del 1 a 255, correspondiente a cada uno de los colores básicos.La suma de esos colores se presenta como color de fondo de la pantalla.

_________________Bloques

_______________________________25.- Reloj. Semáforo.

p25_semaforo

- Situamos un Lienzo. Lo ponemos Ancho: Ajustar al contenedor y Alto: 400 pixel.

- Tres Pelotas (50, 10) (50, 90) (50,170). Radio: 40

- Un Deslizador con valores entre ValorMínimo 1 y ValorMáximo 200

_________________Diseño

- Variable: cuenta

- Cada vez que se produce un Intervalo del Reloj:

Se cuenta una unidad. cuenta = cuenta + 1

Si cuenta es > 16 entonces cuenta vuelve a 0 (nuevo ciclo)

Si cuenta es <= 6 entonces Color RojoSi cuenta es > 6 Y cuenta es <= 9 entonces Color Amarillo Si cuenta es >9 entonces Color Verde

_________________Bloques

- Mediante el Deslizador controlamos el Intervalo del Reloj.

NOTA: este código es solo un ejemplo de aprendizaje, se podría hacer más eficiente. Además el color Amarillo sale después del Rojo y debería salir antes de él. Corríjase.

_______________________________26.- GIF animados.

p26_gif_animado

- Android no se lleva bien con los Gif animados, hay que recurrir a códigos complejos o trucos.

En este caso el truco que vamos a utilizar es poner una imagen en un directorio de Android y ver esa imagen con el navegador web.

Cuando subimos una imagen al proyecto, ésta se guarda en... /mnt/sdcard/AppInventor/assets/ninja.gif

así que mediante el navegador de internet obtenemos esa imagen en la pantalla.

file:///mnt/sdcard/AppInventor/assets/ninja.gif

_________________Diseño

_________________Bloques

- Índice del tutorial:

1.- Presentación. Pitágoras. Dos pantallas.

1B.- Adivina el número. Ruleta rusa. Tres iguales.

2.- Propiedades. Botón. Eventos. Etiqueta. CasillaDeVerificación. Desplegable. VisorDeLista.

3.- SelectorDeFecha. SelectorDeHora. Deslizador. Velocidad de la luz.

4.- Cámara. Notificación. TextoAVoz. Sonido. Reproductor. ReproductorDeVideo. GrabadorDeSonidos. ReconocimientoDeVoz. TraductorYandex.

5.- Acelerómetro. LectorCódigoDeBarras. VisorWeb. SensorDeUbicación. SensorDeOrientación. Lienzo. SpriteImagen.

Brújula. NFC. Near Field Communication. Sensor de aproximación.

6.- Reloj. Semáforo. GIF animados.

7.- Lienzo. Dibujo de líneas. SpriteImagen. Dibujo de funciones. Paleta de tenis. Pelota y SpriteImagen.

8.- Guardar y cargar archivos. Archivo. TinyDB y MiniWebDB.

9.- Bluetooh y Arduino. Bluetooth. Chat.

10.- App Inventor 2 y Robot Mindstorms de LEGO.

11.- Enviar un correo.

12.- Notificador emergente.

13.- Aquí estoy. Código incompleto. (Puedes bajarla de la Play de Google) -------> Nuevo

14.- Gráficos AP.

15.- Procedimientos.

16.- Cuenta atrás.

17.- Tabla de multiplicación. -------> Nuevo

18.- Par o impar.

19.- Activy Starter.

20.- Mezcla aditiva de colores.

21.- Piedra, papel, tijeras.

22.- Redimensionado.

23.- Pasar datos entre pantallas.

24.- Vector. -------> Se activará el 22 de agosto.

25.- Reloj con vector.

26.- Pares o nones.

27.- Potencia Fiscal. Impuesto de Tracción Mecánica.

34.- Índice de Masa Corporal.

35.- El móvil entra en pausa cuando no pulso ningún botón. Se apaga la pantalla. Solución. Background. Service.

45.- Condiciones. Si... Entonces...

56.- Variables. Metodología inicial.

57.- Variables_2. Metodología inicial.

 

101.- Propuestas.

102.- Stick HDMI. El Android en tu televisor.

103.- Pasar los archivos del ordenador al móvil. Obtener el código QR. Escritorio remoto con el móvil. Kahoot, para realizar test.

104.- Enlaces a ejemplos. Juego de cohetes. Libros.

 

__________________________________

Archivos importantes:

- Emulador para Windows. Arrancará mediante AI Stater en Windows. Este emulador funciona solo en Windows. Se utiliza para emular nuestras aplicaciones en directamente en nuestro ordenador sin ser necesario instalarlo en el móvil. Es lento.

- MIT AI2 Companion App. Programa que se carga en el móvil para utilizar éste como emulador. Instalar en el móvil desde la Play de Google mediante código QR. - MIT AI Companion 2.23 (Si el emulador no viene con la versión 2.23, lo bajas de esta página. Vas al Símbolo de sistema de Windows, entras en C:\AI2U\Emulator, escribes adb shell e instala el archivo que acabas de bajar.

______________________________________________

Presentación

- ¿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 BasicIMPORTANTE: si te interesa esto de hacer programas sencillos para Android consulta este tutorial de aprendizaje e iniciación que he realizado:

Tutorial BASIC4Android.

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ñolhttp://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 juanantonio@example.com 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_pitagoras

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.

- 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 negEl 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 inmediatamente 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 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

 

___________________________________

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.

 

_________________________________________________________________________________

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/setup-device-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, para 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 DESHABILITAR su DHCP.

________________

Si dispones de Andared, puedes configurar que tanto el portátil como el móvil funcion

en en esta red.