Aplicaciones móviles

Cronograma de actividades

  • (10%) Taller #1 - Repaso [Semana 2]
  • (15%) Entrega #1 - DCU [Semana 4]
  • (20%) Entrega #2 - APP híbrida [Semana 7]
  • (10%) Taller #2 - Publicación [Semana 9]
  • (20%) Entrega #3 - APP nativa [Semana 13]
  • (20%) Entrega #4 - Juego [Semana 16]
  • (5%) Asistencia a 3 actividades CWF [Antes de terminar clases]

Taller #1

Ejercicio de Javascript

  • Reto javascript, realizar el programa:
    • Ingreso de clave de la sucursal virtual de un banco con teclado
    • Menú navegación con scroll hacia una subsección de la misma pagina, usando javascript

    Guardarlo en la rama reto - carpetas: clave, menu

    Referentes apoyo:
    Curso
    Javascript basics
    Ejemplo UI banco

Ejercicio de Javascript

  • Reto javascript, realizar el programa:
    • Agregar animación y sonido a la escena de referencia
    • Desarrollar un campo de texto que muestre en tiempo real la cantidad de caracteres ingresados.

    Guardarlo en la rama reto - carpetas: anim, texto

    Referentes apoyo:
    Curso
    Greensock animación, Howlerjs sonido
    Escena referencia

Taller #1

Realizar el diagrama de clase usando UML el modelo del sistema que represente los conceptos de una pelicula de cartelera. Se debe realizar el diseño en hoja de papel, tablero, tablet, usando una ténica de mano alzada para crear un primer borrador, luego se debe digitalizar el diagrama usando starUML. Debe incluir relaciones de herencia, interfaces, clases abstractas, constantes, relaciones entre clases, constructores, sobrecarga, polimorfismo.

Taller #1

Explicar un concepto asignado en clase, realizar diapositivas para la exposición.

  • apply, call, and bind methods
  • modules
  • memoization
  • IIFE
  • argument features
  • async / await
  • event loop

Referencia: 10 javascript concepts ...

Taller 1

Realizar un proyecto de maquetación nivel 3 de: frontendpractice guardarlo en la rama proyecto

Criterios de evaluación

  • (10%) Asistencia a clase
  • (10%) Usa repositorio para entregar evidencias
  • (10%) Explicación concepto JS
  • (10%) Diagrama película, borrador manual, diagrama digital usando starUML
  • (20%) Retos programación, completos funcionando
  • (20%) Retos CSS, evidencias completas
  • (20%) Proyecto maquetación

Entrega 1 - DCU

Diseño de una aplicación móvil por medio de una metodología centrada en el usuario.

Actividades de aprendizaje

1. Escoger el tema sobre el cual se realizará la aplicación móvil híbrida. Tenga presente solucionar una necesidad puntual de un usuario en un contexto de uso específico.

Ejemplo

  • Tema: Barberia
  • Usuario: Cliente para corte de cabello
  • Contexto: Sistema de citas

🚨 No usar como tema para la entrega 🚨

Presentación de referencia

2. Realizar el analisis del usuario, teniendo como referencia las secciones de la siguiente presentación.

User Persona

3. Crear dos usuarios personas, que pertenezcan al tema seleccionado, siguiendo la guía.

El término original en inglés es persona y se inspira en el método que utilizan los actores para desarrollar un personaje para hacer una actuación más realista, de acuerdo con el papel que han de representar.

Guía para la creación de un user persona

Actividades de aprendizaje

4. Crear el diagrama de flujo, mapa de navegación, wireframe manual (Fotos hojas) y digital de la aplicación (se crea en Figma). Ver el siguiente video como referencia.

Requisitos

  • Proponer y realizar la solución usando las herramientas explicadas en clase.
  • La aplicación diseñada no debe necesitar internet, no requiere conexión a base de datos.
  • Si la aplicación requiere registro o login, esto se debe simular usando localstorage.
  • Organizar las evidencias en dispositivas para realizar presentación en clase.

Requisitos

  • La aplicación debe tener nombre y logo.
  • El wireframe debe ser en escala de grises, no se debe usar color.
  • El número de vistas (pantallas) depende de la solución que se esta diseñando y parte de una necesidad especifica, se recomienda tener mínimo 5 vistas. Es posible tener alguna opción deshabilitada o que no se implemente, pero todo debe quedar consolidado y explicado en el diseño.

