24.- Reloj. Temporizador.

Parpadeo de colores en la
pantalla.
p24_reloj
- Situamos un Deslizador que presente unos extremos entre 1 y 2000.

_________________
Diseo

- Al mover el Deslizador establecer un nuevo Intervalo en el Reloj (Temporizador)

de manera que ste actuar cada ese tiempo.
- Cuando acte el Reloj, se crean tres nmeros aleatoria del 1 a 255,
correspondiente a cada uno de los colores bsicos.
La suma de esos colores se presenta como color de fondo de la pantalla.

_________________
Bloques

______________________
_________
25.- Reloj. Semforo.
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 ValorMnimo 1 y ValorMximo 200

_________________
Diseo

- 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 Rojo

Si 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 cdigo es solo un ejemplo de aprendizaje, se podra hacer ms

eficiente. Adems el color Amarillo sale despus del Rojo y debera salir antes de
l. Corrjase.

______________________
_________
26.- GIF animados.
p26_gif_animado
- Android no se lleva bien con los Gif animados, hay que recurrir a cdigos
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

_________________
Diseo

_________________
Bloques

- ndice del tutorial:

1.- Presentacin. Pitgoras. Dos pantallas.

1B.- Adivina el nmero. Ruleta rusa. Tres iguales.
2.- Propiedades. Botn. Eventos. Etiqueta.
CasillaDeVerificacin. Desplegable. VisorDeLista.
3.- SelectorDeFecha. SelectorDeHora. Deslizador.
Velocidad de la luz.
4.- Cmara. Notificacin. TextoAVoz. Sonido.
Reproductor. ReproductorDeVideo.
GrabadorDeSonidos. ReconocimientoDeVoz.
TraductorYandex.
5.- Acelermetro. LectorCdigoDeBarras.
VisorWeb. SensorDeUbicacin.
SensorDeOrientacin. Lienzo. SpriteImagen.

Brjula. NFC. Near Field Communication. Sensor

de aproximacin.
6.- Reloj. Semforo. GIF animados.
7.- Lienzo. Dibujo de lneas. 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. Cdigo incompleto. (Puedes
bajarla de la Play de Google) -------> Nuevo
14.- Grficos AP.
15.- Procedimientos.
16.- Cuenta atrs.
17.-

Tabla de multiplicacin. -------> 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 Traccin
Mecnica.
34.- ndice de Masa Corporal.
35.- El mvil entra en pausa cuando no pulso ningn botn. Se apaga la pantalla. Solucin.
Background. Service.
45.- Condiciones. Si... Entonces...
56.- Variables. Metodologa inicial.
57.- Variables_2. Metodologa inicial.

