Desarrollo de una aplicación web para empresa de alimentación

DESARROLLO DE UNA APLICACIÓN WEB PARA EMPRESA DE ALIMENTACIÓN WEB APPLICATION DEVELOPMENT FOR A FOOD ENTERPRISE TRABAJO FIN DE GRADO CURSO 2023-2024 AUTOR BRUNO AFÁN DE RIBERA COIMBRA DE MATOS DIRECTOR RAMÓN GONZÁLEZ DEL CAMPO RODRÍGUEZ BARBERO GRADO EN INGENIERÍA DE SOFTWARE FACULTAD DE INFORMÁTICA UNIVERSIDAD COMPLUTENSE DE MADRID 2 ÍNDICE 1 RESUMEN ………………………………………………………………………………………………………………………………………………………… 3 2 INTRODUCCIÓN 2.1 Con ex ualización ……………………………………………………………………………………………………………….. 5 2.2 Es udio de Me cado …………………………………………………………………………………………………………. 7 2.3 Obje i os ……………………………………………………………………………………………………………………………………… 11 3 DESARROLLO DE LA APLICACIÓN WEB 3.1 He amien as U ilizadas………………………………………………………………………………………………… 14 3.2 Tecnologías U ilizadas …………………………………………………………………………………………………… 18 3.3 Funcionalidades ……………………………………………………………………………….…………………………………. 20 3.4 Es uc u a de base de da os ……………………………………………………………………………………. 29 3.5 Segu idad ……………………………………………………………………………….…………………………………………………. 30 3.6 Posicionamien o SEO ……………………………………………………………………………….……………………. 35 4 FUTURAS LINEAS DE DESARROLLO …………………………………………………………………………………… 38 5 CONCLUSIONES ……………………………………………………………………………….……………………………………………………… 42 6 BIBLIOGRAFÍA ……………………………………………………………………………….……………………………………………………………. 43 3 1 RESUMEN El obje i o de mi T abajo de Fin de G ado ue desa olla una aplicación web pa a una emp esa de alimen ación, eal y en uncionamien o. El p opósi o de negocio de es a aplicación es da una pequeña isión de la emp esa, p esen a y ende sus p oduc os, compa i su amplia gama de ece as a pa i de es os, y acili a a sus clien es su localización. El p opósi o in o má ico es consegui man ene la limpieza, elocidad y e iciencia de la aplicación web al máximo, además de o os emas ambién impo an es, como son la segu idad o la escalabilidad de es a. Al se una aplicación que a a ene una con inuación, decidí man ene una buena o ganización y limpieza. Po ello, cons a de dos pun os p incipales: el clien e o F on -End y el se ido o Back-End. Ambos lados den o de la misma ca pe a del p oyec o en conjun o. Du an e odo el desa ollo, de la mano del lenguaje Ja aSc ip , he buscado que la aplicación sea li iana y que man enga la simpleza eque ida, no cayendo en lo pue il e in en ando no ol ida aspec os esenciales de es e ipo de p oyec os, como puede se la segu idad o la consis encia. Pa a alcanza lo, he buscado ayuda de expe os en el sec o , que me han podido da cie as cla es pa a que el p oyec o pueda alcanza su máximo exponen e den o de las posibilidades exis en es. [English] My Bachelo ’s Deg ee Final P ojec in ol ed de eloping a web applica ion o a eal and unning ood company. The business pu pose o his applica ion is o p o ide a b ie o e iew o he company, showcase and sell i s p oduc s, sha e a wide ange o ecipes based on hese p oduc s, and make i easy o cus ome s o loca e hem. On he o he hand, he IT pu pose is o main ain he cleanliness, speed and e iciency o he web applica ion a maximum, in addi ion o o he impo an issues, such as secu i y and scalabili y. 4 This applica ion is in ended o ha e a ollow-up, so I decided o main ain p ope o ganiza ion and nea ness. The e o e, i consis s o wo main pa s: he clien o F on -End and he se e o Back-End. Bo h sides a e inside he same p ojec olde as a whole. Th oughou he de elopmen p ocess, using Ja aSc ip , I aimed o keep he applica ion ligh weigh while main aining he equi ed simplici y, a oiding o e ly simplis ic app oaches, and ensu ing essen ial aspec s, such as secu i y and consis ency, a e no o e looked. To achie e his, I sough guidance om expe s in he ield who p o ided insigh s o help he p ojec each i s ull po en ial wi hin he exis ing possibili ies. 5 2 INTRODUCCIÓN 2.1 Con ex ualización Al Gus o de Belela es la imagen de ma ca de la emp esa P oguiso S.L. Fue o mada po mi abuelo, San iago Rod íguez, en su a án de segui su buen ojo pa a los negocios después de da nomb e, jun o a un pequeño equipo de pe sonas, al Papel Albal po p ime a ez en España, además de in oduci las sa enes an iadhe en es y p omociona el cambio de casquillos de cob e en los ocos de luz po casquillos de aluminio. Más a de, le siguió la pis a mi pad e, Fe nando A án de Ribe a. La emp esa, aún con la can idad de abajo que ha lle ado a cabo, nunca ha enido más de 5 abajado es. El Guiso ue la p ime a imagen de ma ca pa a es a emp esa y llegó a se la mayo p oduc o a de en as de inos en España. Después de algunos p oblemas amilia es, pe die on los de echos sob e el nomb e El Guiso y pasó al ac ual nomb e, Al Gus o de Belela. Después de es e e és, pe dió mucha epu ación ganada con muchos años de abajo, ya que nadie supo de es e cambio ni se hizo ningún ipo de publicidad. Fue como empeza de nue o con los mismos p oduc os. Las conse as, el ino y el inag e. Unos años más a de, y has a la ac ualidad, se llegó a un acue do con Mas e Che España. El ino blanco pa a cocina es a ía expues o en odos los pues os de cocina de los concu san es y se ía el ino que u ilizasen pa a cocina . Como en el canal de ele isión La 1 no puede apa ece publicidad, el b ik segui ía eniendo el mismo diseño, pe o sin el logo de Al Gus o, po lo que no llegó a p oduci un cambio signi ica i o. Po o o lado, el logo de Mas e Che sí se pod ía pone en los p oduc os Al Gus o a la ho a de ende lo de ca a al público, lo que da cie o enomb e al p oduc o, aunque ampoco p o ocó una ele an e mejo a. También sacó su spo publici a io en ele isión, jun o con Mediase . Al Gus o de Belela sigue sin llega a donde un día es u o El Guiso, siendo la calidad de sus p oduc os igual, o mejo , debido a los incesan es in en os de ol e a si ua el p oduc o in e io español en la posición que me ece. 6 En la ac ualidad, Mas e Che ha sacado su aplicación a ni el mundial pa a oodies, es deci , una aplicación pa a ap ende a cocina según u ni el de expe iencia. Sabiendo la calidad del p oduc o que o ece Al Gus o y de las elaciones que exis en en e las dos emp esas, es a es una de las pue as que se le ab e a la pequeña emp esa con una posibilidad de c ecimien o muy g ande. El e dade o allo que puede exis i en es o es que Al Gus o no es á al día en lo que a la ecnología se e ie e. ¿Po qué no es á al día? P incipalmen e po que es di ícil de localiza . Tiene una página web que no unciona bien y no da una buena imp esión sob e la emp esa. Con ello, la p oposición que hay encima de la mesa con mi aplicación web es de hace algo sus ancialmen e di e en e a lo que exis e. Una web sencilla, que p esen e lo esencial de la emp esa, mos ando alguna in o mación, sus p oduc os, su localización de iendas, ece as p opues as y que uncione ambién como ienda online. [English] Al Gus o de Belela is he b and image o he company P oguiso S.L. I was ounded by my g and a he , San iago Rod íguez, in his pu sui o con inue his success ul business en u es a e gi ing name o he i s Papel Albal in Spain along wi h a small eam, in oducing non-s ick pans, and p omo ing he shi om coppe lamp casings o aluminum. Following his pa h was my a he , Fe nando A án de Ribe a. Despi e he subs an ial wo k he company has unde aken, i has ne e had mo e han i e employees. El Guiso was he ini ial b and image o his company and became he la ges wine sales p oduce in Spain. Howe e , due o some amily issues, hey los he igh s o he name El Guiso, leading o he cu en name, Al Gus o de Belela. This se back esul ed in a signi ican loss o epu a ion ea ned o e many yea s, as no one knew abou his change, and no ad e ising was done. I was like s a ing o e wi h he same p oduc s: canned p ese es, wine, and inega . Yea s la e , and up o he p esen day, an ag eemen was eached wi h Mas e Che Spain. The whi e cooking wine would be ea u ed in all 7 con es an s' ki chen s a ions and used o cooking. As ad e ising isn’ allowed on La 1’s channel, he packaging con inued wi h he same design bu wi hou he Al Gus o logo, hus no c ea ing a signi ican change. Howe e , he Mas e Che logo could be placed on Al Gus o p oduc s when sold o he public, adding some p es ige o he p oduc , hough i didn' esul in a no able imp o emen . They also ai ed hei ad e ising spo on ele ision alongside Mediase . Al Gus o de Belela s ill hasn' eached he le el whe e El Guiso once s ood, despi e he quali y o i s p oduc s being equal o be e , due o elen less e o s o eposi ion spanish-made p oduc s whe e hey belong. P esen ly, Mas e Che has launched i s wo ldwide applica ion o oodies, a pla o m o lea n how o cook based on he expe ience le el. Gi en he quali y o Al Gus o’s p oduc s and he exis ing ela ionship be ween he wo companies, his opens a doo o signi ican g ow h o he small company. The eal issue o Al Gus o lies in i s lack o echnological ad ancemen . Why is i no up o da e? P ima ily because i ’s challenging o loca e. Thei websi e doesn’ unc ion p ope ly and doesn’ gi e a good imp ession o he company. Thus, he p oposal on he able wi h my web applica ion is o c ea e some hing subs an ially di e en om wha cu en ly exis s: a simple websi e p esen ing essen ial in o ma ion abou he company, showcasing p oduc s, s o e loca ions, p oposed ecipes, and unc ioning as an online s o e. 2.2 Es udio de Me cado Uno de los pun os impo an es pa a ene en cuen a al ealiza el es udio de me cado e a analiza emp esas de alimen ación que u iesen un cie o ni el. Ejemplos de ello se ían páginas como Heinz, Ba illia, Bimbo, Casa Ta adellas, e c. 8 En odas es as páginas se sigue más o menos la misma es uc u a. Mues an sus p oduc os, algo de su his o ia, su comp omiso con el medio ambien e y sus ece as, en e o os. P ác icamen e ninguna de ellas iene una ienda online, donde se les pueda comp a di ec amen e a esa emp esa. Algunas como Gallina Blanca ienen enlaces a o as páginas donde puedes encon a sus p oduc os. O as como Na idul o Hida sí o ecen la posibilidad de comp a en su web. Pe o es as opciones son pocas. Posiblemen e, po que los cos es que conlle an en elación con los ing esos que ob end ían no se jus i ican o, incluso, po que al se emp esas an conocidas no ienen la necesidad de 9 ende di ec amen e su p oduc o, ya que se puede encon a en p ác icamen e cualquie lado. Todas es as emp esas ienen ya un g an amaño y lle an años uncionando, además de con a con buenas epu aciones, nunca quedándose comple amen e pa a a ás. En el momen o en el que es amos, en el que la ecnología a anza a pasos agigan ados, odas es as emp esas han dedicado pa e de sus ecu sos a segui los pasos necesa ios pa a no queda se “an icuados” y segui en la “c es a de la ola”. La mayo ía de es as emp esas ienen sus aplicaciones web desde hace ya algún iempo. Tan o es así, que la mayo ía de ellas es án cons uidas sob e lenguajes y ecnologías más p imi i as. Es deci , con más años de ida, esul ando en una mayo len i ud, con más di icul ad pa a escala y más complejas. Hay que deci que la an igüedad es un con a, pe o ambién iene sus bene icios, como una mayo es abilidad y segu idad, más madu ez, una comunidad mayo con más in o mación adicional de ayuda, en e o os. Las más des acables que he analizado son PHP (lenguaje de sc ip ing del lado del se ido , p og amación o iginalmen e p ocedu al) jun o a jQue y (manipulación del DOM); Ja a ( ambién del lado del se ido , p og amación o ien ada a obje os) jun o a Ja a Se le (p ocesamien o de solici udes HTTP pa a Ja a); Gi Hub, como pla a o ma de alojamien o de código; a ios ipos de CDNs (pa a dis ibui con enido web de o ma ápida y e icien e a los usua ios) y CMSs (de los que se u ilizan cie os plugins pa a sopo a cie as uncionalidades); exis en muchas he amien as de análisis de da os (pa a comp ende el compo amien o de los usua ios y el endimien o de la aplicación), en e muchas o as. Pocas aplicaciones web u ilizan he amien as y ecnologías pun e as, se man ienen en zonas más segu as. Sí es cie o que he encon ado alguna de ellas, como Na idul, usando ecnologías como Apollo G aphQL, una pla a o ma comple a pa a el desa ollo de APIs con G aphQL (es un lenguaje de consul a pa a APIs que e pe mi e especi ica exac amen e qué da os necesi as) o Nex .js, que se basa en Reac , o eciendo ca ac e ís icas adicionales como el SSR, el p e- ende izado es á ico y la na egación sin 16 Además, iene una in e az amigable y sencilla, aho ándome iempo en las p uebas. E he eal Email Se ice E he eal Email es un se icio Mail ap. Es e, p opo ciona di ecciones de co eo elec ónico de p ueba y un se ido SMTP (Simple Mail T ans e P o ocol) simulado. Lo he u ilizado pa a p oba y desa olla odas las uncionalidades que incluían el abajo con emails, pa a que, de es a mane a, no sea necesa io sob eca ga ni modi ica la segu idad de co eos eales. Es a he amien a es u ilizada más comúnmen e pa a Nodemaile , u ilizado pa a manda emails desde aplicaciones desa olladas con Node.js. Google Cloud Pla o m Google Cloud es la pla a o ma de se icios en la nube b indada po Google. O ece dis in os se icios y he amien as pa a desa olla , implemen a y adminis a aplicaciones y ecu sos en la nube. En mi caso ha sido u ilizado pa a in eg a el mapa de Google con mi aplicación. Pa a ello, solo necesi é c ea un p oyec o y habili a las APIs de Google Maps, y edi a el ipo de mapa que que ía que se ie a. Con es o, se gene ó una cla e que u e que inclui en mi aplicación y pude abaja con ello. F ame Mo ion Cuando empecé a desa olla mi F on -End, comencé a sen i la necesidad de c ea cie as animaciones su iles que mejo asen la expe iencia del usua io de mane a sus ancial. Dado que con CSS es más complicado ealiza cie os mo imien os de elemen os y sabiendo que Reac es á c eado pa a op imiza es e ipo de e ec os, busqué una biblio eca que cumplie a con la unción, encon ando F ame Mo ion. Es una biblio eca pode osa pa a ag ega animaciones de mane a sencilla y e ec i a. Boo s ap El amewo k Boo s ap me ha acili ado mucho la ida y ha op imizado el iempo de desa ollo del F on -End, ya que me pe mi ía es a solo 17 desa ollando mi código HTML incluyendo sus clases ya gene adas, sin necesidad de es a c eando clases pe sonalizadas odo el a o. Cuando ya enía casi inalizada una sección, en la mayo ía de los casos, c eaba mi clase pa a cie o elemen o con CSS. En o os, donde no había necesidad, debido aspec os muy pun uales, dejé es as clases de es ilo. C yp oJS La biblio eca c yp o-js de Ja aSc ip es la que he usado pa a ci a da os en el F on -End. Es a biblio eca p opo ciona una se ie de algo i mos c ip og á icos y unciones pa a el ci ado y desci ado de da os. Su uso es sencillo y segu o en aplicaciones web. Reac Google Maps La biblio eca de Reac que u ilice pa a la ges ión del mapa de Google ue eac -google-maps, ya que me acili ó la in eg ación y el uso de los se icios y la API de Google Maps en mi aplicación. Además, p opo ciona componen es eu ilizables, y una in e az de Reac pa a abaja con mapas in e ac i os y se icios de ubicación p opo cionados po Google Maps. Bc yp A di e encia de c yp o-js, bc yp lo he u ilizado en mi Back-End. Es una biblio eca de ci ado de con aseñas que se u iliza en aplicaciones web y sis emas pa a almacena con aseñas de mane a segu a. Aplica unciones de hash segu as y écnicas de sal ing pa a p o ege las con aseñas de mane a e ec i a con a a aques. Lo he elegido po se una opción con iable pa a ga an iza la segu idad y p i acidad de los usua ios. Co s La biblio eca co s de npm ino a soluciona mis p oblemas de COR (C oss- O igin Reques ). Es deci , al ene mon ados el Back-End y el F on -End en dis in os dominios, necesi é de una solución pa a esol e el p oblema de las solici udes y es e ino con el CORS (C oss-O igin Resou ce Sha ing). Además, es undamen al pa a e i a ulne abilidades de segu idad y acceso no 18 au o izado a ecu sos del se ido , limi ando los o ígenes pe mi idos pa a accede a es os solo desde las URLs de mi aplicación. Nodemaile Al necesi a en ia co eos elec ónicos, como con i maciones de cuen as de co eos o es ablecimien o de con aseñas, busqué una he amien a que me au oma iza a el p oceso. Encon é nodemaile , una biblio eca de Node.js que pe mi e en ia co eos elec ónicos desde aplicaciones web y se ido es u ilizando el p o ocolo SMTP. S ipe Es una pla a o ma de pagos en línea que o ece una API pa a in eg a p ocesamien o de pagos en aplicaciones web y mó iles. Me pe mi e acep a pagos con a je a de c édi o y débi o, así como o os mé odos de pago. Se pueden pe sonaliza expe iencias de pago, ealiza ansacciones segu as y e icien es, e c. Su en oque en la segu idad y capacidad pa a maneja pagos es lo que hizo que la escogie a. Además, me elimina la necesidad de almacena a je as de c édi o. 3.2 Tecnologías U ilizadas Las ecnologías son componen es undamen ales que o man la base de la aplicación. Pa a es e apa ado, me he basado en el ap endizaje de la asigna u a de Aplicaciones Web, dado que c eo que se adecua muy bien a las necesidades de mi p oyec o. He incluido an o ecnologías de es a asigna u a, como o as ex e io es, que c eo más in e esan es y ele an es, sob e las que he enido que indaga algo más pa a en ende las y aplica las de mane a co ec a. Ja aSc ip Es e lenguaje de p og amación ha sido el elegido pa a oda mi aplicación web. Tan o po su e sa ilidad como po el hecho de se un lenguaje poco 19 pesado y con mucha documen ación. Además, es un lenguaje sob e el que he podido cons ui mi F on -End y mi Back-End, eniendo nume osas biblio ecas y amewo ks p opias que acili an el desa ollo de la aplicación de mane a más compleja y dinámica, y que, a su ez, son compa ibles con los p incipales na egado es, pe mi iendo expe iencias de usua io icas y a ac i as. Reac Reac es una biblio eca de Ja aSc ip con la que se cons uye in e aces de usua io in e ac i as y eac i as. Con ella, se pueden cons ui componen es eu ilizables que se ac ualizan según los cambios de cie os da os. Es deci , no iene necesidad de es a siemp e eca gando la página en e a, ac ualizando únicamen e los componen es que han cambiado, lo que da luga a expe iencias de usua io más ápidas. Es a es una de las azones de más peso pa a elegi es a biblio eca, en luga de las páginas web es á icas. Node.js Al que e usa ambién Ja aSc ip en el lado del se ido , he ecu ido a Node.js, un en o no de iempo de ejecución de código abie o. Pe mi e la ejecución de Ja aSc ip en el se ido , ampliando sus capacidades más allá del na egado . Es impo an e des aca que Node.js se basa en el po en e mo o V8 de Google Ch ome pa a log a lo. U iliza un modelo de p og amación asínc ono y no bloquean e, lo que lo hace especialmen e e icien e pa a maneja múl iples conexiones simul áneas. Exp ess Exp ess, a su ez, es un amewo k web pa a Node.js que simpli ica la c eación de aplicaciones web y APIs. P opo ciona una se ie de u ilidades y he amien as pa a maneja en u amien o, manejo de solici udes y espues as, adminis ación de sesiones, manejo de middlewa es, e c. Ag ega una capa de abs acción sob e Node.js, lo que acili a el desa ollo ápido y es uc u ado. Pos g eSQL 20 Pa a cons ui mi base de da os he u ilizado Pos g eSQL. Es a he amien a es un sis ema de ges ión de bases de da os elacional de código abie o y al amen e po en e. Tiene un sólido sopo e pa a ansacciones y ga an ía ACID (A omicidad, Consis encia, Aislamien o, Du abilidad), además de ges iona de mane a e icaz la concu encia, ga an izando la in eg idad de los da os. Al mismo iempo, iene una comunidad ac i a de desa ollado es, lo que la hace más iable. Po ello, lo elegí po delan e de MySQL y me puse a ap ende sob e ella. Es una he amien a que ha c ecido mucho en el en o no emp esa ial du an e los úl imos años y que me llamó la a ención debido a sus ca ac e ís icas. JSON Web Token Pa a ges iona los accesos y las sesiones de los usua ios, he decidido usa JSON Web Tokens. Es un es ánda abie o pa a ansmi i in o mación de o ma segu a en In e ne , po medio de a chi os en o ma o JSON, en mi caso, en e el Back-End y el F on -End. Tiene es pa es, Heade , con el ipo de oken y algo i mo de i ma; Payload, con la in o mación ele an e a ansmi i ; y la i ma, que asegu a que no se haya al e ado en el camino en e un pun o y o o de la comunicación. La biblio eca u ilizada pa a ealiza la unción es jsonweb oken. UUID Uni e sally Unique Iden i ie , son iden i icado es únicos uni e sales. Los he u ilizado pa a mi base de da os, ya que iden i ica de mane a exclusi a a cada una de las inse ciones en las que lo u ilizo, siendo una o ma e ec i a y con iable de gene a iden i icado es en sis emas de so wa e. Pa a aplica lo, he u ilizado la biblio eca UUID. 3.3 Funcionalidades Du an e es e apa ado eco e emos las dis in as acciones que los usua ios pueden ealiza du an e la na egación en la aplicación web. 21 El p ime paso se á ab i la página de Al Gus o. Una ez abie a, sald á un spo publici a io en oda la pan alla, además de los dis in os iconos sob e los que pod emos pulsa en la zona supe io . El p ime o es el logo de la emp esa, que accede á a la página p incipal. El segundo, el del menú, que ab i á las dis in as secciones po las que pod emos na ega . El e ce o es el ca i o de comp a, que iene la posibilidad man ene el a ón po encima, isualizándose así los p oduc os, o pulsa , que ab i á su sección p opia. Po úl imo, el icono de au en icación de usua io, que o ece la posibilidad de inicia sesión al man ene el a ón po encima o, en su de ec o, pulsa lo, ab iendo la sección au en icación o el pe il, en caso de ya habe iniciado sesión. Si nos man enemos en la misma página, al desliza hacia abajo, pod emos explo a un poco sob e la emp esa, e algunas imágenes de p oduc os, en e o a in o mación. 22 Comenzando aho a po los iconos desc i os an es, e emos la sección del ca i o de comp a. Como hemos comp obado an es, exis e la posibilidad de e el ca i o sin en a . Al man ene el a ón po encima, pod emos isualiza los p oduc os añadidos jun o con el núme o de unidades po caja, la can idad de p oduc os que hay incluida de cada uno de ellos, el p ecio o al de cada p oduc o y una basu a, que elimina una unidad. Al pulsa sob e el icono del ca i o ab i á lo siguien e: Se mues a el esumen del ca i o pa a, ya sí, inaliza la comp a. Aho a, pa a modi ica la can idad de cada p oduc o que se p e ende comp a , se usan los símbolos de más y menos a la izquie da, y la basu a se i á pa a elimina la o alidad del p oduc o, sin ene en cuen a la can idad incluida. Al pulsa sob e el bo ón de inaliza , en caso de que no haya una sesión iniciada, se pide al usua io que se iden i ique o se egis e. 23 Una ez hecho, se pedi á que se seleccione una di ección de en ío. Además, da á la posibilidad de añadi una di ección de ac u ación dis in a a la de en ío, o eciendo ambién las ya gua dadas. Al pulsa sob e el bo ón de Finaliza y Paga , se edi ige a S ipe pa a in oduci los da os banca ios del comp ado y ealiza el pago. Los webhooks de S ipe en el lado del se ido ayuda án a man ene ac ualizado el es ado de pago del pedido. Po pa e del icono de au en icación de usua io, se pod á inicia sesión sin ene que en a especí icamen e en su sección, simplemen e man eniendo el a ón po encima del bo ón. Si ambos campos del o mula io se ellenan con éxi o, se pod á pulsa sob e el bo ón Inicia Sesión. En caso de allo, se dis ingue an o el de co eo inexis en e, como el de e o en la con aseña. La o a opción se ía pulsa sob e Regis a se o, lo que se ía lo mismo, sob e el icono del usua io. De es a mane a, se edi ige a la página de au en icación. 24 La p ime a is a se ía la del egis o, pe o hay posibilidad de accede al espacio de inicio de sesión en caso de que el usua io ya disponga de cuen a. Todos los campos del egis o y del inicio de sesión deben de ellena se con alo es álidos pa a que los bo ones del en ío de los o mula ios puedan se pulsados. Cabe deci ambién que es os campos se e isan an o en el lado del clien e, como en el lado del se ido , pa a una mayo segu idad y consis encia. Además, los campos cuen an con au ocomple ado, pa a acili a a los usua ios la cumplimen ación del o mula io. Al conclui con éxi o cualquie a de los dos o mula ios, la aplicación uel e al mismo pun o donde se dejó. Es deci , si es aba en la sección del ca i o de comp a an es de accede a la sección de au en icación, ol e á a ese pun o, mejo ando la expe iencia del usua io. En es e momen o ya debe ía exis i una sesión, jun o a una web oken c eada que lle a á la in o mación del usua io, lo que ha á con que el es ado del icono del usua io cambie pa a mos a algunos de sus da os. Podemos e en la imagen de la izquie da que se mues a la o o de pe il y el nomb e. En caso de que la imagen de pe il no exis ie a, ya que no es un equisi o obliga o io de egis o, solo sald ía el nomb e. También igu an los bo ones de Ce a Sesión, pa a des ui el oken, y el de Mi Cuen a, pa a pode accede a algunos apa ados p opios de la cuen a en uso. En es e momen o el bo ón del usua io cumple la misma unción que el de Mi Cuen a, di igiendo a la sección que e emos a con inuación. 25 Podemos obse a a ios pun os. Aquí, se mues an el nomb e y apellido, el co eo en uso y la imagen del usua io. En caso de no exis i imagen, se mos a ía una po de ec o anónima. Además, enemos el ex o que nos indica si el co eo ya ha sido e i icado o no. En caso nega i o, se pod á pincha sob e él pa a en ia un nue o co eo. En o o caso, solo a isa á que es á con i mado. Po debajo, enemos la zona de edición de pe il. En es e apa ado solo se deja á cambia el nomb e, el apellido y la imagen. Pa a cualquie a de los campos, se comp oba á que cumplen con las mismas condiciones que en el egis o. Además, hay un checkbox que se puede ac i a pa a elimina la imagen de pe il. Exis e ambién la posibilidad de cambia la con aseña de la cuen a. Lo he sepa ado del es o de in o mación de pe il pa a pode maneja la indi idualmen e y apo a más segu idad. Pa a ello, exis en dos pasos: el p ime o, pa a esc ibi la con aseña ac ual y con i ma si es co ec a, y, el segundo, pa a esc ibi una nue a y e i ica la. En el p ime paso, solo se pod á pulsa en Siguien e cuando el campo enga un alo . En caso de allo, ab i á la posibilidad de ecibi un co eo pa a cambia la di ec amen e. En el segundo, en el momen o en el 32 da os y no se pueden e e i pa a ob ene la en ada o iginal. En es as dos imágenes se mues a el ejemplo de pa e del ci ado de la con aseña. Almacenamien o Segu o de Con aseñas con Bc yp La segu idad de las con aseñas es undamen al. Bc yp es un algo i mo de hashing diseñado especí icamen e pa a el almacenamien o segu o de con aseñas. Se di e encia de los mé odos de hash con encionales en que es á diseñado pa a se len o y esis en e a a aques de ue za b u a, lo que lo hace ideal pa a p o ege con aseñas, incluso si la base de da os se e comp ome ida. Lo implemen o al ci a las con aseñas de los usua ios en el lado del se ido , an es de almacena las en la base de da os. Es o ga an iza que incluso si la base de da os se e expues a, las con aseñas pe manezcan p o egidas y no sean ulne ables. En la imagen mues o la e i icación de la con aseña. Pa a ci a , sal Rounds de e mina el núme o de ondas de enc ip ación, sal añade la cadena alea o ia que se añade a la con aseña an es de ealiza el hash pa a hace el p oceso más esis en e a los a aques de ue za b u a y ablas de a co i is, y con hash se gene a la con aseña segu a. Pa a e i ica la, la unción compa e con as a la con aseña p opo cionada con el hash almacenado, de ol iendo un booleano. Acaban eniendo dos capas de ci ado, lo que ha ía las con aseñas muy segu as. JsonWebToken pa a el Con ol de Acceso Hay cie as u as que solo son uncionales pa a usua ios au en icados, po lo que pa a con ola el acceso a es as he decidido u iliza JWT (JsonWebToken). Es un es ánda abie o que de ine un o ma o compac o y au en icado pa a ansmi i in o mación de o ma segu a en e pa es como un obje o JSON. Es a medida ga an iza que solo aquellos con los pe misos adecuados puedan accede a uncionalidades sensibles, mejo ando la segu idad global del sis ema. Los JWT son e sá iles y pe mi en una comunicación segu a, 33 o eciendo una solución lige a y e icien e pa a la au en icación y au o ización en aplicaciones web y sis emas dis ibuidos. Pa a c ea es e oken es necesa io inclui la in o mación que se quie e en ia en el payload. Sign gene a el oken con el payload, la cla e sec e a gua dada en el .en y el iempo de du ación de la cookie. A con inuación, a la espues a se le manda una cookie llamada “ oken”, con la in o mación del oken gene ado y, el e ce a gumen o, es un obje o de opciones pa a la cookie que la con igu a como accesible solo a a és de HTTP y no a a és de Ja aSc ip en el na egado . Es o úl imo, p opo ciona cie a p o ección con a a aques XSS (c oss-si e sc ip ing). En las u as que se necesi a es a e i icado, se comp ueba si el oken exis e y es álido, pa a pode cumpli con las unciones de cada una. Al hace el logou , la cookie se des uye. Validación de Subida de A chi os y Tex os Pa a asegu a me de la p o ección con a los a aques que se puedan hace ía inpu , he implemen ado es icciones en las ex ensiones de imágenes acep adas pa a ca ga en nues a pla a o ma. Es o e i a la subida de a chi os con ex ensiones po encialmen e pelig osas, como .exe o .php, minimizando iesgos de segu idad. Las comp obaciones se hacen an o en el lado del clien e, como en el del se ido . También hago uso de la biblio eca 34 Clamscan (de ClamAV), pa a e i ica si los a chi os subidos ienen con enido malicioso. Además, es ablezco lími es en los ex os pe mi idos pa a p e eni posibles ulne abilidades po sob eca ga de da os, como ambién limi ación de ca ac e es y símbolos especiales. Es as medidas se implemen an en el lado del clien e y, cuando el se ido ecibe los da os, ambién co obo a la iabilidad de es os. Inyecciones SQL y Consul as Pa ame izadas Las inyecciones SQL ep esen an una b echa signi ica i a en la segu idad de aplicaciones web, pe mi iendo a los a acan es ejecu a comandos no au o izados en la base de da os. Pa a con a es a es e iesgo, se implemen an consul as pa ame izadas en el código, sepa ando los da os de las ins ucciones SQL. Adop o es a p ác ica, po que disminuye d ás icamen e la p obabilidad de inyecciones SQL, ya que los pa áme os de las consul as se manejan como da os en luga de po ciones ejecu ables de código. De es a o ma, es ablezco una ba e a e icaz pa a p e eni in en os maliciosos de manipula las consul as y sal agua da la in eg idad de los da os almacenados en la base de da os. 35 En la imagen an e io , se puede comp oba que hago uso an o de ansacciones -pa a con ola el p oceso se hace de o ma ín eg a y consis en e-, como de consul as pa ame izadas. Todo pa a e i a la conca enación di ec a de da os p opo cionados po el usua io en la consul a SQL. Mi p io idad ha sido in en a man ene al máximo, den o de mis capacidades écnicas, la in eg idad y segu idad de los sis emas web. A a és de es as medidas, asegu o un en o no en el que los da os de nues os usua ios es án algunos pasos más p o egidos y las ulne abilidades po enciales se minimizan. 3.6 Posicionamien o SEO El posicionamien o SEO (Sea ch Engine Op imiza ion) pa a una aplicación web es el p oceso de op imización de es a pa a que apa ezca lo más al o posible en los esul ados de búsqueda o gánica de los mo o es de búsqueda, como Google, Bing o Yahoo. Es o implica implemen a es a egias y écnicas que mejo en la isibilidad y la clasi icación de la aplicación en los esul ados de búsqueda. Pa a log a lo, he conside ado, en e o os, los siguien es aspec os. Op imización de Palab as Cla e y Con enido de Calidad U iliza en el con enido palab as cla e ele an es pa a la aplicación, enlaces de calidad que aumen en la c edibilidad o p opo ciona con enido ele an e y ú il, ac ualizado que esponda a las necesidades de los usua ios, en e o os, es lo que he in en ado plasma en el p oyec o pa a mejo a la ele ancia, la calidad y la au o idad pe cibida de la aplicación. - No hay con enido i ele an e ni in o mación de elleno, es á cuidadosamen e seleccionado. Fundamen al pa a el SEO, ya que el 36 con enido i ele an e pe judica la clasi icación en los mo o es de búsqueda. - Hay ece as y p oduc os de alimen ación. La aplicación web se uel e más ele an e pa a búsquedas elacionadas con esos emas, mejo ando las posibilidades de que apa ezca en los esul ados de búsqueda. - Palab as cla e en luga de enlaces gené icos. Es o no solo mejo a la expe iencia del usua io, sino que ambién ayuda a los mo o es de búsqueda a comp ende mejo el con enido al que se accede a a és de esos enlaces. Expe iencia del Usua io Una buena expe iencia del usua io en una aplicación web signi ica que es a sea ácil de usa , ápida pa a ca ga y accesible desde di e en es disposi i os y na egado es. Los usua ios pasan más iempo en ella y es menos p obable que se ayan ápidamen e. Reac es al amen e alo ado po su e iciencia, endimien o y lexibilidad en el desa ollo de aplicaciones web. Los componen es eu ilizables simpli ican el desa ollo y simplicidad de la web. F ame Mo ion, po o o lado, c ea animaciones pe sonalizadas de mane a sencilla. T ansiciones y animaciones luidas, lo que con ibuye a hace la aplicación más a ac i a isualmen e. He que ido man ene un diseño simple y limpio, con algunas in e acciones pa a acili a el camino y na egación del usua io. También he incluido páginas de e o es amigables, pa a acili a la comp ensión del usua io. Ya que no soy diseñado g á ico, con ac é a un conocido que me ayudó pun ualmen e a pe ecciona cie os aspec os de la es é ica. Op imización Técnica Es impo an e ambién mejo a la es uc u a de la aplicación, la u ilización de me ae ique as, la elocidad de ca ga y la indexación adecuada pa a que los mo o es de búsqueda puedan as ea y comp ende la aplicación web 37 ácilmen e, y p opo ciona una expe iencia luida. U ilizando ecnologías como Reac , Exp ess, Node.js, Pos g eSQL y un VPS, he podido log a a ios aspec os. - Es uc u a: En Reac se o ganiza de mane a modula y es uc u ada, acili ando la ges ión y man enimien o del código. Hay Incluidas me ae ique as que dis inguen en e dis in as secciones y elemen os del código, desc ipción y í ulo de la web, idioma y localización, URL, e c. También he a ado de ecoge odos los e o es o wa nings de la consola. - Velocidad de ca ga: Reac y es a egias de ca ga e icien e, como man ene una caché del lado del clien e, ayudan a es e aspec o c ucial pa a e ene a los usua ios. - Indexación y endimien o del se ido : U iliza un VPS con Node.js y Exp ess puede o ece un endimien o obus o y escalable, ga an izando que sea accesible y esponda e icien emen e a las solici udes de usua ios y mo o es de búsqueda. En cuan o a Pos g eSQL, como base de da os, no in luye di ec amen e en el SEO, pe o su uso e icien e impac a en aspec os écnicos ele an es como: endimien o op imizado, que ejecu a consul as e icien es, educiendo iempos de ca ga; ges ión es uc u ada de da os, c ucial pa a una p esen ación ele an e de con enido; escalabilidad y es abilidad, ya que maneja g andes olúmenes de da os, en e o os. Desde la ges ión e icien e del código, has a la mejo a del endimien o y segu idad del se ido , y la base de da os, busco con ibui a una mejo expe iencia de usua io, un buen posicionamien o en los mo o es de búsqueda, a ae á ico ele an e y un mayo éxi o online. 38 4 FUTURAS LINEAS DE DESARROLLO En esumidas cuen as, he hecho una aplicación web desde ce o pa a una emp esa eal en uncionamien o, como es Al Gus o. Mi abajo se ha cen ado p incipalmen e en c ea una base sólida sob e la que segui cons uyendo du an e el u u o, co espondiendo a las necesidades que se p oduzcan. No obs an e, pa a acili a y op imiza el abajo, an o mío como el de la emp esa, el siguien e paso que conside o oma es el de cons ui una pequeña página in e na de adminis ación. Es deci , acili a el acceso y manipulación de la base de da os, con una in e az sencilla e in ui i a, y con la que pod ían hace su con enido más dinámico. Es o aumen a ía mi oco en segui desa ollando o as uncionalidades o mejo as, op imizando el iempo. Lo siguien e es c ea un espacio VPS con algún p o eedo de hos ing. Pienso en Hos inge po la calidad-p ecio del se icio y po sus bene icios, como puede se su de ec o de Malwa e. Tend ía que con igu a un sis ema nue o, ac ualiza lo y con igu a lo pa a que pueda co e mi aplicación web con odos los se icios que necesi o. Además, de mí depende ía la segu idad y ges ión del p opio se ido , lo que me man end ía en cons an e con ac o con el mismo. El mundo ecnológico a anza ápidamen e, y pa a man ene me al día, engo la in ención de pe ecciona el lado del clien e usando Nex .js, un amewo k de Reac . Complemen a y ex iende las capacidades de Reac pa a aplicaciones web. Reac se enca ga de la pa e de la in e az de usua io dinámica, la lógica y la ges ión del es ado, mien as que Nex .js ag ega en u amien o, ende izado del lado del se ido , gene ación de páginas es á icas y he amien as de op imización. Es a combinación me pe mi e cons ui una aplicación web más mode na, ápida y más amigable pa a SEO. O o de los pasos a oma , se ía añadi a la sección de los P oduc os una caja lo an e ija a la que pudie as hace un d ag de los p oduc os. Aho a mismo, solo se mandan cajas de un núme o especí ico de unidades, debido a cues iones de pesaje, pe o, al ene el peso de la unidad de p oduc o, mi p opues a es la de c ea una caja pe sonalizada que consiga combina 39 dis in os p oduc os, incen i ando una comp a más a iada. El obje i o se ía mejo a las en as de los p oduc os y idelización de clien es. Además, pa a es e úl imo pun o, ambién quie o implemen a la posibilidad de ecibi comen a ios de las ece as po pa e de los usua ios, incluyendo cajas en las ece as y en los mismos p oduc os que admi an es a uncionalidad. Pa a man ene una base de da os más sólida, oy a implemen a unciones que la man engan más ac ualizada, como puede se el ejemplo de la eliminación de cuen as o pedidos expi ados que no se hayan con i mado. Así e deshaces de da os i ele an es que solo añaden peso. Po úl imo, conside ando el po encial c ecimien o de la emp esa, es oy con emplando la in eg ación de una he amien a de In eligencia A i icial. Es o pod ía p opo ciona ecu sos pa a mejo a la emp esa, como o ece ecomendaciones pe sonalizadas, analiza da os de en as pasadas y endencias del me cado, o implemen a un cha bo impulsado po IA que b inde asis encia ins an ánea. 40 5 CONCLUSIONES Cuando llegó el momen o de ealiza el T abajo de Fin de G ado, se me p esen ó una opo unidad muy g ande po delan e: ealiza una aplicación web pa a una emp esa eal. Cu iosamen e, ealicé mis p ác icas en una s a - up, donde ambién es u e in oluc ado en el desa ollo de una pla a o ma web. De ello pude ex ae expe iencia que se ha is o e lejada di ec amen e en es e abajo, como puede se en el caso de Reac . Lo he desa ollado con el in de ene la posibilidad de impulsa una pequeña emp esa a un plano ecnológico en el que no se encon aba, pa a da le el econocimien o que c eo me ecido. Ob iamen e, exis en muchas mejo as que se pueden ealiza y cosas que debe ía cub i , pa a llega a cumpli ese obje i o con c eces, pe o pienso que he c eado una base sólida sob e la que segui cons uyendo. Mi in ención ha sido lle a lo un paso más adelan e, desa ollándolo como un p oyec o más ce cano al plano labo al que al de un abajo pa a la uni e sidad. Es deci , he que ido subi mi ni el pe sonal y desa ia mi capacidad como Ingenie o de So wa e. Ello me ha lle ado a decepciones y dolo es de cabeza al encon a me con p oblemas que nunca había explo ado, eniendo que hace uso de los conocimien os que me ha apo ado la ca e a, y ¡mucha imaginación! Cla o que aho a, mi ando mis esul ados y e olución, puedo deci con segu idad que es oy o gulloso de mi p og eso y me sien o mo i ado pa a segui a on ando desa íos con se enidad. A ni el pe sonal, es e abajo ha e ado mis c eencias y me ha cambiado la di ección de pensamien o. Ha eque ido man ene siemp e la cabeza ía e i sumando migui as de pan sin pa a , pa a que los p oblemas no enasen mi impulso. Pod ía deci que los años que he es ado en el g ado han sido un c ecimien o sob e es os dos aspec os, que se en ep esen ados en es e úl imo p oyec o. Aunque quede un la go camino po delan e, es oy con encido de la ac i ud necesa ia pa a alcanza las me as que me impongo. Pa a conclui , me gus a ía menciona que la ca e a ha apo ado mucho a ni el pe sonal. Me he dado cuen a de que la impo ancia no eside en la 41 he amien a en sí, en es e caso la Ingenie ía del So wa e, sino en ap ende a u iliza la. La eo ía es muy impo an e, como ambién lo es la p ác ica. Quie o man ene mi c ecimien o y, pa a ello, sé que es necesa io segui a anzando sin de ene se, pe o sin ago a se. [English] When he ime came o wo k on my Bachelo ’s Deg ee Final P ojec , a signi ican oppo uni y p esen ed i sel : o de elop a web applica ion o a eal company. In e es ingly, I had p e iously comple ed my in e nship a a s a -up, whe e I was also in ol ed in he de elopmen o a web pla o m. This expe ience di ec ly in luenced my p ojec , as may be he case o Reac . I aimed o impel a small company o a echnological le el i hadn' eached be o e, gi ing i he ecogni ion I belie e i dese es. While he e a e many imp o emen s and a eas o co e o su pass his goal, I eel I' e laid a solid base o build upon. My in en ion was o ake i a s ep u he , ea ing i mo e like a p ojec in a p o essional se ing a he han jus a uni e si y assignmen . I wan ed o ele a e my pe sonal skill le el and challenge mysel as a so wa e enginee . This jou ney led me o disappoin men s and headaches as I encoun e ed p e iously unexplo ed p oblems, equi ing me o d aw upon he knowledge om my academic backg ound and a lo o imagina ion. Ye , looking a my esul s and p og ess now, I can con iden ly say ha I'm p oud o how a I' e come and eel mo i a ed o con inue handling challenges calmly. On a pe sonal le el, his p ojec challenged my belie s and shi ed my way o hinking. I demanded main aining a cool head and consis en ly p oblem- sol ing so ha obs acles wouldn' s all my p og ess. I'd say he yea s spen in my deg ee ha e been a g ow h jou ney in hese wo aspec s, and hey a e e lec ed in his inal p ojec . Al hough he e's s ill a long oad ahead, I'm con inced o he a i ude equi ed o achie e he goals I se o mysel .