Hblame: 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 contrasea de gmail (Google).

Teclea ai2.appinventor.mit.edu en la barra de direcciones de tu explorador, o da click en el botn naranja

"Create" de App Inventor.

Usa una cuenta existente de gmail para entrar a ai2.appinventor.mit.edu

Hblame: Tu primera app de App Inventor - 1

Da click en "Continue"/"Continuar" para quitar el mensaje de bienvenida.

Hblame: Tu primera app de App Inventor - 2

Inicia un Nuevo proyecto.
Nombra el proyecto "TalkToMe" "Hablame" (Sin espacios!)

Teclea el nombre del proyecto (el guin bajo es permitido pero no los espacios) y da click en Aceptar.

Hblame: Tu primera app de App Inventor - 3

Ahora te encuentras en el Diseador, donde desarrollas la "interfaz de
usuario" de tu app.
La ventana de Diseo, Diseador, es donde tu diseas/desarrollas la apariencia de tu app y especificas
que componentes debera tener. Puedes elegir componentes de la interfaz de usuario como Botones,
Imgenes y Campos de Texto y funcionalidades como Texto a Voz, Sensores y GPS.

Agrega un Botn

Nuestro proyecto necesita un botn. Da click y no sueltes el botn del mouse en la palabra "Botn" de
la Paleta. Arrastra tu mouse sobre el Visor y Suelta el botn, un nuevo botn aparecer en el Visor.

Hblame: Tu primera app de App Inventor - 4

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. Asegrate 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 telfono 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 ests construyendo. Si tienes un telfono o tablet
Android, sigue los pasos a continuacin.

Hblame: Tu primera app de App Inventor - 5

