Hola: ¡bienvenidos a la "Hora de Código de App Inventor! Estamos aquí, en el centro de aprendizaje de móviles del MIT Me llamo Shay y yo soy Emily. Hoy vamos a aprender a crear nuestra primera app para Android La primera App se llamará "Talk to me" porque … ¡va a hablar contigo! Es bastante simple: pulsas un botón y el móvil te dice una frase en voz alta. "Welcome to App Ïnventor !" ¿Puedes hacer que diga lo que tú quieras? Así es. ¡Me parece que va a ser divertido! Está bien, vamos a empezar Para construir tu primera App, haz clic en el botón "Crear" de la página de inicio de App Inventor http://appinventor.mit.edu Necesitarás una cuenta de Google para loguearte: Puede ser una cuenta de correo de Gmail Puedes ignorar por el momento la ventana con el popup de momento Cuando entres a App Inventor la primera vez, no tendrás ningún proyecto Tendrás que hacer click en "New Project" en el menú de la parte superior Nuestra primera App se llama "Talk to me" Los nombres de proyecto en App inventor NO pueden tener espacios, así que escrite "TalkToMe" sin espacios Entrarás en la ventana de diseño en la que puedes añadir los componentes que determinan el aspecto de tu App Nuestra App va a necesitar un botón, así que busca uno en la columna de la izquierda y arrástralo al visor.
Una de las cosas más sorprendentes de App Inventor es que puedes ver la aplicación en el móvil a la vez que la diseñas Vamos a conectar el móvil para que puedas ver la forma que va tomando tu App y probar su funcionamiento a la vez. Si no tienes un dispositivo con Android, también puedes seguir este tutorial, pero tendrás que darle al pause y buscar las instrucciones para ejecutar un emulador de Android. Podrás aprender eso y muchas otras cosas de interés haciendo clic en "Guía". Para conectar tu móvil Android con App Inventor, Vete a "Conectar" en el menú de arriba y elige "AI Companion" Necesitarás instalar previamente la app "MIT AI2 Companion" en tu móvil o tablet. Es muy sencillo: haz clic en el enlace "Need help finding the companion app?" Te llevará a la tienda de "Google Play" para que instales la App para Android. Aunque lo más sencillo sería leer el código QR con un scanner de códigos QR en tu móvil También puedes instalarlo directamente desde la tienda de Android buscando "MIT AI2 Companion".
¡Bien! Una vez que ya tengas la app "MIT AI2 Companion" instalada en tu móvil, tendrás que ejecutarla en tu móvil. Si se nos cierra la ventana de conexión en App Inventor, puedes abrirla de nuevo desde el menú "Conectar" y la opción "AI Companion". Aparecerá una ventana con un código de 6 caracteres y un código QR. Ahora, desde tu móvil, presiona el botón "Scan QR code" Si tu móvil no tiene cámara, puedes teclear el código de 6 caracteres y pulsar el botón "connect with code". ¡Estupendo! Ahora tu móvil está conectado en tiempo real con App Inventor. Deberías ver en tu móvil el botón que habíamos añadido a nuestra App. A partir de ahora, todos los cambios que realices en tu app se podrán ver simultáneamente en tu móvil. ¿Parece cosa de magia, verdad? Pero ten en cuenta que si nos desconectáramos de App Inventor, ya no podríamos ver la App en el móvil. Para que la App esté permanentemente en el móvil o para pasársela al móvil de un amigo, tendrás que "empaquetarla" primero.
Pero eso ya lo veremos más adelante … Observa que en el botón que hemos añadido pone "Texto para Botón1" Vamos a ver cómo cambiarlo desde el panel de propiedades, a la derecha. Desde aquí puedes cambiar las propiedades de todos los componentes de tu App. Para cambiar el texto que aparece en el botón, haz clic en "Texto" y escribe: "Talk to me" ("háblame").
Si tienes el móvil conectado, observarás que el texto del botón ha cambiado ¡Muy bien! Sólo nos falta un componente más para esta App antes de ir al editor de bloques para empezar a programar. Vamos a "Medios" en la paleta y arrastramos un componente "Texto A Voz". Lo arrastramos a la ventana de diseño y lo soltamos … Observarás que se coloca automáticamente en la parte inferior en "Componentes no visibles". Y eso es todo en cuanto a los componentes de nuestra App. Sólo nos queda especificar qué tienen que hacer. Para ello, haremos clic en "Bloques" … Ahora estás en el "editor de bloques". Aquí es donde vas a enlazar los distintos bloques de código que determinan el comportamiento de tu App. Queremos que nuestra App "hable" al pulsar un botón. Así que iremos a "Botón1" para ver todos los bloques que pueden asociarse a ese botón Elige el bloque "Botón1.Clic" y arrástralo al área de trabajo.
Ahora tendremos que incluir los bloques que le indican a la App lo que decir cuando se pulsa el botón. Haz clic en la paleta en el componente "Texto A Voz", y observa todos los bloques asociados a "Texto A Voz" Selecciona el bloque "Texto A Voz. HablarMensaje" y arrástralo dentro del bloque anterior "Botón1.Clic". Encaja perfectamente y oirás un clic cuando se unan los dos bloques. ¡Me encanta ese ruidito! Sólo nos queda añadir una cosa más antes de probar nuestra App: Fíjate que tenemos un hueco vacío aquí para conectar otro bloque … ¡Todavía tenemos que indicarle al bloque de "Hablar mensaje" qué es lo que tiene que decir! Para ello, iremos a la paleta y seleccionaremos "Texto" en los bloques "Integrados", seleccionaremos un bloque de texto vacío, lo arrastramos … y lo encajamos junto al bloque "Texto A Voz. Hablar mensaje". ¡Qué bien suena ese clic! Ahora haz click dentro del bloque de texto vacío y escribe en él "¡Enhorabuena, has creado tu primera App!".
Perfecto: ahora vamos a probar la App. Desde nuestro móvil. presionamos el botón … Si tienes algún problema para seguir el tutorial, puedes descargarte la versión en PDF de nuestra web. ¿Eso es todo? Ehh .. ¡sí! Vale … ¡hasta luego! ¡Espera! ¡No te vayas! Es que .. pensaba que la App sería más divertida Ten paciencia, jovencita … Ahora que ya sabemos cómo funciona App Inventor … verás que tiene un potencial enorme ¿Podemos hacer que hable cuando lo agitas? ¡Sí! ¿Y hacer que el usuario pueda introducir sus propias frases? ¡Por supuesto! De hecho, es lo que vamos a hacer en nuestro próximo vídeo. Haremos que hable cuando alguien consulte su móvil y además que el usuario pueda elegir la frase que él quiera. ¡Genial! ¡Ya tengo ganas de verlo!.