-
Project Management
En el aspecto de gestión y desarrollo del ciclo de vida del proyecto se utilizó la aplicación Discord y Google Meet para las reuniones de grupo en las cuales se conversan sobre temas relacionados a avances y corrección de aspectos del proyecto. Luego, para la documentación del proyecto, se utilizó el formato MarkDown
-
Requirements Management
Para el manejo de los requisitos (historias de usuario, product backlog, sprint backlog), se utilizó Trello es una herramienta ideal para gestionar proyectos. Usando esta herramienta, se puede organizar un product backlog, ya que permite estructurar tareas visualmente en un tablero. Puedes crear listas que representen etapas del flujo de trabajo, y en cada lista añadir tarjetas que describan las user stories o tareas individuales. Estas tarjetas permiten detallar información clave, como prioridades, etiquetas de color, descripciones y checklists, facilitando así el seguimiento y la colaboración del equipo.
-
Product UX/UI Design
Para el desarrollo de plantillas de los User Persona y del Impact Mapping se utilizó UXPressia. Es una plataforma especializada en la creación de mapas de experiencia del usuario ofreciendo una interfaz enfocada exclusivamente en UX que facilita la estructuración clara y profesional de estos elementos. Destaca por sus plantillas personalizables, la posibilidad de añadir datos reales, imágenes y métricas, y por permitir la colaboración en tiempo real. Para la creación del Lean UX Canvas se utilizó la aplicación canva. Esta aplicación es una herramienta versátil para crear diversos diseños. Canva facilita la colaboración del equipo y la exportación de los proyectos en archivo PNG o PDF, manteniendo el proceso creativo ordenado y atractivo. Para los Journey Mapping, Empathy Mapping, entre otros mapas, se decidió utilizar Miro. Esta aplicación permite una colaboración en tiempo real entre equipos, ofrece una interfaz visual e intuitiva, y cuenta con plantillas prediseñadas que agilizan el proceso sin perder calidad metodológica.
Luego, para el desarrollo de wireframes, mockups y prototipos de aplicación, se decidió utilizar Figma. Esta es una herramienta que facilita el diseño de interfaces, permitiéndonos trabajar con colores, imágenes, formas, y otros elementos visuales para crear nuestra aplicación. Nos ofrece la posibilidad de probar diversos modelos de dispositivos. Además, esta plataforma será clave en la creación de nuestro prototipo, ya que brinda una simulación interactiva que permite visualizar y experimentar el proyecto desde la perspectiva del usuario.
-
Software Development
Para el desarrollo del Software correspondiente al Landing Page, se utilizarán dos aplicaciones, las cuales son GitHub y JetBrains. La primera ayuda al equipo a gestionar de manera correcta los avances colaborativos del proyecto. Por otro lado, JetBrains ayudará a trabajar el proyecto con lenguajes como HTML5, CSS y JavaScript, y el framework Vue para el desarrollo del landing page, web services y frontend.
-
Software Testing
Las pruebas del Landing Page se realizarán mediante uso del navegador web para verificar que el diseño del mismo cumple con aspectos como el diseño responsivo en cualquier dispositivo desde el que se acceda al landing page del proyecto. Además, para visualizar que se han implementado correctamente elementos visuales que deben aparecer en las distintas secciones de la página.
En esta sección, se describen los medios y esquemas de organización para gestionar de manera efectiva los archivos de proyecto relacionados a Landing Page, Web Services y Frontend Web Applications. En el caso de los repositorios, se usará GitHub para almacenar los archivos. Además, se implementará GitFlow. Esta función de GitHub ayudará al equipo, gracias a las ramas de características de lanzamiento, a poder trabajar paralelamente en el proyecto y a tomar el control de versiones de avance del proyecto.
A continuación, se adjuntan los enlaces para acceder a los repositorios donde se almacenarán los archivos de proyecto relacionados al Landing Page.
- Landing Page: https://github.com/EXPDesigners/StockSip-LandingPage.git
5.1.2.2. GitFlow
Como se mencionó previamente, GitFlow ayudará al equipo de desarrollo a gestionar de manera efectiva el proyecto en su ciclo de vida. En general, GitHub ayudará a facilitar el desarrollo del proyecto para el equipo ya que es más sencillo desarrollar trabajos en equipo en los repositorios de los archivos de proyecto.
-
Main Branch
Llamada también rama principal del proyecto, esta es la rama predeterminada del proyecto creado en el repositorio. Esta rama representa el historial del proyecto lo que ayuda a llevar el control de versiones del mismo. -
Develop Branch
Llamada también rama de desarrollo del proyecto. Esta rama es una bifurcación de código original del proyecto para definir nuevos rumbos respecto del proyecto original que servirá para evaluar variaciones del proyecto para su evolución. Además, ayudan a incorporar nuevas funciones al proyecto.
-
Feature Branch
También llamada rama de característica del proyecto, es una rama de desarrollo que ayuda a incorporar nuevas funciones al proyecto en desarrollo. Además, permite el aislamiento de la función agregada y que varios colaboradores puedan trabajar simultáneamente en dicha funcionalidad. -
Release Branch
También llamada rama de lanzamiento del proyecto, es una versión de código del proyecto que se usa para empezar un nuevo ciclo de lanzamiento del producto de software. Además, en esta rama se pueden realizar correcciones de errores de la versión pasada del proyecto. Finalmente, una vez terminada con esta rama, se suma a la rama principal del proyecto y se le asigna un nuevo número de versión de proyecto. -
Hotfix Branch
También llamada rama de corrección del proyecto, es una rama que permite dar mantenimiento al código del proyecto. Se utiliza principalmente para arreglar errores en alguna sección del producto de software de manera rápida.
Para la nomenclatura de los lanzamientos del Landing Page, se utilizará Semantic Versioning que consta de tres partes para describir cambios mayores, cambios menores y parches para corrección de bugs, según la siguiente estructura:
- Número principal: Incrementa cuando se realiza un cambio mayor y significativo al proyecto.
- Número secundario: Incrementa cuando se realiza un cambio menor al proyecto como arreglo de errores o agregación de características.
- Número terciario: Incrementa cuando se realiza un parche al proyecto como una corrección de bugs o errores visuales.
Para los textos de mensajes en los ‘commits’ del proyecto en Git, se utilizará Conventional Commits. Estos son mensajes de confirmación que son fáciles de entender por los colaboradores del proyecto. Finalmente, estos mensajes siguen la siguiente estructura:
La sección ‘type’ indica el tipo de mensaje de confirmación que se usará. A continuación, la sección ‘description’ indica la descripción que se le agrega al mensaje de confirmación, por ejemplo, una característica agregada. Además, la sección ‘body’ incluye una descripción más detallada del cambio aplicado al proyecto.
Luego, se tienen distintos tipos de mensajes de confirmación. Por ejemplo, se tiene el mensaje tipo ‘fix’ que incluye una corrección al proyecto. Utilizar este tipo conlleva aumentar el número terciario de la versión del proyecto (por ejemplo, de 1.0.0. a 1.0.1.). Después, utilizar el mensaje de tipo ‘feat’ conlleva agregar una nueva función a la aplicación, por lo tanto, se debe aumentar el número secundario de la versión (por ejemplo, de 1.0.0. a 1.1.0.). Finalmente, si se agrega una sección de tipo ‘BREAKING CHANGE’ indicaría que las versiones anteriores del proyecto dejarán de ser compatibles entre sí, lo que conlleva un cambio significativo y el aumento del número principal de la versión (por ejemplo, de 1.0.0. a 2.0.0.).
En esta sección, se definen las referencias que se usaron para adoptar estrategias de nomenclatura de elementos de programación en los lenguajes que se usarán para la solución (HTML, CSS, JavaScript, y C#). En general, la nomenclatura de los archivos y secciones en la programación se hará en inglés.
-
Nomenclatura en HTML:
Para la codificación del proyecto en HTML, se utilizará el artículo “HTML Style Guide and Coding Conventions”. Este artículo contiene información útil y necesaria para conocer cómo debe ser la nomenclatura de los diversos aspectos que incluye la programación en HTML como si se debe escribir en minúsculas o mayúsculas las secciones del cuerpo del documento. A continuación se adjunta el enlace para acceder al artículo de referencia: https://www.w3schools.com/html/html5_syntax.asp
Finalmente, se aplicará el contenido del artículo para la nomenclatura en HTML para el landing page de StockSip a desarrollar. -
Nomenclatura en CSS:
Para la codificación del proyecto en Cascading Style Sheets (CSS), se utilizará el artículo “Google HTML/CSS Style Guide”. Este artículo contiene información útil y necesaria para conocer cómo debe ser la nomenclatura de los diversos aspectos que incluye la programación en CSS como capitalización en código de colores, referencias a imágenes, etc. A continuación se adjunta el enlace para acceder al artículo de referencia: https://google.github.io/styleguide/htmlcssguide.html
Finalmente, se aplicará el contenido del artículo para la nomenclatura en CSS para el estilo de colores que se quiere agregar al landing page de StockSip a desarrollar. -
Nomenclatura en JavaScript:
Para la codificación del proyecto en JavaScript, se utilizará el artículo “Google JavaScript Style Guide”. Este artículo contiene información útil y necesaria para conocer cómo debe ser la nomenclatura de los diversos aspectos que conforman un proyecto desarrollado en JavaScript, según los lineamientos establecidos por Google.Se trata de la guía de estilo oficial de JavaScript de Google, un documento detallado que establece una serie de convenciones para escribir código JavaScript limpio, coherente y fácil de mantener, especialmente en equipos de trabajo. A continuación se adjunta el enlace para acceder al artículo de referencia: https://google.github.io/styleguide/jsguide.html
Finalmente, se aplicará el contenido del artículo para el Web Services de StockSip. -
Nomenclatura en Vue:
Para la codificación del proyecto en Vue, se utilizará el artículo “Vue Style Guide”. Este artículo contiene información útil y necesaria para conocer cómo debe ser la nomenclatura de los diversos aspectos que conforman un proyecto desarrollado con Vue.js 2. Se trata de la guía de estilo oficial de Vue 2, en la cual se detallan las convenciones recomendadas para escribir código claro, consistente y fácil de mantener. Esta guía organiza sus recomendaciones en diferentes niveles de prioridad; reglas esenciales, reglas fuertemente recomendadas, reglas recomendadas, reglas de uso con precaución y reglas estrictamente opcionales. A continuación se adjunta el enlace para acceder al artículo de referencia: https://v2.vuejs.org/v2/style-guide/?redirect=true
Finalmente, se aplicará el contenido del artículo para el Frontend Applications de StockSip. -
Nomenclatura en C#:
Para la codificación del proyecto en C#, se utilizará el artículo “C# Coding Conventions”. Este artículo contiene información útil y necesaria para conocer cómo debe ser la nomenclatura de los diversos aspectos que conforman un proyecto desarrollado en C#, según las convenciones oficiales de codificación establecidas por Microsoft. Se trata de la guía de convenciones de estilo de código para C# publicada por Microsoft, la cual proporciona una serie de recomendaciones para escribir código claro, coherente y mantenible en aplicaciones .NET. A continuación se adjunta el enlace para acceder al artículo de referencia: https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/coding-style/coding-conventions
Finalmente, se aplicará el contenido del artículo para el Web Services de StockSip.
En esta sección, se especifica la configuración para realizar el despliegue de la solución en el repositorio. Para realizar esto, se usó GitHub Pages para lanzar el landing page, Web Services y Frontend Web Applications. A continuación, se describen los pasos necesarios para desplegar el Landing Page del proyecto, empezando por la creación del repositorio hasta el lanzamiento del proyecto.
- Paso 1: Creación del repositorio
Como primer paso, se debe crear el repositorio en GitHub que será el lugar donde se aloja todo lo relacionado al Landing Page.
- Paso 2: Carga de archivos necesarios
Como segundo paso, se importan todos los archivos necesarios para el desarrollo del landing page como imágenes, archivos HTML, CSS y JavaScript.
- Paso 3: Preparar el lanzamiento
Como tercer paso, se juntan todas las características del proyecto en una sola para verificar el correcto funcionamiento de cada una. Luego, se envía todo a la rama principal donde se encuentra, por defecto, el proyecto.
- Paso 4: Lanzar el Landing Page
Como cuarto paso, cuando todo se encuentre en la rama principal, se accede a la sección Configuración del repositorio, luego, se selecciona la opción “GitHub Pages” y se seleccionará la rama principal que es la que se desea desplegar.
- Paso 5: Acceder al Landing Page
Como paso final, el entorno otorgará un enlace para poder acceder al proyecto desplegado.
| Sprint # | Sprint 1 |
|---|---|
| Sprint planning Background | -- |
| Date | 2025/04/20 |
| Time | 05:00 PM |
| Location | Reunión mediante llamada virtual en Discord |
| Prepared By | Huamani Cruz, Camila Victoria |
| Attendees | Huamani Cruz, Camila Victoria / Juarez Leon, Nicolas Emilio Walter / Gonzales Castillo, Angel Martin / Coronel Espinoza, Farid Sebastian |
| Sprint Goal & User Stories | -- |
| Sprint 1 Goal | Our focus is on develop and deploy the first version of the landing page We believe it delivers a first view of what our product offers to our target segments This will be confirmed when the target segments are visiting the site and can see and know the benefits on using our product. |
| Sprint 1 Velocity | 25 |
| Sum of Story Points | 21 |
En esta sección, se incluye la matriz de liderazgo y colaboración desarrollada para este primer sprint. Los principales aspectos que se toman en cuenta en este sprint se centran en cada sección y el estilo que debe contener este mismo: inicio, funcionamiento de la aplicación, beneficios para cada segmento, testimonios, exploración de la aplicación, planes y contacto.
| Team Member | GitHub Username | Sección Inicio | Funcionamiento de la aplicación | Beneficios | Testimonios | Planes | Contacto |
|---|---|---|---|---|---|---|---|
| Huamani Cruz, Camila Victoria | victiila06 | L | L | L | |||
| Gonzales Castillo, Angel Martin | XdiabloX426 | L | |||||
| Coronel Espinoza, Farid Sebastian | Far14h | L | |||||
| Juarez Leon, Nicolas Emilio Walter | JuarezLn10 | L | C |
Como se mencionó previamente en el planeamiento del sprint número 1, el objetivo del mismo es el desarrollar y desplegar una primera versión del landing page del producto. Esto conlleva implementar las diversas secciones que presenta un landing page que puedan ayudar a los visitantes del sitio a conocer mejor el producto en desarrollo.
Luego de definir el objetivo del sprint, se identificaron las historias de usuario útiles para este sprint. A continuación, se dividió cada historia de usuario en tareas relacionadas a la implementación y cumplimiento de dicha historia. Para ello, se utilizó la aplicación Trello que nos ayuda a gestionar el progreso del sprint.
A continuación, se presenta la tabla con las tareas necesarias para completar satisfactoriamente este primer sprint. Además, se asignó un miembro del equipo a cada tarea a desarrollar y el estado de cada tarea.
| Sprint 1 | Sprint Backlog 1 | ||||||
|---|---|---|---|---|---|---|---|
| User Stories | Work Item/Task | ||||||
| Id | Title | Id | Title | Description | Estimation (Hours) | Assigned to | Status |
| US001 | Ver propuesta de valor clara | 001 | Diseñar sección inicio | Diseñar el encabezado con logo, menú de navegación y sección principal. | 0.5 | Camila Huamani | Done |
| 002 | Estructura principal de la página | Crear la estructura principal de la página en HTML y los estilos iniciales en CSS. | 0.5 | Camila Huamani | Done | ||
| 003 | Diseñar sección contacto | Diseñar el pie de página con información de contacto y enlaces a otras secciones | 0.5 | Camila Huamani | Done | ||
| 004 | Describir visión y misión | Agregar espacios que detallen la misión y visión de la empresa. | 0.5 | Camila Huamani | Done | ||
| 005 | Añadir estilos | Estilizar las secciones de contacto e inicio para que sean visiblemente agradables y llamativas. | 0.5 | Camila Huamani | Done | ||
| US002 | Acceder a explicación detallada sobre el uso de la aplicación | 001 | Añadir sección de cómo funciona | Separar una sección de la estructura general para agregar el contenido de explicación de cómo funciona la aplicación. | 0.3 | Camila Huamani | Done |
| 002 | Descripción de funcionalidades | Resumir cada funcionalidad que podrá utilizar cada segmento objetivo. | 0.4 | Camila Huamani | Done | ||
| 003 | Añadir imágenes referenciales | Para cada funcionalidad detallada, agregar una imágen referencial. | 0.5 | Camila Huamani | Done | ||
| 004 | Agrupar y ordenar imagenes y descripcion | Ordenar y organizar cada funcionalidad descrita con su imagen. | 0.4 | Camila Huamani | Done | ||
| 005 | Añadir estilos | Usando CSS, añadir estilos a esta sección para que sea visiblemente llamativa. | 0.6 | Camila Huamani | Done | ||
| US003 | Ver beneficios para licorerías | 001 | Implementar sección beneficios | Diseñar la subsección de beneficios para dueños de licorerías agregando tarjetas con listas de beneficios. | 0.6 | Farid Coronel | Done |
| 002 | Agregar íconos e imágenes | Añadir imágenes referenciales al segmento objetivo al que son dirigidos los beneficios. | 0.5 | Farid Coronel | Done | ||
| 003 | Añadir estilos | Añadir estilos usando CSS a la subsección para dar detalles visualmente agradables. | 0.5 | Farid Coronel | Done | ||
| US004 | Ver beneficios para proveedores | 001 | Implementar sección beneficios | Diseñar la subsección de beneficios para proveedores agregando tarjetas con listas de beneficios. | 0.6 | Farid Coronel | Done |
| 002 | Agregar íconos e imágenes | Añadir imágenes referenciales al segmento objetivo al que son dirigidos los beneficios. | 0.5 | Farid Coronel | Done | ||
| 003 | Añadir estilos | Añadir estilos usando CSS a la subsección para dar detalles visualmente agradables. | 0.5 | Farid Coronel | Done | ||
| US006 | Leer testimonios de clientes | 001 | Añadir sección para testimonios | Usando HTML, separar una sección para colocar todo el contenido de esta sección. | 0.5 | Nicolas Juarez | Done |
| 002 | Redactar testimonios ideales | Redacatar uno o varios testimonios para cada segmento objetivo que den su opinión sobre la aplicación. | 0.4 | Nicolas Juarez | Done | ||
| 003 | Añadir espacios para cada testimonio | Crear tarjetas en la estructura. Estas tarjetas contendrán el texto del testimonio. | 0.4 | Nicolas Juarez | Done | ||
| 004 | Añadir imágenes referenciales | Agregar al lado del texto, una imagen referencial de la persona que está dando su testimonio. | 0.4 | Nicolas Juarez | Done | ||
| 005 | Añadir estilos | Agregar estilos a la sección usando CSS. | 0.6 | Nicolas Juarez | Done | ||
| US007 | Comparar planes gratis y premium | 001 | Añadir sección de planes | Diseñar la sección de planes con tarjetas que detallen las características de cada plan. | 0.5 | Martin Gonzales | Done |
| 002 | Añadir información para ambos segmentos | Añadir texto diferenciando funcionalidades que incluye el plan para cada segmento objetivo. | 0.6 | Martin Gonzales | Done | ||
| 003 | Agregar texto comparativo | Añadir texto en las tarjetas que pueda ser utilizado para saber qué contiene el plan premium. | 0.6 | Martin Gonzales | Done | ||
| 004 | Añadir íconos | Añadir íconos relacionados a lo que ofrece cada plan para cada segmento objetivo. | 0.6 | Martin Gonzales | Done | ||
| 005 | Añadir estilos | Estilizar la sección usando CSS. | 0.5 | Nicolas Juarez | Done | ||
| US008 | Conocer el precio y condiciones | 001 | Añadir espacio para precios | En la sección de planes, agregar un recuadro que indique el precio para cada plan | 0.3 | Nicolas Juarez | Done |
| 002 | Añadir estilos | Estilizar los recuadros para precios usando CSS. | 0.3 | Martin Gonzales | Done |
En esta sección, se describen los principales avances de implementación realizados en este primer sprint. Se tiene como principal avance la implementación de cada sección del landing page en su primera versión. Cada miembro del equipo avanzó progresivamente con cada sección del landing page. Finalmente, se añadieron estilos a las secciones usando CSS.
A continuación, se muestra una tabla que contiene la información sobre los commits hechos que contienen partes de las funcionalidades que debemos implementar para completar el primer sprint.
| Repository | Branch | Commit Id | Commit Message | Commited On |
|---|---|---|---|---|
| EXPDesigners/StockSip-LandingPage | master | fb8ea1f | feat(home): add home section and styles | 23/04/2025 |
| EXPDesigners/StockSip-LandingPage | master | 97add20 | feat(footer): add footer section and styles | 23/04/2025 |
| EXPDesigners/StockSip-LandingPage | feature/how-it-works | a1bf565 | feat(how-it-works): add how it works section | 23/04/2025 |
| EXPDesigners/StockSip-LandingPage | feature/how-it-works | 2266f74 | feat(how-it-works): add how it works section styles | 23/04/2025 |
| EXPDesigners/StockSip-LandingPage | feature/how-it-works | ecff3e9 | Update style.css | 23/04/2025 |
| EXPDesigners/StockSip-LandingPage | feature/benefits | e0325a6 | feat(benefits): add initial html structure for benefits section. | 26/04/2025 |
| EXPDesigners/StockSip-LandingPage | feature/benefits | e20b3e0 | feat(benefits): add styles for benefits section. | 26/04/2025 |
| EXPDesigners/StockSip-LandingPage | feature/testimonials | b6994f1 | feat(testimonials): add html structure for testimonials section. | 26/04/2025 |
| EXPDesigners/StockSip-LandingPage | feature/testimonials | 32520e9 | feat(testimonials): add css styles for testimonials section. | 26/04/2025 |
| EXPDesigners/StockSip-LandingPage | feature/testimonials | 56e5700 | docs: add testimonials images. | 26/04/2025 |
| EXPDesigners/StockSip-LandingPage | feature/premium-plans | 20f6557 | feat(premium-plans): add premium plans html. | 26/04/2025 |
| EXPDesigners/StockSip-LandingPage | feature/premium-plans | 1167681 | chore: add premium plan image. | 26/04/2025 |
| EXPDesigners/StockSip-LandingPage | feature/premium-plans | 507f100 | feat(premium-plans): add premium plans css styles. | 26/04/2025 |
El objetivo de este sprint fue realizar, en colaboracion con todo el equipo, la creacion del landing page.
La organizacion de nuestro codigo se realizo en un repositorio en GitHub. Para el despliegue del landing page se utilizo GitHub Pages
- Primero se creo un repositorio para alojar el codigo del landing page
- Segundo, cada integrante del equipo creo una rama de cada funcion del landing page
- Tercero, se realizo el merge a develop para corregir errores
- Cuarto, cuando se corrigieron los errores, se realizo merge al master
- Quinto, se desplego el landing page mediante GitHub Pages, evidencia:
El proyecto se realizo mediante repositorio en GitHub. Integrantes participantes:
Commits de los integrantes en el Landing Page:
Grafico de los push y merge realizados por el equipo:
