MATERIAL NIVEL I AI2

PROGRAMANDO ARGENTINA
1

CONTENIDO

PROGRAMANDO MI PRIMERA APLICACIÓN CON AI2 .................................... 2

Paso 1. Descargar Archivos para la aplicación. .......................................................................2
Paso 2. Crear la aplicación en AI2 ............................................................................................3
Paso 3. Configurar los parámetros de la aplicación...................................................................3
Paso 4. Añadir una etiqueta a la pantalla ..................................................................................4
Paso 5. Añadir una imagen a la pantalla ...................................................................................5
Paso 6. Añadir los botones .......................................................................................................5
Paso 7. Añadir la etiqueta con los textos...................................................................................6
Paso 8. Crear una nueva pantalla. ............................................................................................7
Paso 9. Botones a la nueva pantalla .........................................................................................8
Paso 10. Añadir las acciones a la pantalla Screen1 ..................................................................8
Paso 11. Añadir la interactividad. ............................................................................................10
Paso 12. Añadir un Video........................................................................................................15
Paso 13. Botones restantes ....................................................................................................18

RESUMIENDO ................................................................................................... 20
Screen1 – VISTA DISEÑADOR ..............................................................................................20
Screen1 – VISTA BLOQUES ..................................................................................................20
Screen2. VISTA DISEÑADOR ................................................................................................21
Screen2 – VISTA BLOQUES ..................................................................................................21
Screen3. VISTA DISEÑADOR ................................................................................................22
Screen3– VISTA BLOQUES ...................................................................................................22
Screen4. VISTA DISEÑADOR ................................................................................................23
Screen4– VISTA BLOQUES ...................................................................................................23
Screen5. VISTA DISEÑADOR ................................................................................................24
Screen5– VISTA BLOQUES ...................................................................................................24
Paso 14. Generar e instalar la aplicación ................................................................................25
Nota: .......................................................................................................................................26
2 PROGRAMANDO MI PRIMERA APLICACIÓN CON AI2
La mejor forma de trabajar con App Inventor es mediante un ejemplo paso a paso.
Vamos a comenzar creando una aplicación muy sencilla que consiste en una
página/ventana principal, aparecerá un título, una imagen y 3 botones de acceso,
luego se abre otra pantalla para ejecutar un video, para más información y VOLVER.

Primero hay que hacer el DISEÑO EN EL NAVEGADOR,

Paso 1. Descargar Archivos para la aplicación.

1. Descarga y descomprime en tu equipo el archivo Argentina.rar

2. Como resultado obtendrás todos los archivos de texto, imágenes y videos
necesarios para construir tu aplicación. El archivo de texto Argentina.txt será
el contenido propuesto en cada pantalla.
3
Paso 2. Crear la aplicación en AI2

3. Abre el navegador Google Chrome.

4. Accede a la dirección de AI2: http://ai2.appinventor.mit.edu/
5. Ingresa de tu cuenta de Google: usuario y contraseña.
6. Se muestra el cuadro de diálogo para una encuesta que puedes omitirla y el de
Bienvenida a App Inventor que con un click desaparece.
7. Al principio estamos situados en la página Mis proyectos desde donde es
posible gestionar tus proyectos de aplicaciones, click en el botón Comenzar un
proyecto nuevo …

8. En el cuadro de diálogo Crear un nuevo proyecto

de App Inventor introduce el nombre del proyecto:
ARGENTINA y pulsa en el botón Aceptar. Los
nombres de proyectos no pueden tener caracteres
acentuados ni eñes ni espacios en blanco.

Paso 3. Configurar los parámetros de la aplicación