Criterios de evaluación

  • (20%) Diapositivas y exposición del proyecto
  • (20%) Creación de wireframe manual (fotos diseño)
  • (20%) Diagrama de flujo, navegación entre las vistas
  • (20%) Creación user persona (2 usuarios)
  • (10%) Creación de wireframe digital, enlace Figma
  • (10%) Puntualidad en la entrega del ejercicio

Material de apoyo

Material de apoyo

Material de apoyo

Referentes

  • Plantillas, wireframes manuales (sketchize)
  • Figma, creación wireframes digitales (Figma)
  • Aplicaciones de clases pasadas (google play)

Referentes

Diseño centrado en los datos

¿Cuál es el valor de una aplicación?

MVP - Dropbox

Entrega 2 - APP Híbrida

Reconocer y usar las principales tecnologías y herramientas para crear aplicaciones híbridas.

Entrega 2 - APP Híbrida

Entrega 2 - APP Híbrida

Para implementar la aplicación se puede escoger alguna de los dos enfoques que se presenta a conituación:

  • SPA - Vanilla Javascript: Toda la aplicación esta en un solo archivo html, los archivos css y de javascript se crean por fuera del archivo.
  • SPA - React: Se usan componentes para definir las secciones y react router para definir la navegación.

Entrega 2 - SPA Vanilla JS


Click para ampliar imagen

Entrega 2 - SPA Vanilla JS


Click para ampliar imagen

Entrega 2 - Creación bundle


Click para ampliar imagen

Entrega 2 - APP Híbrida

  • Crear un repositorio para el proyecto en github, el proyecto debe ser público y debe evidenciar uso frecuente por medio de diferentes commits, manejo de ramas y actualización durante el tiempo de la actividad.
  • Configuración de la herramienta SASS para realizar la escritura de las reglas gráficas como indican los siguientes videos:

Entrega 2 - APP Híbrida

Entrega 2 - APP Híbrida

Entrega 2 - APP Híbrida

Configuración de un bundler para automatizar la creación de la hoja de estilos a partir de archivos de SASS y luego minificar el archivo final.


Vite JS

Entrega 2 - APP Híbrida

Terminar la aplicación, teniendo en cuenta crear una buena experiencia de usuario, atención a las siguientes recomendaciones:

  • Seleccione una paleta de color de tonos neutros, los cuales puede encontrar en coolors.co
  • Si requiere de componentes html para representar el contenido, busque en codepen.io

Entrega 2 - APP Híbrida

  • La navegación de la aplicación debe ser coherente, es decir los botones deben permanecer en el mismo lugar, manejar un color distintivo, estar ordenados y con una jerarquía clara.
  • Cree una barra de navegación, donde debe aparecer el nombre o el ícono de la aplicación. Esto permite tener unidad gráfica.

Entrega 2 - APP Híbrida

  • Use google fonts, logos, íconos y otras imágenes con fondo transparente. en la sección de material extra dejaré algunos videos y enlaces para lograr esta parte.
  • Prepare la aplicación para sustentación en clase, cada integrante del equipo debe participar con una parte.

Criterios de evaluación

  • (10%) La estructura base del proyecto evidencia el uso de sass y de clases parciales
  • (10%) Uso correcto del bundler, para automatizar las funciones de minificación de los archivos de sass e integración y optimización del código javascript.

Criterios de evaluación

  • (10%) Se evidencia el uso de repositorio on mínimo 40 commits durante el tiempo de realización del ejercicio, los integrantes del equipo cada uno tiene mínimo 10 commits y se usa correctamente el archivo .gitignore y readme.md con las instrucciones de ejecución del proyecto.
  • (10%) La aplicación no requiere internet para funcionar
  • (10%) Asistencia a clase y entrega puntual del proyecto

Criterios de evaluación

  • (20%) La aplicación refleja lo planteado en el prototipo creado en la unidad anterior (El prototipo puede cambiar, pero se debe actualizar el archivo de figma) Incluya un enlace a Figma en el readme.md
  • (30%) La aplicación funciona correctamente, esta completa y todo el contenido esta incrustado en el bundle final que se usará para crear el instalador.

Recursos

Taller #2 - Crear y publicar la app

