Topic outline

• Presentación y Bienvenida al curso
  

  Presentación y Bienvenida al curso

  Curso APP Inventor Avanzado 

  App Inventor es un entorno de desarrollo para la elaboración de aplicaciones destinadas al sistema operativo Android, en el que los usuarios de forma visual y a partir de un conjunto de herramientas básicas, pueden ir enlazando una serie de bloques para crear la aplicación.

  
  Este curso está dirigido a docentes, facilitadores y formadores de la Franquicia Social, quienes cuenten con conocimientos previos en el uso de AppIventor. 

  El curso comprende: 
  

  • 18 horas de trabajo autónomo en línea en el Aula Virtual Trust 

  Requerimientos del participante:  
  

  Pensamiento lógico desarrollado, conocimientos intermedios de computación, conocimientos básicos de lenguaje C, conocimientos elementales de bases de datos, dominio de flujogramas, habilidades básicas de diseño visual, conocimientos básicos en App Inventor 
  
  

  Requerimientos para tomar el curso:  
  Haber completado el curso de Desarrollo de Aplicaciones para Android y el curso de Internet de las cosas IoT. Contar con una PC y Smartphone Android para ejecutar actividades, acceso a internet, cuenta de correo electrónico, cuenta en MIT App Inventor, cuenta en Firebase. 
  
   

   

  • Avisos Forum
• Introducción
  

  Introducción

  
  

  App Inventor es una herramienta muy potente para crear aplicaciones móviles a partir de un lenguaje basado en el ensamblaje de piezas de rompecabezas. 
  En el curso de "Desarrollo de Aplicaciones" de Ciencias de la Computación de POETA, se publicaron una serie de vídeo cápsulas que nos dieron una noción de los recursos disponibles en App Inventor para crear Apps. Ahora, veremos como dar forma a cada procedimiento buscando mejorar la interfaz de usuario y la experiencia que este vive al navegar por la App. Bienvenidos(as). 

  Si no cuentas con el modelo de App para simular conexiones con Firebase, puedes descargarlo acá. 

   

      

  
  

  
  

  • Foro: "La app de mis sueños" - Actividad calificada Forum
  • Foro: Socialización de logros e inquietudes Forum
• Indice
  

  Indice

  

  TABLA DE CONTENIDO

  1. Layout/Disposiciones de una App
     
  2. Recursos Multimedia en App Inventor
     
  3. Interfaz de usuario
     
  4. Diseño de barra de herramientas
     
  5. Menú de Navegación
     
  6. Transición entre Screens/Pantallas
     
  7. Gestión de disposiciones visuales de la App
     
  8. Menú de navegación inferior
     
  9. Lienzo/Canvas para gráficos
     
  10. Sensores de la App
      
  11. Carrusel de imágenes
      
  12. Almacenamiento interno de la App
      
  13. Conectividad con otras Apps
      
  14. Autenticación en Firebase
      
  15. Arboles (Tag/Values) en Firebase
      
  16. Get Value y Data Changed en Firebase
      
  17. Convertir directorios JSON en listas
      
  18. Muestra de aplicación desarrollada con App Inventor
      
  19. Reto de Autoaprendizaje
      

  
  
• Sección #1 - Layout/Disposiciones de una App
  

  Sección #1 - Layout/Disposiciones de una App

  
  

  1. Título del video: Distribución de componentes en una App
  2. Descripción del vídeo: Configuración de Layout/Disposiciones en App Inventor para ubicar componentes en diferentes posiciones en la pantalla de la App.
  3. Duración del vídeo: 6:52
  4. Elementos usados:

  
  

  • Disposiciones Horizontales.
  • Disposiciones Verticales.
  • Disposiciones Tabulares.
  • Etiquetas.
  • Imágenes.
  • Casillas de verificación.
  • Deslizadores.
  • Botones.

  Recursos didácticos Layout_POETA.aia

  
   

   
  
