Háblame: Tu primera app de App Inventor

Transcripción

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 - 1

2 Da click en "Continue"/"Continuar" para quitar el mensaje de bienvenida. Háblame: Tu primera app de App Inventor - 2

3 Inicia un Nuevo proyecto. Nombra el proyecto "TalkToMe" ó "Hablame" ( Sin espacios!) Teclea el nombre del proyecto (el guión bajo es permitido pero no los espacios) y da click en Aceptar. Háblame: Tu primera app de App Inventor - 3

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 - 4

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 Android, sigue los pasos a continuación. Háblame: Tu primera app de App Inventor - 5

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). ó 2- Tecleando el código en el cuadro de texto y da click en "Connect with code" (#2). Háblame: Tu primera app de App Inventor - 6

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 - 7

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 - 8

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 - 9

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 - 10

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 - 11

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 - 12

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 - 13

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 - 14

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 - 15

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 CampoDeTexto1.Texto. Háblame: Tu primera app de App Inventor - 16

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 - 17

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 - 18

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 - 19

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 - 20

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 - 21

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 - 22

23 Después, dibuja como se verá tu pantalla con los componentes adicionales. Háblame: Tu primera app de App Inventor - 23

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 - 24

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 - 25

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. Háblame: Tu primera app de App Inventor - 26