• No se han encontrado resultados

Tr abaj o Fi n de Gr ado

N/A
N/A
Protected

Academic year: 2022

Share "Tr abaj o Fi n de Gr ado"

Copied!
120
0
0

Texto completo

(1)

Septiembre 2021

Tr abaj o Fi n de Gr ado

Gl owwy

App móvi l par a encont r ar cosmét i cos per sonal i zados par a cada usuar i o

Autor:

Alba Hernández González Tutor/es:

María PilarEscobarEsteban María Dolores Sáez Fernández

Gr ado en I ngeni er í a Mul t i medi a

(2)
(3)

Glowwy

App m´ovil para encontrar cosm´eticos personalizados para cada usuario

Autor

Alba Hern´andez Gonz´alez Directores

Mar´ıa Pilar Escobar Esteban Lenguajes y Sistemas Inform´aticos

Mar´ıa Dolores S´aez Fern´andez Lenguajes y Sistemas Inform´aticos

Grado en Ingenier´ıa Multimedia

ALICANTE, 7 de septiembre de 2021

(4)
(5)

Resumen

El mundo de la cosm´etica no ha dejado de crecer y cada vez m´as personas hacen uso del maquillaje en su d´ıa a d´ıa. Son incontables las funciones que puede desempe˜nar el maquillaje, como tambi´en los tipos de personas que lo utilizan. Adem´as, gracias al amplio cat´alogo de productos con los que se cuentan en la actualidad y el auge de los tutoriales y rese˜nas en YouTube, usuarios no profesionales consiguen resultados de salo- nes de belleza en su propia casa.

Sin embargo, para los usuarios los conocimientos que les proporcionan los tutoriales de YouTube pueden no ser suficientes y a la hora de realizar compras pueden no llegar a comprender qu´e necesitan espec´ıficamente. Cada persona tiene unas caracter´ısticas diferentes como piel seca o con acn´e, que la mala elecci´on de un producto puede ser un gasto de dinero injustificado.

Actualmente, los usuarios se basan en las opiniones dentro de cada ecommerce, tanto webs como aplicaciones m´oviles, a la hora de realizar una compra. Sin embargo, ese tipo de valoraciones no tiene por qu´e ser relevante para esa persona. A rasgos generales, estos comentarios donde puedes encontrar tanto 100 valoraciones negativas como 100 positivas del mismo cosm´etico, pueden confundir al usuario a la hora de identificar la calidad de un producto, lo cual no beneficia a las marcas de maquillaje.

Es por ello que la compra de nuevos art´ıculos de cosm´etica se hace un proceso tedioso y lento que necesita una soluci´on tanto para los clientes como para las marcas. Des- afortunadamente, las marcas de cosm´eticos pueden perder clientes o bajar el ´ındice de ventas por recibir valoraciones negativas tras un mal uso de sus productos en personas que no son las indicadas.

Glowwy es una aplicaci´on m´ovil cuyo objetivo principal es que, bas´andose en las ca- racter´ısticas que el propio usuario ha definido en un formulario inicial y la experiencia de otros usuarios que han testeado el producto antes que ´el, le recomendar´a los mejores productos que se ajusten a sus necesidades. Adem´as, dejar´a claro al usuario aquellos cosm´eticos que poseen las propiedades que haya definido como sus favoritas en cada tipo de art´ıculos como pintalabios o bases de maquillaje.

De esta manera, se logra un proceso de compra m´as r´apido y con mayor porcentaje de acierto, minimizando el gasto de dinero innecesario, consiguiendo as´ı encontrar un cosm´etico que se adecue a las necesidades.

(6)
(7)

Abstract

The world of cosmetics has not stopped growing and more and more people make use of makeup in their day by day. There are countless functions that makeup can perform, as well as the types of people who use it. In addition, thanks to the wide catalog of products that are available today and the rise of tutorials and reviews on YouTube, non-professional users get results from beauty salons in their own home.

However, for users the knowledge provided by YouTube tutorials may not be enough and when making purchases they may not understand what they specifically need. As each person has different characteristics such as dry skin or acne, the wrong choice of a product can be an unwarranted waste of money.

Currently, users are influenced by the opinions of the ecommerce from both, the websi- tes and the mobile apps, when they make a purchase. However, that type of assessments may not be relevant to all costumers. In general terms, these comments where you can find both 100 negative and 100 positive evaluations of the same cosmetic, can confuse the user when it comes to identifying the quality of a product, which does not benefit makeup brands.

That is why the purchase of new cosmetic items is a tedious and slow process that needs a solution for both customers and brands. Unfortunately, cosmetic brands can lose customers or lower their sales rate by receiving negative reviews after misuse of their products by people who are not the right ones.

Glowwy is a mobile application whose main objective is that, based on the characte- ristics that the user has defined in an initial form and the experience of other users who have tested the product before him, it will recommend the best products that suit his needs. needs. In addition, it will make clear to the user which cosmetics products match with the properties previously selected as his/her favorites in each type of article such as lipstick or makeup bases.

In this way, a faster purchase process is achieved with a higher percentage of success, minimizing the expenditure of unnecessary money, thus managing to find a cosmetic that suits the needs.

(8)
(9)

Motivaci´ on, justificaci´ on y objetivo general

La idea de desarrollar una aplicaci´on relacionada con el mundo de la cosm´etica surge de una de mis grandes pasiones: el maquillaje. Durante muchos a˜nos, mi hobby princi- pal ha sido maquillarme tanto a mi como a amigos y familiares. La fuente principal del conocimiento que he ido adquiriendo sobre este tema proviene de v´ıdeos en internet de expertos en el mundo de la cosm´etica.

Sin embargo, a la hora de hacer compras siempre encontraba la misma barrera, saber si ese producto era de buena calidad. Esta es la pregunta que m´as me he repetido cuan- do estoy delante de un gran escaparate de productos. El proceso que mayormente hacen todos los usuarios que compran maquillaje que conozco es el mismo: buscan el producto en Youtube esperando encontrar alguna rese˜na y opiniones de sus influencers favoritos, y en ese momento deciden si comprarlo o no.

Por otra parte, una buena calidad no siempre va de la mano de una eficacia al 100 % en todos los compradores, ya que cada piel y cada usuario es diferente. Es por eso que basar tus compras en una ´unica opini´on no es recomendable. Muchas veces los v´ıdeos de rese˜nas nos ayudan a elegir, no obstante, no todas esas opiniones que recibimos de influencers van ligadas a las mismas caracter´ısticas que necesitamos, lo que da como resultado gastar una gran cantidad de dinero en art´ıculos que posteriormente no son de utilidad, pensando de primeras que tras los v´ıdeos que vemos esos productos si funcionan.

Otro de los grandes problemas es que, en el mismo instante de la compra, debes acor- darte de qu´e cosm´etico era exactamente el que te han recomendado, as´ı que debes volver a ver el v´ıdeo que viste hace semanas o apuntarlo en la aplicaci´on de notas del m´ovil, haciendo el proceso de compra mas tedioso y lento.

He sido la primera en gastar bastante dinero en art´ıculos que al final no resultan los id´oneos para mi piel o para lo que busco, que tras opiniones de gente en internet decid´ı comprar algo que nunca me funcion´o. Es ah´ı donde vi un problema al que poder ponerle soluci´on. ¿Por qu´e debemos ver 20 minutos de v´ıdeo de una persona que quiz´a no nece- sita o busca lo mismo que yo? ¿Por qu´e debemos gastar dinero en productos que no son los id´oneos?

Con el incremento del uso de las redes sociales, va en aumento el n´umero de personas que se maquillan tanto de forma art´ıstica como en el d´ıa a d´ıa y eso se puede ver en las cifras de los seguidores de los grandes maquilladores. Tambi´en, somos conscientes de la gran cantidad de usuarios que consumen estos v´ıdeos de rese˜nas de productos debido a la

(10)

x

elevada cifra de visualizaciones. Debido a esto, los usuarios interesados en una soluci´on son m´as de los que se podr´ıa imaginar.

Tras muchas vueltas pensando en una soluci´on que a los usuarios del maquillaje nos solucionar´ıa estos problemas, se lleg´o a conclusi´on de que usando las nuevas tecnolog´ıas relacionando a usuarios entre s´ı con las mismas caracter´ısticas dar´ıa a los compradores una valoraci´on m´as af´ın a sus necesidades, simplificando as´ı el proceso de compra y re- duciendo el porcentaje de error en compras, por lo que proporcionalmente, reducir´ıa el gasto de dinero innecesario.

Teniendo en cuenta los problemas mencionados anteriormente, se ha propuesto reali- zar una aplicaci´on m´ovil que permita a los usuarios conocer aquellos productos id´oneos para sus gustos y caracter´ısticas faciales basados en las valoraciones de otros usuarios con caracter´ısticas similares.

Por ´ultimo, como ya ha sido mencionado al principio, el maquillaje lleva a˜nos siendo mi gran pasi´on, por lo que me siento motivada a resolver el gran problema al que me he enfrentado muchas veces como usuaria.

(11)

Agradecimientos

