APP INVENTOR
PROGRAMACIÓN GRÁFICA
1. ACCESO, CAMBIO DE IDIOMA Y COMIENZO.
2. CONEXIÓN DE LA APP CON EL MÓVIL
3. COMIENZO DE UN NUEVO PROYECTO
4. INTERFAZ DE DISEÑO
Profesores del departamento:
Daniel Tamargo Díaz
María José González Iglesias
Rodolfo González Iglesias
1
1. APP INVENTOR
App Inventor parte de una idea conjunta del Instituto Tecnológico de Massachusetts y de un equipo de
Google Education. Se trata de una herramienta web de desarrollo para iniciarse en el mundo de la
programación. Con él pueden hacerse aplicaciones muy simples, y también muy elaboradas, que se
ejecutarán en los dispositivos móviles con sistema operativo Android.
App Inventor es un lenguaje de programación basado en bloques (como piezas de un juego de
construcción), y orientado a eventos. Sirve para indicarle al “cerebro” del dispositivo móvil qué queremos
que haga, y cómo.
1.1 Acceso a APP INVENTOR
Abrimos el navegador y accedemos a la web [Link] , se abre la siguiente página:
Clicamos en el botón
“Create Apps”, para
comenzar a crear una
app
Se nos abre la siguiente ventana a la que entraremos con nuestra cuenta de google:
2
Al acceder a la cuenta de Google veremos nuestra página en App Inventor.
Cambiamos el idioma, clicamos en el botón situado en la parte superior izquierda, al
lado de nuestra dirección de Gmail.
1.2 CONEXIÓN DE LA APP CON EL MÓVIL.
Arriba a la izquierda hay un botón importante: Conectar. Para poder probar cómo funciona lo que vamos
haciendo necesitamos transferirlo a un móvil, o usar el emulador incluido en App Inventor (esta opción es
menos recomendable).
Para conectar App Inventor con el móvil hacer clic en Conectar , y elegir la opción AI COMPANION. Se
abrirá una pantalla como esta:
3
Instalar MIT AI2 Companion en el dispositivo Android
Desde el Play Store del móvil , instalamos la aplicación MIT AI2 Companion.
Cuando se abra, elegiremos Connect with code (color naranja), y escribiremos el código de letras y
números (alfanumérico) que aparece en la pantalla del ordenador. Quien pueda leer códigos QR puede
hacerlo desde la pantalla ahora pulsando en el botón azul scan QR code.
Para que esto sea posible el ordenador y el dispositivo deben estar en la misma red, es decir, que deben
tomar la IP del mismo rango, típicamente del mismo enrutador (router).
1.3 INTERFAZ DEL DESARROLLADOR
4
1. Barra de menús. Desde esta barra es posible acceder al gestor de proyectos, conectar con el
emulador o tableta para el testeo en directo, generar el instalador APK, etc.
2. Gestor de pantallas. Se ofrece un combo que permite situarte en la pantalla ScreenX que se desea
editar. También se ofrece el botón Añadir ventana o bien Eliminar ventana.
3. Diseñador/Bloques. Usando estos dos botones se podrá acceder al Diseñador o al Editor de
Bloques. Con el Diseñador podremos crear las pantallas de la aplicación y situar en cada pantalla los
elementos necesarios: imágenes, textos, botones, etc. Con el Editor de bloques se podrá programar el
comportamiento de estos elementos.
4. Paleta de componentes. Se ofrecen organizados en categorías los distintos componentes que se
pueden añadir a las pantallas de la aplicación.
5. Visor. Muestra una vista previa de los componentes situados en la pantalla actual.
6. Componentes. Mediante un estructura de árbol cuyo nodo principal es el componente Screen
(Pantalla) permite acceder a los distintos elementos que hemos situado en esa pantalla. Se pulsa sobre
el componente para luego en el panel de Propiedades configurar sus parámetros. También permite
seleccionarlo y pulsar en el botón Cambiar nombre o Borrar.
7. Propiedades. Permite definir los valores de los distintos parámetros del componente seleccionado
en el panel Componentes.
8. Medios. Desde este cuadro es posible Subir o Eliminar los archivos de imagen, audio, etc que
utilizaremos en nuestra aplicación.
1.4 COMIENZO DE UN NUEVO PROYECTO
Clicamos en la pestaña “Proyectos” y después en “Comenzar un proyecto nuevo….” :
SE nos abre un cuadro de diálogo:
…ingresamos el nombre que le demos a nuestra app
por ejemplo proyecto1.
5
2. EJERCICIO 1. (Juegos antiguos)
Vamos a crear una aplicación para móviles que consiste en una página/ventana principal y 3
páginas/ventanas secundarias. En la página principal aparecerá un título, una imagen y 3 botones de
acceso a cada una de las páginas secundarias. Cada página secundaria mostrará un título, imagen, texto y
3 botones: escuchar audio, un enlace y Volver a página principal.
Paso 1.
Descargar del teams, canal APP INVENTOR , el archivo comprimido “ai2_ejercicio1” y descomprimirlo en
documentos y carpeta con vuestro nombre.
Paso 2.
Acceder a la página de la app [Link]
Paso 3. Configurar los parámetros de la aplicación.
1. Pulsa en el cuadro ColorDeFondo y elige un color claro como fondo de la pantalla, por ejemplo
el gris.
2. 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 el Escritorio del móvil.
Clicamos en aceptar.
3. En el panel de Propiedades marca la casilla Enrollable para que la pantalla principal permita
deslizarse hacia abajo. Esta configuración es importante.
4. En el cuadro Título introduce el título que mostrará la pantalla principal. Escribe Juegos
antiguos.
6
Paso 4. Añadir una etiqueta a la pantalla
1. Desde la Paleta abre la categoría Interfaz de usuario y arrastra el componente
Etiqueta para situarla en el Visor que muestra la pantalla
2. En el panel de Componentes pulsa en el ítem Etiqueta1 para seleccionarlo.
3. En el panel de Propiedades introduce Juegos antiguos como Texto
4. Define 24 el Tamaño de la letra y marca la opción Negrita.
7
Paso 5. Añadir una imagen a la pantalla
1. Desde la paleta arrastra el elemento Imagen para situarla en el Visor.
2. En el panel Componentes pulsa sobre el elemento Imagen1.
3. Pulsa en el cuadro Foto y luego pulsa en Subir archivo …
4. En el panel Subir archivo … haz clic en el botón Seleccionar archivo paralocalizar la
imagen [Link].
5. Clic en Abrir y luego clic en Aceptar.
6. En ancho, ajustamos al contenedor
7. Al cabo de unos instantes se subirá la imagen al servidor y se mostrará en la página.
Paso 6. Añadir los botones
1. Arrastra el elemento Botón desde la categoría Interfaz de usuario en el panel Paleta hasta el
Visor para situarlo debajo de la imagen.
8
2. En el panel Componentes selecciona el botón para configurar sus propiedades.
3. En el panel Propiedades introduce el texto Mario Bros correspondiente a la primera pantalla
secundaria.
4. Pulsa en Ancho y elige la opción Ajustar al contenedor.
5. Repite los pasos para añadir los otros dos botones: PacMan, Donkey Kong.
Paso 7. Añadir la etiqueta con los créditos
1. Arrastra el componente Etiqueta para situarlo debajo de los botones.
2. En el panel de Propiedades introduce como Texto: Creado por …
9
Paso 8. Crear una nueva pantalla.
1. En el Gestor de ventanas pulsa en el botón Añadir ventana.
2. En el cuadro de diálogo Nueva pantalla acepta el nombre por defecto Screen2
y pulsa en Aceptar.
3. 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.
10
4. En el panel Componentes pulsa en el ítem Screen2.
5. En el panel Propiedades marca la opción Enrollable y en el Título introduce Juegos Antiguos.
6. Desde la Paleta abre la categoría Interfaz de usuario y arrastra el componente Etiqueta para
situarla en el Visor que muestra la pantalla Screen2. En el panel de Componentes pulsa en el
ítem Etiqueta1 para seleccionarlo. En el panel de Propiedades introduce Mario Bros como
Texto. Define 24 el Tamaño de la letra y marca la opción Negrita.
7. Desde la paleta arrastra el elemento Imagen para situarla en el Visor. En el panel Componentes
pulsa sobre el elemento Imagen1. Pulsa en el cuadro Foto y luego pulsa en Subir archivo … En
el panel Subir archivo … haz clic en el botón Seleccionar archivo para localizar la imagen
[Link]. Clic en Abrir y luego clic en Aceptar. Al cabo de unos instantes se subirá la imagen al
servidor y se mostrará en la página. En ancho ajusta al contenedor.
11
8. Abre el archivo de texto mario_bros.txt que has descargado para seleccionar y copiar el texto
correspondiente a esta pantalla.
9. 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.
10. En ancho ajusta al contenedor.
Paso 9. Añadir botones a la nueva pantalla
1. Arrastra el elemento Botón desde la categoría Interfaz de usuario en el panel Paleta hasta el
Visor para situarlo debajo de la imagen. En el panel Componentes selecciona el botón para
configurar sus propiedades. En el panel Propiedades introduce el texto Escuchar audio
correspondiente a la primera pantalla secundaria. Pulsa en Ancho y elige la opción Ajustar al
contenedor.
2. Repite los pasos para añadir los otros dos botones: Wikipedia y Volver.
12
Aunque los botones aparezcan sobre el texto de la etiqueta luego en el dispositivo móvil se
mostrarán debajo.
Repite los pasos 8 y 9 para crear las pantallas Screen3 con la información del PacMan y Screen4
con la información del Donkey Kong.
Paso 10. Añadir las acciones a la pantalla Screen1
1. Despliega el combo de pantallas y elige Screen1 en el Gestor de pantallas.
13
2. Pulsa en el botón Bloques para entrar al Editor de bloques.
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.
14
5. En los bloques Texto arrastra el primer bloque para añadirlo al bloque anterior.
6. Clic en el hueco de este último bloque para escribir Screen2.
15
7. Repite los pasos anteriores para añadir los bloques de código a los botones
Botón2 y Botón3.
Paso 11. Añadir la interactividad a cada página secundaria.
Para reproducir un audio o bien mostrar el navegador web con una URL concreta es necesario
añadir a la pantalla dos componentes invisibles que realizan estas acciones respectivamente:
Player y ActivityStarter.
1. Pulsa en el botón Diseñador para regresar a la página de diseño de pantallas.
2. Sitúate en la pantalla Screen2.
3. Desde el panel de Componentes arrastra y suelta sobre la pantalla el componente Reproductor
de la categoría Medios. Se puede utilizar el componente Sonido pero no reproduce audios con
una duración superior a 12 segundos.
16
4. En el panel de Componentes haz clic sobre el ítem Reproductor1.
5. Pulsa en la casilla Origen y luego en Subir archivo. En el cuadro Subir archivo … haz clic en el
botón Seleccionar archivo para localizar y elegir el archivo mario_bros.mp3 disponible en tu
equipo.
6. Clic en Abrir y luego clic en Aceptar.
7. Desde el panel de Componentes arrastra y suelta sobre la pantalla el componente
ActivityStarter de la categoría Conectividad.
17
8. Repite los pasos anteriores para la pantalla Screeen3 y pantalla Screen4
9. En el Diseñador sitúate en la pantalla Screen2.
10. A continuación pulsa en el botón Bloques para acceder al Editor de bloques.
11. En el panel Bloques pulsa en Screen2 > Botón1.
12. Arrastra al panel derecho en blanco el bloque cuando Botón1 .Clic ejecutar …
13. Repite esta acción para los elementos Botón2 y Botón3.
14. En el panel Bloques, en la categoría Screen2 pulsa en Reproductor1. En el catálogo de bloques
disponibles arrastra el elemento llamar Reproductor1. Iniciar
18
15. De esta forma el bloque programado indicará que cuando se haga clic en el botón Botón 1 (con
la etiqueta Escuchar audio) se iniciará el audio asociado al componente Reproductor1.
16. Utiliza las instrucciones de programación de la pantalla Screen1 para asociar al botón Botón3 la
acción de abrir la ventana Screen1.
17. En el panel de Bloques pulsa en el componente ActivityStarter. Desde el listado de bloques
disponibles arrastra y sitúa dentro del bloque Cuando Botón2 .Clic ejecutar … los siguientes
bloques:
Poner ActivityStarter1 . UriDelDato. Este bloque asigna una dirección en Internet que se abrirá
cuando el usuario pulse en el botón Botón2.
Poner ActivityStarter1 . Acción. Este bloque indica qué acción del sistema Android se ejecutará.
Llamar ActivityStarter1 . IniciarActividad. Este bloque ejecutará lo programado para ese
componente.
19
18. Desde la categoría de Bloques > Texto arrastra el bloque para agregarlo a los 2
bloques Poner ActivityStarter …
19. Regresa al editor de texto para seleccionar y copiar la URL de acceso al artículo de Wikipedia
relacionado con el tema expuesto en la pantalla: [Link]
20. En el editor de bloques de AI2 haz clic en el cuadro de texto asociado al bloque Poner
[Link] como … y pulsa Ctrl+V para pegar la URL copiada.
21. En el cuadro de texto asociado al bloque Poner [Link]ón como …
sitúa la orden: [Link]
22. Repite los pasos de este apartado en las pantallas Screen3 y Screen4.
20
Paso 12. 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)
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. La descargáis al ordenador, la subís al Teams y la descargáis e instaláis en la Tablet ó el móvil.
21