Háblame: Tu primera app de App Inventor - 1
Háblame: Tu primera app de App Inventor
Este tutorial te guiara en el proceso de hacer una app que habla y puede
guardar frases.
Ingresa a App Inventor con tu usuario y contraseña de gmail (Google).
Teclea ai2.appinventor.mit.edu en la barra de direcciones de tu explorador, o da click en el botón naranja "Create" de App Inventor.
Usa una cuenta existente de gmail para entrar a ai2.appinventor.mit.edu
Háblame: Tu primera app de App Inventor - 2
Háblame: Tu primera app de App Inventor - 3
Inicia un Nuevo proyecto.
Nombra el proyecto "TalkToMe" ó "Hablame" (¡Sin espacios!)
Háblame: Tu primera app de App Inventor - 4
Ahora te encuentras en el Diseñador, donde desarrollas la "interfaz de
usuario" de tu app.
La ventana de Diseño, ó Diseñador, es donde tu diseñas/desarrollas la apariencia de tu app y especificas que componentes debería tener. Puedes elegir componentes de la interfaz de usuario como Botones, Imágenes y Campos de Texto y funcionalidades como Texto a Voz, Sensores y GPS.
Agrega un Botón
Nuestro proyecto necesita un botón. Da click y no sueltes el botón del mouse en la palabra "Botón" de la Paleta. Arrastra tu mouse sobre el Visor y Suelta el botón, un nuevo botón aparecerá en el Visor.
Háblame: Tu primera app de App Inventor - 5
Inicia el MIT AI2 Companion en tu dispositivo
En tu celular o tablet, da click en el icono de MIT AI2 Companion para iniciar la app. NOTA: tu celular y computadora deben estar en la misma red wifi. Asegúrate de que el wifi de tu celular este conectada a la red wifi local. Si no te puedes conectar por wifi, ve a las instrucciones para conectar tu celular con un cable USB.
Conecta App Inventor a tu teléfono para probar en tiempo real.
Una de las mejores funcionalidades del App Inventor es que puedes ver y probar tu app en un dispositivo conectado mientras las estás construyendo. Si tienes un teléfono o tablet
Háblame: Tu primera app de App Inventor - 6
Obtén el código de conexión del App Inventor y escanea o teclea en tu app
Companion.
En el menú Conectar, elige "AI Companion". Te puedes conectar ya sea: 1- Escaneando el código QR dando click en "Scan QR code" (#1). ó
Háblame: Tu primera app de App Inventor - 7
Ver tu app en el dispositivo conectado
Sabrás que tu conexión fue exitosa cuando veas tu app en el dispositivo conectado. Hasta ahora tu app únicamente tiene un botón, entonces es lo que verás. Cuando agregues más componentes al proyecto, verás que tu app cambia en tu dispositivo.
Háblame: Tu primera app de App Inventor - 8
Cambia el texto del botón
En propiedades, cambia el texto para el botón. Selecciona el texto "Texto para Botón1", bórralo y teclea "Háblame". Puedes ver que el texto del botón de tu app cambiar de inmediato.
Háblame: Tu primera app de App Inventor - 9
Agrega un componente TextoAVoz a tu app
Ve a la sección de Medios y saca un componente TextoAVoz. Suéltalo en el Visor. Notaras que se puede ver debajo de "Componentes no visibles" porque no es algo que se vea en la interfaz de usuario. Es una herramienta disponible para la app.
Háblame: Tu primera app de App Inventor - 10
Cambia al editor de Bloques
¡Es tiempo de decirle qué hacer a tu app! Da click en "Bloques" para cambiar al Editor de Bloques. Hasta ahora hemos decidido cómo debería verse la app. El Editor de Bloques nos permitirá decirle a la app cómo se debería comportar. Imagina que los botones Diseñador y Bloques son tabs – los usas para moverte de de ida y vuelta entre las áreas del App Inventor.
Háblame: Tu primera app de App Inventor - 11
El Editor de Bloques
El Editor de Bloques es donde programas el comportamiento de tu app. Hay bloques Integrados para manejar cosas de matemáticas, lógica y texto. Debajo de los integrados hay bloques que pertenecen a cada uno de los componentes de tu app. Para poder ver los bloques de cierto componente en el Editor de Bloques, primero debes agregar ese componente a tu app usando el Diseñador.
Háblame: Tu primera app de App Inventor - 12
Haz el evento click de un botón
Da click en Botón1. Da click y no sueltes el botón del mouse en el bloque cuando Botón1.Click ejecutar. Arrástralo al área de trabajo y suéltalo. Ese es el bloque que manejara lo que pasa cuando el botón de tu app es presionado. Es llamado un "Manejador de Eventos". Todos los manejadores de eventos son de color café en el App Inventor. Los manejadores de eventos son desencadenados cuando un evento es iniciado por el usuario (Por ejemplo, presionar un botón).
Háblame: Tu primera app de App Inventor - 13
Programa la acción de TextoAVoz
Da click en el control TextoAVoz. Arrastra el bloque llamar TextoAVoz1.Hablar a el Visor y suéltalo. Ese Bloque morado llama a un “procedimiento“ del App Inventor. Este procedimiento va a hacer hablar al teléfono. Como está dentro del evento Botón1.Click, va a ejecutarse cuando el botón de tu app sea presionado. Los procedimientos deben ser llamados en un evento (por ejemplo, el evento click de un botón).
Háblame: Tu primera app de App Inventor - 14
Llena la conexión mensaje en el bloque TextoAVoz.Hablar
¡Casi terminamos! Ahora tienes que decirle al bloque TextoAVoz1.Hablar que decir. Para hacerlo, da click en el cajón de Texto, arrastra un bloque de Texto y conéctalo a él conector con llamado "mensaje".
Da click en el bloque de texto y teclea "¡Felicidades! Terminaste tu primer app." (Siéntete libre de usar cualquier frase, esta es sólo una sugerencia.)
¡Pruébalo!
Ahora ve a tu dispositivo conectado y presiona el botón. ¡Asegúrate de que el volumen este alto! Deberías escuchar a tu dispositivo diciendo la frase en voz alta.
Háblame: Tu primera app de App Inventor - 15
Regresa al Tab del Diseñador
¡Ahora vamos a hacer que el teléfono diga lo que tu quieras! Regresemos al tab del Diseñador para hacerlo. Da click en "Diseñador en la parte de arriba a la derecha.
Agrega un cuadro de Texto a tu interfaz de usuario.
Del cajón de Interfaz de Usuario, arrastra un CampoDeTexto y colócalo arriba del Botón que ya se encuentra en la pantalla.
Háblame: Tu primera app de App Inventor - 16
Obtén el texto que es tecleado en el CampoDeTexto.
Obtén la propiedad texto del CampoDeTexto1. Los bloques color verde claro en el cajón CampoDeTexto1 son los "getters" y los color verde oscuro son los "setters" para el componente CampoDeTexto1. Esto funciona de la misma forma para todos los componentes del App Inventor. Estos bloques son llamados “getters” y “setters” porque se puede “obtener/get” o “poner/set” el valor que está guardado para esa parte del componente usando esos bloques.
Queremos que tu app diga lo que sea que este escrito en el bloque CampoDeTexto1.Texto (es decir, lo que sea que este escrito en el campo de texto). Arrastra al Visor el bloque getter de
Háblame: Tu primera app de App Inventor - 17
Hacer que el evento Click del Botón diga el texto que esta en el Campo de
Texto.
Saca el bloque de texto "¡Felicidades!... " y conecta el bloque CampoDeTexto1.Texto. Puedes borrar el bloque de texto arrastrándolo al bote de basura en la esquina derecha del área de trabajo.
Guardemos el Texto como una Variable.
Ahora el Texto que la app va a decir puede variar, o cambiar con ayuda de la app. Por lo tanto podemos guardar el Texto en una variable. Podemos ponerle nombre a la variable dando click en la parte “nombre” del bloque después de arrastrarla al Visor. Las variables siempre deben ser nombradas con un nombre significativo, de tal forma que si regresas a esta app en tres meses sea fácil recordar qué es lo que esta guardando con la variable. Pondremos el nombre de “textoADecir”.
Háblame: Tu primera app de App Inventor - 18
Cada variable debe tener un valor para iniciar. Como esta variable va a guardar texto empezaremos con un texto vacio.
Entonces ¿Cómo usamos la variable? La asignación original de la variable era la siguiente:
Mensaje -> CampoDeTexo1.Texto
Como ahora vamos a usar la variable “textoADecir” para el mensaje, necesitamos reemplazar
CampoDeTexo1.Texto por la variable y asignar el valor de CampoDeTexo1.Texto a la variable. Cada vez que el botón sea presionado, el valor de la variable va a ser actualizado y el mensaje correcto será pasado al control TextoAVoz1
textoADecir -> CampoDeTexo1.Texto
Mensaje -> textoADecir
¡Prueba tu app!
La funcionalidad debería ser la misma. ¿Qué sucede si cambias el orden de los bloques “llamar” y “poner”? ¡Prueba y averígualo! Describe lo que pasa y porque.
_____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________
Háblame: Tu primera app de App Inventor - 19
Guarda todas las frases que tecleas.
¿Cómo puedes guardar todas las frases que le indicamos a la app que diga? Necesitamos una forma de “almacenar” el texto que tecleamos en el CampoDeTexto. A continuación te mostramos cómo hacerlo con una lista.
Listas
Las listas son exactamente lo que parece que son. Realizan un seguimiento de ciertos artículos. Por ejemplo, puedes realizar un seguimiento de los alimentos que vas a comprar en una lista. Llamaremos la lista “alimentos”.
1. manzanas 2. naranjas 3. limones
Cada uno de estos elementos esta “indexado”, lo que significa que puedes pedir obtener el número 1 de la lista y vas a obtener “manzanas”. Si preguntas por el elemento número 2, obtendrás “naranjas”, y así sucesivamente.
En el App Inventor, cada vez que tu agregas un elemento a la lista, tu estas “agregando” a la lista, o poniendo un elemento al final de la lista. Por ejemplo, si yo quiero agregar “plátanos” a la lista, la lista final quedaría de la siguiente forma:
1. manzanas 2. naranjas 3. limones 4. plátanos
No hay discriminación en la lista al agregar elementos. Esto significa que si un elemento ya existe en la lista, puedes agregar un duplicado. Si yo quiera agregar “naranjas” a la lista, podría hacerlo y terminar con la siguiente lista: 1. manzanas 2. naranjas 3. limones 4. plátanos 5. naranjas
El resultado sería que si yo pido el elemento numero 2 el valor de retorno sería “naranjas”, pero al pedír el elemento numero 5 el valor de retorno también sería “naranjas”. Para evitar eso puedes primero revisar si el elemento ya se encuentra en la lista con el bloque ¿Está en la lista? Cosa lista. Este bloque va a regresar verdadero si el elemento ya existe en la lista y falso si no.
Háblame: Tu primera app de App Inventor - 20
SUGERENCIA: Si quieres más información sobre algún
componente, puedes dar click en el signo de interrogación a un
lado de cada componente en la paleta.
¡Listo! A guardar todas las frases en tu app.
Implementa los bloques necesarios para guardar
todas tus frases.
¡Prueba tu app! ¿Ah cambiado la funcionalidad?
¿Puedes decir si los valores se están guardando?
_____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________
Háblame: Tu primera app de App Inventor - 21
Vamos a asegurarnos de que el guardado realmente funciona agregando una
función de visualización.
Hay un par de diferentes formas en las que podemos ver qué es lo que contiene la lista. Etiquetas y VisorDeLista. Vamos a explorar la opción VisorDeLista.
El VisorDeLista tiene que agregarse en el diseñador de la paleta “Interfaz de usuario” porque permite al usuario ver algo.
El componente VisorDeLista tiene una propiedad llamada “elementos”. Es la forma en la que el componente VisorDeLista va a guardar una lista de elementos que va a mostrar. Continuando con el ejemplo de la lista de alimentos, si ponemos VisorDeLista.Elementos a “alimentos”, la lista definida será mostrada por el componente.
¿Cuál es la diferencia entre tus bloques de Háblame y los bloques de arriba?
El componente VisorDeLista tiene una propiedad llamada “Visible”. Al poner el valor de esta variable como “falso” entonces la lista será escondida de la interfaz de usuario (no será visible en la pantalla). El componente VisorDeLista será Visible (puesto en verdadero) por defecto si tu no modificas su valor.
Ya agregaste una lista a tus bloques para guardar tus frases. ¿Cómo la usarías con el
componente VisorDeLista para que puedas ver que todas tus frases se están guardando
correctamente?
Háblame: Tu primera app de App Inventor - 22
Vamos a agregar una funcionalidad de guardar selectiva a tu app.
Puede haber ciertas frases que quieres que el teléfono diga varias veces, pero puede ser una molestia tener que re-teclear la frase cada vez que quieres usarla. Ya agregamos una forma de guardar todas las frases que han sido tecleadas, pero ¿Qué pasa si sólo quieres guardar algunas de ellas? ¿Cómo
diseñarías esta funcionalidad para guardar?
Estos son algunos componentes que serán útiles:
Botón
VisorDeLista
SelectorDeLista
TinyDB
Estos son algunos grupos de Bloques que podrían ser útiles:
Listas
Procedimientos
Lógica (verdadero o falso)
Inicia listando cualquier componente o bloque adicional que podrías usar.
_____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________
Háblame: Tu primera app de App Inventor - 23
Háblame: Tu primera app de App Inventor - 24
¡Ahora codifica y pruébalo! ¿Cómo verificas que solo estas
guardando las frases que quieres?
_____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________
¿Qué pasa si quieres guardar la misma frase otra vez? ¿Cómo puedes
prevenir que eso pasé? (sugerencia: intenta mirar alrededor de las “Listas y
los bloques de “Control”)
_____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________
Háblame: Tu primera app de App Inventor - 25
¿Qué tan útil es esta app para ti en este momento? ¿Cómo puedes usar otros
componentes en App Inventor
_____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________ _____________________________________________________________________________________
Probemos agregando el componente TraductorYandex. ¿Cómo cambiaria tu
app si agregaras ese componente? ( Esto depende de ti; tú eres el diseñador!)
Haz un prototipo (dibuja la interfaz de usuario), recuerda que puedes obtener
más información del componente dando click en el signo de interrogación en
seguida del componente en la Paleta.
Háblame: Tu primera app de App Inventor - 26
Qué te llevas de este tutorial.
Para el final de este tutorial, te debes de sentir confiada con lo siguiente:
Explorando los tabs Diseñador y Bloques del App Inventor para construir lo que quieres.
Probando tus funcionalidades: es genial construir una función, pero es aún más importante asegurarse de que funciona correctamente. Siempre piensa cómo puedes verificar que estás haciendo lo que crees que estás haciendo.
Progreso incremental: Las funcionalidades se construyen una a una, de esta forma si algo en tu proyecto se “rompe” ó no funciona correctamente, tienes una idea mejor de cuál es el problema.
