El prop?sito de este trabajo de grado es el de exponer al lector, a trav?s de un ejemplo pr?ctico (proof of concept), los conocimientos esenciales para el desarrollo de software frontend en el contexto del desarrollo multiplataforma. A su vez, el lector puede apoyarse en los documentos que hacen parte del an?lisis de los resultados y el trabajo investigativo; obtenidos como resultado del desarrollo del ejemplo pr?ctico. Los documentos obtenidos describen el proceso de desarrollo, especificaci?n de herramientas, diagramas, decisiones de dise?o y procedimientos aplicados. El ejemplo pr?ctico consisti? en la creaci?n de dos aplicaciones: una de ellas se utiliza a trav?s de un navegador web y otra que se ejecuta bajo el sistema operativo Android; ambas desarrolladas usando un c?digo fuente compartido y hecho en Flutter. Las aplicaciones, que est?n orientadas a la gesti?n de tareas, permiten al usuario crear, guardar, editar y visualizar tareas en una o varias listas. Como parte de los resultados y como deseo del autor, el c?digo fuente del ejemplo se public? en un repositorio p?blico y fue liberado bajo una licencia de c?digo abierto para facilitar el acceso y la contribuci?n de cualquier persona interesada en el proyecto.The purpose of this degree project is to expose the reader to the essential knowledge for the development of Frontend software in the context of cross-platform development; through a proof of concept. Also, the reader can rely on the documents that are part of the analysis of the results and the research work obtained as a result of the development of the practical example. These documents describe the development process, tool specification, diagrams, design decisions and applied procedures. The proof of concept is a practical example of the creation of two applications: one of them to be used through a web browser and another one that runs on the Android operating system; both developed with a common source code made with the Flutter framework. The applications were developed for task management; allowing the user to create, save, edit and view tasks in one or multiple lists. As part of the results and as the author desired, the source code of the example was published in a public repository and released under an open source license to allow the access and contribution to anyone interested in the project.PregradoIngeniero de SistemasContenido Introducci?n. 9 Cap?tulo I: Presentaci?n del problema. 11 1.1: El paradigma frontend moderno: 11 1.2: El problema del desarrollo multiplataforma: 12 1.3 Objetivos: 13 1.3.1 Objetivo General: 13 1.3.2 Objetivos espec?ficos: 13 Cap?tulo II: Estado del arte. 15 2.1 Novedades del sector frontend: 15 2.2 Desarrollo Multiplataforma. 15 2.2.1 Elecci?n de las plataformas objetivo: 17 2.2.2 Estado actual del desarrollo de apps con Flutter: 17 2.3 Acerca de las metodolog?as y principios a usar: 19 2.3.1 Metodolog?as ?giles. 19 2.3.2 Arquitectura Limpia y principios SOLID: 20 2.4 C?digo abierto. 24 2.5 Dise?o de interfaces gr?ficas. 24 2.6 Gesti?n de tareas. 25 Cap?tulo III: Investigaci?n UX. 27 3.1 Investigaci?n de usuarios. 27 3.1.1 User Persona. 27 3.1.2 Benchmarking. 28 3.2 Herramientas de dise?o. 29 3.2.1 Figma y Draw.io. 29 3.2.2 Material Design. 30 3.3 Look and Feel de la aplicaci?n: 30 3.3.1 Nombre de la aplicaci?n. 30 3.3.2 Colores. 32 3.3.3 Logo e iconos del proyecto. 33 Cap?tulo IV: Metodolog?a de desarrollo. 35 4.1 Requerimientos. 35 4.2 Hoja de Ruta. 37 4.3 Creaci?n ?picas e historias de usuario. 38 Cap?tulo V: Dise?o y desarrollo de las aplicaciones. 39 5.1 Dise?o. 39 5.1.1 Arquitectura de Informaci?n. 39 5.1.2 Wireframes. 39 5.2 Desarrollo. 40 5.2.1 Herramientas de desarrollo. 40 5.2.2 Librer?as de terceros. 41 5.2.3 Mobile First. 41 5.2.4 Estructura de carpetas. 41 5.2.5 Gesti?n de estado. 41 5.2.6 Persistencia. 43 5.2.7 Inyecci?n de dependencias. 44 5.3 Creando la app. 44 5.3.1 Capa de dominio. 44 5.3.3 Capa de aplicaci?n. 45 5.3.4 Capa de infraestructura. 46 5.3.4 Implementaci?n del tema. 46 5.3.5 Backlog. 46 5.4 Portando la app a Web. 48 5.5 Finalizaci?n del desarrollo. 49 5.5.1 Licencia e informaci?n del proyecto. 49 5.5.2 Ajustes del repositorio. 49 5.5.3 Despliegue de la app a la web. 50 Cap?tulo VI: Presentaci?n de resultados y conclusiones. 51 6.1 Acerca del proceso de desarrollo. 51 6.2 Acerca de la implementaci?n de dise?o. 52 6.3 Acerca de la versi?n web. 52 6.4 Contenido generado. 53 6.5 Roadmap y trabajo futuro. 53 6.6 Reflexiones personales. 54 Referencias Bibliogr?ficas. 56 Anexos. 61