En primer lugar, quiero darles las gracias a mis padres por nunca cortarme las alas, por aceptarme y apoyarme en las decisiones que he tomado en mi vida, aunque eso haya significado salir del nido. Por aportarme todos los valores en los que he crecido y por todo lo que me han ense˜nado. Tambi´en, a mi hermana Ainhoa, que siempre ha estado y siempre estar´a. La cual me ha apoyado, entendido y animado constantemente. Por ser un referente y un modelo a seguir en la vida.

Tambi´en al resto de familia, esos t´ıos, primos y abuelos que me han acompa˜nado du- rante toda mi vida sin dejar de creer en m´ı, los cuales siempre que vuelvo a Tenerife se alegran de lo que he conseguido. Esa familia que siempre se ha preocupado de que todo vaya bien y que siempre est´a ah´ı.

Por otra parte, agradecerles a mis amigos de Tenerife por acompa˜narme en este tra- yecto, por nunca dejar de ser los mismos de siempre, por no perder la amistad. Sin ellos tampoco ser´ıa quien soy ahora. Por confiar en m´ı cuando decid´ı estudiar fuera y por estar siempre que vuelvo.

Tambi´en a mis amigos de Alicante, los cuales me han complementado a lo largo de estos a˜nos. Por demostrarme que puedes sentirte parte de algo estando fuera de tu tie- rra. Por ayudarme cuando las cosas no sal´ıan y por aportarme su visi´on cuando todo se nublaba.

Quiero agradecer tambi´en a la gente de 3dids, por confiar en m´ı cuando a´un no ten´ıa nada con qu´e demostrarlo. Por ser tan flexibles con el tiempo que necesitaba y por en- se˜narme mil cosas en un solo a˜no. Por hacer m´as amenas mis ma˜nanas y por toda la confianza que me transmiten.

Adem´as, a mis chicas del m´aster, que las pobres han sufrido esta recta final conmigo teniendo que entregar un trabajo de final de grado y m´aster. Sin duda, os volver´ıa a elegir con los ojos cerrados.

En ´ultimo lugar, pero no por ello menos importante, agradecer a mis dos tutoras, Mar´ıa Pilar y Mar´ıa Dolores, por guiarme en la realizaci´on de este TFG, por entender que mi tiempo era limitado y por toda la atenci´on que he recibido de ellas.

(12)
(13)

“Para hacer algo nuevo hay que romper con lo convencional”

P.T. Barnum, Hugh Jackman The Greatest Showman

“If you can find something you’re really passionate about, jump on that.

If you’re passionate about something and you bring your talent, you’ll be unstoppable.”

Megan Smith Directora de tecnolog´ıa de los Estados Unidos

xiii

(14)
(15)

´Indice general

1. Introducci´on 1

2. Estudio de Viabilidad 3

2.1. An´alisis DAFO . . . 3

2.2. Lean Canvas . . . 4

2.2.1. Segmento de clientes . . . 5

2.2.2. Problema . . . 6

2.2.3. Proposici´on de valor ´unica . . . 6

2.2.4. Soluci´on . . . 6

2.2.5. Canales . . . 6

2.2.6. Flujo de ingresos . . . 7

2.2.7. Estructura de costes . . . 7

2.2.8. M´etricas clave . . . 8

2.2.9. Ventaja especial . . . 8

2.3. An´alisis de riesgos . . . 8

3. Planificaci´on 11 4. Estado del arte 13 4.1. An´alisis del mercado . . . 13

4.1.1. Sephora . . . 14

4.1.2. Primor . . . 15

4.1.3. Lookfantastic . . . 16

4.1.4. Beautistics . . . 16

4.1.5. My Beauty Community . . . 17

4.2. Tecnolog´ıas para el desarrollo . . . 18

4.2.1. Ionic . . . 19

4.2.2. React Native . . . 19

4.2.3. Flutter . . . 20

4.2.4. PhoneGap . . . 20

4.2.5. NativeScript . . . 21

4.3. Backend . . . 21

5. Objetivos 23

6. Metodolog´ıa 25

xv

(16)

xvi ´Indice general

7. An´alisis y Especificaci´on 29

7.1. Tipos de usuarios . . . 29

7.2. Requisitos . . . 30

7.2.1. Requisitos funcionales . . . 30

7.2.2. Requisitos no funcionales . . . 32

8. Dise˜no 35 8.1. Dise˜no arquitectura conceptual . . . 35

8.2. Dise˜no arquitectura tecnol´ogica Front/Back-end . . . 36

8.3. Dise˜no de la persistencia . . . 36

8.3.1. Modelo de datos . . . 37

8.4. Experiencia de Usuario . . . 38

8.4.1. User Persona . . . 38

8.4.2. Sitemap . . . 38

8.5. Dise˜no de prototipos . . . 40

8.6. Gu´ıas de estilos . . . 42

8.6.1. Logotipo . . . 43

8.6.2. Paleta de colores . . . 44

8.6.3. Tipograf´ıa . . . 44

8.7. Dise˜no de interfaz de usuario . . . 45

8.8. Dise˜no de pruebas y validaci´on . . . 50

9. Implementaci´on 51 9.1. Sprint 1. Configuraci´on del proyecto . . . 51

9.2. Sprint 2. Definiendo estilos y primeras interfaces . . . 52

9.3. Sprint 3. Configuraci´on Firebase y conexi´on con el frontend . . . 56

9.4. Sprint 4. Autenticaci´on de usuarios con Google y Facebook . . . 58

9.5. Sprint 5. Listado de guardados y neceser. . . 60

9.6. Sprint 6. B´usqueda y filtrado de resultados. . . 61

9.7. Sprint 7. Formulario inicial y publicaci´on de valoraciones. . . 63

9.8. Sprint 8. Filtrado por etiquetas y detalles finales. . . 66

9.9. Sprint 9. Compilaci´on del proyecto y generaci´on de la APK. . . 69

10. Pruebas y validaci´on 73 10.1. Pruebas con usuarios reales . . . 73

10.2. Firebase Test Lab . . . 75

11. Resultados 79 11.1. Producto final . . . 79

11.2. Asignaturas relacionadas . . . 81

12. Conclusiones y trabajo futuro 83 12.1. Trabajo futuro y mejoras . . . 84

12.2. Impresiones finales . . . 84

(17)

´Indice general xvii

Bibliograf´ıa 88

A. Anexo I: Validaci´on del problema con encuestas a usuarios 89

B. Anexo II: Registro de horas empleadas. 95

(18)
(19)

´Indice de figuras

2.1. Lienzo Lean Canvas de Glowwy. Fuente: Propia . . . 5

4.1. Visitas relacionadas con belleza en Youtube. Fuente: Common Thread . . 13

4.2. Capturas de pantalla de los interfaces de Sephora. Fuente: Propia . . . 14

4.3. Capturas de pantalla de los interfaces de Primor. Fuente: Propia . . . 15

4.4. Interfaces de lookfantastic . . . 16

4.5. Interfaces de Beautistics . . . 17

4.6. Interfaces de My Beauty Community . . . 18

4.7. Comparativa Firebase y AWS. Fuente: Stackshare . . . 22

6.1. Estado del tablero de Trello. Fuente: Propia . . . 26

6.2. Tiempo registrado en Toggl. Fuente: Propia . . . 27

8.1. Arquitectura conceptual. Fuente: Propia . . . 35

8.2. Arquitectura tecnol´ogica Front/Back-end. Fuente: Propia . . . 36

8.3. Modelo de datos. Fuente: Propia . . . 37

8.4. User Persona 1. Fuente: Propia . . . 39

8.5. User Persona 2. Fuente: Propia . . . 39

8.6. Dise˜no del mapa de la aplicaci´on. Fuente: Propia . . . 40

8.7. Wireframes de la aplicaci´on global. Fuente: Propia . . . 41

8.8. Prototipos de la aplicaci´on global. Fuente: Propia . . . 42

8.9. Isologo versi´on texto e icono. Fuente: Propia . . . 43

8.10. Paleta de colores. Fuente: Propia . . . 44

8.11. Tipograf´ıa de los titulares de la aplicaci´on. Fuente: Propia . . . 45

8.12. Tipograf´ıa del cuerpo de la aplicaci´on. Fuente: Propia . . . 45

8.13. Onboarding. Fuente: Propia . . . 46

8.14. Registro y inicio de sesi´on. Fuente: Propia . . . 46

8.15. Formulario de caracter´ısticas. Fuente: Propia . . . 47

8.16. Interfaz principal. Fuente: Propia . . . 47

8.17. Interfaces de proceso de b´usqueda. Fuente: Propia . . . 48

8.18. Interfaces de favoritos. Fuente: Propia . . . 48

8.19. Interfaces de neceser. Fuente: Propia . . . 49

8.20. Interfaces de mi cuenta. Fuente: Propia . . . 49

8.21. Interfaces del detalle de producto. Fuente: Propia . . . 50

9.1. Estructuraci´on de archivos. Fuente: Propia . . . 52

9.2. Variables scss de la paleta de colores. Fuente: Propia . . . 53

9.3. Comparativa del Onboarding: UX, UI y desarrollo. Fuente: Propia . . . . 53

xix

(20)

xx ´Indice de figuras

9.4. Interfaces de home, detalle y perfil. Fuente: Propia . . . 54

9.5. Componente de lista. Fuente: Propia . . . 55

9.6. Interfaz final formulario de caracter´ısticas. Fuente: Propia . . . 55

9.7. Estructura de colecciones de Firebase. Fuente: Propia . . . 56

9.8. Interfaz de p´agina de producto. Fuente: Propia . . . 57

9.9. Configuraci´on e informaci´on b´asica de Facebook Developers para el regis- tro de usuarios. Fuente: Propia . . . 58

9.10. Listado de usuarios registrados en Authentication. Fuente: Propia . . . 59

9.11. Interfaz de p´agina de guardados. Fuente: Propia . . . 61

9.12. Resultado de b´usqueda por t´erminos. Fuente: Propia . . . 62

9.13. Filtrado por categor´ıas. Fuente: Propia . . . 62

9.14. Filtrado por marcas. Fuente: Propia . . . 63

9.15. Ejemplo de documento de usuarios. Fuente: Propia . . . 64

9.16. Interfaz final de valoraci´on de productos. Fuente: Propia . . . 65

9.17. Interacci´on con los filtros de la pantalla inicial. Fuente: Propia . . . 66

9.18. Detalle de las valoraciones del producto. Fuente: Propia . . . 67

9.19. Resultado final de la interfaz de perfil de usuario. Fuente: Propia . . . 68

9.20. Pruebas de la aplicaci´on en diferentes modelos de m´oviles (Xiaomi MI 9 y Xiaomi MI 10T). Fuente: Propia . . . 69

9.21. Icono y nombre del proyecto en dispositivo Android. Fuente: Propia . . . 70

9.22. Pantalla de carga con icono propio. Fuente: Propia . . . 71

10.1. Nivel de error en el test a usuarios y explicaci´on del mismo. Fuente: Propia 74 10.2. Nivel de satisfacci´on en el test a usuarios. Fuente: Propia . . . 74

10.3. Posibles mejoras obtenidas en el test a usuarios. Fuente: Propia . . . 74

10.4. Prueba de la aplicaci´on en un movil Samsung Galaxy A21s. Fuente: Propia 75 10.5. Resultado de la prueba Robo en 3 modelos de m´oviles. Fuente: Propia . . 76

10.6. Resultado satisfactorio del test de accesibilidad de Firebase en tres mo- delos de m´oviles. Fuente: Propia . . . 76

11.1. Listado de interfaces realizadas en el producto final. Fuente: Propia . . . . 80

12.1. Im´agenes del correcto funcionamiento en un dispositivo m´ovil. Fuente: Propia . . . 83

A.1. Rango de edad de los usuarios encuestados. Fuente: Propia . . . 89

A.2. G´enero de los usuarios encuestados. Fuente: Propia . . . 90

A.3. Uso del maquillaje de los usuarios encuestados. Fuente: Propia . . . 90

A.4. Compra de cosm´eticos de los usuarios encuestados. Fuente: Propia . . . . 91

A.5. Frecuencia de compra de cosm´eticos de los usuarios encuestados. Fuente: Propia . . . 91

A.6. Gasto de los usuarios encuestados. Fuente: Propia . . . 92

A.7. Canales de compra de los usuarios encuestados. Fuente: Propia . . . 92 A.8. En que se basan los usuarios encuestados para comprar. Fuente: Propia . 93 A.9. Satisfacci´on con las compras en los usuarios encuestados. Fuente: Propia . 93

(21)

´Indice de figuras xxi

A.10.N´umero de usuarios encuestados que solicitan formar parte del proyecto.

Fuente: Propia . . . 94 B.1. Registros de horas en Toggl. Fuente: Propia . . . 95

(22)
(23)

´Indice de tablas

2.1. Clasificaci´on de Riesgos Tecnol´ogicos . . . 9 2.2. Clasificaci´on de Riesgos Personales . . . 9 2.3. Clasificaci´on de Riesgos de Herramientas . . . 10 2.4. Clasificaci´on de Riesgos de Requerimientos . . . 10 2.5. Clasificaci´on de Riesgos de Estimaci´on . . . 10 3.1. Planificaci´on Inicial del TFG . . . 11 7.1. Descripci´on de rol administrador . . . 29 7.2. Descripci´on de rol usuario . . . 29

xxiii

(24)
(25)

1. Introducci´ on

Desde el inicio de los tiempos se ha utilizado el maquillaje de una manera muy fre- cuente. Desde arcilla roja en la prehistoria a formulaciones m´as complejas para no da˜nar la piel. No somos capaces de adjudicar su uso a una simple raz´on ya que se le puede atribuir diferentes funciones como “realzar la belleza”, actos f´unebres en la antig¨uedad, formas de expresi´on, arte, cine, entre muchos otros.

En torno al maquillaje existe una industria enorme en la cual se espera que se facturen 800 mil millones de euros y es que ya en 2017, la generaci´on de millenials consumi´o un 25 % m´as de productos que dos a˜nos atr´as [elEconomista, 2019].

Actualmente, existen tantos tipos de funciones del maquillaje que no podemos definir un tipo de persona en concreto. Sin embargo, existe un punto en com´un: el maquillaje es caro y no siempre aciertas.

Las caracter´ısticas de las personas no siempre son las mismas, por ello encontrar la formula perfecta no siempre es una tarea f´acil para un consumidor normal. A esta pro- blem´atica se le a˜nade el costo de los productos. Existen muchas marcas con precios econ´omicos, sin embargo, en repetidas ocasiones estas llevan a los usuarios a gastar di- nero en productos con f´ormulas mediocres. Tras esto, el usuario encuentra productos menos econ´omicos pero con dudas de si realmente estos funcionar´an como desea.

Es por ello que la idea principal es tener en cuenta las experiencias de otros usuarios para as´ı guiar a los usuarios mas dubitativos a productos que, con una mayor probabi- lidad, si conseguir´an un resultado que desean.

Actualmente, las valoraciones de los usuarios cuentan con un valor fundamental en la compra de productos, ya que orientan al comprador y facilitan la b´usqueda de la infor- maci´on que requieren. Asimismo aporta fiabilidad y proporciona sensaci´on de calidad al producto.

En cambio, la opini´on de un producto de cosm´etica no es lo mismo que sobre un bolso o una camiseta. Aqu´ı se debe tener en cuenta muchos m´as factores que una simple opi- ni´on de otro usuario. ¿Acaso ese usuario tiene la misma piel que yo? Es en ese punto del problema donde debemos ofrecer la soluci´on. Ofrecerle a los usuarios las opiniones que s´ı necesita y no una gran cantidad de comentarios de todo tipo de personas con diferentes necesidades.

1

(26)

2

Por lo anteriormente mencionado, este Trabajo de Final de Grado ser´a una aplicaci´on que de soluci´on a esta problem´atica ofreci´endole a cada usuario informaci´on diferente y relevante sobre los cosm´eticos con datos contrastados por otros usuarios.

Glowwy ofrecer´a una experiencia de compra diferente, ya que la aplicaci´on solo ser- vir´a como intermediario entre la inspiraci´on del usuario y la compra final del producto mostr´andole diferentes opciones de cosm´eticos que s´ı tienen ´exito asegurado.

(27)

2. Estudio de Viabilidad

En las primeras etapas de un proyecto un estudio de viabilidad es uno de los primeros pasos importantes a realizar. Esto ayuda a analizar el proyecto conociendo que objetivos son viables y tomando decisiones en base a ello.

De este modo, se establece realizar un an´alisis DAFO seguido del desarrollo de un Lean Canvas y un an´alisis de riesgos a tener en cuenta y crear un plan para prevenir cualquier tipo de problema.

2.1. An´ alisis DAFO

El An´alisis DAFO (siglas de Debilidades, Amenazas, Fortalezas y Oportunidades) es una metodolog´ıa que sirve para el estudio de la situaci´on de un proyecto. Esta herramien- ta analiza las caracter´ısticas internas (Debilidades y Fortalezas) y su situaci´on externa (Amenazas y Oportunidades).

En relaci´on al proyecto Glowwy se puede definir los cuadrantes de la matriz con lo siguiente:

Debilidades

• Conocimiento limitado en las nuevas tecnolog´ıas.

• Falta de experiencia en proyectos de gran magnitud.

• Nula disponibilidad de recursos financieros.

• Proyecto realizado por una ´unica persona.

Amenazas

• Poco tiempo disponible al realizar el TFG conjuntamente con un m´aster y el trabajo.

• Posibilidad de copia.

• Usuarios reticentes a usar la aplicaci´on.

• Inconsistencia en cuanto a la seguridad del sistema.

Fortalezas

• Conocimiento del sector de la cosm´etica.

• Aumento de consumo del maquillaje que nos proporciona mayor n´umero de clientes interesados.

• Relaciones con expertos en la materia.

3

(28)

4 2.2. Lean Canvas

• Amplia red de contactos relacionados con el tema que puede proporcionar tantos datos como valoraciones o mejoras.

• Aplicaci´on gratuita.

Oportunidades

• Nicho de mercado poco explotado en cuanto a aplicaciones.

• Conocer nuevas tecnolog´ıas gracias al desarrollo del proyecto.

• Generaci´on de nuevo contenido a introducir en el CV.

• Llegar a gran cantidad de personas usando la aplicaci´on obteniendo de ella ingresos.

