blob:https://www.futurelearn.com/bb6cc1d1-f169-48d0-b223-e36bc7f0ae03

0:05Saltar a 0 minutos y 5 segundos Con el iniciador de IA ejecutándose en segundo plano, voy a cargar 'MIT App Inventor 2' buscándolo en Google.

0:19Saltar a 0 minutos y 19 segundos En la lista de resultados, haga clic en 'MIT App Inventor 2'. Se le llevará a la página de inicio de sesión. En la página de inicio de sesión, ingresa su ID de Gmail como su nombre de usuario y presiona 'siguiente', luego ingresa su contraseña

0:45Pase a 0 minutos y 45 segundosy presione 'siguiente'. Si es un usuario por primera vez, se le dará la bienvenida con una ventana emergente 'Bienvenido a App Inventor' que le pedirá que responda una encuesta. Voy a decir simplemente 'realizar la encuesta más tarde' por ahora y habrá otra ventana emergente de saludo que dice 'Bienvenido a App Inventor 2'. No tiene ningún proyecto en App Inventor 2. Como puede ver aquí, no hay proyectos en las ventanas del proyecto, ya que es la primera vez que me conecto. Así que para crear el proyecto, vaya y presione 'iniciar nueva ventana'.

1:18Pase a 1 minuto y 18 segundosPodemos hacer que esta ventana desaparezca haciendo clic en cualquier lugar del área gris, así que voy a hacer clic en esta área gris aquí y la ventana desaparece. Ahora estamos listos para comenzar con nuestro nuevo proyecto, especialmente con su iniciador de IA ejecutándose en segundo plano perfectamente, puedo minimizar eso y luego puede hacer clic para iniciar un nuevo proyecto. Simplemente vaya y escriba el nombre de su proyecto sin espacios. Voy a llamar a mi aplicación simplemente 'MyApp' y presionar ok. Para crear una nueva aplicación llamada 'MyApp', su proyecto la carga de inmediato.

1:50Salte a 1 minuto y 50 segundosUna vez que se carga el proyecto, la interfaz de la aplicación AI2 consta de menús y pestañas dentro de los menús y varias herramientas y componentes diferentes que se pueden colocar en su aplicación, como puede ver aquí, lo primero que puede ver es su 'Pantalla1'. Ahora me gustaría llamar su atención sobre el panel verde principal en la parte superior. Este panel verde consiste en el nombre de su aplicación que se muestra en negrita en la esquina superior izquierda. También tiene pestañas que llaman 'Screen1', agregar pantalla y pantalla remota. La pestaña Eliminar pantalla está deshabilitada ahora ya que solo tenemos una pantalla predeterminada.

2:26Pase a 2 minutos y 26 segundosEntonces, si va y agrega varias pantallas presionando la pestaña Agregar, ahí es cuando va y crea múltiples pantallas y puede cambiar entre las pantallas usando esta pestaña aquí y también puede ir y eliminar la pantalla. Ahora vayamos y veamos las pestañas más utilizadas en el panel verde en la parte superior derecha, una del Diseñador y otra es Bloques. La pestaña Diseñador ahora está deshabilitada, ya que estamos en el modo Diseñador. En el modo Diseñador, tiene la ventana de paleta, la ventana del visor, la ventana de componentes, la ventana de propiedades y la ventana de medios.

3:03Pase a 3 minutos y 3 segundosAquí es donde podrá diseñar el front-end de su aplicación, o en otras palabras, podrá diseñar la interfaz de usuario para su aplicación. Los componentes de la interfaz de usuario se pueden tomar de la pestaña de interfaz de usuario de la paleta. Esa interfaz de usuario consta de botón, casillas de verificación, imagen, etiqueta y la lista continúa. Hay otras pestañas avanzadas en la ventana de la paleta que puede usar en el futuro. La siguiente ventana es una ventana de visor. En la ventana del visor, podrá ver la pantalla de su teléfono móvil o la pantalla de su aplicación. Las ventanas de componentes muestran cuáles son todos los componentes que se utilizan en su aplicación.

3:50Pase a 3 minutos y 50 segundosPor ejemplo, si voy a usar una etiqueta y colocarla en la pantalla, la etiqueta se puede ver en la ventana de componentes; luego, nuevamente tendrá la ventana de propiedades donde puede ir y establecer las propiedades para el componente particular que está seleccionado. Por ejemplo, voy a usar aquí un botón y ahora pueden ver en la ventana de componentes que hay dos componentes, uno es 'Etiqueta1' y otro es 'Botón1'. Entonces, si quisiera cambiar el texto para el 'Button1', quisiera llamar a esto de otra manera, puedo configurar las propiedades en la ventana de propiedades, simplemente cambiaré el texto a

