Introducción a App Inventor


javitecnotic - Posted on 20 May 2020

Autor: 
Javier Prieto

Las próximas semanas vamos a aprender a diseñar aplicaciones para teléfonos móviles. Para ello utilizaremos App Inventor, el cual está asociado a nuestra cuenta de Google.

A la hora de desarrollar los contenidos de la unidad didáctica, vamos a tomar como referencia principal, el curso de Centro de Recursos y Formación del Profesorado en TIC de la Junta de Castilla y León.

El curso se estructura en cuatro capítulos, que a su vez se divide en una serie de apartados. Cada uno de estos apartados tiene asociado un videotutorial, los cuales se encuentran alojados en el siguiente canal de Youtube:

https://www.youtube.com/playlist?list=PLEZrE8DZj4Jwptg1ENFAPSps_UjA1qPcj

 

A continuación, se muestra la estructura de capítulos y apartados del curso, y también las tareas que deberémos realizar asociadas a cada uno de los bloques:

 

PRIMER PARTE: INTRODUCCIÓN

donde aprendemos a acceder a la web de AppInventor y presentamos la sección de diseñador y la pantalla de bloques.

     1.1 Acceso a AppInventor
     1.2 Panel de diseñador y bloques
     1.3.1 Menú de proyectos
     1.3.2 Emular proyectos en el móvil a través de AICompanion
     1.3.3 Emular proyectos en el ordenador
     1.3.4 Menú general
     1.3.5 Menú de ayuda
     1.4 Menú derecho

 

SEGUNDA PARTE: PRIMEROS PASOS.

Conocemos cuatro paletas básicas y diseñamos nuestra primera aplicación, en la que la imagen de un androide nos saluda al pulsar un botón.

     2.1 Paleta de interfaz de usuario
     2.2 Paleta de disposición
     2.3 Paleta de medios
     2.4 Paleta de sensores
     2.5 Actividad Guiada 01

 

TAREA 1: realizar la aplicación "hola mundo"

Apoyándote en la información que aparece en el siguiente videotutorial:

https://www.youtube.com/watch?v=dLvLUS8VTkM&list=PLEZrE8DZj4Jwptg1ENFAPSps_UjA1qPcj&index=25&t=0s

 

Debes diseñar una aplicación que contenga los siguientes elementos:

- Una ventana de 200x200 pixels que contenga el logotipo de Android. Este logotipo debe tener un movimiento continuo que simule que está levantando y bajando la mano. Este movimiento debe repetirse cuatro veces. Para ello puedes descargar las siguientes imágenes:

 

- Debajo del logotipo de Android, debemos crear una etiqueta con el siguiente texto "Agita el móvil", tal como se muestra en la siguiente imagen:

 

- Por último, cuando agitemos el móvil debe reproducirse una voz que diga la siguiente frase: "hola mundo".

 

TERCERA PARTE: Comenzando a programar.

Aprendemos la paleta de dibujo y animación y trabajamos con cuatro grupos de bloques. Además, conseguimos crear nuestra primera aplicación: un Arkanoid, el mítico juego de los 80.

3.1 Paleta de dibujo
3.2 Bloques de control
3.2.1 Ejemplo SiEntoncesSino
3.2.2 Ejemplo SiEntoncesSino2
3.3 Bloques de lógica
3.4 Bloques de matemáticas
3.4.1 Ejemplo PorCada
3.5 Bloques de texto
3.5.1 Ejemplo Mientras
3.6 Actividad Guiada 02

 

TAREA 2: diseña tu propio juego Arkanoid

Apoyándote en la información que aparece en el siguiente videotutorial:

https://www.youtube.com/watch?v=y88TZYC9P7U&list=PLEZrE8DZj4Jwptg1ENFAPSps_UjA1qPcj&index=18

 

Debes crear un juego Arkanoid con las siguientes características:

- El juego tendrá en la parte superior, una ventana en la cual se irá registrando la puntuación obtenida por el jugador.

- En la parte central de la pantalla, se incorporará un lienzo de fondo (Paleta>>Dibujo y animación) con imagen que simule un cielo estrellado.

- En la parte inferior de la pantalla, se incorporará un botón con el texto "Comenzar el juego"

En relación con el lienzo:

- En la parte superior del lienzo se dispondrán doce ladrillos dispuestos en cuatro columnas y tres filas. Arriba los ladrillos de color amarillo, en la fila del medio los ladrillos color naranja, y en la fina inferior los ladrillos de color morado.

- Los ladrillos serán derribados por el jugador gracias a la acción de una pelota incorporada a través de la paleta "dibujo y animación". Esta pelota rebotará con un ángulo aleatorio al tocar las paredes del lienzo. Una vez derribado un ladrillo debe desaparecer, a la vez que activa un sonido "explosión", y se sumarán 10 puntos en el marcador. Cuando el jugador consigua derribar todos los ladrillos se detendrá el juego y aparecerá una imagen con el texto "has ganado".

- En la parte inferior del lienzo se colocará un ladrillo de color naranja a modo de nave, que el jugador podrá mover de izquierda a derecha con el dedo, y que servirá para impedir que la pelota toque el borde inferior del lienzo. En el caso de que la pelota toque el borde inferior, el juego se detendrá y aparecerá una imagen con el texto "game over".

 

- Una vez que aparezca la imagen "has ganado" o "game over", cambiará el texto del botón inferior, y aparecerá "Volver a jugar".

 

En el siguiente vídeo se puede apreciar mejor el funcionamiento del juego:

https://drive.google.com/open?id=1MzGPv2znTgnWloX3jGu62Ilt3m91aZbD

 

Y en la siguiente carpeta tenéis disponibles los recursos necesarios: imagen de fondo del lienzo, imágenes de ladrillos, sonido explosión, imagen "has ganado" y "game over"

https://drive.google.com/open?id=1rQY_VNHeLkleyIXojFKzX8tKZaDzNu-G

 

CUARTA PARTE: Conectando con otras Apps.

En esta última parte, trabajaremos en torno al concepto de activity, y trabajamos con el menú conectividad y otros tres grupos de bloques.

4.1 Paleta social
4.2 Paleta de conectividad
4.3 Blques de color
4.4 Bloques de variables
4.5 Bloques de procedimiento
4.6 Actividad Guiada 03

 

TAREA 3: diseña tu aplicación de turismo

En esta última práctica tratamos de aplicar: 

- La creación de varias pantallas en nuestra aplicación, viendo cómo se gestionar el paso de una pantalla a otra.

- La herramienta ActivityStarter, que emplearemos para lanzar otra aplicación (maps o chrome).

La aplicación que debéis desarrollar deben contener lo siguiente:

- Una pantalla de inicio, en la que aparecerá una imagen representativa de Cigales, y un texto al pie de la imagen en el que se de la bienvenida al portal de turismo de la localidad. Esta pantalla debe estar visible durante tres segundos, por lo que habrá que incorporar un reloj.

- Un pantalla de menú, en la que aparecerán cuatro imágenes de monumentos representativos, junto a una etiqueta que los identifique. Desde esta pantalla los usuarios de la aplicación podrán acceder a información relativa a dichos monumentos, bien pulsando sobre la imagen o pulsando sobre un botón. 

- Necesitaréis crear una pantalla info, la cual utilizaremos para lanzar a su vez la herramienta ActivityStarter, con la que enviamos a los asuarios de la aplicación a las direcciones web, en las cuales está la información relativa a cada monumento.

 

En la siguiente página de Turismo de Cigales podéis encontrar información en torno a los monumentos de la localidad:

https://cigales.ayuntamientosdevalladolid.es/el-municipio/de-interes-turistico

 

El siguiente vídeo nos muestra los principales pasos que debemos dar para realizar la tarea:

https://www.youtube.com/watch?v=2hrG6TkxNZY&list=PLEZrE8DZj4Jwptg1ENFAPSps_UjA1qPcj&index=26&t=632s

 

ÚLTIMA ACTIVIDAD:

- javitecnotic ha actualizado el contenido Programamos con Scratch. 10/26/2020 - 11:14

- javitecnotic ha actualizado el contenido Introducción a las hojas de cálculo. 10/12/2020 - 11:15

- javitecnotic ha actualizado el contenido Realizar medidas con precisión: Pie de rey, micrómetro. 10/02/2020 - 11:23

CONTADOR DE VISITAS

drupal statistics module