Upc Pre 202202 Si729 SW52 MIRAI Report TF1

1
Universidad Peruana de Ciencias Aplicadas Noviembre 2022

Ingeniería de Software
Team Members
Desarrollo de Aplicaciones Open Source
Barrazueta Vilcachagua, Gonzalo U20191A972
Ascencio Zelada, Victor Manuel
Anco Copaja, Edgar Andre U201724411
Malca Rojas, Edgar Alexander U202020371
COURSE
Montes Molina, Sebastian Alejandro U201712366
Urquiaga Rodriguez, Rafael Adrian U202010506
PROJECT
FINAL REPORT
MIRAI
Import It
Ciclo 2022-02
1
2
REGISTRO DE VERSIONES DEL

INFORME
Versión Fecha Autor Descripción de modificaciones
1.0 26/08/2022 Barrazueta Se desarrollo el Capítulo 1: Introducción con los

Vilcachagua, siguientes puntos:
Gonzalo
 Startup Profile
Anco Copaja,  Solution Profile
Edgar Andre o Lean UX Process
 Segmentos Objetivos
Malca Rojas,
Edgar Se agregaron los competidores identificados y
Alexander se realizó el cuadro identificado del área de
anexos donde se identificó el FODA de cada
Montes
competidor.
Molina,
Sebastian El equipo diseño las preguntas para los
Alejandro entrevistados de nuestros dos segmentos
objetivos y su respectivo resumen y análisis.
Urquiaga
Rodriguez,
Rafael Adrian
2.0 28/08/2022 Barrazueta Los estudiantes realizaron los artefactos de

Vilcachagua, Needfinding en base al análisis de las
Gonzalo entrevistas:
Anco Copaja,  User Personas

Edgar Andre  User Task Matrix
 User Journey Mapping
Malca Rojas,
Edgar
https://import-it.netlify.app/
Alexander  Empathy Mapping
 As-is Scenario Mapping
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
3.0 30/08/2022 Barrazueta Se agrego el To-Be Scenario Mapping, se

Vilcachagua, realizó la tabla de los User Stories.
Gonzalo
Se desarrollo el Impact Map y el Product
Anco Copaja, Backlog.
Edgar Andre
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
3.1 30/08/2022 Barrazueta Se realizaron correcciones de tipografía,

Vilcachagua, contenido y de la estructura del informe.
Gonzalo
Anco Copaja,
Edgar Andre
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
3.2 01/09/2022 Barrazueta Se realizaron mejoras al trabajo y se agregaron

Vilcachagua, redacciones faltantes. Se mejoro el análisis de
Gonzalo entrevistas y secciones de los User Stories.
Anco Copaja,
Edgar Andre
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
3.3 03/09/2022 Barrazueta Se realizaron cambios en los links de exposición

Vilcachagua, de TB1.
Gonzalo
Anco Copaja,
Edgar Andre
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
4.1 07/09/2022 Barrazueta Se agrego la sección de Style Guidelines, Web

Vilcachagua, style Guidelines, se colocaron los wireframes y
Gonzalo mockups que el equipo elaboro, junto con sus
respectivos links de figma.
Anco Copaja,
Edgar Andre
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
4.1.1 09/09/2022 Barrazueta Se agregaron los Domain Driven Software

Vilcachagua, Architecture con el Context Diagram, Container
Gonzalo Diagram, Component Diagram y el Software
Object Oriented Design.
Anco Copaja,
Edgar Andre
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
4.1.2 10/09/2022 Barrazueta Se agrego el diagrama de base de datos y su link

Vilcachagua, respectivo. Se terminaron de realizar los
Gonzalo wireflows y userflows con su respectiva
descripción.
Anco Copaja,
Edgar Andre
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
5.0 11/09/2022 Barrazueta Se agrego la sección de Information

Vilcachagua, Architecture y todas sus secciones. Asimismo,
Gonzalo se comenzó a desarrollar el sprint en la
herramienta trello y se agregó toda la sección de
Anco Copaja, Software Configuration Management.
Edgar Andre
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
5.1 13/09/2022 Barrazueta Se comenzaron a agregar los commits en la

Vilcachagua, sección de development evidence for sprint
Gonzalo review.
Anco Copaja,
Edgar Andre
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
5.1.1 15/09/2022 Barrazueta Se culmino de agregar todos los commits y las

Vilcachagua, diferentes secciones del Sprint 1 relacionado al
Gonzalo desarrollo del Landing page.
Anco Copaja,
Edgar Andre
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
6.0 29/09/2022 Barrazueta Se agrego el Sprint Backlog 2 y sus respectivas

Vilcachagua, secciones enfocadas al web Applications. Y se
Gonzalo realizaron mejoras del anterior entregable.
Anco Copaja,
Edgar Andre
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
7.0 22/10/2022 Barrazueta Se agrego el Sprint 3 y sus respectivas secciones

Vilcachagua, enfocadas al web Applications. Y se realizaron
Gonzalo mejoras del anterior entregable según
indicaciones del profesor.
Anco Copaja,
Edgar Andre
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
8.0 4/11/2022 Barrazueta Se agrego el Sprint 4 y sus respectivas secciones

Vilcachagua, enfocadas al web Applications y web services.
Gonzalo Y se realizaron mejoras del anterior entregable
según indicaciones del profesor como los
Anco Copaja, márgenes arreglados, mejora de errores
Edgar Andre ortográficos, textos justificados y se adaptaron
los márgenes de las tablas para que todo tenga
Malca Rojas, una misma jerarquía y se arregló el interlineado
Edgar según las indicaciones de la plantilla
predispuesta.
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
9.0 22/11/2022 Barrazueta Se agrego el sprint 5 y sus respectivas

Vilcachagua, secciones, se realizaron mejoras del anterior
Gonzalo entregable como indico el profesor por medio
del aula virtual. Los cambios fueron en la
Anco Copaja, edición de los videos about the team y about the
Edgar Andre product.
Malca Rojas,
Edgar
Alexander
Montes
Molina,
Sebastian
Alejandro
Urquiaga
Rodriguez,
Rafael Adrian
CONTENTS
Introduction.............................................................................................................................................27
1.1. Startup Profile.......................................................................................................................................27
1.1.1. Descripción de la Startup...................................................................................................................................27
1.1.2. Perfiles de integrantes del equipo.................................................................................................................28
1.2. Solution Profile.....................................................................................................................................31

1.2.1. Antecedentes y problemática del producto..................................................................................................32
1.2.2. Lean UX Process..........................................................................................................................................37
1.2.2.1. Lean UX Problem Statement.................................................................................................37
1.2.2.2. Lean UX Assumptions............................................................................................................ 37
1.2.2.3. Lean UX Hypothesis Statements 1........................................................................................ 42
1.2.2.4. Lean UX Canvas.................................................................................................................... 43
1.3. Segmento Objetivo...............................................................................................................................49

Requirements Elicitation & Analysis......................................................................................................50
2.1. Competidores........................................................................................................................................50
2.1.1. Análisis Competitivo....................................................................................................................................50
2.1.2. Estrategias y tácticas frente a competidores.................................................................................................62
2.2. Entrevistas............................................................................................................................................63
2.2.1. Diseño de entrevistas....................................................................................................................................63
2.2.2. Registro de entrevistas..................................................................................................................................65
2.2.3. Análisis de entrevistas..................................................................................................................................74
2.3. Needfinding..........................................................................................................................................83
2.3.1. User Personas...............................................................................................................................................83
2.3.2. User Task Matrix..........................................................................................................................................85
2.3.3. User Journey Mapping.................................................................................................................................88
2.3.4. Empathy Mapping........................................................................................................................................90
2.3.5. As-is Scenario Mapping...............................................................................................................................92
Requirements Specification.....................................................................................................................93
3.1. To-Be Scenario Mapping......................................................................................................................93
3.2. User Stories...........................................................................................................................................95
3.3. Impact Mapping..................................................................................................................................137
3.4. Product Backlog..................................................................................................................................140
Product design.......................................................................................................................................151
4.1. Style Guidelines..................................................................................................................................151
4.1.1. General Style Guidelines............................................................................................................................151
4.1.2. Web Style Guidelines.................................................................................................................................156
4.2. Information Architecture....................................................................................................................159

4.2.1. Organization Systems.................................................................................................................................159
4.2.2. Labeling Systems.......................................................................................................................................162
4.2.3. SEO Tags and Meta Tags...........................................................................................................................164
4.2.4. Searching Systems......................................................................................................................................165
4.2.5. Navigation Systems....................................................................................................................................167
4.3. Landing Page UI Design.....................................................................................................................169

4.3.1. Landing Page Wireframe............................................................................................................................169
4.3.2. Landing Page Mock-up..............................................................................................................................171
4.4. Web Applications UX/UI Design.......................................................................................................173

4.4.1. Web Applications Wireframes...................................................................................................................173
4.4.2. Web Applications Wireflow Diagrams......................................................................................................176
4.4.3. Web Applications Mock-ups......................................................................................................................186
4.4.4. Web Applications User Flow Diagrams.....................................................................................................189
4.5. Mobile Applications Prototyping........................................................................................................203

4.6. Domain-Driven Software Architecture...............................................................................................208
4.6.1. Software Architecture Context Diagram....................................................................................................208
4.6.2. Software Architecture Container Diagrams...............................................................................................209
4.6.3. Software Architecture Components Diagrams...........................................................................................210
4.7. Software Object-Oriented Design.......................................................................................................212

4.7.1. Class Diagrams...........................................................................................................................................212
4.7.2. Class Dictionary.........................................................................................................................................213
4.8. Database Design.................................................................................................................................215

4.8.1. Database Diagram......................................................................................................................................215
Product Implementation, Validation.....................................................................................................218

& deployment........................................................................................................................................218
5.1. Software Configuration Management.................................................................................................218
5.1.1. Software Development Environment Configuration..................................................................................218
5.1.2. Source Code Management..........................................................................................................................223
5.1.3. Source Code Style Guide & Conventions..................................................................................................231
5.1.4. Software Deployment Configuration.........................................................................................................245
5.2. Landing Page, Services & Applications Implementation....................................................................254

5.2.1. Sprint 1.......................................................................................................................................................254
5.2.1.1. Sprint Backlog 1................................................................................................................... 254
5.2.1.2. Development Evidence for Sprint Review............................................................................255
5.2.1.3. Testing Suite Evidence for Sprint Review............................................................................257
5.2.1.4. Execution Evidence for Sprint Review.................................................................................257
5.2.1.5. Services Documentation Evidence for Sprint Review..........................................................260
5.2.1.6. Software Deployment Evidence for Sprint Review...............................................................260
5.2.1.7. Team Collaboration Insights during Sprint...........................................................................262
5.2.2. Sprint 2.......................................................................................................................................................264
5.2.2.1. Sprint Backlog 2................................................................................................................... 264
5.2.3. Sprint 3.......................................................................................................................................................286
5.2.3.1. Sprint Backlog 3................................................................................................................... 286
5.2.4. Sprint 4.......................................................................................................................................................341
5.2.4.1. Sprint Backlog 4................................................................................................................... 341
5.2.5. Sprint 5.......................................................................................................................................................401
5.2.5.1. Sprint Backlog 5................................................................................................................... 401
5.3. Validation Interviews..........................................................................................................................443

5.3.1. Diseño de Entrevistas.................................................................................................................................443
5.3.2. Registro de Entrevistas...............................................................................................................................454
5.3.3. Evaluaciones según heurísticas..................................................................................................................464
5.4. Video About the product.....................................................................................................................474

Conclusiones.................................................................................................................................................475
Referencias Bibliográficas............................................................................................................................476
Anexos..........................................................................................................................................................477
STUDENT OUTCOME
El curso contribuye al cumplimiento del Student Outcome ABET:
ABET – EAC - Student Outcome 3
Criterio: Capacidad de comunicarse efectivamente con un rango de audiencias.
En el siguiente cuadro se describe las acciones realizadas y enunciados de conclusiones

por parte del grupo, que permiten sustentar el haber alcanzado el logro del ABET –
EAC - Student Outcome 3.
Criterio Acciones realizadas Conclusiones

específico
Comunica Barrazueta Vilcachagua, En el momento de elaboración, cada

oralmente sus Gonzalo integrante se centró en desarrollar
ideas y/o una de las 5W, explicando el Who,
TB1
resultados con When, Where, What, Why para
objetividad a Realizo entrevista a ambos plantear la gestión de nuestro
público de segmentos objetivos. proyecto. Luego, se elaboraron las
diferentes Aporto con el planteamiento 2H How y How Much, en la cual se
especialidades y de preguntas realizó una investigación previa de
niveles la problemática.
jerárquicos, en el 5W y 2H
marco del Diseñamos preguntas principales y
TB2
desarrollo de un complementarias para poder
proyecto en Organization Systems. entender más a nuestros segmentos
ingeniería. objetivos. De esta manera, nos
Development Evidence for
acercamos más a la problemática
Sprint
para poder satisfacer sus
Aplicación de los wireframes necesidades.
en base a conversaciones con
el equipo y los entrevistados Con el planteamiento de las
preguntas para las entrevistas, el
TP1
grupo se aproxima más a obtener la
Development Evidence for información necesaria para elaborar
Sprint 2 los artefactos del Needfinding.
Exposición de la Navegación El equipo desarrollo la sección

actualizada Information Architecture para poder
TB3 explicar los principios y la
navegación de nuestro Landing
Development Evidence for page en el sprint 1.
Sprint 3
Development Evidence for Sprint
Exposición de los avances
Review, el equipo explico
del código.
oralmente el product Landing Page
TB4 para atraer potenciales clientes
Development Evidence for El equipo desarrollo el web service
Sprint 4 y actualización del web application
Entrevistas a ambos conforme a lo requerido para el
segmentos objetivos: entregable y para obtener buenos
Comprador y viajero resultados en la captación de
clientes.
TF1

Sprint 5
Entrevistas a Segmento
Viajeras
Anco Copaja, Edgar Andre
TB1
Realicé la entrevista a
usuario del segmento
objetivo de viajero. Además,
colaboré constantemente
comunicando mis ideas y
resultados en las reuniones
grupales y en el video de la
exposición.
TB2
Colaboré constantemente
exposición.
TP1
grupales, además de exponer
en el video respectivo y en la
exposición en clase.
TB3
en el video respectivo.
TB4
TF1
Realicé la entrevista de
validación a usuario del
segmento objetivo de viajero.
Además, colaboré
constantemente comunicando
mis ideas y resultados en las
reuniones grupales, en el
video de la exposición y en la
Malca Rojas, Edgar

Alexander
TB1
Realizo entrevista a
segmentos objetivo –
Comprador o cliente.
Aporto con el planteamiento

de preguntas
5W y 2H
TB2
SEO Tags and Meta Tags

Systems.

Sprint 1
TP1
Exposición del product

navigation de Sprint 2
TB3

TB4
TF1

Entrevistas de validación de
los productos software.
Sebastian Montes Molina
TB1
segmento objetivo viajero.
Aporto con la definición de

nuestra startup
TB2
Se tomo en consideraciones
puntos de mejora para la
elaboración de Journey map
por cada segmento objetivo
TP1
Se realizaron observaciones
para poder implementar las
vistas frontend en base al
segmento objetivo
comprador
TB3
Exposición de los trabajos y

observaciones en las posibles
mejoras para el siguiente
trabajo
TB4
Entrevista a segmento
objetivo viajero,
observaciones en la
implementación backend
TF1
comunicación acerca del

Desarrollo back y las
entrevistas de validación,
como la exposición final
Urquiaga Rodriguez,
Rafael Adrian
TB1
segmentos objetivo –
Comprador o cliente.
Aporto con el planteamiento

de preguntas
5W y 2H
TB2
Desarrollo del Navigation

Systems.
Exposición de la navegación
actualizada del sprint 1.
TP1
TB3
TB4
TF1
Desarrollo de entrevistas de
validación.
Comunica en Barrazueta Vilcachagua, Diseñamos el Lean UX de nuestra

forma escrita Gonzalo aplicación, con el fin de solucionar
ideas y/o problemas relacionados a la
TB1
resultados con problemática identificada.
objetividad a Realizo el apartado de
público de Needfinding donde comunica Con el desarrollo del capítulo
diferentes los resultados de las Requirements Especificación, con
entrevistas. los puntos To-be Scenario Map,
especialidades y
niveles Impact Map y User Stories se
Realizo resumen de la
jerárquicos, en el entrevista realizada. amplió el panorama para comenzar
marco del con el diseño y verificación de
TB2 nuestro producto.
desarrollo de un
proyecto en Sprint 1 Se realizaron diferentes materiales
ingeniería. en el proyecto con el propósito de
Footer del Landing Page
entender mejor a los User Persona y
Wireframes y mockups evaluar las funcionalidades para el
Wireflows desarrollo del aplicativo,
basándonos en su opinión.
Diagrama de la Base de datos
El equipo desarrollo de manera
TP1
escrita el Sprint 1 con secciones
Sprint 2 como el sprint backlog y services
documentation, los cuales nos
Realicé la sección apoyaron para poder registrar el
Welcome/Login
trabajo de cada integrante y realizar
TB3 correctamente las tareas de código.
Sprint 3 El equipo planteo por escrito los

flujos en los wireflows y userflows
Realice la sección de
Calculadora y Fasty en el para que los usuarios puedan
Frontend entender como usaran nuestra web
Registro de commits application.
TB4 El equipo desarrollo el sprint 4, en

el cual planteo de manera escrita la
Sprint 4
documentación de los services,
Registro de entrevistas deployment y Execution
relacionado a lo desarrollo en el
Realice el registro de
commits: Development web application y web services.
Evidence for Sprint Review
El equipo en el desarrollo del sprint
TF1 5, planteo la documentación de los
services actualizado, de los commits
Sprint 5
realizados en el front con las
Tests de Cucumber correcciones obtenidas en la
evaluación según heurísticas y
Mejora del FE: se añadió
algunas mejoras.
responsive design a la
sección “Directions” Con la evaluación según heurísticas,
se pudo priorizar según puntos de
Anco Copaja, Edgar Andre
severidad, los problemas que el
TB1 equipo tenía que resolver para el
presente sprint 5.
Realicé la entrevista a
usuario del segmento
objetivo de viajero. Además,
colaboré constantemente
exposición.
TB2
exposición.
TP1
en el video respectivo y en la
TB3
TB4
TF1
Realicé la entrevista de
validación a usuario del
segmento objetivo de viajero.
Además, colaboré
constantemente comunicando
mis ideas y resultados en las
reuniones grupales, en el
video de la exposición y en la
Malca Rojas, Edgar

Alexander
TB1
Realizó Startup Profile,
Solution Profile.
Planteo los antecedentes y la

problemática.
entrevista realizada.
TB2
Sprint 1
Planteamiento de
Wireframes, wireflows,
mockups, userflows.
TP1
Registro de Execution
Evidence for sprint review
Registro de data de la
sección Insights de Github
TB3
TB4
TF1
Registro de development
evidence for sprint review
Resumen de entrevista de
validación.
Evaluación según heurísticas.
Sebastian Montes Molina
TB1
Se realizaron resúmenes de
las entrevistas realizadas
TB2
Elaboración de la parte
Discovery de landing page
Elaboración del wireframes a

desarrollar
TP1
Elaboración de las vistas

tanto Directions, UrlOrder,
My Wallet y My Orders
TB3
Registro de commits,
elaboración final de
Frontend, creación del
archivo base Spring Boot
TB4
Registro de entrevistas
detalladas a 1 viajero.
Ordenamiento de las branch

para culminar la
implementación del backend
TF1
Despliegue del backend con

Heroku y conexión con
basepath con el frontend.
Se implemente solo a nivel

de backend un security
Urquiaga Rodriguez,
Rafael Adrian
TB1
Realizo el análisis
competitivo.
Planteo estrategias y tácticas

frente a competidores.
entrevista realizada.
TB2
Registro de los commits

realizados durante el sprint 1
Desarrollo de Wireframes y
mockups
TP1

TB3

TB4

TF1
Desarrollo del registro de

entrevistas.
CHAPTE
INTRODUCTION
1
R
1.1. Startup Profile

A continuación, procederemos a informar sobre a lo que se dedica nuestra empresa
“MIRAI”, así como la presentación del equipo de desarrollo del producto software
presentado anteriormente, “Import It”.
1.1.1. Descripción de la Startup

En la actualidad existe un número considerable de personas que necesitan ayuda para
poder adquirir productos en el extranjero. Específicamente en Lima, Perú. Se ha
identificado que el 25% de la población, prefiere adquirir un producto tecnológico, de
moda o hogar en USA. Asimismo, este porcentaje ha percibido que los productos tienen
una gran diferencia económica que en el país norteamericano. Además, desde la
aparición de la COVID-19 en el país y la crisis económica y política, el proceso de
importación de algunos productos ha aumentado por la variación de los principales
combustibles necesarios para su llegada a Perú. Por esta razón, hemos decidido crear
una empresa llamada “MIRAI”, que significa “Futuro”. Somos una empresa enfocada al
desarrollo de tecnologías que solucionen problemáticas que estén presentes en nuestra
sociedad.
Nuestra misión actual es encontrar la forma más viable de ayudar a las personas que
requieran de un servicio para importar sus productos del extranjero, específicamente
USA, acercándolos a las nuevas tecnologías y productos de la actualidad, donde muchas
veces no llegan a nuestro país o llegan con meses de demora. De esta manera, crearemos
un software que ofrezca la ayuda de distintos viajeros frecuentes o de nuestra empresa
para que nos encarguemos del proceso de importación de los productos que los clientes
soliciten ofreciendo diferentes lapsos de tiempo para el proceso. Al mismo tiempo,
nuestra visión es convertirnos en una empresa líder en el desarrollo de tecnologías que
ayuden a resolver distintas problemáticas en el Perú y, eventualmente, en el mundo.
1.1.2. Perfiles de integrantes del equipo
 Edgar Andre Anco Copaja
Código: U201724411
Carrera: Ingeniería de Software
Acerca de mí: Puedo aportar al equipo con
mis conocimientos en distintos frameworks
de desarrollo web y metodología scrum,
además de manejar distintas herramientas
relacionadas al ciclo de vida del software
tales como Git, Jenkins, Docker, Junit, etc.
Me considero una persona responsable y
dispuesto a realizar de manera óptima los
trabajos en equipo.
 Gonzalo Barrazueta Vilcachagua

Mi nombre es Gonzalo Barrazueta
Vilcachagua con código u20191a972 y
soy estudiante de la carrera de Ingeniería
de Software. Algo que puedo aportar al
equipo es de mantenernos enfocados y
seguir un proceso de trabajo ordenado
para cumplir con los plazos y fechas
límites. Algunos de los conocimientos que
tengo es el trabajo en equipo con las
metodologías ágiles y programación
frontend, haciendo uso de HTML, CSS y
Javascript. Mis expectativas para el curso son entender cómo funciona el
backend y aprender a integrarlo con una base de datos para poder crear una
aplicación web completa.
 Edgar Alexander Malca Rojas
Actualmente, me encuentro en el cuarto ciclo de la carrera

de Ingeniería de Software. El motivo principal por el cual
opté por estudiar esta rama de la ingeniería fue mi
curiosidad e interés por las diferentes herramientas técnicas
y tecnológicas que se emplean para la creación de hardware
y software. Me caracterizo por ser una persona amable,
empática, responsable, dispuesto a apoyar en lo que pueda.
Lo que puedo aportar al equipo es mi responsabilidad y mi
capacidad de liderar un equipo para lograr obtener buenos
resultados.
Mis expectativas respecto al curso son aprender sobre el

cómo emplear el lenguaje de programación Java para la
creación de aplicaciones web, tanto la parte backend como la frontend.
 Rafael Adrián Urquiaga Rodríguez
Soy Rafael Adrián Urquiaga Rodríguez y estoy cursando la

carrera de Ingeniería de Software.
Tengo experiencia programando en el lenguaje de C + + y en el

uso de GitHub para el control de versiones. Asimismo, tengo
habilidades para organizar y coordinar los avances que se realizan
durante el ciclo de vida de un proyecto, así como también una
fuerte responsabilidad de cumplir con el trabajo encargado para
un tiempo indicado.
 Sebastian Alejandro Montes Molina
Mi nombre es Sebastian Alejandro Montes Molina con código

u201712366 y soy estudiante de la carrera de ingeniería de
software. Lo que puedo aportar con el equipo es en poder
flexibilizar con la carga de tareas dentro del equipo, asimismo
con mi experiencia en cursos pasados llevados y adelantados,
como manejo de Azure y conocimientos en Angular y React.
Mis expectativas para el curso es poder aprender un poco más de
Backend con Java, ya que lo siento más profundo, al ser un tema
muy amplio y con muchas configuraciones.
1.2. Solution Profile
En este punto del informe, pasaremos a la explicación detallada de nuestro producto
software, tanto su factor innovador y la forma en la cual será monetizada.
Product Name
Se decidió llamar a nuestro producto “Import It”, ya que, en el lenguaje inglés, ‘Import’
significa Importa y ‘It’, eso; por lo que el nombre completo se traduce como
“Impórtalo”. Del mismo modo, se eligió este idioma porque, además de ser más
atractivo hacia el público, es el idioma más hablado del mundo, lo cual vuelve más
comercial a nuestra aplicación.
Product Description
En este software ofreceremos la posibilidad de importar un producto de USA mediante

nuestra empresa, a través de aduanas a un largo plazo o contratar el servicio de viajeros
frecuentes a corto plazo. En esta aplicación, los clientes podrán solicitar una cotización
para traer su producto. Esto será posible bajo dos modalidades. La primera opción,
podrán contratar el servicio de Import It, es decir, la empresa encargada de importar su
producto. Cabe resaltar, que el tiempo de llegada de producto será a largo plazo, puesto
que como empresa no nos conviene importar un producto a la vez, tenemos que llenar
un container para que el proceso sea más factible y sostenible. La segunda opción, es
traer tu producto en la maleta de un viajero (corto plazo), él se encargará de recibir tu
producto y traerlo a Lima para dejarlo en nuestras oficinas y luego enviarlo a tu
domicilio o esperar por tu recojo presencial. Asimismo, ofreceremos asesoría para que
tengas seguridad y confianza en todo el proceso hasta que tengas tu producto en tus
manos o realizaremos el proceso por ti para que te ahorres los trámites y las búsquedas
inacabables. El proceso de cotización será totalmente transparente, ofreciéndote a
detalle los impuestos y los precios por los que te cobraremos, los clientes podrán
brindarnos el link donde desean que se compre su producto o mencionarnos el producto
y sus especificaciones técnicas, para encargarnos del proceso de búsqueda y compra.
Con el registro de tu usuario y contraseña estarás listo para comenzar el proceso de
cotización y pago para que puedas visualizar el proceso de importación. Además,
específicamente para los viajeros ofreceremos la oportunidad de ganar dinero con tan
solo viajar. Podrás registrar tu viaje y seleccionar los productos que quieras traer en tu
maleta, colocarás el precio que quieres cobrar por tus servicios y esperarás por la
confirmación del cliente. Lo innovador de este software, es que cuando selecciones la
opción de viajero no solo veras la ubicación del producto, si no que podrás apreciar el
estado de este con una foto instantánea a través de nuestro sistema de seguimiento
continuo. Además, ofreceremos una pantalla donde podrás ver ofertas de los productos
más pedidos por los clientes para evitarte el proceso de búsqueda y de diferenciación de
precios en distintas páginas donde se ofertan productos con dudosa procedencia.
Finalmente, la aplicación contará con asesores que te responderán de manera inmediata
o con un límite de tiempo, para ayudarte en el proceso de compra si eres cliente o si eres
viajero ofrecerte asesoría en las limitaciones que puedan existir en los centros
aeroportuarios.
Monetization
El cobro de nuestro servicio podrá variar entre 10% y 20%. Esto depende de la cantidad,
peso y tamaño del producto. Sin embargo, ofreceremos suscripciones con costo fijo para
que los clientes accedan a promociones exclusivas por lanzamientos o semanas
importantes como el Black Friday o Amazon Prime Week, donde se aplicará un
porcentaje menor al de los clientes regulares al momento de la cotización de
importación de tu producto. Posteriormente cuando nuestra aplicación tenga más
popularidad contará con convenios con empresas dedicadas al delivery donde se les
cobrará por concepto de captación de clientes, puesto que daremos la posibilidad de que
el cliente pueda escoger el servicio con el que se sienta más seguro.
1.2.1. Antecedentes y problemática del producto

Descripción de la problemática
Este software se enfoca en el sector social, ya que se ha evidenciado que hay una cierta
cantidad de personas que prefieren comprar sus productos en el extranjero. Es por esta
razón que “Import It” busca cubrir las necesidades del proceso de compra, importación,
seguridad y eficacia para llevar la mayor cantidad de productos del extranjero al
domicilio de estas personas.
Antecedentes
Como se mencionó anteriormente, nuestro producto software “Import It” tiene la

capacidad de ofrecer servicios de importación que se encarguen de traer productos
solicitados por los clientes a sus lugares de residencia y además brindar asesoría,
seguridad y seguimiento a todo el proceso que conlleva la importación de un producto
por medio de Aduanas o en la maleta de un viajero confiable. Es por ello por lo que,
teniendo en cuenta el funcionamiento de nuestro producto, realizamos la búsqueda de
posibles competidores, obteniendo como resultado dos productos software:
 Qempo:
o Es una aplicación en la cual una persona puede poner el link de una página
que contenga un producto para que se realice una cotización para que se
importe su producto. El proceso de cotización no es inmediato demora
hasta 3 días hábiles. Ofrecen garantía de 90 días y no es para devoluciones
por estafa o equivocación del cliente, solo por motivos de reparaciones y es
bajo ciertas condiciones. Ofrece seguimiento a tu producto donde te
muestra la ubicación. No hay un horario establecido para que te puedas
comunicar con ellos vía telefónica o en sus oficinas.
Sin embargo, la principal diferencia que separa a Import It de Qempo es
que, en nuestra aplicación, es posible seleccionar la opción de traer tu
producto con un viajero para que el tiempo de llegada de tu producto sea
menor que con los servicios de empresa. Por otro lado, en la aplicación
Qempo, la cotización se realiza en base a su disponibilidad de envió, ya
que ellos deben evaluar la cantidad de productos a traer, no les conviene
importar un producto a la vez.
 Comparto mi maleta:
o Es una aplicación donde se puede realizar cotizaciones para traer productos

con viajeros, gestiona el proceso de envió a través de seguimiento al
viajero y cuenta con respuestas a preguntas frecuentes que puedan surgir en
el proceso de compra o cotización.
Sin embargo, una de las diferencias que existe entre Import It y Comparto
mi maleta es que, en Import It se ofrecerán asesorías en todo el proceso de
cotización del pedido. Además, a diferencia de Comparto mi maleta, no
solo se mostrará la ubicación del producto, sino que el viajero tendrá la
obligación de tomar una foto del estado del producto antes de partir y al
arribar a la ciudad de destino. Finalmente, no es del todo segura su interfaz
y no funciona las 24 horas, se adjunta foto de evidencia:
Herramienta 5W y 2H
o What - ¿Cuál es el problema?
 El problema identificado es la cantidad de personas que desconfían

del proceso de importación de productos en USA. Es decir, que no
realizan el proceso de compra por inseguridades y que requieran
asesoría para lo que conlleva este proceso.
o When - ¿Cuándo sucede el problema?
 El problema sucede cuando el cliente percibe que los productos en el

Perú tienen una gran diferencia en su valor de venta que en USA.
Asimismo, cuando se deciden a realizar la contratación de un
servicio de importación, no culminan con el proceso por los altos
impuestos o los costos de envió. Además, no se les ofrece la
seguridad o el apoyo necesario para que entiendan los pasos a seguir.
o Where - ¿Dónde surge el problema?
 El problema surge en los distintos hogares de la capital y provincias,

pues día a día las personas visualizan en redes sociales o buscadores
productos que llaman su atención y desean adquirirlos.
o Who - ¿Quiénes son afectados por el problema?
 Los principales afectados son las personas que desean traer un

producto de diferentes categorías como Moda, tecnología o hogar,
pero no cuentan con un conocido que les traiga su producto o no
confían en una empresa para que se encargue del proceso.
o Why - ¿Cuál es la causa del problema?
 La causa del problema es principalmente la crisis política y

económica y el alza de los principales combustibles vinculados a los
transportes necesarios para realizar la importación del producto. La
desconfianza y la inseguridad que sienten los clientes para contratar
a una persona o empresa para que importe su producto del
extranjero, pues en el Perú los productos llegan con un precio
excesivo a comparación del país norteamericano.
o How - ¿Cómo se llevan a cabo los hechos?
 Cuando un cliente quiere hacer la compra de su producto de una

tienda oficial de USA y coloca su dirección en Perú, aparecen cobros
de impuestos excesivos, los cuales hacen que el cliente se desanime
y opte por no comprar el producto. Además, el encontrar una
empresa confiable o persona conocida que pueda traer el producto en
cuestión, es una variable complicada ante las posibles estafas,
tiempos de entregas o problemas que puedan surgir en la
importación.
o How much - ¿Cuál es la magnitud del problema?
 Según el Americas Market Intelligence (2022), se estima que un

peruano gasta en promedio 392 dólares en comercio electrónico
anualmente. De esta manera, se identifica que existe un gran
porcentaje de peruanos que están en búsqueda de productos por
medio de Internet. Asimismo, cabe resaltar que el Ministerio de
Economía ha mencionado que el comercio electrónico en sitios web
a nivel nacional e internacional representan un 6% del PIB nacional.
Lo que nos demuestra que hay un gran porcentaje de la población
que aún no está dispuesta a realizar una compra por internet en el
mercado nacional o internacional ya sea por inseguridad, precios
altos o productos no exclusivos en el mercado. Así, se identifica que
hay una necesidad de atención para brindar un servicio que brinde
confianza y seguridad a los clientes para que puedan importar sus
productos del extranjero.
1.2.2. Lean UX Process
1.2.2.1. Lean UX Problem Statement
Problem Statement
Dada la coyuntura actual, con respecto a la crisis económica y la reactivación de ciertos
sectores como el turismo, se evidencia que específicamente las personas que requieren
realizar una compra en el extranjero, ya sea porque es más económico, más actual o de
mejor calidad, no logran completar el proceso de compra por los altos impuestos de
envió o porque simplemente no cuentan con un familiar o conocido en ciertos países
como Estados Unidos que se encargue de traer su producto.
Hemos identificado una problemática en este proceso, los compradores optan por no
continuar con la compra, pues el tiempo de entrega, la seguridad y el temor que les
genera es una gran determinante en su decisión de pago. Asimismo, ante la reactivación
del turismo, miles de viajeros han planificado sus viajes a diferentes partes de nuestro
País. En consecuencia, los viajeros se vieron obligados a incrementar su bolsa de viaje
ante los aumentos de los precios en Perú. Sin embargo, no todos pueden solventar sus
gastos de viaje.
¿Cómo podemos hacer para que los compradores reciban una atención oportuna y eficaz
para que se complete el proceso de compra posterior a la cotización de su producto, así
como beneficiar u seguridad y brindar tiempos de entrega que estén a su disposición
para afianzar su confianza y como integrar a los viajeros a este proceso para que puedan
generar ingresos extras para sus gastos de viaje?
1.2.2.2. Lean UX Assumptions

Business Outcomes
 Generar una plataforma intuitiva, eficaz y óptima que genere ingresos a

partir de la contratación de servicios de importación de nuestra empresa o
de viajeros para traer productos del cliente hasta su domicilio.
 Establecer nuestra posición en el mercado, a través de resultados efectivos
de productos entregados que generará confianza en el público objetivo,
calidad del servicio de los viajeros y un sistema web sólido como práctico.
 Causar interés en las empresas audiovisuales afiliadas de nuestra
competencia, debido a nuestro alcance en los usuarios y su favoritismo,
para ampliar nuestro alcance en publicidad, aumento de ingresos por el
crecimiento de ventas, entre otros factores para el beneficio de la
plataforma.
 Producir una rentabilidad económica al servicio de los viajeros y de la
empresa, con precios económicos y variables dependiendo de los productos
de interés de los usuarios, en el servicio de importación, y la publicidad y
suscripción de nuestra plataforma con el fin de generar mayores ingresos
que costos.
 Sentar una tasa de retención por determinado periodo, para verificar si
nuestros usuarios siguen utilizando nuestro servicio, con campañas de
marketing, servicio que cumple sus necesidades con funciones de la
plataforma, y si no se cumple, identificar cuáles serían las razones del
abandono del servicio.
Users
 Compradores que deseen traer sus productos de Estados Unidos.

 Viajeros.
User Outcomes
 Identificar y conocer los precios e impuestos de la cotización y entender el

proceso de importación de mi producto, para aumentar el nivel de
confianza y seguridad.
 Generar confianza por productos entregados en el domicilio del cliente o en
nuestra sede de recojo presencial, para que el cliente pueda tener seguridad
en dejar cargo a la empresa y concentrarse en sus demás actividades.
 Solventar las dudas del cliente acerca de cómo se puede dar solución a su
principal inquietud al momento de traer un producto de USA, a través de
nuestra asesoría continua que dispone en la plataforma.
 Producir un ingreso extra en la condición económica del viajero a través de
destinar un espacio de su maleta, para traer productos que él pueda
verificar para su seguridad y confianza.
Features
1. Creo que mis usuarios necesitan, empezando por los compradores, recibir sus
productos de manera rápida, económica y con un proceso de envío claro. Por otro
lado, los viajeros necesitan respaldar los gastos de sus viajes internacionales.
2. Estas necesidades se pueden resolver con una plataforma que permita a los
compradores escoger la fecha de entrega de su producto que mejor les convenga,
así como también visualizar en qué etapa del proceso se encuentra su producto.
Por otro lado, los viajeros podrán visualizar solicitudes de compra y ofertar sus
servicios.
3. Mis clientes iniciales son (o serán) las personas que desean comprar un producto
desde otro país de manera rápida, económica y clara en su proceso. Asimismo, a
las personas que viajan regularmente dentro o fuera del país y gustarían de un
trabajo que les permita solventar los costes de sus viajes.
4. El valor #1 que un cliente quiere de mi servicio es, empezando por los

compradores, obtener los productos que compran, internacionalmente, lo más
económico posible. Por el lado de los viajeros, obtener una fuente de ingresos que
reduzca parcial o completamente los costes de sus viajes.
5. El cliente también puede obtener beneficios adicionales, empezando por los

compradores, como libertad para escoger al viajero que mejor le cotice y el
detalle de dicha cotización. Asimismo, los viajeros podrán establecer la cantidad
de productos que desean trasladar ya sea por productos de uno o varios
compradores.
6. Voy a adquirir la mayoría de mis clientes a través de marketing en los medios

de comunicación más frecuentados como Facebook, Instagram, entre otros; con la
publicación de los beneficios que representa utilizar nuestra aplicación.
Asimismo, demostrando las funcionalidades de nuestra plataforma a través de
videos.
7. Haremos dinero a través de una comisión de entre el 10% y 20% sobre el valor
del producto por utilizar nuestra aplicación.
8. Mi competencia principal en el mercado serán las aplicaciones y plataformas

que ofrecen funciones similares como Qempo, Guvery y Comparto Mi Maleta.
9. Los venceremos debido a la implementación de dos formas de envío en vez de
una sola, las cuales serán a través de una Courier o un viajero.
10.Mi mayor riesgo de producto son las fallas en el sistema de la plataforma, ya

que los bugs o huecos de información impedirían al comprador hacer el
seguimiento de la ruta de su pedido y, al viajero, realizar la correcta validación de
sus datos para poder recibir pedidos.
11.Resolveremos esto a través de una inversión constante en nuestra plataforma:

formar un equipo profesional dedicado al mantenimiento de la plataforma y la
solución de sus posibles fallos a través de las actualizaciones.
1. ¿Quién es el usuario?
Nuestros usuarios son aquellas personas que necesitan recibir con prontitud o de
forma económica su producto desde el extranjero. Asimismo, también lo son las
personas que viajan regularmente y quieren solventar sus gastos aprovechando sus
viajes.
2. ¿Dónde encaja nuestro producto en su trabajo o vida?
En el caso de los compradores, en los días que van a comprar un producto tangible
que se encuentra en el extranjero. En el caso de los viajeros, cuando tienen
programados viajes internacionales.
3. ¿Cómo y cuándo es usado nuestro producto?
Para los compradores, será utilizado cuando se tenga el link del producto que desea
comprar a través de un sitio de comercio electrónico para luego utilizar nuestra
plataforma como un apoyo logístico para su entrega. Para los viajeros, será
usado como una fuente de ingresos secundaria cuando tengan viajes internacionales
programados.
4. ¿Qué problema tendría nuestro producto y cómo se pueden resolver?
Nuestro sistema involucra el traslado internacional de productos y la disposición de

personas que los trasladen. Con ello en mente, el envío puede incurrir en la retención
de los productos por cuestiones legales de cada país. Con respecto a la disposición de
viajeros, es posible que algunos no tengan los cuidados necesarios para trasladar el
producto lo que involucraría que llegue dañado. Sin embargo, para resolver la
retención del producto en los aeropuertos implementaremos un sistema en nuestra
aplicación que verifique que el producto en cuestión está apto para ser trasladado
entre los países especificados. Por el lado de las personas que lo trasladaran se
implementará una valoración del servicio de su entrega a través de un puntaje, de esa
forma como empresa podremos tomar las acciones necesarias con aquellos viajeros
que tengan baja calificación.
5. ¿Qué características son importantes?
Debe ser intuitiva, las opciones que tendrá la plataforma deben ser específicas y
prácticas para que el usuario no tenga complicaciones en su uso. A su vez, la
seguridad juega un rol importante, ya que estaremos trabajando con transacciones.
Asimismo, el tiempo de respuesta y actualización de la información debe estar en
tiempo real para evitar confusiones entre el comprador y el viajero.
6. ¿Cómo debe verse nuestro servicio y cómo debe comportarse?
Nuestro producto debe verse práctico, moderno y transparente sus operaciones; todo
esto con la finalidad de hacer más satisfactoria la experiencia de usuario. Asimismo,
debe comportarse de forma fluida y con un manejo eficaz de la información.
1.2.2.3. Lean UX Hypothesis Statements 1
1st Hypothesis Statement
Creemos que la implementación de las cotizaciones a través de esta plataforma

contribuirá en que los compradores puedan anticiparse al precio antes de realizar dicha
compra, asimismo puedan informarse referente a que pagos estos estarán realizando,
tanto como el precio y el valor del proceso que realizara el viajero.
Sabremos que hemos tenido éxito,
Cuando tengamos una cantidad elevada de 2000 cotizaciones generadas.
2nd Hypothesis Statement
Creemos que es necesario que el comprador pueda estar siempre informado del estado
del servicio, tanto desde que se genera la orden y recojo del producto, hasta su llegada al
país como la entrega de este mismo.
Cuando veamos que el 80% de los compradores informen que se encuentran conformes
con el proceso de actualización y seguimiento del producto.
3rd Hypothesis Statement
Creemos que el uso de nuestra plataforma facilitará el proceso de compra de un

producto de USA mediante el cliente y el viajero; y así desarrollar una solución practica
y rápida.
Cuando veamos que el 70% de los usuarios están satisfechos con la prontitud que se
entrega su pedido a través de sus reseñas positivas en nuestra plataforma.
4rd Hypothesis Statement
Creemos que, al dejar libertad de elección de los productos solicitados por los
compradores, facilitará el proceso de integración de los viajeros.
Cuando veamos que el 50% de viajeros registren su viaje y escojan un producto como
mínimo para una entrega con la prontitud y seguridad, a través de nuestra plataforma.
44
1.2.2.4. Lean UX Canvas

Business Problem Solution Ideas Business Outcomes
•Generar una plataforma
Problem Statement * Una aplicación que permita realizar intuitiva, eficaz y óptima que
Dada la coyuntura actual, con respecto a la crisis la compra del producto de la tienda genere ingresos a partir de la
económica y la reactivación de ciertos sectores comercial extranjera. contratación de servicios de
como el turismo, se evidencia que importación de nuestra
específicamente las personas que requieren * Una aplicación que permita elegir el empresa o de viajeros para
realizar una compra en el extranjero, ya sea viajero con mejor costo y fecha de traer productos del cliente
porque es más económico, más actual o de mejor entrega. hasta su domicilio.
calidad, no logran completar el proceso de •Establecer nuestra posición
compra por los altos impuestos de envió o porque en el mercado, a través de
simplemente no cuentan con un familiar o resultados efectivos de
conocido en ciertos países como Estados Unidos productos entregados que
que se encargue de traer su producto. generará confianza en el
Hemos identificado una problemática en este público objetivo, calidad del
proceso, los compradores optan por no continuar servicio de los viajeros y un
con la compra, pues el tiempo de entrega, la sistema web sólido como
seguridad y el temor que les genera es una gran práctico.
determinante en su decisión de pago. Asimismo, •Causar interés en las
ante la reactivación del turismo, miles de viajeros empresas audiovisuales
han planificado sus viajes a diferentes partes de afiliadas de nuestra
nuestro País. En consecuencia, los viajeros se competencia, debido a nuestro
vieron obligados a incrementar su bolsa de viaje alcance en los usuarios y su
ante los aumentos de los precios en Perú. Sin favoritismo, para ampliar
embargo, no todos pueden solventar sus gastos de nuestro alcance en publicidad,
44
viaje. aumento de ingresos por el
¿Cómo podemos hacer para que los compradores crecimiento de ventas, entre
reciban una atención oportuna y eficaz para que otros factores para el beneficio
se complete el proceso de compra posterior a la de la plataforma.
cotización de su producto, así como beneficiar u •Producir una rentabilidad
seguridad y brindar tiempos de entrega que estén económica al servicio de los
a su disposición para afianzar su confianza y viajeros y de la empresa, con
como integrar a los viajeros a este proceso para precios económicos y
que puedan generar ingresos extras para sus variables dependiendo de los
gastos de viaje? productos de interés de los
usuarios, en el servicio de
importación, y la publicidad y
suscripción de nuestra
plataforma con el fin de
generar mayores ingresos que
costos.
•Sentar una tasa de retención
por determinado periodo, para
verificar si nuestros usuarios
siguen utilizando nuestro
servicio, con campañas de
marketing, servicio que
cumple sus necesidades con
funciones de la plataforma, y
si no se cumple, identificar
cuáles serían las razones del
abandono del servicio.
User & Customers User Benefits

* Los compradores sentirán
•Compradores que deseen traer sus productos de satisfacción al poder realizar
Estados Unidos. la compra de manera muy
•Viajeros. sencilla y segura, ya que no
tendrá que contar con algún
familiar o conocido para poder
realizar esa gestión.
* Debido a que los viajeros

están teniendo distintas
solicitudes de entregas al país
a donde retornan estos estarán
a gusto con la aplicación, ya
que lograra concretar la
entrega y solventar gastos.
Hypotheses What’s the most important What’s the least amount of

thing we need to learn work
*Creemos que la implementación de las first? we need to do to learn the
cotizaciones a través de esta plataforma * Se debe conocer si los compradores most
contribuirá en que los compradores puedan confían en el proceso de compra y important thing?
anticiparse al precio antes de realizar dicha entrega de los viajeros.
compra, asimismo puedan informarse referente a * Encuestas tanto a
que pagos estos estarán realizando, tanto como el * Se debe conocer si los viajeros están compradores como viajeros
precio y el valor del proceso que realizara el dispuestos a poder traer juntos con ello que utilizan la aplicación.
viajero. productos que no son de sus
Sabremos que hemos tenido éxito, pertenencias, pero sabiendo que están * Informes sobre los pedidos
Cuando tengamos una cantidad elevada de 2000 bajo su responsabilidad de entrega. con mayor actividad según su
cotizaciones generadas. ubicación.
* Se debe conocer si los compradores
*Creemos que es necesario que el comprador confían en una aplicación donde hay * Demostrar resultados
pueda estar siempre informado del estado del diversos tipos de costo por cotización exitosos mediante la
servicio, tanto desde que se genera la orden y y diversos viajeros. publicidad.
recojo del producto, hasta su llegada al país como
la entrega de este mismo. * Realizar mediante las
Sabremos que hemos tenido éxito, entrevistas a los compradores
Cuando veamos que el 80% de los compradores de cómo fueron atendidas y si
informen que se encuentran conformes con el es que requieren otro tipo de
proceso de actualización y seguimiento del manejo que pueda ser
producto. considerado a futuro dentro de
la aplicación.
*Creemos que el uso de nuestra plataforma
facilitará el proceso de compra de un producto de
USA mediante el cliente y el viajero; y así
desarrollar una solución practica y rápida.
Cuando veamos que el 70% de los usuarios están
satisfechos con la prontitud que se entrega su
pedido a través de sus reseñas positivas en nuestra
plataforma.
48
1.3. Segmento Objetivo

Con la llegada del COVID-19 en el 2019, la cantidad de peruanos que compraban en
portales extranjeros tuvo un crecimiento considerable. Según la Cámara Peruana de
Comercio electrónico (CAPECE), el ecommerce cross-border en Perú representó el 25%
de las ventas online en ese mismo año. Por otro lado, si bien los viajes internacionales
disminuyeron notoriamente al inicio de la pandemia, durante los primeros 5 meses de
2022, se obtuvo la cifra de 250 millones de llegadas internacionales registradas,
representando casi la mitad (46%) del nivel anterior a la pandemia según datos del
Barómetro del Turismo Mundial de la OMT. Es por ello por lo que con el incremento de
las compras a través de portales extranjeros y con la constante recuperación del sector
de la aviación que, a través de nuestra plataforma, conectaremos tanto a las personas
que compran sus productos por portales extranjeros con aquellas que viajan
internacionalmente.
Fuente: World Tourism Organization
48
CHAPTE
2
REQUIREMENTS ELICITATION & R
ANALYSIS
1
2.
2.1. Competidores.
2.1.1. Análisis Competitivo.
Competitive Analysis Landscape
¿Por qué llevar a ¿Cómo identificar a nuestros principales competidores?

cabo este
análisis? Con este análisis, podemos identificar el FODA, es decir, las
fortalezas, oportunidades, debilidades y amenazas de nuestros
competidores. Asimismo, se evalúa su participación en el mercado y
qué estrategias se pueden desarrollar para que nuestra aplicación
surja en el mercado laboral. Pero ¿Cómo identificamos a nuestros
principales competidores?, Debemos estudiar el mercado e
identificar las aplicaciones más usadas por los compradores en el
extranjero. Así se concluyó que los principales competidores son:
(En la Qempo Guvery Comparto

cabecera mi maleta
colocar por Import It
cada
competidor
nombre y
logo)

P Overvie Plataforma que Se trata de un Es la Es una

conecta a compradores servicio de compra plataforma que plataforma
E w de productos de productos en el une a las que tiene
extranjeros con extranjero para comunidades como
R viajeros. entregarlos a de objetivo
F clientes en el Perú. compradores y unir a
Los compradores Analiza el viajeros. viajeros
I hacen pedidos y los producto, le envía con
viajeros compran y los la cotización y Los personas
L traen hasta el país de previo pago se compradores que
destino, ganando encarga de llevar hacen pedidos quieren
comisiones. el pedido hasta las y los viajeros traer sus
manos del compran y los compras
comprador. traen desde de
Asimismo, realiza EE. UU. a cualquier
los trámites Perú, ganando parte del
correspondientes comisiones. mundo.
al ingreso de los Mientras que
artículos al país. Guvery Los
respalda el comprador
dinero de cada es hacen
acuerdo. pedidos y
lo envían a
la
ubicación
del
viajero, el
cual lo
transporta
hasta las
sedes de la
empresa
en el país
de destino,
ganando
comisione
s.
Ventaja Dispone de 2 Compra el Facilita la Cotizas

opciones: producto en USA, comunicación con hasta 7
competi -Obtener el producto a en la tienda que el entre personas viajeros el
tiva través de un viajero a usuario elija. que ofertan y transporte
elección del demandan el de tus
¿Qué comprador. Se encargan de la Servicio de compras.
valor recepción de los los Viajeros. Eliges un
- Obtener el producto productos en su presupuest
ofrece a a través de una sede, así como Dichos
los o, pagas y
Courier. también del envío viajeros le envías la
clientes hacia tu país, el pueden buscar compra al
Esto nos da una proceso de pedidos
? diferencia a los viajero
aduanas y disponibles, dentro de
competidores, pues nacionalización y ofertar sus
ofrecemos ambos las fechas
la entrega final en tarifas para de este.
servicios. tu dirección comprar y
Nos encargamos del entregar el Si el
Se realiza un único pedido, viajero
despacho a domicilio pago en la marcar
en caso contraten la los recibe
plataforma estados del algún
opción delivery.
El usuario puede seguimiento pedido
Al ofrecer ambos elegir diferentes de los incompleto
servicios, el usuario precios basados en acuerdos , se
podrá escoger el que el tiempo de pagados. realizará
más se adapte a su entrega. un ajuste
bolsillo, Opción Por otro lado, en la tarifa
empresa: Largo plazo Ofrece una los al
y menor costo. garantía de 30-90 compradores momento
días en caso de pueden de la
Opción viajera: corto falla (se lo llevan confirmar la entrega.
plazo y mayor costo. hasta el recepción de
proveedor). su pedido, De haber
Se le brinda
solicitar un algún
seguimiento continuo
reembolso costo
a su producto, cuando
cuando su adicional
elige opción viajera,
pedido no se que surja
no solo se le mostrara
le fue durante el
la ubicación, sino
entregado y proceso, el
también una imagen
calificar al viajero
del estado del
viajero con el tiene 3
producto.
que concretó días desde
el pedido. la fecha de
entrega
Notificaciones para
recordatorias realizar el
al comprador pago
para que no se faltante.
pierda buenas
ofertas de El
productos. comprador
puede
elegir si
recoger el
producto
en las
oficinas de
la empresa
(gratis) o
recibir sus
productos
por correo
(cargo
adicional).
P Mercad Personas que compren Personas que Personas que Viajeros y

o productos en portales compren compren personas
E objetivo extranjeros y deseen productos en productos en que
R recurrir, de forma portales portales quieren
personalizada, a una extranjeros. extranjeros y traer sus
F viajero o Courier. deseen compras
contratar, de de
I
forma cualquier
L personalizada, parte del
a una persona mundo.
que lo traiga.
E
M
Estrateg Publicación en redes Publicación en las Presencia en Utiliza

ias de sociales más redes socialesredes sociales redes
frecuentadas desde 6 sobre los nuevos compartiendo sociales
marketi meses antes del productos trucos/consejo para
ng lanzamiento para disponibles en las s para ahorrar compartir
generar interés y tiendas con las que en las productos
conocimiento en trabaja: Amazon, compras interesante
nuestro público eBay, BestBuy, internacionale s en el
objetivo. Asimismo, Walmart, Apple s, así como mercado,
publicación en sitios Store y muchas también así como
web para compartir más. Así como publicación de también
vídeos, como también ofertas de ofertas de diferentes
YouTube, mostrando temporada poralgunas consejos
el uso/tutorial y parte de estos. plataformas para elegir
beneficios de nuestra digitales un
plataforma. Entrevistas en conocidas producto,
programas de (Amazon, ya sea para
televisión y Apple Store, uso del
revistas. etc.) usuario
Utiliza Capybara que lo
SEO para el compra o
posicionamiento Publicidad en como
en buscadores de YouTube. regalo para
su página web. otra
persona.
P Product Servicio que comunica Es un servicio de Es un servicio Es un

os & a los compradores recojo y entrega de que comunica servicio
R extranjeros con productos a los que
Servicio viajeros para hacer la comercializados compradores comunica
F s
compra y envío de los entre territorios extranjeros a los
I productos que distintos través de con viajeros comprador
necesiten. sus proveedores para hacer la es
L
logísticos. compra y extranjero
Servicio que permite envío de los s con
traer tus productos a productos que viajeros
D través de una Courier. necesiten. dónde el
comprador
E
envía a la
dirección
del viajero
P los
productos
R
para que
O este último
los
D traslade.
U
Precios Si el comprador App y sitio web App y sitio App y sitio

y escoge el servicio por disponibles de web web
Costos Courier, Import It forma gratuita. disponibles de disponible
retendrá entre el 10% s de forma
y 20% del valor del Comprador: forma gratuita. gratuita.
producto. Si elige la
opción del viajero, El precio total para Comprador: Comprado
entonces, el viajero pagar por el r:
servicio está Guvery cobra
retendrá entre un 5% y una comisión El viajero
10% conformado por el
precio del al comprador en
independientemente y se calcula promedio
del porcentaje retenido producto, la
contraprestación como el 7 % cobra entre
por la empresa. del monto un 5% y
correspondiente a
Si el comprador los Proveedores total del 20% del
obtiene nuestro plan Logísticos, la acuerdo, con valor de
de suscripción se contraprestación un tope los
reducirá el porcentaje correspondiente a máximo de 59 productos
de comisión por Qempo; el costo $ + 1 $ por a
producto para la de los trámites de cada producto transportar
empresa. importación y/o diferente . Adicional
Aduanas. dentro del a ello,
acuerdo. Comparto
Viajero: Mi Maleta
Por lo tanto, la se lleva un
Los costos que comisión total porcentaje
cubrir para que paga el de
trasladar el comprador comisión.
producto ya están esta dado por
cubiertos por el el precio de Viajero:
comprador en su sus productos,
boleta. Por ende, la cantidad y Los costos
los viajeros no la comisión que cubrir
asumen algún del viajero. para
costo por su parte. trasladar el
producto
ya están
cubiertos
por el
comprador
en su
boleta. Por
ende, los
viajeros no
asumen
algún
costo por
su parte.
Canales Web y Móvil Web Web Web

de
distribu
ción
(Web
y/o
Móvil)
A Realice esto para su startup y sus competidores. Sus fortalezas deberían apoyar sus
ná
lisi oportunidades y contribuir a lo que ustedes definen como su posible ventaja
s competitiva.
Fortalez Opción de elegir Opción de elegir Opción de Se

as modalidad de envío modalidad de elegir al tomarán
entre Courier y envío entre viajero por su acciones
viajero. Courier, vuelo tarifa, su legales
comercial o tiempo de contra los
Seleccionar al viajero viajero. entrega u otro viajeros
que mejor le convenga filtro. que roben
al comprador ya sea Garantía de 30 - o se
por costo o tiempo de 90 días si el Los costos son nieguen a
entrega. producto presenta variables, no entregar
algún desperfecto. fijos. productos.
Detalle de cada costo
asumido en la boleta Detalle de cada Notificaciones Permite
de pago. costo asumido en recordatorias cotizas con
la boleta de pago. sobre ofertas hasta 7
Garantía de 30 días si de productos
el producto presenta viajeros el
disponibles. transporte
algún desperfecto.
de tus
Mostrar ofertas de compras
productos disponibles. para que el
comprador
Disponible como pueda
aplicación móvil. elegir el
viajero que
mejor le
convenga.
Debilida Nuevo en el mercado Casos de estafa Se debe El viajero

des de conexión entre especificar es el
comprador y viajero o La interfaz para todas las responsabl
Courier. visualizar el características e de
tracking del del producto conocer
Sin recomendaciones producto por parte (peso, tamaño, las
y/o reseñas de clientes del comprador no categoría, etc.) políticas
ya que todavía no lo es fiable ya que no antes de de las
prueban. se actualiza y sus publicar el aerolíneas
puntos de pedido. en la que
referencia son traerá los
muy generales. El viajero es productos,
propenso a además de
El soporte de olvidar
atención al cliente cumplir
agregar el con las
por el chat del precio de
sitio web demora normas de
impuestos equipaje.
en responder. taxis u otros,
lo cual finaliza La
en una empresa
cotización no se hace
errónea. responsabl
e de los
defectos
de fábrica
que
puedan
tener los
productos.
La
empresa
no será
responsabl
e por la
naturaleza
de los
productos
que el
cliente
encargue
al viajero,
va por
cuenta del
viajero
conocer la
legalidad e
idoneidad
del
producto.
Solo en los
casos
donde sea
procedente
una
devolución
, se le
devolverá
al
comprador
el 100% de
lo pagado.
Oportun Implementar las Crecimiento Crecimiento Crecimient

idades funcionalidades constante del constante del o
deficientes en las comercio comercio constante
aplicaciones actuales y del
mejorarlas. electrónico. electrónico. comercio
electrónico
Mercado actual Recuperación de Recuperación .
recuperándose por la los viajes de los viajes
pandemia. internacionales internacionale Recuperaci
durante pandemia. s durante ón de los
Pocas plataformas pandemia. viajes
ofrecen servicio de Mejorar el área de internacion
Courier y viajeros a la atención al cliente Mejorar el ales
vez. a través de una IA proceso de durante
más desarrollada y solicitud de pandemia.
una organización productos para
mejor del personal hacer más Capacitar
humano. fluida y a los
cómoda la viajeros
Mejorar la experiencia de mantenién
velocidad de usuario. dolos
actualización de informado
los precios de las Implementar s sobre las
páginas con las un sistema de políticas
que trabajan para ayuda que le de las
evitar márgenes de permita al aerolíneas
error en los costos. viajero que
conocer todos utilizarán.
Realizar un los gastos a
seguimiento del los que debe Implement
producto más apegarse al ar un
detallado y momento de sistema
actualizado en generar una que
tiempo real. cotización. prohíba a
Incursionar en el los
mercado chino. comprador
es solicitar
productos
que vallan
en contra
de las
leyes
impartidas
por el
gobierno
dónde se
encuentra
el viajero.
Amenaz Mucha competencia Casos de estafa Links de Nuevas

as en el mercado actual. dentro de su productos en situacione
plataforma genera sitios no s que
La competencia podría rechazo en los seguros puede involucren
podrían optar por usuarios. generar algún cuarentena
trabajar con Courier y perjuicio en el s como la
viajeros a la vez. comprador y/o del Covid-
Otra cuarentena viajero 19
aumentaría nuestro dañando su involucrarí
impedimento en el experiencia a que sus
mercado y nuestra con la establecim
notoriedad. plataforma. ientos
cierren de
nuevo.
El
desconoci
miento de
los
viajeros
respecto a
las
políticas
de sus
aerolíneas
genera
descontent
o en los
comprador
es y mala
reputación
para la
plataforma
.
2.1.2. Estrategias y tácticas frente a competidores.

a. Estrategia de supervisión: Llevaremos un seguimiento del rendimiento de cada
viajero que utilice nuestra plataforma para seleccionar a aquellos que presenten
bajos índices de satisfacción según lo puntuado por el comprador y asesorarlo en
las áreas en las que presente mayor dificultad.
b. Estrategia de diferenciación: Nuestros principales competidores cuentan solo con
una modalidad de envío: Courier o Viajeros. Aunque algunas tienen parcialmente
implementadas ambas, no cumplen con todas las funcionalidades necesarias.
Import It implementará ambas modalidades brindándole al usuario más opciones y
control sobre sus compras.
c. Táctica de enfoque y autoridad: Como empresa emergente recién integrada en el
mercado y con poca notoriedad en este mismo, nos centraremos primero en ganar
presencia dentro de nuestro país de origen realizando campañas colaborativas con
influencers peruanos para instigar a nuestro público objetivo a utilizar nuestra
plataforma.
d. Táctica de apropiación: Tomaremos las deficiencias que presentan nuestros
principales competidores, las restructuraremos e implementaremos en nuestra
plataforma. Asimismo, publicaremos estas mejoras en nuestros medios de
marketing para que nuestro segmento objetivo conozca mejor las características de
nuestro sistema.
2.2. Entrevistas.
En este punto presentaremos los resultados de las entrevistas realizadas a los usuarios
objetivos.
2.2.1. Diseño de entrevistas.

En esta sección, mostraremos las preguntas que hemos generado para realizar las
entrevistas a los dos tipos de usuarios objetivos. Cabe destacar, que las preguntas
realizadas son de tipo abierto, con el objetivo de recolectar información relevante que
nos ayude a tener una idea más precisa de cómo solucionar problemas de nuestros
usuarios objetivos.
Preguntas principales y complementarias para la entrevista

1. Personas que desean importar productos de USA a Lima o provincias:
a. Preguntas principales:
 ¿Por qué le parece más atractivo comprar en el extranjero y no en su ciudad
o país?
 ¿Cuáles son los principales motivos por el cual usted contrataría el servicio
de una empresa o profesional para importar un producto de USA?
 ¿Cuáles son sus principales molestias o dificultades, cuando realiza la
compra en una tienda oficial de USA?
 ¿Podría describir la dificultad del proceso de compra de un producto en el
extranjero a su domicilio?
 ¿Qué tan importante le resulta conocer el presupuesto detallado que se le
cobra por el proceso de envío completo tales como cargo por impuestos
internacionales, viaje, etc.?
 ¿Cuáles serían los factores que determinan su confianza en un sistema web
que importe su producto hasta su domicilio o ciudad donde reside?
 ¿Cuán importante para usted le resulta tener el control del tiempo de
entrega y el precio de envío de su producto?
 ¿Considera una ventaja que, en el proceso de importación de su producto,
no solo se visualice la ubicación del pedido, sino también una imagen de su
producto para que pueda visualizar su estado? ¿Por qué?
 ¿Qué funcionalidades le gustaría que una aplicación que se encargue de
traer su producto de USA, tenga?
 Muchos productos, que son importados por aduanas, no son tratados de
manera delicada. ¿Qué piensa sobre una manera de que cada producto sea
traído de manera cuidadosa?
 ¿Cuán importante es para usted conocer a la persona que estará a cargo de
trasladar su producto?
b. Preguntas complementarias:
 ¿Cuántos años tiene?
 ¿En qué distrito reside?
 ¿Cuál es su estado civil?
 ¿Cuál es su ocupación?
 Mencione algunas de sus habilidades, por favor.
 ¿Cuáles son sus dispositivos de preferencia?
 ¿Cuáles son sus principales frustraciones?
 ¿Qué tipo de productos son los que usualmente compra?
 ¿Conoce alguna aplicación para traer productos de USA a su ciudad de
residencia?
 ¿Estaría dispuesto a traer su producto fuera de la caja o del empaque?
Detalle su respuesta.
2. Viajeros:
a. Preguntas principales:
 ¿Cuánto es tu experiencia en haber traído algún producto del extranjero hacia
algún familiar o conocido?
 ¿Has pensado en maneras sencillas de generar dinero durante tus viajes y
cuáles son estas?
 ¿Considerarías poder traer otros productos del extranjero a personas que lo
requieran, teniendo un ingreso para tu persona?
 ¿Cuánto conoces acerca del proceso de importación de productos?
 ¿Cuáles son los problemas más frecuentes que atraviesa al momento de
declarar los productos que trae consigo al momento de viajar?
 ¿Hasta con cuántos productos estaría dispuesto a viajar para que no le
represente incomodidad?
 ¿Cuál es la duración promedio de tus viajes?
 ¿Con cuántas maletas sueles viajar?
b. Preguntas complementarias:
 ¿Cuántos años tiene?
 ¿En qué distrito reside?
 ¿Cuál es su estado civil?
 ¿Cuál es su ocupación?
 ¿Cuáles son sus dispositivos de preferencia?
 ¿Cuáles son sus principales frustraciones?
 ¿Qué tan seguido viajas?
 ¿Cuenta con seguro al realizar su viaje?
2.2.2. Registro de entrevistas.

Segmento 1: Personas que desean importar productos de USA a Lima o provincias
 Entrevistado 1:
 Nombres y Apellidos: Edgar Hugo Malca Suarez
 Edad: 50 años
 Distrito: Los Olivos
 Evidencia de la reunión:
 URL de Stream: https://web.microsoftstream.com/video/60ceb7ed-3e08-

4835-89e6-96a05b8add61
 Timing y duración: 10:06 – 13:04
 Resumen sobre la entrevista:
La entrevista fue realizada a Edgar Hugo Malca Suarez, tiene 50 años y reside en
Los Olivos. Es miembro de las fuerzas armadas, casada y sus dispositivos de
preferencia son su celular, laptop. Sus principales canales digitales de interacción
son WhatsApp, Facebook y Instagram. Cuenta con habilidades como saber
trabajar bajo presión y ser proactivo. Además, cuenta con ciertas frustraciones
como la inseguridad ciudadana, la contaminación ambiental y la crisis económica.
Es una persona identificada con nuestro principal segmento objetivo pues en el
presente año se ha sumergido más en el comercio electrónico y ha identificado
que los productos en Estados Unidos son exclusivos y que tienen un precio de
venta menor que en Perú. Asimismo, nos menciona que los productos
tecnológicos son los que más le llaman la atención. Él ha investigado sobre
importar sus productos con una empresa. Sin embargo, menciona que esto sería a
largo plazo y que es diferente a traerlo con un familiar o un conocido en su
maleta, es decir, llega más rápido y con mayor seguridad. El entrevistado nos
comentó, que saber la ubicación de su producto en el transcurso de viaje del
producto y si fuera con una imagen sería muy atractivo para el segmento.
Finalmente, menciona que para contratar el servicio de una empresa dedica a traer
productos de USA o el servicio de un viajero, debe ser indispensable poder
visualizar los costos de lo que emplea el servicio.
 Entrevistado 2:
 Nombres y Apellidos: Nadine Ramos
 Edad: 19 años
 Distrito: San Martín de Porres

4835-89e6-96a05b8add61
 Timing y duración: 4:27 –10:05
La entrevista fue realizada a Nadine Ramos, quien tiene 19 años. Ella reside en
San Martín de Porres y es una estudiante de la carrera de Comunicaciones. Ella es
una persona muy comunicativa y le gusta usar las redes sociales y aplicaciones de
mensajería como Instagram y WhatsApp. En la entrevista, ella comenta que le
gusta realizar compras en el extranjero, ya que tienen ediciones limitadas, que,
muchas veces, no están disponibles en Perú (La versión de Discos de Target, que
traen contenido adicional, por ejemplo). Además, le gusta que los precios en
Estados Unidos son los originales, mientras que, una vez que el producto llega a
Perú, cuesta mucho más.
Algunas de las dificultades y molestias que ella identifica cuando compra en línea
es que se demoran mucho en llegar, puede tardar muchos meses. Además, los
servicios de correo no envían suficientes actualizaciones sobre el progreso del
envío y ella solo tiene que esperar que todo vaya bien. Una mejora que ella
propone es implementar un mejor sistema de seguimiento de productos para que
los clientes puedan tener mayor detalle de cada punto donde se encuentra el
producto en el camino. La mayoría de los productos que ella compra son
dispositivos tecnológicos como audífonos o un Apple Pencil, que recientemente
compró, por ejemplo. Finalmente, menciona que le gusta ordenar hasta 5
productos. Explica que esto se debe a que, si orden menos productos, el precio del
shipping y envío puede llegar a sobrepasar el precio del producto y no le parece
que es inteligente.
 Entrevistado 3:
 Nombres y Apellidos: Carlos Elías Urquiaga Quesquén
 Edad: 41 años
 Distrito: Magdalena del Mar

4835-89e6-96a05b8add61
 La entrevista fue realizada a Carlos Elías Urquiaga Quesquén, tiene 41 años y

reside en Magdalena del Mar. Es un emprendedor, soltero y sus dispositivos de
preferencia son su celular y su laptop. Sus principales canales digitales de
interacción son WhatsApp, Facebook y Google. Cuenta con habilidades como
liderazgo, aceptar otros puntos de vista, paciencia y trabajo en equipo. Además,
cuenta con ciertas frustraciones como el contexto político actual y la depreciación
del sol. Por otro lado, actualmente, tiene clientes que le entregan autos que son de
fabricación extranjera y los componentes son del extranjero así que debe
comprarlos de allá. También menciona que los principales motivos por los que
contrataría un servicio de una empresa o profesional para importar sus
componentes serían que conste de una garantía para el tiempo de entrega y el
estado del producto durante su traslado. Esto debido a que le preocupa que sus
componentes lleguen dañados y que sus clientes sean perjudicados si no se
cumple el tiempo el plazo. Agregando a lo anterior, le parece importante conocer
el presupuesto detallado del envío ya que así tiene un control sobre ellos y puede
asociarlo al precio de venta a sus clientes, así como también, conocer el tracking
de sus productos para verificar si ya salieron o si se están demorando en algún
punto, de esta forma puede llamar a la empresa logística para saber que sucedió y
por qué está demorando. Adicional a ello, para complementar el seguimiento de
sus productos, le parece una ventaja obtener evidencias su estado porque a veces
puede llegar dañado, entonces es importante para la garantía demostrar en que
etapa del viaje el producto se dañó para que la empresa responsable se haga
cargo. Además, le parece igual de importante conocer el historial de la persona
que trasladará sus productos, cuánto tiempo lleva realizando este servicio, con
que países trabaja, con que clientes a trabajado porque eso me permitiría realizar
compras mayores. De igual forma, confiaría en una plataforma que importe su
producto hasta su domicilio si esta contuviera información valedera, real,
detallada (foto o video) y que no se caiga o corte. Ahora bien, nos menciona que
la dificultad que presenta para el proceso de compra de sus componentes es
cuando se agota el stock o le cambian la fecha de entrega. Finalmente, le gustaría
que la plataforma tuviera una interfaz de búsqueda de productos rápida, compra
fácil y un canal de atención para consultas.
Segmento 2: Viajeros
 Entrevistado 1:
 Nombres y Apellidos: Ashly Cartagena
 Edad: 25 años
 Distrito: San Miguel
4835-89e6-96a05b8add61
La entrevista fue realizada a Ashly Cartagena y reside en el distrito de San Miguel.

Ella es una profesional egresada de la carrera de Marketing. Actualmente, trabaja en
el área de estrategias de su empresa como community manager. Por esta razón, ella
utiliza redes sociales, entre ellas Instagram y Tiktok. No solo eso, pero también sabe
cómo funcionan sus algoritmos y en su trabajo, está a cargo las redes sociales de la
empresa para aumentar el engagement y visibilidad de la marca con el público
objetivo. Personalmente, es una persona muy comunicativa. Ella sabe cómo hacerse
entender y compartir su opinión cuando piensa que es necesario. También, es una
persona muy sociable y le gusta divertirse con sus amigos.
En la entrevista, ella menciona que, anualmente, viaja 2 veces como mínimo. Sin
embargo, a veces, pueda realizar más viajes por vacaciones planeadas con amigos o
surgen viajes extra en los que quiere participar. Ella tiene familiares y amigos en el
extranjero, a quienes le gusta ir a visitar de vez en cuando. Esta es uno de los
motivos por los que viajar constantemente le resulta un poco más económico, ya que,
muchas veces, se hospeda en las viviendas de sus conocidos.
Además, comenta que, cuando viaja, le encargan traer productos, que son
principalmente dispositivos tecnológicos. Además, ella compra pequeños regalos por
su propia cuenta para, luego, obsequiarlos a sus familiares. También, menciona que,
sus familiares a quienes les realiza el favor, siempre le devuelven el pago del
producto, pero solo son algunas veces que le dan dinero adicional por realizar el
favor. A ella le gusta la idea de realizar este servicio porque piensa que no requiere
esfuerzo adicional y puede generar un ingreso adicional fácilmente. En caso de que
empiece a realizar el servicio, ella traería hasta 5 productos, ya que el peso de la
maleta también puede generar un costo adicional.
 Entrevistado 2:
 Nombres y Apellidos: Pablo Barragán
 Edad: 22 años
 Distrito: Comas

4835-89e6-96a05b8add61
La entrevista fue realizada a Pablo Barragán tiene 22 años y reside en Comas.

E un estudiante universitario, soltero y sus dispositivos de preferencia son su
celular y su laptop. Sus principales canales digitales de interacción son
Facebook e Instagram y su browser principal es Chrome y Safari, sus marcas
de influencia son Nike y Adidas, así como Apple y Lenovo. Cuenta con
habilidades como saber actuar ante problemáticas, Responsable y con ganas de
aprender nuevas cosas. Además, cuenta con ciertas frustraciones como la crisis
económica y la inseguridad social. Barragán nos comenta acerca de los viajes
que comenzó desde el 2017 a USA y donde empezó a traer productos para sus
familiares y conocidos sin ningún costo adicional, solo por ser un favor. Él
está de acuerdo en poder generar ingresos con traer estos productos extranjero
a quienes lo necesiten, ya que para él si sería beneficioso poder generar un
ingreso adicional viajando, asimismo conoce mucho acerca del proceso de
importación, y nos cuenta como ha ido trayendo cada producto en los viajes
que ha tenido, así como los problemas frecuentes que estos podrían traer como
el tiempo de espera en migraciones o el papeleo que él tenga que realizar en
Aduanas por no estar a su nombre, la diferencia de productos con los que viaja
y con los que retorna, los costos de maletas o el cargo por exceso adicional
que brindan algunas aerolíneas y la duración del viaje al estado que él se dirija
en USA.
 Entrevistado 3:
 Nombres y Apellidos: Oriele Valencia
 Edad: 49 años
 Ubicación: Florida (USA)

4835-89e6-96a05b8add61
 Timing y duración: 17:37:00 – 27:40

La entrevista fue realizada a Oriele Valencia, tiene 49 años y reside en Florida (USA).
Es ama de casa, trabajadora independiente, casada y sus dispositivos de preferencia son
su celular y su laptop. Sus principales canales digitales de interacción son WhatsApp y
Facebook y su browser principal es Safari. Cuenta con habilidades como cuidar a los
animales, ser responsable y colaborar en actividades sociales. Además, cuenta con
ciertas frustraciones como no poder visitar a su familia en Perú como quisiera debido a
la distancia.
En la entrevista se realizaron las preguntas planteadas de acuerdo con el segmento de

viajeros, las cuales fueron respondidas por la entrevistada de manera detallada y clara,
ya que tiene mucha experiencia realizando viajes desde USA a Perú. Dentro de las
experiencias más relevantes señaladas por Oriele, señala que siempre hace el pago de
seguro de equipaje en la aerolínea respectiva, prefiere hacer viajes de corta duración y
con la menor cantidad de escalas posibles. Además, señala que hace varios años tuvo
malas experiencias con aduanas al momento de llegar a Perú, ya que ella traía presentes
para sus amigos y familiares pero que eran observados por los aduaneros al revisar la
maleta, por lo que aprendió a elegir mejor los productos que lleva y a quitar etiquetas
con empaques de las prendas que transportaba. Finalmente, señaló que estaría dispuesta
a monetizar durante sus viajes mediante una plataforma como la propuesta por nuestro
equipo.
Video de evidencias de las entrevistas:
Link general de Stream: https://web.microsoftstream.com/video/60ceb7ed-3e08-4835-

89e6-96a05b8add61
2.2.3. Análisis de entrevistas.
A continuación, se desarrolla una estrategia en conjunto con el equipo para identificar
los puntos en común en base a las respuestas de cada entrevistado a cada pregunta. Esto
nos ayuda a realizar un análisis más conciso y seguro para desarrollar nuestra aplicación
en base a la información recolectada.
Análisis General de las entrevistas del Segmento objetivo Personas que desean
importar productos de USA a Lima o provincias:
El 67% de los clientes indicó que prefería comprar productos del extranjero por el
precio más accesible en comparación con el ofrecido en las tiendas locales (mismo
producto), mientras que el 33% indicó que lo hacía por la disponibilidad de los
productos, ya que hay algunos artículos que están disponibles únicamente en el
extranjero.
Razón por la cual prefieren comprar produc-

tos del extranjero
Precios más acce-

sibles
33%
Disponibilidad de
producto
67%
El 67% de los clientes respondió que el principal motivo por el cual contrataría a un
tercero para encargarse del transporte de su compra es por la garantía ofrecida de que el
producto llegará bien, mientras que el 33% indicó que lo hacen por desconocimiento de
las vías de importación.
Motivos por los cuales contrataría a un ter-
cero para transportar producto desde el ex-
tranjero
Desconocimiento de
hacerlo por cuenta
propia
33%
Tener garantía de
llegada del producto
67%
El 67% de los clientes indicó que las molestias y problemas que tenían con las compras
del extranjero son relacionadas al tiempo que demoran en llegar, mientras que el 33%
señaló que les preocupa el daño en el producto.
Molestias al realizar compras del extranjero
Daños en el
producto
33%
Tiempo que demora

en llegar
67%
El 67% de los clientes respondió que tienen una dificultad media durante el proceso de
compras de productos en el extranjero, mientras que el 33% indicó que tienen alta
dificultad con el mismo proceso.
Dificultad en el proceso de compra de
producto desde el extranjero
Alta
33%
Media
67%
El 67% de los clientes indicó que es muy importante el conocimiento del presupuesto
detallado de los gastos relacionados a la importación de su producto, mientras que el
33% indicó que es importante.
Importancia de conocer el presupuestro de-

tallado
Importante
33%
Muy importante
67%
El 67% de los clientes indicó que el principal factor por el cual confiarían en una
plataforma web para el traslado de su producto es por la garantía de la entrega que
ofrecen, mientras que el 33% indicó que se guían por los comentarios precedentes de
otros clientes.
Factores que determinan la confianza en la
plataforma web
Comentarios
precedentes de
otros clientes
33%
Garantía de la en-
trega
67%
El 67% de los clientes respondió que es muy importante controlar el tiempo de entrega y
los precios de envío de su producto, mientras que el 33% indicó que es importante.
Importancia del control de tiempo de en-

trega y precio de envío
Importante
33%
Muy importante
67%
El 33% de los clientes indicó que es de alta importancia conocer a la persona encargada
del traslado de su producto, otro 33% indicó que es de mediana importancia y el 33%
restante señaló que era poco importante conocer quién transportaba su producto, con tal
que llegara a su destino sin daños y a tiempo.
Importancia de conocer a la persona
encargada del traslado del producto
Alto Poco importante

33% 33%
Medio
33%
Análisis General de las entrevistas del Segmento objetivo Viajeros:
Se identificó que la mayoría de entrevistados (66.7%) tiene un nivel de experiencia

medio transportando productos en sus viajes desde el extranjero, mientras que un 33%
tiene poca experiencia.
Experiencia transportando productos en sus

viajes
Poca
33%
Media
67%
En cuanto a las formas de monetizar de los viajeros durante sus viajes, se encontró que
el 67% prefiere transportar productos comprados en el extranjero y venderlos en Perú,
mientas que el 33% señaló que vendía artesanías fabricadas por él mismo para venderlas
en su destino.
Formas de generar dinero durante viajes
Venta de
artesanías
33%
Transporte de
productos
67%
El 100% de los viajeros entrevistados señaló que estaba dispuesto a transportar

productos desde el extranjero para entregarlos en Perú.
Disponibilidad para traer productos desde el

extranjero
Sí
100%
El 67% de los viajeros indicó que tenía un conocimiento medio sobre la importación de
productos y un 33% indicó que conocía poco.
Conocimiento sobre importación de produc-
tos a Perú
Poca
33%
Media
67%
El 67% de los viajeros indicó que el principal problema que tenía al transportar
productos desde el extranjero era que los productos estaban sellados y debía declararlos,
mientras que el 33% indicó que cuando transportaba ropa que tenía etiqueta, le
observaron que debía ser de uso personal sin etiquetas o empaques, caso contrario debía
declararlos.
Problemas frecuentes al transportar produc-

tos
Ropa tiene etique-
tas
33%
Productos están sel-

lados
67%
El 100% de los viajeros indicó que debía conocer el tamaño de los productos para
evaluar su transporte, ya que no es lo mismo transportar una laptop, un celular o ropa.
Cantidad de productos que está dispuesto
a transportar
Depende del tamaño del

producto
100%
El 67% de los viajeros indicó que la duración de sus viajes era no mayor a 1 mes,
mientras que el 33% indicó que sus viajes duraban entre 1 a 6 meses dado a que visitaba
varias ciudades.
Duración promedio de viajes
De 1 a 6 meses
33%
Menos de 1 mes
67%
El 67% de los viajeros indicó que viajaba en promedio con 2 maletas (1 de mano y 1
grande) mientras que el 33% señaló que viajaba solo con 1 maletas ya que sus viajes
eran cortos.
Cantidad de maletas con las que suele via-
jar
3 maletas
33%
2 maletas
67%
2.3. Needfinding
2.3.1. User Personas.
A continuación, se construirán los User Persona de cada segmento objetivo de nuestra
plataforma. Para ello, se utilizarán los datos recolectados de las entrevistas realizadas;
principalmente, los que muestran los objetivos, motivaciones y frustraciones con las que
cuentan cada uno de los sectores que conforman al público al que va dirigida la
aplicación. Es decir, se presentará tanto un estereotipo de una persona que desea
importar o comprar productos de Estados Unidos, como de un viajero.
Segmento 1: Persona que desea comprar productos de Estados Unidos
Segmento 2: Viajero que desea generar un ingreso económico adicional

2.3.2. User Task Matrix.
En esta etapa nos enfocaremos en las tareas que los User Personas clientes que desean
comprar productos en USA, representados por Jenny Álvarez. Asimismo, el segundo
User Persona que son los viajeros, representados por Natali Benavides. A continuación,
se presentan las tareas que realizan para alcanzar su propósito.
User Task Matrix. Jenny Alvarez

Natali Benavides (Viajera)
(Compradora)
Frecuencia Importancia Frecuencia Importancia
Comparar precios de
productos similares que son
Always High Often Low
vendidos en Perú y en Estados
Unidos
Viajar a otro país Rarely Low Always High
Realizar una orden en línea Always Medium Often Low
Hacer el seguimiento del

pedido que realiza a través de Always High Rarely High
la aplicación
Buscar maneras adicionales

de generar dinero para
Rarely Low Always High
solventar sus gastos cuando
viaje
Realizar una queja o reclamo

cuando la orden le llega con Often High Rarely High
algún defecto
Calcular el peso de su maleta

y decidir empacar solo lo Rarely Low Always High
necesario
Enviar fotos del trayecto Often High Always High
Verificar que el producto se

Always High Always High
encuentre en buen estado
Tareas con mayor frecuencia e importancia:
 Frecuencia: Las tareas con mayor frecuencia son las que se relacionan con el
proceso de envío y entrega del producto. Este proceso empieza cuando el viajero
compra el producto, hasta que lo entrega al comprador. Estas tareas son:
1. Enviar fotos del trayecto.
2. Verificar que el producto se encuentre en buen estado
3. Hacer el seguimiento del pedido que realiza a través de la aplicación
La primera tarea tiene una alta frecuencia, ya que, cuando el producto ya ha sido
adquirido por el viajero, él va a empezar a enviar fotos del producto durante el
camino. Asimismo, el comprador solicitará constantemente fotos cuando desee
actualizaciones para confirmar que el producto se encuentre en buen estado. Es
así como, esta parte se relaciona con el punto 2. Finalmente, el comprador estará a
la expectativa de cada actualización en la aplicación web para saber si es que ha
ocurrido algún problema o si el tiempo estimado de entrega ha cambiado, por
ejemplo.
 Importancia: Las tareas con mayor importancia son:
1. Buscar maneras adicionales de generar dinero para solventar sus

gastos cuando viaje
2. Viajar a otro país
3. Verificar que el producto se encuentre en buen estado
La primera y segunda tarea tienen una alta importancia para los viajeros, ya que,
incluso mientras están de viaje, necesitan dinero que los puedan ayudar a
solventar algunos gastos adicionales o para que puedan visitar muchos más
lugares. Entonces, generar ingresos extra es relevante para ellos. La tercera tarea
es muy importante para ambos segmentos, porque el viajero tiene que asegurarse
que, en cualquier punto en el camino, el producto se encuentre en buen estado.
Asimismo, el comprador necesita confirmar, por medio de fotos, que el producto
llegué sin defectos.
Diferencias y Similitudes:
Algunas de las diferencias entre Jenny Álvarez y Natalia Benavides (nuestros User
Personas) es que, la primera, se encarga de buscar y elegir el lugar dónde comprar
producto. Ella filtra las tiendas en base a sus necesidades (el que ofrezca el producto a
menor precio, por ejemplo) y le avisa al viajero para que lo compre en ese lugar. Otra
diferencia es que Natalia es la única que busca oportunidades de trabajo simples que
pueda realizar durante su viaje.
En cuanto a las similitudes de nuestros User Personas, es que ambas están pendientes
del estado del producto durante todo el proceso de entrega, que empieza con la compra
del artículo hasta la entrega. Esto se evidencia, en la solicitud y envío de fotos como
evidencia. Además, ambas personas se mantienen en comunicación por si existe
cualquier inquietud en algún punto del trayecto. Siempre pueden preguntarse entre ellas
y aclarar dudas.
2.3.3. User Journey Mapping.
El User Journey Mapping es una herramienta de Design Thinking que nos ayuda a
graficar un mapa con las etapas, canales, elementos e interacciones por las que pasa
nuestro usuario durante el ciclo de uso del servicio.
Segmento 1: Compradores.
Objetivo: Recibir productos de Estados Unidos a un precio más barato que al de Perú
Link: https://drive.google.com/file/d/16N69e7VBtB2lITb4pGci0AkiMxUEOXDT/
view?usp=sharing
Segmento 2: Viajeros.
Objetivo: Obtener un ingreso económico adicional durante su viaje
Link: https://drive.google.com/file/d/146sLhLB2ncikwyZvUpYQ5zB8rEpMzroY/view?
usp=sharing
2.3.4. Empathy Mapping.
En esta sección se presenta el Empathy Mapping de nuestros 2 segmentos objetivos.
Esta herramienta se utilizó porque permite identificar nuestro público objetivo, conocer
su entorno y sus necesidades, lo cual nos permite ver el mundo a través de su
perspectiva.
Link:https://drive.google.com/file/d/17X4ulLneDna8aMugVEKkyufNA2WViG88/
view?usp=sharing
Link: https://drive.google.com/file/d/1s2bl_qTsZp1ZLmqgC4SLlD3-u46yAkZr/view?
usp=sharing
2.3.5. As-is Scenario Mapping.
En esta sección, se identificó las fases que podría presentar a nuestros User persona, del
cómo se afrontó, sus pensamientos, sus sentimientos para identificar qué soluciones son
las más adecuadas para satisfacer sus inquietudes.
Segmento 1: Comprador.
Pasos que la compradora toma para adquirir un producto de Estados Unidos
Link:https://drive.google.com/file/d/1Diewwc5HVcqDDAHwMvs1vv6W5qOLaYGF/
view?usp=sharing
Segmento 2: Viajero.
Pasos que la viajera realiza para traer productos de Estados Unidos que sus amigos o
familiares le piden
Link:https://drive.google.com/file/d/1U3LyEByiRz7E16xRpOuFjcGKiesDlGVf/view?
usp=sharing
CHAPTE
REQUIREMENTS SPECIFICATION R
En esta sección se presentará el análisis de la información recopilada por
medio de la entrevistas e investigación, la cual nos permitirá definir los
requisitos de nuestro producto de software.
3
2
3.
3.1. To-Be Scenario Mapping.
El To-Be Scenario Mapping es un artefacto que nos ayuda a visualizar las soluciones
propuestas en base a los problemas identificados durante el As-Is Scenario Mapping.
Buscamos las fases del proceso de envío de productos desde el exterior que pueden ser
mejorados tanto como por el lado del cliente como del viajero y buscar la mejor
solución a los problemas que pueden ser atendidos por la plataforma, para así poder
brindar un buen servicio y reducir las malas experiencias posibles a ambos segmentos
de usuarios.
Se presenta la versión del usuario, comprador, en la cual se estableció ya sus
necesidades satisfechas a través de nuestro sitio web.
Se presenta la versión del usuario, viajeros, en la cual se ve el avance en la satisfacción
de sus necesidades, gracias al afiliarse con nuestro servicio web.
3.2. User Stories.
En esta sección se presentarán las User Stories y Epics de nuestro proyecto. Los
User Stories y Epics están descritos siguiendo el patrón "As a - I want - So that".
Por otro lado, los User Stories poseen criterios de aceptación, los cuales están
organizados por escenarios y descritos siguiendo el patrón "GIven - When -
Then".
Segmento: Clientes que desean comprar y recibir productos desde el extranjero
Epic/ Título Descripción Criterios de Aceptación Relaci

User onado
Story con
ID (Epic
ID)
EP001 Persona no Como persona

registrada no registrada
se registra quiero
con correo y registrarme con
contraseña correo y
contraseña
para acceder a
la plataforma
virtual
US001 Persona no Como persona Escenario 1: Correo y contraseña EP001

registrada no registrada válidos
se registra quiero
con un registrarme con Dado que la persona quiere
correo y mi correo y registrarse
contraseña contraseña E ingresó un correo y contraseña
para poder válidos
acceder a la Cuando se registra
plataforma Entonces el sistema registra un
virtual. nuevo usuario.
Escenario 2: Correo o contraseña

inválidos
Dado que la persona quiere

registrarse
E ingresa un correo o contraseña
inválidos
Cuando se registra
Entonces la vista le muestra un
aviso informando que los datos
ingresados son incorrectos.
Escenario 3: Campos faltantes

registrarse
Cuando olvida colocar su correo o
contraseña
Entonces la vista resalta los datos
faltantes
TS001 Developer Como Escenario 1: Persona se registra en EP001

quiere developer el sitio web con correo no registrado
guardar la quiero usar la
información API del Dado que la persona ha completado
del nuevo servicio para toda la información necesaria para
usuario en guardar la crear la cuenta
la base de información de Cuando se registra
datos la nueva cuenta Entonces el sitio web usa un
registrada método Post de la API para guardar
la información de la nueva cuenta
en la base de datos.
Escenario 2: Persona se registra en

el sitio web con correo registrado
Dado que la persona completa toda

la información necesaria para crear
la cuenta
Cuando la persona se registra
Entonces la API retorna un código

de error indicando que el correo ya
sido registrado anteriormente.
se registra quiero
con cuenta registrarme con
de Google cuenta de
Google para
acceder a la
plataforma
virtual
US002 Persona no Como persona Escenario 1: Cuenta de Google EP002

registrada no registrada correcta
se registra quiero
con cuenta registrarme con Dado que la persona quiere
de Google mi cuenta de registrarse
Google para Cuando se registra con cuenta de
poder acceder a Google
la plataforma Y accede con una cuenta correcta
virtual. Entonces el sistema registra un
nuevo usuario.
Escenario 2: Cuenta de Google

incorrecta

registrarse
Cuando se registra con cuenta
Google
Y acceda con una cuenta incorrecta
aviso informando que lo intente con
una cuenta válida.
TS002 Developer Como Escenario 1: Persona quiere EP002

quiere que developer registrarse con su cuenta de Google
las personas quiero usar la
puedan API del Dado que la persona posee una
registrarse servicio para cuenta de Google
con su guardar la Y la usa para registrarse en el
cuenta de información de servicio
Cuando se registra
Google inicio de sesión Entonces el sitio web usa un
con Google método POST de la API para
guardar la información de la cuenta
de Google en la base de datos.

el sitio web cuenta de Google ya
registrada
Dado que la persona completó toda

la cuenta
Cuando se registra
de error indicando que la cuanta de
Google ya sido registrada
anteriormente.

se registra quiero
con cuenta registrarme con
de cuenta de
Facebook Facebook para
acceder a la
plataforma
virtual
US003 Persona no Como persona Escenario 1: Cuenta de Facebook EP003

se registra quiero
con cuenta registrarme con Dado que la persona quiere
de mi cuenta de registrarse
Facebook Facebook para Cuando se registra con su cuenta de
poder acceder a Facebook
la plataforma Y accede con una cuenta correcta
virtual. Entonces el sistema registra un
nuevo usuario.
Escenario 2: Cuenta de Facebook

incorrecta

registrarse
Cuando se registra con su cuenta de
Facebook
Y accede con una cuenta incorrecta
una cuenta válida.
TS003 Developer Como Escenario 1: Persona quiere EP003

quiere que developer registrarse con su cuenta de
las personas quiero usar la Facebook
puedan API del
registrarse servicio para Dado que la persona posee una
con su guardar la cuenta de Facebook
cuenta de información de Y la usa para registrarse en el
Facebook inicio de sesión servicio
con Facebook Cuando la persona se registre
Entonces el sitio web usa un
método POST de la API para
guardar la información de la cuenta
de Facebook en la base de datos.

el sitio web cuenta de Facebook ya
registrada
Dado que la persona completó toda

la cuenta
Cuando se registre
de error indicando que la cuanta de
Facebook ya sido registrada
anteriormente.

ingresa quiero registrar
datos de su mi información
información personal para
personal acceder a la
Plataforma
US004 Persona no Como persona Escenario 1: Información personal EP004

completa quiero
campos de completar los Dado que la persona completa sus
información campos de datos personales
personal nombres, E ingresa todos sus datos
apellidos, correctamente
número de Cuando presione se registra
celular y Entonces el sistema guarda la
dirección información personal del nuevo
domiciliaria usuario.
para poder Escenario 2: Información personal
acceder a la inválida
plataforma
virtual. Dado que la persona completa sus
datos personales
Cuando ingresa algún dato personal
incorrecto
Entonces la vista resalta los campos
que han sido ingresados
incorrectamente.
Dado que la persona va a completar

sus datos personales
Cuando olvida colocar algún dato
personal
Entonces la vista resalta los datos
faltantes.
TS004 Developer Como Escenario: Persona registra su EP004

quiere developer información personal
guardar la quiero usar la
información API del
personal de servicio para Dado que la persona ha completado
la persona guardar la los campos de información personal
en la base información Cuando presiona el botón
de datos personal de la “Completar registro”
nueva persona Entonces el sitio web usa un
registrada método POST de la API para
guardar la información personal de
la persona en la base datos.
EP005 Persona Como persona

registrada registrada
inicia sesión quiero iniciar
con correo y sesión con mi
contraseña correo y
contraseña
para acceder a
la plataforma
virtual.
US005 Persona Como persona Escenario 1: Cuenta válida EP005

inicia sesión quiero iniciar Dado que la persona quiere iniciar
con correo y sesión con mi sesión
contraseña correo y E ingresa una cuenta válida
contraseña Cuando inicie sesión
registrado para Entonces el sistema le permite
acceder a la acceder.
plataforma Escenario 2: Cuenta inválida
virtual.
Dado que la persona quiere iniciar
sesión
E ingresa una cuenta inválida
Cuando inicie sesión
Entonces la vista muestra un aviso
informando que la cuenta es
incorrecta.

sesión
Cuando se olvide de ingresar un
campo
Entonces la vista resalta los campos
faltantes.
TS005 Developer Como Escenario 1: Persona ingresa un EP005

quiere developer correo y contraseña validos
obtener los quiero obtener
datos de la los datos de la Dado que la persona ingresa un
cuenta de la cuenta de la correo y contraseña validos
persona persona que Cuando inicie sesión
quiere iniciar Entonces el sitio web usa un
sesión a través método GET del API que retorna
de la API del satisfactoriamente la información de
servicio para la cuenta
que la persona Y permite iniciar sesión a la persona
pueda iniciar Escenario 2: Persona ingresa un
sesión correo y/o contraseña inválidos
Dado que la persona ha ingresado

un correo y contraseña inválidos
método GET del API que retorna un
código de error indicando que el
correo y/o contraseña son inválidos.

con cuenta sesión con mi
de Google correo cuenta
de Google
para acceder a
la plataforma
virtual.
US006 Persona Como persona Escenario 1: Cuenta de Google EP006

registrada registrada correcta
con cuenta sesión con mi Dado que la persona quiere iniciar
de Google cuenta de sesión con su cuenta de Google
Google para Cuando inicia sesión
acceder a la Y accede con una cuenta correcta
plataforma Entonces el sistema permite el
virtual. acceso

incorrecta

sesión con su cuenta de Google
Cuando inicia sesión
una cuenta válida.
TS006 Developer Como Escenario 1: Persona ingresa una EP006

quiere developer cuenta de Google válida
validar la quiero obtener
cuenta los datos de la Dado que la persona ingresa con su
Google de cuenta de cuenta de Google
la persona Google por Cuando inicie sesión
medio de la Entonces el sitio web usa un
API de Google método GET del API de Google que
para que retorna satisfactoriamente la
pueda ingresar información de la cuenta
al servicio Y permite iniciar sesión a la persona
Escenario 2: Persona ingresa una

cuenta de Google inválida
Dado que la persona ingresa con

una cuenta de Google inválido
método GET del API de Google que
retorna un código de error indicando
que la cuenta de Google es inválida

con cuenta sesión con mi
de correo cuenta
Facebook de Facebook
para acceder a
la plataforma
virtual.
US007 Persona Como persona Escenario 1: Cuenta de Facebook EP007

registrada registrada correcta
con cuenta sesión con mi Dado que la persona quiere iniciar
de cuenta de sesión con su cuenta de Facebook
Facebook Facebook para Cuando inicia sesión
acceder a la Y accede con una cuenta correcta
plataforma Entonces el sistema permite el
virtual. acceso
Escenario 2: Cuenta de Facebook

incorrecta

sesión con su cuenta de Facebook
una cuenta válida.
TS007 Developer Como Escenario 1: Persona ingresa una EP007

quiere developer cuenta de Facebook válida
validar la quiero obtener
cuenta los datos de la Dado que la persona ingresa con su
Facebook cuenta de cuenta de Facebook
de la Google por Cuando inicie sesión
persona medio de la Entonces el sitio web usa un
API de método GET del API de Facebook
Facebook para que retorna satisfactoriamente la
que pueda información de la cuenta
ingresar al Y permite iniciar sesión a la persona
servicio
Escenario 2: Persona ingresa una
cuenta de Facebook inválida
Dado que la persona ingresa con

una cuenta de Facebook inválido
método GET del API de Facebook
que retorna un código de error
indicando que la cuenta de Google
es inválida

cambia su quiero cambiar
contraseña mi contraseña
olvidada olvidada para
mayor
seguridad
US008 Persona Como persona Escenario: Usuario olvidó su EP008

registrada registrada contraseña
contraseña mi contraseña Dado que la persona quiere iniciar
olvidada porque me la sesión
olvide para Y ha olvidado su contraseña
acceder de Cuando presione el enlace "Me
nuevo a la olvide mi contraseña"
plataforma Entonces se le envía un correo con
virtual. un código y un enlace
Cuando navega al link enviado
E ingresa el código
Entonces el sistema valida el
código y podrá cambiar la
contraseña.
TS008 Developer Como Escenario: Usuario olvidó su EP008

quiere developer contraseña
desarrollar quiero usar la
un método API del Dado que la persona ha olvidado su
para servicio para contraseña
cambiar la actualizar o Cuando presiona el enlace "Me
contraseña restablecer la olvide mi contraseña"
contraseña de Entonces el sitio web usa un
un usuario método de autenticación de la API
Y envía un correo al usuario con un
código de validación
Cuando se valida el código
Entonces se actualiza la contraseña
usando un método de la API

correo y/o mi correo y/o
contraseña contraseña
para
mantenerla
actualizada.
US009 Persona Como persona Escenario 1: Usuario cambia su EP009

registrada registrada correo o contraseña
correo y/o correo y/o Dado que la persona quiere cambiar
contraseña contraseña su correo y/o contraseña
para tener mi Entonces la vista le muestra un
información formulario con su correo y
actualizada. contraseña
Cuando la persona ingresa un
nuevo correo o contraseña
Y guarda los cambios
aviso informando si está seguro de
guardar los cambios
Cuando la persona acepta
Entonces el sistema actualiza los
cambios,
Escenario 2: Usuario ingresa datos
incorrectos
Dado que la persona quiere cambiar

su correo y/o contraseña
formulario con su correo y
contraseña
Cuando la persona ingresa un
incorrecta
Entonces la vista mostrará un aviso
informando que los datos
TS009 Developer Como Escenario: Persona cambia su EP009

quiere crear developer correo y contraseña
un método quiero usar la
para que API del Dado que la persona quiere cambiar
una persona servicio para su correo y/o contraseña
pueda actualizar el Cuando ingresa un nuevo correo
cambiar su correo y y/o contraseña
correo y contraseña del Entonces el sitio web usa un
contraseña usuario método PUT de la API que permite
cambiar el correo y/o contraseña del
usuario

información mi información
personal personal para
mantenerla
actualizada.
US010 Persona Como persona Escenario 1: Usuario cambia su EP010

registrada registrada información personal
información mi información Dado que la persona quiere cambiar
su información personal
personal personal para Entonces la vista le muestra un
mantenerla formulario con su información
actualizada. personal
Cuando la persona ingresa nuevos
datos personales
aviso informando si está seguro de
guardar los cambios
Cuando la persona acepte
Entonces la vista actualiza los
cambios y el sistema los guarda.
Escenario 2: Usuario ingresa datos

incorrectos
Dado que la persona quiere cambiar

su información personal
formulario con su información
personal
Cuando la persona ingresa
información personal incorrecta
Entonces la vista muestra un aviso
informando que los datos
TS010 Developer Como Escenario: Persona cambia su EP010
quiere crear developer información personal
un método quiero un
para que método que Dado que la persona quiere cambiar
una persona permita a las su cambiar su información personal
pueda personas Cuando ingrese los nuevos datos
cambiar su actualizar su actualizados de su información
información información personal
personal. personal para Entonces el sitio web usa un
que tengan su método PUT de la API que permita
cuenta actualizar su información
actualizada.

quiere registrada
cerrar quiero cerrar
sesión sesión para
salir de la
plataforma
virtual
US011 Persona Como persona Escenario: Usuario quiere cerrar EP011

registrada registrada sesión
quiere quiero cerrar
cerrar sesión para Dado que la persona se encuentra
sesión. salir de la en cualquier sección de la
plataforma plataforma virtual
virtual. Cuando cierre sección
Entonces la vista se actualizará y
mostrará el home del sitio web.
TS011 Developer Como Escenario: Persona quiere cerrar EP011

quiere crear developer sesión
para que método que Dado que la persona se encuentra
una persona permita a las en cualquier sección de la
pueda cerrar personas cerrar plataforma virtual
sesión sesión para Cuando cierre sección
que puedan Entonces el sitio web cierra la
finalizar su
sesión sesión activa del usuario

quiere registrada
visualizar quiero
productos visualizar
en la productos en la
plataforma plataforma
para hacer un
pedido
US012 Persona Como persona Escenario: Persona quiere EP012

quiere registrada visualizar productos
visualizar quiero
productos visualizar Dado que la persona se encuentra
en la productos en la en cualquier sección de la
plataforma plataforma plataforma virtual
para hacer un Cuando selecciones la opción
pedido “Buscar productos” del menú
desplegable
Entonces el sitio web mostrará la
lista de productos disponibles
TS012 Developer Como Escenario: Persona quiere EP012

quiere crear developer visualizar productos
pueda personas plataforma virtual
visualizar visualizar Cuando selecciones la opción
productos productos “Productos” del menú desplegable
disponibles Entonces el sitio web mostrará la
para que lista de productos disponibles
puedan hacer
un pedido

quiere registrada
buscar quiero buscar
productos productos en la
en la plataforma
plataforma para hacer un
pedido
US013 Persona Como persona Escenario: Persona quiere buscar EP013

quiere registrada productos disponibles
buscar quiero buscar
productos productos en la Dado que la persona se encuentra
en la plataforma en cualquier sección de la
plataforma para hacer un plataforma virtual
pedido Cuando escriba un texto en la barra
de búsqueda ubicada en la parte
superior
Entonces el sitio web mostrará la
lista de productos disponibles que
contienen las palabras ingresadas
por el usuario
TS013 Developer Como Escenario: Persona quiere buscar EP013

quiere crear developer productos disponibles
pueda personas plataforma virtual
buscar buscar Cuando escriba un texto en la barra
productos productos de búsqueda ubicada en la parte
disponibles superior
para que Entonces el sitio web mostrará la
puedan hacer lista de productos disponibles
un pedido mediante el método GET de la API.

quiere registrada
agregar un quiero agregar
producto a un producto en
su maleta la plataforma a
virtual de mi maleta
pedidos virtual de
pedidos para
hacer un
pedido
US014 Persona Como persona Escenario: Persona quiere agregar EP014

quiere registrada un producto a su maleta virtual de
agregar un quiero agregar pedidos
producto a un producto en
su maleta la plataforma a Dado que la persona se encuentra
virtual de mi maleta en la vista de productos
pedidos virtual de Cuando seleccione un producto
pedidos para Entonces el sitio web agregará el
hacer un producto a su maleta virtual de
pedido pedidos
TS014 Developer Como Escenario: Persona quiere agregar EP014

quiere crear developer un producto a su maleta virtual de
un método quiero un pedidos
para que método que
una persona permita a las Dado que la persona se encuentra
pueda personas en la vista de productos
agregar un agregar un Cuando seleccione un producto
producto a producto en la Entonces el sitio web agregará el
su maleta plataforma a producto a su maleta virtual de
virtual de mi maleta pedidos con el método POST de la
pedidos virtual de API.
pedidos para
que puedan
hacer un
pedido

quiere registrada
confirmar quiero
los confirmar los
productos productos de
de su maleta mi maleta
virtual de virtual de
pedidos pedidos para
hacer un
pedido
quiere registrada confirmar los productos de su
confirmar quiero maleta virtual de pedidos
los confirmar los
productos productos de Dado que la persona se encuentra
de su maleta mi maleta en la vista de maleta virtual de
virtual de virtual de pedidos
pedidos pedidos para Cuando seleccione la opción
hacer un “confirmar productos”
pedido Entonces el sitio web confirmará
sus productos

quiere developer confirmar los productos de su
confirmar quiero maleta virtual de pedidos
los confirmar los
productos productos de la Dado que la persona se encuentra
de la maleta maleta virtual en la vista de maleta virtual de
virtual de la de pedidos pedidos
persona para que el Cuando seleccione la opción
usuario pueda “confirmar productos”
hacer su pedido Entonces el sitio web mostrará una
alerta que diga “Productos
confirmados”

quiere ver registrada
los precios quiero ver los
de envío de precios de
los viajeros envío de los
viajeros para
trasladar mi
pedido
US016 Persona Como persona Escenario: Persona quiere ver los EP016
quiere ver registrada precios de envío de los viajeros
los precios quiero ver los
de envío de precios de Dado que la persona se encuentra
los viajeros envío de los en la vista de maleta virtual de
viajeros para pedidos
trasladar mi Y la persona ha confirmado sus
pedido productos
Cuando presione el botón “ver
viajeros y precios de envío
disponibles”
Entonces el sitio web mostrará una
vista con los viajeros y sus
respectivos precios de envío
TS016 Developer Como Escenario: Persona quiere ver los EP016
quiere que developer precios de envío de los viajeros
persona vea quiero que
los precios persona vea los Dado que la persona se encuentra
de envío de precios de en la vista de maleta virtual de
los viajeros envío de los pedidos
viajeros para Y la persona ha confirmado sus
trasladar el productos
pedido de la Cuando presione el botón “ver
persona viajeros y precios de envío
disponibles”
vista con los viajeros y sus
respectivos precios de envío
mediante el método GET de la API

quiere quiero
seleccionar seleccionar un
un viajero viajero para
trasladar mi
pedido

quiere quiero seleccionar un viajero
seleccionar seleccionar un
un viajero viajero para Dado que la persona se encuentra
trasladar mi en la vista de viajeros disponibles
pedido Y la persona ha confirmado sus
productos
Cuando presione el botón
“seleccionar” en la sección del
viajero respectivo
vista de confirmación y pago de la
comisión

quiere que developer seleccionar un viajero
persona quiero que la
pueda persona pueda Dado que la persona se encuentra
seleccionar seleccionar un en la vista de viajeros disponibles
un viajero viajero para Y la persona ha confirmado sus
trasladar su productos
pedido Cuando presione el botón
“seleccionar” en la sección del
viajero respectivo
vista de confirmación y pago de la
comisión

quiere pagar quiero pagar
la comisión precio de
del traslado traslado para
trasladar mi
pedido
US018 Persona Como persona Escenario: Persona quiere pagar EP018

quiere pagar quiero pagar precio de traslado
la comisión precio de
del traslado traslado para Dado que la persona se encuentra
trasladar mi en la vista de confirmación de
pedido pedido
Cuando presione el botón “pagar”
pasarela de pagos Visa para
continuar con el pago
Y el sistema mostrará la dirección
del viajero
TS018 Developer Como Escenario: Persona quiere pagar EP018
quiere que developer
persona quiero que la precio de traslado
pueda pagar persona pueda
la comisión pagar precio de Dado que la persona se encuentra
del traslado traslado para en la vista de confirmación de
trasladar su pedido
pedido Cuando presione el botón “pagar”
pasarela de pagos Visa para
continuar con el pago mediante el
uso de API externa de Visa
Y el sistema mostrará la dirección
del viajero mediante el método GET
de la API de servicios
quiere quiero
confirmar confirmar el
pedido a la pedido a la
dirección dirección del
del viajero viajero para
trasladar mi
pedido

quiere quiero confirmar dirección de envío
confirmar confirmar el
pedido a la pedido a la Dado que la persona ha realizado el
dirección dirección del pago respectivo a una maleta virtual
del viajero viajero para de pedidos
trasladar mi Cuando presione el botón
pedido “confirmar envío a viajero”
opción para subir foto de evidencia
de envío

quiere que developer confirmar dirección de envío
pueda persona pueda Dado que la persona ha realizado el
confirmar confirmar el pago respectivo a una maleta virtual
pedido a la pedido a la de pedidos
dirección dirección del Cuando presione el botón
del viajero viajero para “confirmar envío a viajero”
trasladar su Entonces el sitio web mostrará una
pedido opción para subir foto de evidencia
de envío y lo almacenará mediante
el método PUT de la API de
servicios

quiere ver el quiero ver el
estado de su estado del
pedido pedido para
recoger mi
pedido
US020 Persona Como persona Escenario: Persona quiere ver EP020

quiere ver el quiero ver el estado de su pedido
estado de su estado del
pedido pedido para Dado que la persona la persona se
recoger mi encuentra en cualquier parte de la
pedido plataforma
Cuando presione el botón “mis
pedidos” del menú desplegable
Entonces el sitio web mostrará los
pedidos realizados por la persona y
sus estados actuales
TS020 Developer Como Escenario: Persona quiere ver EP020

quiere que developer estado de su pedido
pueda ver el persona pueda Dado que la persona la persona se
estado de su ver el estado encuentra en cualquier parte de la
pedido del pedido plataforma
para recoger Cuando presione el botón “mis
su pedido pedidos” del menú desplegable
Entonces el sitio web mostrará los
pedidos realizados por la persona y
sus estados actuales mediante el
método GET de la API
quiere quiero recibir
recibir notificaciones
notificacion del estado del
es del pedido para
estado de su recoger mi
pedido pedido
US021 Persona Como persona Escenario: Persona ha confirmado EP021

quiere quiero recibir el envío a la dirección del viajero y
recibir notificaciones quiere recibir notificaciones del
notificacion del estado del estado una vez el pedido llegue a la
es del pedido para dirección del viajero
estado de su recoger mi
pedido pedido Dado que la persona la persona se
encuentra en cualquier parte de la
plataforma
“notificaciones” del menú
desplegable
Entonces el sitio web mostrará las
notificaciones actualizadas con los
puntos de referencia claves
actualizados por el viajero
TS021 Developer Como Escenario: Persona ha confirmado EP021

quiere que developer el envío a la dirección del viajero y
persona quiero que la quiere recibir notificaciones del
pueda persona pueda estado una vez el pedido llegue a la
recibir recibir dirección del viajero
notificacion notificaciones
es del del estado del Dado que la persona la persona se
estado de su pedido para encuentra en cualquier parte de la
pedido recoger su plataforma
pedido Cuando presione el botón
“notificaciones” del menú
desplegable
Entonces el sitio web mostrará las
notificaciones actualizadas con los
puntos de referencia claves
actualizados por el viajero mediante
el método GET de la API
Segmento: Viajeros
Epic/ Título Descripción Criterios de Aceptación Relacion

User ado con
Story ID (Epic
ID)
EP022 Viajero Como Viajero

registrado registrado
inicia quiero iniciar
sesión con sesión con mi
correo y correo y
contraseña contraseña
para acceder
a la
plataforma
virtual.
US022 Viajero Como Viajero Escenario 1: Cuenta válida EP022

inicia quiero iniciar Dado que la Viajero se
sesión con sesión con mi encuentra en la sección de
correo y correo y "Iniciar sesión"
contraseña contraseña E ingresa una cuenta válida
registrado Cuando inicia sesión
para acceder Entonces el sistema le permitirá
a la acceder.
plataforma Escenario 2: Cuenta inválida
virtual.
Dado que la Viajero se
encuentra en la sección de
"Iniciar sesión"
E ingresa una cuenta inválida
Entonces la vista le mostrará un
aviso informando que la cuenta
es incorrecta.

"Iniciar sesión"
Cuando se olvide de ingresar un
campo
Entonces la vista resaltará los
campos faltantes
Y si inicia sesión
ingresados son incorrectos
TS022 Developer Como Escenario 1: Viajero ingresa un EP022

quiere developer correo y contraseña validos
obtener los quiero
datos de la obtener los Dado que el viajero ha ingresado
cuenta del datos de la un correo y contraseña validos
viajero cuenta del Cuando inicia sesión
viajero que Entonces el sitio web usará un
quiere iniciar método GET del API que
sesión a retornará satisfactoriamente la
través de la información de la cuenta
API del Y permitirá iniciar sesión al
servicio para viajero
que el viajero Escenario 2: Viajero ingresa un
iniciar sesión correo y/o contraseña inválidos
Dado que el viajero ha ingresado

un correo y contraseña inválidos
“Iniciar sesión”
Entonces el sitio web usará un
método GET del API que
retornará un código de error
indicando que el correo y/o
contraseña son inválidos.
EP023 Viajero Como viajero

cuenta de correo cuenta
Google de Google
para acceder
a la
plataforma
virtual.
US023 Viajero Como Viajero Escenario 1: Cuenta de Google EP023

registrado registrado correcta
sesión con sesión con mi Dado que la Viajero se
cuenta de cuenta de encuentra en la sección de
Google Google para "Iniciar sesión"
acceder a la Cuando inicia sesión con cuenta
plataforma de Google
virtual. Y acceda con una cuenta
correcta
Entonces el sistema permitirá el
acceso

incorrecta

"Iniciar sesión"
Cuando inicia sesión con cuenta
de Google
Y acceda con una cuenta
incorrecta
aviso informando que lo intente
con una cuenta válida.
TS023 Developer Como Escenario 1: Viajero ingresa una EP023

quiere developer cuenta de Google válida
validar la quiero
cuenta obtener los Dado que el viajero ingresará
Google del datos de la con su cuenta de Google
viajero cuenta de Cuando inicia sesión de cuenta
Google por de Google
medio de la Entonces el sitio web usará un
API de método GET del API de Google
Google para que retornará satisfactoriamente
que pueda la información de la cuenta
ingresar al Y permitirá iniciar sesión al
servicio viajero
Escenario 2: Persona ingresa

una cuenta de Google inválida
Dado que el viajero ingresará

con una cuenta de Google
inválido
de Google
método GET del API de Google
que retornará un código de error
indicando que la cuenta de
Google es inválida

cuenta de correo cuenta
Facebook de Facebook
para acceder
a la
plataforma
virtual.
US024 Viajero Como Viajero Escenario 1: Cuenta de EP024

inicia quiero iniciar Facebook correcta
cuenta de cuenta de Dado que la Viajero se
Facebook Facebook encuentra en la sección de
para acceder "Iniciar sesión"
a la Cuando inicia sesión con cuenta
plataforma de Facebook
virtual. Y acceda con una cuenta
correcta
Entonces el sistema permitirá el
acceso
Escenario 2: Cuenta de
Facebook incorrecta

"Iniciar sesión"
de Facebook
Y acceda con una cuenta
incorrecta
aviso informando que lo intente
con una cuenta válida.
TS024 Developer Como Escenario 1: Viajero ingresa una EP024

quiere developer cuenta de Facebook válida
validar la quiero
cuenta obtener los Dado que el viajero ingresará
Facebook datos de la con su cuenta de Facebook
del viajero cuenta de Cuando inicia sesión con cuenta
Google por de Facebook
medio de la Entonces el sitio web usará un
API de método GET del API de
Facebook Facebook que retornará
para que satisfactoriamente la información
pueda de la cuenta
ingresar al Y permitirá iniciar sesión a la
servicio persona
Escenario 2: Viajero ingresa una
cuenta de Facebook inválida
Dado el viajero ingresará con

una cuenta de Facebook inválido
de Facebook
método GET del API de
Facebook que retornará un
código de error indicando que la
cuenta de Facebook es inválida

cambia su quiero
contraseña cambiar mi
olvidada contraseña
olvidada para
mayor
seguridad
US025 Viajero Como Viajero Escenario: Usuario olvidó su EP025

registrado registrado contraseña
cambia su quiero
contraseña cambiar mi Dado que la Viajero se
olvidada contraseña encuentra en la sección "Iniciar
porque me la sesión"
olvide para Y ha olvidado su contraseña
acceder de Cuando solicite una nueva
nuevo a la contraseña
plataforma Entonces se le enviará un correo
virtual. con un código y un link
Cuando navegue al link enviado
E ingrese el código
Entonces el sistema validará el
código y podrá cambiar la
contraseña.
TS025 Developer Como Escenario: Usuario olvidó su EP025

quiere developer contraseña
desarrollar quiero usar la
un método API del Dado que el viajero se ha
para servicio para olvidado su contraseña
cambiar la actualizar o Cuando solicite una nueva
contraseña restablecer la contraseña
contraseña de Entonces el sitio web usará un
un usuario método de autenticación de la
API
Y enviará un correo al usuario
con un código de validación
Cuando se valide el código
Entonces la se actualizará la
contraseña usando un método de
la API
EP026 Viajero Como Viajero

cambia la quiero
informació cambiar la
n de su información
cuenta para
mantenerla
actualizada.
US026 Viajero Como Viajero Escenario 1: Usuario cambia su EP026

registrado registrado correo o contraseña
cambia su quiero
correo y cambiar Dado que la Viajero se
contraseña correo o encuentra en la sección "Mi
contraseña cuenta"
para tener mi Y selecciona la categoría
información "Acceso"
actualizada. Entonces la vista le muestra su
correo y contraseña
Cuando la Viajero ingresa un
Entonces se le mostrará un aviso
informando si está seguro de
guardar los cambios
Cuando acepte guardar los
cambios
Entonces la vista actualizará los
cambios y el sistema los
guardará.
Escenario 2: Usuario ingresa

datos incorrectos

encuentra en la sección "Mi
cuenta"
Y selecciona la categoría
"Acceso"
Entonces la vista le muestra su
correo y contraseña
Cuando la Viajero ingresa un
incorrecta
Y acepta guardar los cambios
Entonces la vista mostrará un
TS026 Developer Como Escenario: Viajero cambia su EP026

quiere developer correo y contraseña
crear un quiero usar la
método API del Dado que el viajero se encuentra
para que servicio para en la sección “Mi cuenta”
un viajero actualizar el Cuando ingrese un nuevo correo
pueda correo y y/o contraseña
cambiar su contraseña del Entonces el sitio web usará un
correo y usuario método PUT de la API que
contraseña permita cambiar el correo y/o
contraseña del usuario

cambia su quiero
informació cambiar mi
n personal información
personal para
mantenerla
actualizada.
US027 Viajero Como Viajero Escenario 1: Usuario cambia su EP027

registrado registrado información Personal
cambia su quiero
informació cambiar mi Dado que la Viajero se
n Personal información encuentra en la sección "Mi
Personal para cuenta"
mantenerla Y selecciona la categoría
actualizada. "Información Personal"
información Personal
Cuando la Viajero ingresa
nuevos datos Personales
Y guarda su información
aviso informando si está seguro
de guardar los cambios
Cuando el Viajero acepte
guardar los cambios
guardará.

datos incorrectos

cuenta"
"Información Personal"
información Personal incorrecta
Y guarda la información

quiere developer correo y contraseña
cambiar un quiero un
método método que Dado que el viajero se encuentra
para que permita a los en la sección “Mi cuenta”
un viajero viajeros Cuando ingrese los nuevos datos
pueda actualizar su actualizados de su información
cambiar su información personal
informació personal para Entonces el sitio web usará un
n personal. que tengan su método PUT de la API que
cuenta permita actualizar su
actualizada. información

quiere registrado
cerrar quiero cerrar
sesión sesión para
salir de la
plataforma
virtual
US028 Viajero Como Viajero Escenario: Usuario quiere cerrar EP028

registrado registrado sesión
quiere quiero cerrar
cerrar sesión para Dado que la Viajero se
sesión salir de la encuentra en cualquier sección
plataforma de la plataforma virtual
virtual. Cuando realice el cierre de
sesión desde la barra de
navegación
Entonces la vista se actualizará
y mostrará la sección de "Iniciar
sesión".
TS028 Developer Como Escenario: Viajero quiere cerrar EP028

quiere developer sesión
crear un quiero un
método método que Dado que el viajero se encuentra
para que permita a los en cualquier sección de la
un viajero viajeros cerrar plataforma virtual
pueda sesión para Cuando cierre sección
cerrar que puedan Entonces el sitio web cierra la
sesión finalizar su sesión activa del viajero
sesión

actualiza quiero
su cambiar mi
informació información
n de de pedidos
pedidos para
mantenerla
actualizada.
US029 Viajero Como viajero Escenario 1: Usuario cambia su EP029

registrado registrado información pedidos
actualiza quiero
su cambiar mi Dado que la Viajero se
informació información encuentra en la sección "Mi
n de de pedidos viaje"
pedidos para Y selecciona la categoría
mantenerla "Información de pedidos"
actualizada. Entonces la vista le muestra su
información de pedidos
nuevos datos de pedidos
Y guarda su información
de guardar los cambios
guardar los cambios
guardará.

datos incorrectos

viaje"
"Información de pedidos"
información Personal incorrecta
Y guarda la información

quiere developer comisión o disponibilidad de
cambiar un quiero un espacio o dirección
método método que
para que permita a los Dado que el viajero se encuentra
un viajero viajeros en la sección “Mi cuenta”
pueda actualizar su Cuando ingrese los nuevos datos
cambiar su información actualizados respectivos
informació de pedidos Entonces el sitio web usará un
n de para que método PUT de la API que
pedidos tengan su permita actualizar su
cuenta información
actualizada.

confirma quiero
pedido confirmar un
pedido para
trasladarlo
US030 Viajero Como viajero Escenario: Usuario acepta EP030
registrado registrado pedidos de maleta virtual
confirma quiero
pedido confirmar un Dado que el Viajero se
pedido para encuentra en la sección "Mis
trasladarlo pedidos"
"Pedidos por confirmar"
información de pedidos por
confirmar
Cuando la Viajero selecciona el
botón “confirmar”
de confirmar los pedidos para
trasladar
cambios y mostrará un mensaje
que diga “Pedidos confirmados”
TS030 Developer Como Escenario: Usuario acepta EP030

quiere que developer pedidos de maleta virtual
viajero quiero que
confirme viajero pueda Dado que el Viajero se
su pedido confirmar un encuentra en la sección "Mis
pedido para pedidos"
trasladarlo Y selecciona la categoría
"Pedidos por confirmar"
información de pedidos por
confirmar
Cuando la Viajero selecciona el
botón “confirmar”
de confirmar los pedidos para
trasladar
cambios mediante el método
PUT y mostrará un mensaje que
diga “Pedidos confirmados”

actualiza quiero
estado del actualizar
pedido estado del
pedido para
trasladarlo
US031 Viajero Como viajero Escenario: Usuario actualiza EP031

actualiza quiero estado del pedido
estado del actualizar
pedido estado del Dado que el Viajero se
pedido para encuentra en la sección "Mis
trasladarlo pedidos"
"Actualizar estado"
Entonces el sistema le muestra
una vista con la información de
la ubicación actual del pedido
para actualizarla
Cuando actualiza la información
Y selecciona el botón
“confirmar”
de confirmar los cambios
cambios
TS031 Developer Como Escenario: Usuario actualiza EP031

quiere que developer estado del pedido
viajero quiero que
actualice viajero pueda Dado que el Viajero se
estado del actualizar encuentra en la sección "Mis
pedido estado del pedidos"
pedido para Y selecciona la categoría
trasladarlo "Actualizar estado"
Entonces el sistema le muestra
una vista con la información de
la ubicación actual del pedido
para actualizarla
Cuando actualiza la información
Y selecciona el botón
“confirmar”
de confirmar los cambios
cambios mediante el método
PUT y mostrará un mensaje que
diga “Pedidos confirmados”
Segmento: Visitantes interesados en el servicio
Epic/ Título Descripción Criterios de Aceptación Relacion

User ado con
Story ID (Epic
ID)
EP032 Visitante Como

quiere visitante
informació quiero
n del información
servicio del servicio
para saber de
qué trata
US032 Visitante Como Escenario: Visitante se EP032

quiere visitante encuentra en el Landing page
saber de quiero saber
qué trata el de qué trata el Dado que el visitante se
servicio servicio para encuentra en el Landing page
saber si es lo Cuando seleccione el enlace
que necesito “Propósito” en la barra de
navegación de la parte superior
Entonces la vista le mostrará la
sección sobre el propósito del
servicio.

saber los quiero saber
beneficios los beneficios Dado que el visitante se
del del servicio encuentra en el Landing page
servicio para saber si Cuando seleccione el enlace
me conviene “Beneficios” en la barra de
usarlo navegación de la parte superior
sección sobre los beneficios del
servicio.

saber quiero saber
cuáles son cuáles son las Dado que el visitante se
las redes redes sociales encuentra en el Landing page
del del servicio Cuando seleccione el enlace
servicio para seguirlo “Contacto” en la barra de
navegación de la parte superior
sección del footer, donde se
encuentran los enlaces a las
redes sociales del servicio.

quiere visitante
informació quiero
n del información
servicio del servicio
para saber de
qué trata
saber de la quiero saber
empresa cuál es la Dado que el visitante se
que brinda empresa encuentra en el Landing page
el servicio detrás ser Cuando seleccione el enlace
servicio para “Nosotros” en la barra de
saber si es de navegación de la parte superior
confianza Entonces la vista le mostrará la
sección donde se encuentra la
información sobre la empresa.

contactarse quiero la
con la información Dado que el visitante se
empresa de contacto de encuentra en el Landing page
la empresa Cuando seleccione el enlace
para saber “Contacto” en la barra de
más sobre el navegación de la parte superior
servicio que Entonces la vista le mostrará la
ofrecen sección del footer, donde se
encuentra toda la información de
contacto de la empresa.

quiere visitante
registrarse quiero
registrarme
para usar el
servicio

interesado visitante encuentra en el Landing page
quiere interesado
registrarse quiero Dado que el visitante se
registrarme encuentra en el Landing page
para usar el Y quiere registrarse en el
servicio servicio
“Registrarse” ubicado en la
esquina superior izquierda de la
barra de navegación
Entonces se abrirá el sitio web
del servicio para que pueda
registrarse.
User Stories en Pivotal Tracker:
Link: https://www.pivotaltracker.com/n/projects/2590166
3.3. Impact Mapping.
Impact Mapping es una metodología que ayuda de una forma visual a pensar en las
metas que realmente queremos lograr para tener el alcance de nuestros usuarios. Por ello
usamos esta herramienta con el fin de establecer enfoque y alcanzar las metas de nuestro
objetivo principal. De tal manera, que al final del mapa mental identificamos las
acciones y funcionalidades que debemos llevar a cabo para formar el proyecto de
manera eficiente.
User: Comprador
Se presenta la sección del Impact Map en el usuario, comprador, en la que se basó en las
User Stories de nuestro proyecto, dónde se da opciones que dispone el sitio web para
solucionar el percance del usuario, así como satisfacer las necesidades que presente en
la situación del proceso de importación y compra de su producto en USA.
User: Viajero
En esta versión del viajero, se implementó la meta principal a largo plazo del proyecto
del software, que consiste en aumentar nuestros ingresos y usuarios en un periodo
determinado. En la cual, gracias a la herramienta Impact map, diseñamos los impacts y
deliverables que nos ayudará a establecer las opciones determinantes que llamen la
atención del usuario y accede a usar nuestra plataforma. Por último, se utilizó las User
Stories como base para implementar casos determinados que pueda presentar el médico,
y sus soluciones.
3.4. Product Backlog.
Una vez ya redactadas todas las User Stories, debemos priorizarlas. El Product Backlog
se encarga de generar un orden de importancia entre todas las historias de usuarios,
mientras más Story Points contenga, más relevante será para la plataforma. Por esta
razón, se antepondrá el desarrollo de las US que tengan más puntos.
# User Título Descripción Story Points

Orden Story (1 / 2 / 3 / 5 /
Id 8)
1 US032 Visitante quiere Como visitante 3

saber de qué trata el quiero saber de qué trata el
servicio servicio para saber si es lo
que necesito
2 US033 Visitante quiere Como visitante quiero saber 2

saber los beneficios los beneficios del servicio
del servicio para saber si me conviene
usarlo

saber cuáles son las cuáles son las redes sociales
redes del servicio del servicio para seguirlo

saber de la empresa cuál es la empresa detrás ser
que brinda el servicio para saber si es de
servicio confianza
5 US036 Visitante quiere Como visitante quiero la 2

contactarse con la información de contacto de
empresa la empresa para saber más
sobre el servicio que ofrecen
6 US037 Visitante interesado Como visitante interesado 5

quiere registrarse quiero registrarme para usar
el servicio
7 US012 Persona quiere Como persona registrada 3

visualizar productos quiero visualizar productos
en la plataforma en la plataforma para hacer
un pedido

buscar productos en quiero buscar productos en
la plataforma la plataforma para hacer un
pedido

agregar un producto quiero agregar un producto
a su maleta virtual en la plataforma a mi maleta
de pedidos virtual de pedidos para
hacer un pedido

confirmar los quiero confirmar los
productos de su productos de mi maleta
maleta virtual de virtual de pedidos para
pedidos hacer un pedido
11 US016 Persona quiere ver Como persona registrada 5

los precios de envío quiero ver los precios de
de los viajeros envío de los viajeros para
trasladar mi pedido
12 US017 Persona quiere Como persona quiero 3

seleccionar un seleccionar un viajero para
viajero trasladar mi pedido
13 US018 Persona quiere pagar Como persona quiero pagar 8

la comisión del precio de traslado para
traslado trasladar mi pedido

confirmar pedido a confirmar el pedido a la
la dirección del dirección del viajero para
viajero trasladar mi pedido
15 US020 Persona quiere ver Como persona quiero ver el 3
el estado de su estado del pedido para
pedido recoger mi pedido

recibir recibir notificaciones del
notificaciones del estado del pedido para
estado de su pedido recoger mi pedido
17 US029 Viajero registrado Como viajero registrado 5

actualiza su quiero cambiar mi
información de información de pedidos para
pedidos mantenerla actualizada.
18 US030 Viajero registrado Como viajero registrado 3

confirma pedido quiero confirmar un pedido
para trasladarlo
19 US031 Viajero actualiza Como viajero quiero 2

estado del pedido actualizar estado del pedido
para trasladarlo
20 US001 Persona no Como persona no registrada 1

registrada se registra quiero registrarme con mi
con un correo y correo y contraseña para
contraseña poder acceder a la
plataforma virtual.

con cuenta de cuenta de Google para
Google poder acceder a la
plataforma virtual.

con cuenta de cuenta de Facebook para
Facebook poder acceder a la
plataforma virtual.

registrada completa quiero completar los campos
campos de de nombres, apellidos,
información número de celular y
personal dirección domiciliaria para
poder acceder a la
plataforma virtual.
24 US005 Persona registrada Como persona registrada 1

inicia sesión con quiero iniciar sesión con mi
correo y contraseña correo y contraseña
registrado para acceder a la
plataforma virtual.

cuenta de Google cuenta de Google para
acceder a la plataforma
virtual.

cuenta de Facebook cuenta de Facebook para
virtual.

cambia su quiero cambiar mi
contraseña olvidada contraseña porque me la
olvide para acceder de
nuevo a la plataforma
virtual.

cambia su correo y/o quiero cambiar correo y/o
contraseña contraseña para tener mi
información actualizada.

información información personal para
personal mantenerla actualizada.

quiere cerrar sesión. quiero cerrar sesión para
salir de la plataforma virtual.
31 US022 Viajero registrado Como Viajero registrado 2

correo y contraseña correo y contraseña
registrado para acceder a la
plataforma virtual.

cuenta de Google cuenta de Google para
virtual.

cuenta de Facebook cuenta de Facebook para
virtual.

contraseña olvidada contraseña porque me la
olvide para acceder de
nuevo a la plataforma
virtual.

cambia su correo y quiero cambiar correo o
contraseña contraseña para tener mi
información actualizada.

información información Personal para
Personal mantenerla actualizada.
quiere cerrar sesión quiero cerrar sesión para
salir de la plataforma virtual.
39 TS012 Developer quiere Como developer 3

crear un método quiero un método que
para que una permita a las personas
persona pueda visualizar productos
visualizar productos disponibles para que puedan
hacer un pedido

para que una permita a las personas buscar
persona pueda productos disponibles para
buscar productos que puedan hacer un pedido

persona pueda agregar un producto en la
agregar un producto plataforma a mi maleta
a su maleta virtual virtual de pedidos para que
de pedidos puedan hacer un pedido
42 TS015 Developer quiere Como developer quiero 3

confirmar los confirmar los productos de la
productos de la maleta virtual de pedidos
maleta virtual de la para que el usuario pueda
persona hacer su pedido
43 TS016 Developer quiere Como developer quiero que 5

que persona vea los persona vea los precios de
precios de envío de envío de los viajeros para
los viajeros trasladar el pedido de la
persona

que persona pueda la persona pueda seleccionar
seleccionar un un viajero para trasladar su
viajero pedido

que persona pueda la persona pueda pagar
pagar la comisión precio de traslado para
del traslado trasladar su pedido

que persona pueda la persona pueda confirmar
confirmar pedido a el pedido a la dirección del
la dirección del viajero para trasladar su
viajero pedido

que persona pueda la persona pueda ver el
ver el estado de su estado del pedido para
pedido recoger su pedido

que persona pueda la persona pueda recibir
recibir notificaciones del estado del
notificaciones del pedido para recoger su
estado de su pedido pedido

cambiar un método quiero un método que
para que un viajero permita a los viajeros
pueda cambiar su actualizar su información de
información de pedidos para que tengan su
pedidos cuenta actualizada.

que viajero confirme viajero pueda confirmar un
su pedido pedido para trasladarlo

que viajero actualice viajero pueda actualizar
estado del pedido estado del pedido para
trasladarlo
52 TS001 Developer quiere Como developer quiero usar 1

guardar la la API del servicio para
información del guardar la información de la
nuevo usuario en la nueva cuenta registrada
base de datos

que las personas la API del servicio para
puedan registrarse guardar la información de
con su cuenta de inicio de sesión con Google
Google

que las personas la API del servicio para
puedan registrarse guardar la información de
con su cuenta de inicio de sesión con
Facebook Facebook

guardar la la API del servicio para
información guardar la información
personal de la personal de la nueva persona
persona en la base registrada
de datos

obtener los datos de obtener los datos de la
la cuenta de la cuenta de la persona que
persona quiere iniciar sesión a través
de la API del servicio para
que la persona pueda iniciar
sesión

validar la cuenta obtener los datos de la
Google de la cuenta de Google por medio
persona de la API de Google para
que pueda ingresar al
servicio

Facebook de la cuenta de Google por medio
persona de la API de Facebook para
servicio

desarrollar un la API del servicio para
método para actualizar o restablecer la
cambiar la contraseña de un usuario
contraseña

crear un método quiero usar la API del
para que una servicio para actualizar el
persona pueda correo y contraseña del
cambiar su correo y usuario
contraseña

persona pueda actualizar su información
cambiar su personal para que tengan su
información cuenta actualizada.
personal.

para que una permita a las personas cerrar
persona pueda cerrar sesión para que puedan
sesión finalizar su sesión

obtener los datos de obtener los datos de la
la cuenta del viajero cuenta del viajero que quiere
iniciar sesión a través de la
API del servicio para que el
viajero iniciar sesión
Google del viajero cuenta de Google por medio
de la API de Google para
servicio

Facebook del viajero cuenta de Google por medio
de la API de Facebook para
servicio

desarrollar un la API del servicio para
método para actualizar o restablecer la
cambiar la contraseña de un usuario
contraseña

crear un método quiero usar la API del
para que un viajero servicio para actualizar el
pueda cambiar su correo y contraseña del
correo y contraseña usuario

cambiar un método quiero un método que
para que un viajero permita a los viajeros
pueda cambiar su actualizar su información
información personal para que tengan su
personal. cuenta actualizada.

para que un viajero permita a los viajeros cerrar
pueda cerrar sesión sesión para que puedan
finalizar su sesión
Product Backlog en Pivotal Tracker:

Link: https://www.pivotaltracker.com/n/projects/2590166
CHAPTE
4
PRODUCT DESIGN R
4.
4.1. Style Guidelines.
A continuación, se presentará un repositorio central y organizado que servirá como guía
para el desarrollo enfocado y consistente de nuestra solución.
4.1.1. General Style Guidelines.

Brand Overview
La necesidad de comprar productos de calidad y buen precio se hace cada vez más una
actividad imprescindible en nuestra sociedad. Con las nuevas aplicaciones o startups
que nacen para satisfacer esta necesidad, no son del todo consistentes o adaptables al
consumidor.
Nuestra solución (ImportIt), nace en la misma necesidad de que las personas han
identificado que los precios de los productos en USA tienen una gran diferencia a los
precios de los productos en Perú. Nuestro equipo ha identificado un efectivo producto
para brindar el servicio de importación por medio de nuestra empresa y por medio de
viajeros que brinden un espacio en su maleta para traer los productos requeridos con
seguridad y confianza al hogar de los peruanos que requieran este tipo de servicios de
forma segura y con una gran calidad.
Brand Name
El nombre del software identificado es ImportIt. Originalmente surgió a partir de la

necesidad identificada, pues los usuarios requieren de un proceso de importación, por el
cual se escogió el nombre. Específicamente en el idioma inglés pues nos pareció más
amigable y llamativo con los posibles usuarios. El equipo espera que la gente los
productos de USA y el proceso de importación cuando escuche el nombre de la
solución, para que tenga una idea de que encontrara en nuestra interfaz.
A continuación, se presenta el logo o marca de nuestra solución propuesta.

Typography
La tipografía es necesaria para estructurar y organizar el lenguaje visual de todas las

plataformas que se desarrollaran para cumplir con las características principales de la
aplicación. Se ha tomado en cuenta que las fuentes deben ser legibles y deben aportar a
la experiencia del usuario, por ello se optó por estos tipos de letra.
Francois One Roboto Lato Inter
Google Fonts Google Fonts Google Fonts Google Fonts
Head
Name Font size Line Height
Heading 1
56 px 61.6 px
Heading 2
48 px 52.8 px
Heading 3
40 px 44 px
Heading 4
32px 35.2 px
Heading 5 24px 26.4 px
Heading 6 20px 22 px
Body
Name Font size Line Height
Large Text Bold 20 px 28 px

Large Text Regular 20 px 28 px
Medium Text Bold 18 px 25.2 px
Medium Text Regular 18 px 25.2 px
Normal Text Bold 16 px 22.4 px
Normal Text Regular 16 px 22.4 px
Small Text Bold 14 px 19.6 px
Small Text Regular 14 px 19.6 px
Colors
Spacing
Tono de comunicación y lenguaje aplicado
Color Primario: Representa un color vivido que atrae la atención del usuario.
Asimismo, se decidió por escoger este color por ser un tono oscuro del cielo, lo que
vincula a los viajeros y la sensación que genera el color cuando se ve por la ventana del
avión. El color es amigable y no cansa la vista.
Color Secundario: Este color es un tono más claro, es percibido como símbolo de
serenidad, calma, confianza. Lo cual deseamos generar a los usuarios para que puedan
acceder a cotizar sus productos. Entonces, este color aumenta la perspectiva del usuario
en los beneficios que pueda obtener.
Blanco: Representa limpieza y claridad. Asimismo, se usa mucho en aplicaciones

identificadas en el mismo rubro de cuidado de la salud.
Negro: Color serio y elegante.
Siguientemente, el lenguaje a utilizar será serio, formal, respetuoso mezclado con

entusiasmo y perseverancia. Puesto que se incluirán experiencias y recomendaciones
que avivarán las perspectivas del usuario.
Se tomaron en cuenta algunos elementos de diseño para optimizar la interfaz, pensando

en los usuarios finales.
4.1.2. Web Style Guidelines.

Desarrollaremos una aplicación que se adeque a cualquier dispositivo tecnológico sin la
necesidad de malograr el diseño del contenido. Por ello, se tendrá que tomar en cuenta
cada tipo de dispositivo para que el contenido este estructurado de la mejor manera para
cada uno.
Emplearemos el patrón Z, pues de esta manera identificaran nuestra marca o logo que se
encontrara en la esquina superior izquierda, donde comenzara la interacción del usuario.
Luego, se desplazará hacia la derecha donde visualizará las diferentes opciones que
ofreceremos como Home, Customer, Traveler and Contact. Siguientemente, el usuario
se desplazará verticalmente hacia abajo para seguir interactuando con el contenido de la
aplicación. Finalmente, el usuario llegará a la esquina inferior derecha donde podrá
visualizar todas nuestras redes sociales y nuestros medios de contacto.
Siguientemente, el diseño de nuestra aplicación contara con colores que motiven al

usuario a seguir interactuando con la plataforma. Asimismo, se contará con sombras y
espacios que favorezcan la lectura de la información y limiten el contenido para no
abrumar al navegante.
Se emplearán algunos de los siguientes elementos:

Link para visualizar el figma con el Style Guidelines general:
https://www.figma.com/file/4s9KVSXKNKBUajh9dPKKNf/Style-Guidelines?node-
id=0%3A1
4.2. Information Architecture
En esta sección, definiremos la estructuración de nuestro producto para cada uno de
nuestros segmentos objetivo. Abarcaremos diversos componentes que permitirán al
usuario a organizar y encontrar su contenido: Organization systems, Labeling systems,
SEO Tags and Meta Tags, Searching systems y Navigation systems.
4.2.1. Organization Systems.

A continuación, explicaremos en qué grupos de información se aplicaron los distintos
tipos de organización visual para ambos segmentos objetivo, así como también en
cuales se utiliza algún tipo de categorización.
Segmento 1: Compradores
Jerárquica:
 Lista de viajeros que aceptan la oferta: El comprador podrá elegir al viajero

ideal, para ello se mostrarán en orden y a través de una lista a los viajeros que le
hayan aceptado y cotizado el traslado de su producto. Así como también, en base
a un filtro que el usuario escoja. La categorización más apropiada para este filtro
será por el monto de cotización.
 Resumen de la compra: El comprador podrá visualizar el detalle del producto, el
viajero seleccionado y los costos implicados dentro de su pago de forma ordenada
colocando los datos más relevantes primero.
 Tracking del producto: El comprador podrá visualizar el estado del movimiento
de su compra a través de puntos/etapas de referencia ordenados de forma vertical
que muestran el proceso desde la compra hasta la llegada de su pedido.
 Calculadora Import It: El comprador podrá utilizar una calculadora especial
que le brindará el valor aproximado que tendrá que pagar para obtener su
producto si decide utilizar nuestra plataforma. Para ello se le solicitaran algunos
datos de su compra ordenados por su relevancia.
 Historial de pedidos en curso: El comprador podrá revisar los diferentes
productos que haya solicitado y se encuentren en proceso de traslado o, aquellos
que haya comprado en el pasado. Esta información se mostrará en una lista
organizada cronológicamente.
 Mis Chats: El comprador tendrá una bitácora de las conversaciones que haya
tenido con el viajero a cargo en el chat de Import It. Estos chats estarán
organizados cronológicamente.
 Perfil del viajero: El usuario podrá acceder a una breve descripción del perfil del
viajero para hacer una selección de preferencia más íntegra. Los datos del viajero
estarán organizados de acuerdo con su relevancia.
 Billetera del comprador: El comprador podrá revisar las diferentes
transacciones que haya realizado en el pasado, así como también el estado de
cada una de ellas. Esta información se mostrará en una lista organizada
cronológicamente.
 Envíos nacionales: Si el comprador vive en provincia podrá verificar los
comprobantes de envío de su producto a través de nuestra alianza con Olva
Courier. Esta información se organizará cronológicamente.
Secuencial:
 Contratación de viajero: Este proceso deberá realizarse según ciertos pasos a

seguir para que el comprador realice una correcta contratación. Entre dichos
pasos se incluyen el registro del producto, la selección del viajero, datos de la
tarjeta de crédito/débito y la espera de confirmación por la operación junto con un
resumen de las elecciones realizadas.
 Compra al por mayor: Este proceso deberá realizarse según ciertos pasos a
seguir para que el comprador realice una correcta compra bajo esta modalidad.
Entre dichos pasos se incluyen la selección del producto, personalización del
producto, datos de la tarjeta de crédito/débito y la espera de confirmación por la
operación junto con un resumen de las elecciones realizadas.
Matricial:
 Tienda de ofertas: El comprador podrá visualizar los productos más populares

actualmente en el mercado, estos productos al ser de diferente categoría no
tendrán una posición preferencial. Sin embargo, estarán ordenados por su precio
dentro de sus propias categorías.
 Historial de direcciones: El comprador podrá revisar las diferentes direcciones
que haya registrado en el pasado. Estas direcciones no cuentan con un orden en
específico por lo que se mostrarán a manera de mosaico como una galería.
 Tienda de cupones: El comprador tendrá acceso a una galería de cupones que
Import It estará regalando por ciertos eventos o temporadas.
Jerárquica:
 Lista de compradores: El viajero podrá visualizar la lista de viajeros que están

solicitando algún producto. Esta lista contará con dos filtros como la cantidad de
productos y la categoría del producto. Asimismo, esta lista estará categorizada
cronológicamente, es decir, se colocan las solicitudes más recientes al inicio de la
lista.
 Billetera del viajero: El viajero podrá revisar las diferentes transacciones que
haya recibido en el pasado, así como también el estado de cada una de ellas. Esta
información se mostrará en una lista organizada cronológicamente.
 Mis Chats: El viajero tendrá una bitácora de las conversaciones que haya tenido
con los compradores con los que haya trabajado antes. Estos chats estarán
organizados cronológicamente.
 Mis ordenes: El viajero tendrá una sección donde podrá visualizar todos los
pedidos que ha aceptado. Dichos pedidos estarán organizados cronológicamente y
contará con un filtro de categoría de producto.
 Mis viajes: El viajero tendrá que registrar sus viajes programados indicando la
fecha del vuelo, la aerolínea y algunos detalles más para tener acceso a las
solicitudes de compradores. Asimismo, se desplegarán en formato lista y se
organizarán cronológicamente.
Ambos segmentos:
Existen funcionalidades que comparten ambos públicos objetivos, entre las cuales
tenemos:
Jerárquica:
 Perfil personal: En esta sección el usuario podrá visualizar/editar su información

personal, la cual estará organizada por su relevancia.
 Landing Page: En esta sección se mostrará a cualquier interesado en nosotros la

información necesaria de nuestro proyecto. Entre las cuales están la descripción
de nuestro servicio, nuestra información de contacto, etc. Esta información estará
organizada en base a su relevancia (lo más importante se mostrará primero) y de
acuerdo con una categorización por tópicos.
 Reseñas: En esta sección el usuario podrá constatar la calidad del servicio de un

viajero especifico. Esta información estará organizada bajo una categorización
cronológica (las reseñas más recientes se mostrarán primero).
Matricial:
 Menú de opciones: Los 2 segmentos objetivo accederán a su menú principal

respectivo dónde cada uno tendrá la libertad de seleccionar las funciones que
deseen realiza en ese momento. Estas opciones no siguen un orden especifico,
pero estarán bajo una categorización por tópicos ya que cada opción tiene una
función diferente.
4.2.2. Labeling Systems.

A continuación, se mostrará el sistema de etiquetado que permitirá a nuestros visitantes
y/o usuarios recibir la información que nuestra Landing page y Web Application ofrece
a través del uso de la mínima cantidad de palabras posible.
Contamos con cinco “headings” con fuente Lato ubicadas en la parte superior del
Landing Page:
 Home: Sección seleccionada por defecto dónde los usuarios verán la información
más relevante, la cual captará su atención.
 Customer: Sección dónde se detallan los beneficios a los que el usuario puede
acceder si se registra como comprador.
 Traveler: Sección dónde se detallan los beneficios a los que el usuario puede
acceder si se registra como viajero.
 Review: Sección dónde se visualizan los comentarios de los usuarios que han
utilizado nuestro servicio.
 Contact: Sección dónde se detalla cuáles son nuestros canales de comunicación y
nuestra ubicación.
Asimismo, contamos con diez “headings” con fuente Lato ubicadas en la parte lateral
izquierda de nuestra Web Application para la cuenta del comprador.
 Profile: Sección dónde estará la información personal del comprador.

 Wholesale purchase: Sección dónde el comprador podrá registrarse a una
compra de un producto al por mayor junto a un grupo de personas igualmente
interesadas.
 Orders: Sección dónde los compradores pueden visualizar todos los pedidos que
han realizado.
 Chats: Sección dónde se encuentra la bitácora de todos los chats que ha tenido el
comprador con los viajeros.
 Wallet: Sección dónde el comprador lleva el registro de todas las transacciones
que ha realizado.
 Addresses: Sección dónde almacenan todas las direcciones del comprador.
 Olva: Sección dónde el comprador puede visualizar los envíos de sus productos
por Olva Courier.
 Coupons: Sección dónde se publican los diversos cupones que Import It está
ofreciendo, ya sea por alguna campaña, temporada u oferta.
 Calculator: Sección dónde el comprador puede usar la calculadora Import It para
hallar un aproximado de cuanto estaría pagando si desea obtener cierto producto.
 Fasty: Sección dónde se muestran los productos por los cuales Import It está
dispuesto a realizar todo el proceso para traértelo lo antes posible y al precio más
cómodo, solo debes pagar por este.
Asimismo, contamos con seis “headings” con fuente Lato ubicadas en la parte lateral
izquierda de nuestra Web Application para la cuenta del viajero.
 Profile: Sección dónde estará la información personal del viajero.

 Customer’s Orders: Sección dónde estarán publicadas todas las solicitudes de
los compradores.
 Wallet: Sección dónde el viajero lleva el registro de todas las transacciones que
ha recibido.
 Chats: Sección dónde se encuentra la bitácora de todos los chats que ha tenido el
viajero con los compradores.
 Orders: Sección dónde estarán las ordenes en curso aceptadas por el viajero.
 Trips: Sección dónde el viajero registra sus viajes programados para estar apto de
hacer una oferta a los compradores que publican sus solicitudes.
4.2.3. SEO Tags and Meta Tags
A continuación, se mostrarán los SEO Tags y Meta Tags utilizados en el Landing Page
y Web Application con el propósito de aumentar su visibilidad en los motores de
búsqueda.
Landing Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="Landing page aimed at buyers of foreign products

and travelers. We will inform you about who we are, our target audience, how to
contact us and some reviews about our service."/>
<meta name="keywords" content="Import It, Landing Page, Home, Customer, Traveler,

Contact, Reviews"/>
<meta name="author" content="MIRAI team"/>
<title>Import It the best website to get a product from abroad cheaply. </title>
</head>
Web Application:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content=" Web application where the buyer can buy
wholesale, have a record of their purchases, calculate the budget, etc. Travelers
will be able to register their trips and accept international orders."/>
<meta name="keywords" content="Import It, Web Application, Profile, Wholesale

purchase, Orders, Chats, Wallet, Addresses, Olva, Coupons, Calculator, Fasty,
Trips"/>
<meta name="author" content="MIRAI team"/>
<title> Register/Login to Import It to get your product from abroad. </title>
</head>
4.2.4. Searching Systems.
A continuación, se mostrarán los sistemas de búsqueda implementados para ayudar a
nuestros usuarios a encontrar la información que están buscando.
Para el Landing Page, los sistemas de búsqueda son estáticos, ya que la barra de
navegación llevará a los usuarios a la sección en la que estén interesados. Sin embargo,
podrán buscar toda la información necesaria para identificar lo más importante de
nuestra solución, como una breve descripción de nuestra propuesta, los beneficios tanto
para el comprador como para el viajero, reseñas sobre nuestro servicio y nuestras
formas de contacto para que puedan comunicarse con nosotros.
Para el caso del Web Application:
 Lista de viajeros que aceptan la oferta: El comprador podrá buscar por nombre
y/o apellido dentro de la lista de viajeros disponibles. Asimismo, contará con un
filtro, el cual permitirá listar a los viajeros por costo, tiempo de entrega o ranking.
 Historial de pedidos en curso: El comprador podrá buscar su producto dentro de
la lista a través de su nombre. Asimismo, contará con un filtro de categoría del
producto para reducir la lista a un grupo de productos en particular.
 Mis Chats: El comprador podrá realizar una búsqueda del nombre del viajero con
el que ya ha trabajado para obtener su chat rápidamente.
 Billetera del comprador: El comprador podrá buscar una transacción en
particular dentro de su historial a través del nombre del producto que compro en
esa ocasión. Asimismo, contará con un filtro de categoría del producto para
reducir la lista a un grupo de transacciones en particular.
 Envíos nacionales: El comprador podrá buscar un envío nacional en particular
dentro de su historial a través del nombre del producto que compro en esa
ocasión. Asimismo, contará con un filtro de categoría del producto para reducir la
lista a un grupo de envíos en particular.
 Compra al por mayor: El comprador podrá realizar una búsqueda por nombre a
los productos que Import It este comprando al mayoreo. Asimismo, contará con
un filtro de categoría del producto y otro de tiempo de espera.
 Tienda de ofertas: El comprador podrá realizar una búsqueda por nombre a los
productos que Import It este promocionando. Asimismo, contará con un filtro de
categoría del producto.
 Lista de compradores: El viajero podrá buscar por nombre y/o apellido dentro
de la lista de compradores disponibles. Asimismo, contará con un filtro, el cual
permitirá listar a los viajeros por categoría del producto solicitado y la cantidad.
 Billetera del viajero: El viajero podrá buscar una transacción en particular, de
forma rápida, dentro de su historial a través del nombre del producto que traslado
en aquella ocasión. Asimismo, contará con un filtro de categoría del producto
para reducir la lista a un grupo de transacciones en particular.
 Mis Chats: El viajero podrá realizar una búsqueda del nombre del comprador con
el que ya ha trabajado para obtener su chat rápidamente.
 Mis ordenes: El viajero podrá realizar una búsqueda del nombre de los productos
que ya ha acordado trasladar o ya ha trasladado anteriormente. Asimismo, contará
con un filtro de categoría del producto para reducir de forma más segmentada
dicho historial.
 Mis viajes: El viajero podrá realizar un filtro por fecha de sus viajes registrados
para delimitar un intervalo más pequeño y encontrar el viaje en específico que
busca.
4.2.5. Navigation Systems.
A continuación, se mostrarán los sistemas de navegación que le permitirán a nuestros
usuarios moverse a través de las distintas piezas de contenido o información.
Como se mencionó anteriormente en el Labeling Systems, contamos con cinco

“headings” entre los cuales tenemos a Home, Customer, Traveler, Review y Contact.
Estas secciones son ubicadas como un menú horizontal global a lo largo de la parte
superior del Landing page, se dividió la información en estas cinco secciones con la
finalidad de que el cliente no estuviera recorriendo hacia abajo, a través de la barra de
desplazamiento vertical, la inmensidad de información disponible. Esto le facilitaría
movilizarse a través de nuestro contenido. Por supuesto, la estrategia es que revise
primero el Home, dónde se encuentra la información más relevante y la que llamará más
su atención, y luego viaje a través del resto del menú de izquierda a derecha. Cabe
señalar que, al ser una barra de navegación global, esta no se moverá ni se verá alterada
cuando se viaje a través de los distintos sectores de información.
Por otro lado, dentro del Web Application utilizamos un método similar para el menú
principal, solo que este está orientado de forma lateral vertical. Este es un menú global,
el cual tiene dentro diversas opciones para cada uno de los segmentos objetivos, las
cuales ya se mencionaron anteriormente.
Dentro del menú principal estará las siguientes opciones:
 Profile: Si el comprador desea editar su perfil solo tendrá que ingresar a esta
sección.
 Wholesale purchase: Si el comprador desea formar parte de una compra al
mayoreo deberá ingresar a esta sección. Dentro de esta se desplegará una nueva
barra de navegación, la cual será local, con las secciones Buy, Waiting,
Favorites y History; con las cuales el comprador podrá segmentar los productos.
 Orders: Si el comprador desea revisar los productos que ha comprado en el
pasado o que se encuentran activos actualmente deberá entrar a esta sección.
Dentro de esta se le habilitará una barra de navegación horizontal, la cual será
local, con las secciones On route y Received; con las cuales el comprador podrá
visualizar los estados de todos sus productos.
 Chats: Si el comprador desea interactuar con los chats de los viajeros a cargo de
su producto deberá ingresar a esta sección.
 Wallet: Si el comprador desea revisar las transacciones que ha realizado hasta el
momento tiene que ingresar a esta sección.
 Adresses: Si el comprador desea revisar las direcciones asociadas a su cuenta,
entonces tendrá que ingresar a esta sección.
 Olva: Si el comprador desea visualizar los detalles del tracking por parte de Olva
Courier deberá ingresar a esta sección.
 Coupons: Si el comprador desea revisar los cupones proveídos por Import It
entonces tendrá que ingresar a esta sección.
 Calculator: Si el comprador desea hallar un aproximado de cuanto estaría
pagando si desea obtener cierto producto deberá ingresar a esta sección.
 Premium: Si el comprador desea revisar los productos por los cuales Import It
está dispuesto a realizar todo el proceso para traerlo lo antes posible y al precio
más cómodo, entonces tendrá que ingresar a esta sección.
Dentro del menú principal estará las siguientes opciones:
 Profile: Si el viajero desea editar su perfil solo tendrá que ingresar a esta sección.
 Customer’s Orders: Si el viajero desea conseguir algún pedido de envío tendrá
que ingresar a esta sección.
 Wallet: Si el viajero desea revisar las transacciones que ha recibido hasta el
momento tiene que ingresar a esta sección.
 Chats: Si el viajero desea interactuar con los chats de los compradores con los
que está trabajando deberá ingresar a esta sección.
 Orders: Si el viajero desea revisar la lista de pedidos que va a trasladar o ya ha
trasladado deberá ingresar a esta sección. Dentro de esta se desplegará una nueva
barra de navegación, la cual será local, con las secciones On route y Delivered.
 Trips: Si el viajero desea revisar la lista de sus viajes programados o registrar un
viaje, entonces tendrá que ingresar a esta sección. Dentro de esta se desplegará
una nueva barra de navegación, la cual será local, con las secciones Register y
Registered.
4.3. Landing Page UI Design
Es el diseño del Landing page, el cual nos ayudara a convertir visitantes en clientes
potenciales de nuestra solución software. Mediante este, los visitantes podrán visualizar
algunos de los puntos o servicios que Import It ofrece en version desktop y mobile.
4.3.1. Landing Page Wireframe.

En esta sección, se presentará base para el diseño del sitio web de nuestro software. Con
bases que permitan dar una mejor idea del contenido que mostrará la plataforma y la
versión móvil.
Desktop Web
Link: https://www.figma.com/file/q9Kp7XVkVj993x3QF44nUY/Landing-Page-
Wireframes?node-id=0%3A1
Mobile Web
Link: https://www.figma.com/file/q9Kp7XVkVj993x3QF44nUY/Landing-Page-
Wireframes?node-id=0%3A1
4.3.2. Landing Page Mock-up.

Se presenta la versión preliminar en qué consistirá nuestro Landing page, detallando el
contenido que tendrá, como sus opciones que solucionarán las necesidades de los
usuarios.
Desktop Web Browser
Link: https://www.figma.com/file/Nrndkok93ejDHZBhdVVmKr/Landing-Page-
Mockup?node-id=0%3A1
Mobile Web Browser
Link: https://www.figma.com/file/Nrndkok93ejDHZBhdVVmKr/Landing-Page-
Mockup?node-id=0%3A1
4.4. Web Applications UX/UI Design
Se presentan los wireframes de Import It
4.4.1. Web Applications Wireframes.

Segmento Objetivo compradores
Link para visualizar mejor los wireframes:

https://www.figma.com/file/MkYglDamF4VJMuYKvc1N5V/Web-Application?node-
id=0%3A1
Segmento Objetivo viajeros
Link para visualizar mejor los wireframes:

id=118%3A3529
Wireframes mobile
Link: https://www.figma.com/file/TD9xscCFef7i0gtrRmXQgF/Untitled?node-
id=0%3A1
4.4.2. Web Applications Wireflow Diagrams.

User Goal: Como comprador deseo iniciar sesión.
En el presente Wireflow, se evidencia el flujo que seguirá el usuario comprador para

poder iniciar sesión. Iniciará en el login, seleccionará la opción comprador e ingresará
su DNI y contraseña, para poder ingresar a Import it.
User Goal: Como comprador deseo cambiar mi contraseña
Al momento de iniciar sesión, se presentará una opción de olvide mi contraseña, cuando

le de click, redireccionará al usuario a una nueva pantalla donde ingresará su email y su
nueva contraseña.
User Goal: Como comprador deseo editar mi perfil de usuario.
En el presente Wireflow, el flujo comienza en la misma sección principal/por defecto

(My profile) dónde el usuario edita su información personal y luego guarda los cambios.
User Goal: Como comprador deseo participar de la compra de un producto al por

mayor.
En el presente Wireflow, el flujo comienza en la sección principal/por defecto de la
plataforma (My profile) desde dónde el usuario se dirige a la sección de compra al por
mayor a través del menú principal. Una vez ahí, el usuario realiza los filtros que
considere necesarios para reducir la lista para luego seleccionar el producto de interés.
Luego, se despliega el detalle del producto junto con la opción para comprarlo.
Posteriormente, se despliega una solicitud para ingresar los datos de la tarjeta con la que
va a pagar y, cuando presiona el botón “Pay” se despliega una ventana que solicita
confirmación para realizar la transacción. Finalmente, si se confirma la transacción,
aparece un mensaje de transacción exitosa.
User Goal: Como comprador deseo seguir un producto con modalidad de envió
nacional.
Inicia en la pantalla inicial de import it, luego en la barra vertical donde se muestran las
opciones, elige la opción de domestic shipments. Aquí, el usuario podrá encontrar todos
los productos que se enviaron o están en proceso de envió a nivel de provincias fuera de
lima. Al seleccionar see shipping, lo llevara a una pantalla donde visualizará el shipping
date, departure time, shipping manager, total cost y un botón que servirá para seguir él
envió por medio de nuestro principal aliado OLVA Courier.
User Goal: Como comprador deseo agregar un cupón de descuento
Al seleccionar la opción cupones en la barra izquierda, se mostrará la primera pantalla

donde podrá visualizar sus cupones, si no cuenta con alguno, podrá seleccionar el botón
de agregar un cupón. En esta nueva pantalla se ingresará un código de cupón publicado
en nuestras principales redes sociales y cuando se valide, se agregará en la sección
cupones.
User Goal: Como un comprador, deseo cotizar un producto antes de pagar por el
servicio para tener una idea del precio por el servicio de entrega

poder cotizar un producto. Primero, tendrá que elegir una categoría, luego, añadirá el
subtotal del producto. Finalmente, moverá la barra para determinar hasta cuánto de
comisión le gustaría a pagar. Como resultado podrá ver el precio calculado en base a los
datos digitados.
User Goal: Como un comprador, quiero visualizar mis órdenes de la tienda en camino
En el presente Wireflow, se muestra el flujo que debe seguir un usuario del segmento
comprador para visualizar sus órdenes en camino de la tienda de la aplicación. Iniciando
en cualquier pantalla (en este caso, el perfil), podrá acceder a la sección “My Orders
Store” para visualizar sus órdenes de la tienda. Se muestra por defecto la pestaña de
órdenes en camino. En caso no hubiera órdenes en camino, se muestra una pantalla con
el mensaje “So far you don’t have any orders in Store” que indica que no hay ninguna
orden en camino.
User Goal: Como un comprador, quiero visualizar mis órdenes de la tienda recibidas
comprador para visualizar sus órdenes recibidas de la tienda de la aplicación. Iniciando
en cualquier pantalla (en este caso, el perfil), podrá acceder a la sección “My orders
órdenes en camino, por lo que deberá hacer click en la pestaña “Received” para
visualizar el historial de órdenes recibidas. En caso no hubiera órdenes recibidas, se
muestra una pantalla con el mensaje “So far you don’t have any orders received in
Store” que indica que no hay ninguna orden recibida registrada.
con un filtro determinado
comprador para visualizar sus órdenes en camino de la tienda de la aplicación utilizando
un filtro en específico para el tipo de producto. Iniciando en cualquier pantalla (en este
caso, el perfil), podrá acceder a la sección “My orders Store” para visualizar sus órdenes
de la tienda. Se muestra por defecto la pestaña de órdenes en camino. En caso no
hubiera órdenes en camino, se muestra una pantalla con el mensaje “So far you don’t
have any orders in Store” que indica que no hay ninguna orden en camino. Una vez en
la pantalla de “My orders Store” se seleccionará un filtro para el tipo de producto y a
continuación se mostrarán los productos que cumplan con ese filtro. En caso de no
haber productos que cumplan con la descripción del filtro, se mostrará una pantalla que
diga: “So far you don’t have any orders in Store with this filter” que indica que no
existen órdenes con el filtro establecido.
de la tienda. Se muestra por defecto la pestaña de órdenes en camino, por lo que deberá
hacer click en la pestaña “Received” para visualizar el historial de órdenes recibidas. En
caso no hubiera órdenes recibidas, se muestra una pantalla con el mensaje “So far you
don’t have any orders received in Store” que indica que no hay ninguna orden recibida
registrada. Luego se seleccionará un filtro para el tipo de producto y a continuación se
mostrarán los productos que cumplan con ese filtro. En caso de no haber productos que
cumplan con la descripción del filtro, se mostrará una pantalla que diga: “So far you
don’t have any received orders in Store with this filter” que indica que no existen
órdenes recibidas con el filtro establecido.
User Goal: Como un comprador, quiero visualizar mis mensajes
comprador para visualizar sus mensajes en la aplicación web. Iniciando en cualquier
pantalla (en este caso, el perfil), podrá acceder a la sección “My chats” para visualizar
sus mensajes. En caso no existan mensajes, se mostrará una pantalla con el mensaje “So
far you don’t have any chats” que indica que no mensajes hasta la fecha.
User Goal: Como un comprador, quiero visualizar un mensaje específico
far you don’t have any chats” que indica que no mensajes hasta la fecha. En caso haya
mensajes existentes, se seleccionará uno de ellos y se procede a abrir otra pantalla con el
historial de mensajes con el usuario destinatario.
User Goal: Como un comprador, deseo ver y poder elegir uno de los productos más
vendidos de un rubro específico desde la aplicación web de Import It
En el presente Wireflow, el usuario comprador se encuentra en la página “Choose a

Product”, donde podrá ver las ofertas más pedidas. Cuando seleccione alguna de ellas,
será dirigido a una vista más amplia del producto. Finalmente, si selecciona el botón
“Go to Product URL”, será redirigido a la página de venta del producto.
User Goal: Como comprador quiero visualizar mi billetera de la aplicación
comprador para visualizar sus en camino de la tienda de la aplicación. Iniciando en
cualquier pantalla (en este caso, el perfil), podrá acceder a la sección “My Wallet” para
visualizar las transacciones procesadas, validadas o invalidadas en la aplicación,
asimismo poder ver el detalle de una transacción seleccionándola.
User Goal: Como un comprador, quiero registrar mis ordenes por medio de un URL de
una página de comercio externa
comprador para poder iniciar el proceso del registro de una orden por medio de una
URL. Iniciando en cualquier pantalla (en este caso, el perfil), podrá acceder a la sección
“URL Orders”, para continuar con el proceso de llenado de los datos, posterior a ello la
confirmación del producto como descripción de los detalles, para final cuando la orden
por medio de URL este registrada esta figurará como “Orden completada”.
User Goal: Como comprador, quiero visualizar las direcciones registradas en donde podría llegar
mi producto.
comprador para visualizar sus direcciones registradas en la aplicación. Iniciando en
cualquier pantalla (en este caso, el perfil), podrá acceder a la sección “My directions”
para visualizar las direcciones registradas, en el caso no hay registrado una, podrá
seleccionar el símbolo “+” para registrar una nueva, asimismo seleccionando cada
dirección podrá revisar un detalle de estas
User Goal: Como viajero deseo iniciar sesión.
En el presente Wireflow, se evidencia el flujo que seguirá el usuario viajero para poder
iniciar sesión. Iniciará en el login, seleccionará la opción comprador e ingresará su DNI
y contraseña, para poder ingresar a Import it.
User Goal: Como viajero deseo cambiar mi contraseña
Al momento de iniciar sesión, se presentará una opción de olvide mi contraseña, cuando

le de click, redireccionará al usuario a una nueva pantalla donde ingresará su email y su
nueva contraseña.

User Goal: Como viajero deseo visualizar mis mensajes.
En el siguiente Wireflow, se presenta el flujo a seguir para visualizar un chat con un

cliente, para poder discutir puntos sobre el producto a traer.
User Goal: Como un viajero, quiero visualizar las órdenes a ofertarme
viajero para visualizar las órdenes a la cual este se podrá ofertar dentro de la aplicación.
Iniciando en cualquier pantalla (en este caso, el perfil), podrá acceder a la sección
“Orders” para visualizar las ordenes disponibles. Por defecto si anteriormente eligió una
orden esta le figurara o en el caso no haya ninguna se le emitirá el mensaje de “No
Orders available”, asimismo cuenta con la opción “Search Order”, para que pueda
buscar una orden a la que se pueda ofertan, con un filtro por nombre referente del
producto.
4.4.3. Web Applications Mock-ups.
Link para visualizar mejor los mockups:

id=118%3A3530
Link para visualizar mejor los mockups:
id=118%3A3531
Mockups mobile
Link: https://www.figma.com/file/TD9xscCFef7i0gtrRmXQgF/Untitled?node-
id=6%3A1795
4.4.4. Web Applications User Flow Diagrams

Segmento Objetivo Comprador

su DNI y contraseña correctamente, para poder ingresar a Import it, de lo contrario se
mostrarán mensajes de alerta.
User Goal: Como comprador deseo registrarme para ingresar a Import It
Al momento de iniciar el registro, el usuario deberá ingresar todos los datos que se le
solicita como su DNI, nombre, apellidos, email, y su respectiva contraseña. Si ingresa
caracteres no permitidos o datos que no sean válidos, se mostraran textos de alerta, de
los puntos a corregir. Si ingresa todos sus datos correctamente, se mostrará una nueva
pantalla con su registro exitoso y podrá iniciar sesión.

Sin embargo, es posible que el usuario ingrese datos no válidos, por lo cual la
plataforma le advertirá en cuales datos se ha equivocado marcándoselo de rojo.

mayor.

aparece un mensaje de transacción exitosa. Sin embargo, es posible que durante el
proceso los datos de la tarjeta sean ingresados incorrectamente por lo que la plataforma
lo resalará de rojo. Asimismo, puede haber un problema externo con su tarjeta o con el
sistema en ese momento, para lo cual la plataforma le mencionará cual puede ser el
problema.

en nuestras principales redes sociales y cuando se valide se mostrará un mensaje de
confirmación y se agregará en la sección cupones. De lo contrario, se mostrará un
mensaje de que no es válido.
En el presente User Flow, se muestra el flujo que debe seguir un usuario del segmento
orden en camino.
comprador para visualizar sus órdenes recibidas de la tienda de la aplicación. Iniciando
órdenes en camino, por lo que deberá hacer click en la pestaña “Received” para
visualizar el historial de órdenes recibidas. En caso no hubiera órdenes recibidas, se
muestra una pantalla con el mensaje “So far you don’t have any orders received in
Store” que indica que no hay ninguna orden recibida registrada.
User Goal: Como un comprador, quiero visualizar mis mensajes
far you don’t have any chats” que indica que no mensajes hasta la fecha.
User Goal: Como un comprador, quiero visualizar un mensaje específico
far you don’t have any chats” que indica que no mensajes hasta la fecha. En caso haya
mensajes existentes, se seleccionará uno de ellos y se procede a abrir otra pantalla con el
historial de mensajes con el usuario destinatario.

comisión le gustaría a pagar. En caso de que digite caracteres no válidos en el input de
“Subtotal”, entonces, se le mostrará una advertencia diciéndole que los datos son
incorrectos. Además, los bordes del cuadro serán pintados de rojo.
User Goal: Como un comprador, quiero visualizar mi billetera de la aplicación
comprador para visualizar su billetera y las transacciones generadas por los pagos
realizados de sus órdenes, tanto como no podrá ver ninguna si es que aún no ha
realizado ningún pago por una orden, asimismo puede visualizar las transacciones que
tanto están en proceso, validadas o invalidadas según la situación que está presente.
Iniciando en cualquier pantalla (en este caso, el perfil), podrá acceder a la sección “My
Wallet” para visualizar sus transacciones. Se muestra por defecto la pestaña de
transacciones registradas, por lo que deberá hacer click en la pestaña “see more” para
visualizar el mejor detalle de la transacción, en el caso no haya ninguna transacción
registrada se mostrará el mensaje “No transactions”
mi producto.
para visualizar las direcciones registradas. En el caso de tener direcciones registradas,
estas figuraran en la vista principal, así como la opción “+” para poder agregar una
nueva sección, en el caso no cuente con direcciones registradas solo se mostrará la
opción “+” para agregar una nueva, cuando registremos una dirección para que esta
pueda finalizar, deben contar con todos los caracteres válidos, caso contrario no se
podrá registrar, y solicitara que se ingresen los caracteres correctos para poder
continuar.
comprador para realizar el proceso de generar orden por medio de una URL. Iniciando
en cualquier pantalla (en este caso, el perfil), podrá acceder a la sección “URL Order”
para iniciar el llenado de los datos de la orden y así poder generarla, cabe resaltar que
dicha ventana consta de dos partes como datos primarios y secundarios, ambos con
validaciones de caracteres, ya que, si estos no cumplen con la condición, no podrán
continuar con el proceso, luego de generar la orden, se solicitarán detalles para que
finalmente la orden se publique
Segmento Objetivo Viajeros
iniciar sesión. Iniciará en el login, seleccionará la opción viajero e ingresará su DNI o
CE y contraseña correctamente, para poder ingresar a Import it, de lo contrario se
User Goal: Como viajero deseo registrarme para ingresar a Import It
User Goal: Como viajero deseo editar mi perfil de usuario.

Sin embargo, es posible que el usuario ingrese datos no válidos, por lo cual la
plataforma le advertirá en cuales datos se ha equivocado marcándoselo de rojo.
User Goal: Como viajero deseo visualizar un chat con un cliente
En el siguiente Wireflow, se presenta el flujo a seguir para visualizar un chat con un

cliente, para poder discutir puntos sobre el producto a traer. Si no cuento con un chat se
mostrará el flujo dispuesto en el diagrama siguiente:
User Goal: Como viajero deseo visualizar los ingresos que genere gracias a Import It
Se muestra el flujo con los happy y unhappy paths que seguirá el usuario para poder
visualizar las pantallas de Import It para acceder a sus ingresos.
viajero para visualizar las ordenes generadas por los compradore y poder ofertarse para
que la pueda tomar. Iniciando en cualquier pantalla (en este caso, el perfil), podrá
acceder a la sección “Customers Orders” para poder revisar si es que tiene Ordenes
solicitadas, o en el caso no lo tenga, el viajero podrá buscarlas según el filtro del nombre
del producto que le interesaría acceder a ofertarse.
4.5. Mobile Applications Prototyping
A continuación, se detallarán los principales criterios para las decisiones de interacción
(elementos de la interfaz y los principios aplicados a ellos) relacionados con la
Arquitectura de información para Import It. Asimismo, se adjuntarán dos videos
evidenciando lo propuesto para una mejor comprensión.
Botones/Tarjetas del menú principal
Cada segmento objetivo tiene su propio menú principal con sus propios botones.
 Principio de los objetos: Agrupamos el contenido relacionado dentro de sus

botones y tarjetas respectivas, los cuales se comportarán de una forma
determinada. Asimismo, cada botón tendrá sus propios atributos respecto a cómo
visualizar la información contenida en ellos.
Listas
Distintas secciones dentro de nuestra aplicación utilizan las listas, tales como: lista de
viajeros, lista de compradores, historial de transacciones, etc. Para ello nos hemos
basado en los siguientes principios:
 Principio de las elecciones: Darle al usuario final demasiadas opciones puede ser
abrumador, así que nuestras listas tienen un límite de muestra, es decir, si
tenemos muchos elementos en nuestra lista, entonces solo mostraremos diez de
ellos, el usuario podrá decidir si le es necesario ver el resto a través de un botón
(ver más).
 Principio del crecimiento: Al utilizar las listas, no nos vemos afectados por el
crecimiento, ya que, cualquier información nueva adicionada se colocará al final
de la lista.
Filtros
Los filtros implementados están relacionados directamente con los elementos del punto
anterior, ya que, siguen el siguiente principio:
 Principio de clasificación múltiple: Debido a que las personas clasifican la

información de manera diferente y tienden a tener múltiples sistemas de
clasificación, hemos desarrollado filtros para las listas en base a los nombres,
categorías del producto, puntuación del viajero, etc.
Resúmenes de contenido
Estos resúmenes están estrechamente relacionados con las listas de productos o

compradores/viajeros, ya que, ambos necesitan mostrar un poco de información al
comprador para no saturarlo de información. Es por ello, por lo que se sigue el siguiente
principio:
 Principio de divulgación: Solo mostramos la información suficiente para ayudar

a nuestros usuarios a comprender con qué tipo producto o comprador/viajero van
a tratar. Si deciden profundizar más a detalle, lo seleccionarán y serán redirigidos
a una ventana más detallada.
Etiquetas
Cada sección de nuestra plataforma está acompañada de una etiqueta superior con el
nombre respectivo de la ventana dónde se encuentran los usuarios, respetando el
siguiente principio:
 Principio de las puertas de entrada: Cada sección/ventana de nuestro sitio web

habla por sí misma, nuestras etiquetas permiten a nuestros usuarios establecer un
sentido de lugar, es decir, dónde están y qué pueden hacer a continuación.
Menús
Nuestra aplicación consta de 2 menús, uno se encuentra en la parte lateral de forma

horizontal (secciones principales) y el otro se despliega dentro de algunas secciones
principales de forma horizontal (subsecciones). Esto debido al siguiente principio:
 Principio de navegación enfocada: Debemos tener en cuenta como nuestros

usuarios navegan por el contenido de nuestro sitio web, por lo que se
implementaron estos dos menús. El objetivo fue tener dos diferentes menús para
los dos diferentes tipos de información.
Introducción de los flujos de interacción mostrados en el video:
 Principales:
o Sacar cita: El paciente saca una cita con un profesional de la salud
escogiendo al profesional, la fecha, el horario y finalmente ingresando su
medio de pago. Utilizando filtros en el proceso.
o Compra al por mayor: El comprador filtra la lista de productos que se
pueden comprar, selecciona el producto de interés, visualiza el detalle del
producto, ingresa los datos de su tarjeta de crédito/débito y recibe la
confirmación de la transacción.
o Mis ordenes en tienda: El comprador visualiza el catálogo de productos
que Import It ya tiene en sus almacenes – y que puede comprar- y los filtra
si lo desea. Asimismo, también puede visualizar los productos que ya ha
recibido.
o Envíos nacionales: El comprador visualiza los productos que están siendo
trasladados a la provincia dónde los solicito a través de un seguimiento con
Olva Courier. Asimismo, puede ver el detalle del producto trasportado.
o Cupones: Visualiza los cupones que tiene disponibles para utilizarlos en la
plataforma.
o Chats: Visualiza todos los chats de los viajeros con los que ha conversado
anteriormente y despliega las conversaciones.
o Pedidos de compradores: El viajero visualiza la lista de productos que
diversos compradores están solicitando.
o Billetera: El viajero puede visualizar el historial de transacciones que ha
recibido por cada trabajo realizado. Asimismo, puede ver un informe más
detallado ingresando a una transacción en específico.
 Secundarios:
o Registrar cuenta: El usuario crea una cuenta por primera vez en nuestra
plataforma.
o Olvidé mi contraseña: El usuario puede generar una nueva contraseña en
caso haya olvidado la anterior.
o Ver perfil de usuario: El usuario navega hacia su perfil a través del menú
principal de la parte lateral.
Por otro lado, también se respetaron los principios y elementos del Style Guidelines
detallado anteriormente (sección 4.1. Style Guidelines). Dentro de los cual se puede
evidenciar la implementación de los colores respectivos, como también del logo,
tipografía y espaciado de elementos con los tamaños y fuentes correspondientes a la
plataforma. Asimismo, se insertaron los cuadros de selección (calendario y filtros), los
botones con sus bordes acorde a la plataforma, las tarjetas (tarjetas informativas en el
menú principal), los Vertical Bar y el uso de opciones emergentes (ventanas de
confirmación).
Link del prototipo del Application Web para compradores:

id=291%3A23283
Link del prototipo del Application Web para Traveler o viajeros:

https://www.figma.com/file/MkYglDamF4VJMuYKvc1N5V/Web-Application?
node-id=291%3A23284
Videos
En el presente video se evidencian y detallan las tareas que realiza nuestra Web
Application, siguiendo la filosofía de Material Design, la cual abarca los siguientes
puntos:
 La interacción de los objetos es transmitida a través de los principios de la

luz, la superficie y el movimiento: El traslado entre las secciones del menú
principal evidencian este principio.
 Espacio en 3D (la anchura, la altura y el grosor): Cada botón presenta un
efecto de sobreposición al plano 2D (Drop Shadow).
 Diseño de impresión (fuentes, colores, imágenes, grids, escalas y espacio), el
cual crea una estructura jerárquica y significativa: La aplicación en general
presenta esta jerarquía en cada una de sus secciones, por ejemplo, la lista de
viajeros/compradores o la del menú principal.
 Relaciones padre-hijo, cada objeto puede estar subordinado a un solo objeto
principal: Los elementos más representativos de esto serían los botones y la
barra inferior de navegación, ya que al ser replicadas en casi todos los mockups se
desarrolló una relación padre-hijo para mantener el mismo diseño en cada uno de
ellos.
Screenshoot del video del prototipo para Compradores:

Screenshoot del video del prototipo para Viajeros:
Link de los prototipos en Microsoft Stream:

https://web.microsoftstream.com/video/29a9a121-ae75-46c6-ba8c-824140cd7ec9
4.6. Domain-Driven Software Architecture
4.6.1. Software Architecture Context Diagram
En el presente diagrama se detallan cómo interactúan los dos tipos de usuarios
(compradores y viajeros) con nuestro sistema de software y con sistemas externos, en
este caso, el servicio de correos de Microsoft Exchange.
Link: https://drive.google.com/file/d/1Af9eBY_HgDyiu_dERu76ZKQxyvA0fihc/view?
usp=sharing
4.6.2. Software Architecture Container Diagrams

En el presente diagrama se amplía con mayor detalle los contenedores incluidos en el
sistema de software de Import It. Se pueden observar 4 contenedores. El primero, la
Landing Page, es visitada por los dos tipos de usuarios y dirigen hacia el contenedor de
la Web Application. A su vez, la Web Application hace llamadas API al contenedor de
la RESTful API, quien a su vez lee y escribe la Database.
Link: https://drive.google.com/file/d/1QE0KQJogGgD5om1_uDY0IM-5UJQQPD0L/
view?usp=sharing
4.6.3. Software Architecture Components Diagrams

En el presente diagrama se amplía con mayor detalle los componentes incluidos dentro
del contenedor de la RESTful API. Se pueden observar 7 principales controladores y 2
componentes.
El primer controlador, “Transport Order Controller”, permite a los viajeros transportar

una orden. Para ello, recibe llamadas API de la Web Application y se comunica con la
Database para leer y escribir los datos necesarios.
El segundo controlador, “Product Controller”, permite a los compradores visualizar los

productos de la Store. Para ello, recibe llamadas API de la Web Application y se
comunica con la Database para leer y escribir los datos necesarios.
El tercer controlador, “Pay Controller”, permite a los compradores realizar pagos para
los servicios de compra y transporte. Para ello, recibe llamadas API de la Web
Application y se comunica con la Database para leer y escribir los datos necesarios.
El cuarto controlador, “Update Personal Information Controller”, permite a los usuarios

actualizar su información personal. Para ello, recibe llamadas API de la Web
Application y se comunica con la Database para leer y escribir los datos necesarios.
El quinto controlador, “Generate Order Controller”, permite a los compradores generar

una orden de compra de producto. Para ello, recibe llamadas API de la Web Application
y se comunica con la Database para leer y escribir los datos necesarios.
El sexto controlador, “Sign In Controller”, permite a los usuarios autenticarse para

iniciar sesión en el sistema. Para ello, recibe llamadas API de la Web Application y
utiliza al componente “Security Component”, el cual se comunica con la Database para
leer y escribir los datos necesarios.
El séptimo controlador, “Reset Password Controller”, permite a los usuarios restablecer

su contraseña con un link para iniciar sesión en el sistema. Para ello, recibe llamadas
API de la Web Application y utiliza al componente “Security Component”, el cual se
comunica con la Database para leer y escribir los datos necesarios. Además, utiliza al
componente “E-mail Component” que se encarga de enviar e-mails a los usuarios
utilizando el software externo “E-mail System” de Microsoft Exchange.
El componente “Security Component” provee la funcionalidad relacionada a la

autenticación y cambio de contraseñas aplicando una capa de seguridad hash para la
validación. Es usado por los controladores “Sign In Controller” y “Reset Password
Controller” y se comunica con la Database para leer y escribir.
Finalmente, el componente “E-mail Component” se encarga de enviar e-mails a los
usuarios respectivos utilizando el software externo “E-mail System”. Es utilizado por el
controlador “Reset Password Controller”.
Link: https://drive.google.com/file/d/1PYyeJrQUM7cDY-J70DmECXdQgycUooCT/
view?usp=sharing
4.7. Software Object-Oriented Design
4.7.1. Class Diagrams
En el presente diagrama de clases se detalla como interactúan las distintas clases del
sistema.
Enlace: https://lucid.app/lucidchart/ab27b295-a676-4ecd-8b30-1bc237c57088/edit?
viewport_loc=948%2C1194%2C3328%2C1598%2CHWEp-vi-
RSFO&invitationId=inv_bcbe86a5-0efc-43e3-80a4-f8e104aa6372#
4.7.2. Class Dictionary

Item Clase que contiene la informacion del Item a ordenar
Clase que contiene la informacion el nombre del item a
Name ordenar
Clase que contiene la informacion del precio del item a
Price ordenar
URL Clase que contiene la informacion del URL del Item
Order Clase que contiene la informacion de la orden generada
Puchaser Clase que contiene la informacion de la compra generada
Clase que contiene la informacion de fecha de inicio del
OrderTime proceso de la orden
Clase que contiene la informacion de la fecha generada de la
OrderDate orden
Clase que contiene la infomacion de la fecha de entrega de la
Delivered orden
Name Clase que contiene la informacion del nombre del usuario
LastName Clase que contiene la informacion del apellido del usuario
Coupon Clase que contiene la informacion del identificador del cupon

Adress Clase que contiene la informacion de la direccion del usuario
Email Clase que contiene la informacion del email
City Clase que contiene la informacion del nombre de la ciudad
State Clase que contiene la informacion del nombre del estado
Country Clase que contiene la informacion del nombre del pais
Clase que contiene la informacion del nombre de la calle
StreetName registrada
Clase que contiene la informacion del codigo postal de la
ZipCode ciudad
Clase que contiene la informacion del identificador registrado
Traveler del viajero
Clase que contiene la informacion del nombre registrado del
Name viajero
Clase que contiene la informacion del apellido registrado del
LastName viajero
Clase que contiene el identificador del viaje generado por el
Trip viajero
Clase que contiene la informacion del email registrado por el
Email viajero
Clase que contiene la informacion del identificador de la
TravelerReview review registrada
Review Clase que contiene la informacion de la review registrada
CoupunName Clase que contiene la informacion del nombre del cupon
DiscountAmountClase que contiene la informacion del descuento del cupo
Description Clase que contiene la informacion del cupon
Clase que contiene la informacion del identificador del viaje
Trip registrado
Clase que contiene la informacion de la descripcion del viaje
TripStopid registrado
Clase que contiene la informacion del costo del viaje
TravelerPaymentregistrado
Clase que contiene la informacion del origen del viaje
Origin registrado
Clase que contiene la informacion del destino del viaje
Destination registrado
Clase que contiene la informacion de la ciudad del viaje
CityName registrado
Country Clase que contiene la informacion del pais del viaje registrado
TripUpdate Clase encargada de la actualizacion del viaje registrado
Clase que contiene la informacion de la review registrada por
Review el viajero
Clase que registra el identificador del pago que se le
PaymentForTrip entregara al viajero
Clase encargada de registrar la informacion del pago completo
Subtotal de la orden generada
Clase encargada de reflejar la comision ganada por parte del
Commision viajero de la orden generada
4.8. Database Design
4.8.1. Database Diagram
Enlace del diagrama de Base de Datos en Lucichart

Entidades de la base de datos
Purchaser:
Esta entidad representa a uno de nuestros segmentos objetivos: el usuario comprador.

Algunos de los atributos más importantes que identificamos son los siguientes:
- Name
- LastName
- Email
- AddressId
Traveler
Esta entidad representa nuestro segundo segmento objetivo: el usuario viajero. Los
atributos que son convenientes almacenar son:
- Name
- LastName
- TripId
- Email
Address
Esta entidad representa la dirección del Purchaser. Y va a estar unidad a esta entidad por
medio de una tabla puente, que unirá a los usuarios con sus respectivas direcciones. Los
purchasers pueden tener más de 1 dirección a la que quieran enviar su orden, así como,
puede ser que 2 purchasers tengan la misma dirección (los diferentes miembros de una
familia, por ejemplo). Los atributos que le asignamos son:
- City
- State
- Country
- StreetName
- ZIPCode
Order
La entidad Order une al Purchaser con el Traveler. Algunas de los atributos que
almacenamos son:
- PurchaserId
- TravelerId
- OrderTime
- OrderDate
- Delivered
Coupon
Esta entidad está directamente unida con el Purchaser, ya que esto nos permitirá saber
que Purchasers ya han usado un cupón. Sus atributos son:
- Coupon Name
- DiscountAmount
- Description
Trip
Esta entidad nos permitirá tener datos acerca del viaje del Traveler. Nos servirá como
una tabla puente con TripUpdates y TripStop. Sus atributos son:
- TravelerId
- TripStopId
- TripPaymentId
- Origin
- Destination
TripUpdates
En esta entidad almacenaremos todas las actualizaciones que el Traveler envíe al

Purchaser para que pueda realizar el seguimiento de su orden. Sus atributos son:
- TripId
- Comments
TravelerPayment
En esta entidad, se almacenará el costo detallado del Traveler, en base a la comisión del
viajero y la dificultad del viaje realizado. Sus atributos son:
- Subtotal
- Comission
- CouponId
CHAPTE
5
PRODUCT IMPLEMENTATION, R
VALIDATION
& DEPLOYMENT
5.
5.1. Software Configuration Management
A continuación, se presentará un repositorio central y organizado que servirá como guía
para el desarrollo enfocado y consistente de nuestra solución.
5.1.1. Software Development Environment Configuration.

En esta sección se incluye los links de las aplicaciones, productos de software realizadas
durante el ciclo del proyecto en los programas que se utilizaron.
Para ello se clasificará en las siguientes secciones:
 Project Management
 Requirements Management
 Product UX/UI Design
 Software Development
 Software Testing
 Software Deployment
 Software Documentation
Y clasificar los elementos de las secciones si es ruta de referencia (para software

basado en modelos SaaS) o ruta de descarga (para productos que se ejecutan en el
computador del miembro del equipo) de cada uno de los productos de software.
Project Management
Es la disciplina basada en la gestión de los proyectos, la cual tiene como objetivo

principal mejorar los procesos y su entorno para alcanzar los resultados esperados.
 Trello: Es una herramienta visual que permite gestionar cualquier tipo de
proyecto y el flujo de trabajo que el equipo desarrollador seguirá para
implementar correctamente las tareas de código para el Landing Page y el web
Application.
https://trello.com/es
Requirements Management
Es el proceso de garantizar que una organización documente verifique y satisfaga las

necesidades, expectativas de sus clientes con las partes interesadas internas o
externas.
 Pivotal Tracker: Esta herramienta se define como una plataforma en la que se

realiza la gestión de User Stories, agrupándoles en Epics y clasificando su
presencia en el programa, por puntaje. Se usó porque permite que cada miembro
del equipo comparte la misma vista en tiempo real de lo que está sucediendo con
cada proyecto, ya sea aportando con diferentes secciones o corrigiendo el flujo
del proyecto. https://www.pivotaltracker.com/n/projects/2590166
Product UX/UI Design
Esta herramienta permite desarrollar el modelo en nuestro producto de manera digital y

forme parte de la vida del consumidor. En este caso realizar un modelo de sitio web
para computadoras y celulares.
 UXPressia: es una herramienta en línea para el mapeo de la trayectoria del

cliente que crea mapas de impacto y personas. Sus herramientas nos permitieron
establecer las bases del modelado de User Persona, Empathy Map y Journey Map.
https://uxpressia.com/
 MIRO: es una pizarra digital colaborativa en línea, que puede ser usada para la
investigación, la ideación, la creación de lluvias de ideas, mapas mentales y una
variedad de otras actividades colaborativas.
https://miro.com/app/dashboard/
 Figma: es una herramienta de prototipo web y editor de gráficos vectorial, que, a

diferencia de las otras herramientas, se aloja en la web, permitiendo establecer los
modelos para versión en Web Browser y Mobile Browser.
https://www.figma.com/design/
 Lucid Chart: es una herramienta de diagramación basada en la web, que permite
a los usuarios colaborar y trabajar juntos en tiempo real, creando diseños UML,
mapas mentales, prototipos de software y muchos otros tipos de diagrama.
https://lucid.app/documents#/dashboard
 Structurizr : es una herramienta de diseño que soporta el modelo C4, para

visualizar la arquitectura de software de nuestra solución.
https://structurizr.com/
Software Development
Es una estructura aplicada al desarrollo de un producto de software. Se utiliza para el

establecimiento de un proceso para el desarrollo de software, cada uno de los cuales
describe un enfoque diferente para diferentes actividades que tienen lugar durante el
proceso.
 Github: Es un repositorio comunitario cuya función es almacenar los avances de

un proyecto elaborado por un grupo de personas.
https://github.com/MIRAI-Open-Source-SW52-Grupo-3
 Web Storm: Es un entorno de JetBrains, empresa desarrolladora de Software,
orientado en el desarrollo web en JavaScript. Este nos ofrece facilidad en probar
nuestro entorno web en navegadores como Google. Para el proyecto se
implementará la ayuda de los lenguajes HTML, CSS y JavaScript.
https://www.jetbrains.com/webstorm/promo/?
source=google&medium=cpc&campaign=9641686239&term=webstorm&gclid=
CjwKCAjwv-GUBhAzEiwASUMm4ncU-
aP3HPxUWVYTPMthApgSMowOvvfEAoJMFvwf1O_gQdv0HtWOrhoCdacQA
vD_BwE
 Visual Studio Code: Es un editor potente que brinda extensiones que nos
permiten personalizar y agregar funcionalidades para que la función del
desarrollador sea más eficiente. Asimismo, se empleará para poder construir el
backend de nuestro web Applications.
https://code.visualstudio.com/
 HTML: Es un lenguaje que sirve como desarrollador de plataformas web que
trabaja con hipertextos, que enlace a otros documentos. Este lenguaje ofrece
herramientas para el diseño del sitio web. Asimismo, la disponibilidad de trabajar
HTML junto con CSS y JavaScript. Este lenguaje será utilizado en el presente
proyecto para implementar la documentación de la página web.
https://www.jetbrains.com/help/webstorm/editing-html-files.html
 CSS: Es un lenguaje de diseño para el entorno web. Permite elaborar el interfaz
de usuario diseñada anteriormente, agregando colores, tamaños entre otros
elementos. Además, se puede diseñar un estilo en CSS y compartirlo en el web
elaborado en HTML. Este lenguaje se utilizará para la implementación del diseño
de nuestra plataforma web.
https://www.jetbrains.com/help/webstorm/style-sheets.html#ws_css_completion
 JavaScript: Es un lenguaje de programación que es analizado por otros
programas. Este trabaja en POO (programación orientada en objetos) para
prototipos sin implementación con clases. Este programa permite realizar
dinámicas para el usuario a través de la lógica de la programación. Se utilizará
para la elaboración de las dinámicas de la plataforma web.
https://www.jetbrains.com/help/webstorm/javascript-specific-guidelines.html
 Java: Es un lenguaje de programación que es analizado por otros programas. Este
es ampliamente utilizado para codificar aplicaciones web. Este programa permite
realizar dinámicas para el usuario a través de la lógica de la programación. Se
utilizará para la elaboración de las dinámicas de la plataforma web.
https://www.java.com/es/download/ie_manual.jsp
 TypeScript: Es un superset de JavaScript. Este lenguaje nos permite aplicar

programas de javaScript, pero cabe resaltar que no funciona al revés. Su principal
funcionalidad es que pone a disposición del desarrollador librerías y frameworks
que existen para JavaScript.
https://www.typescriptlang.org/
 Angular Material: Es modulo construido por Angular, para implementar
componentes Angular con un diseño basado en Material Design.
https://material.angular.io/
Software Testing
Es el acto de examinar los artefactos y el comportamiento del software bajo prueba

mediante validación y verificación.
 Lenguaje Gherkins: Es un DSL o Lenguaje Específico de Dominio (Domain-

Specific Languaje), es decir, un lenguaje que está creado para resolver un
problema. Además de ser interpretado en código, se puede agregar los users
stories del programa con sus respectivas partes: Feature, Scenario, Example,
Scenario Outline, Given, When, Then y And.
Software Deployment
Github Pages: Servicio de Github que nos permitió alojar nuestra Landing page y nos
permitirá alojar nuestro web applications.
https://pages.github.com/
https://github.com/
Netlify: Servicio de Netlify que nos permite alojar nuestro sitio web con
implementación HTTP.
https://www.netlify.com/
Software Documentation
Es un tipo de texto escrito o ilustración que acompaña al software de computadora o

está incrustado en el código fuente. La documentación explica cómo funciona el
software o cómo usarlo.
 OpenAPI Specification vía Swagger: Es una especificación para archivos de

interfaz legibles por máquina para describir, producir y visualizar servicios web
RESTful.
https://swagger.io/specification/
5.1.2. Source Code Management.
A continuación, se presenta la gestión de código fuente o como es conocido por sus
siglas en ingles SCM (Source Code Management). Su función principal es realizar un
seguimiento de las modificaciones que el equipo realizara a lo largo del desarrollo de
sus proyectos en los repositorios de código fuente. Se empleará como un sistema de
control de versiones que permite dar seguimiento a los cambios que cada integrante o
desarrollador realice en el proyecto. Asimismo, cabe resaltar que para el sistema de
control de versiones emplearemos GitHub.
URL de la Organización: https://github.com/MIRAI-Open-Source-SW52-Grupo-3
URL del Repositorio del Landing Page: https://github.com/MIRAI-Open-Source-SW52-

Grupo-3/Landing-Page-Import-It
URL del Repositorio de Web Services: Por el momento el equipo no ha creado un

repositorio, puesto que no comenzamos con la implementación
URL del Repositorio de Frontend Web Applications: https://github.com/MIRAI-Open-

Source-SW52-Grupo-3/Import_It_Web_Application
URL del Repositorio de las pruebas de aceptación: https://github.com/MIRAI-Open-

Source-SW52-Grupo-3/Acceptance-Tests
GitFlow
Es el modelo alternativo de creación de ramas en Git que en los últimos años se ha

vuelto una herramienta indispensable para muchos desarrolladores. Este flujo de trabajo
de control de versiones utiliza ramas y fue publicado y popularizado por Vincent
Driessen. Su principal función es ayudar en la organización de la versión de un código,
permitiendo la creación de nuevos Features y Hotfixes de manera organizada.
Como se mencionó anteriormente, GitFlow trabaja con branches o ramas. A
continuación, se muestran las ramas que se emplearan en el flujo de trabajo de nuestro
proyecto.
 Main Branches
o Master: es la rama principal, a partir de ella se recorrerán todas las ramas y
contendrá la última versión y las anteriores creadas por los desarrolladores.
Almacenara el historial de publicación oficial.
o Develop: Esta rama puede ser creada a partir de la master Branch, contara
con todos los Features estables. Esto significa que a través de esta rama el
equipo podrá integrar las funciones.
 Support Branches
A diferencia de las ramas principales, estas branches tienen un tiempo de vida
limitado, ya que se eliminar al realizar el merge con sus ramas primarias.
o Feature:
 Se ramifica de: develop
 Debe fusionarse de nuevo en: develop
Se emplean para desarrollar las nuevas funciones que se integraran en

una versión siguiente. Cabe resaltar, que esta rama existe mientras este
en proceso de desarrollo. Sin embargo, cuando el desarrollador culmine
con esa función, se fusionará nuevamente a develop.
o Realease:
 Se ramifica de: develop
 Debe fusionarse de nuevo en: develop / master
Son aquellas que admiten la preparación de una nueva versión de

producción. A través de esta rama, se permite corregir errores menores
que surgieron en la etapa de desarrollo y preparar metadatos para su
lanzamiento. Esto último genera que la develop Branch se autoriza para
recibir nuevas funciones para la próxima versión, pues se generara
cuando se acerque una fecha de publicación determinada.
o Hotfix
 Se ramifica de: master
 Debe fusionarse de nuevo en: develop y master
Estas ramas son muy similares a las reléase branches, ya que también
están destinadas para una nueva versión de producción, pero con la
diferencia que se ramifican de master y no de develop. Son llamadas
como ramas de mantenimiento, corrección o hotfix. Su principal
función, es reparar rápidamente las publicaciones de producción. Al
terminar la corrección, debe fusionarse con master y esta debe
etiquetarse con un nuevo número de versión.
Principales motivos por los que el equipo empleara GitFlow.

 Este flujo de trabajo es ideal para el equipo, puesto que nuestro
proyecto se basa en publicaciones en un determinado sprint.
 Esta centralizado como subversión (SVN) y descentralizado, que
permite que el equipo trabaje individualmente. Pues no todos
tienen el mismo horario. Sin embargo, todos deben mantener las
actualizaciones en el repositorio central en GitHub.
Convenciones para nombrar los Features, reléase y hotfix branches:
Feature Branch: feature/name
Example:
1. feature/welcome,
2. feature/about,
3. feature/myfeature
Antes de mostrar las convenciones para nombrar los reléase and hotfix branches. We
have to mostrar cómo es que funciona el Semantic Versioning Specification.
Este es un sistema de versiones, cuyo uso ha ido aumentando con el transcurso del
tiempo por los desarrolladores. Con ello, developers pueden visualizar la extensión de
los cambios en el código fuente del proyecto.
Inicialmente, la versión se basa de MAJOR.MINOR.PATCH (X.Y.Z). Asimismo, para
comenzar a usar este sistema de versiones debemos declarar una API publica precisa y
comprensible. Esta forma debe aumentar numéricamente según lo desarrollado por el
equipo de software.
El proyecto inicia su desarrollo con la versión 0.y.z, luego pasara a ser 1.0.0 cuando se
defina la API pública. Siguientemente, se seguirán los criterios mostrados a
continuación para incrementar la versión.
Patch version (Z), debe incrementarse si solo se introducen correcciones de errores

compatibles con versiones anteriores.
Minor version (Y), debe incrementarse si el equipo integra una nueva funcionalidad
compatible con versiones anteriores en la API pública. Si alguna funcionalidad es
obsoleta o si se introducen nuevas funcionalidades en el código privado.
*Si se incrementa, la version del parche debe volver a 0.
Major version (X), debe incrementarse si se generan cambios deslindados a versiones

anteriores en la API pública.
*Si se incrementa, Patch version y la minor version debe volver a 0.
Existen etiquetas adicionales para los metadatos de compilación.
Ejemplo: MAJOR.MINOR. PATCH (X.Y.Z)
1. 1.9.0
2. 1.10.0
3. 2.0.0
4. 1.0.0-alfa
Release Branch: release-* (* se cambia por la versión semántica).
Ejemplo: release-1.2.0
Hotfix Branch: hotfix-* (* se cambia por la versión semántica).
Ejemplo: hotfix-1.2.1
Conventional Commits
El commit debe estructurarse de la siguiente manera:

<type>[optional scope]: <description>
[optional body]
[optional footer(s)]
Cabe recalcar que debe estar en “lower case”.
Type:
feat: Cuando se agrega un nuevo feature.
fix: cuando corriges un error.
build: cuando afectan los componentes de compilación como la herramienta de

compilación, las dependencias o la version del proyecto.
chore: modificaciones privadas del código.
docs: commits que afectan solo a la documentación.
refractor: commits que reescriben o reestructura el código, pero no cambia el

comportamiento.
perf: commits especiales que mejoran el rendimiento.
style: commits que no afectan el programa. (espacios en blanco, formato, puntos o

comas faltantes).
test: commits que agregan pruebas.
Scope
Proporciona información contextual adicional, si bien es opcional, es bueno colocarlo

para que el desarrollador lea un commit más específico.
<description>
Es una parte obligatoria del formato de los commits, siempre debemos usar imperativo y
no escribir en mayúsculas.
[optional body]
Debe incluirse la motivación para el cambio y contrastarse con el comportamiento
anterior. Es opcional y si lo usa debe usar el imperativo y es ideal para mencionar los
identificadores de problemas y sus relaciones.
[optional footer(s)]
Cualquier información sobre cambios importantes. Es opcional, puede incluir referencia

al problema por su id y en esta sección se incluyen los BREAKING CHANGES:
seguido de un espacio o dos satos de línea.
Ejemplos:
1. feat(welcome): add welcome section

2. build(release): bump version to 1.0.0
3. style: remove empty line
4. feat(sign up): add the button to sign up
5. feat ! : send an-email to the costumer when product is shipped
6. feat: remove ticket list endpoint
refers to JIRA-1337
BREAKING CHANGES: ticket enpoints no longer supports list all entites.
5.1.3. Source Code Style Guide & Conventions
En esta sección se mostrarán las pautas, convenciones, estilos y principios que se
utilizarán para cada uno de los lenguajes que se emplearán en la creación de nuestra
aplicación, DocSeeker. La práctica de este conjunto de reglas es de suma importancia,
ya que estas tienen el propósito de conservar la calidad estructural del software, dar una
mayor legibilidad al código fuente y facilitar el mantenimiento del código.
Dado que en este proyecto se utilizarán HTML, CSS y JavaScript para la codificación
de la plataforma web y Gherkins para el proceso de prueba del programa; a
continuación, se nombrarán y describirán las reglas y recomendaciones generales que
tomaremos en cuenta al momento de usarlos.
Nomenclatura General
A los nombres de las variables, objetos, elementos y funciones que se utilicen, se
les designarán términos en inglés que estén relacionados y puedan describir a lo
que están representando. No se usarán mayúsculas porque de acuerdo con
W3Schools (s.f.), la mezcla de estas con las letras minúsculas luce mal y, además,
el uso exclusivo de minúsculas otorga mayor legibilidad al código.
Ejemplo de nomenclatura estándar según Google (s.f.):

.gallery {}
.video {}
.login {}
Sangría
En el momento de utilizar HTML, CSS y/o JavaScript se aplicará un espaciado
antes de cada línea que se encuentre dentro de un bloque. Este espacio debe ser de
dos y según W3Schools (s.f.) no se debe hacer uso de la tecla “Tabulación”.
Ejemplo de nomenclatura estándar de la sangría en HTML según W3Schools

(s.f.):
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</table>
Ejemplo de nomenclatura estándar de la sangría en CSS según W3Schools (s.f.):
html {
background: #fff;
color: #404;
}
Ejemplo de nomenclatura estándar de la sangría en JavaScript según W3Schools

(s.f.):
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
Seguidamente, explicaremos las reglas específicas que se necesitan en cada lenguaje

para entender el código de nuestro programa, DocSeeker.
HTML
Llamado así por las siglas del nombre en inglés HyperText Markup Language.
HTML es un lenguaje de marcado que define la estructura de una página web.
Además, cuenta con funciones capaces de determinar el comportamiento de
distintas partes del contenido de la página, tales como el cambiar el tamaño del
texto, aplicar cursiva, entre otros. Nosotros emplearemos HTML5, y las
características y pautas a seguir para hacer uso de este lenguaje son las siguientes:
 Declare Document Type

El tipo de documento debe declararse en la primera línea de código. De
acuerdo con Google (s.f.) HTML5 es de preferencia la mejor sintaxis para
todo documento HTML, para declararla sólo es necesario copiar lo
siguiente:
<!DOCTYPE html>
 Blank Lines
Cada vez que, luego de un bloque, lista o tabla de gran longitud se inicie
uno nuevo, se debe saltar la siguiente línea y dejarla en blanco para brindar
mayor legibilidad y amenidad, así manifiesta W3Schools (s.f.).
Ejemplo:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest
population centers in Europe.</p>
</body>
 Quote Attribute Values
Para los valores de los atributos se utilizan comillas dobles alrededor. De
acuerdo con W3Schools (s.f.) Aunque esta característica no sea obligatoria,
le da más legibilidad al código y es muy frecuente entre los
desarrolladores.
Ejemplo:
<table class="striped">
 Multimedia Fallback
Asegurar un acceso alterno a los objetos multimedia por si este fallara al
cargar. De la misma forma, según la W3Schools (s.f.), es recomendable
añadir las dimensiones del elemento porque así los navegadores guardan el
espacio que utilizará antes de comenzar a cargarlo.
Ejemplo:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
 Never Skip the <tittle> Element
El elemento <tittle> permite que las páginas aparezcan en la lista de
resultados al momento de buscar en un navegador web. Asimismo, esta es
la que da el nombre de la página si se la añade a favoritos.
Ejemplo:
<title>HTML Style Guide and Coding Conventions</title>
 HTML Line-Wrapping
El hecho de que en un documento HTML no haya un límite de palabras por
línea, no quiere decir que sea recomendable generar líneas muy extensas de
código. Al contrario, esto dificulta la lectura del código. Para pasar a la
siguiente línea es necesario utilizar al menos cuatro espacios para
diferenciar de elementos hijos.
Ejemplo según Google (s.f.):

<button mat-icon-button color="primary" class="menu-button"
(click)= "openMenu()">
<mat-icon>menu</mat-icon>
</button>
CSS
Llamado así por las siglas del nombre en inglés Cascading Style Sheets. CSS es
un lenguaje de marcado que se centra en definir y mejorar la presentación de un
documento que se basa en HTML. Las pautas que a seguir al momento de usar
CSS son las siguientes:
 Shorthand Properties
Hay que utilizar abreviación de propiedades, declarar los campos de los
elementos en la menor cantidad de líneas posibles. De acuerdo con Google
(s.f.), esto aumenta la eficacia del código y lo hace más entendible. De la
misma manera, debemos evitar el colocar las unidades luego del valor cero.
Ejemplo:
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
 Declaration Stops
Hay que colocar un punto y coma luego de cada declaración al igual que
gran parte de lenguajes de programación. Según Google (s.f.). esta
característica ayuda a que haya más consistencia en el código
Ejemplo:
html {
background: #fff;
color: #404;
}
 Property Name Stops
Debe existir un espacio entre los dos puntos que están luego del nombre de
una propiedad y el valor ingresado. Siempre solo un espacio luego de los
dos puntos, mas no antes.
Ejemplo estándar según Google (s.f.):

html {
background: #fff;
color: #404;
}
 Declaration Block Separation

El uso de un separador de un espacio es necesario luego del nombre de un
elemento seleccionado y la llave que inicia un bloque. Además, esta llave
tiene que estar en la misma línea.

html {
background: #fff;
color: #404;
}
 CSS Quotation Marks
No se deben emplear las comillas dobles (“”), solo están permitidas las
simples (‘’) para el uso exclusivo de selectores de atributos y valores de
propiedades.

html {
font-family: ‘open sans’, arial, sans-serif;
}
JavaScript
Es un lenguaje de programación que otorga la posibilidad de indicar exactamente
las acciones que debe ejecutar el navegador, indicando el orden de las tareas y el
número de veces que se realizarán. Las indicaciones para usar JavaScript en
nuestro proyecto son las siguientes:
 Spaces around operators

Se debe colocar un espacio alrededor de cada operador matemático que se
introduzca en el código. Esto también aplica a las comas.
Ejemplo estándar según W3Schools (s.f.):

let x = y + z;
const myArray = ["Volvo", "Saab", "Fiat"];
 Simple Statement’s End

Una indicación simple debe terminar en un punto y coma, esto se cumple
también en muchos otros lenguajes de programación.
Ejemplo estándar según W3Schools (s.f.):

let x = y + z;
const myArray = ["Volvo", "Saab", "Fiat"];
 Beginning and End of a Function
Un bloque de función debe contar con una llave al final de la primera línea,
para que el cierre de esta se encuentre sola en la última. Una función
termina en llave y no en punto y coma. Lo mismo aplica para condicionales
o bucles.
Ejemplo estándar según W3Schhol (s.f):

function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
 Object Rules
Para la construcción de un objeto, al igual que en una función, se comienza
con una llave al final de la primera línea, pero, esta vez, la llave de cierre
debe estar acompañada de un punto y coma. Para las propiedades, se
colocan dos puntos y un espacio para indicar su valor, el cual debe estar
entre comillas dobles si este es un string.
Ejemplo estándar según W3School (s.f.):

const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
Gherkin
Es un Lenguaje Específico de Dominio (DSL por sus siglas en inglés) que tiene
como objetivo la resolución de un problema en específico. Para ello, se generan
casos para la validación de la característica en distintos escenarios. Gherkin
cuenta con múltiples elementos, de los cuales, los más famosos y, además, más
utilizados son Feature, Scenario, Example, Scenario, Given, When y Then. Las
indicaciones para tomar en cuenta en el uso de Gherkin en nuestro código son las
siguientes.
 Discernible Given-When-Then Blocks

Aplicar sangría para los elementos que indiquen pasos a seguir del
escenario. En el caso de And, aplicar dos veces. De acuerdo con Keiblinger
(2021), Esto ayuda a detectar rápidamente las partes que forman un
escenario.
Ejemplo:
Scenario: Ingreso los requisitos con claridad
Given que en el formulario de ingreso de oferta laboral
When escribo claramente los requisitos
Then se mostrará el mensaje
And mi oferta solo aparecerá a quienes cumplan con estos
And se habilita la opción
 Step with Tables

Según Keiblinger (2021), para las partes del escenario que necesiten la
introducción de valores, hay que agregar una tabla o crear un propio
formulario que recree esa parte del escenario. Antes de esta representación
se deben colocar dos puntos.
Ejemplo:
Then se mostrará el mensaje:
| mensaje |
| Se completaron los requisitos adecuadamente |
 Reducing Noise
Con el fin de reducir la acumulación de demasiadas líneas de código en un
escenario, se deben colocar valores por defecto dentro de los pasos para los
campos que no sean muy relevantes para este. Los valores “estándar” que
coloquemos, deben ir entre comillas simples. De acuerdo con Keiblinger
(2021), esta acción reduce considerablemente el tamaño del código.
Ejemplo:
When escribo claramente los requisitos ‘dominio en C’
 Scenarios Separator
Para la separación de dos escenarios, se debe insertar un salto de línea y,
según Keiblinger (2021), de ser posible, hay que agregar una línea de
comentario para facilitar la visualización de estos. De esta forma se halla
rápidamente el inicio y fin de un escenario.
Ejemplo:
#----------------------------------------------------------------------------------
-
#----------------------------------------------------------------------------------
-
TypeScript
El equipo usara los siguientes estilos para determinadas categorías:
UpperCamelCase: clase/interfaz/tipo/enum/decorador/parámetros de tipo
lowerCamelCase: variable / parámetro / función / método / propiedad / alias de
módulo
CONSTANT_CASE: valores constantes globales, incluidos los valores de
enumeración
*Nunca se utilizan identificadores privados.
 Variables y Funciones
Mala Nomenclatura:
 let RandomName: string = ‘Juan’;
 function RandomFunction() {}
Buena Nomenclatura:
 let randomName: string = ‘Juan’;
 function randomFunction() {}
 Clases
Mala Nomenclatura:
 class view{}
Buena Nomenclatura:
 class View{}
Propiedades y métodos de la clase

Mala Nomenclatura:
 class test{
Name: string;
GetFullName(){}
}
Buena Nomenclatura:
 class test{
name: string;
getFullName(){}
}
 Interfaces
No emplear el prefijo I para nombrar interfaces
Mala Nomenclatura:
 interface IPerson{
Name:string;
}
Buena Nomenclatura:
 interface Person{
name:string;
}
 Enums
No emplear el prefijo I para nombrar interfaces
Mala Nomenclatura:
 enum clientType{
person = “p”;
business = “b”;
}
Buena Nomenclatura:
 enum ClientType{
Person = “P”;
Age = “A”;
}
 Visibility
Restringir la visibilidad de propiedades, métodos y tipos ayudaran a
mantener el código desacoplado.
Mala Nomenclatura:
 enum clientType{
person = “p”;
business = “b”;
}
Buena Nomenclatura:
 enum ClientType{
Person = “P”;
Age = “A”;
}
 Getters and Setters
Se pueden utilizar los getters y setters para los miembros de la clase.
También son útiles como medio para restringir la visibilidad de los
detalles de implementación internos, aplicando la Programación
Orientada a Objetos;
Nomenclatura:
 Class Foo {
constructor(private readonly someService:SomeService)
{}
get someMember():string{
return this.someService.someVariable;
}
set someMember(newValue:string){
this.someService.someVariable = newValue;
}
 Variables
Uso de const o let para declarar variables. Utilice const de forma
predeterminada, a menos que sea necesario reasignar una variable.
No usar var para declarar variables.
Nomenclatura:
 const foo = otherValue; // Use if "foo" never changes.
 let bar = someValue; // Use if "bar" is ever assigned
into later on.
 Imports Nomenclatura
Module: import * as foo from '...';
Destructuring: import {SomeThing} from '...';
Default: import SomeThing from '...';
Side-effect: import '...'; Only to import libraries for their
side-effects on load (such as custom elements)
Java
 Identificadores
Con este nombre, se identifica una variable, método, función o clase. Para color
un nombre, este debe ser significativo, de modo que el código sea lo más legible
posible.
Tipo de identificador Convención Ejemplo

nombre de una clase Comienza por letra mayúscula String, rectángulo, CinematicaApplet
nombre de función comienza con letra minúscula calcularArea, getValue, setColor
nombre de variable comienza por letra minúscula area, color, appletSize
nombre de constante En letras mayúsculas PI, MAX_ANCHO
  Comentarios
Con los comentarios, se añade al código cierta explicación de la funcionalidad,
para que el trabajo en equipo sea más entendible y eficiente.
Una sola línea: //This is a function to get the fullname of the person.
Varias lines de código: /* ……. */
 Variables
Es un nombre en la que se guarda el valor asignado en la memoria del ordenador.
Todas las variables se deben declarar antes de usarlas.
Tipos: De instancia.
De clase.
Locales.
Ejemplo 1:
class Circulo{
static final double PI=3.1416; //variable de clase
double radio; //variable de instancia
}
Ejemplo 2:
class Circulo{
double calcularArea(){
double area=PI*radio*radio; //area es una
variable local para la presente función de la clase Circulo.
return area;
}
}
Delante de cada variable, puede haber un tipo de variable los cuales pueden ser
los siguientes:
 Un tipo de dato primitivo

 El nombre de una clase
 Un array
Ejemplo: int x=0;
int[] datos;
Cabe resaltar, que también usaremos valores constantes. Cuando

declaremos una variable de tipo final, se inicializa y si se intenta
modificarla mostrara error.
Ejemplo: final double PI=3.141592653589793;
 Palabras reservadas
o Tipos de datos: boolean, float, double, int, char
o Sentencias condicionales: if, else, switch
o Sentencias iterativas: for, do, while continue
o Tratamiento de las excepciones: try, catch, finally, throw
o Estructura de datos: class, interface, implements, extends
o Modificadores y control de acceso: public, private, protected.
o Otras: super, null, this.
 Override
Siempre usado, se marca con la anotación @Override, siempre que sea legal. Esto
incluye un método de clase que anula un método de superclase. Se da cuando
implementamos un método de interfaz.
 Método Static
Un método static en Java es un método que pertenece a la clase y no al objeto.
Un método static solo puede acceder a variables o tipos de datos declarados
como static.
public class SingletonTest {

private static SingletonTest instance = null;

protected SingletonTest() {
}

public static SingletonTest getInstance() {
if (instance == null) {
instance = new SingletonTest();
}

return instance;
}
}
5.1.4. Software Deployment Configuration.
Como ya se ha mencionado, la gestión de nuestro código fuente se realizará a través de
GitHub. Asimismo, se utilizará Github Pages para la publicación y despliegue de la
página. Cada sección del Landing Page que se ha creado deberá aparecer en el siguiente
vínculo: https://mirai-open-source-sw52-grupo-3.github.io/Landing-Page-Import-It/
public/#customer
Para el desarrollo del Landing Page de Import It se han utilizado las siguientes
herramientas:
 Html: Es el lenguaje de marcado que estructuro nuestro Landing

Page.
Evidencia: Archivos HTML, el principal es index.html donde todos los integrantes

juntaron el contenido realizado en su rama individual.
 Css: Es aquel que nos ayudó con el diseño gráfico para que el
Landing Page sea agradable e interactúale.
Evidencia: Se presenta el file styles.css, donde el grupo implemento el diseño de toda la

estructura realizada con html.
 JS: Nos ayudó a desarrollar la lógica necesaria para el Landing Page
Evidencia: Se muestra el documento main.js.

El despliegue del Landing Page de Import It no pudo ser posible sin utilizar las
siguientes tecnologías:
 Git: Sistema de control de versiones que está pensado en la

eficiencia y compatibilidad de versiones. El cual nos ayudó a trabajar
en equipo durante el desarrollo del Landing Page.
 GitHub: Plataforma de desarrollo colaborativo.
 Git Flow: Nos permitió controlar el avance de cada uno de nuestros

integrantes con respecto al desarrollo del Landing Page.
 Git Hub Pages: Servicio de Github que nos permitió alojar nuestra
Landing page.
Asimismo, se han realizado los siguientes pasos:
- Dirigirse al repositorio de la página
Dado que se ha empleado Github, debemos ir al repositorio creado en este sitio web
para publicar el Landing Page que ha desarrollado el equipo. Desde aquí, se podrá
iniciar la configuración del vínculo de la página dirigiéndonos al apartado de Settings.
- Ir a la opción de páginas
Una vez presentes la configuración del repositorio, debemos dirigirnos a la sección de

Pages. Esto se debe a que ahí se encuentran todas las opciones de configuración de
publicación de la página en un link o vínculo.
- Elección de rama y carpeta de guardado
Dentro de Pages, se debe seleccionar la rama o branch que se va a publicar en el

vínculo. De la misma manera, se tiene que elegir la carpeta donde se localizará esta
publicación a realizar. Finalmente podremos acceder a nuestra página con el link que
aparece en la parte superior de este apartado de configuración, solo se tiene que añadir
lo siguiente: public/
Siguiendo este proceso, obtuvimos el siguiente enlace: https://mirai-open-source-sw52-

grupo-3.github.io/Landing-Page-Import-It/public/
https://mirai-open-source-sw52-grupo-3.github.io/Landing-Page-Import-It/public/
#customer
Evidencia de Deployment
Se puede visualizar el link en la barra de búsqueda y que está en modo público desde un
computador x.
Se muestran las acciones realizadas en el GitHub para el lanzamiento del Landing Page.
Pasos para le Deployment del Web Application Front – end:
1. Generar la carpeta dist con el comando ng build –watch

2. Luego, entramos a Netlify y vamos a la opción de subir sitio web manualmente. Ahí
ingresaremos la carpeta dist generada y se mostrara lo siguiente:
3. Nos dirigimos a la opción change site name en la sección site details y colocamos el
nombre que deseemos. Siempre y cuando esté disponible.
4. Finalmente, podremos visualizar el link cambiado con el nombre colocado y nuestra

web Application publicada.
Siguiendo este proceso, obtuvimos el siguiente enlace: import-it.netlify.app
5.2. Landing Page, Services & Applications
Implementation
5.2.1. Sprint 1
5.2.1.1. Sprint Backlog 1
Se elaboró el cuadro con las tareas asignadas por cada integrante para este entregable
correspondiente al desarrollo de la Landing page:
14/09/2022
14/09/2022
14/09/2022
5.2.1.2. Development Evidence for Sprint Review 14/09/2022
A continuación, se muestra un registro de las ramas en el que se ha desarrollado cada

feature por cada integrante. Además, se muestra los commits realizados con su 14/09/2022
respectiva descripción:
14/09/2022
12/09/2022
SocialMed/ Feature/Footer f2bb37d4bcc9210fc399efab2a64 feat: add base

LandingPag d5808b2f3f1a HTML structure
12/09/2022
e for the footer
Commited SocialMed/ Feature/Reviews a59e563d35d025e4cef8b3577c0f fix(style): fix

Repository Branch CommitID Commit Message
on Date LandingPag 4e06d7f75f4e styles in reviews 14/09/2022
SocialMed/ Master 1c1f770874b7f6a9e306a92f45e4 Merge branch e
LandingPag 00cf3bf05a01 'feature/footer' 14/09/2022 SocialMed/ Master e035c2fd78fc3b714a99c4c51e67 Merge remote-
e into develop LandingPag f13ad4252b4a tracking branch
SocialMed/ Feature/Footer c5e7f84b7136e95dae2085cc5154 fix: changed imgs e 'origin/develop' 14/09/2022
LandingPag 8f121f83e8bd folder name to 14/09/2022 into
e 'images' feature/reviews
SocialMed/ Feature/Footer 179b2fac8fa540d582510b15bd4 fix: clean up code, SocialMed/ Feature/Reviews 913d6707dc9744f415018ec06392 fix: changed
LandingPag ec2d4f2077f53 took out borders LandingPag d56314b2e540 reviews content 14/09/2022
14/09/2022
e e
SocialMed/ Feature/Reviews 28e254ae7a3d79009d8e232a9c3 feat: added
SocialMed/ Feature/Footer c8ef4dd187e5d6f1fdd6b1b2d48 feat: added LandingPag f197b480f326d reviews section 14/09/2022
LandingPag 61c1edcfbff4e reponsiveness at e
14/09/2022
e 600px and 400px SocialMed/ Feature/Reviews 4744a4bf31a85476fea9f8b55f03 fix: changed
LandingPag 93bcab5a6fdd styles for reviews 14/09/2022
SocialMed/ Feature/Footer 35c9c828bc67017007d788c0ffef6 feat: added style e
LandingPag a801df45f83 to the invitation SocialMed/ Feature/Reviews f0387fe21bb8852bfc6670ec2272 feat(image): add
e text and 14/09/2022 LandingPag 144d4bb6ba22 images for the 14/09/2022
enhanced e reviews section
alignment SocialMed/ Feature/Reviews 229d1b117f10b8e13d926a2ebda feat(style): add
SocialMed/ Feature/Footer 8303e5f0f2359932d4917ab0afcb fix: enhanced LandingPag 3ad1bdbfdb76c global styles 13/09/2022
LandingPag e9d42d5dd53e alignment and e
14/09/2022
e added SocialMed/ Feature/Reviews 74e57e5081192e445f61b4530e9 feat(style): add
background LandingPag 1a41bd7b4c5b2 styles for the 13/09/2022
SocialMed/ Feature/Footer a469275e35faffb4ef101579b82c feat: added e reviews section
LandingPag e69553b4a578 alignment and SocialMed/ Feature/Hero 322c196f8f5967d0a0e396a81c7a fix(navbar): fix
e created an imgs 12/09/2022 LandingPag 9d5fe4720ccf navbar link for 14/09/2022
folder for the e the Hero section
scoial media SocialMed/ Feature/Hero e8d5eebac28557ce5b167c5f94b feat(navbar): add
SocialMed/ Feature/Footer f2bb37d4bcc9210fc399efab2a64 feat: add base LandingPag 82a4d3fda8122 links of navbar to 14/09/2022
LandingPag d5808b2f3f1a HTML structure e the all sections
12/09/2022
e for the footer SocialMed/ Feature/Hero 213f0120f7f3453d0798d548675b fix(styles): fix
LandingPag 351b29be38bd colors and logo 14/09/2022
SocialMed/ Feature/Hero 3a844cb0c3218f2fd96b281b0c80 feat(navbar): add
LandingPag 904a68ed1427 navbar 14/09/2022
e
SocialMed/ Feature/Hero 10d852c315318f4b7b57d0c99ec6 feat(responsive):
LandingPag 91e47d425903 add web
14/09/2022
e responsive for
section Hero
SocialMed/ Feature/Hero 425e86b3c2173895e05d9dfa69e feat(styles): add
LandingPag 806727711fd6c style for section 14/09/2022
e Hero
SocialMed/ Feature/Hero c83afc33d1435a91f534fcb2ae85 feat(Hero): add
LandingPag 27b1c0e59382 html of section
14/09/2022
e Hero and its
image
SocialMed/ Feature/Traveler 4f2ba8264bee1603c2bda2e2d11 fix(files): html
LandingPag 9f4797df8a28a and css files for 14/09/2022
e traveler section
SocialMed/ Feature/Customers 4538bb4e64e697fd6e4d177f62b fix(style): fix class
LandingPag 0170afc9a05d3 named container 14/09/2022
e
SocialMed/ Master 94ce4e1d7b9dc2a3198702ff4ce2 Merge branch
LandingPag e24a4883c400 'feature/custome 14/09/2022
e r' into develop
SocialMed/ Feature/Customers 2fcdbec98b973db6a6ada2ed075 feat(style): add
LandingPag 8e22b06b3c8f1 styles for the 14/09/2022
e customer section
SocialMed/ Feature/Customers 29960d8b48f1dd47243021fb8c50 feat(image): add
LandingPag 39750da78be2 image for the 14/09/2022
e customer section
SocialMed/ Feature/Customers ad7a7d7d8781281e5c2e3518cf3 feat(customer):
LandingPag ea8cfbb6cecad added content on
14/09/2022
e the customer
section
SocialMed/ Feature/Customers 1d22f78001212ba8a9d01aa3923c feat(customer):
LandingPag 0eaaada7f8e4 added customer 13/09/2022
e section
SocialMed/ Feature/Customers 7ad10ac18a04603e858e4609f15f feat: added css
LandingPag 8fba0f87a384 link on 13/09/2022
e index.html
SocialMed/ Feature/Customers 6cf2cae3c8a299e3c6a4fe49e76d feat: added css
LandingPag 35174f152c60 link on 13/09/2022
e index.html
SocialMed/ Feature/Customers 375475c4739c57c77c4ddf0ae655 feat: added new
LandingPag 117a15e064a3 index 12/09/2022
e
SocialMed/ Feature/Customers 368797432756c7c618cfa9120dee Initial commit
LandingPag 6b2d5c917630 12/09/2022
e
SocialMed/ Feature/Traveler 0422f16238458c5320424c96eaf2 fix: update
LandingPag 716a9cf05035 travelers 14/09/2022
e
SocialMed/ Feature/Traveler 4583d19fcf6e3123316065de31bf feat: add
LandingPag 4d9338566d98 index.html 14/09/2022
e traveler
SocialMed/ Master c7248c79e93fe5475169779af7bb erge branch
LandingPag 07fdd73a3e25 'develop' into 14/09/2022
e feature/traveler
5.2.1.3. Testing Suite Evidence for Sprint Review
Debido a que estamos en la etapa de diseño del prototipo de la aplicación web no
podemos realizar los respectivos tests. No obstante, se está evaluando qué aplicaciones
usar para realizar los test y validaciones correspondientes para desarrollar una efectiva
aplicación web y que no contenga errores.
5.2.1.4. Execution Evidence for Sprint Review

A continuación, se muestra screenshots de la landing page desarrollada y desplegada en
GitHub Pages.
Portada: Se muestra una portada con una imagen, un título y un botón call-to-action
Be a customer: Se muestra la sección Customers, en donde se explica el propósito del

cliente dentro de la aplicación
Be a Traveler: Se muestra la sección Travelers, en donde se explica el propósito del
viajero dentro de la aplicación
Reviews: Se muestra la sección Reviews, en donde se muestra algunos testimonios y

recomendaciones de clientes que han utilizado la aplicación
About us: Sección donde se muestra el video de Landing page navigation

Footer: Se muestra la sección Footer, en donde se muestra un mensaje para que el
comprador o viajero se una a nosotros, como enlaces directos a nuestras redes sociales e
información general
Screenshot de video:
Link de video de Landing page Navigation:
https://web.microsoftstream.com/video/a664f22f-baf0-4fa7-90fd-c3b34b6e68fb
Landing Page: https://mirai-open-source-sw52-grupo-3.github.io/Landing-Page-Import-

It/public/
https://mirai-open-source-sw52-grupo-3.github.io/Landing-Page-Import-It/public/
#customer
5.2.1.5. Services Documentation Evidence for Sprint Review

Como se mencionó anteriormente, debido a que estamos en la etapa de diseño del
prototipo de la aplicación web no podemos documentar la relación de los endpoints.
5.2.1.6. Software Deployment Evidence for Sprint Review

Para el deployment de la landing page se realizó mediante GitHub Pages. Para ello, se
realizó la siguiente configuración en GitHub para desplegarlo
1. Realizar configuración de GitHub Pages: En el repositorio GitHub ir a Settings y

luego a Pages
2. Configuración del deployment: Colocar la rama en donde quieres que se despliegue la
página web y poner guardar. La página te mostrará el link donde se desplegará la página
web.
Siguiendo este proceso, obtuvimos el siguiente enlace: https://mirai-open-source-sw52-
grupo-3.github.io/Landing-Page-Import-It/public/
5.2.1.7. Team Collaboration Insights during Sprint
Sprint Se utilizaron las estadísticas que te brinda GitHub para ver quiénes colaboraron
con el proyecto de la landing page con commits, tal como se muestra a continuación:
5.2.2. Sprint 2
correspondiente al desarrollo del frontend del web Application:
Sprin
t Sprint 2
User Story Work-item/Task
Estimation(Hou Assigned Statu
ID Tittle ID Tittle Description
rs) to s
Diseñar una
sección
donde el
usuario
pueda
Crear registrarse
Desarroll
una con su correo
US00 o de la TSG0 Edgar DON
sección y contraseña 4 hour
1 sección 1 Malca E
de para acceder
registro
registro a la
plataforma y
esta
información
sea
almacenada
Diseñar un
Crear pre-log in
Desarroll una welcome
o del sección donde según
US00 TSG0 Sebastian DON
proceso pre login el tipo de 2 hour
4 2 Montes E
pre-log según el usuario sea
in tipo de redirigido a
usuario su respectivo
log in
US00 Desarroll TSG0 Crear la Diseñar la 3 hour Gonzalo DON
5 o del a 3 sección sección log Barrazuet E
sección log in de in de la a
log in la plataforma
que contenga
los datos de
entrada tanto
platafor usuario y
ma contraseña
para acceder
a la
plataforma
Diseñar la
opción tanto
forgot
pasword y la
Desarroll sección de
Crear la
o de la recuperación
US00 TSG0 sección Edgar DON
sección de 3 hour
8 4 change Anco E
change contraseña
pasword
pasword donde con
datos previos
el usuario la
pueda
cambiar
Diseñar la
sección
profile de la
plataforma
Crear
Desarroll donde el
una
US00 o de la TSG0 usuario Rafael DON
entrada 2 hour
9 sección 5 pueda ver la Urquiaga E
para el
profile información
profile
registrada
previamente
al ingreso de
la plataforma
US01 Desarroll TSG0 creación Diseñar la 3 hour Rafael DON
0 o del 6 de un sección, Urquiaga E
proceso proceso opción y
Update de proceso de
profile Update actualización
de los datos
del profile y
pasword esta nueva
sea
almacenada
Diseñar la
opción y el
creación proceso de
Desarroll
de la log out para
US01 o del TSG0 Rafael DON
opción y que el 1 hour
1 proceso 7 Urquiaga E
proceso usuario
log out
log out pueda salir
de su sesión
actual
5.2.2.2. Development Evidence for Sprint Review

feature por cada integrante. Además, se muestra los commits realizados con su
Commit Commit Message Commite

Repository Branch Commit Id
Message Body d on
EdGaR-
MaLcA/
Create the initial 23/09/20
Import_It_ develop ea3f08e initial commit
project 22
Web_Applic
ation
Gonzalo-
Barrazueta/
feat:created log Created and added 24/09/20
Import_It_ login beef83b
in component 'login' component 23
Web_Applic
ation
Gonzalo-
added some HTML
Barrazueta/ feat: added
structure and a 25/09/20
Import_It_ login fe00fbd HTML
validator for the DNI 24
Web_Applic structure
input field
ation
Gonzalo- login 52a9325 feat:added added 'Forgot 25/09/20
Barrazueta/
Password section'
Import_It_
validations and password 25
Web_Applic
validator
ation
Gonzalo-
Barrazueta/
feat: added aligned items using 25/09/20
Import_It_ login 120826a
styles flexbox 26
Web_Applic
ation
Gonzalo-
Barrazueta/
feat(button): 25/09/20
Import_It_ login beef83b added login button
added button 27
Web_Applic
ation
Gonzalo-
Barrazueta/ feat: enhanced
Added styles to 25/09/20
Import_It_ login 742d1c8 alignment and
cards 28
Web_Applic spacing of cards
ation
Rafael-
Urquiaga/
feat(navbar): Added navbar to 27/09/20
Import_It_ profile 1dcbe48
add navbar profile section 29
Web_Applic
ation
Rafael-
Urquiaga/ feat(profile):
Added profile 27/09/20
Import_It_ profile c9c4623 add profile
section for users 30
Web_Applic section
ation
Rafael-
Urquiaga/ feat(style): add
Aded css styles to 27/09/20
Import_It_ profile c266739 style to profile
the profile section 31
Web_Applic section
ation
Rafael- profile 744679d feat(json): add - 27/09/20
Urquiaga/ json 32
Import_It_
Web_Applic
ation
EdGaR-
feat(register):
MaLcA/
added html Added html code for 27/09/20
Import_It_ register 89832c3
code for register the register form 33
Web_Applic
form
ation
EdGaR-
feat(styles):
MaLcA/
added styles for Added css styles for 27/09/20
Import_It_ register 25c8cf1
the register the register section 34
Web_Applic
form
ation
EdGaR- feat(register):
MaLcA/ added
Added typescript for 27/09/20
Import_It_ register d903bac typescript code
validations 35
Web_Applic for the
ation validations
EdGaR-
feat(modules):
MaLcA/ Added modules for
import modules 27/09/20
Import_It_ register 337ce1b the implementation
for the html 36
Web_Applic of the register form
section
ation
EdGaR-
feat(register):
MaLcA/ Added JSON to save
Save 28/09/20
Import_It_ register 8c6a8d4 the information of
information on 37
Web_Applic the register form
JSON
ation
larson19992
feat(login-
9/
login- screen) : add Added welcome 28/09/20
Import_It_ 81aea33
screen welcome component 38
Web_Applic
component
ation
larson19992
9/
login- feat(json): add 28/09/20
Import_It_ 57a4b2b Added json welcome
screen json welcome 39
Web_Applic
ation
edgar-anco/ change- feat(change- Added html code for 27/09/20
9343390
Import_It_ passwor password): change password 40
added html
Web_Applic
d code for change form
ation
password form
edgar-anco/ feat(styles):
change- Added css styles for
Import_It_ added styles for 27/09/20
passwor 11dd5d0 the change password
Web_Applic the change 41
d section
ation password form
feat(change-
edgar-anco/ password):
change-
Import_It_ added Added typescript for 27/09/20
passwor c62de9a
Web_Applic typescript code validations 42
d
ation for the
validations
edgar-anco/ feat(modules):
change-
Import_It_ import modules 27/09/20
passwor 5bd5ee7 Added modules
Web_Applic for the html 43
d
ation section
EdGaR-
Merge remote-
MaLcA/
tracking branch 27/09/20
Import_It_ develop 85eda05 -
'origin/register' 44
Web_Applic
into develop
ation
Rafael-
Merge remote-
Urquiaga/
tracking branch 27/09/20
Import_It_ develop 0fbc2bc -
'origin/profile' 45
Web_Applic
into develop
ation
Rafael-
Urquiaga/ feat(routing):
Added routes for the 27/09/20
Import_It_ develop 79e59ba add routes for
navigation 46
Web_Applic all components
ation
fix(change-
edgar-anco/
change- password): Fix the validation of
Import_It_ 28/09/20
passwor a8d730f updated change password
Web_Applic 47
d password match section
ation
validation
edgar-anco/ change- d873e34 fix(change- Fix the change 28/09/20
password):
updated
Import_It_
passwor changes in
Web_Applic password component 48
d change-
ation
password
component
fix(change-
edgar-anco/ password):
change-
Import_It_ updated Update the change 28/09/20
passwor bba8b42
Web_Applic change- password section 49
d
ation password
component
EdGaR-
fix(routing): fix
MaLcA/
routing for Fix routing for the 28/09/20
Import_It_ develop 1a69356
users’ navigation 50
Web_Applic
component
ation
EdGaR-
feat(validation):
MaLcA/
add login added validation to 29/09/20
Import_It_ profile bb6ca70
validation to registered users 51
Web_Applic
registered users
ation

aplicación web y que no contenga errores. Asimismo, aun no comenzamos con la
implementación de Web Services para la parte de BackEnd.

A continuación, se muestra screenshots del web Application front end desarrollada.
Pantalla inicial: Se muestra dos imágenes para que pueda iniciar dependiendo de su
usuario, sea tipo viajero o cliente comprador.
Log In: Se muestra la pantalla de log in donde el usuario podrá iniciar sesión con su
DNI y contraseña. Asimismo, se presenta una opción de registrarse y de cambiar
contraseña.
Change-Password: Se muestra la pantalla en la que el usuario podrá cambiar su
contraseña colocando su email y la nueva password.
Register: Se muestra la pantalla donde el usuario podrá ingresa la información

requerida para que pueda registrarse para emplear Import It. Su información será
almacenada en un json.
Profile: Se muestra la pantalla, después de iniciar sesión, donde el usuario podrá

navegar por distintas opciones presentes en el sidebar y su perfil.
Se muestra la foto del usuario.
Se muestra la información principal del usuario y puede actualizar sus datos personales.
Link de video de Web Application Navigation:
https://web.microsoftstream.com/video/6004b0c1-0893-43f6-b4dc-db28a51f5cf7

Para el Sprint 2 aún no se empezó con la implementación de los Web Services. Sin
embargo, se incluirán los Endpoints de Json Server.
Endpoint Verbo Enlace Parámet Response Explicación

HTTP ros
users Get http:// [ Se retorna un

localhost:3000/ { array con la
api/v1/users información
"dni": 0, de todos los
"name": "string", usuarios.
"genre": "string",
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"address": "string ",
"password":
"string",
"id": “0”
}
]
users Get https:// Id { Se retorna la

localhost:3000/ información
api/v1/users/ "dni": 0, del usuario
{id} "name": "string", del que se
hace la
"genre": "string", consulta con
el Id.
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”
users Post https:// [ Este método

localhost:3000/ { sirve para
api/v1/users "dni": 0, guardar un
nuevo
"name": "string", cliente en la
"genre": "string", base de
datos.
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”
}
]
users Put https:// Id { Se actualiza

localhost:3000/ la
api/v1/users/ "dni": 0, información
{id} "name": "string", del cliente
mediante el
"genre": "string", Id
especificado
"month": "0",
por
"day": "0", parámetro.
"year": "0",
"email": "string",
"phone": “0",

"password":
"string",
"id": “0”
users Delete https:// Id { Se elimina el

localhost:3000/ usuario
api/v1/users/ "dni": 0, especificado
{id} "name": "string", mediante el
Id
"genre": "string",
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”

Para el deployment del Web Application Front-End se utilice Netlify, el cual nos
permitió alojar nuestra primera entrega de web Applications desarrollado con Angular y
Json Server.
Link de Netlify:
import-it.netlify.app
Pasos para le Deployment:

7. Finalmente, podremos visualizar el link cambiado con el nombre colocado y nuestra
link de respaldo: https://import-it.netlify.app
Evidencia de link en Google:

con el proyecto del Web Application front end con commits, tal como se muestra a
continuación:
Se muestra que el sprint 2 duro del día 22 de septiembre hasta el día 29 de septiembre,
donde se realizaron las implementaciones en diferentes ramas y contribuyeron todos los
integrantes.
Integrantes -Usuario:
Barrazueta Vilcachagua, Gonzalo – Gonzalo Barrazueta.
Anco Copaja, Edgar Andre – Edgar Anco.
Malca Rojas, Edgar Alexander – Edgar Alexander Malca Rojas
Montes Molina, Sebastian Alejandro – larson199929
Urquiaga Rodriguez, Rafael Adrian - Rafael Urquiaga Rodriguez.

Sección Traffic de Insights GitHub:
Sección NetWork en GitHub: Se trabajaron en ramas para poder evidenciar el GitFlow
con los commits y ramas.
5.2.3. Sprint 3
correspondiente al desarrollo del frontend del web Application:
Trello:
https://trello.com/invite/b/nzsWNJs5/ATTI9c687622957aaa9631de58555c14b70747
FBBEC4/import-it-sprint-3
Backlog Table:
Sprint Sprint3
User Story Task
Tittle Hour Assigned
Id Tittle Id Description s to Status
Persona no
registrada se Registrar un
TSG0 Registro de 3 Edgar
US01 registra con nuevo Done
8 usuario horas Malca
un correo y usuario
contraseña
Persona Iniciar sesión
TSG0 Inicio de 2 Gonzalo
US05 registrada con el Done
inicia sesión 9 sesión horas Barrazueta
usuario
con correo y
registrado
contraseña
Persona
cambiar la
registrada
TSG1 Cambio de contraseña 4 Edgar
US06 cambia su Done
0 contraseña del usuario horas Malca
contraseña
registrado
olvidada
Persona
registrada TSG1 Sebastian
US011 quiere cerrar Cerrar sesión Cerrar sesión 1 hora Done
1 Montes
sesión.
Persona
quiere
agregar un
TSG1 Agregar una registrar una 3 Sebastian
US014 producto a su Done
2 orden orden nueva horas Montes
maleta
virtual de
pedidos
Persona
quiere ver los agregar la
TSG1 Agregar Sebastian
US016 precios de comisión a la 1 hora Done
3 comisión Montes
envío de los orden nueva
viajeros
Persona Visualizar
quiere los
visualizar los TSG1 Visualizar movimientos 2 Sebastian
US020 Done
movimientos 4 Movimientos de las horas Montes
generados ordenes
generadas
Persona
agregar el
quiere Agregar
TSG1 código de 3 Edgar
US022 agregar un código de Done
5 cupón en la horas Malca
código de cupón
interfaz
cupón
Persona Visualizar
Mostrar
quiere TSG1 cupón luego 3 Edgar
US023 cupón Done
visualizar los 6 de añadir el horas Malca
disponible
cupones código
disponibles
Persona Ver las
quiere ver las Vista ordenes por
TSG1 2 Rafael
US024 ordenes por ordenes por mayor que Done
7 horas Urquiaga
mayor mayor estén
disponibles disponibles
Persona
Ver las
quiere
Vista ordenes por
visualizar las TSG1 2 Edgar
US025 ordenes nacionales Done
ordenes 8 horas Malca
nacionales que estén
nacionales
disponibles
disponibles
Persona
quiere TSG1 Registrar una Registrar una 3 Sebastian
US026 Done
registrar una 9 dirección dirección horas Montes
dirección para la orden
Persona Ver todas las
quiere direcciones
Visualizar
visualizar TSG2 que he Sebastian
US027 direcciones 1 hora Done
direcciones 0 registrado Montes
registradas
registradas con mi
usuario
Persona Eliminar la
quiere dirección que
TSG2 Eliminar 2 Sebastian
US028 eliminar las tengo Done
direcciones 1 dirección horas Montes
registradas
registradas en mi usuario
Persona
Chatear con
quiere
TSG2 Generar un otros 2 Edgar
US029 chatear con Done
2 chat usuarios horas Anco
otros
registrados
usuarios
Persona Ver las
quiere ver las ordenes
TSG2 Mostrar 3 Edgar
US030 ordenes registradas Done
3 ordenes horas Anco
registradas en una sola
interfaz
Persona
quiere poder
Calcular un
tener un TSG2 Calculadora 3 Gonzalo
US031 presupuesto Done
presupuesto 4 virtual horas Barrazueta
de compra
de una orden
de compra
Persona Ver las
quiere poder ordenes que
ver las TSG2 Ordenes van a llegar 2 Gonzalo
US032 Done
ordenes 5 Rápidas más rápidas y horas Barrazueta
rápidas que estén
disponibles disponibles

Commit
Commit Message Comm
Repository Branch Commit Id Message Body ited on
Merge Se realizó
edgar-anco c39d59f1eef5f5160
branch merge de la 10/21/2
/Import_It_Web_A chats 5143c77da039732
'chats' into rama chats 022
pplication 2c5bbd29
develop en develop
Se actualizó
edgar-anco fbd7c43dd4e89214 fix(login):
la 10/21/2
/Import_It_Web_A login 61fe0f46600bb282 updated
autenticació 022
pplication 7eda887f auth issues
n
Merge
remote- Se realizó
edgar-anco 5f974989855c49f2 tracking merge de la
10/21/2
/Import_It_Web_A url-order 2c0e5f6affd58264a branch rama url-
022
pplication 40c8f99 'origin/urlorder en
order' into develop
develop
Se actualizó
edgar-anco 255aba4504956dff fix(login):
la 10/21/2
/Import_It_Web_A login 59d4adf7c82d8532 updated
autenticació 022
pplication 38d42068 login auth
n del login
edgar-anco b36052cef607f70c fix(services Se
10/20/2
/Import_It_Web_A develop c04b04e36bf588f6 ): updated actualizaron
022
pplication 89ee6317 route las rutas
Merge
remote- Se realizó el
edgar-anco 47428d77df5faa7c tracking merge de la
10/20/2
/Import_It_Web_A direction 0813f99a97dd2988 branch rama
022
pplication b63c3581 'origin/direc direction a
tion' into develop
develop
feat(chats):
edgar-anco 163444256c9f7065 Se
updated 10/20/2
/Import_It_Web_A chats c3d2c1f81dcd3175 actualizaron
chat 022
pplication bdfe66b1 los chats
component
fix(directio
larson199929/ 525f76bea4d47aa3 Se agrega el
n): add 10/20/2
Import_It_Web_A direction aef8b21fcb0a202d guardado en
localstorge 022
pplication 243ddd6f localstorage
save
Se
EdGaR-MaLcA/ 71b7537fe6ee1f78 arreglaron
fix: fixed 10/20/2
Import_It_Web_A develop 62a7d1aed6672548 las
importation 022
pplication 11ef6bcf importacione
s
Merge Se realizó el
EdGaR-MaLcA/ 733728ab1819869 branch merge de la
10/20/2
Import_It_Web_A shipment 51b0522eea4465b6 'shipment' rama
022
pplication 3f93c02c9 into shipment a
develop develop
fix(urlorder
larson199929/ a3d01452e920740 Se agregó la
):add 10/20/2
Import_It_Web_A url-order 95698d190029d58 interfaz de
interface 022
pplication 78f6ec4df7 wallet
wallet
edgar-anco a81fcf0e19934376 Merge Se hace 10/20/2
chats
/Import_It_Web_A 066fb42dc77a0414 branch merge de la 022
rama
'develop'
pplication cc29bf4b develop a
into chats
chats
feat(login): Se agrega el
edgar-anco 070ac25001508a8d
updated servicio de 10/20/2
/Import_It_Web_A login 4e712d15b172884
authenticati autenticació 022
pplication 8960653e8
on n
Se agrega
edgar-anco 419453c398c6564 feat(login):
Jason Web 10/20/2
/Import_It_Web_A login 6213cac3a2fa711b added JWT
Token para 022
pplication 334fd5de6 login
el login
fix(directio Se cambió la
larson199929/ 1834e46927bea369 n): change interfaz y se
10/20/2
Import_It_Web_A direction 3075b88b351043bf interface agregó la
022
pplication e371c5eb and add opción
delete borrar
fix(directio
larson199929/ 5ce1f72dd84220d9 n): add card Se agrega
10/20/2
Import_It_Web_A direction e480165827e3b47 for id card para id
022
pplication 318b1f469 directioninf directioninfo
o
fix(directio
Se cambión
larson199929/ c4d6cea96adbd750 n): change
el card para 10/20/2
Import_It_Web_A direction cecdcb898dbb0c0a card to
la interfaz de 022
pplication 621720d9 interface
dirección
direction
fix(directio Se agregan
larson199929/ 7bc6ad4670bcbe90
n):add cards cards en la 10/20/2
Import_It_Web_A direction 3117006840de410
in direction interfaz de 022
pplication be9bd247c
interface dirección
docs:
edgar-anco 967bbf597854d28b
updated Se actualiza 10/19/2
/Import_It_Web_A chats 67678185ed21f23d
package- el json 022
pplication 2d4e78ad
lock.json
larson199929/ direction 874e4071022b201 fix(directio Se agrega la 10/19/2
Import_It_Web_A ab9cc95fecd6dd49 n):add función 022
pplication 99e85f754 register register y la
function interfaz
and
interface
Se agregó la
fix(urlorder
opción para
larson199929/ c22dbe2a46e748b7 ): add delete
borrar una 10/19/2
Import_It_Web_A url-order cbe6a772023911e5 order and
orden y 022
pplication 67b7809f change
cambiar de
option
opción
fix(urlorder
Se agregó un
larson199929/ f3d0df29091af056 )= add
botón para 10/19/2
Import_It_Web_A url-order 33ffbc0b85355c56 cancel
cancelar en 022
pplication ba9d8a5b button in
el registro
register
fix(urlorder
Se modificó
larson199929/ abed6f63920a6fcf6 ):
la card y se 10/19/2
Import_It_Web_A url-order 6e15b9a01992096 modificatio
agregó la 022
pplication dd7ac093 n card and
alerta
add alert
Se agrega
larson199929/ 7528628c93b4929 fix(urlorder
una card 10/19/2
Import_It_Web_A url-order 32ae8d637bc4f952 ): add card
para la 022
pplication 9b7cfa3e5 interface
interfaz
edgar-anco 53c16f24c98d9173 feat(chats): Se agregan
10/19/2
/Import_It_Web_A chats 709b9a78843c3d9 added chats los servicios
022
pplication 52d2b45c8 service para chats
edgar-anco 8c049236876b7d0 feat(chats): Se agrega el
10/19/2
/Import_It_Web_A chats c9db815e6ffa328d added chats componente
022
pplication 8af7301d4 component chats
larson199929/ db97cd3e8e8157fb fix(urlorder Se arreglo
10/19/2
Import_It_Web_A url-order 287ee2b47cdf9dfe ): bug in db. un bug en el
022
pplication 680f32e7 json json
feat(urlorde Se crea la
larson199929/ 157c2d2afafcaa3e3 r):create interface
10/19/2
Import_It_Web_A url-order 40ab7e0ef902ec55 interface principal
022
pplication d396fad main url para el url-
order order
edgar-anco b58c72358ef9467c feat(module Se agregan 10/19/2
chats
/Import_It_Web_A bcb2a63c41112e40 ): added las 022
dependencia
dependenci
pplication ff88bb80 s para los
es for chats
chats
Se agregan
feat(routes):
edgar-anco 678da1bf2ff9a2e7e las rutas para
added paths 10/19/2
/Import_It_Web_A chats 9f24ce370001e656 el
to chats 022
pplication 3e6988a componente
component
chats
feat(chats): Se crean las
edgar-anco 9bb954d4003fa00f
created estructuras 10/19/2
/Import_It_Web_A chats a23ee067225b0cd8
initial files iniciales de 022
pplication f94c8349
structure los archivos
gonzalobarrazueta fix: added
97398f3d762a32b3 Se agrega el
gonzalobarrazueta/ calculato img url and 10/19/2
f7f226ba9bb3529b url de la
Import_It_Web_A r took out 022
3d63739f imagen
pplication border
Se agregó la
feat(directio dirección de
larson199929/ d006f224bb90767b n): add code los
10/19/2
Import_It_Web_A direction 6af6d7e079d8063b for componentes
022
pplication d7d84398 direction direction y
interface register
direction
Se realizo el
Merge
gonzalobarrazueta merge de la
c32c1897e59895d2 branch
gonzalobarrazueta/ Calculat rama 10/19/2
71e6c3df35127117 'calculator'
Import_It_Web_A or calculator a 022
a48a1340 into
pplication la rama
develop
develop
gonzalobarrazueta added
24c10bbb39907dfd Se agrega el
gonzalobarrazueta/ products routerlink 10/19/2
00f05111ef6387fb router link
Import_It_Web_A -store in the 022
b0633d12 en el toolbar
pplication toolbar
gonzalobarrazueta added Se agregan
e15f7c31307b5f8d
gonzalobarrazueta/ products services and servicios y 10/19/2
0a8c3849343a59f8
Import_It_Web_A -store dynamic data 022
7398da95
pplication data dinámica
Se agrega la
added
gonzalobarrazueta estructura y
936dab42a42fd3ac structure
gonzalobarrazueta/ products los estilos 10/19/2
cdb8760ffbf0ee63b and styles
Import_It_Web_A -store del 022
5ca88cc to the Fasty
pplication componente
Component
Fasty
feat(vaidate
Se agrega la
EdGaR-MaLcA/ 0c27309cd167e2c9 -coupon):
vista para 10/18/2
Import_It_Web_A shipment 5676788fe0cf53e6 added view
validar los 022
pplication 038d8688 to validate
cupones
the coupons
feat(model): Se agrega la
EdGaR-MaLcA/ badd7b991048da0 added carpeta
10/18/2
Import_It_Web_A shipment 29545ac7dd30b7a4 model for model para
022
pplication ed7b01835 the coupon la interfaz de
interface cupones
feat(enter-
coupon): Se crea el
EdGaR-MaLcA/ a57635abc147d854
added componente 10/18/2
Import_It_Web_A shipment 49980a13e5bf0e1d
component para agregar 022
pplication da3bc0b7
to add cupones
coupons
feat(coupon
Se crea el
EdGaR-MaLcA/ ede60c86cc38eec3 s): added
componente 10/18/2
Import_It_Web_A shipment 72031a204b38faee component
para mostrar 022
pplication c946615b to show the
cupones
coupons
feat(agregat
Se agregan
tions):
nuevos
EdGaR-MaLcA/ 8793a536fde24a20 added new
componentes 10/18/2
Import_It_Web_A shipment 076d76626cb6149 components
y código 022
pplication df0da9286 and code to
para estas
these
secciones
sections
feat(routes): Se agregan
added paths las rutas de
EdGaR-MaLcA/ 8bd83b7e98bfdff2
to our direccionami 10/18/2
Import_It_Web_A shipment 43f78beb098950d4
ImporIT ento para el 022
pplication 08e8376c
web componente
application desarrollado
feat(new
EdGaR-MaLcA/ 3c8ca406f5d4b381 Se agrega un
service): 10/18/2
Import_It_Web_A shipment 8ba2053a6d68f667 nuevo
added 022
pplication 2db00374 servicio
services
feat(service
Se agregan
EdGaR-MaLcA/ 35ca19ba4eb9ce9d s): added
los servicios 10/18/2
Import_It_Web_A shipment 05eb1f212afaba78 services for
para el 022
pplication 037b3232 the
componente
component
Se agrega la
feat(model):
carpeta
added
EdGaR-MaLcA/ 1c07c2c01ead28f3 model para
model for 10/18/2
Import_It_Web_A shipment 41f841301393104b el
the 022
pplication 3918028c componente
domestic
domestic-
shipment
shipment
feat(shipme
Se crea el
EdGaR-MaLcA/ fa3ba539fc01ff9ca nts): added
componente 10/18/2
Import_It_Web_A shipment 2c619168d7ef12ac domestic
domestic- 022
pplication 37d52d5 shipments
shipments
component
feat(shipme
Se agrega
nts-info):
EdGaR-MaLcA/ 59c4e4753789c5a4 información
created 10/18/2
Import_It_Web_A shipment add8037f3d61bd8c al
shipments 022
pplication f6505dbb componente
info
shipment
component
Se agrega un
feat(json):
EdGaR-MaLcA/ 09d30e601bc7696 nuevo
added new 10/18/2
Import_It_Web_A shipment 99f0926ef7f65828 arreglo de
array of 022
pplication 0c50e3b15 información
information
en el json
Se desarrolla
feat(wallet):
larson199929/ 9d60687517b317d el html para
added html 10/18/2
Import_It_Web_A wallet 4939610f34a79406 el
code for 022
pplication 41d25adf3 componente
wallet
wallet
RafaelUrquiaga2/ 89165e6c364b224 fix(module) Se arreglan
Wholesa 10/21/2
Import_It_Web_A 54bfd41019bc0c7c : fix los imports
le 022
pplication e30e328a4 Imports del módulo
feat(compo
Se crea el
nent): add
RafaelUrquiaga2/ 21a67d64886f61a4 componente
wholesal component 10/21/2
Import_It_Web_A aa97aa861dfd4136 product-
e product- 022
pplication 40fee754 wholesale-
wholesale-
payment
payment
feat(compo
Se crea el
nent): add
RafaelUrquiaga2/ 390217cac5165031 componente
wholesal component 10/21/2
Import_It_Web_A 95b55c77085d279 buy-
e buy- 022
pplication dc5c38abd wholesale-
wholesale-
detail
detail
Se agregan
feat(styles): los estilos
RafaelUrquiaga2/ 64e62f3159846dbd
wholesal add styles para el 10/21/2
Import_It_Web_A 851e3d7c665f6f4e
e to product- componente 022
pplication 7063f128
wholesale product-
wholesale
Se desarrolla
el html y la
feat(structur
carpeta de
RafaelUrquiaga2/ 9778f95cc4ca03db e): add
wholesal servicios 10/21/2
Import_It_Web_A c11ae9a42718d2ee structure for
e para el 022
pplication fd447adf product-
componente
wholesale
product-
wholesale
RafaelUrquiaga2/ wholesal 7d90d52bea05628 feat(compo Se crea el 10/21/2
Import_It_Web_A e 193529a4853fa2af nent): add componente 022
pplication a0696a0af component product-
productwholesale
wholesale
Se agregan
feat(styles): los estilos
RafaelUrquiaga2/ 4c99d0824691b66
wholesal add styles para el 10/21/2
Import_It_Web_A 723b9501edb5e9aa
e to buy- componente 022
pplication 9b4e2016c
wholesale buy-
wholesale
Se desarrolla
feat(html): el html para
RafaelUrquiaga2/ 89618211907c2afb
wholesal add html el 10/21/2
Import_It_Web_A d109851591fe674f
e structure for componente 022
pplication d8004d28
component buy-
wholesale
feat(compo
Se crea el
RafaelUrquiaga2/ 86b67b9a2c617dc6 nent): add
wholesal componente 10/21/2
Import_It_Web_A 76293ebda345876c component
e buy- 022
pplication bbbbc319 buy-
wholesale
wholesale
added
gonzalobarrazueta Se crean los
f39a217e4653eee5 services to
gonzalobarrazueta/ calculato servicios del 10/19/2
041f2aee49fb0fab9 get data
Import_It_Web_A r componente 022
bdee56d from the
pplication calculator
json server
added
Se agregan
gonzalobarrazueta structure
adde620c6d2b18cc estilos y
gonzalobarrazueta/ calculato and style to 10/18/2
1bddf1896ff1b50a estructura al
Import_It_Web_A r the 022
11e1edca componente
pplication calculator
calculator
component
Se crea el
created
componente
gonzalobarrazueta Calculator
7cab6b1f64d6d473 calculator y
gonzalobarrazueta/ calculato component 10/17/2
c351ddf04e29a41c se agregan
Import_It_Web_A r and added 022
24e92ec9 sus
pplication dependenci
dependencia
es
s
aplicación web y que no contenga errores. Asimismo, aun no comenzamos con la
implementación de Web Services para la parte de BackEnd.

A continuación, se muestran screenshots de la nueva version de web Application Front
end desarrollada para este sprint.
Pantalla inicial: Se muestra dos imágenes para que pueda iniciar dependiendo de su
usuario, sea tipo viajero o cliente comprador.
Log In: Se muestra la pantalla de log in donde el usuario podrá iniciar sesión con su
DNI y contraseña. Asimismo, se presenta una opción de registrarse y de cambiar
contraseña.
Change-Password: Se muestra la pantalla en la que el usuario podrá cambiar su
contraseña colocando su email y la nueva password.
Register: Se muestra la pantalla donde el usuario podrá ingresa la información

requerida para que pueda registrarse para emplear Import It. Su información será
almacenada en un json.
Profile: Se muestra la pantalla, después de iniciar sesión, donde el usuario podrá
navegar por distintas opciones presentes en el sidebar y su perfil.
Se muestra la foto del usuario.
Se muestra la información principal del usuario y puede actualizar sus datos personales.
Sidebar: Se muestra nuestro sidebar lateral, el cual se desplegará del lado lateral
izquierdo en su pantalla, al dar click a las barras horizontales o menú Burger. En este
componente, encontrara todas las funcionalidades de Import It.
My Orders: En esta sección, se muestran las ordenes realizadas por los clientes. Si no
cuenta con una orden podrá agregar una y lo llevará a la opción URL Order.
URL Order: En esta sección, se muestra un formulario donde el cliente ingresara los
datos del producto que desea traer con el viajero. Este producto será agregado en la
sección my orders.
Buy Wholesale: En esta sección, se presenta una de nuestras principales innovaciones

de comprar productos del extranjero de forma conjunta. Esto quiere decir que
publicaremos productos en nuestra página web, como un iPhone 13, y esperaremos a
que 200 personas se inscriban en la importación masiva, con los beneficios de un costo
menor de comisión y aduanas. Cabe resaltar, que este será un pedido a largo plazo.
My Wallet: En esta sección, se muestran las transacciones realizadas por el usuario, en
cuanto pagos de sus órdenes.
Chat: En esta sección, se muestra un chat donde interactuara el usuario que inicio
sesión con otros usuarios de la aplicación.
Directions: En la presente sección, se mostrarán las direcciones de envió del usuario

actual y si no cuenta con una podrá agregar a través de un formulario de registro de
dirección.
Calculator: Esta es una opción, en la cual el usuario podrá calcular el costo total de
importación de su producto en base al precio de venta y la comisión que pueda pagar
para tener una aproximación al precio final por el servicio de traer su producto de USA
a Perú.
Coupons: En esta sección, se mostrarán los cupones que tiene el usuario y si no cuenta
con uno, podrá agregar, solo los que estén registrados en el sistema de ImportIt como
válidos.
Domestic Shipment: En esta sección, se muestran los envíos que se realizan a

provincia, este contara con cards donde se muestra cada producto enviado y cuando le
de click podrá visualizar la información a detalle y un botón que lo llevara a Olva
Courier para poder seguir su producto.
Fasty: En esta sección, se presenta la tienda virtual de ImportIt donde podrá encontrar
productos para su compra instantánea, es decir, llegara a su domicilio en el menor
tiempo posible.
Link de video de Web Application Navigation:
https://web.microsoftstream.com/video/2cf99d25-bc5e-4abc-b5f8-e893601bc098
Para el Sprint 3 aún no se empezó con la implementación de los Web Services. Sin
embargo, se incluirán los Endpoints de Json Server.
Endpoint Verbo Enlace Parám Response Explicación

HTTP etros

api/v1/users información
"name": "string", usuarios.
"genre": "string",
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”
}
]

api/v1/users/ "dni": 0, del usuario
{id} "name": "string", del que se
hace la
el Id.
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”

api/v1/users guardar un
"dni": 0, nuevo
base de
"genre": "string", datos.
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”
}
]

localhost:3000/ la
api/v1/users/ "dni": 0, información
{id} "name": "string", del cliente
mediante el
especificado
"month": "0",
por
"day": "0", parámetro.
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”

api/v1/users/ "dni": 0, especificado
Id
"genre": "string",
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”
urlorder Get http:// [ Se retorna un

api/v1/urlorder información
"url": "string", de todas las
"name": "string", url orders.
"tittle": "string",
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
}
]
urlorder Get http:// Id { Se retorna la

api/v1/urlorder/ "url": "string", del URL
{id} "name": "string", order del que
se hace la
"tittle": "string", consulta con
el Id.
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
urlorder Post http:// [ Este método

api/v1/urlorder guardar un
"url": "string", nuevo URL
"name": "string", order en la
base de
"tittle": "string", datos.
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
}
]
urlorder Put http:// Id { Se actualiza

localhost:3000/ la
api/v1/urlorder/ "url": "string", información
{id} "name": "string", del URL
order
"tittle": "string", mediante el
"weight": "0", Id
especificado
" amount": "0", por
parámetro.
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
urlorder Delete http:// Id { Se elimina el

localhost:3000/ URL order
api/v1/urlorder/ "url": "string", especificado
Id
"tittle": "string",
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
domesticS Get http:// [ Se retorna un

hipments localhost:3000/ array con la
api/v1/ { información
domesticShipme de todos los
nts "id": 0, envíos
"imageProduct": nacionales
"string", (domestic
shipments).
"userId": "0",
"productName":
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"
}
]
domesticS Get https:// Id { Se retorna la

hipments localhost:3000/ información
api/v1/ "id": 0, del envío del
domesticShipme "imageProduct": que se hace
nts/{id} "string", la consulta
con el Id.
"userId": "0",
"productName":
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"
domesticS Post https:// [ Este método

hipments localhost:3000/ { sirve para
api/v1/ guardar un
domesticShipme "id": 0, nuevo envío
nts "imageProduct": en la base de
"string", datos.
"userId": "0",
"productName":
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"
}
]
domesticS Put https:// Id { Se actualiza

hipments localhost:3000/ la
api/v1/ "id": 0, información
domesticShipme "imageProduct": del envío
nts/{id} "string", mediante el
Id
"userId": "0", especificado
por
"productName":
parámetro.
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"
domesticS Delete https:// Id { Se elimina el

hipments localhost:3000/ envío
api/v1/ "id": 0, especificado
domesticShipme mediante el
nts/{id} "imageProduct": Id.
"string",
"userId": "0",
"productName":
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"
coupons2 Get http:// [ Se retorna un

api/v1/coupons2 información
"id": 0, de todos los
"title": "string", cupones.
"discount": "0",
"code": "string",
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
}
]
coupons2 Get https:// Id { Se retorna la

api/v1/ "id": 0, del cupón
coupons2/{id} "title": "string", del que se
hace la
"discount": "0", consulta con
el Id.
"code": "string",
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
coupons2 Post https:// [ Este método

api/v1/coupons2 guardar un
"id": 0, nuevo cupón
"title": "string", en la base de
datos.
"discount": "0",
"code": "string",
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
coupons2 Put https:// Id { Se actualiza

localhost:3000/ la
api/v1/ "id": 0, información
coupons2/{id} "title": "string", del cupón
mediante el
"discount": "0", Id
especificado
"code": "string",
por
"validDate": parámetro.
"string",
"situation":
"boolean",
"description":
"string"
coupons2 Delete https:// Id { Se elimina el

localhost:3000/ cupón
api/v1/ "id": 0, especificado
coupons2/{id} "title": "string", mediante el
Id.
"discount": "0",
"code": "string",
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
productCa Get http:// [ Se retorna un

tegories localhost:3000/ { array con la
api/v1/ información
productCategori "name": "string", de todas las
es "imageURL": categorías de
"string" productos.
}
]
productCa Get https:// Id { Se retorna la

tegories localhost:3000/ información
api/v1/ "name": "string", de la
productCategori "imageURL": categoría de
es/{id} "string" producto de
la que se
} hace la
consulta con
el Id.
productCa Post https:// [ Este método

tegories localhost:3000/ { sirve para
api/v1/ guardar una
productCategori "name": "string", nueva
es "imageURL": categoría de
"string" producto en
la base de
} datos.
productCa Put https:// Id { Se actualiza

tegories localhost:3000/ la
api/v1/ "name": "string", información
productCategori "imageURL": de la
es/{id} categoría de
"string" producto
mediante el
} Id
especificado
por
parámetro.
productCa Delete https:// Id { Se elimina la

tegories localhost:3000/ categoría de
api/v1/ "name": "string", producto
productCategori "imageURL": especificada
es/{id} "string" mediante el
Id.
}
storeProd Get http:// [ Se retorna un

uctsByCat localhost:3000/ { array con la
egory api/v1/ información
storeProductsBy "category": "string", de todos los
Category "productsAvailables productos
": por
categoría.
[
{
"name": "string",
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]
}
]
storeProd Get https:// Id { Se retorna la

uctsByCat localhost:3000/ información
egory api/v1/ del producto
storeProductsBy "category": "string", por categoría
Category/{id} "productsAvailables del que se
": hace la
consulta con
[ el Id.
{
"name": "string",
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]
storeProd Post https:// [ Este método

uctsByCat localhost:3000/ { sirve para
egory api/v1/ guardar un
storeProductsBy "category": "string", nuevo
Category "productsAvailables producto por
": categoría en
la base de
[ datos.
{
"name": "string",
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]
storeProd Put https:// Id { Se actualiza

uctsByCat localhost:3000/ la
egory api/v1/ "category": "string", información
storeProductsBy "productsAvailables del producto
Category/{id} ": por categoría
mediante el
[ Id
{ especificado
por
"name": "string",
parámetro.
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]
storeProd Delete https:// Id { Se elimina la

uctsByCat localhost:3000/ producto por
egory api/v1/ "category": "string", categoría
storeProductsBy "productsAvailables especificado
Category/{id} ": mediante el
Id.
[
{
"name": "string",
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]
store Get http:// [ Se retorna un

api/v1/store información
"name": "string", de todas las
"productsList": tiendas.
[
{
"name": "string",
"imageURL":
"string",
"price": "0",
}
]
}
]
store Get https:// Id { Se retorna la

localhost:3000/ tienda de la
api/v1/store/{id} "name": "string", que se hace
"productsList": la consulta
con el Id.
[
{
"name": "string",
"imageURL":
"string",
"price": "0",
}
]
store Post https:// [ Este método

api/v1/store guardar una
"name": "string", nueva tienda
"productsList": en la base de
datos.
[
{
"name": "string",
"imageURL":
"string",
"price": "0",
}
]
store Put https:// Id { Se actualiza

localhost:3000/ la
api/v1/store/{id} "name": "string", información
"productsList": de la tienda
mediante el
[ Id
{ especificado
por
"name": "string", parámetro.
"imageURL":
"string",
"price": "0",
}
]
store Delete https:// Id { Se elimina la

localhost:3000/ tienda
api/v1/store/{id} "name": "string", especificada
"productsList": mediante el
Id.
[
{
"name": "string",
"imageURL":
"string",
"price": "0",
}
]
direction Get http:// [ Se retorna un

api/v1/direction información
"lastName": direcciones.
"string",
"phone": "0",
"direction1":
"string",
"district": "string",
"province": "string",
"department":
"string",
"id": "0"
}
]
direction Get https:// Id { Se retorna la

localhost:3000/ dirección de
api/v1/ "name": "string", la que se
direction/{id} "lastName": hace la
"string", consulta con
el Id.
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"
direction Post https:// [ Este método

api/v1/direction guardar una
"name": "string", nueva
"lastName": dirección en
"string", la base de
"phone": "0", datos.
"direction1":
"string",
"department":
"string",
"id": "0"
direction Put https:// Id { Se actualiza

localhost:3000/ la
direction/{id} "lastName": de la
"string", dirección
mediante el
"phone": "0", Id
especificado
"direction1":
por
"string",
parámetro.
"department":
"string",
"id": "0"
direction Delete https:// Id { Se elimina la

localhost:3000/ dirección
api/v1/ "name": "string", especificada
direction/{id} mediante el
"lastName": Id.
"string",
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"
products Get http:// [ Se retorna un

Wholesale localhost:3000/ { array con la
api/v1/ información
productsWholes "name": "string", de todas las
ale "quantity": "0", compras al
por mayor.
"price": "0",
"picture": "string",
"description":
"string",
"principalFeature1":
"string",
"string",
"string",
"department":
"string",
"id": "0"
}
]
products Get https:// Id { Se retorna la

Wholesale localhost:3000/ compra al
api/v1/ "name": "string", pormayor de
productsWholes "lastName": la que se
ale/{id} "string", hace la
consulta con
"phone": "0", el Id.
"direction1":
"string",
"department":
"string",
"id": "0"
products Post https:// [ Este método

Wholesale localhost:3000/ { sirve para
api/v1/ guardar una
productsWholes "name": "string", nueva
ale "lastName": compra al
"string", por mayor en
la base de
"direction1":
"string",
"department":
"string",
"id": "0"
products Put https:// Id { Se actualiza

Wholesale localhost:3000/ la
productsWholes "lastName": de la compra
ale/{id} "string", al por mayor
mediante el
"phone": "0", Id
especificado
"direction1":
por
"string",
parámetro.
"department":
"string",
"id": "0"
products Delete https:// Id { Se elimina la

api/v1/ "name": "string", por mayor
productsWholes "lastName": especificada
ale/{id} "string", mediante el
Id.
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"

Para el deployment del Web Application Front-End se utilice Netlify, el cual nos
permitió alojar nuestra primera entrega de web Applications desarrollado con Angular y
Json Server.
Link de Netlify:
https://import-it.netlify.app

10.Finalmente, podremos visualizar el link cambiado con el nombre colocado y nuestra

Evidencia de link en Google:

con el proyecto del Web Application front end con commits, tal como se muestra a
continuación:
Se muestra que el sprint 3 duro del día 10 de octubre hasta el día 22 de octubre, donde
se realizaron las implementaciones en diferentes ramas y contribuyeron todos los
integrantes.
Integrantes -Usuario:
Barrazueta Vilcachagua, Gonzalo – Gonzalo Barrazueta.
Anco Copaja, Edgar Andre – Edgar Anco.
Malca Rojas, Edgar Alexander – Edgar Alexander Malca Rojas
Montes Molina, Sebastian Alejandro – larson199929
Urquiaga Rodriguez, Rafael Adrian - Rafael Urquiaga Rodriguez.

Sección Traffic de Insights GitHub:
Sección NetWork en GitHub: Se trabajaron en ramas para poder evidenciar el GitFlow
con los commits y ramas.
5.2.4. Sprint 4
En el presente sprint se realizaron algunas user stories, las cuales se mostrarán a
continuación en una tabla con el sprint backlog. Asimismo, se mostrará una imagen del
trello y su respectivo link donde el equipo ha llevado el control de las user stories y las
tasks a desarrollar:
Link:
https://trello.com/invite/b/nzsWNJs5/ATTIaa6da9a4d2d6221dcaf79e922539056b0DAC
A6EA/import-it-sprint-4
Sprint Sprint4
User Story Task
Tittle Assigned
Id Tittle Id Description Hours to Status
Persona no
registrada
Implementar en
se registra Registro Sebastian
US01 TSG08 Spring Boot la 2 horas Done
con un de usuario Montes
entidad Usuario
correo y
contraseña
Persona Implementar una

Edgar
US02 requiere TSG02 Welcome interfaz que guie 2 horas Done
Anco
elegir el en ruta al tipo de
tipo de login que
login que
necesite si
requiera la
es viajero
persona
o
comprador
Persona
registrada Realizar en
inicia Inicio de Spring Boot los Sebastian
US05 TSG09 2 horas Done
sesión con sesión controladores Montes
correo y del usuario
contraseña
Comprador
quiere
agregar un Implementar en
US01 Agregar Edgar
producto a TSG12 Spring Boot la 2 horas Done
4 una orden Anco
su maleta entidad Orders
virtual de
pedidos
Comprador
quiere Agregar Implementar en
US02 Sebastian
agregar un TSG15 Código de Spring Boot la 2 horas Done
2 Montes
código de cupón entidad Coupon
cupón
Comprador
quiere Realizar en
Mostrar
US02 visualizar Spring Boot los Sebastian
TSG16 cupón 2 horas Done
3 los controladores de Montes
disponible
cupones los Coupon
disponibles
Comprador Implementar en
quiere ver Vista Spring Boot la
US02 Rafael
las ordenes TSG17 ordenes entidad 2 horas Done
4 Urquiaga
por mayor por mayor ProductsWholes
disponibles ale
Comprador
Implementar en
quiere
Vista Spring Boot la
US02 visualizar Edgar
TSG18 ordenes entidad 2 horas Done
5 las ordenes Malca
nacionales Domestic
nacionales
Shipment
disponibles
Comprador
Implementar en
quiere Registrar Gonzalo
US02 Spring Boot la
registrar TSG19 una 2 horas Barrazuet Done
6 entidad
una dirección a
Direction
dirección
Comprador
Visualizar Realizar en
quiere Gonzalo
US02 direccione Spring Boot los
visualizar TSG20 2 horas Barrazuet Done
7 s controladores de
direcciones a
registradas Directions
registradas
Comprador
quiere Realizar en
Gonzalo
US02 eliminar Eliminar Spring Boot los
TSG21 2 horas Barrazuet Done
8 las dirección controladores de
a
direcciones Directions
registradas
Comprador Realizar en
US03 quiere ver Mostrar Spring Boot los Edgar
TSG23 2 horas Done
0 las ordenes ordenes controladores de Anco
registradas Orders
quiere Spring Boot la
poder ver entidad Store
US03 Ordenes Sebastian
las ordenes TSG25 Product y 2 horas Done
2 rápidas Montes
rápidas ProductsList
disponibles para una relación
One to Many
US33 TSG26 2 horas Done

Viajero Lista de Implementar la Edgar
quiere ver
la lista de
ordenes en interfaz de la
ordenes Malca
la cual lista de ordenes
puede
elegir
Implementar la
interfaz de la
Viajero
lista de ordenes Edgar
quiere ver Mis
aceptadas y en Malca y
US34 las ordenes TSG27 ordenes de 4 horas Done
Spring Boot Sebastian
aceptadas viaje
Implementar la Montes
a llevar
entidad Traveler
Orders
Import_It_Web_Application
Commit Commit Commit

Repository Branch Id Commit Message Message Body ed on
EdGaR- 3319b5272
MaLcA/ 17cb3d340 fix: fixed path of Se arreglo el path
Import_It_ develop 12a493e8e traveler order del componente 11/4/2022
Web_Appli fdc9abc7d component traveler order.
cation 5ba8
SebastianM 4343a07e9
ontes99o/ 51803efa2 Se agregó el
fix(develop): add
Import_It_ develop e0a545c2a basepath para el 11/2/2022
basepath Backend
Web_Appli a1ffa8764d backend
cation df0
SebastianM 9c68eaa9e
ontes99o/ b2f7eeddc fix(develop): add
Se agregó la ruta
Import_It_ develop 253a20cb2 basePath route 11/2/2022
para el backend
Web_Appli 143a46082 with backend
cation f8b3
edgar- bb9ca01a8
anco/ 51012a3bf Se arregló el bug
fix(router): fixed 10/31/202
Import_It_ develop ea5a62bf6e al momento de
refresh page bug 2
Web_Appli a22b0a2c8 recargar la página.
cation d1d
EdGaR- 7c2e552b9 feat(traveler- Se agregó una

MaLcA/ 807169bf7 orders): added vista para ver las
10/31/202
Import_It_ develop a77b52676 view to see the ordenes
2
Web_Appli 5e7775970 orders selected by seleccionadas por
cation 1904 the c el comprador.
Se agregó un
EdGaR- 51f0fb98ca feat(customer-
nuevo
MaLcA/ 4778fb139 order-detail):
componente para 10/31/202
Import_It_ develop 3280ea422 added a new
ver mejor el 2
Web_Appli c170e5bd4 component to see
detalle de la orden
cation bb2 better the
del comprador
EdGaR- e9beff0dc8
Se arreglaron
MaLcA/ 41f13ef413 fix: fixed some
algunas 10/31/202
Import_It_ develop 7e676d3e1 typescript
dependencias de 2
Web_Appli 0937f383c dependencies
typescript
cation df
EdGaR- 20b16dd17 Se agregaron

feat(customer-
MaLcA/ 81b162601 dependencias del
order): added 10/31/202
Import_It_ develop a544ff6cd2 componente
customer orders 2
Web_Appli a85b87ccb "Customer-
components
cation 5cc orders"
EdGaR- c294f9ef7d
MaLcA/ f83d835a7
Se actualizó el 10/31/202
Import_It_ develop 519b93e0e fix: router fixed
router. 2
Web_Appli a4d7a7e18
cation a2a
EdGaR- b2b8eaa65
MaLcA/ 26c959a3b
fix: fixed ng if Se arregló el 10/31/202
Import_It_ develop 7ed1730f6
statement "ngIf" 2
Web_Appli 7f356c2f59
cation 959
EdGaR- 7b9e1b958 Se agregaron las

feat(orders): added
MaLcA/ 5c85d469b dependencias
dependencies 10/31/202
Import_It_ develop a9bd2b2f3 relacionadas con
relationed with the 2
Web_Appli a59c3661d "Customer-
customer’s order
cation c2f4 orders"
EdGaR- fbf61945b feat(customer- Se agregó el 10/31/202

develop
MaLcA/ 53a0d97e2 order): added componente 2
Import_It_ 14674dc55 customer orders "Customer-
Web_Appli d7f917d0d
component orders"
cation 8b85
Se agregaron
EdGaR- e4e60d3c0 feat(Style): added
estilos a los
MaLcA/ bbdbe4b5d style to coupons
componentes 10/29/202
Import_It_ develop 3643b7ca8 and domestic
"Coupons" y 2
Web_Appli 99c409b98 shipment
"Domestic
cation 47e7 component
Shipment"
EdGaR- 690a97bfa
MaLcA/ 5b0d469b8 Se agregó
feat: added json 10/29/202
Import_It_ develop 4fbb38e8a información al
information 2
Web_Appli 5bc699c1f json.
cation a96f
gonzalobarr 417b747dc
feat: added 10 Se agregó un 10%
azueta/ 7bae8e599
calculat percent fixed price fijo al precio para 10/31/202
Import_It_ 3df60bbb7
or to the el costo 2
Web_Appli 57f1cc190
approximated cost aproximado
cation 2a54
edgar- 5ee55a773
Se actualizó el
anco/ efe905e70
fix(router): updated routing 10/31/202
Import_It_ chats 124661cc5
user type routing dependiendo del 2
Web_Appli d460594fe
tipo de usuario.
cation d550
edgar- fef27bbf3a
Se actualizó el
anco/ f6f56fd17f feat(router):
routing 10/31/202
Import_It_ chats de75469ab updated user type
dependiendo del 2
Web_Appli 2df3bd9d8 routing
tipo de usuario.
cation 19
edgar- 06abdac74
anco/ 3d5082fde Se actualizaron
fix: updated 10/31/202
Import_It_ chats 0b76d6e52 los archivos de
welcome files 2
Web_Appli 9501936a9 bienvenida.
cation 7313
edgar- chats 051355a8d feat(chats): Se actualizaron las 10/31/202

anco/ 0b677af14
Import_It_ 004a87bff5 updated chats características de
2
Web_Appli fdd81ddbb feature los chats.
cation 1e4
edgar- 8eb2a3f4b
anco/ a3bc735afc
docs: updated Se actualizó el 10/31/202
Import_It_ chats a20966533
db.json db.json 2
Web_Appli 8f4c44e5c
cation 5e6
gonzalobarr 8a33d56b2
azueta/ 9d89a9945 Se agregó el
product feat: added single 10/31/202
Import_It_ 2d22e7c3a componente para
s-store product component 2
Web_Appli 25305b2e0 un producto único.
cation 010f
RafaelUrqui 650484691 Se actualizó el

aga2/ b35fd6c6a fix(language): fix idioma utilizado
wholesa 10/31/202
Import_It_ a7ef6eef25 language of en la
le_v2 2
Web_Appli 64b49fa52 function especificación de
cation d4b los productos.
Listar las ordenes

RafaelUrqui 32c0451f9
fix(orders): list buy por compra al por
aga2/ 448fe5841
wholesa wholesale orders mayor 10/31/202
Import_It_ dbd1042af
le_v2 into my orders seleccionadas en 2
Web_Appli a4384e613
section la sección de "My
cation b9f5
Orders".
SpringBootAppBackend
Co
Commit mmi
Commit Message ted
Repository Branch Commit Id Message Body on
Se
arreglaro
fix(crossOrigin n los
EdGaR-MaLcA/ 452b062a460397ccb ): fixed parámetr 11/4
Import_It_Web_Appl test e539853ef346cb7ecf parameters of os de /202
ication d009b crossOrigin crossOri 2
dependency gin
depende
ncies.
Se
agregaro
SebastianMontes99/ bd391b6af3846632f fix(test): add n las 11/4
Import_It_Web_Appl test a96638c82c5149161 dependency depende /202
ication 142a8c spring beans ncias 2
spring
beans.
Se
agregó
fix(test): add
el test
SebastianMontes99/ 32c2064ed12e5fdf16 StoreProducts 11/4
para el
Import_It_Web_Appl test 4831aa32dbd7c41d6 and /202
StorePro
ication 9acd9 ProductList 2
ducts y
test
Product
List
Se
feat(orders): agregó
edgar-anco/ 8d33e23e2d0e97eed 11/4
add el test
Import_It_Web_Appl test b00d2be462219fc42 /202
OrdersServiceI para el
ication 6c1ffa 2
mplTest Orders
service.
edgar-anco/ test 3173c7a7a3ca7086b feat(orders): Se 11/4

Import_It_Web_Appl 66edb82c5ee7e5c45 add agregó /202
ication 6d8b49 OrdersControll el test 2
erTest para el
Orders
controlle
r.
Se
agregó
feat(productW el test
RafaelUrquiaga2/ d140e241dfd341303 holesale): add para el 11/4
Import_It_Web_Appl test 3d4e45e78149d1d31 ProductWhole Product /202
ication f25f5c saleController Wholesa 2
Test le
controlle
r.
Se
agregó
feat(productW
el test
RafaelUrquiaga2/ 007083feb1dfcc9d31 holesale): add 11/4
para el
Import_It_Web_Appl test 4a4ee8346962712ec ProductWhole /202
Product
ication 6ec0c saleServiceIm 2
Wholesa
plTest
le
service.
Se
agregó
feat(Directions
el test
gonzalobarrazueta/ f12b9f4c4871d87fda Test): added 11/4
para
Import_It_Web_Appl test 06c6a71f3aa9a9d98e test for /202
Directio
ication 2d41 Directions 2
ns
controller
controlle
r.
Se
feat(Directions agregó
gonzalobarrazueta/ 3dab234a5e6f12486 Test): added el test 11/4
Import_It_Web_Appl test 3b82ba6e578d9e8a6 test for para /202
ication 7d13f7 Directions Directio 2
Service ns
Service.
EdGaR-MaLcA/ test c300fcbff0e7b7b4d4 feat(coupon Se 11/4

Import_It_Web_Appl 14438d0512a17addd Test): added agregó /202
el test
test for para el
ication 253c5 Coupon Coupon 2
controller controlle
r.
Se
feat(coupon
agregó
EdGaR-MaLcA/ 4ca0fbd3ce665600ff Test): added 11/4
el test
Import_It_Web_Appl test 7a868325060fb0a1b test for /202
para
ication 7e540 Coupon 2
Coupon
service
service.
Se
agregó
feat(domesticS el test
EdGaR-MaLcA/ 7e2d25d5d6944c3f5 hipmentTest): para el 11/4
Import_It_Web_Appl test e24c457ad630e8238 added test for Domesti /202
ication 9906ec DomesticShip cShipme 2
ment controller nt
controlle
r.
Se
agregó
feat(testContro
RafaelUrquiaga2/ 5344099bb2f1acf4ab el test 11/4
ller): add test
Import_It_Web_Appl test 327c77f428196138c para el /202
for user
ication 51756 user 2
controller
controlle
r.
Se
agregó
feat(domesticS
el test
EdGaR-MaLcA/ 8176c1728ee842a86 hipmentTest): 11/4
para el
Import_It_Web_Appl test f3650d71af4289baa0 added test for /202
Domesti
ication 3f341 DomesticShip 2
cShipme
ment service
nt
service.
Se
agregó
RafaelUrquiaga2/ 2de9d5988a6902ae2 feat(test): add 11/4
el test
Import_It_Web_Appl test 33ceafe55d2804001 test for user /202
para el
ication d40a5f entity 2
User
Entity.
Se
agregó
feat(Directions
el test
gonzalobarrazueta/ 6cc33ebb4c93f420f7 Test): added 11/3
para el
Import_It_Web_Appl test 0a4aba7537df970d0 test for /202
Directio
ication a2a0a Directions 2
ns
controller
controlle
r.
Se
feat(Directions agregó
gonzalobarrazueta/ e5b2efbd0cfd87128e Test): added el test 11/3
Import_It_Web_Appl test b1990256482a71256 test for para el /202
ication 18a35 Directions Directio 2
Service n
Service
Se
agregó
feat(couponTe
fd165cb6c8b3c5f27e el test 11/3
EdGaR-MaLcA st): added test
test 2b4ef3157884d51ef para el /202
/Import_It_Web_App for Coupon
0aa07 Coupon 2
lication controller
controlle
r.
Se
feat(couponTe agrego
eee6a456676c53d91 11/3
EdGaR-MaLcA st): added test el test
test b01daffc8e75c73ccf /202
/Import_It_Web_App for Coupon para el
83ff1 2
lication service Coupon
Service.
SebastianMontes99/ directio c1fafac521102cd807 feat(StoreProd Se 11/3

agrega la
ucts): add
función
StoreProducts
Import_It_Web_Appl 7fd598908a55d4efac StorePro /202
ns function -
ication a286 ducts y 2
ProductList
Product
function
List
Se
agrega el
feat(Directions repositor
gonzalobarrazueta/ 05d32ebe9061bea12 ): added io para 11/3
directio
Import_It_Web_Appl 5f44ab20482842e4c repository for el /202
ns
ication 7d6ca0 Directions "Directi 2
component ons
compone
nt"
Se
agrega el
servicio
feat(Directions
y su
): added
gonzalobarrazueta/ 3c9424ca027ebcf55 impleme 11/3
directio service and its
Import_It_Web_Appl b017d016036bc3e5c ntación /202
ns implementatio
ication 6869f3 para el 2
n for
"Directi
Directions
ons
compone
nt"
Se
agregó
la
feat(Directions
gonzalobarrazueta/ afd20a0e962ed786cf entidad 11/3
directio ): added entity
Import_It_Web_Appl b042254b7becdf0cb para el /202
ns for Directions
ication 1ea9d "Directi 2
component
ons
compone
nte"
gonzalobarrazueta/ directio 1b5b66629013e3bc8 feat(Directions Se 11/3

agrego
el
controla
): added
dor para
Import_It_Web_Appl ea8875a189cb59826 controller for /202
ns el
ication c9e5ab Directions 2
"Directi
component
ons
compone
nt"
Se
feat(TravelerO agrega la
SebastianMontes99/ b46f69aeb30191a62 11/2
Traveler rders): add función
Import_It_Web_Appl 687761cbb6fb30f30 /202
Orders TravelerOrders de
ication 01d798 2
function Traveler
Orders
Se
agrega el
feat(orders):
controla
edgar-anco 3156a690786559162 added 11/2
dor para
/Import_It_Web_App orders 3b7d3b39d9912a615 controller for /202
el
lication 05d2c5 Orders 2
Orders
component
compone
nt
Se
agrega el
feat(orders):
repositor
edgar-anco 24155ec7b11742b5f added 11/2
io para
/Import_It_Web_App orders 14834ee8445d28d59 repository for /202
el
lication 388049 Orders 2
Orders
component
compone
nt
Se
edgar-anco 61b8759bc52380fb9 feat(orders): 11/2
agrega la
/Import_It_Web_App orders 6c8a2a13c90d98b60 added service /202
impleme
lication 71c1bb implementatio 2
ntación
n for Orders
del
servicio
para el
component Orders
compone
nt
Se
agrega el
feat(orders):
edgar-anco bc073203f69887035 servicio 11/2
added service
/Import_It_Web_App orders 090d78ca6292a3ee3 para el /202
for Orders
lication a55d5c Orders 2
component
compone
nt
Se
agrega la
feat(orders):
edgar-anco f4ee541be37b1dc26 entidad 11/2
added entity
/Import_It_Web_App orders c2fe80154f7b30a40c para /202
for Orders
lication 659e3 "Orders 2
component
compone
nt"
Se
SebastianMontes99/ 8c90fa2763f668eaeb feat(Coupon): 11/2
agrega la
Import_It_Web_Appl Coupon e264babac7f72233c add coupon /202
función
ication 40807 function 2
coupon
RafaelUrquiaga2/ wholesa 6f117980b5737dc76 feat(wholesale Se 11/2

Import_It_Web_Appl le a95f66c9618e92b6fe ): add all about agrega el /202
ication 23355 wholesale controla 2
section dor,
impleme
ntación,
entidad,
servicio
para el
Wholesa
le
compone
nt
Se
agrega el
feat(domesticS
controla
hipment):
dor para
EdGaR-MaLcA/ domesti 07a89c17f8eef24f77 added 11/2
el
Import_It_Web_Appl cShipm b2c2a20f1cb4afcb66 controller for /202
Domesti
ication ent c5a2 DomesticShip 2
cShipme
ment
nt
component
compone
nt
Se
agrega el
feat(domesticS
repositor
hipment):
io para
EdGaR-MaLcA/ domesti dae6c6f3835fcd6e63 added 11/2
el
Import_It_Web_Appl cShipm 506057bb23707a095 repository for /202
Domesti
ication ent c2634 DomesticShip 2
cShipme
ment
nt
component
compone
nt
Se
agrega la
impleme
feat(domesticS ntación
hipment): del
EdGaR-MaLcA/ domesti 632f84b9d3973dabc 11/2
added service servicio
Import_It_Web_Appl cShipm 7159a1122c3d3589a /202
implementatio para el
ication ent 65b6bd 2
n for Domesti
DomesticShip cShipme
nt
compone
nt
feat(domesticS Se 11/2
EdGaR-MaLcA/ domesti a66f9388d62a5dd41
hipment): agrega el /202
Import_It_Web_Appl cShipm 0c034c354238192c2
added service servicio 2
para el
for Domesti
DomesticShip cShipme
ication ent 8c4237
ment nt
component compone
nt
feat(domesticS
Se
hipment):
agrega la
EdGaR-MaLcA/ domesti ad4836d25b4b5a132 added entity 11/2
entidad
Import_It_Web_Appl cShipm 10ea18fffbbf7c1a26 for /202
"Domest
ication ent 734a7 DomesticShip 2
icShipm
ment
ent"
component
SebastianMontes99o/ 21913350fdaef1cfe6 10/3

Commit
Import_It_Web_Appl master 07e2419abf499698c Initial commit 1/20
inicial
ication 2c526 22
Para el presente entregable se han desarrollado unit tests y se presentan a continuación
la tabla que indica con que rama y con que desarrollador está relacionado.
Repository Branc Commit Id Commit Message Commit Message Co

h Body mmi
ted
on
(Dat
e)
RafaelUrqui /test d815152d2c feat(test): add test Added multiple 3

aga2/ 618d26712a for user entity tests that align with nov.
SpringBoot 03df1398cb what was 202
AppBacken a06ddc1e70 implemented in the 2
d UsersImpl file 17:4
9
GM
T+1
EdGaR- /test 1e03affd81 feat(domesticShip Added multiple 3

MaLcA/ 5be1f3746f mentTest): added test that align with nov.
SpringBoot c0a42cdfcaa test for what was 202
AppBacken 6f29fd494 DomesticShipment implemented in the 2
d service DomesticShipment 18:3
Impl files 2
GM
T+1
RafaelUrqui /test 83075a74c2 feat(testController) Added test 3

aga2/ 0691740789 : add test for user controller for the nov.
SpringBoot cf7f7affae5 controller Users tests 202
AppBacken 04e0061fb 2
d 22:4
6
GM
T+1
EdGaR- /test ad2e3defda feat(domesticShip Added test 3

MaLcA/ 3260c06614 mentTest): added controller for the nov.
SpringBoot f2aa5fca81b test for DosmesticShipmen 202
AppBacken e2b6df1ba DomesticShipment ts tests 2
d controller 23:4
9
GM
T+1
EdGaR- /test eee6a45667 feat(couponTest): Added multiple 4

MaLcA/ 6c53d91b01 added test for test that align with nov.
SpringBoot daffc8e75c7 Coupon service what was 202
AppBacken 3ccf83ff1 implemented in the 2
d CouponServicetIm 00:3
pl files 2
GM
T+1
EdGaR- /test fd165cb6c8 feat(couponTest): Added test 4

MaLcA/ b3c5f27e2b added test for controller for the nov.
SpringBoot 4ef3157884 Coupon controller Coupon tests 202
AppBacken d51ef0aa07 2
d 00:3
2
GM
T+1
gonzalobarr /test e5b2efbd0cf feat(DirectionsTest Added multiple 4

azueta/ d87128eb19 ): added test for tests that align with nov.
SpringBoot 90256482a7 Directions Service what was 202
AppBacken 125618a35 implemented in the 2
d DirectionsImpl file 02:3
2
GM
T+1
gonzalobarr /test 6cc33ebb4c feat(DirectionsTest Added test 4

azueta/ 93f420f70a ): added test for controller for the nov.
SpringBoot 4aba7537df Directions Directions tests 202
AppBacken 970d0a2a0a controller 2
d 03:1
2
GM
T+1
RafaelUrqui /test 007083feb1 feat(productWhole Added multiple 5

aga2/ dfcc9d314a sale): add tests that align with nov.
SpringBoot 4ee8346962 ProductWholesaleS what was 202
AppBacken 712ec6ec0c erviceImplTest implemented in the 2
d ProductWholesale 02:5
ServiceImpl file 3
GM
T+1
RafaelUrqui /test d140e241df feat(productWhole Added test 5

aga2/ d3413033d4 sale): add controller for the nov.
SpringBoot e45e78149d ProductWholesale ProductWholesale 202
AppBacken 1d31f25f5c ControllerTest tests 2
d 03:2
0
GM
T+1
edgar-anco/ /test 3173c7a7a3 feat(orders): add Added test 5

SpringBoot ca7086b66e OrdersControllerTe controller for the nov.
AppBacken db82c5ee7e st OrdersController 202
d 5c456d8b49 tests 2
04:1
4
GM
T+1
edgar-anco/ /test 8d33e23e2d feat(orders): add Added multiple 5

SpringBoot 0e97eedb00 OrdersServiceImpl tests that align with nov.
AppBacken d2be462219 Test what was 202
d fc426c1ffa implemented in the 2
OrdersServiceImpl 04:1
file 5
GM
T+1
SebastianM /test 32c2064ed1 fix(test): add Added multiple 5

ontes99/ 2e5fdf1648 StoreProducts and tests that align with nov.
SpringBoot 31aa32dbd7 ProductList test what was 202
AppBacken c41d69acd9 implemented in the 2
d Store and Products 05:2
files 3
GM
T+1
SebastianM /test bd391b6af3 fix(test): add Added necessary 5

ontes99/ 846632fa96 dependenci spring dependencies nov.
SpringBoot 638c82c514 beans 202
AppBacken 9161142a8c 2
d 05:4
8
GM
T+1
A continuación, se muestra la mejora del Landing Page, para atraer a nuevos clientes:
Home: Se muestra el toolbar. Asimismo, se presenta una sección donde el usuario podrá
leer un mensaje que lo impulsa a probar nuestro servicio, así como su respectivo call to
action para acceder a nuestro web application.
Discover: Se muestra un carrusel con información importante sobre Import It y los

valores que lo caracterizan.
Statistics: Se muestran estadísticas que reflejan el trabajo de Import It, y ayudan a captar
clientes.
Reviews: Comentarios que validan nuestro trabajo y experiencia con nuestra aplicación.
About: Sección donde los usuarios podrán visualizar videos sobre el producto y el
equipo en el proceso de desarrollo.
Link del landing page: https://mirai-open-source-sw52-grupo-3.github.io/Landing-Page-
Import-It/public/
A continuación, se muestra screenshots del web application desarrollado
Customer Orders: En esta view, se muestran todas las ordenes de los usuarios clientes,
para los usuarios viajeros, los cuales podrán ver cada orden a detalle y seleccionar
aquellas que se adapten a sus dimensiones de maleta o equipaje.
Vista a detalle:
Cuando da a click a el botón select order, lo agregara a la lista de órdenes del viajero:
Y se agregara en la vista de my wallet:
Finalmente, se implementó que en todas las vistas tanto como para cliente comprador o
viajero sean responsive design. Asimismo, se actualizaron las rutas para el backend:
Link de video de Web Application Navigation – Sprint 4:
https://web.microsoftstream.com/video/3135d2c1-187a-4272-83f3-b5d5dfc2fe44
Web Application
Obtuvimos el siguiente enlace: import-it.netlify.app

Para el Sprint 4 aún se inició la implementación de los Web Services a nivel local. A
continuación, se muestra la documentación en relación de los endpoints.
HTTP etros

api/users información
usuarios.
"name": "string",
"genre": "string",
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”
}
]

api/users/{id} "dni": 0, del usuario
del que se
"name": "string",
hace la
el Id.
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”

api/users guardar un
"dni": 0, nuevo
base de
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”
}
]

localhost:9090/ la
api/users/{id} "dni": 0, información
del cliente
"name": "string",
mediante el
especificado
"month": "0", por
parámetro.
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”
}

api/users/{id} "dni": 0, especificado
mediante el
"name": "string",
Id
"genre": "string",
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”
orders Get http://localhost: [ Se retorna un

9090/api/orders { array con la
información
url orders.
"name": "string",
"tittle": "string",
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",

"id": “0”
}
]
orders Get http://localhost: Id { Se retorna la

9090/api/orders/ información
{id} "url": "string", del URL
order del que
"name": "string",
se hace la
el Id.
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
orders Post http://localhost: [ Este método

9090/api/orders { sirve para
guardar un
order en la
"name": "string",
base de
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",

"id": “0”
}
]
orders Put http://localhost: Id { Se actualiza

9090/api/orders/ la
{id} "url": "string", información
del URL
"name": "string",
order
Id
"weight": "0", especificado
por
" amount": "0", parámetro.
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
orders Delete http://localhost: Id { Se elimina el

9090/api/orders/ URL order
{id} "url": "string", especificado
mediante el
"name": "string",
Id
"tittle": "string",
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",

"id": “0”
domesticS Get http://localhost: [ Se retorna un

hipment 9090/api/domest { array con la
icShipment información
envíos
"imageProduct":
nacionales
"string",
(domestic
"userId": "0", shipments).
"productName":
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"
}
]

hipment localhost:9090/ información
api/ "id": 0, del envío del
domesticShipme que se hace
"imageProduct":
nt/{id} la consulta
"string",
con el Id.
"userId": "0",
"productName":
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"

hipment localhost:9090/ { sirve para
api/ guardar un
domesticShipme "id": 0, nuevo envío
nt en la base de
"imageProduct":
datos.
"string",
"userId": "0",
"productName":
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"
}
]

hipment localhost:9090/ la
api/ "id": 0, información
domesticShipme del envío
"imageProduct":
nt/{id} mediante el
"string",
Id
por
"productName": parámetro.
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"

hipment localhost:9090/ envío
api/ "id": 0, especificado
"imageProduct":
nt/{id} Id.
"string",
"userId": "0",
"productName":
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"
coupon Get http://localhost: [ Se retorna un

9090/api/coupon { array con la
información
cupones.
"title": "string",
"discount": "0",
"code": "string",
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
}
]
coupon Get https:// Id { Se retorna la

api/coupon/{id} "id": 0, del cupón
del que se
"title": "string",
hace la
el Id.
"code": "string",
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
coupon Post https:// [ Este método

api/coupon guardar un
"id": 0, nuevo cupón
en la base de
"title": "string",
datos.
"discount": "0",
"code": "string",
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
coupon Put https:// Id { Se actualiza

localhost:9090/ la
api/coupon/{id} "id": 0, información
del cupón
"title": "string",
mediante el
"discount": "0", Id
especificado
"code": "string", por
parámetro.
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
coupon Delete https:// Id { Se elimina el

localhost:9090/ cupón
api/coupon/{id} "id": 0, especificado
mediante el
"title": "string",
Id.
"discount": "0",
"code": "string",
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
travelerOr Get http://localhost: [ Se retorna un

ders 9090/api/travele { array con la
rOrders información
url orders.
"name": "string",
"tittle": "string",
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
}
]
travelerOr Get http://localhost: Id { Se retorna la

ders 9090/api/travele información
rOrders/{id} "url": "string", del URL
order del que
"name": "string",
se hace la
el Id.
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
travelerOr Post http://localhost: [ Este método

ders 9090/api/travele { sirve para
rOrders guardar un
order en la
"name": "string",
base de
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
}
]
travelerOr Put http://localhost: Id { Se actualiza

ders 9090/api/travele la
rOrders/{id} "url": "string", información
del URL
"name": "string",
order
Id
por
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
travelerOr Delete http://localhost: Id { Se elimina el

ders 9090/api/travele URL order
rOrders/{id} "url": "string", especificado
mediante el
"name": "string",
Id
"tittle": "string",
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
storeProd Get http://localhost: [ Se retorna un

ucts 9090/api/storePr { array con la
oducts información
"category": "string", de todos los
productos
"productsAvailables
por
":
categoría.
[
{
"name": "string",
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]
}
]

ucts localhost:9090/ información
api/ "category": "string", del producto
storeProducts/ por categoría
"productsAvailables
{id} del que se
":
hace la
[ consulta con
{ el Id.
"name": "string",
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]

ucts localhost:9090/ { sirve para
api/ guardar un
storeProducts "category": "string", nuevo
producto por
"productsAvailables
categoría en
":
la base de
[ datos.
{
"name": "string",
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]

ucts localhost:9090/ la
api/ "category": "string", información
storeProducts/ del producto
"productsAvailables
{id} por categoría
":
mediante el
[ Id
{ especificado
por
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]

ucts localhost:9090/ producto por
api/ "category": "string", categoría
storeProducts/ especificado
"productsAvailables
{id} mediante el
":
Id.
[
{
"name": "string",
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]
productLi Get http://localhost: [ Se retorna un

st 9090/api/produc { array con la
tList información
tiendas.
"productsList":
[
{
"name": "string",
"imageURL":
"string",
"price": "0",
}
]
}
]
productLi Get https:// Id { Se retorna la

st localhost:9090/ tienda de la
api/ "name": "string", que se hace
productList/{id} la consulta
"productsList":
con el Id.
[
{
"name": "string",
"imageURL":
"string",
"price": "0",
}
]
productLi Post https:// [ Este método

st localhost:9090/ { sirve para
api/productList guardar una
"name": "string", nueva tienda
en la base de
"productsList":
datos.
[
{
"name": "string",
"imageURL":
"string",
"price": "0",
}
]
productLi Put https:// Id { Se actualiza

st localhost:9090/ la
api/ "name": "string", información
productList/{id} de la tienda
"productsList":
mediante el
[ Id
{ especificado
por
"imageURL":
"string",
"price": "0",
}
]
productLi Delete https:// Id { Se elimina la

st localhost:9090/ tienda
api/ "name": "string", especificada
productList/{id} mediante el
"productsList":
Id.
[
{
"name": "string",
"imageURL":
"string",
"price": "0",
}
]
}
directions Get http://localhost: [ Se retorna un

9090/api/directi { array con la
ons información
direcciones.
"lastName":
"string",
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"
}
]
directions Get https:// Id { Se retorna la

localhost:9090/ dirección de
api/directions/ "name": "string", la que se
{id} hace la
"lastName":
consulta con
"string",
el Id.
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"
}
directions Post https:// [ Este método

api/directions guardar una
"name": "string", nueva
dirección en
"lastName":
la base de
"string",
datos.
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"
directions Put https:// Id { Se actualiza

localhost:9090/ la
api/directions/ "name": "string", información
{id} de la
"lastName":
dirección
"string",
mediante el
"phone": "0", Id
especificado
"direction1": por
"string", parámetro.
"department":
"string",
"id": "0"
}
directions Delete https:// Id { Se elimina la

localhost:9090/ dirección
api/directions/ "name": "string", especificada
{id} mediante el
"lastName":
Id.
"string",
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"
products Get http://localhost: [ Se retorna un

Wholesale 9090/api/produc { array con la
tsWholesale información
compras al
"quantity": "0",
por mayor.
"price": "0",
"description":
"string",
"string",
"string",
"string",
"department":
"string",
"id": "0"
}
]

api/ "name": "string", pormayor de
productsWholes la que se
"lastName":
ale/{id} hace la
"string",
consulta con
"direction1":
"string",
"department":
"string",
"id": "0"

Wholesale localhost:9090/ { sirve para
api/ guardar una
productsWholes "name": "string", nueva
ale compra al
"lastName":
por mayor en
"string",
la base de
"direction1":
"string",
"department":
"string",
"id": "0"

Wholesale localhost:9090/ la
api/ "name": "string", información
productsWholes de la compra
"lastName":
ale/{id} al por mayor
"string",
mediante el
"phone": "0", Id
especificado
"direction1": por
"department":
"string",
"id": "0"

api/ "name": "string", por mayor
productsWholes especificada
"lastName":
ale/{id} mediante el
"string",
Id.
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"
}
Evidencias del Backend desarrollado en local con Swagger:
Asimismo, se muestran los diferentes controllers implementados:

Para el deployment del web application se realizó mediante Netlify. Para ello, se realizó
la siguiente configuración en nuestro proyecto para crear la carpeta dist y luego
desplegar en Netlify.
Link de Netlify:

Luego, entramos a Netlify y vamos a la opción de subir sitio web manualmente. Ahí
Evidencia del despliegue:

Se utilizaron las estadísticas que te brinda GitHub para ver quiénes colaboraron con el
proyecto de la landing page, web application y web services con commits, tal como se
muestra a continuación.
Link de Web Application GitHub: https://github.com/MIRAI-Open-Source-SW52-

Grupo-3/Import_It_Web_Application
Web Application:
Semana que duro el Sprint.
Participaron todos los integrantes del equipo y se puede ver en la sección commits o
contribuitors aquellos que participaron:
Network, donde se evidencia el trabajo con GitFlow.
Link de Web Services GitHub: https://github.com/MIRAI-Open-Source-SW52-Grupo-

3/SpringBootAppBackend
Web Services
Semana que duro el sprint
Contribuidores con la cantidad de commits:
Network: Proceso donde se visualiza el GitFlow.

5.2.5. Sprint 5
En el presente sprint se realizaron algunas tareas de mejoras, las cuales se mostrarán a
continuación en una tabla con el sprint backlog.
Sprint Sprint5
User Story Task
Tittle Assigned
Id Tittle Id Description Hours to Status
US01 Persona no Arreglar campo

registrada Registro repetido para el Sebastian
se registra TSG01 2 horas Done
de usuario campo de Montes
con un teléfono.
correo y
contraseña, TSG02 Registro Arreglar sección 2 horas Edgar Done
etc. de usuario de registro Malca
donde valida que
la contraseña es
mayor igual a 8
caracteres.
Comprador Arreglar que

quiere cuando el
agregar un usuario compre
US01 Agregar Rafael
producto a TSG03 en la sección 2 horas Done
4 una orden Urquiaga
su maleta Buy Wholesale
virtual de se guarde en my
pedidos orders
Comprador
quiere Visualizac Estandarizar
US02 Edgar
validar el TSG04 ión de todo la moneda a 2 horas Done
0 Anco
pago de su pago dólares
pedido
quiere Registrar responsive Gonzalo
US02
registrar TSG05 una design para la 2 horas Barrazuet Done
6
una dirección sección a
dirección directions

Import_It_Web_Application
Commit Commit Commit

Repository Branch Id Commit Message Message Body ed on
EdGaR- 6f85cdd86
MaLcA/ 6a8944134
fix: fixed paths Se arreglaron
Import_It_ develop 60ae2908e 11/6/2022
with the backend paths del backend
Web_Appli f132c0cfb0
cation 2d3
EdGaR-
9536f21fc0 Se agregó el
MaLcA/ fix: changes of
df8fe699ac basepath 11/16/202
Import_It_ develop paths to connect
4756afdf29 conecction para el 2
Web_Appli backend
e0fd58fd64 backend
cation
SebastianM c8e237a9f
ontes99o/ 396a3661d
fix(master): update Se agregó la ruta 11/16/202
Import_It_ master 1b5761fc3
BasePath Backend para el backend 2
Web_Appli 5b7ab956c
cation b00f
SebastianM e53035c8e
ontes99o/ b0d2d6bb0
Import_It_ master d5241e81d
BasePath Backend para el backend 2
Web_Appli 378f13da8
cation 5d4d
SebastianM cee1f9569
ontes99o/ 0deafb2f8f
Import_It_ master 8f6abc585
basePath https para el backend 2
Web_Appli b3f4d33fed
cation a4
edgar- b9c67c91d
anco/ 6cae69ecb Se elimino la
fix(chat): remove 11/19/202
Import_It_ develop a677dc310 sección chats, que
chats section 2
Web_Appli b74b93f04 era innecesaria
cation 5015
EdGaR- b87ae08a8
MaLcA/ 6b464f834 fix: added new Se arreglo un
11/21/202
Import_It_ develop 22da62fff1 changes to user campo repetido en
2
Web_Appli c966cb13b registration el registro
cation de9
EdGaR- f6840a128
fix: some features Se corrigieron 11/21/202
MaLcA/ develop 8da4c84e4
about the front typos 2
Import_It_ afbe2d34b
Web_Appli 4df2a18b4
cation 7400
Gonzalo- d2550d92f
fix: added
Barrazueta/ c5b112512
responsiveness to Agregó responsive 11/21/202
Import_It_ develop 2a61e3456
the direction a direction section 2
Web_Appli b88a42fb9
component
cation c8e3
Gonzalo- e509748dc
fix: added
Barrazueta/ ce43a9ae5
responsiveness to Agregó responsive 11/21/202
Import_It_ develop cfc2e1677f
the directioninfo a direction section 2
Web_Appli c4da81066
component
cation 721
SpringBootAppBackend
Commit
Bran Commit Message Comm
Repository ch Commit Id Message Body ited on
EdGaR- fix(pom)
Fixed
MaLcA/ devel 1071bb0c542dcd5c0e64f27d2b : change 11/16/
pom
SpringBootApp op 3a9116f7e923e1 java 2022
version
Backend version
SebastianMonte fix(pom)
Fixed
s99/ devel 31166d64fc659223a147651102 : change 11/16/
pom
SpringBootApp op f45fcc6de3f5b4 java 2022
version
Backend version
fix(pom)
Fixed
SebastianMonte : change
applicati
s99/ devel ad335e119181cb25806d12041d applicati 11/16/
on
SpringBootApp op 9200de2a23ad9d on 2022
Propertie
Backend propertie
s
s
Gonzalo- devel 01c63cfc5b0ba685a9e43170f04 feat: Se 11/18/

added agregó
Barrazueta/ cucumbe cucumbe
r r
SpringBootApp op f5a91802059b4
configur Configur
2022
Backend ation ation
files files.
feat:
Se
added
agregaro
Gonzalo- test for
n https
Barrazueta/ Coupon
devel b4c67c184ad08120a937a736ab request 11/18/
creation,
SpringBootApp op 575d0337e6a448 for the 2022
deletion
Backend test of
and
cucumbe
retrieval
r
(POST,

Para el presente entregable se han desarrollado los tests de cucumber y se presentan a
continuación la tabla que indica con que rama y con que desarrollador está relacionado.
Repository Branc Commit Id Commit Message Commit Message Co

h Body mmi
ted
on
(Dat
e)
Gonzalo-
Barrazueta/ 01c63cfc5b
feat: added Se agregó 11/1
develo 0ba685a9e4
SpringBoot cucumber cucumber 8/20
p 3170f04f5a
AppBacken configuration files Configuration files. 22
91802059b4
d
Gonzalo-
Barrazueta/ b4c67c184a feat: added test for
Se agregaron https 11/1
develo d08120a937 Coupon creation,
SpringBoot request for the test 8/20
p a736ab575d deletion, and
AppBacken of cucumber 22
0337e6a448 retrieval (POST,
d
Realizamos 3 escenarios diferentes que testeaban el Servicio de los Cupones haciendo
uso del proceso Behavior-Driven Development (BDD) para que todos entendamos qué
es lo que se está probando de una manera simple.
Uno de los tests, prueba el método POST. Este envía un objeto Coupon al API y, si la
prueba es exitosa, nuestro código comparará el código de respuesta que nos devuelve
con el que se espera (201).
En el caso de la prueba del método DELETE, se eliminará el registro con id 12 y, si la

prueba es exitosa, nos enviará un código de respuesta 200.
Para la última prueba, probamos el método GET, donde enviaremos un id y, si la prueba

es exitosa, nos devolverá un código de respuesta 200.
A continuación, se muestra la mejora aplicada a nuestro frontend y landing page para el
presente entregable:
Landing Page
About: Sección donde los usuarios podrán visualizar videos sobre el producto y el
equipo en el proceso de desarrollo. Se actualizaron con los nuevos videos con nueva
edición.
Link del landing page: https://mirai-open-source-sw52-grupo-3.github.io/Landing-Page-

Import-It/public/
Web Applications Front End
A continuación, se muestra screenshots del web application desarrollado
Profile: En esta view, se quitó un botón de Update, que su función era irrelevante para el
contenido de la view.
Calculator: Se coloco una imagen por defecto que no confunda al usuario. Antes habia
una imagen de un iphone que no estaba acorde a la categoria seleccionada:
Direcciones: La vista cuenta con responsive, que ha sido implementado en este sprint:
Register View: Se elimino el campo repetido y se arregló el input box a que se adapte al
contenido.
Finalmente, se implementó que en todas las vistas tanto como para cliente comprador o
viajero sean responsive design. Asimismo, se actualizaron las rutas para el backend ya
con el link desplegado en Heroku:
Link de video de Web Application Navigation – Sprint 5:

https://web.microsoftstream.com/video/e3fa603c-7527-416c-91e6-0e5d5b51690a
Web Application
Obtuvimos el siguiente enlace: import-it.netlify.app


Para el Sprint 5 aún la implementación de los Web Services se realizó a nivel de hosting
en Heroku. A continuación, se muestra la documentación en relación de los endpoints.
HTTP etros
users Get https:// [ Se retorna un

importidbackend { array con la
.herokuapp.com/ información
api/users "dni": 0, de todos los
usuarios.
"name": "string",
"genre": "string",
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”
}
]

importidbackend información
.herokuapp.com/ "dni": 0, del usuario
api/users/{id} del que se
"name": "string",
hace la
el Id.
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”

importidbackend { sirve para
.herokuapp.com/ guardar un
api/users "dni": 0, nuevo
cliente en la
"name": "string",
base de
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”
}
]

importidbackend la
.herokuapp.com/ "dni": 0, información
api/users/{id} del cliente
"name": "string",
mediante el
especificado
"month": "0", por
parámetro.
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”

importidbackend usuario
.herokuapp.com/ "dni": 0, especificado
api/users/{id} mediante el
"name": "string",
Id
"genre": "string",
"month": "0",
"day": "0",
"year": "0",
"email": "string",
"phone": “0",
"password":
"string",
"id": “0”
orders Get https:// [ Se retorna un

importidbackend array con la
.herokuapp.com/ { información
api/orders de todas las
"url": "string", url orders.
"name": "string",
"tittle": "string",
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
}
]
orders Get https:// Id { Se retorna la

.herokuapp.com/ "url": "string", del URL
api/orders/{id} order del que
"name": "string",
se hace la
el Id.
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
}
orders Post https:// [ Este método
api/orders "url": "string", nuevo URL
order en la
"name": "string",
base de
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
}
]
orders Put https:// Id { Se actualiza

importidbackend la
.herokuapp.com/ "url": "string", información
api/orders/{id} del URL
"name": "string",
order
Id
por
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
}
orders Delete https:// Id { Se elimina el
importidbackend URL order
.herokuapp.com/ "url": "string", especificado
api/orders/{id} mediante el
"name": "string",
Id
"tittle": "string",
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
domesticS Get https:// [ Se retorna un

hipment importidbackend { array con la
api/ "id": 0, de todos los
domesticShipme envíos
"imageProduct":
nt nacionales
"string",
(domestic
"userId": "0", shipments).
"productName":
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"
}
]

hipment importidbackend información
.herokuapp.com/ "id": 0, del envío del
api/ que se hace
"imageProduct":
domesticShipme la consulta
"string",
nt/{id} con el Id.
"userId": "0",
"productName":
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"

hipment importidbackend { sirve para
api/ "id": 0, nuevo envío
domesticShipme en la base de
"imageProduct":
nt datos.
"string",
"userId": "0",
"productName":
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"
}
]

hipment importidbackend la
.herokuapp.com/ "id": 0, información
api/ del envío
"imageProduct":
"string",
nt/{id} Id
por
"productName": parámetro.
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"

hipment importidbackend envío
.herokuapp.com/ "id": 0, especificado
api/ mediante el
"imageProduct":
domesticShipme Id.
"string",
nt/{id}
"userId": "0",
"productName":
"string",
"date": "string",
"departureTime":
"0",
"shippingDate":
"string",
"shippingManager":
"string",
"totalCost": “0",
"trackingCode":
"string ",
"destiny": "string"
coupon Get https:// [ Se retorna un

api/coupon "id": 0, de todos los
cupones.
"title": "string",
"discount": "0",
"code": "string",
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
}
]
coupon Get https:// Id { Se retorna la

.herokuapp.com/ "id": 0, del cupón
api/coupon/{id} del que se
"title": "string",
hace la
el Id.
"code": "string",
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
coupon Post https:// [ Este método

api/coupon "id": 0, nuevo cupón
en la base de
"title": "string",
datos.
"discount": "0",
"code": "string",
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
coupon Put https:// Id { Se actualiza

importidbackend la
.herokuapp.com/ "id": 0, información
api/coupon/{id} del cupón
"title": "string",
mediante el
"discount": "0", Id
especificado
"code": "string", por
parámetro.
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
coupon Delete https:// Id { Se elimina el

importidbackend cupón
.herokuapp.com/ "id": 0, especificado
api/coupon/{id} mediante el
"title": "string",
Id.
"discount": "0",
"code": "string",
"validDate":
"string",
"situation":
"boolean",
"description":
"string"
travelerOr Get https:// [ Se retorna un

ders importidbackend { array con la
api/ "url": "string", de todas las
travelerOrders url orders.
"name": "string",
"tittle": "string",
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
}
]
travelerOr Get https:// Id { Se retorna la

ders importidbackend información
.herokuapp.com/ "url": "string", del URL
api/ order del que
"name": "string",
travelerOrders/ se hace la
{id} "tittle": "string", consulta con
el Id.
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
travelerOr Post https:// [ Este método

ders importidbackend { sirve para
api/ "url": "string", nuevo URL
travelerOrders order en la
"name": "string",
base de
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
}
]
travelerOr Put https:// Id { Se actualiza

ders importidbackend la
.herokuapp.com/ "url": "string", información
api/ del URL
"name": "string",
travelerOrders/ order
{id} "tittle": "string", mediante el
Id
por
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
travelerOr Delete https:// Id { Se elimina el

ders importidbackend URL order
.herokuapp.com/ "url": "string", especificado
api/ mediante el
"name": "string",
travelerOrders/ Id
{id} "tittle": "string",
"weight": "0",
" amount": "0",
"price": "0",
"status": "string",
"comision": “0",
"dni": "string ",
"id": “0”
storeProd Get https:// [ Se retorna un

ucts importidbackend { array con la
api/ "category": "string", de todos los
storeProducts productos
"productsAvailables
por
":
categoría.
[
{
"name": "string",
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]
}
]

ucts importidbackend información
.herokuapp.com/ "category": "string", del producto
api/ por categoría
"productsAvailables
storeProducts/ del que se
":
{id} hace la
[ consulta con
{ el Id.
"name": "string",
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]

ucts importidbackend { sirve para
api/ "category": "string", nuevo
storeProducts producto por
"productsAvailables
categoría en
":
la base de
[ datos.
{
"name": "string",
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]

ucts importidbackend la
.herokuapp.com/ "category": "string", información
api/ del producto
"productsAvailables
storeProducts/ por categoría
":
{id} mediante el
[ Id
{ especificado
por
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]

ucts importidbackend producto por
.herokuapp.com/ "category": "string", categoría
api/ especificado
"productsAvailables
storeProducts/ mediante el
":
{id} Id.
[
{
"name": "string",
"price": "0",
"imageURL":
"string",
"productURL":
"string",
}
]
productLi Get https:// [ Se retorna un

st importidbackend { array con la
api/productList "name": "string", de todas las
tiendas.
"productsList":
[
{
"name": "string",
"imageURL":
"string",
"price": "0",
}
]
}
]
productLi Get https:// Id { Se retorna la

st importidbackend tienda de la
.herokuapp.com/ "name": "string", que se hace
api/ la consulta
"productsList":
productList/{id} con el Id.
[
{
"name": "string",
"imageURL":
"string",
"price": "0",
}
]
productLi Post https:// [ Este método

st importidbackend { sirve para
.herokuapp.com/ guardar una
api/productList "name": "string", nueva tienda
en la base de
"productsList":
datos.
[
{
"name": "string",
"imageURL":
"string",
"price": "0",
}
]
productLi Put https:// Id { Se actualiza

st importidbackend la
.herokuapp.com/ "name": "string", información
api/ de la tienda
"productsList":
productList/{id} mediante el
[ Id
{ especificado
por
"imageURL":
"string",
"price": "0",
}
]
productLi Delete https:// Id { Se elimina la

st importidbackend tienda
.herokuapp.com/ "name": "string", especificada
api/ mediante el
"productsList":
productList/{id} Id.
[
{
"name": "string",
"imageURL":
"string",
"price": "0",
}
]
directions Get https:// [ Se retorna un

api/directions "name": "string", de todas las
direcciones.
"lastName":
"string",
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"
}
]
directions Get https:// Id { Se retorna la
importidbackend dirección de
.herokuapp.com/ "name": "string", la que se
api/directions/ hace la
"lastName":
{id} consulta con
"string",
el Id.
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"
directions Post https:// [ Este método

api/directions "name": "string", nueva
dirección en
"lastName":
la base de
"string",
datos.
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"
]
directions Put https:// Id { Se actualiza
importidbackend la
api/directions/ de la
"lastName":
{id} dirección
"string",
mediante el
"phone": "0", Id
especificado
"direction1": por
"department":
"string",
"id": "0"
directions Delete https:// Id { Se elimina la

importidbackend dirección
.herokuapp.com/ "name": "string", especificada
api/directions/ mediante el
"lastName":
{id} Id.
"string",
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"
products Get https:// [ Se retorna un

Wholesale importidbackend { array con la
api/ "name": "string", de todas las
productsWholes compras al
ale "quantity": "0", por mayor.
"price": "0",
"description":
"string",
"string",
"string",
"string",
"department":
"string",
"id": "0"
}
]

Wholesale importidbackend compra al
.herokuapp.com/ "name": "string", pormayor de
api/ la que se
"lastName":
productsWholes hace la
"string",
ale/{id} consulta con
"direction1":
"string",
"department":
"string",
"id": "0"
}

Wholesale importidbackend { sirve para
api/ "name": "string", nueva
productsWholes compra al
"lastName":
ale por mayor en
"string",
la base de
"direction1":
"string",
"department":
"string",
"id": "0"

Wholesale importidbackend la
api/ de la compra
"lastName":
productsWholes al por mayor
"string",
ale/{id} mediante el
"phone": "0", Id
especificado
"direction1": por
"department":
"string",
"id": "0"
}

Wholesale importidbackend compra al
.herokuapp.com/ "name": "string", por mayor
api/ especificada
"lastName":
productsWholes mediante el
"string",
ale/{id} Id.
"phone": "0",
"direction1":
"string",
"department":
"string",
"id": "0"
Evidencias del Backend desarrollado en local con Swagger:

Asimismo, se muestran los diferentes controllers implementados:
Link del Backend desplegado: https://importidbackend.herokuapp.com/swagger-ui.html

Para el deployment del web application se realizó mediante Netlify. Para ello, se realizó
la siguiente configuración en nuestro proyecto para crear la carpeta dist y luego
desplegar en Netlify.
Link de Netlify:

Luego, entramos a Netlify y vamos a la opción de subir sitio web manualmente. Ahí
Evidencia del despliegue:

Despliegue del Backend por medio de Heroku:
Se muestra la pantalla principal del despliegue en Heroku
Tenemos una base de datos postgres virtual a nuestro backend

Se utilizo PgAdmin para poder administrar la base de datos vinculada al backend,
vinculándolo con las rutas que nos brinda Heroku
Para el despliegue del backend con Heroku se utilizaron los comandos que detalla
Se muestra el historial de actualizaciones del backend con los comandos
https://importidbackend.herokuapp.com/api/users
Para ver los endpoints con Swagger:
https://importidbackend.herokuapp.com/swagger-ui.html#

Se utilizaron las estadísticas que te brinda GitHub para ver quiénes colaboraron con el
proyecto de la landing page, web application y web services con commits, tal como se
muestra a continuación.
Link de Web Application GitHub: https://github.com/MIRAI-Open-Source-SW52-
Grupo-3/Import_It_Web_Application
Web Application:
Semana que duro el Sprint.
En este sprint, no se realizaron muchos commits, pues la mayoría del trabajo realizado
fue para perfeccionar el producto en base a responsive design y las observaciones de la
evaluación según heurística.
Network, donde se evidencia el trabajo con GitFlow.

Link de Web Services GitHub: https://github.com/MIRAI-Open-Source-SW52-Grupo-
3/SpringBootAppBackend
Web Services
Semana que duro el sprint
En este sprint, solo se agregaron commits para los tests de cucumber y la parte de
actualizacion del backend y la integracion de security al backend.
Network: Proceso donde se visualiza el GitFlow.

5.3. Validation Interviews
En esta sección, el equipo registra y explica las actividades de entrevistas de validación
durante el proyecto.
5.3.1. Diseño de Entrevistas

Se validarán los siguientes productos:
Landing Page: https://mirai-open-source-sw52-grupo-3.github.io/Landing-Page-Import-

It/public/
Web Application Front End: https://import-it.netlify.app/
User Flows a validar:
Segmento Objetivo Comprador


su DNI y contraseña correctamente, para poder ingresar a Import it, de lo contrario se
User Goal: Como comprador deseo registrarme para ingresar a Import It
mayor.

aparece un mensaje de transacción exitosa. Sin embargo, es posible que durante el
proceso los datos de la tarjeta sean ingresados incorrectamente por lo que la plataforma
lo resalará de rojo. Asimismo, puede haber un problema externo con su tarjeta o con el
sistema en ese momento, para lo cual la plataforma le mencionará cual puede ser el
problema.

en nuestras principales redes sociales y cuando se valide se mostrará un mensaje de
confirmación y se agregará en la sección cupones. De lo contrario, se mostrará un
mensaje de que no es válido.
orden en camino.

comisión le gustaría a pagar. En caso de que digite caracteres no válidos en el input de
“Subtotal”, entonces, se le mostrará una advertencia diciéndole que los datos son
incorrectos. Además, los bordes del cuadro serán pintados de rojo.
User Goal: Como un comprador, quiero visualizar mi billetera de la aplicación
comprador para visualizar su billetera y las transacciones generadas por los pagos
realizados de sus órdenes, tanto como no podrá ver ninguna si es que aún no ha
realizado ningún pago por una orden, asimismo puede visualizar las transacciones que
tanto están en proceso, validadas o invalidadas según la situación que está presente.
Iniciando en cualquier pantalla (en este caso, el perfil), podrá acceder a la sección “My
Wallet” para visualizar sus transacciones. Se muestra por defecto la pestaña de
transacciones registradas, por lo que deberá hacer click en la pestaña “see more” para
visualizar el mejor detalle de la transacción, en el caso no haya ninguna transacción
registrada se mostrará el mensaje “No transactions”
mi producto.
para visualizar las direcciones registradas. En el caso de tener direcciones registradas,
estas figuraran en la vista principal, así como la opción “+” para poder agregar una
nueva sección, en el caso no cuente con direcciones registradas solo se mostrará la
opción “+” para agregar una nueva, cuando registremos una dirección para que esta
pueda finalizar, deben contar con todos los caracteres válidos, caso contrario no se
podrá registrar, y solicitara que se ingresen los caracteres correctos para poder
continuar.
comprador para realizar el proceso de generar orden por medio de una URL. Iniciando
en cualquier pantalla (en este caso, el perfil), podrá acceder a la sección “URL Order”
para iniciar el llenado de los datos de la orden y así poder generarla, cabe resaltar que
dicha ventana consta de dos partes como datos primarios y secundarios, ambos con
validaciones de caracteres, ya que, si estos no cumplen con la condición, no podrán
continuar con el proceso, luego de generar la orden, se solicitarán detalles para que
finalmente la orden se publique
Segmento Objetivo Viajeros
iniciar sesión. Iniciará en el login, seleccionará la opción viajero e ingresará su DNI o
CE y contraseña correctamente, para poder ingresar a Import it, de lo contrario se
User Goal: Como viajero deseo registrarme para ingresar a Import It
User Goal: Como viajero deseo visualizar los ingresos que genere gracias a Import It
Se muestra el flujo con los happy y unhappy paths que seguirá el usuario para poder
visualizar las pantallas de Import It para acceder a sus ingresos.
viajero para visualizar las ordenes generadas por los compradore y poder ofertarse para
que la pueda tomar. Iniciando en cualquier pantalla (en este caso, el perfil), podrá
acceder a la sección “Customers Orders” para poder revisar si es que tiene Ordenes
solicitadas, o en el caso no lo tenga, el viajero podrá buscarlas según el filtro del nombre
del producto que le interesaría acceder a ofertarse.
5.3.2. Registro de Entrevistas
Segmento 1: Personas que desean importar productos de USA a Lima o provincias
 Entrevistado 1:
 Nombres y Apellidos: Edgar Hugo Malca Suarez
 Edad: 50 años
 Distrito: Los Olivos
 URL de Stream: https://web.microsoftstream.com/video/598220fa-a2f2-

4f92-9277-26659d5ea00f
 Timing y duración: 05:12, 7:27
La entrevista fue realizada a Edgar Hugo Malca Suarez, tiene 50 años y reside en
Los Olivos. Es miembro de las fuerzas armadas, casada y sus dispositivos de
preferencia son su celular, laptop. Sus principales canales digitales de interacción
son WhatsApp, Facebook y Instagram. Cuenta con habilidades como saber
trabajar bajo presión y ser proactivo. Además, cuenta con ciertas frustraciones
como la inseguridad ciudadana, la contaminación ambiental y la crisis económica.
Es una persona identificada con nuestro principal segmento objetivo pues en el
presente año se ha sumergido más en el comercio electrónico y ha identificado
que los productos en Estados Unidos son exclusivos y que tienen un precio de
venta menor que en Perú. Se realizo la entrevista de validación con el señor y su
primera impresión fue que la aplicación es intuitiva y que genera confianza al
brindar ciertas funcionalidades que son interesantes como poner el link del
producto a elección del cliente. Asimismo, nos menciona que los productos
tecnológicos son los que más le llaman la atención. Él ha investigado sobre
importar sus productos anteriormente y no ha encontrado una aplicación que
llame su atención. Sin embargo, menciona que import it puede ser una aplicación
que use en el futuro. El entrevistado nos comentó, que es importante tener un
tutorial para comenzar a una página web para traer productos del extranjero.
Finalmente, menciona que para contratar el servicio de una empresa dedica a traer
productos de USA o el servicio de un viajero, debe ser indispensable poder
visualizar los costos de lo que emplea el servicio.
 Entrevistado 2:
 Edad: 25 años

4f92-9277-26659d5ea00f
 Timing y duración: 12:39, 4:47 min
La entrevista fue realizada a Ashly Cartagena y reside en el distrito de San

Miguel. Al inicio, ella piensa que la aplicación es fácil de entender. Por ejemplo,
pudo inferir de qué se trataba cada opción en la barra de navegación por medio
del título que llevaban. Asimismo, piensa que es fácil de navegar y desplazarse
por la aplicación web. La única opción que no lo entendió rápidamente es la de
URL Order. A ella le gustó la sección para registrar la orden y opinó que se ve
completa y sencilla. En la sección Perfil, piensa que sería bueno añadir el campo
de dirección del usuario, ya que es un dato relevante. Por otra parte, mencionó
que algunas partes de la interfaz se ven vacías y preferiría agregar más colores,
por ejemplo, para que la aplicación web sea más atractiva. Aun así, ella piensa
que todas las vistas funcionan correctamente. En cuanto a la funcionalidad de la
Calculadora también le pareció intuitiva y fácil de usar. En general, la aplicación
le pareció sencilla y práctica. Es decir que no tuvo dificultad en entender el flujo
de las páginas y familiarizarse con ella. También, mencionó que se podría agregar
un poco más de información acerca del viajero encargado al producto y, en
cuanto a diseño, recomendó agregar más color para que le parezca más llamativo
a los usuarios.
 Entrevistado 3:
 Nombres y Apellidos: Carlos Elías Urquiaga Quesquén
 Edad: 41 años
 Distrito: Magdalena del Mar
4f92-9277-26659d5ea00f
 La entrevista fue realizada a Carlos Elías Urquiaga Quesquén, tiene 41 años y

reside en Magdalena del Mar. Es un emprendedor, soltero y sus dispositivos de
preferencia son su celular y su laptop. Sus principales canales digitales de
interacción son WhatsApp, Facebook y Google. Cuenta con habilidades como
liderazgo, aceptar otros puntos de vista, paciencia y trabajo en equipo. Además,
cuenta con ciertas frustraciones como el contexto político actual y la depreciación
del sol. Por otro lado, luego de dar un recorrido a través de nuestro sitio web,
mencionó que el sitio es intuitivo, fácil de usar y que la interfaz es muy cómoda.
Asimismo, el inicio de sesión de su usuario como comprador le parece práctico y
la navegación a través de las distintas secciones le parece fluida y fácil de
interpretar, ya que los títulos de las secciones describen muy bien su propósito.
De forma más específica, calificó algunas de las siguientes secciones de nuestro
sitio web. “Profile”, le parece suficiente la cantidad de datos personales que se
muestran en su perfil. “Calculator”, considera que esta sección expresa
claramente su propósito, las categorías de productos que manejamos le parecen
suficientes, ya que son las categorías que él utiliza y está convencido de utilizarla
antes de realizar alguna compra, debido a que lo ayudaría a estimar su
presupuesto. “Fasty”, esta sección la considera interesante ya que es una ventaja
tener productos del extranjero de forma rápida que ya se encuentran en nuestro
País, pero dependiendo de la situación preferiría utilizar la sección “URL Order”
para solicitar un producto en particular que no está en nuestros almacenes de
Perú. “Domestic Shipments”, afirma que los datos del envío mostrados son
suficientes, sobre todo el código de tracking, ya que con él puede hacer el
seguimiento. “URL Order”, los datos que se le solicitan sobre el producto que
busca son comprensibles. Finalmente, considera que la cantidad de secciones del
sitio web son suficientes para realizar sus pedidos sin complicaciones.
 Entrevistado 1:
 Edad: 25 años

4f92-9277-26659d5ea00f
 Resumen sobre la entrevista: 23:08, 05:04 min
La entrevista fue realizada a Ashly Cartagena y reside en el distrito de San Miguel.

Ella es una profesional egresada de la carrera de Marketing. Actualmente, trabaja en
el área de estrategias de su empresa como community manager. Por esta razón, ella
utiliza redes sociales, entre ellas Instagram y Tiktok. No solo eso, pero también sabe
cómo funcionan sus algoritmos y en su trabajo, está a cargo las redes sociales de la
empresa para aumentar el engagement y visibilidad de la marca con el público
objetivo. Personalmente, es una persona muy comunicativa. Ella sabe cómo hacerse
entender y compartir su opinión cuando piensa que es necesario. También, es una
persona muy sociable y le gusta divertirse con sus amigos.
En la entrevista, ella menciona que, anualmente, viaja 2 veces como mínimo. Sin
embargo, a veces, pueda realizar más viajes por vacaciones planeadas con amigos o
surgen viajes extra en los que quiere participar. Ella tiene familiares y amigos en el
extranjero, a quienes le gusta ir a visitar de vez en cuando. Esta es uno de los
motivos por los que viajar constantemente le resulta un poco más económico, ya que,
muchas veces, se hospeda en las viviendas de sus conocidos.
Además, comenta que, cuando viaja, le encargan traer productos, que son
principalmente dispositivos tecnológicos. Además, ella compra pequeños regalos por
su propia cuenta para, luego, obsequiarlos a sus familiares. También, menciona que,
sus familiares a quienes les realiza el favor, siempre le devuelven el pago del
producto, pero solo son algunas veces que le dan dinero adicional por realizar el
favor. A ella le gusta la idea de realizar este servicio porque piensa que no requiere
esfuerzo adicional y puede generar un ingreso adicional fácilmente. En caso de que
empiece a realizar el servicio, ella traería hasta 5 productos, ya que el peso de la
maleta también puede generar un costo adicional.
 Entrevistado 2:
 Nombres y Apellidos: Pablo Barragán
 Edad: 22 años
 Distrito: Comas

4f92-9277-26659d5ea00f
La entrevista fue realizada a Pablo Barragán tiene 22 años y reside en Comas.

E un estudiante universitario, soltero y sus dispositivos de preferencia son su
celular y su laptop. Sus principales canales digitales de interacción son
Facebook e Instagram y su browser principal es Chrome y Safari, sus marcas
de influencia son Nike y Adidas, así como Apple y Lenovo. Cuenta con
habilidades como saber actuar ante problemáticas, Responsable y con ganas de
aprender nuevas cosas. Además, cuenta con ciertas frustraciones como la crisis
económica y la inseguridad social. La entrevista fue realizada a pablo
Barragán tiene 23 años, fuimos directamente con el uso de la web application
ya despegada, el usuario compartió su pantalla para poder evidenciar el uso de
la web, se registró e inicio sesión, navego por todas las opciones que tiene el
viajero y logro poder registrar una order para traer de estados Unidos a Perú.
El entrevistado dio diversas observaciones desde el registro del usuario hasta
algunos puntos de mejora dentro de la web application, aun así, considera que
es dinámico, y como otro punto importante realice la mención de la seguridad
del usuario y contraseña.
 Entrevistado 3:
 Nombres y Apellidos: Manuel Santos
 Edad: 50 años
 Ubicación: San Borja
4f92-9277-26659d5ea00f
La entrevista fue realizada a Manuel Santos del segmento de viajeros. Él tiene 50

años y vive en el distrito de San Borja. Se inició la entrevista haciendo preguntas
de información personal y luego se procedió a mostrar la web application desde la
pantalla compartida de la computadora del entrevistado. El usuario se registró e
ingresó a la plataforma como viajero de manera fácil. Luego, se le indicó que
realice las funcionalidades básicas del usuario de tipo viajero y las pudo
completar con normalidad, indicando que la aplicación era fluida y entendible. La
única observación que hizo el entrevistado fue sobre mejorar la sección de
órdenes, indicando más detalles del producto como el caso de que sea frágil o se
deba tener alguna consideración especial para el transporte de este.
 Entrevistado 4:
 Nombres y Apellidos: Nadine Ramos
 Edad: 18 años
 Ubicación: San Miguel
4f92-9277-26659d5ea00f
La entrevista fue realizada a Nadine Ramos y se inició mostrándole la aplicación

web. En primer lugar, nos dio su opinión sobre la sección de viajeros. Ella piensa
que las vistas y el flujo de las páginas es entendible y se ve bien. En la sección del
Perfil, ella piensa que debería haber una descripción adicional personalizable por
el mismo Traveler. En la sección My Wallet, ella recomienda añadir una imagen a
cada uno de los productos con el objetivo de que esta sección se vea más
atractiva.
En cuanto al Landing Page, a ella le gustó mucho que la página web se vea
colorida y dinámica. Un punto que piensa que sería recomendable añadir es más
recomendaciones de ambos tipos de usuario. Es decir, ella preferiría que haya una
parte de las reseñas de los usuarios “Compradores” y otra parte de los usuarios
“Traveler”.
Video de evidencias de las entrevistas:
Link general de Stream: https://web.microsoftstream.com/video/598220fa-a2f2-4f92-

9277-26659d5ea00f
5.3.3. Evaluaciones según heurísticas
UX Heuristics & Principles Evaluation
Usability – Inclusive Design – Information Architecture
CARRERA: Ingeniería de Software
CURSO: Desarrollo de Aplicaciones Open Source
PROFESORES: Todos
AUDITOR: MIRAI
CLIENTE: MIRAI
SITE o APP A EVALUAR: Import It
TAREAS A EVALUAR:
1. Registrar usuario nuevo en la aplicación.

2. Iniciar sesión con una cuenta ya creada.
3. Recuperar de contraseña.
4. Buscar información (productos).
5. Ordenar un producto.
6. Registrar una dirección.
7. Registrar un cupón.
8. Calcular un presupuesto.
9. Acceso a la información.
ESCALA DE SEVERIDAD:
Los errores serán puntuados tomando en cuenta la siguiente escala de severidad
Nivel Descripción
1 Problema superficial: puede ser fácilmente superador por el

usuario u ocurre con muy poca frecuencia. No necesita ser
arreglado a no ser que exista disponibilidad de tiempo.
2 Problema menor: puede ocurrir un poco más frecuentemente o es

un poco más difícil de superar para el usuario. Se le debería
asignar una prioridad baja resolverlo de cara al siguiente reléase
3 Problema mayor: ocurre frecuentemente o los usuarios no son

capaces de resolverlos. Es importante que sean corregidos y se les
debe asignar una prioridad alta.
4 Problema muy grave: un error de gran impacto que impide al

usuario continuar con el uso de la herramienta. Es imperativo que
sea corregido antes del lanzamiento.
TABLA RESUMEN:
Escala de Heurística/Principio
# Problema
severidad violada(o)
La sección para el registro de un

Principio de arquitectura de
1 usuario nuevo tiene repetido el campo 1
la información: Objetos.
teléfono.
La sección de registro de un nuevo

usuario pide una contraseña de cinco Usabilidad: Prevención de
2 2
caracteres, pero la sección para iniciar errores.
sesión pide mínimo ocho.
Cuando se compra algo en la sección Heurística de arquitectura

3 “Buy Wholesale” no se guarda en “My 2 de la información: ¿Is it
Orders”. credible?
Hay costos que están en soles y otros

Usabilidad: Consistencia y
4 en dólares, es decir, la moneda de 2
estándares.
cambio no está estandarizada.
La sección “Directions” no tiene Principio de arquitectura de

5 1
responsive. la información: Objetos.
La sección “Calculator” siempre tiene Heurística de arquitectura

6 la imagen de un IPhone sin importar el 1 de la información: ¿Is it
producto. credible?
La lista de productos no cuenta con

Usabilidad: Control y
7 ningún filtro y sistema de búsqueda 2
libertad del usuario.
funcional.
DESCRIPCIÓN DE PROBLEMAS:
Problema #1: La sección para el registro de un usuario nuevo tiene repetido el campo
teléfono.
Severidad: 1
Heurística/Principio violado: Principio de arquitectura de la información: Objetos.
Problema:
Al momento de realizar el registro de un nuevo usuario en la sección correspondiente se

puede evidenciar que el campo para registrar el teléfono se repite dos veces.
(se repite dos veces el mismo campo)
Recomendación:
Eliminar el campo repetido para que se mantenga el diseño responsive en la vista.

Problema #2: La sección de registro de un nuevo usuario pide una contraseña de cinco
caracteres, pero la sección para iniciar sesión pide mínimo ocho.
Severidad: 2
Heurística/Principio violado: Usabilidad: Prevención de errores.
Problema:
Al momento de ingresar los datos del usuario que se va a registrar se presenta un fallo
en la validación de la cantidad de caracteres que debe tener la contraseña, ya que el
registro te permite un tamaño de cinco caracteres, pero al iniciar sesión te pide un
tamaño de ocho.
(La validación del tamaño de contraseña no concuerda entre el inicio de sesión y el

registro de usuario)
Recomendación:
Estandarizar el tamaño de las contraseñas para evitar errores de validación.
Problema #3: Cuando se compra algo en la sección “Buy Wholesale” no se guarda en

“My Orders”.
Severidad: 2
Heurística/Principio violado: Heurística de arquitectura de la información: ¿Is it

credible?
Problema:
Al momento de comprar un producto en la sección “Buy Wholesale”, no se registra

dicho producto en la sección “My Orders”. Por lo cual, el sistema no presenta una
actualización de las órdenes del comprador.
(No se registra una orden del comprador al ordenar un producto)

Recomendación:
Se recomienda realizar una actualización en el sistema para registrar los productos

solicitados de la sección “Buy Wholesale” en “My Orders”.
Problema #4: Hay costos que están en soles y otros en dólares, es decir, la moneda de
cambio no está estandarizada.
Severidad: 2
Heurística/Principio violado: Usabilidad: Consistencia y estándares.
Problema:
En algunas partes del sitio web, el costo de los productos esta expresado en dólares o en
soles. Esto ocasiona confusión en el usuario que desea estimar un presupuesto para
solicitar un producto.
(No hay un estándar de la moneda utilizada)
Recomendación:
Se recomienda estandarizar la moneda que el sitio web utiliza, ya sean dólares o soles.
Problema #5: La sección “Directions” no tiene responsive.
Severidad: 1
Heurística/Principio violado: Principio de arquitectura de la información: Objetos.
Problema:
La sección de “Directions” no presenta un diseño responsive, es decir, la vista no

mantiene una armonía cuando la pantalla cambia. Esto ocasiona en el usuario una
incomodidad al momento de visualizar dicha sección.
(La sección “Directions” no tiene responsive)

Recomendación:
Se recomienda implementar un diseño responsive en la sección “Directions”.
Problema #6: La sección “Calculator” siempre tiene la imagen de un iPhone sin

importar el producto.
Severidad: 1
Heurística/Principio violado: Heurística de arquitectura de la información: ¿Is it

credible?
Problema:
En la sección “Calculator”, dónde se saca un presupuesto aproximado del producto que

uno quiere comprar hay siempre una imagen de referencia. Sin embargo, esa imagen es
de un IPhone sin importar que producto esté calculando el comprador. Lo cual genera
dudas en el usuario al momento de utilizar dicha sección.
(La imagen siempre es un IPhone)

Recomendación:
La imagen debería actualizarse según el producto que se quiera calcular o poner una
imagen general de referencia.
Problema #7: La lista de productos no cuenta con ningún filtro y sistema de búsqueda
funcional.
Severidad: 2
Heurística/Principio violado: Usabilidad: Control y libertad del usuario.
Problema:
De manera general, cuando se listan los productos de tienda o encargo, no hay un

sistema de búsqueda o filtrado para ayudar a los usuarios a encontrar el producto en
específico que desean.
(No hay un sistema de filtrado)

Recomendación:
Se recomienda diseñar un sistema de filtrado para realizar una búsqueda más dinámica.
5.4. Video About the product
En esta sección se mostrará un video, en el cual el equipo promociona Import it con un
mensaje para captar a los clientes, las características, las reglas de negocio, y el
producto del landing page, el cual los acercará a nuestra solución web.
Screenshoot:
URL: https://web.microsoftstream.com/video/82758ea7-9110-4b4a-ab89-4ed9fce20533
Timing: 6:39
Conclusiones
1. Existe una gran cantidad de personas que tienen la intención de realizar una
compra en el extranjero por diferentes motivos, pero el costo o el proceso para
traerlo a Perú los desanima.
2. La mayoría de las aplicaciones en el mercado dirigidas a nuestro público objetivo
presentan una o varias deficiencias en la atención al cliente como pueden ser que
no hay una total transparencia en lo que se le cobra al usuario.
3. La necesidad de crear un software hizo que se entablará una correcta
comunicación entre todo el equipo, así fomentando el trabajo mutuo para llegar a
un acuerdo de la creación, contenido y base del sistema de la aplicación para el
público objetivo.
4. El desarrollo de los User Stories y del Product Backlog, prioriza las
características de la solución software, para que el equipo de desarrollo sepa que
hay que entregar primero.
5. El planteamiento de los Wireframes, son el comienzo del desarrollo de la
aplicación. Esto se debe, a que en base a ello se ira desarrollando el producto
final. Esto siempre dentro de los principios de desarrollo e implementación de
software.
6. El Software Configuration Management es de suma importancia para plantear las
convenciones del código fuente y la nomenclatura que los desarrolladores tendrán
que seguir para tener un flujo de trabajo organizado y entendible.
7. El prototipo nos ayuda a entender los flujos principales que los usuarios seguirán
para logran sus principales objetivos, así el equipo entender su posición y podrá
mejorar la aplicación.
8. El desarrollo del Sprint 1, fue una excelente forma de integrar mejor al equipo.
Esto se debe a que cada integrante participo del desarrollo del Landing Page y se
realizaron reuniones para organizarnos y dar feedbacks.
9. El desarrollo del Sprint 3, reforzo los conocimientos que tenemos del framework
Angular y de cómo implementar services para un fake api. Los cuales son muy
útiles para poder manejar la información sin un API o una base de datos.
10. El desarrollo del Sprint 5, reforzo los conocimientos que tenemos del framework
Angular y de cómo implementar services para un API con apoyo del IDE
IntelliJIDEA. Asimismo, aprendimos sobre hosting con Heroku APP para hostear
nuestra API de Import It.
Referencias Bibliográficas
Americas Market Intelligence (AMI). (2022). Datos y estadísticas e-commerce en Perú
[2022]. Recuperado de https://americasmi.com/insights/lo-que-mas-compran-los-
peruanos-en-internet/ [Consulta: 28 de agosto de 2022].
Ministerio de Economía y Finanzas (MEF). (2022). Portal del ministerio de Economía y
finanzas Recuperado de https://www.gob.pe/mef [Consulta: 28 de agosto de 2022].
Browne, C. (15 de septiembre de 2021). 7 Simple Steps to Build a Customer Journey

Map. CareerFoundry. Recuperado de https://careerfoundry.com/en/blog/ux-
design/how-to-make-customer-journey-map-with-template/ [Consulta: 29 de
agosto de 2022].
Leigh, J. (27 de junio de 2018). Empathy Mapping: A Guide to Getting Inside a User’s
Head. UX Booth. Recuperado de https://www.uxbooth.com/articles/empathy-
mapping-a-guide-to-getting-inside-a-users-head/ [Consulta: 30 de agosto de
2022].
Qempo. (25 de octubre de 2018). TÉRMINOS Y CONDICIONES DE USO DEL

PORTAL QEMPO. Recuperado de https://www.qempo.com.pe/terms-of-service
[Consulta: 27 de agosto de 2022].
Comparto Mi Maleta. (s.f.). Términos y condiciones y políticas de privacidad.

Recuperado de COMPARTO MI MALETA:
https://compartomimaleta.com/privacy [Consulta: 27 de agosto de 2022].
W3Schools. (s.f). HTML Style Guide. USA: W3Schools. Recuperado de

https://www.w3schools.com/html/html5_syntax.asp [Consulta: 28 de mayo de 2022].
W3Schools. (s.f). JavaScript Style Guide. USA: W3Schools. Recuperado de

https://www.w3schools.com/js/js_conventions.asp [Consulta: 29 de mayo de 2022].
Anexos
Anexo A: Consideraciones sobre secciones que incluyen videos.
Sección Característica Sobre el Integración y entrega

s del video contenid
o
Needfin Cantidad de Consolid Subir el video en Stream con enlace

ding videos: 1 a todas privado:
Intervie Nomenclatura: las https://web.microsoftstream.com/video/
ws upc-pre- entrevist 60ceb7ed-3e08-4835-89e6-96a05b8add61
202202-si729- as
SW52-MIRAI- realizada
Needfinding- s.
sprint-1
Formato: .mp4
Duración: 36
min
Video de Needfinding Interviews

Prototy Cantidad de Consolida Subir el video en Stream con enlace
pes videos: 3 demostrac privado:
Navigat Nomenclatura ión del https://web.microsoftstream.com/video/
ion / : flujo de 29a9a121-ae75-46c6-ba8c-824140cd7ec9?
Product  upc-pre- navegació list=studio
Navigat 202202- n del
ion si729- Landing
SW52- Page y las
MIRAI- aplicacion
prototyp es,
e priorizand
navigatio o los user
n-sprint- flows
1 relacionad
Video de prototype
Formato: os con el
mp4. core
Subir el video en Stream con enlace
Duración business
privado:
: 8:00 https://web.microsoftstream.com/video/
 upc-pre- a664f22f-baf0-4fa7-90fd-c3b34b6e68fb
202202-
si729-
SW52-
MIRAI-
product
navigatio
n-sprint-
1
Formato:
.mp4 Video de product Landing Page
Duración
:5:09 Subir el video en Stream con enlace
 upc-pre- privado:
202202-
si729- https://web.microsoftstream.com/video/
SW52- 6004b0c1-0893-43f6-b4dc-db28a51f5cf7
MIRAI-
product
navigatio
n-sprint-
2
Formato:
.mp4
Duración
:4:53
 upc-pre-
202202- Video de product Web Application – Sprint
si729- 2
SW52-
MIRAI- https://web.microsoftstream.com/video/
product 2cf99d25-bc5e-4abc-b5f8-e893601bc098
navigatio
n-sprint-
3
Formato:
.mp4
Duración
: 8:10
 upc-pre-
Video de product Web Application – Sprint
202202-
3
si729-
SW52-
Subir el video en Stream con enlace
MIRAI-
privado:
product
https://web.microsoftstream.com/video/313
navigatio
5d2c1-187a-4272-83f3-b5d5dfc2fe44
n-sprint-
4
Formato:
.mp4
Duración
: 6:57
Video de product Web Application – Sprint

 upc-pre- 4
202202-
si729- Subir el video en Stream con enlace
SW52- privado:
MIRAI- https://web.microsoftstream.com/video/
product e3fa603c-7527-416c-91e6-0e5d5b51690a
navigatio
n-sprint-
5
Formato:
.mp4
Duración
: 4:17
Video de product Web Application –

Sprint 5
Validati Cantidad de Consolida Subir el video en Stream con enlace

on Videos: 1 sesiones y privado:
Intervie Nomenclatura entrevistas https://web.microsoftstream.com/video/
ws : upc-pre- de 598220fa-a2f2-4f92-9277-26659d5ea00f
202202- validación
si729--- en las que
validation- usuarios
sprint- 5 de los
Formato: .mp segmentos
4 Duración: objetivo
43:04 interactúe
n con el
landing Video de Validation Interviews
page y
con los
prototipos
de
experienci
as web y
mobile,
manifesta
ndo sus
observaci
ones. Para
cada
entrevista
se debe
incluir
títulos con
informaci
ón del
entrevista
do, el
segmento
objetivo y
la fecha
de la
entrevista
About Cantidad de Orientació Subir el video en Stream con enlace

the videos: 1 n privado:
Product Nomenclatura promocio https://web.microsoftstream.com/video/
: upc-pre- nal, 82758ea7-9110-4b4a-ab89-4ed9fce20533
202202- resumiend
si729--- o el
aboutthe- modelo de
product- negocio,
sprint-4 las
Formato: .mp característ
4 Duración: icas y
6:39 beneficios
del Video About the Product
producto,
incluyend
o algunas
escenas de
interacció
n con el
producto y
al menos
una
opinión
por cada
segmento
objetivo.
About Cantidad de Video que Subir el video en Stream con enlace

the videos: 1 resume el privado:
Team Nomenclatura proceso de https://web.microsoftstream.com/video/
: upc-pre- trabajo 3320bcfd-54a1-4ce5-b006-0df5a3ec71be
202202- realizado,
si729--- incluyend
aboutthe- o escenas
team-sprint- 4 de
Formato: .mp sesiones
4 Duración: de trabajo
11:41 real del
equipo,
compleme Video About the Team
ntando
con
narración
(voz en
off) del
proceso.
Incluye
además el
testimonio
ante
cámara de
cada
participant
e
describien
do
actividade
s
realizadas,
logro de
Outcomes
y
desarrollo
de
competen
cias
alcanzado
s.
Anexo B: Videos de Exposiciones.
Entrega Características Entrega del video
TB1 Nomenclatura: Subir el video en Stream con enlace privado:

upc-pre-202202- https://web.microsoftstream.com/video/7c86086a-
si729-SW52- 6c89-43de-885d-d90bbec143ba?list=studio
MIRAI-video-de-
exposición-TB1
Formato: .mp4
Duración: 25:13
min
Video de exposición del TB1

upc-pre-202202- https://web.microsoftstream.com/video/b98dc47e-
si729-SW52- 9d57-43cf-aa8f-fbf75428bf86
MIRAI-video-de-
exposición-TB2
Formato: .mp4
Duración: 26:38
min

TP1 Nomenclatura: Subir el video en Stream con enlace privado:
upc-pre-202202- https://web.microsoftstream.com/video/844bd80a-
si729-SW52- fce3-4d04-a970-f98e2ebec4f3
MIRAI-video-de-
exposición-TP1
Formato: .mp4
Duración: 10:23
min
Video de exposición del TP1

upc-pre-202202- https://web.microsoftstream.com/video/8953bb06-
si729-SW52- dd45-4f46-8710-ddf5a7598218
MIRAI-video-de-
exposición-TB3
Formato: .mp4
Duración: 9:39 min

upc-pre-202202- https://web.microsoftstream.com/video/386e6faa-
si729-SW52- 4b72-4759-93ab-274eed4615e1
MIRAI-video-de-
exposición-TB4
Formato: .mp4
Duración: 13:40

TF1 Nomenclatura: Subir el video en Stream con enlace privado:
upc-pre-202202- https://web.microsoftstream.com/video/81660a34-
si729-SW52- 137a-4026-a668-fc5b6e8c13af
MIRAI-video-de-
exposición-TF1
Formato: .mp4
Duración: 13:33
Video de exposición del TF1
Anexo C: Links del Informe.
Product Link Evidencia de que funciona

o
Landing https://mirai-open-source-sw52-
Page grupo-3.github.io/Landing-
Page-Import-It/public/
https://mirai-open-source-sw52-
grupo-3.github.io/Landing-
Page-Import-It/public/
#customer
Web import-it.netlify.app
Applicat
ion link de respaldo: https://import-
Front it.netlify.app
End
URL de https://github.com/MIRAI-
la Open-Source-SW52-Grupo-3
Organiz
ación:
URL del https://github.com/MIRAI-

Reposit Open-Source-SW52-Grupo-3/
orio del Landing-Page-Import-It
Landing
Page:
orio de Import_It_Web_Application
Fronten
d Web
Applicat
ions:

orio del SpringBootAppBackend
Web
Service
-
Backend
:
Backend Despliegue del Backend por

En medio de Heroku:
Heroku https://importidbackend.heroku
app.com/api/users
Para ver los endpoints con
Swagger:
https://
importidbackend.herokuapp.co
m/swagger-ui.html#

Upc Pre 202202 Si729 SW52 MIRAI Report TF1

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Upc Pre 202202 Si729 SW52 MIRAI Report TF1

Cargado por

Copyright:

Formatos disponibles

1

Universidad Peruana de Ciencias Aplicadas Noviembre 2022

Malca Rojas, Edgar Alexander U202020371

Urquiaga Rodriguez, Rafael Adrian U202010506

REGISTRO DE VERSIONES DEL

1.0 26/08/2022 Barrazueta Se desarrollo el Capítulo 1: Introducción con los

2.0 28/08/2022 Barrazueta Los estudiantes realizaron los artefactos de

Anco Copaja,  User Personas

3.0 30/08/2022 Barrazueta Se agrego el To-Be Scenario Mapping, se

3.1 30/08/2022 Barrazueta Se realizaron correcciones de tipografía,

3.2 01/09/2022 Barrazueta Se realizaron mejoras al trabajo y se agregaron

3.3 03/09/2022 Barrazueta Se realizaron cambios en los links de exposición

4.1 07/09/2022 Barrazueta Se agrego la sección de Style Guidelines, Web

4.1.1 09/09/2022 Barrazueta Se agregaron los Domain Driven Software

4.1.2 10/09/2022 Barrazueta Se agrego el diagrama de base de datos y su link

5.0 11/09/2022 Barrazueta Se agrego la sección de Information

5.1 13/09/2022 Barrazueta Se comenzaron a agregar los commits en la

5.1.1 15/09/2022 Barrazueta Se culmino de agregar todos los commits y las

6.0 29/09/2022 Barrazueta Se agrego el Sprint Backlog 2 y sus respectivas

7.0 22/10/2022 Barrazueta Se agrego el Sprint 3 y sus respectivas secciones

8.0 4/11/2022 Barrazueta Se agrego el Sprint 4 y sus respectivas secciones

9.0 22/11/2022 Barrazueta Se agrego el sprint 5 y sus respectivas

1.2. Solution Profile.....................................................................................................................................31

1.3. Segmento Objetivo...............................................................................................................................49

4.2. Information Architecture....................................................................................................................159

4.3. Landing Page UI Design.....................................................................................................................169

4.4. Web Applications UX/UI Design.......................................................................................................173

4.5. Mobile Applications Prototyping........................................................................................................203

4.7. Software Object-Oriented Design.......................................................................................................212

4.8. Database Design.................................................................................................................................215

Product Implementation, Validation.....................................................................................................218

5.2. Landing Page, Services & Applications Implementation....................................................................254

5.3. Validation Interviews..........................................................................................................................443

5.4. Video About the product.....................................................................................................................474

ABET – EAC - Student Outcome 3

Criterio: Capacidad de comunicarse efectivamente con un rango de audiencias.

En el siguiente cuadro se describe las acciones realizadas y enunciados de conclusiones

Criterio Acciones realizadas Conclusiones

Comunica Barrazueta Vilcachagua, En el momento de elaboración, cada

Exposición de la Navegación El equipo desarrollo la sección

Development Evidence for

Anco Copaja, Edgar Andre

Malca Rojas, Edgar

Aporto con el planteamiento

SEO Tags and Meta Tags

Development Evidence for

Exposición del product

Exposición del product

Exposición del product

Exposición del product

Sebastian Montes Molina

Aporto con la definición de

Exposición de los trabajos y

comunicación acerca del

Aporto con el planteamiento

Desarrollo del Navigation

Comunica en Barrazueta Vilcachagua, Diseñamos el Lean UX de nuestra

Sprint 3 El equipo planteo por escrito los

TB4 El equipo desarrollo el sprint 4, en

Malca Rojas, Edgar

Realizó Startup Profile,

Planteo los antecedentes y la

Evaluación según heurísticas.