App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

____________________________

________________________________________________________

1.- Nuestro primer proyecto. Teorema de Pitágoras.

p1_pitagoras.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 katetos, 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.

- En Proyecto / Guardar proyecto, para guardar los cambios que vayas realizando...
- Aunque en 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 Bloques 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. - Declarar la variable es presentarla antes de que funcione. - 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, elevado (^), 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 Matemáticas.
- 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.

_______________________________________
- 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.

NOTA: el Emulador falla mucho al actualizarse. Consultar el tutorial: 105.- Actualizar el Emulador. No me actualiza el Emulador.

___________________________________
- 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 (Conectar / Reiniciar 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.

___________________________________
___________________________________
___________________________________
___________________________________

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.

1.- 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.

2.- 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.apk

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 este código de bloques:

- Pasamos el programa al emulador

NOTAS:
- La pantalla de arranque de la aplicación siempre es la Screen1.

- A la Screen1 no le podemos cambiar el nombre.

- Si creas la primera pantalla con los códigos en la Screen1 y luego haces la pantalla de portada, siempre arrancará la Screen1, no la de portada.

- Por eso es mejor dejar la Screen1 de portada y las demas de códigos.

_______________________
- Pantalla de Menú.

Menú. Vamos a 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.

kio4.com

___________________________________________

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.

__________________________________