Topic outline

  • 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. 


     
     

  • Introducción

    banner

    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á. 

     

        

    banner


  • 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

      banner

      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


       
       banner

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

        banner

        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

         
         banner

        • Sección #3 - Interfaz de usuario

          banner

          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

           

          banner

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

            banner

            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

               
            banner

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

              banner

              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

               

              banner

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

                banner

                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.

                 
                 
                banner

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

                  banner

                  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 
                   

                  banner

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

                    banner

                    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

                     
                    banner

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

                      banner

                      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

                       
                       
                      banner

                      • Sección #10 - Sensores de la App

                        banner

                        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 
                         

                        banner

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

                          banner

                          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

                           

                          banner

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

                            banner

                            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

                             

                            banner


                            • Sección #13 - Conectividad con otras Apps

                              banner

                              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

                               

                              banner

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

                                banner

                                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.

                                 
                                 
                                banner

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

                                  banner

                                  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.

                                   
                                   
                                  banner

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

                                    banner

                                    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.

                                     
                                     
                                    banner

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

                                      banner

                                      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.

                                       
                                       
                                      banner

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

                                        banner

                                        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

                                         
                                         
                                        banner

                                        • 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)


                                        • 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