101.- Propuestas.
102.- Stick HDMI. El Android en tu televisor.
103.- Pasar los archivos del ordenador al mvil.
Obtener el cdigo QR. Escritorio remoto con el
mvil. 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 mvil.
Es lento.
- MIT AI2 Companion App. Programa que se carga
en el mvil para utilizar ste como emulador.
Instalar en el mvil desde la Play de Google
mediante cdigo QR.
- MIT AI Companion 2.23
(Si el emulador no viene con la versin 2.23, lo
bajas de esta pgina. Vas al Smbolo de sistema de
Windows, entras en C:\AI2U\Emulator, escribes adb
shell e instala el archivo que acabas de bajar.
______________________________________________

Presentacin

- Qu es Android?
Android es un sistema operativo gratuito que utiliza muchos telfonos mviles actuales
(telfonos 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) ...
Tambin existen otros sistemas operativos para telfonos como el iOS de Apple (20 %) y
Windows Phone de Microsoft (2 %), pero en Espaa se est imponiendo el Android (78
%).
(Ver grfico estadstico de como en Espaa se est imponiendo el Android)
El Android lo podemos programar fcilmente y realizar programas de frmulas
matemticas, juegos, ubicacin en los mapas de Google, mover un robot mediante
Bluetooth, contestacin automtica de SMS,...

Saber ms de Android en la Wikipedia.

- Para aprender a programar el Android necesito tener un telfono mvil con Android?
No. Solo necesitas un ordenador y conexin a Internet. En el ordenador puedes hacer los
programas y probarlos en un emulador instalado en el mismo ordenador.
Si tienes un telfono mvil o tablet con Android puedes pasar los programas realizados al
mvil para ver cmo funcionan y utilizarlos.
- Qu programa se utiliza para programar el Android?
Indico tres formas muy utilizadas de programacin:
1.- Con Android SDK y Eclipse . Se realizan los programas escribiendo cdigos en Java.
Es la forma que utilizan los buenos programadores. Puedes ver ejemplos en este vdeo.

2.- Mediante una aplicacin 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 iniciacin 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 pblico 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 aplicacin.
- A principo de agosto de 2011 Google anunci que ya no mantendra esta aplicacin,
pero que la hara cdigo libre destinado a la educacin.
- Una semana despus el Instituto Tecnolgico de Massachusetts (MIT), una institucin
de educacin superior privada situada en Cambridge, Massachusetts (EE.UU.), anunci
que se hara 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 Tecnolgico de Massachusetts (MIT) volvi a poner
el proyecto en Internet.
- En diciembre de 2013, MIT saca AI 2, una nueva versin de App Inventor:
http://ai2.appinventor.mit.edu
- En noviembre de 2014 sale la opcin de idioma, con lo cual podemos ver la mayora de
los elementos en espaol.
- El 15 de julio de 2015 desaparece App inventor (el antiguo). Existe una aplicacin web
para pasar los proyectos .zip del App inventor al .aia del App inventor 2. Aplicacin online.
- Cmo es el cdigo?
- 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 dnde 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 conexin a Internet, tu trabajas con el
programa conectado directamente al servidor de App inventor. Es como una pgina 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. Tambin necesitas una cuenta de
Google Gmail.
http://appinventor.googlelabs.com

________________________
_

- En qu direccin entro para programar?

En estos momentos, si vas a estudiar App inventor 2, entra
en esta direccin y te autentifica con tu direccin de correo
de gmail...

http://ai2.appinventor.
mit.edu
App inventor 2 en espaol
http://beta.appinventor.mit.edu (versin antigua)

________________________
_
Interface
- Podemos trabajar en espaol, en ingls, francs, italiano...

App inventor 2 en espaol offline

- Hemos visto que para trabajar con AI2 debemos estar conectados a Internet, se podra
trabajar de alguna manera offline, es decir sin estar conectado?
- Pus 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 versin ai2u

2.3 ya viene en espaol.

- 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 versin
de AI Starter. Ms detalles.

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

Atencin, con esta forma de instalacin lo que

estamos haciendo es creando un servidor web
local con App inventor, de manera que los dems
ordenadores de tu red local puedes escribir en un
navegador tu ip local, por ejemplo 192.168.1.2:8888

y conectarn con tu servidor web con App

Inventor, ponen cualquier nombre
juanantonio@example.com y pueden entrar.
Estdialo.
Tutorial.
Ayuda.
- Tambin existe la opcin Portable, sin necesidad de instalacin.
- Hay otra versin offline llamada AILiveComplete (instalacin)
- En estas fechas App Inventor 2 online, solo permite cdigos de hasta 5 MB, en cambio si
utilizar los mtodo offline los puede hacer de mucho mayor tamao.

____________________________________________
________________
____________________________________________
________________
____________________________________________
________________
____________________________________________
________________
____________________________________________
________________

EMPEZAMOS AQU...
_________________

1.- Nuestro primer proyecto. Teorema

de Pitgoras.
p1_pitag
oras

Baja este archivo a tu ordenador y luego sbelo a

App inventor (Proyectos / Importar proyecto)

- Vamos a crear un proyecto.

En nuestro caso va a ser el teorema de Pitgoras. Introducimos los dos catetos, pulsamos un
botn y obtendremos la hipotenusa.

- Pulsamos Proyectos / Comenzar un proyecto nuevo...

Le ponemos como nombre: pitagoras

_________________
Diseador

Screen1 es la pantalla de nuestro mvil.

En Paleta estn los elementos o componentes que podemos poner en la pantalla de nuestro
mvil. 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
"SoloNmeros". Borramos informacin de Pista
Otra Etiqueta (Etiqueta2)
Otro Campo de texto (CampoDeTexto2) NOTA: en sus Propiedades marcamos
"SoloNmeros". Borramos informacin de Pista
Un Botn (Botn1)
Otra Etiqueta (Etiqueta3)

Fjate a la derecha estn las Propiedades de cada elemento...

Si marcas Etiqueta1, en la derecha puedes ponerla en Negrita, cambiar el Tamao de
letra, el texto que quieres que aparezca en esa etiqueta (Texto)
El Botn1, lo puedes poner que su ancho coincida con la pantalla. Ancho: Ajustar al
contenedor
Si pulsamos sobre Screen1, mediante las Propiedades podemos cambiar el Ttulo de la
pantalla, le pondremos Pitgoras.

Pongamos tambin en Screen1, OrientacinDeLaPantalla en Vertical, para mantener esta

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

Diseador y Bloques.
Para Disear nuestros controles pulsamos Diseador.
Para poner los Bloques del cdigo pulsamos Bloques.

_________________
Bloques
Pulsamos en Bloques para poner los Boques de cdigos...

En la parte izquierda tenemos los Bloques para poner cdigos y

los controles que hemos puesto en la pantalla Screen1.
Vamos a utilizar 3 variables numricas: 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 Matemticas disponemos que sean
variables numricas iniciadas a 0.

Queremos que cuando hagamos Click en el Botn1, se realice la

frmula del teorema de Pitgoras.
(cuando Botn1 Click ejecutar)
En Botn1 sacamos Botn1_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 clculo.
Necesitamos operaciones como raz cuadrada, cuadrado (^),
suma... obtenemos estos bloques pulsando el botn
Matemticas.

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 Botn1.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 ms y elevado a dos y ese resultado lo
asignamos a z
- Ponemos en el Etiqueta3.Texto la unin de "La hiponenusa vale..." y el valor de z.
Las piezas de las operaciones matemticas las tomamos de Integrados.
Los CampoDeTexto, Etiqueta, Botn y las variables establecidas las tomamos de
Screen1
IMPORTANTE: en AI2 algunas funciones matemticas estn un poco escondidas, el
logaritmo y e^, estn 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 cdigo siempre es el punto:
pi = 3.1416, pero en los CamposDeTexto unas veces es el punto y otra la coma, probad.

____________________________________________
___________
____________________________________________
___________
____________________________________________
___________
____________________________________________
___________
INSTALACIN EN EL MVIL para prueba y
depuracin (debug).
Ya lo tenemos, vamos a ver si funciona. Hay 3 formas de comprobarlo:

_______________________________________
PRIMERA FORMA:

1.- Pasar el programa a tu mvil mediante WiFi y la aplicacin MIT AI2 Companion
App.
(Esta es la manera aconsejable).
- Conecta tu mvil a la misma red WiFi que tenga el ordenador donde ests trabajando.
- Instala en tu mvil MIT AI2 Companion: http://appinventor.mit.edu/explore/ai2/setupdevice-wifi

- Arranca el programa MIT AI2 Companion que has instalado en tu mvil.

- En el
ordenador, pulsa
en Conectar y
luego en AI
Companion

Te saldr un QR y un
cdigo.

- En tu mvil
saldr esta
pantalla.
Escribe el
cdigo
anterior o bien
escanea el
QR.
El programa
pasar a tu
mvil.
- El programa
quedar
conectado
hasta que los
desconectemo
s (Conectar /
Reinciar
Conexin)
- Si
cambiamos
algo en el
Designer o en
los Bloques
inmediatame
nte pasar al
programa del
mvil.
- 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
tambin vale para LINUX aunque es ms difcil de instalar), de esta manera podemos
hacer las pruebas de funcionamiento en el emulador del ordenador y cuando funcione
correctamente lo pasaremos al mvil.
En este caso no nos hace falta mvil ni Wifi para probar nuestra aplicacin.
(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)
(Tambin se puede instalar este programa en LINUX, pero es algo ms 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 Diseador o de los
Bloques, ese cambio pasar al Emulador.

NOTA: si quieres que el emulador se ponga de forma horizontal, pulsa la

combinacin 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
mvil 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)
(Tambin se puede instalar este programa en LINUX, pero es algo ms complicado)
- Instala en tu mvil MIT AI2 Companion: http://appinventor.mit.edu/explore/ai2/setupdevice-wifi
- Arranca en tu ordenador el aiStarter y conecta por USB el ordenador al mvil.