4:29Pase a 4 minutos y 29 segundosHaga clic en mí y verá que el nombre del botón ha cambiado aquí. Así es como puede establecer propiedades para varios componentes diferentes. Entonces, la parte más importante es la ventana multimedia. Aquí es donde carga los archivos, como imágenes, sonido, música que se requieren en su aplicación. Entonces, estas son las ventanas que están habilitadas en el modo Diseñador. Estas características le permitirán diseñar la interfaz de su aplicación. Ahora echemos un vistazo al back-end de su aplicación. Para ver el back-end de la aplicación, cambiamos al modo Bloques. Para entrar en el modo Bloques, haga clic en la pestaña Bloques. Ahora estás en el modo Bloques.

5:13Pase a 5 minutos y 13 segundosAquí es donde establece la acción de los elementos que se utilizan en el modo de diseñador. Ahora me gustaría llamar su atención sobre las ventanas que están disponibles en el modo Bloques. En el modo Bloques, obviamente, tendrá una ventana llamada Bloques, aquí es donde puede usar bloques de código con varias opciones diferentes. Estos son todos los bloques integrados que puede utilizar. Puede establecer acciones para los elementos que se utilizan en el modo Diseñador haciendo clic en los elementos. Digamos, por ejemplo, 'Botón1', ¿qué sucede cuando se hace clic en el 'Botón1'? Cuando se hace clic en 'Botón1', podemos ir y decir establecer 'Etiqueta de texto' en

6:04Pase a 6 minutos y 4 segundos"Hola". Entonces, este es su modo Diseñador en el que tiene sus elementos de diseñador o los componentes y este es el front-end, esto es lo que se ve desde el frente y las acciones para la aplicación se establecen en el back-end que no puede ser visto por el usuario, pero puede ser visto por el desarrollador. Entonces, aquí es donde establece las acciones. Entonces, cuando se hace clic en 'Botón1', configurará 'Etiqueta1texto' en "Hola", lo que significa que se mostrará. Aquí viene la parte más importante. ¿Cómo se prueba este programa? Esa es la razón por la que instalamos aiStarter. Este aiStarter es realmente muy útil ahora porque ahora vamos a ir a la pestaña de conexión.

6:55Pase a 6 minutos y 55 segundosEn la pestaña de conexión, tenemos este emulador. Cuando haces clic en el emulador, mientras tu aiStarter se está ejecutando, dice “Iniciando el emulador de Android. Espere, esto puede tardar uno o dos minutos ”. Esto iniciará un simulador de su teléfono móvil. ¡Aquí vamos! El emulador se ha cargado ahora. Lo que sea que esté en la interfaz de usuario de su aplicación ahora se muestra en su emulador y si desea probar su aplicación, ya hemos configurado acciones para estos elementos de la aplicación. La acción que hemos configurado para el botón es que, cuando se presiona 'Click Me', el texto de la 'Etiqueta1' se mostrará como “Hola”.

7:33Pase a 7 minutos y 33 segundosEse es el back-end, el usuario no puede ver los bloques de código, esto es lo que hemos configurado. Cuando se hace clic en Button1, establezca 'Label1.text' en "Hola". Así que volvamos al Diseñador, saquemos nuestro emulador, probemos esta aplicación. "Haz clic en mí", dice "Hola". Entonces la aplicación está funcionando correctamente. Me gustaría simplificar esto en tres sencillos pasos.

8:10Pase a 8 minutos y 10 segundosPaso 1: diseña su aplicación utilizando los elementos y componentes de la interfaz de usuario de la aplicación.

8:18Pase a 8 minutos y 18 segundosPaso 2: entra en el modo Bloques y establece acciones para esos elementos de la aplicación.

8:24Pase a 8 minutos y 24 segundosPaso 3: Ve a tu emulador y prueba tu aplicación.

Paso 1: Conozca la plataforma

22 comentarios

Venugopal Srikanth Sogathur es un experimentado profesor de secundaria que actualmente enseña en Brisbane, Australia. Sus áreas de enseñanza incluyen informática y física. En este video, Srikanth proporciona una descripción general del software App Inventor.

Srikanth creó esta serie de videos usando un software de screencast gratuito en su computadora portátil. Queríamos mostrarle cómo podría ser un recurso creado por un maestro, así como demostrar el proceso de creación de la aplicación. Esperamos que te sean de utilidad.

Si ya ha utilizado App Inventor, puede ir directamente al siguiente paso.

3 pasos para crear su aplicación

1. Diseña tu aplicación en la pestaña 'Diseñador'.
2. Establezca acciones para los componentes de su aplicación en la pestaña 'Bloques'.
3. Pruebe su aplicación en el emulador aiStarter.

© QUT 2018. Todos los derechos reservados. CRICOS No. 00213J