Machine Translated by Google

Tutoriales para principiantes de App Inventor

Machine Translated by Google

1. Cuatro tutoriales sencillos para empezar a usar App Inventor

1.1 TalkToMe: Tu primera aplicación de App Inventor 4

1.2 TalkToMe Parte 2: Agitación y entrada del usuario 23

1.3 BallBounce: Una aplicación de juego sencilla 33

1.4 DigitalDoodle: Aplicación de dibujo 47

Machine Translated by Google

Cuatro tutoriales sencillos para

Primeros pasos con la aplicación
Inventor

Tutoriales para principiantes de App Inventor ­ 3

Machine Translated by Google

TalkToMe: Tu primera aplicación de App Inventor

Este tutorial ilustrado paso a paso te guiará en la creación de una aplicación con voz.

Para empezar, visita App Inventor en la web.

Ve directamente a [Link] o haz clic en el botón naranja "Crear" de App Inventor.
sitio web.

Tutoriales para principiantes de App Inventor ­ 4

Machine Translated by Google

Inicia sesión en App Inventor con tu nombre de usuario y contraseña de Gmail (o Google).

Para iniciar sesión en [Link], usa una cuenta de Gmail existente o una cuenta de Google de tu
centro educativo. Para crear una cuenta de Gmail nueva, ve a [Link]/SignUp.

Tutoriales para principiantes de App Inventor ­ 5

Machine Translated by Google

Haz clic en "Continuar" para cerrar la pantalla de inicio.

Tutoriales para principiantes de App Inventor ­ 6

Machine Translated by Google

Iniciar un nuevo proyecto.

Nombra el proyecto "TalkToMe" (¡sin espacios!).

Escriba el nombre del proyecto (se permiten guiones bajos, no espacios) y haga clic en Aceptar.

Tutoriales para principiantes de App Inventor ­ 7

Machine Translated by Google

Ahora te encuentras en el Diseñador, donde configuras la "interfaz de usuario" de tu aplicación.

La ventana de diseño, o simplemente "Diseñador", es donde defines la apariencia de tu aplicación y

especificas sus funcionalidades. Eliges elementos para la interfaz de usuario, como botones, imágenes y
cuadros de texto, y funcionalidades como la conversión de texto a voz, sensores y GPS.

Agregar un botón

Nuestro proyecto necesita un botón. Haz clic y mantén pulsada la palabra "Botón" en la paleta. Arrastra el
ratón hasta el Visor. Suelta el botón y aparecerá uno nuevo en el Visor.

Tutoriales para principiantes de App Inventor ­ 8

Machine Translated by Google

Conecta App Inventor a tu teléfono para realizar pruebas en tiempo real.

Una de las mejores características de App Inventor es que puedes ver y probar tu aplicación mientras la
desarrollas, en un dispositivo conectado. Si tienes un teléfono o tableta Android, sigue los pasos que se indican
a continuación. Si no tienes un dispositivo, sigue las instrucciones para configurar el emulador en pantalla.
(abre una nueva página) y luego regresa a este tutorial una vez que hayas conectado el emulador a App Inventor.

Tutoriales para principiantes de App Inventor ­ 9

Machine Translated by Google

Descarga la aplicación MIT AI2 Companion desde Play Store e instálala en tu teléfono o tableta.

El método preferido para obtener la aplicación AI2 Companion es descargarla desde Play Store
buscando "MIT AI2 Companion".

Tutoriales para principiantes de App Inventor ­ 10

Machine Translated by Google

Para descargar la aplicación complementaria AI2 directamente a su dispositivo (OMITA ESTE PASO SI
(Ya descargaste la aplicación de Play Store)

Si por algún motivo no puedes conectarte a la tienda Google Play, puedes descargar la aplicación AI2 Companion como se describe
aquí.

Primero, deberá acceder a la configuración de su teléfono (n.º 1), seleccionar "Seguridad" y, a continuación, desplazarse hacia
abajo para permitir "Fuentes desconocidas", lo que permite instalar en el teléfono aplicaciones que no provienen de la Play Store.

En segundo lugar, haga una de las siguientes cosas:

A) Escanee el código QR de arriba (#2)

o

B) Haz clic en el enlace "Necesitas ayuda para encontrar..." y accederás a la página de descarga. Desde allí podrás descargar el
archivo [Link] a tu ordenador y luego transferirlo a tu dispositivo para instalarlo.