2.2. Lean Canvas

El Lean Canvas es un m´etodo de visualizaci´on de modelos de negocio que permite analizar diferentes caracter´ısticas con el prop´osito de aumentar las posibilidades de ´exito.

Sus 9 bases fundamentales son:

La definici´on de clientes objetivo.

Identificar del problema de los usuarios.

Establecer la propuesta de valor que nos hace ´unicos.

Determinar las caracter´ısticas que ofrecemos para solucionar el problema al que se enfrentan los usuarios.

Analizar los canales que dar´an a conocer nuestro producto.

Describir los ingresos que har´an viable el proyecto.

Identificar los costes que nos encontraremos.

Determinar las m´etricas clave por las que reconoceremos la prosperidad del pro- yecto.

Reconocer aquello que nos hace especiales frente a la competencia.

Tras definir cada uno de los pilares del Lean Canvas en nuestro proyecto Glowwy se tendr´ıa como resultado la figura 2.2.

A partir de este an´alisis a modo de lienzo es id´oneo indagar m´as en cada uno de estos campos para as´ı tener una idea mas amplia sobre las caracter´ısticas de nuestro proyecto.

(29)

Estudio de Viabilidad 5

Figura 2.1.: Lienzo Lean Canvas de Glowwy. Fuente: Propia

2.2.1. Segmento de clientes

Personas amantes del maquillaje: Personas, generalmente j´ovenes, que tienen como afici´on el mundo de la belleza y el maquillaje. Por lo general buscan infor- maci´on en redes sociales o en v´ıdeos de Youtube, siendo esta ultima una de las herramientas m´as usadas por este segmento de clientes.

Maquilladores profesionales: Su herramienta de trabajo es el maquillaje por lo que por lo general deben estar al tanto de las caracter´ısticas de cada producto y de como funciona en cada piel.

Influencers: Los creadores de contenido relacionados con la cosm´etica est´an al tanto de los productos que ense˜nan a su audiencia y como podr´ıa funcionar en ellos.

Marcas de maquillaje: Est´an interesadas en que el usuario que comprar´a su producto visibilidad y por lo tanto, ser recomendado por otros usuarios.

Tiendas de maquillaje: Similar al segmento anterior, las tiendas de maquillaje

(30)

6 2.2. Lean Canvas

necesitan estar enlazadas en la aplicaci´on como tienda de referencia principal, logrando as´ı un mayor n´umero de compras.

2.2.2. Problema

Podemos definir tres problemas principales:

1. Los usuarios que compran maquillaje pueden llegar a las tiendas sin tener una idea clara de qu´e producto en espec´ıfico necesitan, teniendo que preguntar a los dependientes o en el peor de los casos gastando un dinero innecesario en productos que no terminan funcionando.

2. En el momento en el usuario escoge un producto para comprar no est´a completa- mente seguro de si ese producto es el adecuado para lo que principalmente est´a buscando. Carece de opiniones de otros usuarios que sean iguales a ´el.

3. Los anteriores problemas te llevan al gasto de dinero elevado el cual podr´ıa haberse evitado.

2.2.3. Proposici´on de valor ´unica

La propuesta que se realiza es la posibilidad de tener resultados personalizados en base a sus preferencias y caracter´ısticas adem´as de las experiencias de otros usuarios (similares entre ellos) usando diferentes productos, realizando as´ı compras con m´as garant´ıas de

´exito.

Es por ello que el usuario no tendr´a la tarea de realizar b´usquedas exhaustivas a la hora de encontrar aquellos productos que m´as se relacionan con lo que realmente est´a buscando, ahorrando tanto tiempo como dinero.

2.2.4. Soluci´on

Se propone la creaci´on de una plataforma la cual posibilita al usuario una b´usqueda segmentada realizando un filtrado de productos en base al perfil del usuario.

Para ello, el usuario deber´a rellenar un peque˜no formulario en el que indique sus preferencias y la plataforma le otorgar´a los productos id´oneos.

Adem´as a˜nade la posibilidad de listar tus productos favoritos para un r´apido acceso al realizar compras.

2.2.5. Canales

Redes sociales: Estar presente en las redes sociales es una de las formas m´as efectivas de conseguir visibilidad. Las principales redes sociales en las que publici- taremos el proyecto ser´an Twitter, Instagram, Tik Tok y Facebook.

Youtube: La mayor´ıa de consumidores de maquillaje son fieles seguidores de v´ıdeos de Youtube relacionados con la belleza, es por eso que darte a conocer con anuncios y v´ıdeos promocionales es una tarea fundamental.

(31)

Estudio de Viabilidad 7

Influencers: La gran cantidad de usuarios de internet sigue a influencers en sus redes sociales, siendo cada una de estas un escaparate para las marcas. Es por ello que pactar alg´un tipo de anuncio con estos perfiles, relacionados con lo que aportamos, es importante ya que generaremos tr´afico.

App Store / Play Store: Conseguir un buen posicionamiento en las tiendas de aplicaciones de los principales sistemas operativos ser´a primordial. Para ello es necesario conocer el posicionamiento ASO, App Store Optimization, el cual sirve para optimizar nuestra App en tiendas de aplicaciones de Google o iOS.

Publicidad digital y f´ısica: En la actualidad, tener presencia en Google es la base m´as importante para que tu proyecto sea conocido. Adem´as, una de las funcio- nalidades que nos proporciona Google es Google Ads, un servicio de publicidad a trav´es de internet por el cual poder conseguir un gran alcance a trav´es de internet.

Web Corporativa: Est´a claro que si no est´as en internet, no existes. Por lo que es recomendable tener una buena presencia dando a conocer tu proyecto y qu´e ofreces incluyendo una web corporativa de tu proyecto.

2.2.6. Flujo de ingresos

Como objetivo principal para el flujo de ingresos del proyecto usaremos la t´ecnica de marketing de afiliados, es decir, a˜nadir enlaces referidos a los productos para que su compra en tiendas online genere ingresos.

No como objetivo principal y en caso de ´exito, se a˜nadir´ıa la funcionalidad de que tanto tiendas de maquillaje como marcas de maquillaje puedan promocionar sus productos para conseguir un mayor alcance de clientes.

2.2.7. Estructura de costes

En cuanto a los costes del desarrollo del proyecto se han incluido:

Recursos humanos: En este caso se trata de un proyecto TFG, sin embargo, cabe mencionar los costes de salario del trabajo que conlleva la realizaci´on de este trabajo.

Servidor: Para el desarrollo de la aplicaci´on es necesario alojar la base de datos y la API en un servidor.

Publicaci´on en Play Store y App Store: En el caso de la tienda de Google, solo es necesario registrarse como desarrolladora y pagar una tasa de 25$ anuales.

Por otro lado, en caso de la App Store de iOS su coste asciende a 99$ anuales, sin embargo, tras un estudio realizado, hemos determinado que existe una gran cantidad de clientes potenciales que hacen uso de dicha marca, por lo tanto ser´ıa un inconveniente no publicarla en esta plataforma.

(32)

8 2.3. An´alisis de riesgos

Publicidad: Al estar ante un proyecto acad´emico no se realizar´an gastos en pu- blicidad. Sin embargo, en caso de prosperidad de la aplicaci´on un coste a tener en cuenta ser´ıa el de hacer uso del servicio de publicidad que nos facilitan tanto las diferentes redes sociales como Google.

2.2.8. M´etricas clave

Es primordial llevar el control de las m´etricas clave para diagnosticar problemas o aciertos. Al estar ante la fase inicial de un proyecto se han definido las siguientes m´etricas:

N´umero de usuarios semanales N´umero de descargas semanales N´umero de b´usquedas diarias Clics en enlaces referidos Descargas totales y activas 2.2.9. Ventaja especial

La ventaja especial que caracteriza Glowwy es que se desarrolla por una usuaria que ha necesitado muchas veces una aplicaci´on con estas caracter´ısticas y en colaboraci´on con referentes en el mundo del maquillaje y la cosm´etica.

2.3. An´ alisis de riesgos

(33)

Estudio de Viabilidad 9

Riesgo Probabilidad Efecto Plan de Contingencia

Poco conocimiento de las tec- nolog´ıas escogidas

Alta Tolerable Tener presente carencias en las tecnolog´ıas y adquirir co- nocimientos sobre ellas.

Aver´ıa de dispositivos utiliza- dos en el desarrollo

Media Alta Cuidado especial con las he- rramientas de trabajo y utili- zar un ordenador de repuesto mientras dure la aver´ıa Ca´ıda de servicios de los que

hace uso la aplicaci´on

Baja Serio

P´erdida de archivos Muy baja Catastr´ofico Realizar peri´odicamente co- pias de seguridad

P´erdida total de copias de se- guridad

Muy baja Catastr´ofico Como medida de prevenci´on alojar las copias de seguridad en diferentes dispositivos Tabla 2.1.: Clasificaci´on de Riesgos Tecnol´ogicos

Riesgo Probabilidad Efecto Plan de Contingencia

P´erdida de motivaci´on Baja Serio Recuperar la motivaci´on con ayuda de familiares y/o ami- gos y en caso grave realizar un descanso de una semana.