- Arranca el MIT A2 Companion en el mvil.

- Probar si estn funcionando la conexin: http://appinventor.mit.edu/test/

- Ve al programa que ests realizando y pulsa Connect / USB
Tu aplicacin pasar al mvil y entrar en funcionamiento.

El programa
pasar a tu
mvil.
- 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
mvil.
- De esta manera
podemos
depurar (debug)
los programas
que realicemos
hasta que
funcionen
correctamente.

___________________________________
___________________________________
___________________________________
___________________________________

Instalar el programa en nuestro mvil para

uso de usuario (compilacin)
- Para cargar los programas ya compilados en tu mvil, es conveniente que ste tenga un
escaneador de Cdigo QR, si tu mvil 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
mvil.
Una cosa es depurar (debug) que lo hacemos mediante Conectar y que realizamos el
proceso de creacin, correccin de errores y pruebas de la aplicacin.
Cuando ya tenemos la aplicacin totalmente terminada para su uso y distribucin, lo que
hacemos en compilarla, esto es Generar un archivo de tipo pitagoras.apk que contiene la
aplicacin preparada para su instalacin.

En este caso copiaremos en nuestro ordenador el archivo pitagoras.apk y desde nuestro

ordenador por USB lo podemos pasar al mvil.
Otra forma sera obtener en nuestro ordenador el cdigo QR de nuestro programa, para
luego escaneando el QR con el mvil 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 mvil 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 ms 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 sera el cdigo 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 mejorndolo.
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 cmbiale 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. BRRALO.
- En los CamposDeTexto, marca en Solo nmeros, 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 aplicacin...

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
Disposicin y sacamos a la pantalla un
DisposicinHortizontal.
Luego introducimos la imagen del
SelectorDeImagen en
DisposicinHorizontal.
Ponemos DisposicinHorizontal 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 disposicin.