Realizar la aplicación híbrida, usando Android studio y capacitor JS, publicación en la tienda de google play.

Taller #2

  • Solicite acceso a la tienda, desde un correo de gmail, enviando un correo por equipo a: lasmovies@gmail.com
  • Espere que se le envié una invitación, aceptela para poder ingresar a publicar en la tienda la aplicación del equipo.

Taller #2

  • Instalar capacitor js, siguiendo la documentación
  • Sincronice los archivos de la aplicación híbrida con el proyecto creado con capacitor, use el comando: 
    									
									npx cap sync

Taller #2

  • Una vez este sincronizada la aplicación, se debe probar en el emulador o en el dispositivo móvil seleccionado para la entrega, usando Android Studio.
  • Realizar ajustes finales de la aplicación, comprobar navegación, carga de recursos y funcionamiento en general.
  • Generar el archivo .aab, siguiendo las instrucciones de la documentación

Taller #2

  • La aplicación puede ser publicada directamente siguiendo los pasos de la consola de google play, para eso es, necesario preparar previamente el contenido y los insumos solicitados, así:
    • Nombre: Define un nombre claro y conciso que describa tu aplicación.
    • Descripción corta: Una descripción breve y atractiva que destaque los beneficios clave.

Taller #2

    • Descripción completa: Una descripción detallada que explique las características y funcionalidades de tu aplicación.
    • Icono: Sube un icono de alta calidad en formato PNG con un tamaño de 512x512 píxeles.

Taller #2

    • Capturas de pantalla: Sube al menos cuatro capturas de pantalla que muestren las características más importantes de tu aplicación. Las capturas deben tener una resolución mínima de 1080 píxeles.

Taller #2

  • Firme el archivo .aab con la clave de la aplicación desde Android Studio.
  • Con la aplicación firmada y los recursos listos, realice la publicación en la consola de google play.

Referentes

Criterios de evaluación

  • (10%) Asistencia a clase y puntualidad en la entrega
  • (10%) Los recursos e información, se crearon acorde al contenido de la aplicación
  • (20%) Se evidencia publicación en la tienda
  • (20%) La aplicación funciona correctamente en el dispositivo seleccionado
  • (20%) La aplicación es completa y cumple con los requerimientos solicitados
  • (20%) La aplicación es coherente con el prototipo y la maquetación realizada

Entrega 3 - APP Nativa

Creación y publicación de una aplicación nativa usando Android Studio y Kotlin

Para este taller, se debe cambiar de grupo, tengan presente que el desarrollo del proyecto en equipo tiene un porcentaje en la calificación final.

Entrega 3 - APP Nativa

  • Escoger alguno de los siguientes temas para realizar la aplicación nativa:
    • Checklist de limpieza
    • Lista de mercado
    • Información películas y series
    • Control mascota (vacunación...)
    • Finanzas personales (metas, registro...)
    • El estudiante puede proponer un proyecto

Entrega 3 - APP Nativa

  • Realizar el diseño de la aplicación en papel (wiriframe manual), digitalizarlo en Figma (wireframe digital) y subirlo al repositorio.
  • Incluya secciones como: login, registro, menú, listado, detalle, formulario, configuración, créditos (Información del estudiante).
  • Realizar el montaje de la aplicación en Android Studio, siguiendo las indicaciones de clase.
  • Implementar las funcionalidades de la aplicación seleccionada

Entrega 3 - APP Nativa

  • Probar la aplicación en un dispositivo físico, el cual será el target de instalación.
  • Preparar la aplicación para su lanzamiento, nombre, recursos gráficos, descripción, etc.
  • Firmar la aplicación y generar el .aab
  • Realizar la publicación de la aplicación en la tienda de google play, siguiendo las indicaciones de clase.

Entrega 3 - APP Nativa

La entrega se realizará por medio de una presentación, donde se resalte la arquitectura de la aplicación, las vistas, sus principales funcionalidades y la publicación en la tienda.

Criterios de evaluación

  • (10%) Asistencia a clase
  • (10%) Uso de repositorio y colaboración en el nuevo equipo
  • (10%) Diseño de la aplicación en papel
  • (10%) Diseño de la aplicación en Figma
  • (20%) Montaje de la aplicación en Android Studio
  • (20%) Funcionalidades de la aplicación
  • (20%) Publicación de la aplicación en google play

Referentes