Obtn el cdigo de conexin 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 cdigo QR dando click en "Scan QR code" (#1).

2- Tecleando el cdigo en el cuadro de texto y da click en "Connect with code" (#2).

Hblame: Tu primera app de App Inventor - 6

Ver tu app en el dispositivo conectado
Sabrs que tu conexin fue exitosa cuando veas tu app en el dispositivo conectado. Hasta ahora tu app
nicamente tiene un botn, entonces es lo que vers. Cuando agregues ms componentes al proyecto,
vers que tu app cambia en tu dispositivo.

Hblame: Tu primera app de App Inventor - 7

Cambia el texto del botn
En propiedades, cambia el texto para el botn. Selecciona el texto "Texto para Botn1", brralo y teclea
"Hblame". Puedes ver que el texto del botn de tu app cambiar de inmediato.

Hblame: Tu primera app de App Inventor - 8

Agrega un componente TextoAVoz a tu app
Ve a la seccin de Medios y saca un componente TextoAVoz. Sultalo 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.

Hblame: Tu primera app de App Inventor - 9

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 cmo debera verse la app. El Editor de Bloques nos permitir decirle a la app cmo
se debera comportar. Imagina que los botones Diseador y Bloques son tabs los usas para moverte de
de ida y vuelta entre las reas del App Inventor.

Hblame: Tu primera app de App Inventor - 10

El Editor de Bloques
El Editor de Bloques es donde programas el comportamiento de tu app. Hay bloques Integrados para
manejar cosas de matemticas, lgica 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 Diseador.

Hblame: Tu primera app de App Inventor - 11

Haz el evento click de un botn
Da click en Botn1. Da click y no sueltes el botn del mouse en el bloque cuando Botn1.Click ejecutar.
Arrstralo al rea de trabajo y sultalo. Ese es el bloque que manejara lo que pasa cuando el botn 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 botn).

Hblame: Tu primera app de App Inventor - 12

Programa la accin de TextoAVoz
Da click en el control TextoAVoz. Arrastra el bloque llamar TextoAVoz1.Hablar a el Visor y sultalo. Ese
Bloque morado llama a un procedimiento del App Inventor. Este procedimiento va a hacer hablar al
telfono. Como est dentro del evento Botn1.Click, va a ejecutarse cuando el botn de tu app sea
presionado. Los procedimientos deben ser llamados en un evento (por ejemplo, el evento click de un
botn).

Hblame: Tu primera app de App Inventor - 13

Llena la conexin mensaje en el bloque TextoAVoz.Hablar
Casi terminamos! Ahora tienes que decirle al bloque TextoAVoz1.Hablar que decir. Para hacerlo, da click
en el cajn de Texto, arrastra un bloque de Texto y conctalo a l conector con llamado "mensaje".

Da click en el bloque de texto y teclea "Felicidades! Terminaste tu primer app." (Sintete libre de usar
cualquier frase, esta es slo una sugerencia.)

Prubalo!

Ahora ve a tu dispositivo conectado y presiona el botn. Asegrate de que el volumen este alto!
Deberas escuchar a tu dispositivo diciendo la frase en voz alta.

Hblame: Tu primera app de App Inventor - 14

Regresa al Tab del Diseador
Ahora vamos a hacer que el telfono diga lo que tu quieras! Regresemos al tab del Diseador para
hacerlo. Da click en "Diseador en la parte de arriba a la derecha.

Agrega un cuadro de Texto a tu interfaz de usuario.

Del cajn de Interfaz de Usuario, arrastra un CampoDeTexto y colcalo arriba del Botn que ya se
encuentra en la pantalla.

Hblame: Tu primera app de App Inventor - 15

Obtn el texto que es tecleado en el CampoDeTexto.
Obtn la propiedad texto del CampoDeTexto1. Los bloques color verde claro en el cajn 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.

Hblame: Tu primera app de App Inventor - 16

Hacer que el evento Click del Botn 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 arrastrndolo 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 despus 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 fcil recordar qu es lo que esta
guardando con la variable. Pondremos el nombre de textoADecir.

Hblame: Tu primera app de App Inventor - 17

Cada variable debe tener un valor para iniciar. Como esta variable va a guardar texto empezaremos con
un texto vacio.

Entonces Cmo usamos la variable? La asignacin 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 botn 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 debera ser la misma. Qu sucede si cambias el orden de los bloques llamar
y poner? Prueba y avergualo! Describe lo que pasa y porque.

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________

Hblame: Tu primera app de App Inventor - 18

Guarda todas las frases que tecleas.
Cmo 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 continuacin te mostramos cmo hacerlo con
una lista.

Listas

Las listas son exactamente lo que parece que son. Realizan un seguimiento de ciertos artculos. 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 nmero 1 de la
lista y vas a obtener manzanas. Si preguntas por el elemento nmero 2, obtendrs 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 pltanos a la lista, la lista final
quedara de la siguiente forma:

1. manzanas

2. naranjas

3. limones

4. pltanos

No hay discriminacin 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, podra hacerlo y terminar con
la siguiente lista:

1. manzanas

2. naranjas

3. limones

4. pltanos

5. naranjas

El resultado sera que si yo pido el elemento numero 2 el valor de retorno sera naranjas, pero al pedr el
elemento numero 5 el valor de retorno tambin sera 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.

Hblame: Tu primera app de App Inventor - 19

 SUGERENCIA: Si quieres ms informacin sobre algn
componente, puedes dar click en el signo de interrogacin 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 estn guardando?

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________

Hblame: Tu primera app de App Inventor - 20

Vamos a asegurarnos de que el guardado realmente funciona agregando una
funcin de visualizacin.
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 opcin VisorDeLista.

El VisorDeLista tiene que agregarse en el diseador 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.

Cul es la diferencia entre tus bloques de Hblame 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. Cmo la usaras con el
componente VisorDeLista para que puedas ver que todas tus frases se estn guardando
correctamente?

Hblame: Tu primera app de App Inventor - 21

Vamos a agregar una funcionalidad de guardar selectiva a tu app.
Puede haber ciertas frases que quieres que el telfono 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 slo quieres guardar algunas de ellas? Cmo
disearas esta funcionalidad para guardar?

Estos son algunos componentes que sern tiles:

Botn VisorDeLista SelectorDeLista TinyDB

Estos son algunos grupos de Bloques que podran ser tiles:

Listas Procedimientos Lgica (verdadero o falso)

Inicia listando cualquier componente o bloque adicional que podras usar.

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________

Hblame: Tu primera app de App Inventor - 22

Despus, dibuja como se ver tu pantalla con los componentes adicionales.

Hblame: Tu primera app de App Inventor - 23

 Ahora codifica y prubalo! Cmo verificas que solo estas
guardando las frases que quieres?

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________

Qu pasa si quieres guardar la misma frase otra vez? Cmo puedes

prevenir que eso pas? (sugerencia: intenta mirar alrededor de las Listas y
los bloques de Control)
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________

Hblame: Tu primera app de App Inventor - 24

Qu tan til es esta app para ti en este momento? Cmo puedes usar otros
componentes en App Inventor
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________

Probemos agregando el componente TraductorYandex. Cmo cambiaria tu

app si agregaras ese componente? ( Esto depende de ti; t eres el diseador!)

Haz un prototipo (dibuja la interfaz de usuario), recuerda que puedes obtener

ms informacin del componente dando click en el signo de interrogacin en
seguida del componente en la Paleta.

Hblame: Tu primera app de App Inventor - 25

Qu te llevas de este tutorial.
Para el final de este tutorial, te debes de sentir confiada con lo siguiente:

Explorando los tabs Diseador y Bloques del App Inventor para construir lo que quieres.
Probando tus funcionalidades: es genial construir una funcin, pero es an ms importante
asegurarse de que funciona correctamente. Siempre piensa cmo puedes verificar que ests
haciendo lo que crees que ests 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 cul es el problema.

Hblame: Tu primera app de App Inventor - 26