Programación con App Inventor 2
CLASE 03
Para obtener tu recompensa debes estar registrado en nuestra plataforma y publicar tu trabajo
🧠 ¿Qué aprendo?
- Conocer el entorno de programación de AppInventor 2.
💡 ¿Qué es App Inventor 2?
🧠 App Inventor 2 (AI2) es la versión mejorada de una herramienta de programación creada por el MIT (Instituto Tecnológico de Massachusetts) y que fue adoptada por Google para sus usuarios como solución para crear de una forma sencilla aplicaciones para dispositivos Android.
💡 Acceso al editor de App Inventor 2
Paso 1. Ir a la página de MIT App Inventor 2
🧠 Ingresa a http://appinventor.mit.edu/, solo debes hacer clic en el botón naranja Create Apps!
🧠 Ingresa con tu cuenta de Gmail
🧠 Al ser la primera vez que inicias con esta herramienta, aún no tienes proyectos
Paso 2. Crear un nuevo proyecto
🧠 Puedes cambiar el idioma de la herramienta
🧠 Para crear un nuevo proyecto hacemos clic en: «Comenzar un proyecto nuevo»
Paso 3. La Interfaz de Usuario: El Diseñador
🧠 La herramienta de diseño nos permite seleccionar los componentes de la App y definir el interfaz de usuario de la misma (botones, cuadros de texto, etiquetas, etc.)
Paso 4. La Interfaz de Usuario: El Editor de Bloques
🧠 El comportamiento o funcionamiento de nuestra aplicación se programa mediante bloques en el editor de bloques
🧠 Tipos de Componentes
💡 Existen 2 tipos de componentes en App Inventor 2:
- Visibles: Se ven en el panel Visor de la pantalla del Diseñador. Son visibles para el usuario en la aplicación y el usuario puede interactuar con ella directamente y ayudar a construir la interfaz de usuario de la aplicación.
- No visibles: No se ven en el panel Visor de la página del Diseñador pero sí en la parte inferior en la sección: Componentes no visibles. Realizan tareas necesarias como guardar un archivo en el dispositivo, leer datos de un sensor, reproducir un audio, mostrar en pantalla un aviso, etc.
🧠 Los Bloques de Programación
💡 Cada componente tiene su propio catálogo de bloques. Los bloques se clasifican en 3 tipos:
1. Bloques de propiedades
Cada componente tiene su propio conjunto de propiedades que describen sus características. Así el componente Botón tiene propiedades como, por ejemplo, Color de fondo. Algunas de estas propiedades se pueden configurar inicialmente desde el Diseñador. En otras ocasiones se pueden modificar en tiempo de ejecución mediante el correspondiente bloque. Los bloques de propiedades son de color VERDE y permiten leer el valor de una propiedad del componente (verde claro) o bien establecer el valor de esa propiedad (verde oscuro).
2. Bloques de métodos
Los métodos son las funcionalidades que un componente puede hacer. Por ejemplo, el componente de Sonido debería poder reproducir la música cuando sea necesario. Esto se hace mediante el uso de un método llamado Play. Algunos métodos utilizan parámetros para recuperar o almacenar valores. Los bloques de métodos son de color MORADO.
3. Bloques de eventos
Los bloques de eventos se utilizan para captar las acciones del usuario, de la ejecución de la aplicación (inicio, finalización, foco …) … Dentro de estos bloques de eventos se sitúan el resto de bloques de propiedades o de métodos como respuesta programada a ese evento. Por ejemplo: podemos modificar el texto de un botón cuando el usuario pulsa en él (evento Button.Click). Los bloques de eventos son de color AMARILLO MOSTAZA.
🧠 Mi Primer Proyecto: Programación por Eventos
💡 Ahora diseñaremos nuestra primera aplicación llamada: «HolaMundo» para conocer nuestro entorno de desarrollo. Para ello hacemos clic en «Comenzar un proyecto nuevo»
💡 Inmediatamente al crear un proyecto, se muestra la página del Diseñador de Pantallas.
💡 Arrastra el control gráfico “CampoDeTexto” a la pantalla “Screen1” y observe lo que sucede
💡 Arrastre un “Botón” a la pantalla “Screen1”
💡 Una muy buena recomendación o práctica de programación, es renombrar los objetos gráficos con un estándar. Se usará esta forma:
💡 Se presiona el botón “Cambiar nombre” para cambiar cada objeto gráfico
💡 El siguiente paso es cambiar las propiedades (que se encuentran a la derecha) de cada objeto visual utilizado hasta lograr el efecto deseado
💡 Es momento de programar: El objetivo es que al presionar el botón, aparezca el texto “Hola Mundo” en el Campo de Texto. Para ir al editor de bloques se debe presionar el botón “Bloques”
💡 En “Bloques” aparecen los objetos visuales definidos; allí radica la importancia de nombrarlos bien con estándares:
💡 Se da clic en “btnPresionar” (el botón) y aparecen los eventos:
💡 Arrastra esa pieza del rompecabezas que representa un evento a la pantalla:
💡 Ahora es el turno del objeto Campo de Texto, al dar clic en este, nos muestra todos los eventos, acciones y cambio de valor de propiedades que pueden hacerse:
💡 Observa que la pieza se acopla perfectamente al evento del botón:
Ahora es darle un valor al “campo de texto”, para ello en la sección de “Integrados” seleccione “Texto” y luego clic a la primera pieza, arrástrela hasta que se acople a la pieza de cambio de valor de propiedad del “Campo de Texto”
💡 Escriba el texto “Hola Mundo” entre las comillas dobles como se ve en la imagen:
💡 Eso es todo, es momento de probar la aplicación. Hay que dar clic en el menú de “Connect” y allí a «AI Companion»
💡 Posteriormente escanear el código QR con nuestra aplicación AI2 Companion desde el celular
📋 Ejercicio 02: Añadiendo Voz y Manejando más Eventos
💻Descripción
💡 En este ejercicio vamos a aprender a diseñar una aplicación con dos características nuevas:
- Incorporar el elemento multimedia TextoAVoz
- Añadir un nuevo botón para manejar dos eventos diferentes
💻Diseño
💡 Tu diseño tendría que verse más o menos así:
⚠️ Recuerda seleccionar el elemento TextoAVoz y configurar el idioma en español (es)
💻Programación
Las Sentencias Condicionales
🧠 Una sentencia condicional es plantearse una pregunta para actuar de una forma u otra según la respuesta. Por ejemplo, si llueve, abriré el paraguas. Si por el contrario no llueve, lo cerraré. Si hace frío, me pondré el abrigo. Si hace calor, me lo quitaré. Si es de noche, encenderé una luz. Si por el contrario es de día, la apagaré.
💡 El bloque Si no, se ejecutará cuando no se cumpla la condición principal.
📋 Ejercicio N° 3: Verificar si una persona es mayor o menor de edad
💻Descripción
💡 En este ejercicio vamos a aprender a diseñar una aplicación con las siguientes características:
- Utilizar etiquetas para mostrar mensajes
- Introducir datos numéricos
- Realizar una acción de acuerdo a los datos introducidos
Si Edad >= 18 entonces
Mostrar “Eres mayor de edad”
De lo contrario
Mostrar “Eres menor de edad”💻Diseño
💡 Tu diseño tendría que verse más o menos así:
⚠️ Recuerda que la propiedad SóloNúmeros del componente txtEdad debe estar activada y que la etiqueta lblRespuesta debe tener su propiedad texto en blanco (nada escrito)
💻Programación
¡Estamos listos, a construir!
💰Recompensa: 10 Monedas de Oro – 5 Cristales de Experiencia
✅ Con el siguiente enlace podrás ingresar a tu cuenta de PictoBlox:
App Inventor 2: Learn coding and program apps online
➡️ RETO 01: Cambiando Colores
💡 Utiliza la información del Ejercicio N° 2: «Añadiendo Voz y Manejando más Eventos» para elaborar una aplicación que tenga 3 botones y que al presionar un determinado botón cambie el color de fondo por el nombre del botón correspondiente, a la vez el botón que ha sido presionado debe cambiar a un color diferente (en el ejemplo está gris oscuro con letras blancas) y volver a su color original cuando otro botón sea presionado.
➡️ RETO 02: Aumentado Característica
💡 Utiliza la información del ejercicio anterior para añadir más características, la aplicación debe ser capaz de «Hablar» y decirnos que botón ha sido presionado para el cambio de color de fondo. De igual manera debe tener una etiqueta en la parte superior (en el ejemplo la etiqueta tiene un tamaño de 36 con un color de fondo blanco y un color de texto rojo) que también mostrará el color al que debió cambiar el fondo.
💻 Tu diseño tendría que verse más o menos así:
➡️ RETO 03: Contraseña Correcta
💡 Utiliza la información del Ejercicio N° 3: «Verificar si una persona es mayor o menor de edad» para crear una aplicación que compare una contraseña numérica (por ejemplo 12345) y pregunte al usuario por la contraseña y muestre en una etiqueta si la contraseña es correcta o incorrecta. Además de ello si la contraseña es correcta el fondo se pintara de verde y una voz nos dirá: Acceso permitido y si la contraseña es incorrecta el fondo se pintará de rojo y la voz nos dirá: Acceso denegado.
Pista: Para que la contraseña escrita por el usuario no se vea debes colocar el elemento CampoDeContraseña en vez de un CampoDeTexto
💻 Tu diseño tendría que verse más o menos así:
Recuerda
App Inventor 2 es un entorno de desarrollo de aplicaciones para dispositivos Android. Se trata de una aplicación web por lo que todas las tareas se realizan en un navegador (Google Chrome por ejemplo), de tal manera que todos los proyectos que se vayan realizando se quedan almacenados en la nube.
