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