Tutoriales para principiantes de App Inventor ­ 11

Machine Translated by Google

Inicia AICompanion en tu dispositivo.

En tu teléfono o tableta, haz clic en el icono de MIT AI Companion para iniciar la aplicación. NOTA: Tu teléfono y tu
computadora deben estar conectados a la misma red inalámbrica. Asegúrate de que el wifi de tu teléfono esté
activado y de que estés conectado a la red inalámbrica local. Si no puedes conectarte por wifi, consulta las
instrucciones de configuración en el sitio web de App Inventor para saber cómo conectarte con un cable USB.

Tutoriales para principiantes de App Inventor ­ 12

Machine Translated by Google

Obtén el código de conexión de App Inventor y escanéalo o introdúcelo en tu

Aplicación complementaria

En el menú Conectar, seleccione "Compañero de IA". Puede conectarse de la siguiente

manera: 1 ­ Escaneando el código QR haciendo clic en "Escanear código QR" (#1).
o
2 ­ Escriba el código en la ventana de texto y haga clic en "Conectar con código" (#2).

Tutoriales para principiantes de App Inventor ­ 13

Machine Translated by Google

Vea su aplicación en el dispositivo conectado.

Sabrás que la conexión es exitosa cuando veas tu aplicación en el dispositivo conectado. Por ahora, nuestra
aplicación solo tiene un botón, así que eso es lo que verás. A medida que añadas más funciones al proyecto, verás
cómo cambia tu aplicación en el teléfono.

Tutoriales para principiantes de App Inventor ­ 14

Machine Translated by Google

Cambiar el texto del botón

En el panel de propiedades, cambia el texto del botón. Selecciona el texto "Texto para el botón 1", bórralo y
escribe "Háblame". Observa que el texto del botón de tu aplicación cambia inmediatamente.

Tutoriales para principiantes de App Inventor ­ 15

Machine Translated by Google

Agrega un componente de conversión de texto a voz a tu aplicación.

Ve al panel de multimedia y arrastra un componente de conversión de texto a voz. Suéltalo en el visor. Observa
que aparece en la sección "Componentes no visibles" porque no se mostrará en la interfaz de usuario de
la aplicación. Es más bien una herramienta disponible para la aplicación.

Tutoriales para principiantes de App Inventor ­ 16

Machine Translated by Google

Cambia al editor de bloques.

¡Es hora de darle instrucciones a tu app! Haz clic en "Bloques" para acceder al Editor de bloques.
Piensa en los botones Diseñador y Bloques como pestañas: úsalos para alternar entre las dos áreas de
App Inventor.

Tutoriales para principiantes de App Inventor ­ 17

Machine Translated by Google

El editor de bloques

El Editor de Bloques es donde se programa el comportamiento de la aplicación. Hay bloques integrados para gestionar
operaciones matemáticas, lógicas y de texto. Debajo se encuentran los bloques correspondientes a cada componente
de la aplicación. Para que los bloques de un componente específico aparezcan en el Editor de Bloques, primero hay que
añadir dicho componente a la aplicación mediante el Diseñador.

Tutoriales para principiantes de App Inventor ­ 18

Machine Translated by Google

Crear un evento de clic de botón

Haz clic en el panel Button1. Mantén pulsado el bloque when [Link] do . Arrástralo al espacio
de trabajo y suéltalo allí. Este bloque controlará lo que sucede cuando se pulsa el botón de tu aplicación.
Se denomina "Controlador de eventos".

Tutoriales para principiantes de App Inventor ­ 19

Machine Translated by Google

Programar la acción de conversión de texto a voz

Haz clic en el panel de TextToSpeech. Mantén pulsado el bloque [Link] . Arrástralo al

espacio de trabajo y suéltalo allí. Este bloque hará que el teléfono hable. Como está dentro de
[Link], se ejecutará cuando se haga clic en el botón de tu aplicación.

Tutoriales para principiantes de App Inventor ­ 20

Machine Translated by Google

Rellene el socket de mensajes en el bloque [Link].

¡Casi listo! Ahora solo tienes que indicarle al bloque [Link] qué decir. Para ello, haz clic en el
panel de texto, arrastra un bloque de texto y conéctalo al conector etiquetado como "mensaje".

Especifica qué mensaje debe mostrar la aplicación al pulsar el botón.

Haz clic en el bloque de texto y escribe "¡Felicidades! Has creado tu primera aplicación." (Puedes usar la frase
que quieras, esto es solo una sugerencia).

Tutoriales para principiantes de App Inventor ­ 21

Machine Translated by Google

¡Ahora pruébalo!

Ve a tu dispositivo conectado y pulsa el botón. ¡Asegúrate de tener el volumen alto! Deberías oír que el teléfono
pronuncia la frase en voz alta. (Esto funciona incluso con el emulador).

¡Buen trabajo!

Ahora pasemos a TalkToMe Parte 2 para que la aplicación responda a los movimientos y permita a los usuarios introducir
la frase que deseen.

Tutoriales para principiantes de App Inventor ­ 22

Machine Translated by Google

TalkToMe Parte 2: Agitación y entrada del usuario

Este tutorial te muestra cómo ampliar la aplicación básica TalkToMe para que responda a los movimientos del teléfono y
para que el usuario pueda hacer que el teléfono diga cualquier frase que escriba.

Ve a App Inventor en la web e inicia sesión.

Ve a [Link] y haz clic en "Crear" o inicia sesión directamente en [Link].

Tutoriales para principiantes de App Inventor ­ 23

Machine Translated by Google

Abre el proyecto "TalkToMe" en el que trabajaste en el último tutorial.

App Inventor siempre abrirá el último proyecto en el que trabajaste, por lo que es posible que accedas automáticamente a tu aplicación
TalkToMe.

Ve a la pestaña Diseñador

Es posible que tu proyecto se abra en el Diseñador. Si no es así, haz clic en "Diseñador" en la esquina superior derecha.

Tutoriales para principiantes de App Inventor ­ 24

Machine Translated by Google

Agregar un sensor acelerómetro

En el cajón de Sensores , arrastra un componente AccelerometerSensor y suéltalo en el Visor. (Es un componente

no visible, por lo que se coloca en la parte inferior de la pantalla). NOTA: Los usuarios de emuladores deben omitir
esta parte y continuar con la siguiente sección de este tutorial llamada "Di lo que quieras". (¡El emulador no
responde a los movimientos!).

Tutoriales para principiantes de App Inventor ­ 25

Machine Translated by Google

Ve al editor de bloques.

Haz clic en "Bloques" para programar el nuevo sensor acelerómetro que acabas de añadir.

Programar el evento de agitación del acelerómetro

Haz clic en el cajón AccelerometerSensor1 para ver sus bloques. Arrastra el bloque when
[Link] do y suéltalo en el espacio de trabajo.

Tutoriales para principiantes de App Inventor ­ 26

Machine Translated by Google

¿Qué queremos que haga la aplicación cuando el acelerómetro detecte temblores?

Copia y pega los bloques que se encuentran dentro del controlador de eventos `when [Link]`. Selecciona
el bloque morado y luego presiona la combinación de teclas correspondiente para copiar y pegar. Tendrás un
segundo conjunto de bloques para colocar dentro del bloque `when [Link]`.
(Alternativamente, puede arrastrar un nuevo bloque de llamada [Link] desde el cajón
TextToSpeech y un nuevo bloque de texto rosa desde el cajón Text).

Cambia la frase que se pronuncia cuando el teléfono tiembla.

Escribe algo gracioso para cuando el teléfono reaccione al agitarlo.

Tutoriales para principiantes de App Inventor ­ 27

Machine Translated by Google

¡Pruébalo!

Ahora puedes agitar tu teléfono y debería responder diciendo "¡Deja de agitarme!" (o cualquier otra frase
que hayas introducido).

Di lo que quieras

¿Tu teléfono te habla? ¡Genial! Ahora programemos el clic del botón para que el teléfono diga la frase que el
usuario haya escrito en el cuadro de texto. Vuelve al Diseñador.

Tutoriales para principiantes de App Inventor ­ 28

Machine Translated by Google

Agregue un cuadro de texto a su interfaz de usuario.

Desde el cajón de Interfaz de usuario, arrastre un cuadro de texto y colóquelo encima del botón que ya está en el
pantalla.

¡Volver al editor de bloques!

Tutoriales para principiantes de App Inventor ­ 29

Machine Translated by Google

Obtén el texto que se ha escrito en el cuadro de texto.

Obtén la propiedad de texto del TextBox1. Los bloques verdes en el panel lateral del TextBox1 son los métodos "getters" y "setters"
del componente TextBox1. Quieres que tu aplicación lea en voz alta el texto que se encuentre en la propiedad Text del TextBox1 (es
decir, lo que se haya escrito en el cuadro de texto). Arrastra el bloque getter [Link] .

Tutoriales para principiantes de App Inventor ­ 30

Machine Translated by Google

Configura el evento de clic del botón para que lea en voz alta el texto que se encuentra en el cuadro de texto.

Extraiga el cuadro de texto "felicitaciones..." e inserte el bloque [Link]. Puede eliminar el bloque de texto
rosa arrastrándolo a la papelera en la esquina inferior derecha del espacio de trabajo.

¡Prueba tu aplicación!

Ahora tu aplicación tiene dos comportamientos: Cuando se haga clic en el botón, leerá en voz alta las palabras que
estén escritas en el cuadro de texto de la pantalla. (Si no hay nada escrito, no dirá nada).
La aplicación también dirá "Deja de agitarme" cuando se agite el teléfono.

Tutoriales para principiantes de App Inventor ­ 31

Machine Translated by Google

¡Felicidades! ¡Has creado una aplicación de verdad!

Piensa en qué más podría hacer esta aplicación. Aquí tienes algunas ideas para extensiones: ­ Generador de frases aleatorias

­ Mad Libs: el jugador elige un sustantivo,

verbo, adjetivo, adverbio, persona y elige uno de una lista que

programa.

­ Aplicación Bola Mágica

8 ­ Selector de nombres ­ útil para que los profesores llamen a un alumno

También puedes experimentar con la función de conversión de voz a texto. ¡Diviértete!

Tutoriales para principiantes de App Inventor ­ 32

Machine Translated by Google

BallBounce: Una aplicación de juego sencilla

En este tutorial, aprenderás sobre animación en App Inventor haciendo que una pelota (un objeto) rebote
en la pantalla (en un lienzo).

Iniciar un nuevo proyecto

Si tienes otro proyecto abierto, ve al menú Mis proyectos y selecciona Nuevo proyecto.

Tutoriales para principiantes de App Inventor ­ 33

Machine Translated by Google

Nombre del proyecto

Llámalo algo como "Rebote de pelota". Recuerda, sin espacios. Pero los guiones bajos están bien.

Agregar un lienzo

Desde el panel de Dibujo y Animación, arrastre un componente Canvas y suéltelo sobre el visor.

Tutoriales para principiantes de App Inventor ­ 34

Machine Translated by Google

Configura la pantalla para que no se desplace.

La configuración predeterminada de App Inventor es que la pantalla de tu aplicación sea desplazable, lo que
significa que la interfaz de usuario puede extenderse más allá del límite de la pantalla y el usuario puede
desplazarse hacia abajo deslizando el dedo (como en una página web). Cuando uses un Canvas,
debes desactivar la opción "Desplazable" (desmarca la casilla) para que la pantalla no se desplace. Esto
te permitirá que el Canvas ocupe toda la pantalla.

Tutoriales para principiantes de App Inventor ­ 35

Machine Translated by Google

Cambia la altura y el ancho del lienzo para que ocupe todo el contenedor padre.

Asegúrese de que el componente Canvas esté seleccionado (#1) para que sus propiedades aparezcan en el panel de
propiedades (#2). En la parte inferior, configure la propiedad Height en "Fill Parent". Haga lo mismo con la
propiedad Width.

Tutoriales para principiantes de App Inventor ­ 36

Machine Translated by Google

Añade una pelota

Ahora que tenemos un lienzo, podemos añadir un sprite de pelota. Este también se encuentra en el
panel de Dibujo y Animación. Arrastra un componente de pelota y suéltalo en el lienzo (#1). Si quieres
que la pelota se vea mejor, puedes cambiar su propiedad Radio en el panel de Propiedades (#2).

Abre el editor de bloques.

Tutoriales para principiantes de App Inventor ­ 37

Machine Translated by Google

Abre el cajón Ball1 para ver los bloques de la bola.

Arrastra el controlador de eventos Flung

Selecciona el bloque cuando [Link] y arrástralo al espacio de trabajo. "Flung" se refiere a que el usuario
realiza un gesto de "lanzamiento" con el dedo para "lanzar" la pelota. "Flung" es un gesto similar al de un palo
de golf, ¡no como se lanza Angry Birds! En App Inventor, el controlador de eventos para este tipo de gesto se llama
cuando se ejecuta "Flung".

Tutoriales para principiantes de App Inventor ­ 38

Machine Translated by Google

Establece la dirección y la velocidad del balón. Primero, consigue los bloqueos del colocador.

Abre el cajón de bolas y desplázate hacia abajo en la lista de bloques para obtener los bloques set
[Link] y set [Link].

Tutoriales para principiantes de App Inventor ­ 39

Machine Translated by Google

Conecta los parámetros set [Link] y set [Link] al controlador de eventos Fling.

Ajusta la velocidad de la pelota para que sea igual a la velocidad del gesto de lanzar.

Coloca el cursor sobre el parámetro "velocidad" del controlador de eventos ` when [Link]` . Aparecerán los bloques `get` y `set`
para la velocidad del lanzamiento. Selecciona el bloque `get speed` e insértalo en el bloque `set [Link]` .

Tutoriales para principiantes de App Inventor ­ 40

Machine Translated by Google

Establece la dirección del balón para que sea la misma que la del gesto de lanzar.

Haz lo mismo con la dirección de la pelota. Pasa el ratón por encima del parámetro de dirección y verás aparecer el bloque " Obtener
dirección" . Selecciona ese bloque y haz clic en él para insertarlo en el bloque "Establecer dirección de la pelota".

Tutoriales para principiantes de App Inventor ­ 41

Machine Translated by Google

Pruébalo

Una buena práctica al crear aplicaciones es realizar pruebas durante el proceso. App Inventor facilita esta tarea, ya que permite una
conexión en tiempo real entre el teléfono (o emulador) y el entorno de desarrollo. Si no tienes un teléfono (o emulador) conectado,
consulta las instrucciones de conexión y luego regresa a este tutorial. (Las instrucciones de conexión se encuentran en el Tutorial
n.° 1 o en el sitio web, en la sección "Primeros pasos").

¿Por qué la pelota se queda atascada en el lateral de la pantalla?

Tras lanzar la pelota por la pantalla, probablemente notaste que se quedó atascada en un lateral. Esto se debe a que la
trayectoria de la pelota no cambió a pesar de haber chocado contra el borde del lienzo. Para que la pelota rebote en el borde de la
pantalla, podemos programar un nuevo controlador de eventos llamado "Al alcanzar el borde".

Tutoriales para principiantes de App Inventor ­ 42

Machine Translated by Google

Agregar un evento de borde alcanzado

Ve al cajón Ball1 y saca un evento when [Link] .

Tutoriales para principiantes de App Inventor ­ 43

Machine Translated by Google

Vuelve al cajón Ball1 y saca un bloque [Link].

Agrega el valor del borde para el bloque [Link].

El método [Link] requiere un argumento de borde. Observa que el evento [Link]

tiene un parámetro llamado "edge". Podemos tomar el bloque get edge de ese argumento e insertarlo
en el método call [Link] . Para acceder al bloque get edge , coloca el puntero del ratón sobre el
parámetro "edge" en el bloque when [Link] .

Tutoriales para principiantes de App Inventor ­ 44

Machine Translated by Google

Tus bloques finales deberían verse así. ¡Ahora pruébalo!

Tutoriales para principiantes de App Inventor ­ 45

Machine Translated by Google

¡Pruébalo!

Ahora, cuando lances la pelota, debería rebotar en los bordes del lienzo. ¡Buen trabajo!

Existen muchas maneras de ampliar esta aplicación.

Aquí tienes algunas ideas... ¡pero las posibilidades son infinitas!

­ Cambia el color de la pelota en función de su velocidad o del borde al que llegue.
­ Ajusta la velocidad de la pelota para que disminuya y se detenga después de ser lanzada.
­ Añade obstáculos u objetivos a la pelota para que los

golpee. ­ Introduce una paleta para interceptar la pelota, como en el juego Pong. Visita

el sitio web de App Inventor. para encontrar tutoriales que te ayuden a ampliar las funcionalidades de esta aplicación, en particular el tutorial
de minigolf .

¡Diviértete con estas extensiones o con otras que se te ocurran!

Tutoriales para principiantes de App Inventor ­ 46

Machine Translated by Google

DigitalDoodle: Aplicación de dibujo

Este tutorial te mostrará cómo dibujar una línea en la pantalla mientras el usuario arrastra el dedo.

Iniciar un nuevo proyecto

Desde la página Mis proyectos, haga clic en Nuevo proyecto. Si tiene otro proyecto abierto, vaya al menú Mis
proyectos y seleccione Nuevo proyecto.

Nombre del proyecto

Llama a este proyecto DigitalDoodle, o crea tu propio nombre para esta aplicación de dibujo.

Tutoriales para principiantes de App Inventor ­ 47

Machine Translated by Google

Configura la pantalla para que no se desplace.

La configuración predeterminada de App Inventor es que la pantalla de tu aplicación sea desplazable, lo que
significa que la interfaz de usuario puede extenderse más allá del límite de la pantalla y el usuario puede
desplazarse hacia abajo deslizando el dedo (como en una página web). Cuando uses un Canvas,
debes desactivar la opción "Desplazable" (desmarca la casilla) para que la pantalla no se desplace. Esto
te permitirá que el Canvas ocupe toda la pantalla.

Tutoriales para principiantes de App Inventor ­ 48

Machine Translated by Google

Agregar un lienzo

Desde el panel de Dibujo y Animación, arrastre un componente de Lienzo.

Tutoriales para principiantes de App Inventor ­ 49

Machine Translated by Google

Cambia la altura y el ancho del lienzo para que ocupe todo el contenedor padre.

Asegúrese de que el componente Canvas esté seleccionado (#1) para que sus propiedades aparezcan en el panel de propiedades
(#2). En la parte inferior, configure la propiedad Height en "Fill Parent". Haga lo mismo con la propiedad Width.

¡Eso es todo por hoy en el Diseñador! Ve a los Bloques.

Aunque parezca mentira, por ahora esta aplicación solo necesita un lienzo (Canvas). Acceda al editor de bloques para programarla.

Tutoriales para principiantes de App Inventor ­ 50

Machine Translated by Google

Obtén un bloque de eventos [Link]

En el cajón Canvas1, extraiga el evento when [Link] .

Tutoriales para principiantes de App Inventor ­ 51

Machine Translated by Google

Obtener un bloque de llamada [Link]

En el cajón Canvas1, extraiga el bloque del método when [Link] .

Tutoriales para principiantes de App Inventor ­ 52

Machine Translated by Google

Utilice los bloques get y set del bloque Arrastrado para rellenar los valores del bloque Dibujar línea.

El evento Canvas Dragged se repetirá muy rápidamente mientras el usuario arrastra el dedo por la
pantalla. Cada vez que se llame al bloque de eventos Dragged, se dibujará una pequeña línea entre
la posición anterior (prevX, prevY) del dedo y la nueva posición (currentX, currentY). Pase el cursor sobre
los parámetros del bloque [Link] para acceder a los bloques get que necesite. (Pase el cursor
sobre ellos, no haga clic).

Tutoriales para principiantes de App Inventor ­ 53

Machine Translated by Google

¡Pruébalo!

Ve a tu dispositivo conectado y desliza el dedo por la pantalla. ¿Ves una línea?

¡Excelente trabajo! Ahora amplía esta aplicación.

Aquí tienes algunas ideas para ampliar esta aplicación. ¡Seguro que se te ocurren muchas más!
­ Cambia el color de la tinta (y permite al usuario elegir entre una selección de colores). Consulta el tutorial de Paint Pot.
­ Cambia el fondo por una fotografía o imagen.
­ Permitir al usuario dibujar puntos además de líneas (pista: utilice el bloque DrawCircle).
­ Añadir un botón que encienda la cámara y permita al usuario tomar una foto y luego dibujar sobre ella.

Tutoriales para principiantes de App Inventor ­ 54