Instrucciones del Tutorial para App Inventor

Bola de Cristal En este tutorial vas a crear un app que funciona como una bola de cristal. Los usuarios pensarán en

una pregunta como por ejemplo “¿ganaré mi siguiente partido de futbol? y después de sacudir el

teléfono podrán ver la respuesta de la bola de cristal.

Para empezar:

Iniciar sesión en App Inventor: ● Abre la página http://appinventor.mit.edu/

● Haz click en el botón naranja “Create” (esquina superior derecha)

● Ingresa utilizando tu cuenta de Gmail y contraseña

● Configura la conexión de tu teléfono del emulador utilizando los siguientes enlaces

● Para las instrucciones de configuración ve a la siguiente página:

https://sites.google.com/site/appinventormegusta/instalacion

● Haz click en “Continue” en la ventana emergente

● En la esquina superior derecha hay un boton con una imagen de un mundo, ahí puedes

seleccionar “Español” para continuar con el resto del tutorial.

● Crea un nuevo proyecto llamado “BolaDeCristal”. (Elige “Projectos -> Comenzar un proyecto

nuevo” )

Descarga the Assets ● Descarga la imagen de la bola de cristal de: http://bit.ly/crystalballTC

Diseñando la Interfaz de la Aplicación en el Diseñador

Crea la Pantalla1 Nota: Es una buena idea tener el hábito de crear una pantalla de “Bienvenida” en tus aplicaciones,

App Inventor no te permite poner ninguna pantalla delante de la Pantalla1. Entonces si tu programas

la Pantalla1 para ser la pantalla principal y después decides que quieres una pantalla de bienvenida

delante de ella, no podrás hacerlo porque no iniciaste la aplicacion de esa forma. Te enseñaremos a

crear una pantalla de Bienvenida que se conecta a la pantalla principal en los tutoriales Bola de Cristal

y Bote de Pintura.

Agrega la etiqueta Bienvenida a la Pantalla1 ● Arrastra una etiqueta de la Paleta Interfaz de Usuario a la pantalla.

● Da click en Cambiar nombre (esta en la parte de abajo de los Componentes) y cambia el

nombre a "EtiquetaBienvenida".

● En el panel Propiedades, cambia el campo Texto a “Bienvenido”

Agrega el Boton Entrar a la Pantalla1 • Arrastra un Botón de la Paleta Interfaz de Usuario a la pantalla.

• Da click en Cambiar nombre y cambia el nombre a "BontonEntrar".

1

Instrucciones del Tutorial para App Inventor

• En el panel de Propiedades, cambia el campo Texto a “Entrar a la Bola de Cristal”

Crea la pantalla BolaDeCristal

Agrega la pantalla BolaDeCristal ● Da click en Añadir ventana… el botón se encuentra en la barra verde en la parte de arriba.

● Ponle el nombre de “BolaDeCristal” a la ventana.

● Ahora verás que el nuevo título “BolaDeCristal” se muestra en el panel Visor y el panel

Componentes. Nota: puedes elegir la ventana en la que vas a trabajar en el menú desplegable

junto al botón Añadir Ventana.

Agrega las etiquetas con las instrucciones ● Arrastra una Etiqueta de la Paleta Interfaz de Usuario a la pantalla.

● Click en Cambiar nombre y cambia el nombre a “EtiquetaPregunta”.

● En el panel Propiedades, cambia el campo Texto a “Qué es lo que quieres saber?”

● Arrastra una Etiqueta de la Paleta Interfaz de Usuario a la pantalla.

● Click en Cambiar nombre y cambia el nombre a “EtiquetaInstruccion”.

● En el panel Propiedades, cambia el campo Texto a “Sacude la bola de cristal y todo será

revelado”

Agrega la Bola de Cristal ● Arrastra un Botón de la Paleta Interfaz de Usuario a la pantalla.

● Click en Cambiar nombre y cambia el nombre a "TextoFortuna".

● En el panel Propiedades, borra “Texto para Botón1” en el campo Texto.