Enfermedad Media Tolerable Tener en cuenta a la hora de

establecer los plazos posibles semanas con un ritmo de tra- bajo m´as lento o nulo en caso de enfermedad grave

Poca disponibilidad de tiempo por realizar el proyecto con- juntamente a un m´aster y tra- bajo

Alta Serio Llevar a cabo una planifica- ci´on semanal organizando el tiempo disponible sin dejar de dedicarle el tiempo estableci- do.

Tabla 2.2.: Clasificaci´on de Riesgos Personales

(34)

10 2.3. An´alisis de riesgos

Riesgo Probabilidad Efecto Plan de Contingencia

Conflicto con control de ver- siones

Alta Tolerable Utilizar un repositorio Git- hub, as´ı como sus ramas, para mantener los cambios de c´odi- go registrados.

Ca´ıda de servicios de terceros Baja Tolerable Tener previstas alternativas para los servicios de terceros utilizados.

Tabla 2.3.: Clasificaci´on de Riesgos de Herramientas

Riesgo Probabilidad Efecto Plan de Contingencia

Cambio en los requerimientos del proyecto

Media Tolerable Comprobar tanto la memoria como el desarrollo de la apli- caci´on actualizando los cam- bios.

Tabla 2.4.: Clasificaci´on de Riesgos de Requerimientos

Riesgo Probabilidad Efecto Plan de Contingencia

Subestimar o sobrevalorar ta- reas y tiempo requerido

Alta Tolerable Estructurar con conocimiento las tareas de cada iteraci´on Tabla 2.5.: Clasificaci´on de Riesgos de Estimaci´on

(35)

3. Planificaci´ on

Se ha de realizar una planificaci´on de los tiempos l´ımites para cada una de las tareas que se deben llevar a cabo. Gracias a una buena organizaci´on del tiempo disponible se puede tener en cuenta las tareas prioritarias, los plazos m´aximos y tambi´en ser conscien- te de posibles riesgos o imprevistos que podr´ıan retrasar las tareas.

Asimismo, se logra tener una idea m´as clara de en qu´e punto se est´a del proyecto y cuanto faltar´ıa para finalizarlo.

Se ha decidido dividir la planificaci´on en los diferentes apartados del proyecto y su posterior implementaci´on. Se puede ver el resultado de la planificaci´on en la tabla 3.1.

Contenidos Tiempo total Fecha limite fin

Motivaci´on, justificaci´on, objetivo general 3 meses 15 de diciembre Introducci´on

Estudio de viabilidad Planificaci´on

Estado del arte

Objetivos 2 meses 13 de febrero

Metodolog´ıa

An´alisis y especificaci´on

Dise˜no 2 meses 24 de abril

Implementaci´on 3 meses 18 de julio

Pruebas y validaci´on 1 mes 19 de agosto

Resultados Conclusiones

Referencias, bibliograf´ıa y ap´endices Agradecimientos

Citas

´Indices Resumen

Tabla 3.1.: Planificaci´on Inicial del TFG

11

(36)
(37)

4. Estado del arte

En el momento en el que se desea iniciar un nuevo proyecto, es necesario conocer tanto de la problem´atica de este como de sus principales competidores.

Debido a la importancia de esto, se realiza un estudio de las soluciones actuales para co- nocer qu´e diferentes caracter´ısticas aumentar´ıan el valor de nuestra propuesta. Adem´as, se realiza un an´alisis de las principales tecnolog´ıas y cuales son las ´optimas para el desarrollo de Glowwy.

4.1. An´ alisis del mercado

La industria del maquillaje y los cosm´eticos es una de las industrias m´as innovadoras que impulsa el desarrollo econ´omico de la Uni´on Europea. Esto no podr´ıa darse sin la gran comunidad de personas que usan y compran cosm´eticos con frecuencia.

En 2018, la industria de productos de belleza, en este caso Estados Unidos, cre´o unos 3.9 millones de empleos e ingresos de 170 mil millones de d´olares [PersonalCare Council, 2020].

Un estudio sobre la industria de los cosm´eticos [Common Thread, 2021] revelaron la gran importancia que tiene el contenido relacionado con la belleza en Youtube. Estos Youtubers que publican sus v´ıdeos sobre maquillaje generan a˜no tras a˜no un gran cre- cimiento de visitas en sus v´ıdeos, aumentando casi un 20 % de 2017 a 2018, logrando cifras de casi 170 mil millones de visitas como podemos observar en la figura 4.1.

Figura 4.1.: Visitas relacionadas con belleza en Youtube. Fuente: Common Thread

13

(38)

14 4.1. An´alisis del mercado

Como se puede observar, este es un mercado que actualmente est´a en auge, por lo que generar nuevas soluciones efectivas para los usuarios es relevante.

A continuaci´on, se detallar´a cada una de las soluciones actuales que ofrece el mer- cado, las cuales generan una competencia en la que se debe destacar para conseguir la prosperidad de Glowwy.

4.1.1. Sephora

Sephora1 es una cadena parisina de cosm´eticos de lujo la cual cuenta con 750 tiendas en un total de 21 pa´ıses. Es, sin duda, una de las mayores cadenas de productos de maquillaje que adem´as comercializa con un total de 210 marcas. No solo tienen tiendas f´ısicas, sino tambi´en tanto una tienda web y una aplicaci´on. La aplicaci´on cuenta en la Google Play con m´as de 100.000 descargas y un 3,8 de valoraci´on y en la App Store cuenta con un 4,5 proveniente de 4.000 usuarios.

Sin embargo, esta aplicaci´on no genera una soluci´on eficaz al filtrado de productos ya que solo tenemos la posibilidad de filtrar por caracter´ısticas mas b´asicas como el precio o la marca. Si el usuario quiere indagar un poco m´as acerca de si este producto ser´ıa el recomendado para el deber´a ir uno a uno, existiendo la posibilidad de no encontrar una respuesta.

Figura 4.2.: Capturas de pantalla de los interfaces de Sephora. Fuente: Propia

1Sephora: https://www.sephora.es/.

(39)

Estado del arte 15

4.1.2. Primor

Primor es una cadena de tiendas tanto de perfumes como de cosm´etica, siendo una de las mejores valoradas de Espa˜na. Tienen m´as de 150 tiendas por todo el territorio nacional y Portugal. Adem´as, tienen su propia aplicaci´on en la Google Play con m´as de 500.000 descargas contando con un 2.8 de m´as de 1.000 usuarios y un 1,8 por parte de los usuarios de iOs. Tras leer los comentarios de los clientes se podr´ıa llegar a la conclusi´on de que esta aplicaci´on es un tanto lenta adem´as de que califican el proceso de compra tedioso.

Una de las mejores caracter´ısticas de esta aplicaci´on es que, a diferencia de Sepho- ra, estos tienen un filtro en sus productos faciales dependiendo de las caracter´ısticas de tu piel. Sin embargo, este es un filtro que no est´a basado en las experiencias de otros usuarios, sino en las propiedades de los productos o en lo que ha decidido la marca del producto. No obstante, si entramos en cualquier otra colecci´on de productos ya no tendr´ıamos esos filtros de caracter´ısticas.

Figura 4.3.: Capturas de pantalla de los interfaces de Primor. Fuente: Propia

(40)

16 4.1. An´alisis del mercado

4.1.3. Lookfantastic

Lookfantastic fundada en 1996 tiene una de las tiendas con mayor importancia en internet, teniendo una oferta de m´as de 14.000 productos siendo esta una del tiendas que mayor cantidad de marcas recoge. Su aplicaci´on en la tienda de Google tiene m´as de 500.000 descargas superando a Sephora y al mismo nivel de Primor.

En su aplicaci´on puedes comprar estos productos con una experiencia de usuario bastante buena, esto se ve reflejado en su valoraci´on de 4,2 en la Google Play. Adem´as, como ha sido visto anteriormente en Sephora esta aplicaci´on tambi´en tiene un filtrado para tipos de rostro en su colecci´on de bases de maquillaje, ofreciendo al usuario una mejor segmentaci´on de productos.

Sin embargo, no tenemos una ordenaci´on de productos personalizada y esta segmen- taci´on de filtros seguir´ıa basado en las caracter´ısticas que ofrecen las marcas de sus productos pudiendo esta no ser real.

Figura 4.4.: Interfaces de lookfantastic

4.1.4. Beautistics

Beautistics es una aplicaci´on con m´as de 10.000 descargas en la Google Play y con un 4.3 de valoraci´on. Para los usuarios de la App Store de iOs tambi´en se puede encontrar pero carece de valoraci´on por estos usuarios.

Esta plataforma te permite escanear los c´odigos de barras de los productos, guardarlos en tu bolsa y ver las valoraciones de otros usuarios. Una de sus mejores funcionalidades es

(41)

Estado del arte 17

el poder llevar una organizaci´on con los productos adquiridos y sus fechas de caducidad adem´as de poder organizar tu colecci´on de maquillaje. Adem´as, podemos encontrar diferentes tarifas para los usuarios: gratis y premium (0,99 e/mes o 6,49 e/a˜no). Este

´

ultimo a˜nade un numero de funcionalidades adem´as de mayor espacio para guardar tu inventario de productos.