9. En el panel de Componentes selecciona Screen1.
10. Pulsa en el cuadro ColorDeFondo y elige un color claro como fondo de la
pantalla.
11. Haz clic en el cuadro Icono y luego pulsa en Subir archivo … Vamos a subir
una imagen que será el icono que muestre la aplicación en la Tablet o celular.
4 12. Seleccionar archivo de la carpeta descargada el archivo Argentina.png. Clic
en el botón Aceptar. El icono es una imagen con formato PNG y fondo
transparente.
13. En el panel de Propiedades marca la casilla Enrollable para
que la pantalla principal permita deslizarse hacia abajo. Esta
configuración es importante.
14. En el cuadro Título introduce el título que mostrará la
pantalla principal. Escribe ARGENTINA.

Paso 4. Añadir una etiqueta a la pantalla

15. Desde la Paleta abre la categoría Interfaz de usuario y arrastra el componente
Etiqueta para situarla en el Visor que muestra la pantalla Screen 1.

16. En el panel de Componentes pulsa en el ítem Etiqueta1 para seleccionarlo.

17. En el panel de Propiedades introduce LUGARES DE INTERÉS cómo Texto
18. Define 24 el Tamaño de la letra y marca la opción Negrita.
5
Paso 5. Añadir una imagen a la pantalla

19. Desde la paleta arrastra el elemento Imagen para situarla en el Visor.

20. En el panel Componentes pulsa sobre el elemento Imagen1.

21. Pulsa en el cuadro Foto y luego pulsa en Subir archivo …
22. En el panel Subir archivo … seleccionar Lugares.jpg y luego clic en Aceptar.
23. Se subirá la imagen al servidor y se mostrará en la página. Ajustar Alto a 70% y
ancho al contenedor.

Paso 6. Añadir los botones

24. Arrastra el elemento

Botón ( TRES
VECES) desde la
categoría Interfaz
de usuario en el
panel Paleta hasta el
Visor para situarlo
debajo de la imagen.
 25. En el panel Componentes selecciona el botón para configurar sus propiedades
6 introduce el texto SALTA, MISIONES y Para más información…
respectivamente a cada botón. Ancho Ajustar al contenedor.

Paso 7. Añadir la etiqueta con los textos

26. Agregamos dos etiquetas debajo

de los botones. Luego abre el archivo de
texto Argentina.txt que has descargado
para seleccionar y copiar el texto
correspondiente a esta pantalla. De
regreso a la interfaz de AI2 arrastra otra
etiqueta para situarla debajo de la imagen.
En el panel de propiedades haz clic en el
cuadro Texto y pulsa Ctrl+V o bien haz
clic derecho para elegir Pegar.

27. En el panel de Propiedades de la etiqueta pulsa en el cuadro Anchura y elige la

opción Ajustar al contenedor y Aceptar.
7 28. Arrastra la otra Etiqueta para situarlo debajo y en el panel de Propiedades
introduce como Texto: Creado por DAV UTNBA.

Paso 8. Crear una nueva pantalla.

29. En el Gestor de ventanas pulsa en el

botón Añadir ventana.

30. En el cuadro de diálogo Nueva pantalla

acepta el nombre por defecto Screen2
y Aceptar.

31. Esta acción te sitúa en la nueva pantalla Screen2. Si deseas regresar a la

anterior despliega el combo de pantallas disponibles y elige Screen1.

32. Seleccionamos Screen2. Y en el panel Propiedades marca la opción Enrollable

y en el Título introduce SALTA.

33. Repetiremos procedimientos que ya realizamos en pasos anteriores: arrastra el

componente Imagen, Subir archivo … y Seleccionar archivo Salta.jpg. (Alto
70%, Ancho Ajustar al contenedor)
8

34. Abre el archivo de texto Argentina.txt que has descargado para seleccionar y
copiar el texto correspondiente a esta pantalla. De
regreso a la interfaz de AI2 arrastra otra etiqueta
para situarla debajo de la imagen. En el panel de
propiedades haz clic en el cuadro Texto y pulsa
Ctrl+V o bien haz clic derecho para elegir Pegar.
35. En el panel de Propiedades
de esa etiqueta pulsa en el
cuadro Anchura y elige la
opción Ajustar al
contenedor y Aceptar.

Paso 9. Botones a la nueva pantalla