• Sección #2 -Recursos Multimedia en App Inventor
  

  Sección #2 -Recursos Multimedia en App Inventor

  
  

  1. Título del video: Elementos multimedia de App Inventor
  2. Descripción del vídeo: Uso de recursos multimedia disponibles en Smartphone que permiten que el usuario tenga experiencias mas amigables con las funcionalidades de las App.
  3. Duración del vídeo: 11:59
  4. Elementos usados:

  
  

  • Disposiciones Horizontales.
  • Disposiciones Verticales.
  • Verticales
  • Grabador.
  • Cámara.
  • Reproductor.
  • Sonido.
  • Grabador de sonidos.
  • Reconocimiento de voz.
  • Texto a voz.
  • Imágenes.
  • Etiquetas
  • Botones.

  Recursos didácticos POETA_Multimedia.aia

   

   
  
• Sección #3 - Interfaz de usuario
  

  Sección #3 - Interfaz de usuario

  
  

  1. Título del video: Interfaz de Usuario
  2. Descripción del vídeo: Configuración de botones, etiquetas, listas desplegables y  notificadores pop-up.
  3. Duración del vídeo: 22:45
  4. Elementos usados:

  
  

  • Disposiciones Horizontales.
  • Disposiciones Verticales.
  • Disposiciones Tabulares.
  • Etiquetas.
  • Cajas de texto.
  • Imágenes.
  • Notificador.
  • Botones

   Recursos didácticos POETA_interfaz_usuario.aia

   
  

  
  
• Sección #4 -Diseño de barra de herramientas
  

  Sección #4 -Diseño de barra de herramientas

  
  

  1. Título del video: Barra de Herramientas
  2. Descripción del vídeo: Distribución de etiquetas y botones en la parte superior de la app para crear el menú de la aplicación. Personalización de botones. 
  3. Duración del vídeo: 4:39
  4. Elementos usados:
     

  
  

  • Disposiciones Horizontales.
  • Disposiciones Verticales.
  • Disposiciones Tabulares.
  • Etiquetas.
  • Selector de listas.
  • Cajas de texto.
  • Imágenes.
  • Notificador.
  • Botones.

     Recursos didácticos Barra_superior_POETA.aia

     
  
  
• Sección #5 - Menú de Navegación
  

  Sección #5 - Menú de Navegación

  
  

  1. Título del video: Menú de navegación
  2. Descripción del vídeo: Optimización de pantallas para la visualización de menús desplegables.
  3. Duración del vídeo: 9:01
  4. Elementos usados:
     

  
  

  • Disposiciones Horizontales.
  • Disposiciones Verticales.
  • Disposiciones Tabulares.
  • Etiquetas.
  • Cajas de texto.
  • Selector de listas.
  • Imágenes.
  • Notificador.
  • Botones.

   Recursos didácticos Menus_POETA.aia

   
  

  
  
• Sección #6 - Transición entre Screens/Pantallas
  

  Sección #6 - Transición entre Screens/Pantallas

  
  

  1. Título del video: Transición de Screens
  2. Descripción del vídeo: Transición de pantallas para mejorar la apariencia de una App. Uso de las funciones "Animación" para programar transiciones de apertura y cierre de pantalla. 
  3. Duración del vídeo: 3:08
  4. Elementos usados:

  
  

  • Disposiciones Horizontales.
  • Etiquetas.
  • Imágenes.
  • Botones.
  • Screens/Pantallas.

   

   
  
  
• Sección #7 - Gestión de disposiciones visuales de la App
  

  Sección #7 - Gestión de disposiciones visuales de la App

  
  

  1. Título del video: Gestión de disposiciones visuales en App Inventor
  2. Descripción del vídeo: Distribución de campos en pantallas de la app. Estrategia de "ver" y "ocultar" layouts/disposiciones de la app para optimizar espacio y tener mejor distribución de vistas en la App.
  3. Duración del vídeo: 12:28
  4. Elementos usados:

  
  

  • Disposiciones Horizontales.
  • Disposiciones Verticales.
  • Disposiciones Tabulares.
  • Etiquetas.
  • Cajas de texto.
  • Selector de listas.
  • Imágenes.
  • Notificador.
  • Botones.

  Recurso didáctico Gestion_Layouts_POETA.aia 

   

  
  
