###### tags: `IS` # Context En aquest document es descriu el context, el punt de partida, les funcionalitats i la planificació, de la realització d'un sistema integral de gestió, d'un laboratori tecnològic obert a la ciutadania. ## Requisits ## Requisits mínims oficials * Control de les màquines de Laboratori * Encapsulat per protegir i amagar el *hardware[^30]* dels terminals * Gestió d'usuaris i permisos * Monitoratge i control des de l'exterior * Utilització de protocols de xarxa segurs * Facilitat d'instal·lació i configuració, i robustesa davant d'errors * Documentació funcional pel que fa a l'usuari (manual d'usuari) * Documentació tècnica del projecte ## Requisits addicionals * Escalabilitat, possibilitat d'instal·lar múltiples màquines en múltiples laboratoris * Monitoratge (estat, consum, diagnòstic, etc.) de terminals i màquines a través del portal web * Sistema d'autoritzacions (usuaris base, administradors) i permisos d'ús de màquines per usuari * Portal web per fer reserves (amb certes limitacions, com ara algun tipus de quotes diari/setmanal, etc.) * Control de la maquinària a través del portal web (engegar i parar màquines, només amb privilegis d'administrador) * Mètodes d'autenticació alternatius (possibilitat d'engegar la màquina si l'usuari s'ha oblidat la targeta) * Comunicacions segures (*HTTPS*[^11], *MQTTS*[^10]) * Instal·lació i configuració del sistema amb facilitat * Pàgina web intuïtiva i amigable, adaptable a cada dispositiu (responsive) * Portal web accessible a Internet amb domini propi [^10]: MQTT és el protocol de comunicació enfocat a la connectivitat Machine-to-Machine (M2M), fa referència a la tecnologia que permet als indicadors o dispositius la comunicació entre ells sense fils. Així, el M2M es considera com una de les parts fonamentals de l'Internet de les coses (IoT). [^11]: HTTPS és un protocol que permet establir una connexió segura entre el servidor i el client, que no pot ésser interceptada per persones no autoritzades. [^30]: Maquinari, equip o suport físic en informàtica. Fa referència a les parts físiques, tangibles, d'un sistema informàtic, els seus components elèctrics, electrònics, electromecànics. ## Situació Aquests requisits s'han d'entendre dins del marc acadèmic del grau d'Enginyeria de Sistemes TIC, encara que en un futur el laboratori es farà realitat amb la creació del TechLab gestionat per l'EPSEM, que pot presentar requisits similars als presentats en aquest projecte. Per aquest motiu que els requisits mínims tenen una doble finalitat, d'una banda, assentar les bases per a l'avaluació dels projectes que els estudiants desenvolupen com a part de la disciplina i, d'altra banda, servir de punt de partida per a la futura implementació del sistema de gestió TechLab. \clearpage # Punt de partida El nostre grup està format per persones que en l'assignatura prèvia formaven part de diferents grups. En un dels grups l'arquitectura del hardware va ser la mateixa que en l'assignatura actual (*ESP32[^4]*). En aquest grup van poder avançar bastant el projecte fins al punt de tenir un hardware funcional amb un servidor estable i una pàgina web visualment atractiva. En canvi, en l'altre grup van escollir una arquitectura diferent de la del projecte actual (basada d'un *Arduino UNO[^5]* + *ESP-01[^6]*). En aquest cas els avanços no van ser tan satisfactoris, en bona part culpa del coll d'ampolla de l'arquitectura. Encara i així es va aconseguir un sistema estable i funcional, encara que aquest fos lent per processar les peticions. Per tant, podem dividir el punt de partida en tres seccions, el *firmware[^8]*, el *back-end[^9]* i el *front-end[^7]*. Des del punt de vista del firmware partim d'una base difusa, tenim diversos blocs de codi, poc organitzats i gens optimitzats. De totes maneres comptem amb l'experiència d'haver treballat prèviament amb els diferents perifèrics prèviament. Per altra banda des del punt de vista del back-end es va treballar amb un framework anomenat *Flask[^3]*, i encara que funcional, de nou poc organitzat. I per últim des del punt de vista del front end es va utilitzar *HTML[^1]* bàsic i *JS[^0]* bàsic (sense cap framework), juntament amb una llibreria de CSS anomenat *W3CSS[^2]*. De nou encara que vam obtenir un resultat visualment atractiu i funcional, internament era caòtic. Per tant, hem decidit tornar a començar de nou tot el projecte, aprofitant tota l'experiència que hem adquirit, tenint en compte els errors que vam cometre i els punts forts que vam tenir. D'aquesta manera aconseguirem una base més sòlida i un projecte més net i escalable. [^0]: JavaScript és un llenguatge de programació interpretat, dialecte de l'estàndard ECMAScript. [^1]: HTML, sigles en anglès de HyperText Markup Language, fa referència al llenguatge de marcatge per a l'elaboració de pàgines web. [^2]: W3CSS és un framework CSS que podem trobar i descarregar al lloc oficial de W3Schools. [^3]: Flask és un “micro” Framework escrit a Python i concebut per facilitar el desenvolupament d'Aplicacions Web sota el patró MVC. [^4]: ESP32 és la denominació d'una família de xips SoC de baix cost i consum d'energia, amb tecnologia Wi-Fi i Bluetooth de manera integrada dual. [^5]: El Arduino Uno és una placa de microcontrolador de codi obert basat en el microxip ATmega328P i desenvolupat per Arduino.cc. [^6]: ESP-01 Mòdul WiFi és un transceptor WiFi basat en l'ESP8266 que et permet dotar de connectivitat WiFi els teus robots i projectes de manera fàcil i econòmica. [^7]: El desenvolupament web Front-end consisteix en la conversió de dades en una interfície gràfica perquè l'usuari pugui veure i interactuar amb la informació. [^8]: El firmware o suport lògic inalterable és un programa informàtic que estableix la lògica de nivell més baix que controla els circuits electrònics d'un dispositiu de qualsevol tipus. [^9]: Back-end és la part de lapp que lusuari final no pot veure. La seva funció és accedir a la informació que se sol·licita, a través de l'app, per combinar-la després i tornar-la a l'usuari final. \clearpage # Funcionalitats A continuació es descriuen les funcionalitats del projecte. ## Control de corrent les màquines **Tecnologia:** *C++*[^15] **Resum funcional:** Capacitat d'engegar o parar les màquines a través del relé **Interconnexió:** Comunicació amb el *back-end* a través de missatges *MQTT* ## Llegir targeta UPC **Tecnologia:** *C++* **Resum funcional:** Llegir l'ID de la targeta **Interconnexió:** Comunicació amb el *back-end* a través de missatges *MQTT* ## Alternativa targeta UPC **Resum funcional:** En cas de no disposar de la targeta UPC, des de la interfície web podem sol·licitar mostrar un codi a la pantalla del dispositiu. I introduir aquest codi a la interifície. D'aquesta manera verifiquem que l'usuari es troba davant de la màquina **Interconnexió:** El *front-end* envia la sol·licitud de mostrar el codi al *back-end* a través de peticions *HTTPS* i aquest li envia a la placa corresponent a través de missatges *MQTT* ## Sistema de quotes **Tecnologia:** *Node-Js[^18]* Resum funcional: Limitar les hores que cada usuari pot reservar en un interval de temps determinat, adaptable a les necessitats del client **Interconnexió:** Comunicació amb el *front-end* per mostrar-li al client les hores utilitzades i disponibles ## Gestió d'usuaris i permisos **Tecnologia:** *Node-Js* amb *Mongo-db[^20]* Resum funcional: Emmagatzemar usuaris amb diferents graus de permisos (usuari, administrador, etc.) **Interconnexió:** Comunicació entre *Node-Js* i la base de dades *Mongodb* utilitzant la llibreria *Mongoose* ## Interfície web **Tecnologia:** *React-Js[^19]* **Resum funcional:** Interfície intuïtiva, agradable i adaptable a diferents pantalles **Interconnexió:** Comunicació amb el *back-end* a través de peticions *HTTPS* ## Encapsulat dispositiu **Tecnologia:** *FreeCad[^17]* **Resum funcional:** Dissenyar i materialitzar prototip de l'encapsulat per tal que sigui resistent i durador ## Documentació **Tecnologia:** *Markdown[^25]* **Resum funcional:** Documentació funcional (menys tècnica, orientada a l'usuari final però també a l'instal·lador/administrador) i una de tècnica (detalls d'implementació, justificació de les decisions de disseny, etc., destinada al professorat que avaluï). \clearpage # Planificació Les tasques a realitzar es poden dividir en 3 grans grups. Per una banda, hi ha les tasques relacionades el *front-end*. D'altra banda, hi ha les tasques que impliquen el *backend*. Finalment, hi ha les tasques del *firmware*. Per tal de gestionar les tasques a escala temporal, i en l'àmbit de prioritats, s'usarà l'eina *Trello [^13]*. En la figura \ref{gantt}, s'observa un *diagrama de Gantt[^14]*, que preveu com s'organitzarà el grup en temps relacionat amb les tasques amb el número de setmana de l'any. \ ![Diagrama de Gantt \label{gantt}](https://i.imgur.com/09AuxSD.png) [^13]: Trello és una eina que permet crear una serie de tasques a realitzar, assignarles a cada membre, i classificar-les segons el seu progrés. D'aquesta manera podrem saber en tot moment el progrés de cada membre realitzant les seves tasques. [^14]: El diagrama de Gantt és una eina gràfica que té per objectiu exposar el temps de dedicació previst per a diferents tasques o activitats al llarg d'un temps total determinat. [^15]: C++ Llenguatge de programació orientat a objectes. [^17]: FreeCAD és una aplicació lliure de disseny assistit per ordinador en tres dimensions, enginyeria assistida per ordinador, per a lassistència en enginyeria mecànica i el disseny delements mecànics. [^18]: Node-Js Llenguatge de programació que permet aixecar servidors entre altres coses. [^19]: React-Js Llenguatge de programació destinada al front-end. [^20]: MongoDB és una base de dades orientada a documents. [^25]: Markdown és un llenguatge de marcat lleuger.