● En el panel Propiedades, cambia la Imagen a la imagen de la Bola de Cristal que descargaste

anteriormente. Da click en Subir archivo… para subir la imagen.

Agrega el Acelerometro ● En la Paleta Sensores, arrastra un componente Acelerómetro .

● Nota: si vas a probar esta aplicación con el emulador agrega el boton “Sacudir”

Programando la App en el Editor de Bloques

Escribe el codigo para ir de la Pantalla1 a la pantalla BolaDeCristal ● Selecciona Pantalla1 (usa el menú desplegable en la barra verde de arriba)

● Da click en el botón Bloques en el lado derecho de la barra verde de arriba.

● En la sección Bloques debajo de Pantalla1, elige BotonEntrar y arrastra hacia afuera un

manejador de eventos cuando BotonEnter.Click.

● En los Bloques en la sección Integrados, elige Control y arrastra hacia afuera abrir otra

pantalla Nombre de la pantalla. Ubica el bloque dentro del manejador de eventos click.

● Debajo de Integrados, elige Texto y arrastra hacia afuera un cuadro de Texto “ “ y conectalo al

bloque abrir otra pantalla. Cambia el texto a “BolaDeCristal”. Nota: asegurate de que escribes

BolaDeCristal de la misma manera que cuando creaste la ventana.

2

Instrucciones del Tutorial para App Inventor

Cambia a la pantalla BolaDeCristal para programarla ● Selecciona la pantalla BolaDeCristal para que se muestre en el Visor.

Escribe el código para imprimir la respuesta cuando el telefono es sacudido

● En los Bloques debajo de BolaDeCrista, saca un manejador de eventos cuando

Acelerómetro1.Agitar para el Acelerómetro.

○ Nota: Si estás usando el botón “Sacudir” (en caso de que uses el emulador) entonces

usa cuando BotonSacudir.Click.

● En los Bloques debajo de BolaDeCrista, Elige TextoFortuna y arrastra hacia afuera poner

TextoFortuna.Texto como. Ubica el bloque dentro de el evento Agitar o Click.

● En los Bloques, en la sección Integrados, abre Listas y arrastra hacia el Visor el bloque toma un

elemento al azar lista. Conecta el bloque a poner TextoFortuna.Texto como.

● En Integrados, abre de nuevo Listas y arrastra hacia el Visor el bloque construye una lista y

conectalo al bloque toma un elemento al azar lista.

● En Integrados, abre Listas y arrastra hacia el Visor cuatro cuadros de Texto y conectalos a la

lista que creaste en el paso anterior. Necesitaras dar Click en el cuatro azul de la lista y agregar

más cadenas a la lista arrastrandolas y conectandolas. Cambia el texto de cada uno de los

cuadros de texto a “Si”, “No”, “Tal vez” y “El tiempo lo dirá”.

Escribe el código para borrar la respuesta cuando tocas la pantalla ● En Bloques, arrastra al Visor un evento cuando TextoFortuna.Click del botón TextoFortuna.

● En Bloques, selecciona TextoFortuna y arrastra poner TextoFortuna.Texto como al Visor.

Conecta el bloque dentro del evento Click.

● En Integrados selecciona Texto y arrastra un cuadro de Texto al Visor. Conectalo al bloque

poner TextoFortuna.Texto como. Deja el texto vacío.

Descarga y prueba tu App! ● Guarda tu aplicación (Proyectos -> Guardar proyecto)

● Click en Generar -> App (generar código QR para el archivo .apk)

y espera a que la computadora genere el código QR.

● Escanea el código QR con una App para escanear códigos y

descarga la App a tu celular para instalarla.

● Prueba tu App.

Hackea tu app! ● Cambia el tipo de letra, colores, etc.

● Agrega nuevas respuestas a tu lista!

● Agrega sonidos de campanadas cuando tu app es sacudida.

3

Instrucciones del Tutorial para App Inventor

Bote De Pintura En este tutorial crearás una aplicación que permite al usuario dibujar líneas y puntos de colores en la

pantalla.