Sin embargo, una de las caracter´ısticas que se echan en falta es poder buscar productos filtrando con tus propias necesidades. Adem´as, para comprobar las valoraciones de los usuarios tienes que entrar en cada uno de las valoraciones para ver con claridad lo que opinan otros usuarios.

Figura 4.5.: Interfaces de Beautistics

4.1.5. My Beauty Community

My Beauty Community es una aplicaci´on francesa con m´as de 50.000 descargas y un total de 957 valoraciones que le otorgan un 4.5 de puntuaci´on. Esta app solo est´a disponible para la tienda de aplicaciones de Google.

En cuanto a las caracter´ısticas, esta aplicaci´on te permite comparar las valoraciones de otros usuarios que tu hayas a˜nadido en tu red de ¨usuarios con similares necesidades”.

Adem´as, te permite ver las valoraciones dentro del detalle del producto entre los usuarios que has a˜nadido a tu red y el resto de usuarios.

Sin embargo, una de las principales carencias es poder utilizar la aplicaci´on en otro idioma como ingl´es o espa˜nol. Por otra parte, es el usuario quien debe a˜nadir a sus usuarios similares haciendo lento este proceso.

(42)

18 4.2. Tecnolog´ıas para el desarrollo

Figura 4.6.: Interfaces de My Beauty Community

4.2. Tecnolog´ıas para el desarrollo

En primer lugar, se debe tener en cuenta y estudiar las diferentes posibilidades que exis- ten a la hora de hacer un desarrollo de una aplicaci´on. Se debe conocer los tres tipos de desarrollos que hay: aplicaciones nativas, semi-h´ıbridas e h´ıbridas [Bamb´uMobile, 2020].

Las aplicaciones nativas son desarrolladas en el lenguaje nativo del dispositivo, Kotlin para Android, Swift para iOs y .Net para Windows Phone. Al ser desarrolladas en un lenguaje nativo, las aplicaciones no son portables y en el caso de querer publicar una plataforma en varios sistemas operativos se necesita desarrollar una aplicaci´on por pla- taforma.

Dotar a nuestra plataforma con un desarrollo nativo nos permitir´a prevenir errores de desarrollo y por lo general constan de un mayor rendimiento en sus respectivos sistemas operativos, lo cual podr´ıa decantar la balanza por este tipo.

Un entorno de desarrollo h´ıbrido permitir´ıa desarrollar aplicaciones nativas para dife- rentes sistemas operativos, utilizando el lenguaje C# y XAML. Este tipo de desarrollo permitir´ıa compartir hasta un 90 % del c´odigo entre plataformas. Sin embargo, en el caso de iOs para la implementaci´on y compilaci´on se requiere el uso de un equipo MacOS, por lo que este tipo de desarrollo estar´ıa descartado.

(43)

Estado del arte 19

Las aplicaciones que han sido desarrolladas en un entorno h´ıbrido utilizan HTML, CSS y JavaScript, esto facilita la obtenci´on de una aplicaci´on que puede ser utilizada tanto en iOs como Android.

Tras estudiar estos tres tipos de desarrollo se ha llegado a la conclusi´on de que el desarrollo en cada uno de los lenguajes retrasar´ıa el proyecto y escoger solamente uno de los sistemas operativos donde publicar la aplicaci´on limitar´ıa el alcance porque se perder´ıa gran cantidad de usuarios, por lo que se ha decidido usar el desarrollo h´ıbrido.

4.2.1. Ionic

Actualmente, Ionic es uno de los frameworks m´as conocidos y utilizados. Este permi- te utilizar HTML, CSS y JavaScript. Al ser lanzado fue construido sobre Angular, sin embargo, en la actualidad y tras algunas actualizaciones Ionic permite al usuario elegir cualquier interfaz como React o Vue. Una de las caracter´ısticas de este framework es que este nos estar´ıa mostrando una PWA simulando el funcionamiento de una aplicaci´on nativa [Randy Varela, 2016].

Haciendo referencia a las ventajas podemos encontrar una amplia biblioteca con com- ponentes para realizar una aplicaci´on de primer nivel, ayudando en el ´ambito de dise˜no de la interfaz de usuario. Adem´as, como est´a apoyado por Angular, React o Vue, si ya se conoce el entorno podr´a ahorrarse tiempo en el estudio de nuevos lenguajes y tecnolog´ıas.

Ionic tiene algunas desventajas, entre las m´as importantes son el bajo nivel rendi- miento ya que finalmente est´a renderizando una PWA como si fuese una app nativa.

No consta de la funcionalidad de recarga en caliente y en aplicaciones pesadas reducen considerablemente su rendimiento.

4.2.2. React Native

React Native es la propuesta de Facebook para el desarrollo de aplicaciones h´ıbridas basado en React y JavaScript. A diferencia de Ionic, este utiliza los componentes nativos [Desarrollo Web, 2021]. Esto es debido al acceso directo que tiene React con las APIs de los sistemas operativos, por lo que la experiencia del usuario ser´ıa muy similar a la de un desarrollo nativo. Debido a que React Native est´a mantenido por Facebook una gran cantidad de aplicaciones famosas lo usan, entre ellas, Pinterest, Uber, Instagram...

Entre las ventajas encontramos un r´apido desarrollo debido al numeroso marco de componentes disponibles para usar y la gran cantidad de informaci´on ´util en internet respecto al desarrollo de aplicaciones en este framework.

(44)

20 4.2. Tecnolog´ıas para el desarrollo

En cuanto a las desventajas, el desarrollo no es tan fluido ya que su recarga en ca- liente no es demasiado r´apido. Por otra parte, este tipo de desarrollos no nos libra de las incompatibilidades con las herramientas de depuraci´on. Tambi´en carece de algunos componentes.

4.2.3. Flutter

Google decidi´o lanzar en 2017 su propio SDK de c´odigo fuente abierto de desarrollo de aplicaciones llamado Flutter. Este, a diferencia de los anteriores, usa como lenguaje de programaci´on Dart. Este es una alternativa a JavaScript lanzada tambi´en por Google.

Una de las ventajas con respecto a React es su incremento de rendimiento y veloci- dad. Su funci´on de recarga en caliente permite a los desarrolladores ver los cambios de inmediato. Adem´as de una gran librer´ıa de widget propios.

Como desventajas podr´ıamos contar con la falta de documentaci´on e informaci´on debido a que es un framework bastante reciente, el aumento de peso con respecto a aplicaciones desarrolladas en otros frameworks y la necesaria curva de aprendizaje con el lenguaje Dart.

4.2.4. PhoneGap

PhoneGap es la alternativa que presenta Adobe Systems a los desarrollos h´ıbridos.

Este framework utiliza una de las APIs que permite mayor acceso al hardware del siste- ma y adem´as tiene la posibilidad de incorporar otros frameworks como jQuery Mobile.

Otro de los puntos fuertes de PhoneGap es su servicio de compilacion en la nube Adobe Creative Cloud, facilitando al desarrollador esta tarea.

Las ventajas de un desarrollo en PhoneGap es su r´apida curva de aprendizaje, consta de un sistema de backend robusto y el f´acil acceso al hardware del sistema, entre ellos c´amara o br´ujula.

En cuanto a las desventajas, el rendimiento de las aplicaciones desarrolladas con este framework es lento debido a la pesada estructura de PhoneGap.

Tras este estudio, se ha llegado a la conclusi´on de que este framework ser´ıa perfecto para un desarrollo en el que se necesite rapidez, sin embargo, si queremos obtener buenos resultados no es la mejor opci´on.

(45)

Estado del arte 21

4.2.5. NativeScript

NativeScript es un framework lanzado en 2015 de c´odigo abierto utilizado para crear aplicaciones nativas usando Angular, Vue, JavaScript o TypeScript. A diferencia de Io- nic, NativeScript hace uso de sus propios componentes [Medium, 2017].

Las grandes ventajas de este framework es que las apps desarrolladas son verdadera- mente nativas, por lo que el en uso de componentes del hardware como la c´amara o el aceler´ometro no es necesaria una capa intermediaria. Debido a que el producto generado es nativo, podemos deducir un mayor rendimiento.

En el lado de las desventajas podemos destacar que no hay ni HTML ni DOM, por lo que es necesario aprender los componentes para construir las vistas de tu aplicaci´on.

Adem´as, necesitar´as conocer las APIs de los sistemas operativos para acceder al hard- ware. Adem´as carece de recarga en caliente por lo que los cambios necesitaran recargar la aplicaci´on para mostrar estas modificaciones.

4.3. Backend

Antes de pasar a desarrollar, se debe tener clara la estrategia a seguir en cuanto al backend del proyecto. Cuando se habla de backend se entiende como la l´ogica de una p´agina web o una aplicaci´on como el almacenamiento de datos, la seguridad y la l´ogica.

Esta parte interna del proyecto almacena, protege y procesa los datos que se tienen.

Las principales caracter´ısticas para un buen servicio son velocidad, autenticaci´on y seguridad, escalabilidad, confidencialidad, integridad y disponibilidad.