___________________________________________

3.- Varias pantallas

p1_pitagoras2 (varias pantallas - Screen)

Continuamos con nuestro proyecto de Pitgoras, es decir el mismo

pitagoras2.aia que estamos realizando.
Vamos a crear otro formulario en otra pantalla, en este caso vamos a realizar el
clculo del rea del tringulo.
- Aadimos una nueva pantalla: Aadir ventana
- Le dejamos de nombre Screen2
- Mediante el Diseo situamos una Etiqueta1, un CampoDeTexto1, otra Etiqueta2,
otro CampoDeTexto2, un Botn y otra Etiqueta3
NOTA: en las Propiedades de los CampoDeTexto marcamos "SoloNmeros". Borramos
informacin de Pista

- Mediante Bloques creamos esta disposicin:

- 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 Diseo hemos puesto varios elementos en el

VisorDeLista1, vamos a poner otros elementos pero mediante cdigo.

Para ello utilizo dos tablas, en una figura el nombre de dos elementos del
VisorDeLista1 (Pitgoras, rea del tringulo)
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 segn 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 Botn2_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 mvil compilado. Se puede hacer escaneando el QR obtenido.

_________________________________
__
_________________________________
_____________
Resumen de instalacin.
- Podemos trabajar online y offline.
Online, con conexin a Internet es la forma "oficial", nos creamos una cuenta de
correo, por ejemplo de gmail y creamos el cdigo mediante la conexin a un sitio
web.

Podremos ver el resultado de nuestro cdigo en un emulador instalado en el

ordenador, en el mvil/tablet mediante Wifi o en el mvil/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 cdigo en un emulador instalado en el
ordenador, en el mvil/tablet mediante Wifi o en el mvil/tablet mediante cable
USB.
Para bajar el "programa" App Inventor 2 vamos a...
http://sourceforge.net/projects/ai2u/files/
- Hay otra versin 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.
_________________________________

- Ejecucin de nuestro cdigo.

Tanto si estamos trabajando Offline como Online, hay varias formas de comprobar
cmo est funcionando nuestro cdigo:
- Instalando en el mvil/tablet una aplicacin bajada de la Play de Google,
llamada: MIT AI2 Companion, luego necesitamos que la red donde trabajamos
tenga Wifi. Es decir, que el mvil 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 mvil como el ordenador estn conectados a la misma red y que sta
tenga Wifi).
Pulsaremos en App Inventor AI Companion. Nos saldr en la pantalla del
ordenador un cdigo QR. Arrancamos MIT AI2 en nuestro mvil y escaneamos ese
QR para cargar la aplicacin que hemos realizado.
- Instalando en nuestro ordenador un Emulador, es decir una especie de telfono
mvil que acte como nuestro mvil. 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 mvil al ordenador por cable USB. Instalamos en nuestro
ordenador el driver correspondiente a nuestro modelo de mvil.
Despus instalamos http://appinventor.mit.edu/explore/ai2/setup-device-usb.html
Arrancamos el Ai2 Starter. Luego en App Inventor pulsamos en: USB

_______________________________
Configuracin del Router
- Si tenemos un Router domstico en nuestro hogar, no es necesario
configurarle nada.
- Si estamos en un instituto o centro de trabajo:

Podemo
s
conectar
un
Router
con WiFi
a una de
los
puertos
del
Switch,
para
crearno
s 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).
Adems
debemo
s entrar
en la
configur
acin
del
Router,
ponerle
una
contrase
a y
DESHA
BILITAR
su
DHCP.
_______
_______
__
Si
dispone
s de
Andare
d,
puedes
configu
rar que
tanto el
porttil
como el
mvil

funcion
en en
esta
red.