36. Arrastra el elemento Botón. En Propiedades

con el texto Video correspondiente a la primera
pantalla secundaria, como Ancho Ajustar al
contenedor.
37. Repite los pasos para añadir los otros dos
botones: Para más Información… y Volver.
38. En Propiedades del botón Volver puedes elegir
el color rojo en Color de texto.
39. Aunque los botones aparezcan sobre el texto de
la etiqueta luego en el dispositivo móvil se
mostrarán debajo.
40. Repetir los pasos 7 y 8 para crear la pantalla
Screen3 con la información de MISIONES.

Paso 10. Añadir las acciones a la pantalla

Screen1

1. Despliega el combo de pantallas y elige

Screen1 en el Gestor de pantallas.

2. Pulsa en el botón Bloques para entrar al

Editor de bloques.
9
3. En el panel Bloques pulsa en el elemento Botón1 situado en Screen1. En el
catálogo de bloques que se muestra arrastra hacia la derecha al bloque
cuando Botón1 Clic.

4. En el panel Bloques pulsa en el elemento Integrados > Control. Arrastra el

bloque abrir otra pantalla Nombre de la pantalla e insértalo dentro del bloque
cuando anteriormente situado.
 5. En los bloques Texto arrastra el primer bloque “” para añadirlo al bloque
10 anterior.

6. Clic en el hueco de este último bloque para escribir Screen2.

7. Repite los pasos anteriores para añadir los bloques de código a los botón2.

Paso 11. Añadir la interactividad.

Para reproducir un audio/video o bien mostrar el navegador web con una URL
concreta es necesario añadir a la pantalla un componente invisible que realiza estas
acciones: ActivityStarter.

SCREEN1: En el Paso 10 configuramos las acciones de los Botones Botón1 y Botón2.

A continuación realizaremos la programación del Botón3, Para más Información…
correspondiente a Argentina.
Y luego lo replicaremos para las Screen2 y Screen3 que tienen el mismo botón de más
Información… según las pantallas correspondientes para Salta o Misiones.
11
12
BOTÓN PARA MAS INFORMACIÓN…

8. Pulsar en el botón Diseñador para regresar a la página de diseño de pantallas.

9. En la pantalla Screen1.
10. Desde el panel de PALETA arrastra y suelta sobre la pantalla el componente
ActivityStarter de la categoría Conectividad.
11. Desde la categoría de Bloques > configuramos el botón3, Clic sobre
ActivityStarter … arrastramos 2 poner… como muestra la imagen y las
cadenas de texto
13 12. Desde el archivo Argentina.txt seleccionar y copiar la URL de acceso al artículo
relacionado con el tema expuesto en la pantalla:
13. En el editor de bloques de AI2, clic en el cuadro de texto asociado al bloque
Poner ActivityStarter1.UriDelDato como … y pulsar Ctrl+V para pegar la URL
copiada.
14. Y en el cuadro de texto asociado al bloque Poner ActivityStarter1. Acción
como, escribir la orden: android.intent.action.VIEW

15. Repite los pasos en las pantallas Screen2 y Screen3, correspondiente al botón2
de ambas pantallas.

A TENER EN CUENTA: COPIAR

Para ello, podemos copiarlo, Desde Bloques de Screen1. Hacer Clic.der sobre el
bloque boton3 y clic sobre All to Backpack.

De esta forma podremos copiarla en la Screen2. Para ello nos posicionamos en

Screen2. Luego Clic.der y Paste All Block from Backpack (1)
14

Cambiamos a boton2 y copiamos del Archivo Argentina.txt la URL correspondiente

a Más información de Salta y luego Misiones.

Cambiar
15 Paso 12. Añadir un Video
BOTÓN VIDEO

16. Vamos a crear

dos nuevas pantallas
screen4 y screen5.
(Paso 9 y 10).
17. Desde Paleta>>
categoría Medios
arrastra y suelta
sobre la pantalla
screen4 que lleva el
título de Salta el
componente
ReproductorDeVide
o1.