Entrega #4 - Final (Juego)

Creación de un juego, creación de una aplicación que permita al usuario jugar, puede ser pasando niveles (mínimo 3), por control de tiempo, por cantidad de vidas.

Entrega #4 - Final (Juego)

Crear un juego, utilizando alguno de los dos enfoques vistos en clase, aplicación híbrida o aplicación nativa, tenga presente las siguientes instrucciones...

Entrega #4 - Final (Juego)

  1. Cambiar de equipo - (tiene calificación)
  2. Escoger un juego viable teniendo en cuenta el tiempo
  3. Se debe crear repositorio para el proyecto
  4. Se debe realizar el wireframe en escala de grises (manual / figma)

Entrega #4 - Final (Juego)

  1. Mínimo 5 secciones (Splash, Home, Juego, Puntaje, Créditos)
  2. Se debe personalizar la UI
  3. Debe tener persistencia de datos entre vistas
  4. Debe tener animaciones y sonidos

Entrega #4 - Final (Juego)

  1. Se puede usar un motor de videojuegos
  2. Se puede usar ai, pero se debe justificar y entender el código
  3. Bonus: Easter eggs 🪺
  4. Bonus: Juego multiusuarios online con firebase 🔥

Criterios de evaluación

  • (10%) Asistencia a clase y puntualidad en la entrega
  • (10%) Participación en repositorio
  • (10%) Cambio de equipo
  • (10%) Diseño de la aplicación en Papel
  • (10%) Diseño de la aplicación en Figma
  • (10%) El juego tiene 5 secciones
  • (20%) Funcionamiento del juego
  • (20%) Publicación de la aplicación en google play

Referentes - Juegos

Referentes - Juegos

Referentes - Juegos

Referentes - Juegos

Motores - herramientas

Motores - herramientas

Motores - herramientas

Taller 2

  1. Ejercicio en equipo, diferente al equipo del taller 1
  2. Realizar un carrito de compras, usando localstorage
  3. Realizar un reproductor de música/sonidos usando javascript, utilice clases y parser.

Taller 2 - Ejercicios en JAVA

Crear una función que calcule el substring más largo sin repetir carácteres. La longitud de la cadena es mayor a cero.

Ejemplos:

  • "abcabcbb" -> "abc"
  • "bbbbbbbbb" -> "b"
  • "pwwkew" -> "wke"

Este ejercicio es tomado de: leetcode

Taller 2

Dado el teclado de un teléfono:

Taller 2

Crar una función que imprima las posibles combinaciones según los dígitos que se asignen de entrada, la longitud de la cadena debe ser perteneciente al rango [1,4].

"23" => ["ad","ae","af","bd","be","bf","cd","ce","cf"]

"2" => ["a","b","c"]

Este ejercicio es tomado de: leetcode

Criterios de evaluación

  • (10%) Asistencia a clase
  • (10%) Diapositivas y exposición en clase
  • (10%) Argumentación individual
  • (10%) Uso repositorio
  • (20%) Reto de localstorage
  • (20%) Reto, reproductor
  • (20%) Los retos en java estan completos y funcionan

Entrega #4 - Final

Implementación del diseño de la entrega #1, se realizará en flutter flow usando plantillas y la integración con firebase.

Entrega #4 - Final

  • Implementación de todas las vistas
  • Implementación de la navegación
  • La aplicación debe tener login usando firebase Auth

Entrega #4 - Final

  • La aplicación debe usar, Firestore y Storage
  • La aplicación debe funcionar completamente
  • Se debe hacer presentación

Entrega #4 - Final

  • Realizar un video donde cada estudiante explique su rol de participación en el proyecto
  • Se debe realizar un test drive en video, es decir un recorrido donde se muestren las diferentes interacciones con la aplicación y la integración con firebase.
  • Incluir el test drive como video de youtube, en enlace de la presentación

Entrega 4 - Final

La entrega se realizará subiendo la presentación a la carpeta de teams de la entrega, recuerden agregar los enlaces respectivos.

Criterios de evaluación

  • (10%) Puntualidad en la entrega
  • (10%) Aplicación completa y funcional
  • (20%) Presentación actualizada
  • (20%) Video test drive del resultado final
  • (20%) Integración firebase (auth,firestore,storage)
  • (20%) Video explicativo con una sección por cada estudiante