I.E.D.
COMPLEJO EDUCATIVO INTEGRAL SOPO
“Paz, Educación, Progreso”
TUTORIAL – APPINVENTOR
Docente: Isabel Nagles
Objetivo: Que el estudiante entienda qué es programar, conozca la estructura mínima de un programa en
Appinventor y pueda elaborar su primera aplicación móvil.
“Programar es como dar instrucciones claras a un robot o a una persona para que
haga algo, paso a paso.”
o Programar es dar instrucciones claras y ordenadas.
o La computadora no “adivina”, sigue instrucciones exactas.
Tutorial: APPINVENTOR - QUIZZ
Este tutorial te guiará a través de la creación de una aplicación simple para un Quizz. 🚀
1. Diseñando la pantalla (Designer)
1. Abre un nuevo proyecto en App Inventor.
2. En diseñador, agrega una Etiqueta (Label). Nombra esta etiqueta Puntos Aquí mostraremos los puntos
que obtuvo por las respuestas correctas.
3. Arrastra un componente de Imagen (Image). Aquí mostraremos el banner de título, debes modificar el
ancho, alto y en foto debe tener el escudo, IED CEIS, abajo nombre de la APP y logo de la APP o
escudo del área de Pensamiento Científico y Tecnológico. Este puedes hacerlo en Power Point y luego
tomar una captura de pantalla, para subirla en la propiedad Foto de la imagen1:
4. Arrastra una Etiqueta (Label) desde la paleta de componentes a la pantalla. Nombra esta etiqueta
Pregunta. Esta será el lugar donde aparecerá el enunciado de la pregunta.
5. Arrastra Botones (Button) uno debajo del otro. Nombra estos botones: opcion_A, opcion_B y
opcion_C. Estos serán los botones que el jugador presionará para responder.
6. Arrastra un Boton (Button) y nombralo Salir
7. Finalmente, arrastra un Componente de Notificador (Notifier) desde la sección "Interfaz de usuario".
El notificador nos permitirá mostrar mensajes de alerta. No es visible en la pantalla del diseñador, pero
es muy útil.
2. Programando los bloques (Blocks)
Ahora viene la parte divertida: ¡darle vida a nuestro quiz! Aquí es donde le decimos a la app qué hacer.
Variables
Usaremos dos variables de lista para guardar la información de nuestro quiz. Una lista será la base de datos de
preguntas, y la otra nos ayudará a llevar el control de la pregunta actual.
1. Haz clic en la pestaña "Bloques".
2. Haz clic en "Variables" y arrastra dos bloques de "inicializar variable global como".
3. Nombra la primera variable Puntos
4. Nombra la segunda variable Preguntas.
5. Nombra la tercera variable preguntaActual.
6. Para Preguntas y preguntaActual, ve a "Listas" y arrastra el bloque "crear una lista vacía".
7. Para puntos, arrastra el primer bloque de Matemáticas "0".
Creando las Preguntas 📝
1. Ve a los bloques de Screen1 (la pantalla principal).
2. Arrastra el bloque "cuando [Link]".
3. Dentro de la lista Preguntas, cada lista interna representará una pregunta con toda su información. La
información debe ir en el siguiente orden:
Índice 1: Enunciado de la pregunta (Texto)
Índice 2: Respuesta A (Texto)
Índice 3: Respuesta B (Texto)
Índice 4: Respuesta C (Texto)
Índice 5: Respuesta Correcta (Texto, debe coincidir exactamente con una de las respuestas
anteriores)
Índice 6: Explicación (Texto)
Índice 7: Nombre de la imagen (Texto, por ejemplo, "[Link]"). Recuerda que las imágenes
deben subirse a App Inventor en la sección de Medios del diseñador.
Aquí tienes un ejemplo de cómo se verían los bloques para una pregunta:
Cargando una pregunta 🔄
Ahora necesitamos una función para mostrar una pregunta al jugador.
1. Crea un nuevo procedimiento y nómbralo Preguntar.
2. Dentro de este procedimiento, usa el bloque de control : Si entonces else
3. Usa el bloque preguntaActual para guardar la pregunta que se mostrará. Puedes usar el bloque de lista
"seleccionar elemento de la lista" y elegir un número al azar de la lista de Preguntas.
4. Ahora, usa bloques "poner" para llenar los componentes de la pantalla con la información de la
preguntaActual.
o poner [Link] a → seleccionar elemento de la lista de preguntaActual con
índice 1.
o poner Opcion_A.Texto a → seleccionar elemento de la lista de preguntaActual con
índice 2.
o poner Opcion_B.Texto a → seleccionar elemento de la lista de preguntaActual con
índice 3.
o poner Opcion_C.Texto a → seleccionar elemento de la lista de preguntaActual con
índice 4.
o poner [Link] a → seleccionar elemento de la lista de preguntaActual con
índice 7.
5. En el bloque Else coloca en la etiqueta pregunta : Haz Finalizado, cambia el tamaño de letra a 20 y
coloca los botones de respuesta invisibles y el botón de salir visible
o poner [Link] a → Haz Finalizado
o poner [Link]ño de letra a → 20
o poner Opcion_A.Visible a → Falso
o poner Opcion_B.Visible a → Falso
o poner Opcion_C.Visible a → Falso
o poner [Link] a → Verdadero
Aquí tienes un ejemplo de cómo se verían los bloques
Finalmente, necesitamos iniciar el quiz cuando la app se abra.
1. Ve a los bloques de Screen1 (la pantalla principal).y en el bloque "cuando [Link]".llama a
tu procedimiento Preguntar.
Verificando la respuesta ✅
Cuando el jugador presione un botón, necesitamos verificar si la respuesta es la correcta.
1. Haz clic en "btnRespuestaA" y arrastra el bloque "cuando [Link]".
2. Dentro de este bloque, usa un bloque "si... entonces... si no".
3. La condición "si" debe comparar el texto del botón presionado ([Link]) con la
respuesta correcta de la lista preguntaActual (índice 5).
4. Si son iguales:
o Usa el [Link] para poner el puntaje que va obteniendo, por cada respuesta correcta
súmale 10 puntos
o Usa el Notifier para mostrar un mensaje con la explicación (índice 6 de preguntaActual).
o Llama al procedimiento mostrarPregunta para pasar a la siguiente.
5. Si no son iguales:
o Usa el Notifier para mostrar un mensaje para decir que la respuesta es incorrecta y la
explicación (índice 6 de preguntaActual) 🙁
6. Llama el procedimiento preguntar para que coloque en pantalla la siguiente pregunta
Aquí tienes un ejemplo de cómo se verían los bloques:
Repite estos mismos pasos para los Opcion_B y Opcion_C, cambiando la referencia al texto del botón
correspondiente.
¡Y listo! Con estos pasos, tu quiz ya está funcionando. Puedes añadir más preguntas a la lista Preguntas para
que el quiz sea más largo y divertido. ¡Mucha suerte! ✨
Programando el botón Salir
Cuando el jugador presione el botón Salir, necesitamos que cierre la aplicación
Generando La APP para instalar ▶
Finalmente, para generar el instalador en Generar seleccionamos la 1ra opción App para Android (apk):
Luego aparecerá una barra de progreso:
Finalmente dos opciones, un código QR para descargarlo directamente en el celular y otra opción para
descargar el instalador al computador
Tutorial: APPINVENTOR – TUTORIAL o EXPLICACION TEMÁTICA
Este tutorial te guiará a través de la creación de una aplicación simple para un tutorial. 🚀
1. Diseñando la pantalla (Designer)
8. Abre un nuevo proyecto en App Inventor.
9. En diseñador, agrega una Etiqueta (Label). Nombra esta etiqueta Titulo
10. Arrastra un componente de Imagen (Image). Aquí mostraremos el banner de título, modifica el alto,
ancho y en Foto debe tener el escudo, IED CEIS, abajo nombre de la APP y logo de la APP o escudo del
área de Pensamiento Científico y Tecnológico. Este puedes hacerlo en Power Point y luego tomar una
captura de pantalla, para subirla en la propiedad Foto de la imagen1:
11. Arrastra una Etiqueta (Label) desde la paleta de componentes a la pantalla. Nombra esta etiqueta
Pregunta. Esta será el lugar donde aparecerá el enunciado de la pregunta.
12. Arrastra Botones (Button) uno debajo del otro. Nombra estos botones: Siguiente y Salir.
13. Finalmente, arrastra un Componente de Notificador (Notifier) desde la sección "Interfaz de usuario".
El notificador nos permitirá mostrar mensajes de alerta. No es visible en la pantalla del diseñador, pero
es muy útil.
2. Programando los bloques (Blocks)
Ahora viene la parte divertida: ¡darle vida a nuestro tutorial! Aquí es donde le decimos a la app qué hacer.
Variables
Usaremos dos variables de lista para guardar la información de nuestro tutorial. Una lista será la base de datos
de pasos, y la otra lleva la información del paso actual y por último paso nos ayuda a llevar el control del paso
en el que va.
8. Haz clic en la pestaña "Bloques".
9. Haz clic en "Variables" y arrastra dos bloques de "inicializar variable global como".
10. Nombra la primera variable Paso
11. Nombra la segunda variable Pasos.
12. Nombra la tercera variable PasoActual.
13. Para Pasos y PasoActual, ve a "Listas" y arrastra el bloque "crear una lista vacia"
14. Para Paso, arrastra el primer bloque de Matemáticas "0".
Creando los Pasos 📝
4. Ve a los bloques de Screen1 (la pantalla principal).
5. Arrastra el bloque "cuando [Link]".
6. Dentro de la lista Pasos, cada lista interna representará un paso con toda su información. La información
debe ir en el siguiente orden:
Índice 1: Titulo del Paso (Texto)
Índice 2: Nombre de la imagen (Texto, por ejemplo, "[Link]"). Recuerda que las imágenes
deben subirse a App Inventor en la sección de Medios del diseñador.
Índice 3: Explicación (Texto)
Aquí tienes un ejemplo de cómo se verían los bloques:
Cargando los pasos 🔄
Ahora necesitamos una función para mostrar los pasos.
6. Crea un nuevo procedimiento y nómbralo Explicar.
7. Dentro de este procedimiento, usa el bloque de control : Si entonces else
8. Usa el bloque pasoActual para guardar la pregunta que se mostrará. Puedes usar el bloque de lista
"seleccionar elemento de la lista" y elegir el Paso que sigue de la lista Pasos.
9. Ahora, usa bloques "poner" para llenar los componentes de la pantalla con la información de la
pasoActual.
o poner [Link] a → seleccionar elemento de la lista de pasoActual con índice
1.
o poner [Link] a → seleccionar elemento de la lista de pasoActual con índice
2.
o poner [Link] a → seleccionar elemento de la lista de pasoActual con
índice 3.
10. En el bloque Else coloca en la etiqueta pregunta : Haz Finalizado, cambia el tamaño de letra a 20 y
coloca los botones de respuesta invisibles y el botón de salir visible
o poner [Link] a → Haz Finalizado
o poner [Link] a → Una imagen de finalizado
o poner [Link] a → “ “
o poner [Link] a → Verdadero
Aquí tienes un ejemplo de cómo se verían los bloques
Finalmente, necesitamos iniciar el tutorial cuando la app se abra.
2. Ve a los bloques de Screen1 (la pantalla principal).y en el bloque "cuando [Link]".llama a
tu procedimiento Explicar.
Mostrando el siguiente Paso ✅
Cuando el jugador presione el botón Siguiente, necesitamos mostrar el siguiente paso, entonces llamaremos el
procedimiento Explicar
¡Y listo! Con estos pasos, tu tutorial ya está funcionando. Puedes añadir más pasos a la lista Pasos para que el
tutorial sea más completo. ✨
Programando el botón Salir
Cuando el jugador presione el botón Salir, necesitamos que cierre la aplicación
Generando La APP para instalar ▶
Finalmente, para generar el instalador en Generar seleccionamos la 1ra opción App para Android (apk):
Luego aparecerá una barra de progreso:
Finalmente dos opciones, un código QR para descargarlo directamente en el celular y otra opción para
descargar el instalador al computador