Para empezar ● Inicia sesión en “App Inventor”

● Crear un nuevo proyecto llamado "BoteDePintura"

Diseñando la Interfaz de la Aplicación en el Diseñador

Crea la Pantalla1

Agrega la etiqueta Bienvenida a la Pantalla1 ● Arrastra una Etiqueta (Label) de la Paleta Interfaz de Usuario (User Interface Palette) a la

pantalla.

● Da click en Cambiar nombre (Rename) y cambia el nombre a "EtiquetaBienvenida"

● En el panel Propiedades (Properties), cambia el campo Texto a “Bienvenido”

Agrega el botón Enter a la Pantalla1 ● Arrastra un Botón (Button) de la Paleta Interfaz de Usuario a la pantalla.

● Da click en Cambiar Nombre (Rename) y cambia el nombre a "BotonEntrar".

● En el panel de Propiedades (Properties), cambia el campo Texto a “Entrar a Bote de Pintura”

Crea la Pantalla para el Bote de Pintura

Agrega la pantalla BoteDePintura ● Da click en Añadir Ventana… el botón se encuentra en la barra verde en la parte de arriba, y

ponle de nombre “BoteDePintura”.

● ¿Puedes ver ahora el título?

Agrega los Botones de Colores ● Ahora, agregarás 3 botones para cambiar el color de pintura. En primer lugar, agrega un botón

a la pantalla llamado “BotonRojo”. Cambia el color de fondo a rojo en el panel de propiedades

(properties) y el texto a "Rojo".

● Haz otro botón llamado "BotonVerde" con verde para el color y "Verde" para el texto.

● Haz el tercero llamado "BotonAzul" con azul para el color y "Azul" para el texto.

Acomoda los Botones ● Alinea los botones uno al lado del otro, arrastrándolos a un arreglo horizontal (Horizontal

Arrangement) que se encuentra en la Paleta de Posición (Layout Palette). Vas a tener que

ajustar el ancho del arreglo y de los botones para que "Se ajuste al padre..." (Fill parent...)

para hacer que el arreglo llene toda la pantalla. ¿El diseño se ven mejor ahora? ¿Cómo

cambió?

4

Instrucciones del Tutorial para App Inventor

Crea el Espacio para Dibujar ● Añade un lienzo (canvas) llamado "LienzoParaDibujar". (El lienzo está en la Paleta de dibujo y

animación - Drawing and Animation Palette). Ajusta la altura a 300 píxeles y el ancho para que

vaya a través de toda la pantalla (Pista: Hiciste lo mismo para el arreglo horizontal).

Agrega un Boton para Borrar ● Añade otro botón llamado "BotonParaLimpiar" con el texto "Limpiar". Este botón borra la

pantalla.

Programando la Aplicación en el Editor de Bloques ● Haz clic en el botón de Bloques (Blocks) en la parte izquierda de la barra verde de la parte

superior.

Escribe código para ir de la Pantalla1 a la Pantalla BoteDePintura ● Selecciona la Pantalla1 que se muestra en el panel Visor (Viewer Panel).

● En Bloques, en Pantalla1, elije el botón Entrar y arrástrale un controlador de eventos

Cuando... HagaClick (When...Click) para el BotonEntrar.

● En Integrados, abre el cajón de control (control drawer) y arrastra abre otra pantalla

NombreDePantalla (open another screen screenName). Coloca el bloque dentro del

controlador de eventos Click.

● En Bloques, abre el cajón de texto (Text Drawer) y arrastra el Cuadro de Texto (Text Box).

Conectalo al bloque de la llamada de abrir otra pantalla (open another screen). Cambia el

texto para que diga "BoteDePintura".

Cambia a programar la pantalla BoteDePintura ● Selecciona la pantalla BoteDePintura

● Ahora el editor de bloques estará en blanco.

Programa los Botones de Colores ● Programa los botones de colores. Primero, encuentra el controlador de eventos click de

BotonRojo y arrástralo hasta el Editor de bloques. Este dirá "cuando BotonRojo.Click hacer."