• Sección #8 - Menú de navegación inferior
  

  Sección #8 - Menú de navegación inferior

  
  

  1. Título del video: Menú inferior
  2. Descripción del vídeo: Botones adicionales para simplificar el acceso las vistas de la App app. Uso de imágenes para personalizar botones de acceso rápido.
  3. Duración del vídeo: 3:50
  4. Elementos usados:

  
  

  • Disposiciones Horizontales.
  • Disposiciones Verticales.
  • Disposiciones Tabulares.
  • Etiquetas.
  • Cajas de texto.
  • Selector de listas.
  • Imágenes.
  • Notificador.
  • Botones. 

  Recursos didácticos Menu_Inferior_POETA.aia

   
  
  
• Sección #9 - Lienzo/Canvas para gráficos
  

  Sección #9 - Lienzo/Canvas para gráficos

  
  

  1. Título del video: Canvas para gráficos
  2. Descripción del vídeo: Uso de datos para creación de gráficos dinámicos en un lienzo que permiten analizar el comportamiento de una señal de forma visual. Interpretación de las coordenadas en pixeles del lienzo y método para graficar una línea entre dos puntos (x,y).
  3. Duración del vídeo: 17:07
  4. Elementos usados:

  
  

  • Deslizador.
  • Lienzo.
  • Botón.

  Recursos didácticos Lienzo_POETA.aia

   

   
  
  
• Sección #10 - Sensores de la App
  

  Sección #10 - Sensores de la App

  
  

  1. Título del video: Sensores de la App
  2. Descripción del vídeo: Uso de un lienzo para graficar los lúxeles detectados por el sensor de luz de un smartphone.
  3. Duración del vídeo: 5:52
  4. Elementos usados:

  
  

  • Deslizador.
  • Lienzo.
  • Botón.
  • Etiqueta.
  • Sensor de luz.

  Recursos didácticos Grafica_Sensor_POETA.aia 

   

  
  
• Sección #11 - Carrusel de imágenes
  

  Sección #11 - Carrusel de imágenes

  
  

  1. Título del video: Carrusel de imágenes
  2. Descripción del vídeo: Uso de un lienzo hacer transiciones entre imágenes.
  3. Duración del vídeo: 10:33
  4. Elementos usados:

  
  

  • Disposición vertical
  • Lienzo.

  Recursos didácticos Carrusel_POETA.aia

   
  

  
  
• Sección #12 - Almacenamiento interno de la App
  

  Sección #12 - Almacenamiento interno de la App

  
  

  1. Título del video: Almacenamiento interno
  2. Descripción del vídeo: TinyDB para almacenar información de datos de la App dentro del smartphone, que siguen existiendo aún después de cerrar y volver a abrir la App. Concepto de "Etiqueta" y "Valor"
  3. Duración del vídeo: 14:02
  4. Elementos usados:

  
  

  • Disposiciones Horizontales.
  • Disposiciones Verticales.
  • Disposiciones Tabulares.
  • Etiquetas.
  • Cajas de texto.
  • Selector de listas.
  • Imágenes.
  • Notificador.
  • Botones.
  • TinyBD.

  Recursos didácticos Almacenamiento_Interno.aia

  Recurso de clase TinyDB_POETA.aia

   

  

  
  
• Sección #13 - Conectividad con otras Apps
  

  Sección #13 - Conectividad con otras Apps

  
  

  1. Título del video: Conectividad con otras Apps
  2. Descripción del vídeo: Funciones para abrir WhatsApp y ejecutar una página web dentro de la App
  3. Duración del vídeo: 6:32
  4. Elementos usados:

  
  

  • Disposición horizontal.
  • Visor web.
  • Botón.
  • Activity Starter.

   Recursos didácticos Activity_Starter_POETA.aia

   
  

  
  