Se requerir´a guardar datos y procesarlos por lo que se debe considerar las diferentes opciones que existen. En primer lugar, se puede desarrollar un propio servidor desde ce- ro, sin embargo, esto solo aumentar´ıa notablemente el tiempo requerido. Tras desechar la primera opci´on se puede tener en cuenta BaaS preexistentes como modelo. BaaS, tambi´en conocido como “mobile backend as a service”. A continuaci´on se detallan tanto AWS como Firebase [Dashbird, 2020], las cuales son las mas usadas por aplicaciones mundialmente conocidas como se puede observar en la figura 4.7.

AWS Mobile: Los servicios web de Amazon ofrecen un rendimiento bastante solido adem´as de que la configuraci´on es bastante sencilla. Al ser una empresa con- solidada, se sabe de antemano que estamos ante un servicio impecable. Adem´as, este servicio lleva consigo todas las herramientas de Amazon incluidas, por ejem- plo, bases de datos, software, an´alisis, etc´etera. Por otra parte, la capacidad del servidor es ilimitada. En cuanto a la seguridad, se puede decir que la informaci´on y los datos est´an protegidos en doce centros con una seguridad encriptada de alto

(46)

22 4.3. Backend

nivel.

En cuanto a los contras, nos encontramos ante el pago por uso, esto significa que cuanto m´as tr´afico tenga la aplicaci´on m´as costo generar´a. Por otra parte, al ofre- cer una gran cantidad de servicios, la curva de aprendizaje es mas lenta, por lo que usar AWS en proyectos es m´as adecuado en equipos grandes y consolidados.

Firebase: Esta opci´on es mas actual que la anteriormente mencionada y por ello, usa tecnolog´ıas mas avanzadas ofreciendo una integraci´on solida con imagenes y texto, entre otras. Es compatible con Android e iOs. Por otra parte, tenemos que el costo de su servicio empieza de manera gratuita hasta haber agotado un nume- ro limitado diario de datos. Adem´as, tiene una curva de aprendizaje r´apida si se compara con AWS.

Considerando las desventajas, se puede tener en cuenta la limitaci´on de la capaci- dad de consulta, proporcion´andose una base de datos completa sin filtros, dificul- tando as´ı las consultas [Digital 55, 2020].

Figura 4.7.: Comparativa Firebase y AWS. Fuente: Stackshare

(47)

5. Objetivos

En este apartado se concretan los objetivos que se desean lograr con este trabajo de final de grado, teniendo as´ı una meta clara. Para ello, se utiliza la metodolog´ıa SMART1 [Trenza, 2019], la cual permite definir con mayor precisi´on las metas de este proyecto.

El objetivo principal de este proyecto es realizar una aplicaci´on m´ovil con la cual se puedan encontrar productos de cosm´etica y maquillaje afines a cada usuario, por medio de una interfaz intuitiva y cuidada. A continuaci´on, se detallan los subobjetivos del pro- yecto:

Creaci´on del Lean Canvas del modelo de negocio del proyecto.

Registro de usuarios mediante OAuth2 para garantizar mayor seguridad.

Categorizar por secciones los productos de maquillaje para poder acceder f´acil- mente.

Filtrado de productos para un proceso de b´usqueda m´as sesgado.

Recomendaci´on de productos bien valorados por usuarios con perfiles y gustos similares entre si.

Crear listado de productos favoritos para un proceso de compra m´as ´agil para los usuarios.

Publicaci´on de la aplicaci´on tanto en la Play Store como en la App Store.

1SMART (Specific, Measurable, Achievable, Relevant y Time-Oriented): Metodolog´ıa con la que dise˜nar un camino para alcanzar tus metas. - George T. Doran, 1981

2OAuth (Open Authorization): Est´andar abierto que permite la autorizaci´on segura mediante el uso de un API.

23

(48)
(49)

6. Metodolog´ıa

En este apartado se detallar´a que t´ecnicas de trabajo se llevar´an a cabo adem´as de las herramientas empleadas.

En cuanto al trabajo de desarrollo de la memoria se emplear´a la metodolog´ıa Kanban1 [IEBS, 2020]. Por otra parte, en cuanto al desarrollo de la implementaci´on del proyecto se tomar´a en cuenta la metodolog´ıa Scrum2, tomando alternativas en aquellos pilares fundamentales donde esta metodolog´ıa incluya a un equipo, debido a que al ser un pro- yecto universitario es una ´unica persona la que hace todo el trabajo.

Las dos metodolog´ıas ´agiles3 [Zenkit, 2018] que se han mencionado sirven para orga- nizarse, adaptar los tiempos y condiciones del proyecto pudiendo gestionar los cambios que pueden surgir. Debido a esto, siempre se tendr´a presente qu´e es lo que se ha hecho, que se est´a haciendo y qu´e se har´a, pudiendo dividir las tareas en un tablero en los apartados por hacer, en progreso, pendientes y terminadas.

Existen diferencias entre Scrum y Kanban y es por ello que se ha optado por una de ellas en cada parte a desarrollar. Para la memoria se ha escogido Kanban debido a que es una metodolog´ıa en la que no existen los ciclos de trabajo. Sin embargo, para la implementaci´on del producto, la metodolog´ıa elegida es Scrum, ya que al ser ciclos establecidos por una corta unidad de tiempo (por ejemplo: 2 semanas) se puede ver con perspectiva como va el trabajo realizado y en qu´e aspectos mejorar o en qu´e aspectos se est´a siendo menos productivos.

Para llevar a cabo estas metodolog´ıas, se hace uso de herramientas como Trello4 y Toggl5.

En primer lugar, en Trello se ha creado un tablero para gestionar las tareas y los tiempo. Esto dotar´a a la realizaci´on del proyecto de una forma visual en la que reflejar el estado de las tareas.

1Kanban: Metodolog´ıa de producci´on para gestionar el trabajo y el cumplimiento de las tareas mejo- rando el proceso evolutivo

2Scrum: Proceso en el que peri´odicamente se aplican una serie de buenas pr´acticas para colaborar en equipo y obtener los mejores resultados del proyecto.

3Agile: Un conjunto de principios para el desarrollo de productos con un enfoque iterativo.

4Trello: https://trello.com/.

5Toggl: https://www.toggl.com/.

25

(50)

26

Como se puede observar en la figura 6.1, el tablero consta de seis columnas. Las tres primeras corresponden a las tareas que no han sido iniciadas en cada uno de estos bloques. Se han separado como tres bloques generales de documentaci´on, dise˜no y desa- rrollo. A continuaci´on, se observa la columna “En progreso” que ah´ı est´an localizadas esas tareas que han sido iniciadas pero no se han terminado. La columna llamada “Pen- dientes” es la de aquellas tareas que est´an finalizadas pero est´an pendientes de revisiones y posteriores correcciones. Por ultimo, las tareas corregidas y finalizadas en la columna de “Finalizadas”.

Figura 6.1.: Estado del tablero de Trello. Fuente: Propia

En cuanto se comience con la implementaci´on del proyecto, empezaremos a dividir las tareas finalizadas en hitos o sprints6. Adem´as, se a˜nadir´a otra columna a continuaci´on de la columna de tareas por hacer, la cual har´a referencia al hito actual en el que se encuentra el proyecto. Ah´ı se encontrar´an las tareas que se deben hacer a lo largo de ese sprint.

Por otra parte, se har´a uso de Toggl. Esta herramienta permite controlar los tiem- pos que se dedican a cada tarea o cada parte del proyecto [Xakata, 2020]. Tras cada sprint se puede estudiar las horas que se estimaron y las que se necesitaron posterior-

6Sprint: Intervalo de tiempo durante el que se realizan tareas. Este plazo no suele ser ni inferior a una semana ni superior a un mes.

(51)

Metodolog´ıa 27

mente, se puede comprobar en que tarea ha necesitado mayor dedicaci´on, entre otras.

En la figura 6.2 podemos ver una captura de las horas dedicadas hasta ahora al proyecto.

Figura 6.2.: Tiempo registrado en Toggl. Fuente: Propia

El workspace de Toggl se puede dividir en diferentes proyectos para tener identificado el tipo de tarea que se est´a realizando. Las cuatro categor´ıas creadas son: documentaci´on, dise˜no, investigaci´on y desarrollo. Como se puede observar en la figura 6.2 hasta ahora solo se han contabilizado horas en documentaci´on y dise˜no.

(52)
(53)

7. An´ alisis y Especificaci´ on

Antes de comenzar con la implementaci´on o el dise˜no de la soluci´on planteada, deben quedar reflejados los requerimientos y especificaciones con las que, posteriormente, se dotar´a el proyecto. Esto permite detallar y analizar todos los aspectos que se deben tener en cuenta desde el inicio del desarrollo.

Teniendo en cuenta el est´andar IEEE 830, se definir´an, de forma clara, los l´ımites y los requerimientos del proyecto y toda la informaci´on que se vaya a necesitar en una estructura visual y simplificada.

7.1. Tipos de usuarios

Se pueden diferenciar dos tipos de usuarios que hagan uso del producto desarrollado.

A continuaci´on, en las tablas 7.1 y 7.2 se explica que funci´on tendr´a cada uno de estos dentro de la aplicaci´on.

Tipo de usuario Administrador

Descripci´on Administraci´on de los datos de la aplicaci´on.

Actividades Gesti´on de los datos de las aplicaci´on y el estado de esta y supervisi´on del buen funcionamiento.