(when RedButton.Click do). Ahora llenarás los bloques para decirle qué hacer cuando se haga

click en el BotonRojo. Busca el bloque para establecer el color de la pintura del lienzo y ponlo

en el controlador de eventos BotonRojo. Este dirá "poner. LienzoParaDibujar.Color de Pintura

como “ (set DrawingCanvas.PaintColor to.). Agrégale un bloque de color rojo (pista: busca en

bloques "built-in"). ¿Qué hace este código?

● Ahora programa los botones azul y verde de la misma manera.

Programa los botones para Limpiar ● Programa el botón para limpiar. Encuentra el controlador de eventos click del

BotonParaLimpiar (al igual que los de los botones de color). Ahora prográmalo para limpiar el

lienzo. (Pista: Hay un bloque para LienzoParaDibujar - DrawingCanvas que se llama llamar

LienzoParaDibujar.limpiar (call DrawingCanvas.clear).

5

Instrucciones del Tutorial para App Inventor

Agrega código para dibujar puntos ● Ahora vas a agregar código para que cuando se toque el lienzo se dibuje un punto en ese

lugar. Encuentra el controlador de eventos de cuando LienzoParaDibujar tocado (when

DrawingCanvas touched) y arrástralo al editor de bloques. Las variables “x” y “y”

proporcionadas por el controlador de eventos representan el punto que se toca en la pantalla.

Utiliza el procedimiento DibujarCirculo (DrawCircle). Arrastra la variables “x” y “y” del

controlador de eventos hacia los espacios de “x” y “y” del procedimiento DibujarCirculo; para

dibujar un círculo en el punto en el que pantalla fue tocada. La variable r del procedimiento

DibujarCirculo representa el radio del círculo en píxeles. 5 es un buen número para empezar.

(pista: busque en bloques "built-in").

Prueba tu Aplicación Construye tu aplicación y prueba los botones de color, el botón para limpiar y funcionalidades de

toque (touch) del teléfono. ¿Los botones cambian el color de la pintura? ¿Se dibuja un circulo cuando

tocas? ¿El botón para limpiar quita toda la pintura?

Agrega código para Dibujar Líneas ● Ahora vas a añadir código para que cuando el usuario arrastre el dedo en el lienzo dibuje una

línea. Encuentra el controlador de eventos de LienzoParaDibujar arrastrado (DrawingCanvas

dragged). Un evento de arrastre viene con 7 argumentos. Se trata de tres pares de

coordenadas “X” y “Y” que muestran la posición de su dedo hacia donde se inició el arrastre,

la posición actual de su dedo, y la posición inmediatamente anterior de su dedo. También hay

un sprite, que vamos a ignorar para este tutorial. Ahora encuentra el procedimiento de

LienzoParaDibujar (DrawingCanvas) llamado DibujarLinea (DrawLine). El procedimiento dibuja

una línea desde la posición anterior (x1, y1) a la posición actual (x2, y2). Establece los

argumentos para que se dibuje una línea desde la posición anterior del dedo a la posición

actual del dedo.

○ Nota: por diversión, también puedes ver lo que sucede si dibujas líneas desde la

posición inicial a la posición actual.

Pruebba tu Aplicación ● Prueba tu trabajo. Intenta dibujando líneas y curvas.

Agrega Variables para dibujar puntos de varios tamaños ● Ahora vas a actualizar tu aplicación para agregar dos botones para cambiar el tamaño del

punto dibujado para cuando se toca la pantalla. En primer lugar vamos a añadir una variable

llamada TamañoDePunto (DotSize). Ajusta el valor inicial de TamañoDePunto (DotSize) a 8. Ve

Built-in -> Variables y saca el bloque inicializar nombre global a (initialize global name to).

Cambiar el nombre a "TamañoDePunto" y cambie al número 8 (busca en Matemáticas).

● Actualiza el Procedimiento DibujarCirculo (DrawCircle) para dibujar un punto con el radio de

TamañoDePunto (recuerda que originalmente lo estableciste en 5 píxeles). Ahora cuando se

tocas la pantalla, el círculo dibujado será del tamaño del número de la variable de

TamañoDePunto. (Pista: usa el obtener Tamaño de Punto global - get global Dot Size)

● Ahora regresa al Diseñador para añadir el BotonGrande y BotonPequeño a la pantalla. Utiliza

6

Instrucciones del Tutorial para App Inventor

otro arreglo horizontal para alinearlos con el botón de borrar. Haz el texto "Puntos Grandes" y

"Puntos Pequeños"

● En el Editor de bloques encuentra el controlador de eventos Click para el BotonPequeño y

utilizalo para configurar el TamañoDePunto a 2 para cuando se haga click en el

BotonPequeño. Ahora haz lo mismo para el BotonGrande, pero establece el TamañoDePunto

a 8.

Prueba tu Aplicación ● Prueba tu aplicación en el telefono celular.

Hackea tu Aplicación! Personaliza tu Aplicación:

● Utiliza el componente de la cámara para tomar fotos de tus amigos y establecerlos como

fondo de pantalla de manera que puedas dibujar sobre ellos.

● Use un control deslizante (slider) para cambiar el tamaño del punto de forma continua.

● Hazlo para que el usuario pueda ver qué color está seleccionado.

Recursos

Videos en YouTube • Video del Profesor Wolber, Parte 1: http://www.youtube.com/watch?v=gHPae2B5pN0

• Video del Profesor Wolber, Parte 2: http://www.youtube.com/watch?v=L1_ATVJiiLI

• Video del Profesor Wolber, Parte 3: http://www.youtube.com/watch?v=XGXFJxrYBc0

• Video del Profesor Wolber, Parte 4: http://www.youtube.com/watch?v=q39n6JwrdPk

• Video de Chris Groff, Parte 1: http://www.youtube.com/watch?v=31bi9tWOLcY

• Video de Chris Groff, Parte 2: http://www.youtube.com/watch?v=JX8Gn7FLcHY

Tutoriales “MIT App Inventor”: http://appinventor.mit.edu/explore/ai2/tutorials.html

7

Instrucciones del Tutorial para App Inventor

AplastaTopo En esta app vas a poder crear un juego que tiene un topo que brinca al azar alrededor de la pantalla

cada medio segundo. Si el usuario toca exitosamente al topo, entonces el puntaje se incrementa por

un punto.

Para comenzar ● Inicia sesión en el App Inventor

● Crea un nuevo proyecto llamado “AplastaTopo”

● Descarga la imagen del topo de bit.ly/moleimage

Diseñando la Interfaz de la Aplicación en el Diseñador

Cambiar el Título de la Pantalla ● Cambia el título de la pantalla a “AplastaTopo” en el panel de propiedades del Diseñador.

¿Puedes ver que se muestra el nuevo título?

Agregar el Lienzo, Botones y Sonido ● Agrega un lienzo llamado “MiLienzo”. Establece la altura a 300 pixeles y el ancho para que se

expanda en toda la pantalla. (Pista: Ya haz logrado hacer lo mismo en el tutorial de Bote de

Pintura).

● Ahora, vas a agregar el boton para reiniciar el juego. Agrega un boton a la pantalla llamado

“BotonReinicio”. Cambia el texto a “Reiniciar.”

● A continuación agrega una etiqueta. Vas a utilizar esta etiqueta para mostrar el puntaje del

juego, por lo tanto hay que renombrarla a “EtiquetaPuntaje”. Cambia el texto a “Puntaje:---”

● Después, agrega un componente de sonido. Notarás que cuando lo agregas al lienzo aparece

debajo de la pantalla. ¿Tienes alguna idea de porqué? Esto se debe a que el sonido es un

componente no visual. Renombra el componente de sonido a “Ruido”.

Agregar el Componente Reloj ● Ahora, vas a agregar un componente de reloj para utilizarlo como cronómetro o temporizador

para que la app pueda saber cuando es tiempo de mover al topo en la pantalla. Renombra al

reloj a “RelojTopo”, y establece su IntervaloDelTemporizador a “500” milisegundos para

hacer que el topo se mueva cada medio segundo.

● Asegúrate de que TemporizadorHabilitado esta seleccionado para que el temporizador este

activado.

Agregar el Topo ● Usando la paleta de Dibujo y animación, agrega un SpriteImagen al lienzo, y nómbralo “Topo”.

Establece la Foto a la imagen del topo que descargaste anteriormente. Asegúrate que el

SpriteImagen este activado, y que Visible esté seleccionado. Alto y Ancho se establecerán

automaticamente.

● A continuación, vas a cambiar las propiedades que controlan los movimientos del topo. La

8

Instrucciones del Tutorial para App Inventor

posición inicial ( representada por las coordenadas X y Y) fue determinado por el lugar donde

colocaste al topo cuando fue arrastrado a MiLienzo. Puedes mover al topo en la pantalla.

Deberás observar cómo X yY cambian.

● La Dirección representa a la dirección en que el topo se moverá. Vamos a cambiarlo a 0.

También establece la Velocidad a 0 ya que no quieres que tu topo se mueva sobre una línea.

En lugar de eso, vas a hacer que brinque de un lugar a otro cambiando su posición. Cambia el

Intervalo a 500 porque queremos que se mueva cada 500 milisegundos.

Programando la App en el Editor de Bloques Abre el Editor de Bloques

Escribir un Procedimiento para mover al topo ● Agrega un bloque de como procedimiento ejecutar desde el panel de

Integrados->Procedimientos. Puedes seleccionar el texto “procedimiento” para renombrar el

bloque. Cambialo a “MoverTopo”.

● En la parte de “ejecutar” del procedimiento “MoverTopo”, agrega el bloque que mueve al

Topo a una nueva posición de X y Y. Pista: Estará en la sección de Topo dentro del Lienzo.

● Despues configura las coordenadas X y Y a la posición donde se moverá el topo. Las

coordenadas pueden ser cualquier número mientras se mantenga dentro del lienzo. Para la

coordenada X, puede ser entre 0 (el borde izquierdo del lienzo) y el ancho del lienzo menos el

ancho de la imagen del topo. Para la coordenada Y, puede ser entre 0 ( el borde inferior del

lienzo) y la altura del lienzo menos la altura de la imagen del topo. Deseamos que el topo se

mueva al azar a una nueva posición impredecible en cada salto, por lo tanto vas a establecer

los valores de X y Y a números aleatorios en los rangos explicados anteriormente ( entre 0 y el

borde del lienzo). Puedes encontrar el bloque de enteros aleatorios en el panel

“Matemáticas”. Configura el primer valor del número aleatorio a 0. En el siguiente espacio,

borra el bloque de número y en su lugar agrega un bloque de resta. Establece los valores para

restar Topo.Ancho de MiLienzo.Ancho para la coordenada X, y MiLienzo.Alto menos Topo.Alto

para el valor Y.

Agregar código para llamar al procedimiento MoverTopo cada medio segundo ● Utiliza el bloque cuando RelojTopo.Temporizador ejecutar para llamar a tu procedimiento

MoverTopo del panel Procedimientos. ¿Qué es lo que hace este código? ¿Cómo sabe que

debe ejecutarse cada medio segundo? Pista: ¿cuál fue la configuración que estableciste para

las propiedades de este componente?

Probar tu App ● Prueba tu app. ¿Se mueve el topo de manera aleatoria alrededor de la pantalla cada medio

segundo?

Escribir un Procedimiento para Cambiar el Puntaje ● Crea una variable llamada “puntaje” para representar el puntaje del juego. Establece su valor

inicial a 0.

9

Instrucciones del Tutorial para App Inventor

● Toma un bloque de procedimiento y nómbralo “ActualizaPuntaje”. En su interior coloca el

bloque que cambia el texto de la EtiquetaPuntaje que hiciste anteriormente.

● Vas a configurar el texto para mostrar “Puntaje:” y el puntaje actual, para eso es necesario

utilizar unir. Puedes encontrar el bloque de union en el panel de Texto.

● Agrega en la primera mitad del bloque unir el texto “Puntaje:” y la segunda a la variable que

creaste para el puntaje.

Agregar códico para incrementar el puntaje cuando se aplasta al Topo ● Encuentra el manejador de evento para cuando el topo es tocado. ¿Recuerdas los

manejadores de evento del Bote de Pintura?

● Primero vas a utilizar el bloque inicializar global para incrementar la variable de puntale. Vas a

necesitar un bloque de suma para establecer el nuevo valor del puntaje (el valor previo) + 1.

● Después, queremos mostrar el nuevo puntaje, entonces vas a necesitar llamar al

procedimiento ActualizaPuntaje que habías creado para cambiar la etiqueta desde el panel de

Procedimientos.

● Llama a Ruido.Vibrar por 100 milisegundos para hacer vibrar al teléfono en el bloque del

componente Ruido, y llama a MoverTopo para hacer que el topo cambie de posición.

Probar tu App • Prueba tu app al jugar el juego. ¿Se incrementa el puntaje si logras aplastar al topo?

Programar el botón Reiniciar para reiniciar el puntaje • Encuentra el manejador de eventos click para el boton de reinicio. Obten el bloque para inicializar el

puntaje global y colócalo dentro. Establece el valor del puntaje a 0. Una vez más, deberás llamar a

ActualizaPuntaje, de esta manera el nuevo puntaje se mostrará en la pantalla.

Probar tu App ● Prueba tu app jugando con la aplicación y utilizando el botón de reinicio. ¿Se mueve el topo

de manera aleatoria cada medio segundo? ¿ El puntaje se incrementa si logras aplastarlo? ¿ El

botón de reinicio funciona?

Hackear tu App! ● Agrega un sonido al juego, para que en lugar de vibrar el juego tenga un sonido. Necesitarás

actualizar el componente de sonido y el manejador de evento para tocar al topo

● ¿Puedes agregar un segundo topo?

● ¿O puedes mover al topo más rápido cada vez que un nuevo nivel es alcanzado?

Recursos

Videos de YouTube • Video de Chris Groff’s Parte 1: http://www.youtube.com/watch?v=X-0zwa-BqG8

• Video de Chris Groff’s Parte 2: http://www.youtube.com/watch?v=BOprKoivALQ

• Video de Chris Groff’s Parte 3: http://www.youtube.com/watch?v=iNzLmqNtW5c

10

Instrucciones del Tutorial para App Inventor

• Video de Professor Wolber’s Parte 1: http://www.youtube.com/watch?v=uj8b19S1F50

• Video de Professor Wolber’s Parte 2: http://www.youtube.com/watch?v=sP30C29J44w

• Video de Professor Wolber’s Parte 3: http://www.youtube.com/watch?v=NCgmyoHWiE4

• Video de Professor Wolber’s Parte 4: http://www.youtube.com/watch?v=3BWOE9Gulhk

• Video de Professor Wolber’s Parte 5: http://www.youtube.com/watch?v=tkjjDfOa3ZA

11

Instrucciones del Tutorial para App Inventor

Inventa Tu Propia App Trabaja de manera individual o en parejas para diseñar y desarrollar tu propia aplicación

Trata de utilizar las herramientas que has aprendido: ● Pantalla de Bienvenida

● Eventos

● Variables

● Listas

● Procedimientos

● Camera

● Botones

● Acelerómetro

● Etiquetas

● Sprites de Imagenes

● Temporizador

● Sonido

Obtener retroalimentación del usuario ● Muestra tu app a tu grupo, familia y amigos. ¿Les gusta tu app? ¿la utilizarían? ¿es fácil de

entender/utilizar? ¿Tienen alguna sugerencia para mejorarla?

Recursos

Videos de YouTube ● Observa los videos o las instrucciones de tutoriales anteriores si deseas recordar cómo se

utiliza un componente determinado

● Tutoriales de MIT App Inventor: http://appinventor.mit.edu/explore/ai2/tutorials.html

12