--- bibliography: bib.bib citation-style: ieee.csl header-includes: | \usepackage{natbib} \usepackage{longtable,booktabs} \usepackage{amsmath,amssymb} \usepackage{lmodern} \usepackage{minted} \usepackage{parskip} \usepackage{url} \usepackage{fvextra} \DefineVerbatimEnvironment{Highlighting}{Verbatim}{breaklines,commandchars=\\\{\}} \title{Memòria de Pràctiques Curriculars} \assignatura{Data Crafts} \numpract{Memòria de Pràctiques Curriculars} \autor{Artur Blaya, Rosa Giralt \& Lluís Gassó} --- ###### tags: `DC` # Introducció ## Situació acadèmica A mitjans febrer de l'any 2022, vaig decidir començar a buscar pràctiques. En aquell moment, estava cursant 5 assignatures del 3r curs, i paral·lelament estava treballant en una beca d'aprenentatge, de 10 hores setmanals, que consistia a fer de mentor. El contracte de mentories s'acabava al febrer, i un nou quadrimestre començava, pel que vaig decidir, que podria buscar una empresa per tal de fer les pràctiques. Buscava un contracte de mitja jornada, ja que havia vist que fent 10 hores setmanals em podia organitzar bé, i vaig pensar que fent el doble, també podria. Em vaig adonar que no sabia exactament com començar el procés per tal d'acabar sent contractat per una empresa, així que vaig disseccionar la tasca en diferents objectius que podia anar complint. ## Com s'han aconseguit les pràctiques Vaig començar pel més important, fer un curriculum vitae, per tal de poder enviar-lo a les ofertes. Per fer el currículum, vaig buscar informació sobre els punts més rellevants que havia de contenir, l'estructura, la forma de redactar-lo, etc. A continuació, vaig descarregar una plantilla en format Word d'una pàgina, referència @zety, i vaig modificar-la perquè s'adaptés a les meves necessitats. Finalment, vaig obtenir el següent resultat ( figura \ref{cv} ). El següent que havia de fer, era trobar la manera de poder veure ofertes de les empreses. Vaig recordar que havia rebut alguns correus que reenviava la UPC per part d'algunes empreses, que buscaven alguns perfils en concret. Vaig revisar tots aquests correus, buscant si algun complia les meves preferències. Així doncs, vaig respondre tots els correus, que m'interessaven, enviant el meu *curriculum vitae*. No obstant això, vaig buscar més fonts d'ofertes, i vaig trobar la pàgina del portal de feina de l'EPSEM, referència @portal. En aquesta pàgina vaig trobar més ofertes que s'adaptaven a les meves preferències i em vaig decantar per les que feia menys temps que havien estat publicades. També em vaig adonar que no era la millor manera respondre l'oferta només adjuntant un *PDF*, per la qual cosa vaig buscar informació de com respondre ofertes. Amb tota la informació que vaig recopilar, vaig acabar fent una plantilla per tal de poder-la reproduir en diferents ofertes. La plantilla és la següent: ```tex El meu nom és Artur Blaya, us escric en relació amb l'oferta d'ocupació [Títol Oferta] que la vostra empresa ha publicat al portal de Borsa de Treball de l'EPSEM, el dia [data Publicació]. M'agradaria comunicar-vos el meu interès pel lloc, motiu pel qual us envio el meu curriculum vitae. Em poso a total disposició per si necessiteu que us aclareixi algun detall del meu currículum o per si voleu que us ampliï qualsevol altre aspecte del meu perfil en una entrevista personal. Atentament, Artur Blaya Fernandez ``` Un cop tenia totes les eines per poder respondre correctament les noves ofertes, vaig presentar-me a diverses d'elles. En concret, em vaig presentar a tres, ja que les altres ofertes feia molt temps que estaven publicades, i vaig pensar que seria millor d'aquesta manera. Pel que fa a les ofertes del correu, no em va contestar cap empresa. No obstant això, totes les empreses de la borsa de treball em van contestar. Així doncs, vam organitzar les reunions corresponents. Dues de les reunions van ser en línia, mentre que l'altra va ser presencial. Les entrevistes van anar força bé, però per temes de calendari no m'anava gaire bé, ja que estàvem a juny i començava a tenir els exàmens finals, i les tres empreses demanaven incorporació immediata. Finalment, parlant amb un company de classe, que també buscava entrar en una empresa de pràctiques, em va comentar que just havia fet una entrevista que li havia semblat que estaven buscant a gent. Així doncs, em vaig posar en contacte amb l'empresa i vam acordar un dia per fer una entrevista. L'entrevista va anar bé, l'empresa estava en creixement i buscava algú amb ganes d'aprendre, i les condicions que oferia eren molt bones, així doncs, vaig procedir a fer el conveni de pràctiques amb aquesta empresa. \ ![Curriculum Vitae \label{cv}](https://i.imgur.com/P7Zt80E.png){width=250px} \clearpage ## Objectius inicials El meu objectiu principal de l'estada a les pràctiques de l'empresa, sempre havia estat créixer professionalment. Durant tres anys havia estat estudiant el grau, i havia adquirit molts coneixements, però mai els havia arribat a aplicar en un entorn professional. Estudiant el grau m'havia adonat que m'agradava aprendre coneixements relacionats amb les *TIC* [^1], però com que no havia treballat mai professionalment, no sabia al 100%, si m'agradaria treballar d'aquest àmbit. Les pràctiques eren una bona manera de sortir de dubtes, i adonar-me si tenia sentit que la meva carrera professional anés per aquest camí. [^1]: Les tecnologies de la informació i de la comunicació (TIC o NTIC per a noves tecnologies de la informació i de la comunicació o IT per a «Information Technology»). Viquipedia - https://ca.wikipedia.org/wiki/Tecnologies_de_la_informaci%C3%B3_i_la_comunicaci%C3%B3 Pel que fa a l'aprenentatge, tenia clar que en el món professional treballaria amb les eines més actuals, i més utilitzades. Així doncs, un altre objectiu era aprendre aquestes eines, i guanyar experiència usant-les. Pel que fa a la meva empresa en qüestió, *Data Crafts*, referència @empresa, es dedica al món de l'analítica web. Aquest món el trobava molt interessant, però mai havia tingut l'oportunitat de profunditzar-lo. Per això, un altre propòsit va ser familiaritzar-me amb aquest món. \clearpage # Entorn de treball ## Entorn de treball dins l'empresa Les Pràctiques a l'empresa Data Crafts, les he fet de manera telemàtica a temps complet. ### Entorn social Pel que fa a l'ambient social, l'empresa durant les pràctiques ha estat formada per 4 desenvolupadors comptant amb mi. En ser una empresa en creixement, el nombre de persones amb les quals he interactuat ha sigut bastant limitat. #### Comunicació En estar teletreballant, el tipus de contacte ha estat telemàtic, usant plataformes de videotrucada, majoritàriament *Google Meet*, referència @googlemeet i *Discord*, referència @discord. Una altra eina que he utilitzat per comunicar-me amb l'entorn, ha estat el software [^0] *Slack*, referència @slack. Aquest programari permet mantenir converses d'una manera professional, aportant diferents canals que permeten separar els espais de treball, i comunicació per fils, que permet comentar temes específics de forma ordenada. [^0]: El programari (software, en anglès) és el conjunt dels programes informàtics, procediments i documentació que fan alguna tasca en un ordinador. Viquipedia - https://ca.wikipedia.org/wiki/Programari #### Personal Durant l'estada de pràctiques, l'empresa estava dividida en dos sectors, seguint la imatge figura \ref{estructura}. Per una banda, hi havia el sector de les *eines de l'empresa*. Aquest sector estava dedicat a crear eines d'utilitat per l'empresa, que poguessin ser usades per la mateixa empresa, i també per futurs client. Aquest sector estava format per dos estudiant de pràctiques, sent jo un d'ells. D'altra banda, hi havia el sector de la implementació d'anàlisis web, que estava format únicament per un enginyer de dades. En un futur, hi havia la possibilitat que els altres dos enginyers en pràctiques ens involucréssim puntualment en aquest sector. \ ![Estructura Empresa \label{estructura}](https://i.imgur.com/aUg4cxK.jpg){width=400px} ### Entorn físic Pel que fa a l'àrea de treball, el meu entorn físic durant aquests mesos ha estat la meva casa, en concret la meva habitació. El material necessari per al correcte desenvolupament del treball, ha estat el següent: * **Ordinador** - El més important, ja que les tasques que he desenvolupat requerien el seu ús * **Entorn d'Escriptori** - Conjunt d'immobles que fan possible el desenvolupament de la feina * **Perifèrics Audiovisuals** - Conjunt de perifèrics que fan possible la comunicació telemàtica * **Connexió wifi** - Connexió que fa possible la comunicació telemàtica ## Responsabilitats assignades i suport rebut durant la seva realització Durant l'estada a l'empresa se'm van assignar diverses responsabilitats. A l'inici, les responsabilitats estaven més relacionades amb l'aprenentatge, mentre que al final, estaven més relacionades amb desenvolupar i produir programari relacionat amb serveis web [^2]. Una visió general de les meves responsabilitats és la següent: - Implementació Analítica Web - Formació Curs Analítica Web - Serveis Web - Back end - Formació API Calls Google Analytics - Formació Google Oauth Session - Formació Node JS - Formació Express JS - Front End - Formació React JS - Formació CSS + HTML + JS - Producció Data Crafts Toolbox En l'apartat \ref{tasc} s'explica més detalladament cada una de les tàsques que se'm van assignar. [^2]: Un servei web és una col·lecció de protocols i estàndards que serveix per intercanviar dades entre aplicacions. Viquipedia - https://ca.wikipedia.org/wiki/Servei_web Pel que fa al suport, sempre que he tingut la visió del meu cap. Per qualsevol problema on em quedés encallat, podia demanar suport, comunicant-me usant les eines esmentades, i el cap em donava una visió de com afrontar el problema. No entrava en detalls de resolució, simplement m'explicava casos semblants que havia vist durant la seva carrera professional, i això m'ajudava a encarar diferent la qüestió, el que em portava a solucionar-lo. \clearpage # Aspectes tècnics de l'estada de pràctiques ## Eines de gestió de tasques Per tal de poder organitzar les tasques assignades vaig fer ús de diferents softwares, uns per controlar les tasques a escala de temps, i altres per conèixer el seu estat i poder ajustar les prioritats de l'empresa. Per tal d'organitzar-me en temps, vaig usar l'aplicatiu *Google Calendar*, referència @calendar, un calendari que permet assignar esdeveniments o tasques a les 24 hores del dia. El primer que feia quan començava el torn, era dividir el meu horari en tasques, segons les tasques que tenia pendents, i la prioritat d'aquestes. Per poder planificar correctament el meu horari, havia de tenir molt clar quines tasques eren més necessàries, i en l'estat que aquestes es trobaven, per això vaig fer ús del programari *Trello*, referència @trell. Aquest programari permet crear espais de treball compartits, per tal que diversos membres creïn tasques pendents i les assignin a altres membres. Aquest programari també permet classificar les tasques segons l'estat de compliment amb el qual es troben aquestes. En les figures \ref{trello} i \ref{calendar} es troben dues captures de pantalla corresponents als programaris Trello i Google Calendar respectivament. Una altra eina que em va ajudar a gestionar les tasques va ser el *Google Tasks*, referència @tasks. Aquesta eina es pot desplegar dins de totes les eines de Google, com *Gmail*, *Calendar*, etc. l'eina permet apuntar tasques en aquests entorns, i pot ser útil per assignar tasques en una reunió de manera ràpida, i després utilitzar-les en els entorns esmentats. \ ![Trello \label{trello}](https://i.imgur.com/zcdKvdI.jpg){width=400px} \ ![Google Calendar \label{calendar}](https://i.imgur.com/aiBofg9.png){width=400px} ## Tasques assignades {#tasc} ### Implementació analítica Web La primera tasca que se'm va assignar, va ser fer un curs d'implementació d'analítica web, referència @curs. El curs comptava amb 16 hores de formació, les quals estaven repartides en introduir conceptes del món de l'analítica web, i mostrar amb exemples una aplicació del món real. Per poder seguir el curs amb més atenció, vaig realitzar els exemples paral·lelament, per la qual cosa les 16 hores inicials se'n van estendre a 48 hores, és a dir, la primera setmana la vaig dedicar al curs. Després de dur a terme el curs, em van donar un certificat, figura \ref{certificat}. \ ![Certificat "Advanced Google Analytics 4 Implementation with Tag Manager" \label{certificat}](https://i.imgur.com/o0WS8F9.png){width=400px} \clearpage ### Back End #### Formació API Calls Google Analytics Inicialment, vaig començar introduint-me en el món del Back end [^7]. La primera tasca que se'm va assignar va ser estudiar l'API [^4] de *Google Analytics*, referència @anal. En aquell moment, l'API de *Google Analytics* estava en una versió molt *alpha*, i la documentació al respecte era escassa, per la qual cosa la meva feina era extreure informació de l'API a base de la documentació que hi havia, i fent proves. [^4]: Una interfície de programació d'aplicacions (en anglès Application Programming Interface, API) és una interfície que especifica com diferents components de programes informàtics haurien d'interaccionar. L'objectiu de la tasca era aprendre a fer servir l'API, més concretament la part *API/ADMIN* que permetia accedir a configuracions de compte de Google Analytics, per la qual cosa era una eina potencialment important per la meva empresa. Aquesta tasca consistia en gran part en llegir documentació, fer peticions i documentar el resultat. Per dur-la terme, vaig fer ús de *Node*, referència [@node], juntament amb la llibreria *Axios*, referència @axios. Alternativament, vaig usar el programari *Postman*, referència @postman, per fer les peticions HTTP [^5]. Per més informació veure l'apartat \ref{detalls}. [^5]: El protocol de transferència d'hipertext o HTTP (HyperText Transfer Protocol) estableix el protocol per a l'intercanvi de documents d'hipertext i multimèdia al web. HTTP disposa d'una variant xifrada mitjançant SSL anomenada HTTPS. Viquipedia - https://ca.wikipedia.org/wiki/Protocol_de_transfer%C3%A8ncia_d%27hipertext #### Formació Google Oauth Session L'aplicació que estava desenvolupant l'empresa, requeria un login [^6], per la qual cosa se'm va encarregar estudiar l'estàndard d'autorització *Oauth*, més informació a l'apartat \ref{detalls}. [^6]: Inici de sessió Aquesta tasca tenia un caràcter més formatiu, que productiu, ja que no seria l'encarregat de realitzar el login per la part del *Back End*, però interessava que conegués el funcionament pel futur. [^7]: *Front End* i *Back End* són termes que fan referència a la separació d'interessos entre una capa de presentació i una capa d'accés a dades, respectivament. Wikipedia - https://es.wikipedia.org/wiki/Front_end_y_back_end #### Formació Node JS La meva empresa desenvolupa els seus serveis usant el *MERN Stack*, un conjunt de llibreries *JavaScript*, més informació a l'apartat \ref{detalls}. Per aquest motiu, era molt important tindre un bon coneixement de *Node*. Per la formació de *Node*, vaig fer servir diverses fonts de coneixement, documentacions, videotutorials, etc. Una bona introducció a l'entorn, és la referència @cursnode. #### Formació Express JS Tot i que les tasques on vaig treballar majoritàriament, van ser relacionades amb el *Front End*, se'm va encarregar tindre coneixements bàsics de la part més *Back end* del *MERN stack*, és a dir *Express JS*, referència @express. Més informació a l'apartat \ref{detalls} Per tal d'adquirir nocions bàsiques d'aquest *framework* [^8], vaig usar diverses fonts de coneixement, documentacions, videotutorials, etc. Una bona introducció a l'entorn, és la referència @cursexpress. [^8]: L'entorn de treball o marc de treball és Infraestructura de programari que, en la programació orientada a objectes, facilita la concepció de les aplicacions mitjançant la utilització de biblioteques de classes o generadors de programes. Viquipedia - https://ca.wikipedia.org/wiki/Entorn_de_treball_(inform%C3%A0tica) ### Front End La major part de les tasques desenvolupades durant l'estada a l'empresa, han estat relacionades amb el *Front End*. Després de realitzar el curs d'analítica web, el cap ens va deixar triar quin camí ens agradaria escollir. L'objectiu del director era desenvolupar una sèrie de *eines* que fossin útils en l'àmbit de l'analítica web, i publicar-les com a servei web, per la qual cosa aquestes eines necessitaven una web on poguessin ser utilitzades. Per aquest motiu, els dos nous becaris vam tenir l'oportunitat de mostrar les nostres preferències respecte al *Front End* i al *Back End*. Finalment, els becaris ens vam posar d'acord i vaig procedir a escollir el camí del *Front End*. El món del *Front End* és molt ampli, per aquest motiu, inicialment, vaig haver de veure una visió general de tot el que era essencial aprendre. Un cop em vaig situar, vaig iniciar el meu període de formació. #### Formació CSS + HTML + JS El primer que havia de tenir clar, eren les tres eines fonamentals del desenvolupament *Front End*, *CSS*, *HMTL* i *JS*, veure l'apartat \ref{detalls}. Aquests entorns els havia de dominar a la perfecció abans de fer qualsevol altra pas, ja que eren el coneixement fonamental del món web. Pel que fa a *HTML*, vaig repassar els coneixements que ja coneixia mitjançant la web *w3schools*, referència @w3schools. Vaig aprendre a classificar correctament cada tipus de component que apareix en una web. Pel que fa a *JS*, vaig mirar tutorials de la mateixa web, referència @w3schools. Em vaig centrar en les funcions asíncrones, i els diferents mètodes de les classes per defecte. Pel que fa a *CSS*, també vaig usar la mateixa web, referència @w3schools. El món del CSS és molt ampli, i el meu nivell inicial era inferior respecte *HTML* i *JS*, per la qual cosa vaig dedicar gran part d'aquesta tasca en aquest entorn. Inicialment, vaig fer un curs de 8 hores, referència @curscss. El curs em va aportar molts coneixements que no tenia, però vaig haver d'indagar en alguns altres que no deixava molt clars. Així doncs, vaig decidir profunditzar en els següents temes: tipus de display (display: flex i display: grid principalment), animacions bàsiques, selectors i especificitat. #### Formació React JS Un cop tenia clares les bases, podia fer el següent pas, aprendre *REACT JS*. Com s'ha esmentat anteriorment, *React* és un *framework JavaScript*, això significa que és una col·lecció de llibreries que estan unides per facilitar certes activitats. El meu cap em va recomanar que uses aquest *framework*, ja que per la tasca que pel desenvolupament de la pàgina web que hauria de fer en el futur, m'aportaria facilitats, i també aportaria rendiment a la web. Tot i que era preferible fer ús el *MERN STACK*, el cap em va deixar triar el *framework* de JS que volgués. Per escollir el més adequat, vaig buscar les tendències de creixement de les diferents alternatives, figura \ref{creix} i finalment em vaig decantar per *REACT JS*. Per tal d'iniciar-me en el món de *React*, vaig mirar un curs de YouTube de 3 hores, referència @cursreact. Aquest curs era del 2019, i estava molt desactualitzat, però em va servir per tenir una visió de com funcionava aquest entorn en els seus inicis. A continuació vaig realitzar un exemple pràctic per aplicar els coneixements apresos, i familiaritzar-me amb una versió més recent de React. L'exemple que vaig seguir va ser un vídeo de YouTube, referència @pelis, que plataforma de pel·lícules. Tot i que tenia moltes preguntes internes, i no era molt expert, el resultat obtingut va ser bastant bo, figura \ref{pel}, per la qual cosa vaig decidir que ja podia passar a desenvolupar la pàgina web de *Data Crafts Toolbox*, referència @data-crafts. \ ![Tendència de creixement Front End Frameworks 2022\label{creix}](https://i.imgur.com/bDO09Ga.png){width=400px} \ ![Primera pàgina creada amb React. Portal de pel·lícules \label{pel}](https://i.imgur.com/s5L3K60.jpg){width=400px} Tot i que hi havia la possibilitat d'usar un *framework CSS*, vaig arribar a la conclusió que per la pàgina web que havia de desenvolupar era millor no usar-ne cap. El motiu principal que em va portar a aquesta decisió era la personalització. Els *frameworks* d'estil, tot i que per alguns projectes, poden ser de gran utilitat, tenen l'inconvenient de què els resultats no són excessivament personalitzables. És cert que es poden fer servir per a aconseguir més personalització, però quan els fas servir amb aquest objectiu, acabes perdent la majoria d'avantatges de fer ús un *framework*, per la qual cosa et surt més a compte, a escala de llegibilitat i rendiment, no fer servir-ne. ### Producció Data Crafts Toolbox Amb tota la formació que havia fet, ja estava llest per començar a desenvolupar la web de *Data Crafts Toolbox*. Per tal de realitzar la web, el cap em va passar unes diapositives de tot el que li agradaria implementar en una primera instància, figura \ref{mock}. Vaig començar a desenvolupar l'aplicatiu fent petits passos. A l'inici em vaig trobar amb moltes dificultats relacionades amb la integració de l'estil, *CSS*, en React, però amb l'ajuda de la documentació i la prova i l'error, els vaig poder solucionar. La figura \ref{estatinicial} mostra la versió més alfa de la primera pàgina d'inici, que he pogut recuperar de la web. La figura \ref{estatintermig} mostra l'estat d'aquesta pàgina després d'un temps en producció, mentre que la figura \ref{estatfinal}, mostra l'estat actual. Pel que fa al desenvolupament de la pàgina, a l'inici desenvolupava a escala local, és a dir, el testatge, el feia en el domini *local host* [^9]. Per poder mostrar els resultats que anava obtenint, usava eines de captura de vídeo, o directament passava el projecte al cap. A mesura que el projecte avançava, cada vegada era més carregós la feina de demostrar i unificar la feina amb el *Back End* pel que va arribar el moment de començar la integració del *Front End* amb el *Back End*. Per tal d'unificar l'aplicatiu, vam fer servir el *Heroku*, referència @heroku. Aquesta eina permet pujar el projecte a internet, facilitant la resolució del domini, i la publicació a Internet. Una altra característica destacable d'aquest servei, és que es pot connectar a un gestor de versions, de tal manera que cada vegada que hi hagi un canvi, el projecte s'actualitzi a internet. La integració d'aquesta eina va permetre que el testatge fos molt més ràpid, i va fer possible la integració, per la qual cosa va marcar una nova etapa en l'estat de la tasca. A mesura que vaig anar desenvolupant la pàgina, vaig aprendre noves coses de React. No podria escriure tot el que he après d'aquest entorn en una sola memòria pel que em basaré a destacar els conceptes més destacables, i en l'apartat \ref{detalls}, es donarà una descripció bàsica de cada un d'ells. Així doncs, els conceptes que vaig incorporar a la pàgina van ser els següents: metodologia *BEM*, *SCSS*, *Single Page Aplication*, *React Hooks*, *local Storage*, comunicació entre finestres per missatges... [^9]: En informàtica, en el context d'una xarxa TCP/IP com ara Internet, localhost és un nom reservat que significa aquest ordinador. S'utilitza quan algú vol especificar d'una altra forma el nom o adreça d'un ordinador, router, o altre dispositiu amb connexió a la xarxa. - Viquipedia - https://ca.wikipedia.org/wiki/Localhost \ ![Pàgina Inici - DC - Toolbox mockups \label{mock}](https://i.imgur.com/eTRxzIn.png){width=400px} \ ![Pàgina Inici - DC - Toolbox mockups Estat Inicial\label{estatinicial}](https://i.imgur.com/ixpRaiq.png){width=400px} \ ![Pàgina Inici - DC - Toolbox mockups Estat Intermedi\label{estatintermig}](https://i.imgur.com/zC75uL9.png){width=400px} \ ![Pàgina Inici - DC - Toolbox mockups Estat Final\label{estatfinal}](https://i.imgur.com/QYpoLN9.png){width=400px} ## Problemes plantejats Com s'ha comentat anteriorment, gran part de la meva estada a l'empresa, ha estat formant-me, per la qual cosa tots els problemes que m'he trobat han estat relacionats amb el desenvolupament web. Majoritàriament, els problemes que m'he trobat sempre eren del mateix estil. El món web avança molt de pressa, conseqüentment, les llibreries, i inclús els llenguatges relacionats, també ho fan, per la qual cosa molts cops m'he trobat que les coses que havia après no funcionaven. Per una part, aquest era l'inconvenient d'haver començat per les bases, que moltes coses estaven desactualitzades, però per l'altra part, conèixer-les m'ajudava a poder identificar ràpidament tipus d'error, i poder escollir el camí per solucionar-lo. La metodologia que he usat per poder solucionar els erros ha estat la següent: 1. Identificar l'error 2. Analitzar per què apareix l'error 3. Buscar documentació 4. Buscar casos similars 5. Demanar Suport La majoria dels errors els vaig poder resoldre sense arribar al punt 4 i 5, ja que simplement eren produïts pel canvi de les llibreries o el mal ús d'aquestes. Els problemes que m'han fet arribar al punt 4 i 5, són problemes que m'han sorgit per haver seguit una sola via a l'hora de resoldre el problema, per tal d'aprofitar la feina feta, acumulant un deute tecnològic, que sempre s'acaba pagant. ## Reptes professionals L'estada a l'empresa et posa en contacte amb el món laboral. Durant aquest temps he vist com és aquest entorn i he pogut identificar quins són els reptes que he hagut de superar per tal del correcte compliment de la feina. Com s'ha comentat anteriorment, el món del desenvolupament web, com molts altres, avança diàriament, per la qual cosa ha estat molt important tindre la capacitat de ser autodidacta. És impossible aprendre-ho tot en poc temps, per això s'ha de saber per on començar per tal de crear unes bases on pots anar produint i millorant. Al món laboral molts cops has de treballar amb altres persones conjuntament, per la qual cosa has de tenir la capacitat separar i integrar la feina. Dividir les responsabilitats de forma clara, ajuda a no entrar en mal entesos i a millorar la productivitat. Amb relació amb l'anterior, la comunicació és un repte que s'ha de tenir en compte, ja que és fonamental per correcte funcionament de l'empresa. \clearpage # Experiència i formació adquirides ## Punt de vista humà Des del punt de vista humà, les pràctiques d'empresa m'han ajudat a millorar en els següents àmbits: - Gestió del Temps - Gestió de Prioritats - Resolució de Problemes - Visió General - Aprenentatge Autònom - Comunicació - Integració de feina conjunta - Treball en equip - Productivitat - Llengua Anglesa ## Punt de vista tècnic {#detalls} A continuació donaré una breu descripció d'alguns dels coneixements que he obtingut durant les pràctiques d'empresa. És impossible reunir tots els detalls del meu aprenentatge tècnic, per la qual cosa ho agruparé en entorns perquè sigui el breu i entenedor possible. Per més informació consultar les referències. * **Node JS** - un entorn en temps d'execució multiplataforma, basat en el llenguatge de programació JavaScript, asíncron, amb E/S de dades en una arquitectura orientada a esdeveniments i basat en el motor V8 de Google * **Express JS** - Express és el *framework* web més popular de Node, i és la llibreria subjacent per a un gran nombre d'altres *frameworks* web. Proporciona mecanismes per a l'escriptura de gestors de peticions amb diferents mètodes HTTP a diferents camins URL * **React JS** - React és un *framework* web de Node. Ajuda a crear interfícies d'usuari interactives de forma senzilla. Dissenya vistes simples per a cada estat a la teva aplicació, i s'encarregarà d'actualitzar i renderitzar de manera eficient els components correctes quan les dades canvien * **MERN Stack** - MERN és un stack de codi obert que ajuda els desenvolupadors a crear llocs web i aplicacions dinàmiques. Utilitza JavaScript a través de les diferents tecnologies, i cada lletra de l'acrònim representa una tecnologia diferent: *Mongo, Express, React, Node* * **HTML** - Llenguatge de Marcatge d'Hipertext (HTML). S'utilitza per estructurar i desplegar una pàgina web i els seus continguts * **CSS** - llenguatge que gestiona el disseny i la presentació de les pàgines web, és a dir, com llueixen quan un usuari les visita. Funciona juntament amb el llenguatge HTML * **SCSS** - Processador CSS. Un preprocessador CSS és una eina que ens permet generar, de manera automàtica, fulls d'estil, afegint-los característiques pròpies dels llenguatges de programació * **BEM** - BEM (Block, Element, Modifier o Bloc, Element, Modificador) és una metodologia àgil de desenvolupament basada en components. S'usa per anomenar les classes d'estil CSS de forma escalable * **JS** - JavaScript és un llenguatge de programació. S'usa per afegir característiques interactives a les pàgines web * **React Hooks** - Els Hooks són funcions que et permeten "enganxar" l'estat de React , i el cicle de vida, des de components de funció * **Single Page Aplication** - Una aplicació d'una sola pàgina (SPA) és una aplicació web o lloc web que interactua amb l'usuari reescrivint dinàmicament la pàgina web actual amb dades noves, sense la necessitat de fer un *reload* * **Postman** - Postman és una aplicació que ens permet fer proves. És un client HTTP que ens dona la possibilitat de testejar 'HTTP requests' mitjançant una interfície gràfica d'usuari * **Oauth** - *Open Authorization* és un protocol per passar l'autorització d'un servei a un altre sense compartir les credencials d'usuari reals, com ara un nom d'usuari i una contrasenya ## Conclusions L'estada a l'empresa m'han servit per respondre la meva pregunta inicial sobre si m'agradava la via que estava agafant la meva carrera professional. Després de dedicar tant temps en aquest àmbit, m'he adonat que m'agrada, i que m'hi puc dedicar professionalment. Durant aquesta estada he crescut molt professionalment. Els meus coneixements tècnics respecte al món de l'analítica web, i els serveis web, a l'inici eren pràcticament nuls, i dos mesos després, considero que tinc un nivell mitjà-alt en aquests àmbits. Encara em falta molt per aprendre, però ja porto molt après. Data Crafts, també m'ha fet créixer com a persona. He après a enfocar els problemes amb una visió diferent. He reforçat molts aspectes relacionats amb la feina amb equip i la comunicació, i també he millorat la meva organització. Per concloure, m'agradaria agrair la confiança que va posar en mi l'empresa, així com tots els coneixements, i l'experiència que he adquirit durant aquest període. \clearpage # Referències