18. Vamos a
configurar el resto de objetos de Screen4 (Salta). Y se replicará para la Screen5
(Misiones).
Componentes: Screen4 (Salta)/Screen5 (Misiones)
Paleta>>Medios>> ReproductorDeVideo1
Paleta>>Disposición>>DisposicionHorizontal1. Propiedades: Alto,
automático; Ancho, Ajustar al contenedor. (Insertaremos los tres botones
dentro de este recuadro).
Paleta>>Interfaz de usuario>> 3 botones. Esta vez le cambiaremos el
nombre a cada botón PAUSA, PLAY, VOLVER

Screen4
16

19. Nos ubicamos en

Componentes>>
ReproductorDeVideo1 para
Subir archivo. clic en el botón
Seleccionar archivo para
localizar y elegir el archivo
Salta.mp4 y clic en Aceptar.

20. Repite los pasos anteriores para

la pantalla Screeen5.
 Screen5
17

Desde Panel de Bloques:

21. En el Diseñador nos ubicamos en la pantalla Screen2.

22. A continuación, pulsa en el botón Bloques para acceder al Editor de bloques,
pulsar en Screen2 > Botón1.
18 23. Arrastra al panel derecho en blanco el bloque cuando Botón1 .Clic ejecutar …
24. Completar el Botón1 para que llame a la pantalla Screen4.

25. Recordar que el botón2 debe programarse como Mayor Información… igual al
boton3 de Screen1.

Paso 13. Botones restantes

BOTÓN VOLVER

Screen2 Boton3
Screen3 Boton3 BOTÓN VOLVER
Screen4 VOLVER
Screen5 VOLVER

26. Utiliza las instrucciones de programación de la pantalla Screen2 para asociar al

botón Botón3 la acción de abrir la ventana Screen1. También podemos probar,
Cerrar Pantalla, Regresando a la Screen1.
19

PARA TERMINAR: PLAY – PAUSA – VOLVERR

Botones de Screen4 y Screen5 desde vista de Bloques

20
RESUMIENDO
Screen1 – VISTA DISEÑADOR

Screen1 – VISTA BLOQUES

21
Screen2. VISTA DISEÑADOR

Screen2 – VISTA BLOQUES

22
Screen3. VISTA DISEÑADOR

Screen3– VISTA BLOQUES

23
Screen4. VISTA DISEÑADOR

Screen4– VISTA BLOQUES

 Screen5. VISTA DISEÑADOR
24

Screen5– VISTA BLOQUES

 Paso 14. Generar e instalar la aplicación

1. Una vez terminada la aplicación en la barra de menús elige Generar > App
(Generar código QR para el archivo. apk)

25

2. Se compilará la aplicación y al cabo de unos segundos se mostrará un código QR con

una validez de 2 horas para la descarga del APK.
3. Utiliza Tablet/celular con la app para capturar este código QR y con ello descargar
directamente el instalador APK de esa aplicación.
 4. Recordar que para poder instalar una
aplicación no contenida en Play Store es
necesario activar en la Tablet/Celular el
elemento: Ajustes > Seguridad >
Administración de dispositivos > Orígenes
desconocidos.
5. Otra posibilidad es elegir Generar >
App (guardar archivo. apk en mi ordenador)
para descargarlo al equipo y luego copiarlo
usando una memoria USB o similar.
26 6. En cualquiera de ambos casos, en la
Tablet ejecuta el instalador APK. En el cuadro de
diálogo Completar utilizando… elige Instalador
de paquetes y pulsa en Siempre.
7. En el cuadro de diálogo Argentina pulsa
en el botón Instalar.
8. En el menú de aplicaciones o en el
Escritorio pulsa sobre el icono de la nueva aplicación instalada:
Argentina

Nota:
• El APK se puede descargar al equipo y subir a DropBox para obtener una dirección de
descarga estable y a partir de esa dirección elaborar un código QR para facilitar su descarga
e instalación a otras personas.