• Sección #14 - Autenticación en Firebase
  

  Sección #14 - Autenticación en Firebase

  
  

  1. Título del video: Autenticación en Firebase
  2. Descripción del vídeo: Método de autenticación con usuario y contraseña. Personalización de método de recordar contraseña.
  3. Duración del vídeo: 8:09
  4. Elementos usados:

  
  

  • Disposiciones Horizontales.
  • Disposiciones Verticales.
  • Etiquetas.
  • Imágenes.
  • Interruptor.
  • Firebase auth.
  • Botones.

   

   
  
  
• Sección #15 - Arboles (Tag/Values) en Firebase
  

  Sección #15 - Arboles (Tag/Values) en Firebase

  
  

  1. Título del video: Árboles (Tag/Value) en Firebase
  2. Descripción del vídeo: Definir una estructura ordenada para almacenar información dentro de una base de datos. 
  3. Duración del vídeo: 8:46
  4. Elementos usados:

  
  

  • Firebase.
  • Real Time Database.

   

   
  
  
• Sección #16 - Get Value y Data Changed en Firebase
  

  Sección #16 - Get Value y Data Changed en Firebase

  
  

  1. Título del video: Get Value y Data Changed en Firebase
  2. Descripción del vídeo: Obtener valores en búsquedas en bases de datos y recibir notificaciones cuando hay cambios en Real Time Database.
  3. Duración del vídeo: 7:52
  4. Elementos usados:

  
  

  • Disposiciones Horizontales.
  • Disposiciones Verticales.
  • Etiquetas.
  • Imágenes.
  • Interruptor.
  • Cajas de texto.
  • Firebase.
  • Botones.

   

   
  
  
• Sección #17 - Convertir directorios JSON en listas
  

  Sección #17 - Convertir directorios JSON en listas

  
  

  1. Título del video: Listas y relación con JSON
  2. Descripción del vídeo: Uso de listas para almacenamiento ordenado de información, a partir de la conversión de los directorios JSON de Firebase.
  3. Duración del vídeo: 5:22
  4. Elementos usados:

  
  

  • Disposiciones Horizontales.
  • Disposiciones Verticales.
  • Etiquetas.
  • Imágenes.
  • Interruptor.
  • Firebase.
  • Botones.

   

   
  
  
• Sección #18 - Muestra de aplicación desarrollada con App Inventor
  

  Sección #18 - Muestra de aplicación desarrollada con App Inventor

  
  

  1. Título del video: Muestra de aplicación desarrollada con App Inventor
  2. Descripción del vídeo: Uso de listas para almacenamiento ordenado de información, a partir de la conversión de los directorios JSON de Firebase.
  3. Duración del vídeo: 11:59

   

   
  
  
• Sección #19 - Reto de Autoaprendizaje
  

  Sección #19 - Reto de Autoaprendizaje

  
  

  Identifique un problema o una necesidad de su lugar de trabajo (o de la vida cotidiana) y usando App Inventor, desarrolle una aplicación que de solución a este aspecto.  
  

  Incluya en la App:

  
  

  • Combinación de layouts (disposiciones)

  • Más de un Screen (pantalla)

  • Al menos un componente de multimedia (medios)

  • Menú (Superior o inferior)

  
  

  • Reto de Autoaprendizaje App Inventor Avanzado - Actividad Calificada Assignment
  • Foro: Aclaración dudas - Reto de Autoaprendizaje - Actividad Calificada Forum
• Videoconferencias
  

  Videoconferencias

  Grabación - Tercera sesión del curso - Viernes 2 de Julio 2021

   

  
  

  
  

  Grabación - Segunda sesión del curso - Viernes 25 de Junio 2021

    

   

  
  

  
  

  
  

  Grabación - Primera sesión del curso - Viernes 18 de Junio 2021

   

   
  

  
  
• Certificado
  

  Certificado