[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:02.11,0:00:11.94,Default,,0000,0000,0000,,(Música) Dialogue: 0,0:00:11.94,0:00:15.40,Default,,0000,0000,0000,,¡Hola!, Bienvenidos a la "Hora de Programar" de App Inventor Dialogue: 0,0:00:15.40,0:00:18.52,Default,,0000,0000,0000,,Nosotras estamos en el Centro para el aprendizaje con dispositivos móviles del MIT. Yo soy Shay Dialogue: 0,0:00:18.52,0:00:21.93,Default,,0000,0000,0000,,Y yo soy Emily. Hoy te mostraremos lo que necesitas saber para construir tu primera aplicación para Android Dialogue: 0,0:00:21.93,0:00:24.100,Default,,0000,0000,0000,,La aplicación de hoy se llama "Talk To Me", bueno, pues porque en verdad te habla. Dialogue: 0,0:00:25.09,0:00:28.78,Default,,0000,0000,0000,,Es una aplicación sencilla: Tú presionas un botón y el teléfono te responde una frase. Dialogue: 0,0:00:29.68,0:00:31.28,Default,,0000,0000,0000,,Bienvenidos a App Inventor Dialogue: 0,0:00:31.70,0:00:33.11,Default,,0000,0000,0000,,¿Puedes hacer que diga algo? Dialogue: 0,0:00:33.11,0:00:34.12,Default,,0000,0000,0000,,¡algo así! Dialogue: 0,0:00:34.14,0:00:36.34,Default,,0000,0000,0000,,Creo que puedo entretenerme un buen rato con esto Dialogue: 0,0:00:36.37,0:00:37.92,Default,,0000,0000,0000,,Muy bien, vamos a empezar Dialogue: 0,0:00:37.94,0:00:40.22,Default,,0000,0000,0000,,Parte 1: Crear un Nuevo Proyecto Dialogue: 0,0:00:40.62,0:00:48.50,Default,,0000,0000,0000,,Para empezar a construir tu aplicación, presiona el botón "Create" desde la página principal. Dialogue: 0,0:00:48.68,0:00:56.16,Default,,0000,0000,0000,,Necesitarás una cuenta de Gmail o de tu escuela si es que esta utiliza Google Apps para educación Dialogue: 0,0:00:57.11,0:00:59.03,Default,,0000,0000,0000,,Puedes ignorar la pantalla de inicio por ahora Dialogue: 0,0:00:59.04,0:01:03.50,Default,,0000,0000,0000,,Cuando se abra la página por primera vez no verás ningún proyecto Dialogue: 0,0:01:03.66,0:01:06.35,Default,,0000,0000,0000,,Entonces presiona "New Project" en la esquina superior izquierda. Dialogue: 0,0:01:06.88,0:01:09.43,Default,,0000,0000,0000,,Nuestra primera aplicación se llamará "TalkToMe" Dialogue: 0,0:01:09.43,0:01:14.52,Default,,0000,0000,0000,,Las aplicaciones de AppInventor no pueden tener espacios Dialogue: 0,0:01:15.39,0:01:19.81,Default,,0000,0000,0000,,Ahora estas en la ventana de diseño donde puedes configurar los componentes y su distribución. Dialogue: 0,0:01:19.81,0:01:25.82,Default,,0000,0000,0000,,Nuestra aplicación necesita un componente de botón. Por lo tanto, haga clic en "Botón" y la arrastra sobre el visor y luego soltarlo Dialogue: 0,0:01:26.06,0:01:31.90,Default,,0000,0000,0000,,Una de las cosas más cuidadas sobre App Inventor es que usted puede ver su aplicación en su teléfono mientras que usted está construyendo él. Dialogue: 0,0:01:32.06,0:01:36.52,Default,,0000,0000,0000,,Vamos a conseguir su teléfono conectado de manera que se puede ver la aplicación tomar forma y probarlo a medida que avanza. Dialogue: 0,0:01:36.52,0:01:41.65,Default,,0000,0000,0000,,Ahora, si usted no tiene un teléfono o tableta Android, todavía se puede hacer este tutorial. Dialogue: 0,0:01:41.69,0:01:47.82,Default,,0000,0000,0000,,Pero, usted tendrá que hacer una pausa en este video y ve a leer las instrucciones para el inicio de un emulador de Android en tu computadora. Dialogue: 0,0:01:47.95,0:01:53.77,Default,,0000,0000,0000,,Usted puede encontrar la manera de hacer eso y también obtener una gran cantidad de otra información útil haciendo clic en "Guía". Dialogue: 0,0:01:54.25,0:01:56.95,Default,,0000,0000,0000,,Parte 2: Conecte a Teléfono Dialogue: 0,0:01:57.00,0:02:04.56,Default,,0000,0000,0000,,Ahora bien, para conseguir su teléfono Android conectado con App Inventor, vaya al menú "Conectar" y selecciona "Compañero AI". Dialogue: 0,0:02:04.74,0:02:11.26,Default,,0000,0000,0000,,Usted necesita tener Companion App Inventor aplicación en su teléfono o tableta. Es muy fácil de hacer esto: Dialogue: 0,0:02:11.26,0:02:14.85,Default,,0000,0000,0000,,Simplemente haga clic en "¿Necesitas ayuda para encontrar companion app?". Dialogue: 0,0:02:14.92,0:02:20.10,Default,,0000,0000,0000,,Esto le llevará a la tienda de Google Play para descargar la aplicación. Dialogue: 0,0:02:25.27,0:02:29.46,Default,,0000,0000,0000,,Lo mas sencillo es abrir un lector de códigos QR en su teléfono y escanear el código QR. También puede ir a la tienda Play y buscar "Compañero MIT AI2". Dialogue: 0,0:02:33.65,0:02:37.83,Default,,0000,0000,0000,,Una vez que ya tenemos MIT AI2 Companion app instalado, ábralo en su teléfono. Dialogue: 0,0:02:40.35,0:02:47.58,Default,,0000,0000,0000,,Si ha cerrado la ventana de conexión en App Inventor, haga clic de nuevo en el menú "Conectar" y selecciona "AI Companion". Dialogue: 0,0:02:47.58,0:02:52.17,Default,,0000,0000,0000,,La ventana de conexión que aparece muestra un código de seis caracteres y un código QR. Dialogue: 0,0:02:53.09,0:02:58.27,Default,,0000,0000,0000,,En la "Companion app" en su teléfono, haga clic en el botón "escanear el código QR". Dialogue: 0,0:03:03.08,0:03:10.28,Default,,0000,0000,0000,,Si usted no tiene una cámara en el teléfono puede escribir el código de seis caracteres y haga clic en "conectar con código". Dialogue: 0,0:03:11.06,0:03:18.24,Default,,0000,0000,0000,,¡Genial! Ahora el teléfono está conectado en tiempo real a App Inventor! Usted debe ver el botón que ya hemos añadido a la aplicación. Dialogue: 0,0:03:18.36,0:03:23.48,Default,,0000,0000,0000,,A partir de ahora, todos los cambios realizados en su aplicación se mostrará en el teléfono de inmediato. Dialogue: 0,0:03:23.50,0:03:29.78,Default,,0000,0000,0000,,Parece magia, ¿verdad? Bueno, si lo desconecta de la aplicación Inventor ya no vería la aplicación en el teléfono. Dialogue: 0,0:03:29.95,0:03:37.64,Default,,0000,0000,0000,,Para instalar en el teléfono de otro usuario necesitarás "emapacar" la aplicación. Pero ya hablaremos de cómo hacerlo más tarde. Dialogue: 0,0:03:39.37,0:03:41.71,Default,,0000,0000,0000,,Parte 3: Diseñe su App Dialogue: 0,0:03:42.12,0:03:47.29,Default,,0000,0000,0000,,Observe que el botón que hemos añadido dice "Text for Button1" en él. Vamos a cambiar eso. Dialogue: 0,0:03:47.63,0:03:54.47,Default,,0000,0000,0000,,Aquí está el panel de propiedades. Aquí es donde usted puede establecer las propiedades de todos los componentes en su aplicación. Dialogue: 0,0:03:54.65,0:04:01.14,Default,,0000,0000,0000,,Para cambiar el texto que aparece en el botón, haga clic en "Texto" y escriba "Talk To Me". Dialogue: 0,0:04:01.35,0:04:06.84,Default,,0000,0000,0000,,Observa, en tu teléfono conectado el texto del botón cambia. muy bueno, cierto? Dialogue: 0,0:04:09.27,0:04:14.29,Default,,0000,0000,0000,,Bien. Así que sólo tenemos un componente más para esta aplicación antes de entrar en los bloques para iniciar la programación. Dialogue: 0,0:04:14.44,0:04:22.54,Default,,0000,0000,0000,,Ir a "Media" y arrastre un componente "TextToSpeech": Haga clic en él, se arrastra sobre la vista y, suéltalo ahí. Dialogue: 0,0:04:22.72,0:04:28.58,Default,,0000,0000,0000,,Usted notará que esta en el fondo, bajo "componentes no visibles". Eso es todo en los componentes! Dialogue: 0,0:04:28.75,0:04:35.36,Default,,0000,0000,0000,,Ahora que hemos establecido los componentes de nuestra aplicación, tenemos que especificar cuáles son los componentes deben hacer. Para eso hacemos clic en "Bloques". Dialogue: 0,0:04:37.06,0:04:39.88,Default,,0000,0000,0000,,Parte 4: Programa de los Bloques Dialogue: 0,0:04:40.04,0:04:41.78,Default,,0000,0000,0000,,Y ahora estás en el editor de bloques. Dialogue: 0,0:04:41.96,0:04:47.22,Default,,0000,0000,0000,,El editor de bloques es donde se establecen los comportamientos de los componentes de la aplicación. Dialogue: 0,0:04:47.37,0:04:50.46,Default,,0000,0000,0000,,Queremos que nuestra aplicación para responder a un clic de botón. Dialogue: 0,0:04:50.66,0:04:54.73,Default,,0000,0000,0000,,Así que, vaya a "Button1" y observa todos los bloques que van con un botón. Dialogue: 0,0:04:54.88,0:04:58.33,Default,,0000,0000,0000,,Elija "Button1.Click" y suéltala en el área de trabajo. Dialogue: 0,0:04:58.44,0:05:03.14,Default,,0000,0000,0000,,Ahora tenemos que poner en los bloques lo que hay que hacer cuando se hace clic en el botón. Dialogue: 0,0:05:03.38,0:05:09.41,Default,,0000,0000,0000,,Ir al componente TextToSpeech, haga clic en él y ver todos los bloques que van con TextToSpeech. Dialogue: 0,0:05:09.42,0:05:16.38,Default,,0000,0000,0000,,Elija llamar "TextToSpeech1.Speak" y arrastrarlo hacia el bloque "cuando Button1.Click". Dialogue: 0,0:05:15.65,0:05:21.08,Default,,0000,0000,0000,,Se encaja justo dentro y se escuchará un clic cuando los bloques se conectan. Me encanta ese sonido! Dialogue: 0,0:05:21.23,0:05:24.100,Default,,0000,0000,0000,,Ahora, tenemos una cosa más que añadir antes de probar la aplicación fuera. Dialogue: 0,0:05:25.08,0:05:30.02,Default,,0000,0000,0000,,Tenga en cuenta que tenemos una toma en blanco aquí. Tenemos que decirle al bloque "Speak" qué decir. Dialogue: 0,0:05:30.03,0:05:41.24,Default,,0000,0000,0000,,Vaya al cajón texto bajo bloques "built-in". Tome un bloque de texto en blanco y llevar que más. Haga clic derecho en TextToSpeach1.Speak Dialogue: 0,0:05:41.38,0:05:43.61,Default,,0000,0000,0000,,Otro clic satisfactorio. Dialogue: 0,0:05:43.68,0:05:51.29,Default,,0000,0000,0000,,Ahora clic en ese bloque de texto vacío y escribe "¡Felicitaciones! Usted ha hecho su primera aplicación!" Dialogue: 0,0:05:52.15,0:05:54.22,Default,,0000,0000,0000,,Parte 5: Evalúe su App Dialogue: 0,0:05:54.23,0:05:57.89,Default,,0000,0000,0000,,Está bien, puede probar la aplicación ahora! Ir a su teléfono y haga clic en el botón. Dialogue: 0,0:05:58.22,0:06:00.49,Default,,0000,0000,0000,,¡Enhorabuena! Usted ha hecho su primera aplicación! < Dialogue: 0,0:06:00.81,0:06:04.65,Default,,0000,0000,0000,,Si tuviera algún problema con este tutorial se puede ver la versión escrita en nuestro sitio web. Dialogue: 0,0:06:04.76,0:06:07.08,Default,,0000,0000,0000,,Eso es todo?\NSi... Dialogue: 0,0:06:07.08,0:06:08.50,Default,,0000,0000,0000,,Bueno, hasta luego! Dialogue: 0,0:06:08.65,0:06:09.63,Default,,0000,0000,0000,,Espera, vuelve aquí! Dialogue: 0,0:06:09.90,0:06:13.75,Default,,0000,0000,0000,,Bueno, yo pensé que la aplicación sería un poco más fria - Puedo hablar conmigo mismo ... Dialogue: 0,0:06:13.92,0:06:18.95,Default,,0000,0000,0000,,Paciencia, joven! Ahora que sabemos cómo utilizar App Inventor, las posibilidades son infinitas. Dialogue: 0,0:06:19.11,0:06:21.60,Default,,0000,0000,0000,,- ¿Podemos hacer que responda si agitamos el teléfono?\N- Si Dialogue: 0,0:06:21.60,0:06:23.76,Default,,0000,0000,0000,,O dejar que el usuario escriba su propio texto?\N- ¡Por supuesto! Dialogue: 0,0:06:24.20,0:06:27.23,Default,,0000,0000,0000,,De hecho, en nuestro próximo video, eso es precisamente lo que vamos a hacer. Dialogue: 0,0:06:27.29,0:06:32.65,Default,,0000,0000,0000,,Vamos a hacerlo de modo que cuando alguien sacude el teléfono, este hable y que el usuario pueda poner en su propio texto. Dialogue: 0,0:06:32.76,0:06:34.33,Default,,0000,0000,0000,,¡Impresionante! No puedo esperar! Dialogue: 0,0:06:34.33,0:06:43.82,Default,,0000,0000,0000,,(Música)