Tabla 7.1.: Descripci´on de rol administrador

Tipo de usuario Usuario

Descripci´on Usuario de la aplicaci´on.

Actividades Su uso en la aplicaci´on se basar´a en las funcionalidades desa- rrolladas, como buscar productos relacionados, a˜nadir favo- ritos y valorar productos.

Tabla 7.2.: Descripci´on de rol usuario

29

(54)

30 7.2. Requisitos

7.2. Requisitos

A continuaci´on, se detallar´an todos los requerimientos que componen el proyecto. Cada uno de estos requisitos, se establecer´an unas IDs con las que diferenciarlos.

Por una parte, tenemos los requisitos funcionales, identificados con RF, y los requisitos no funcionales, en este caso RNF. A este identificador se le concatenar´a, en el caso de los requisitos funcionales, el tipo de usuario al que va enfocado (US-AD-SIS: Usuario- Administrador-Sistema) y por ultimo una enumeraci´on que los distinga.

7.2.1. Requisitos funcionales

Estos requisitos dotar´an a la aplicaci´on, como su propio nombre indica, del car´acter funcional. Por lo que, en este apartado se encuentra aquellos requisitos que no podr´an faltar en el producto final. Adem´as, el sistema permitir´a al usuario al administrador lo correspondiente en cada uno de los requisitos.

Identificador RF US 01

Usuario Usuario

Nombre Registro

Descripci´on El sistema permitir´a al usuario registrarse en la aplicaci´on.

Identificador RF US 02

Usuario Usuario

Nombre Iniciar sesi´on

Descripci´on El sistema permitir´a iniciar sesi´on en la aplicaci´on.

Identificador RF US 03

Usuario Usuario

Nombre B´usqueda

Descripci´on El sistema permitir´a la b´usqueda de productos por nombre o categor´ıa y filtros de los resultados.

Identificador RF US 04

Usuario Usuario

Nombre Detalle de producto

Descripci´on El sistema permitir´a la visualizaci´on de la informaci´on del producto as´ı como valoraciones recibidas por otros usuarios.

(55)

Identificador RF US 05

Usuario Usuario

Nombre Modificar datos

Descripci´on El sistema permitir´a gestionar las preferencias y caracter´ısti- cas del propio usuario (tipo de piel, tipo de ojos, preferen- cias...).

Identificador RF US 06

Usuario Usuario

Nombre A˜nadir a favoritos

Descripci´on El sistema permitir´a al usuario la posibilidad de a˜nadir los productos a favoritos para futuras compras.

Identificador RF US 07

Usuario Usuario

Nombre A˜nadir a neceser

Descripci´on El sistema permitir´a al usuario a˜nadir los cosm´eticos que ya utiliza en una lista para llevar un control de fechas de compra.

Identificador RF US 08

Usuario Usuario

Nombre Valorar productos

Descripci´on El sistema permitir´a al usuario a˜nadir y gestionar las valo- raciones de productos.

Identificador RF US 09

Usuario Usuario

Nombre Editar perfil

Descripci´on El sistema permitir´a al usuario gestionar la informaci´on m´as b´asica del usuario como la foto de perfil, nombre, correo electr´onico, contrase˜na, etc.

Identificador RF AD 10

Usuario Administrador

Nombre Gestionar usuarios

Descripci´on El sistema permitir´a al administrador gestionar los usuarios (bloqueos, reportes, incidencias...).

Identificador RF AD 11

Usuario Administrador

Nombre Gestionar valoraciones

Descripci´on El sistema permitir´a al administrador gestionar las valora- ciones de los usuarios (incidencias, reportes...).

(56)

32 7.2. Requisitos

Identificador RF AD 12

Usuario Administrador

Nombre Gestionar productos

Descripci´on El sistema permitir´a al administrador la gesti´on de nuevos productos o modificaciones de la informaci´on de estos.

Identificador RF AD 13

Usuario Administrador

Nombre Visualizar estad´ısticas

Descripci´on El sistema permitir´a al administrador la visualizaci´on de gr´aficos de datos referentes a la aplicaci´on.

7.2.2. Requisitos no funcionales

Este tipo de requisitos, a diferencia del anterior, son relativos a la seguridad, la ex- periencia del usuario, el rendimiento, entre otras. Son aquellos que aportan un valor de calidad a la aplicaci´on.

Identificador RNF SIS 1

Usuario Sistema

Nombre Disponibilidad

Descripci´on La aplicaci´on ser´a publicada en las tiendas de aplicaciones, por lo que debe mantener servicio constante.

Identificador RNF SIS 2

Usuario Sistema

Nombre Accesibilidad

Descripci´on El sistema debe permitir la lectura y el manejo de la aplica- ci´on en la gran mayor´ıa los dispositivos existentes as´ı como por todas las personas adecuando la accesibilidad del siste- ma.

Identificador RNF SIS 3

Usuario Sistema

Nombre Confidencialidad

Descripci´on Se debe garantizar que el acceso a los datos se restringir´a a aquel personal autorizado y al propio usuario.

(57)

Identificador RNF SIS 4

Usuario Sistema

Nombre Rendimiento

Descripci´on La carga debe ser r´apida, el inicio no debe superar los 10 segundos y no deben ocurrir m´as de un 1 % de cierre ines- perados de la aplicaci´on.

(58)
(59)

8. Dise˜ no

En esta secci´on se detallan los aspectos m´as importantes del trabajo, ya que se ha de dise˜nar todos aquello requisitos detallados en el apartado anterior. El dise˜no de cada apartado nos facilitar´a posteriormente la implementaci´on del producto, evitando as´ı las tomas de decisiones bajo presi´on.

Es importante no solo detallar el dise˜no visual y la gu´ıa de estilo del que constar´a la aplicaci´on, sino tambi´en toda la arquitectura tecnol´ogica que ser´a la base de la soluci´on propuesta.

8.1. Dise˜ no arquitectura conceptual

Dise˜nar la arquitectura conceptual de un proyecto ayuda a tener claros los m´odulos y la estructura de este. Este es un dise˜no preliminar por lo que no se indaga ni se especifica las tecnolog´ıas especificas que se van a utilizar posteriormente.

A continuaci´on, en la figura 8.1, se puede observar el dise˜no o esquema de la arquitec- tura de la que va a constar este proyecto.

Figura 8.1.: Arquitectura conceptual. Fuente: Propia

35

(60)

36 8.2. Dise˜no arquitectura tecnol´ogica Front/Back-end

8.2. Dise˜ no arquitectura tecnol´ ogica Front/Back-end

A partir de la arquitectura conceptual de la figura 8.1 y teniendo en cuenta el estudio del estado del arte, se debe profundizar en las tecnolog´ıas espec´ıficas que se va a utilizar en el desarrollo de la aplicaci´on.

Figura 8.2.: Arquitectura tecnol´ogica Front/Back-end. Fuente: Propia

En cuanto al framework para desarrollar la aplicaci´on, se har´a uso de Ionic con Angu- lar. Para la autenticaci´on de usuarios conectando a estos con la aplicaci´on (o al backof- fice en el caso de usuario tipo administrador) de forma segura se har´a uso del protocolo OAuth 2.0.

En cuanto al backend de la aplicaci´on, en primer lugar, la base de datos no relacional estar´a alojada en Cloud Firestore. Esta permitir´a que los datos que soporta la aplicaci´on est´en optimizados, almacenados y sincronizados entre el cliente y el servidor. Otra op- ci´on, tambi´en de Firebase, es Realtime Database sin embargo, en la documentaci´on reco- miendan el uso de Cloud Firestore ya que es una versi´on mas optimizada [Medium, 2019].

8.3. Dise˜ no de la persistencia

En dicho apartado, se trata el dise˜no del almacenamiento de datos y la persistencia de estos que lleva a conseguir definir aquellos aspectos relativos a la seguridad e integridad de la informaci´on.

Referencias

Documento similar

La distribuci´ on de la interfaz en el perfil de otro usuario es an´ aloga a la del perfil del usuario pero aplicando las pol´ıticas de privacidad de la aplicaci´ on, por ello, el

Como en el caso de los tipos enteros, los lenguajes suelen soportar varios tipos real, de modo que el programador pueda seleccionar aquel cuyo rango y precisi´on en el coeficiente

El inconveniente operativo que presenta el hecho de que la distribuci´ on de probabilidad de una variable aleatoria es una funci´ on de conjunto se resuelve mediante el uso de

Be- cause of the connection between environmental and social problems (illustrated, for instance, by the way ecological risks fall disproportion- ally on the

Here, like in other fields, if a philosophical argument presumably shows that there is no deep difference between those cases, that there is no true praise or blameworthi- ness,

According to Genette (1972) there is a confusion between mood and voice, a confusion between the question who is the character whose point of view orients the narrative

Comparaci´ on gr´ afica alrededor de la esquina encontrada para el caso de Hermite con detecci´ on previa de esquinas (Figura 5.19) y Hermite segmen- tario (Figura 5.20) del

A teor´ıa das distribuci´ ons do matem´ atico franc´es Laurent Schwartz (Medalla Fields en 1950) foi unha das d´ uas grandes revoluci´ ons do s´eculo pasado no eido da an´