APLICAȚIE PENTRU MONITORIZAREA STĂRII CONSTRUCȚIILOR HIDROENERGETICE [308674]

APLICAȚIE PENTRU MONITORIZAREA STĂRII CONSTRUCȚIILOR HIDROENERGETICE

PROIECT DE DIPLOMĂ

Autor: Hadade Sergiu Andrei

Conducător științific: Prof.dr.ing. Honoriu Vălean

Autor: Hadade Sergiu Andrei

Aplicație pentru monitorizarea stării construcțiilor hidroenergetice

Enunțul temei:

Conținutul proiectului: (enumerarea părților componente) [anonimizat], [anonimizat], Introducere, [anonimizat], Implementare, [anonimizat], Bibliografie, Anexe.

Locul documentației: [anonimizat]:

Data emiterii temei:

Data predării:

Semnătura autorului

Semnătura conducătorului științific

Declarație pe proprie răspundere privind

autenticitatea proiectului de diplomă

Subsemnatul(a) , legitimat cu seria nr. , CNP ,

autorul lucrării:

_________________

elaborată în vederea susținerii examenului de finalizare a [anonimizat]-Napoca,

[anonimizat], [anonimizat], și în bibliografie.

Declar, [anonimizat] a convențiilor internaționale privind drepturile de autor.

Declar, [anonimizat] a mai fost prezentată în fața unei alte comisii de examen de licență.

In cazul constatării ulterioare a [anonimizat], respectiv, anularea examenului de licență.

Data Prenume NUME

(semnătura)

SINTEZA

proiectului de diplomă cu titlul:

Aplicație pentru monitorizarea stării construcțiilor hidroenergetice

Autor: Hadade Sergiu Andrei

Conducător științific: Prof.dr.ing. Honoriu VĂLEAN

1. Cerințele temei:

[anonimizat] a [anonimizat], imagini, [anonimizat]-o interfata web.

2. Soluții alese:

Pentru crearea acestui site web am adoptat o [anonimizat]. Pentru partea de client am folosit limbajele HTML(HyperText Markup Language), CSS(Cascading Style Sheet) [anonimizat]. Pentru partea de server am optat pentru Node.js, o [anonimizat], [anonimizat].js.

3. Rezultate obținute:

[anonimizat] o aplicatie web care poate fi accesata la adresa http://damfu.utcluj.ro:8080/, [anonimizat]. [anonimizat](administrator sau utilizator), [anonimizat], in timp ce adminstratorul mai poate sa adauge utilizatori in sistem, sa ii stearga sau sa gestioneze anumite informatii din cadrul aplicatiei.

4. Testări și verificări:

Testarea aplicatiei s-a facut manual, prin testarea diferitelor scenarii pe care un utilizator le poate face, si folosind tool-ul Postman prin care s-au testat metodele de API ale serverului. Fiecare functionalitate a fost testata, verificandu-se daca se comporta conform asteptarilor.

5. Contribuții personale:

6. Surse de documentare:

Cărți de profil, materiale de pe internet: tutoriale , biblioteci etc.

Semnătura autorului

Semnătura conducătorului științific

Cuprins

1Introducere 2

1.1Context general 2

1.2Obiective 3

1.3Specificații 3

2Studiu bibliografic 5

2.1Arhitectura unei aplicatii web 5

2.2REST(Representation state transfer) 6

2.3Three-tier(trei niveluri) 7

2.4Stadiul actual al tehnologiilor software folosite 8

2.4.1HTML (HyperText Markup Language) 9

2.4.2CSS (Cascading Style Sheet) 10

2.4.3Bootstrap 11

2.4.4 JavaScript 12

2.4.5ReactJS 13

2.4.6Node.js 15

2.4.7MongoDB 17

2.4.8Linux 18

2.4.9Git 18

3Analiză și proiectare 21

3.1Etapa de analiză 21

3.1.1Descrierea proiectului: 21

3.1.2Funcționalități 22

3.1.3Diagrama cazurilor de utilizare: 23

3.2Etapa de proiectare 24

3.2.1Tehnologiile alese 24

3.2.2Diagrama de secventa 25

3.2.3Diagrama claselor 26

3.2.4Structura bazei de date 27

4Implementare 29

4.1Implementarea bazei de date 29

4.2Implementarea serverului 30

4.2.1Crearea structurii de bază a aplicației 35

4.3Implementare client 35

5Testare și validare 43

6Manual de Instalare si Utilizare 45

7Concluzii 47

8Bibliografie 48

Introducere

Context general

La nivelul construcțiilor hidroenergetice există o serie de normative care reglementează activitatea de urmărire a comportării acestora. Aceste normative pun la dispoziție personalului implicat în monitorizare criterii, exigente și acțiuni necesare a fi aplicate în toate etapele de viață ale unei construcții hidroenergetice: proiectare, execuție și administrare.

Cele mai importante tipuri de construcțiile hidroenergetice (CH) sunt:

Baraje cu nucleu de argilă,

Baraje de pământ,

Baraje în arc,

Baraje de greutate.

Indiferent de tipul barajului există mai multe elemente care sunt luate în calcul la urmărirea comportării unei construcții hidroenergetice. În principiu, urmărirea comportării construcțiilor hidroenergetice (UCCH), este o activitate sistematică cu rol de culegere, înregistrare și valorificare a unor date și informații obținute prin observații directe și măsurători specifice funcție de tipul construcției.

Scopul UCCH este acela de a furniza informații care să permită:

Evaluarea rapidă și obiectivă a stării de siguranță a construcțiilor,

Prevenirea accidentelor și avariilor la construcțiile hidroenergetice,

Sesizarea apariției necesității executării de lucrări de intervenții, reprații pentru buna exploatare a CH.

Urmărirea comportării construcțiilor hidrotehnice se desfășoară, în general, sub două forme: urmărire curentă și urmărire specială. Cele două forme de urmărire a comportării construcțiilor hidrotehnice se completează reciproc și depind de tipul CH.

Urmărirea curentă se aplică tuturor construcțiilor hidroenergetice. Aceasta este o activitate permanentă, ce începe încă din faza de execuție și se desfășoară neîntrerupt pe toată durată de viață a construcțiilor. UC este obligatorie pentru toate construcțiile, indiferent de tipul, categoria sau gradul de importantă. UC se organizează și execută de către deținătorul CH și se desfășoară pe baza unui program cu o frecvență constantă, adecvată situației în care este construcția și cu o frecvență sporită față de cea curentă în cazul apariției unor evenimente așteptate (viituri) sau neașteptate (seisme). Urmărirea curentă se sintetizează și interpretează în documentațiile periodice de analiză a comportării construcțiilor și în rapoarte tehnice anuale. Instrucțiunile de urmărire curentă sunt necesare operatorului în teren pentru obținerea, prin observare vizuală directă sau cu mijloace tehnice de măsurare simple a informațiilor privind starea construcțiilor și evoluția fenomenelor legate de starea acestora precum și a zonelor adiacente.

Urmărirea specială este o activitate de urmărire a comportării construcțiilor hidrotehnice care se efectuează cu mijloace tehnice de măsurare specializate, adaptate tipului de construcției hidroenergetice. US se realizează prin preluarea și interpretarea datelor din măsurători ale aparatele de măsură și control, privind modul de efectuare a unor parametri semnificativi. Urmărirea specială presupune:

Culegerea datelor de la rețelele de senzori existenți la nivelul construcției hidroenergetice, cum ar fi senzori de temperatură sau presiune, borne și repere de nivel, teledilatometre, pendule directe și inverse, etc.

Culegerea datelor din observații și inspecții vizuale directe,

Înregistrarea, transmiterea și stocarea în baze de date,

Prelucrarea și interpretarea primară (de bază) și secundară (aprofundată) a datelor culese,

Întocmirea rapoartelor de urmărire a comportării construcțiilor hidroenergetice inclusiv prin stabilirea de activități de întreținere și reparații ce trebuie realizate la nivelul CH.

Urmărirea comportării construcțiilor hidrotehnice se efectuează de obicei înainte sau după perioadele de viitură, înainte și după sezonul friguros, înainte și după apariția unor evenimente deosebite.

Activitatea de culegere a datelor din observații și inspecții vizuale directe este una dintre cele mai importante etape a procedurii de UCCH. Observațiile directe și inspecțiile vizuale asupra CH se fac periodic, funcție de tipul CH, și presupun parcurgerea din punct de vedere vizual realizată de un operator sau prin folosirea suplimentară a mijloacelor simple de măsură (echipamente foto-video) a tuturor părților construcției hidroenergetice vizibile și a zonelor adiacente (versanți, platouri, aval, amonte).

Obiective

Aplicația dezvoltată în cadrul lucrării de licență are ca obiectiv implementarea normativelor în domeniul urmăririi comportării construcțiilor hidroenergetice din perspectiva observațiilor directe, inspecțiilor vizuale și a stocării și interpretării datelor obținute de la rețeaua de senzori specifici fiecărei construcții.

Aplicația se dorește a fi un instrument util personalului angajat din CH care are atribuții în inspecțiile vizuale și care trebuie să întocmească rapoarte periodice în baza instrucțiunilor de urmărire curentă specifice tipului construcției hidroenergetice.

Specificații

Specificațiile aplicației sunt:

Aplicația trebuie să fie disponibilă on-line și să fie securizată prin utilizarea credențialelor de acces,

Aplicația va avea o interfață full responsive funcție de tipul echipamentului folosit (calculator, tabletă, telefon) luând în considerare diferite rezoluții și dimensiuni ale ecranului,

Funcția de administrare/personalizare a paginii principale permite modificarea aplicației funcție de construcția hidroenergetică la care face referire. Se are în vedere personalizarea din punct de vedere al unei scurte descrieri, a unei imagini și a localizării pe o hartă,

Funcția de administrare a utilizatorilor – permite vizualizarea, inserarea și ștergerea utilizatorilor. Se are în vedere existența a două roluri administrator și operator,

Funcția de vizualizare a rapoartelor de monitorizare – permite vizualizarea listei tuturor rapoartelor de inspecție vizuală. La selectarea unui raport de inspecție vizuală se vor vizualiza toate informațiile aferente raportului selectat,

Funcția de inserare a unui raport de inspecție vizuală – permite inserarea unui nou raport de inspecție vizuală. La inserarea unui nou raport se vor stoca:

Descrierea raportului,

Data la care s-a făcut raportul,

Zona de urmărire (dintr-o listă predefinită),

Imaginile reprezentative încărcate în stare brută,

Fișiere multimedia audio video,

Documente PDF – reprezentând alte rapoarte specifice procesului de monitorizare, funcție de categoria construcției hidroenergetice,

Locația – harta locației punctului de observare.

Funcția de editare a unui raport de inspecție vizuală – permite editarea sau actualizarea informațiilor aferente raportului de inspecție vizuală,

Funcția de căutare – permite căutarea în baza de date de inspecții vizuale după diverse cuvinte cheie utilizate în câmpul descrierea raportului sau zona de urmărire.

Studiu bibliografic

Arhitectura unei aplicatii web

Arhitectura unei aplicații defineste modelul prin care componenetele aplicatilor web interactioneaza intre ele. Componentele principale ale unei aplicatii sunt partea de client, care reprezinta functionalitatile cu care un utilizator interactioneaza in mod direct printr-o interfata, respectiv partea de server care lucreaza in principal cu o baza de date unde sunt stocate informatile.

Figura 1: Arhitectura unei aplicatii web []

Arhitectura unei aplicații web, dupa cum se vede in figura de mai sus, include browser-ul, serviciul web si rețeaua. Atunci cand un utilizator introduce o anumita adresa URL, browser-ul va face o cerere spre server si va solicita o anumita pagina de pe acesta, iar serverul raspunde prin trimiterea acelor fisiere necesare pentru a afisa pagina solicitata. O pagină web este un document scris în limbajul HTML,care este accesibil prin Internet sau altă rețea utilizând un browser de Internet si poate contine text, animatii grafice sau hyperlink-uri către alte pagini web sau fișiere.

Modul de realizare al unei aplicații este specificat în cerințele de business, unde sunt definite functionalitatile aplicatiei, relațiile dintre pachetele aplicației si bazele de date. Astfel, cu o arhitectură concepută bine se scad riscurile de erori de integrare a modulelor sistemului. Arhitectura unei aplicații ar trebui să fie bine structurată, să susțină încapsularea/ascunderea aspectelor din interiorul modulelor, să urmarească performanța sistemului și modul în care acesta se poate extinde și evolua. O arhitectura software poate contine unul sau mai multe stiluri arhitecturale iar acestea la randul lor pot avea unul sau mai multe modele arhitecturale.

Un stil arhitectural [] este un set de principii care modeleaza o aplicatie, aratand cum ar trebuie organizat codul. Este cel mai inalt nivel de granularitate si specifica modulele de nivel inalt ale aplicatiei si modul in care acestea interactioneaza intr ele. Exemple de stiluri arhitecturale sunt: Client-Server, Monolithic application, Microservices, Representation state transfer (REST), etc.

Pe de alta parte, un model arhitectural ofera o solutie data la o problema anume, fiind si un mod de a implementa un stil arhitectural. Exemple de modele arhitecturale sunt: Model-View-Cotroller(MVC), Domain Driven Design(DDD), Three-tier, etc. Aplicatia dezvoltata de mine este o aplicatie monolit,de tip REST, cu model arhitectural three-tier.

REST(Representation state transfer)

REST [] este un stil arhitectural bazat pe un set de principii care descriu modul in care sunt definite si utilizate resuresele intr-o retea, fiind introdus în 2000 de către Roy Fielding. Acesta este cel mai folosit stil de dezvoltare al serviciilor Web, fiind o alternativa la SOAP(Simple Object Acces Protocol). Numele sau este un acronim pentru REpresentational State Transfer. Arhitectura nu e concepută pentru un anume protocol sau standard, însă HTTP, XML și URL, standarde și protocoale specifice Web-ului, se pliază foarte bine pe aceasta.

Principala sa caracterstica este orientarea spre resurse, modul în care acestea sunt reprezentate și accesate. Fiecare informatie este privita ca o resursă pe care consumatorul o solicită, iar producătorul o oferă. Acest mecanism de tip cerere-răspuns este realizat in general prin intermediul protocolului HTTP. Fiecare resursă sau colecție de resurse poate fi identificată și accesată în mod unic prin URL, iar acțiunea pe care serverul o va executa asupra acesteia este descrisă de metoda HTTP. Url-ul are forma unei ierarhii de directoare, fiind astfel ușor de citit și interpretat de către om. Fiindca sunt folosite metode HTTP, programatorul nu are libertatea de a extinde api-urile și de a creea alte metode, fiind constrâns să foloseasca modelul și funcționalitățile aplicației expus de verbele HTTP: GET, POST, PUT,DELETE si PATCH.

Astfel, o arhitectura se considera a fi REST daca indeplineste urmatoarele conditii:

Starea si functionalitatile resurselor sunt impartite in mod distribuit

Fiecare resursa poate fi adresata in mod unic folosindu-se un set de metode HTTP

Protoclul este de tip client-server, pe nilvele si suporta caching-ul

Exista un standard [] care spune cum ar trebui folosite metodele HTTP, echivalente metodelor de CRUD(Create, Read, Update, Delete) si anume:

POST – folosita atunci cand o resursa urmeaza a fi creata

GET – folosita pentru citirea uneia sau mai multor resurse

PUT – folosita pentru actualizarea sau inlocuirea unei resurse

DELETE – folosita pentru stergerea unei resurse

PATCH – folosita pentru modificarea partiala a unei resurse

Un exemplu de URL care indeplineste conditile REST arata de felul urmator: http://www.example.com/customers/1/orders/2 , la care se adauga metoda HTTP, unde www.example.com este numele domeniului, "customers" este resursa parinte identificat cu identificatorul "1" iar "orders" reprezinta resursele copil pentru "customers", identificata prin identificatorul "2". Astfel, in functie de metoda folosita, ne putem da seama daca vrem sa citim resursa(GET), sa o stergem(DELETE) sau sa o actulizam, iar daca vrem sa creem o noua resursa de tip "order"(POST) vom scrie adresa URL fara ca sa aiba un identificator la sfarsit, fiind vorba despre o resursa care nu exista in momentul de fata. In general, este de preferat ca resursele sa fie reprezentate prin pluralul acestora.

Astfel, putem vedea cat de usor este sa interpretam o cerere venita de la un client, respectand modelul REST.

Three-tier(trei niveluri)

O arhitectura pe trei niveluri [] este o arhitecura de tip client-server, unde logica procesului, adica accesul la date, stocarea datelor si interfata cu utilizatorul sunt dezvoltate si mentinute ca module independente pe platforme separate. Apar astfel trei niveluri, acestea fiind: nivelul de prezentare, nivelul aplicatiei si nivelul de date.

Figura Y – Arhitectura de tip three-tier []

Nivelul de prezentare – reprezinta partea de front-end, adica acea parte cu care utilizatorul lucreaza in mod direct, constand in interfata utilizatorului. Aceasta interfata este de obicei una grafica, accesibila prin intermediul unui browser web si afisaza continutul si informatile necesare sper un utilizator final. Acest nivel este in general construit pe tehnologii web cum ar fi: HTML, CSS respectiv JavaScript si comunica cu alte niveluri prin apeluri API(Application Programming Interface).

Nivelul aplicatiei – se mai numeste si nivelul intermediar sau logic si contine logica functionala care conduce capabilitatile de baza ale aplicatiei. Poate fi scris in limbaje de programare precum: Java, C#, Phyton, NodeJs, etc.

Nivelul de date – acesta cuprinde baza de date sau sistemul de stocare a datelor si stratul de acces la date. Datele din acest nivel sunt pastrate independent de serverele de aplicatii sau logica de business. Exemple de astfel de sisteme sunt: MySQL, Microsoft SQL Server, MongoDB.

Avantajele folosirii unui astfel de tip arhitectural sunt:

Oricare din aceste trei niveluri poate fi ușor inlocuit fără ca sa fie afectata funcționalitatea sistemului.

Separarea aplicației în mai multe niveluri face utilă și ușoară refolosirea componentelor.

Scalabilitate – fiind impartit, sistemul poate fi mai usor extins si dezolvatat.

Integritatea datelor – nivelul de logică previne ca datelor invalide sa fie inserate în baza de date, aplicand o logica suplimentare acestora.

Deși această arhitectură prezintă numeroase avantaje, există și unele dezavantaje care ar trebui sa fie luate în considerare:

Performanța aplicației poate fi afectată datorită hardware-ului sau lățimii de bandă

Sunt necesare costuri mai mari pentru mențirea și publicarea aplicațiilor

Stadiul actual al tehnologiilor software folosite

Pentru realizarea acestei aplicatii web am folosit tehnologii cunoscute relativ noi, cu scopul de a obtine un produs performant, usor de intretinut si standardizat.

Tehnologiile folosit sunt:

HTML (HyperText Markup Language): este un limbaj de marcare.

CSS (Cascading Style Sheet): este un standard cu care putem formata un document de tip HTML.

Bootstrap: framework web gratuit și open-source, folosit pentru web design, ce ajută la îmbunătățirea aspectului paginilor.

JavaScript: este un limbaj de programare folosit atat pentru partea de client cat si pentru server.

ReactJS: este o librarie de JavaScript folosita pentru construirea de interfete pentru utilizator

Node.js: este un framework bazat pe JavaScript care asigura partea de server.

MongoDB: este o baza de date de tip NoSQL (non-relationala) orientata pe documente.

Linux: sistem de operare open-source

Git: este un sistem de versionare al codului.

Programe auxiliare utilizate:

Visual Studio Code: este editorul de cod folosit pentru realizarea codului sursa

GitKraken: este o interfata grafica de Git

Postman: este mediu de dezvoltare prin intermediul caruia se poate testa API-ul unei aplicatii web.

HTML (HyperText Markup Language)

Hyper Text Markup Language este cel mai cunoscut limbaj de pe piață la ora actuală în ceea ce privește dezvoltarea paginilor web statice care pot fi afișate într-un browser. Impreuna cu CSS și JavaScript formează tehnologiile de bază pentru World Wide Web. Scopul limbajului este acela de a afișa diferite informații, paragrafe sau fonturi, pe o pagina web, astfel încât acestea să poata fi interpretate de către un utilizator.

Paginile HTML au extensia “.html” și sunt alcătuite din tag-uri sau etichete. Tag-urile stau la baza creării paginilor web și sunt cele care separă textul normal de cod de codul HTML. Aceste tag-uri și etichete sunt scrise între paranteze precum <tag> pentru deschiderea tag-urilor respectiv </tag> pentru închiderea tag-urilor .

Codul HTML este utilizat de către paginile web in următorul fel: Browserele web citesc codul HTML conținut în paginile Web, dar nu afișează marcajul HTML pentru căutătorul Web, în schimb, este tradusă codificarea HTML in conținut lizibil.

Acest limbaj poate conține blocurile de bază ale unei pagini web: titlul, subtitlurile, paragrafele, textul corporal și legăturile. Putem, de asemenea, să desemnam aspectul de bază al textului, titlurilor și legăturilor în interiorul codului HTML, utilizând diverse etichete. Dacă dorim să punem ceva într-o listă, putem face și asta. Atât cele ordonate cât și cele neordonate, sunt disponibile doar cu câteva etichete simple.

Conținutul HTML poate fi transmis prin aceleași mijloace ca orice alt fișier. Cu toate acestea, de cele mai multe ori conținutul HTML este transmis prin HTTP sau prin email. World Wide Web este compusă in special din documente HTML transmise de la serverul web la browsere folosind protocolul HTTP (Hypertext Transfer Protocol). Pentru a permite browserului web să știe cum să se ocupe de fiecare document primit, alte informații sunt transmise împreună cu documentul. Aceste sunt numite meta date care includ, de obicei, tipul MIME (Multipurpose Internet Mail Extensions), de exemplu Text / html și codificarea caracterelor.

Cu toate că învățarea limbajului HTML nu este dificilă, și pentru a putea crea o pagină web în acest limbaj nu necesită cunoștințe foarte avansate, crearea de pagini profesioniste necesită o oarecare experiență. Un design bun al site-ului probabil este jumătate calitatea codului și jumătate talent, deoarece acest limbaj, pentru rezultate înalte trebuie îmbinat cu o imaginație și o afinitate pe măsura.

Cea mai noua versiune de HTML este HTML 5 . Aceasta este o versiune care încă se mai dezvoltă. Avantajul principal al HTML5 este ca atat componenta de audio cat si cea de video constituie un element al acestei versiuni.

CSS (Cascading Style Sheet)

CSS [] este un limbaj de stilizare a elementelor sau a tag-urilor unui document scris în HTML. Acesta a fost destinat să permită separarea conținutul și structurii codului de designul vizual. Această separare a structurii și a stilului permite ca HTML să efectueze mai mult din funcția pe care se baza inițial – marcarea conținutului, fără a fi nevoie să ne facem griji cu privire la designul și aspectul paginii în sine.

Termenul de CSS este o abreviere de la Cascading Style Sheet, care se poate traduce prin foi de stiluri în cascadă.

Cuvântul "foaie de stil" se referă la documentul în sine (cum ar fi HTML, fișierele CSS sunt într-adevăr doar documente text care pot fi editate cu o varietate de programe).

Cascada este partea specială a termenului "foaie stil în cascadă". O foaie de stil web are rolul de a cascada printr-o serie de foi de stil, adica fiecare pagină Web este afectată de cel puțin o foaie de stil, chiar dacă designerul web nu aplică nici un fel de stiluri. De exemplu, în mod prestabilit, hyperlink-urile sunt stiluri în albastru și sunt subliniate. Aceste stiluri provin dintr-o foaie de stil implicită a browserului web. Dacă designerul web furnizează alte instrucțiuni, browserul va trebui să știe ce instrucțiuni au prioritate.

CSS este unul dintre cele mai puternice instrumente pe care un designer de web le poate învăța, deoarece cu ele se poate modifica întregul aspect vizual al unui site Web. Foile de stil bine redactate pot fi actualizate rapid și permit site-urilor să schimbe ceea ce este prioritar fără modificări ale marcajului HTML .

Limbajul CSS poate fi aplicat asupra unui cod HTML in trei feluri:

CSS inline (langa text)

CSS intern (la inceputul fisierului)

CSS extern (intr-un fisier separat)

CSS inline daca este definit in interiorul codului HTML, in componenta care se doreste a fi stilizate, folosind atributul style. Folosirea lui se recomanda pentru proiecte de mici dimensiuni.

CSS intern daca este definit la inceputul fiecarei pagini HTML , inainte de orice alt continut. Are avantajul de a fi usor de gasit si de modificat in pagina.

CSS extern daca este definit in fisiere diferite de codul HTML . Toate paginile care includ aceste fisiere pot folosi atributele CSS din ele, fara a fi nevoie de a le rescrie in fiecare pagina web.

La ora actuală, toate browser-ele moderne suporta stilurile CSS de nivel 1, stilurile CSS de nivel 2, și multe aspecte din nivelul al treilea de stiluri. CSS continuă să evolueze fiind introduse tot mai multe stiluri noi.

Bootstrap

Bootstrap a fost dezvoltat de catre doi programatori de la Twitter,10 fiind un mod de a simplifica proiectarea aspectului paginilor. Este un framework open-source bazat pe HTML, CSS si JavaScript. Practic este o colecție de coduri reutilizabile, scrise în aceste limbaje, oferindu un punct de plecare în creearea de site-uri web, și făcând dezvoltarea lor mai ușoară.

Câteva avantajele ale utilizării Bootstrap sunt:

Proiectare de tip responsive(receptive): se pot crea cu ușurință modele sau sabloane receptive. Acestea fac ca o pagina sa se ajusteze in mod automat, aparand adecvat in functie de rezoluția ecranului de pe diferite dispozitive, fără ca marcajul sa fie modificat.

Economisire a timpului: se poate economisi timp și efort folosind șabloanele si clasele predefinite de catre Boostrap

Este ușor de utilizat: avand cunoștințe de bază despre HTML și CSS se poate începe usor dezvoltarea folosind Bootstrap.

Compatibilitate cu browserele: Bootstrap a fost creat în funcție de browsere fiind compatibil cu toate browserele moderne, precum: Google Chrome, Mozilla Firefox, Internet Explorer, Safari sau Opera.

Asadar, Bootstrap este un instrument prin intermediul caruia un dezvoltator software poate creea cu ușurință pagini web, cu un aspect ingrijit si receptiv. Bootstrap este foarte popular, fiind lansate mai multe versiuni ale sale, ultima dintre ele fiind versiunea 4.

JavaScript

Este un limbaj de programare folosit in dezvoltarea paginilor web, pentru partea de front-end []. Majoritatea funcționalităților cu care se interacționeaza pe un site web sunt scrise în acest limbaj. Înainte de JavaScript, site-urile erau alcatuite din pagini HTML statice cu formatare și făra interactivitate, JavaScript ajungand să schimbe acest lucru, dinamizand aplicatile web prin functionalitatile pe care le ofera. Astăzi, acest limbaj este folosit pentru a se construi partea de client cu care utilizatorul interacționează.

In momentul de fata, JavaScript este intr-o continua dezvoltare, detinand monopolul in ceea ce priveste partea de front-end, fiind cel mai popular limbaj de programare din lume. Aceasta tehnologie include gamă largă de alte tehnologii, care au fost simplificate, susținute și dezvoltate pe baza specificațiilor sale. Există un mediu întreg de programare bazat pe JavaScript precum: Node.js, care asigura partea de server, cu tehnologii precum Express.JS sau Koa.js; arhitecturi pentru front-end precum React, AngularJS sau Vue.js sau librarii precum jQuery.

Împreună cu HTML și CSS, JavaScript este esential pentru dezvoltarea front-endului in aplicatii web. Majoritatea site-urile populare, precum Facebook, Gmail , Youtube se bazeaza pe JavaScript pentru a crea pagini web intercative si pentru afisarea de continut dinamic utilizatorilor. Astfel, dacă HTML contruieste conținutul unei pagini și CSS se ocupa de aspectul acesteia, JavaScript se ocupa de functionalitatea unei pagini.

Avantajele de care dispune JavaScript pot fi urmatoarele:

Este performant, fiind bine optimizat mai ales datorita faptului ca lucreaza pe motorul JavaScript V8.

Este asincron, adica lucreaza in paralel, ceea ce il face foarte scalabil.

Foloseste tipul JSON pentru structura datelor, care este rapid si usor de folosit

Este incarcat pe partea de client, astfel codul este executat pe procesorul utilizatorului, usurand astfel munca serverului.

Acestea toate fac ca JavaScript sa fie un limbaj de programare indispensabil domeniului IT, care se anunta ca si in viitor-ul apropiat sa ramana astfel.

ReactJS

Este o librarie JavaScript declarativa, eficienta si flexibila pentru realizarea componentelor UI(User Interface) reutilizabile intretinuta de Facebook si de o comunitate de dezoltatori individuali []. Prima versiune React a fost lansata in 2015 de catre cei de la Facebook, acestia folosind deja React Native pentru aplicatii mobile. Printre companiile care mai folosesc React se numara si Apple, PayPal sau Netflix.

Daca luam exemplul unui model clasic MVC(Model View COntroller), React este acea librarie care se ocupa de partea de V (vedere) din MVC.

Principalele avantaje al librariei React constau in faputul ofera performante ridicate, este usor de invatat deoarece se axeaza doar pe o particularitate si anume redarea componentelor , iar cu ajutorul sintaxei speciale denumita JSX (JavaScript syntax extension) permite scrierea codului HTML si JavaScript impreuna pentru realizarea mai rapida a componentelor.

De asemenea, React este o alegere foarte buna daca se doreste realizarea unei aplicatii web de tip SPA (Single Page Aplication). O aplicatie de te tip SPA (aplicatie pe o singura pagina) este o aplicatie sau un site web care interactioneaza cu utilizatorul prin rescrierea dinamica a paginii curente, fara sa mai incarce o pagina noua dintr-un server. Aceasta abordare evita intreruperea experientei utilizatorului intre pagini succesive ale aplicatiei web, facand ca aceasta sa se comporte asemanator cu o aplicatie desktop.

Principalele caracterisitici React sunt:

JSX – JavaScript syntax extension, care desi nu este obligatorie, este recomandata. Acesta sintaxa a aparut datorita faptului ca React imbratisaza ideea ca logica de randare a continutului este legata de o alta logica a UI si anume modul in care sunt gestionate evenimentele si modul in care starea se schimba in timp iar datele sunt pregatite pentru afisare.

Avantaje:

Este mai rapid pentru ca efectueaza optimizarea in timp ce se compileaza codul de catre JavaScript.

Este mai sigur datorita faptului ca majoritatea erorilor pot fi prinse la compilare.

Face ca scrierea sabloanelor sa fie facuta mai repede si mai usor, daca utimlizatorul este familiarizat cu HTML.

Componentele – in React, totul se bazeaza pe componente. O componenta este o functie care primeste ca intrari niste proprietati (props) si returneaza elemente care descriu ceea ce ar trebui sa apara pe ecran.

Există două tipuri de date "model" în React: props si state. Props reprezinta modul in care componentele interactioneaza unele cu altele, transmitand anumite proprietati de la componenta parinta spre copil. In general, acestea sunt constante, adica nu isi schimba starea. State este folosit pentru ca o componenta sa poate tine evidenta unei informatii pe care o reda. Aceasta informatie isi poate schimba valoarea prin functia "setState" de la React, fapt care rezulta in redarea componentei cu noua valoare a informatiei. Props-urile sunt folosite pentru a transmite date de la parinte la copil, sau de catre o componenta in sine si sunt imutbile, prin urmare nu pot fi schimbate, in timp ce state-urile pot fi schimbate si sunt folosite pentru a reda starea actualizata a unei informatii.

Un aspect interesant al modului in care se comporta o componenta este faptul; ca aceasta ruleaza de fiecare data cand a fost actualizate una din cele doua tiputi de proprietati, state sau props. Aceasta inseamna ca de fiecare data cand se actualizaea state sau props se actualizaeaza si vederea componentei logice a aplicatiei petrnu a afisa noile date utilizatorului.

O componenta are de asemena un ciclu de viata, reprezentat de mai multe etape: initializare, montare, updatare si demontare.

Fig F – Ciclul de viata al unei componente []

Etapa de initializare: in aceasta faza, componenta React stabileste starile initiale pentru state si props, daca exista, printr-un costructor.

Etapa de montare: in aceasta faza, componenta este pregatita sa monteze in browser DOM-ul(Document Object Model). Printr-o metoda pe care o pune la dispozitie, denumita "componentWillMount" se poate executa tot ceea ce se doreste sa fie facut inainte de montarea componetei. Tot in aceasta etapa se monteaza componenta in browser, urmand ca aceasta sa fie afisata.

Etapa de actualizare: incepe cand componenta a aparut in browser. Aceasta poate fi actualizata in doua moduri, prin trimiterea unor elemente noi(props) sau prin actualizarea starii(state).

Etapa de demontare: in aceasta etapa, componenta nu mai este necesara si este stearsa din DOM.

Fluxul de date unidirectional realizat prin legarea datelor intr-un singur sens, fapt care rezulta intr-o performanta ridicata si care face ca aplicatia React sa fie mai usor de depanat.

Node.js

Dezvoltat in anul 2009, NodeJS [] foloseste motorul JavaScript V8 si poate rula pe diverse platforme ca Windows, MacOS sau Linux.

Este un framework open-source pentru implementarea unui server prin intermediul limbajului de programare JavaScript. Acesta extinde API-ul JavaScript pentru a oferi funcționalități pentru servere. Pentru a extinde API-ul de bază folosit de NodeJS se poate utiliza sistemul de module CommonJS sau RequireJS.

Scopul acestui tip de server este acela de a oferi o modalitate ușoară și sigură de a construi aplicații scalabile și performante în JavaScript.

Obiectivele respective sunt realizate datorita arhitecturii NodeJS:

single thread : utilizează un fir unic pentru a rula spre deosebire de servere precum PHP, ASP.NET sau Java care utilizeaza fire multiple , astfel ca fiecare cerere de la client produce un nou fir. Folosirea unui singur fir de executie conduce la evitarea comutării contextului procesorului, fiind astfel eficient din punct de vedere al memoriei.

Event Loop : (sau Buclă de evenimente) este scris în limajul C ++ folosind libraria Libuv conceputa de Marc Lehman. Bucla evenimentului utilizează epoll sau kqueue pentru mecanismul de notificare al evenimentelor scalabile.

Non blocking I/O : (sau fără blocare) prin aceasta NodeJS rezolva pierderea de timp a procesorului, prin așteptarea unui răspuns de intrare sau ieșire (bază de date, sistem de fișiere, serviciu web, …), prin intermediul funcțiilor de intrare/ieșire asincrone, furnizate de libraria Libuv.

Ca server web, NodeJS poate sa genereze continului dinamic al unei pagini HTML, sa creeze, sa deschida, sa citeasca, sa scrie sau sa stearga fisiere de pe server precum si sa adaunge, sa stearga sau sa modifice date dintr-o baza de date.

De asemena, acesta are un set de module implicite, care usureaza procesul de dezvoltare al unui server. Dintre acestea amintesc cateva pe care le-am folosit in dezvoltarea aplicatiei:

HTTP – modul care permite NodeJS să faca transferul de date prin protocolul HTTP (Hyper Text Transfer Protocol). Acesta poate sa creeze un server HTTP care ascultă porturile serverului și trimite un răspuns clientului.

path – modul care permite NodeJS sa lucreze cu directoare și cu fișiere de pe un sistem.

fs – modul care oferă o modalitate de gestionare si lucru cu fișierele de pe server.

Pe langa modulele implicite NodeJS pune la dispozitie managerul de pachete npm [] care gazduieste mii de pachete care pot fi descarcate si utilizate de catre dezvoltator. Dintre aceste pachete amintesc:

Multer – modul folosit pentru manipularea datelor de tip multipart, utilizat in principal pentru incarcarea fisierelor.

Mime-types – folosit pentru detectarea tipului unui anumit fisier

Express – framework NodeJS care ofera un set de instrumente de baza pentru creare respectiv rutarea serverului web sau gestionarea unei sesiuni web.

Mongoose – framework ODM(Object Document Mapper) care oferta o solutie directa si simpla pentru gestionarea rapida a schemelor unei baze de date MongoDB.

In concluzie, NodeJS este alegerea perfecta in cazul in care se doreste realizarea unei aplicatii web, datorita faptului ca ofera posibilitatea de a programa asincron, fiind astfel mai performant decat alte limbaje precum PHP, iar prin framework-uri precum Express un server NodeJS poate fi construit rapid si simplu.

MongoDB

Dezolvatata de compania MongoDB Inc, MongoDB [] este o baza de date orientata pe document open-source, de tip No-SQL (baza de date non-relationala). Aceasta foloseste documente de tip JSON, fiind astfel foarte convenabil sa fie utilizata alaturi de un server de tip NodeJS, bazat pe JavaScript.

O baza de date de tip No-SQL ofera un mecanism de stocare si recuperare a datelor care sunt modelate altfel decat intr-o baza de date relationala. Astfel, acest tip de baza de date ofera o flexibiliatate mai mare, o diferenta majora fata de bazele de date relationale reprezentandu-l faptul ca lipsesc join-urile, fiind astfel necesar sa se efectueze mai multe interogari si sa se faca legaturile intre tabele manual. De asemenea, scalarea unei baze de date No-SQL se face orizontal, fata de o baza de date SQL unde scalarea se face verical. Intr-o baza de date relationala avem tabele, randuri si coloane in timp ce intr-o baza de date non-relationala avem documente, colectii si campuri. Principalul avantaj pe care il ofera No-SQL este faptul ca poate gestiona volume mari de date, mai ales ca astazi se vorbeste din ce in ce mai mult despre conceptul de "Big Data".

JSON(JavaScript Object Notation) este un format simplu pentru structurarea de date []. Este usor de citit si de scris de catre oameni, si usor de citit si generat de catre masini. Este modul prin care informatia este stocata intr-o baza de date non-relationala precum MongoDB.

Un obiect de tip JSON stocat intr-o baza de date MongoDB arata in felul urmator:

{

"_id" : ObjectId("5b17fe866311d306d2287975"),

"date" : "11.06.2018",

"description": "This is a sample."

}

Cateva dintre beneficile si punctele tari ale MongoDB sunt:

Viteza: pentru interogari simple, ofera performante bune deoarece datele sunt stocate intr-un singur document, eliminand operatile de conectare

Scalabilitate: find scalabila pe orizontala, se poate reduce volumul de lucru prin cresterea numarului de servere in loc de a imbunatatii performantele masinii pe care se afla baza de date.

Flexibilitate: este usor de ultilizat atat pentru administratori cat si pentru dezvoltatori, oferind posibilitatea de a schimba schema de date fara a modifica datele existente in baza de date.

Suport: fiind o platforma open-source aflata intr-o continua expansiune si utilizata de companii precum IBM, Twitter, eBay, etc MongoDB are parte un suport notabil.

Alte tehnologii conscarate care se bazeaza pe No-Sql sunt CouchDB si Redis.

Linux

Este un sistem de operare open-source, bazat de UNIX, fiind principala alternativa la Windows []. Acesta a fost creat cu scopul de a oferi un sistem de operare care sa nu aiba un proprietar anume si la dezvoltarea caruia sa poata contribui oricine. Principalele avantaje ale acestui sistem de operare sunt:

Utilizarea sa este gratuita

Are un suport bogat, fiind foarte bine documentat

Ofera o securitate sporita, fiind foarte rezistent la virusi si aplicatii malitioase de tip software

Este flexibil, fiind foarte configurabil si usor de personalizat

Ruleaza pe o gama larga de masini

Este fiabil

De asemenea, astazi sunt foarte multe distributii bazate pe Linux, dintre care cateva dintre cele mai cunoscute sunt: CentoOS, Debian, Ubuntu, Linux Mint, Manjaro. Pentru dezvoltarea aplicatiei am ales sa folosesc distributia Ubuntu 16.04.

Git

Este un sistem de control al versiunilor [] open-source proictat sa urmareasca si sa gestioneze modificarile facute in fisierele de pe computer in randul mai multor persoane, inregistrand versiunile fisierelor, permitand astfel mai multor utilizatori sa lucreze in paralel pe aceleasi fisiere, fara ca informatia sa fie alterata sau sa se piarda. Este folosit atat in proiecte mici, cat si in proiecte mari, cu viteza si eficienta.

Git-ul ii ajuta pe utilizatori sa isi salveze munca, fiecare salvare reprezentand o versiune a proiectului. Pentru aceasta functie se foloseste termenul denumit "commit". Daca un fisier nu se schimba de la un commit la altul, Git va folosi fisierul stocat anterior. De asemnea, utilizatorului i se permite sa revina la un commit anterior, sau sa isi imparta proiectul in mai multe ramuri, sau "brach-uri", pentru a izola unule modificari de altele. La final, acestea ramuri se pot uni in ramura principala.

Pentru lucrul cu acest instrument, am folosit si o interfata grafica, anume GitKraken, pentru a vizualiza mai usor versiunile aplicatiei, precum si comenzile din temrinal puse la indema de Git. Pasii principali pentru folosirea Git din terminalul de Linux sunt urmatorii:

sudo apt-get install git – pentru instalare Git

git clone path_to_project – pentru clonarea proiectului pe unitatea locala

git status – pentru vizualizarea starii momentane a proiectului

git -b "new brach" – pentru crearea unui nou branch

git checkout <branch>- pentru a trece de pe un branch pe altul

git pull – pentru a lua ultimele modificari de pe un branch

git add . – pentru adaugarea modificarilor

git commit –message "Commit mesage" – pentru salvarea modificarilor

git merge <branch> – pentru a contopi un branch intr-altul

git push origin – pentru a salva modificarile pe un server la distanta(remote).

De asemenea, se poate folosi si un instrument cu interfata grafica, precum GitKraken, dupa cum se poate vedea in figura urmatoare:

Figura Q – Interfata grafica GitKraken

Alte sisteme de versionare a codului mai cunoscute sunt SVN sau Mercurial.

Analiză și proiectare

Analiza si proiectarea unei aplicatii software includ toate specificatile unui proiect care vor fi folosite la implementarea acestuia. In functile de cerintele pe care trebuie sa le indeplineasca aplicatia, se stabilesc anumite specificatii care se detaliaza, astfel ca in etpa de implmementare dezvoltatorul sa aiba o idee clara a ceea ce trebuie sa implementeze si tehnologile sau instrumentele pe care sa le foloseasca in acest proces, revenindu-i doar ceea ce tine strict de partea tehnica, care tine in principal de scrierea codului.

Etapa de analiza consta in intelegerea problemei sau cerintei care trebuie rezolvata si cum ar trebui sa arate solutia oferita, in timp ce etapa de proiectare consta in modul in care sa fie oferita solutia, dupa ce s-a facut analiza si s-au inteles cerintele proiectului.

Etapa de analiză

În această etapă se defineste in primul rand in ce consta aplicatia si ce ar trebui sa ii permita clientului sa faca. Apoi se specifica toate cerintele pe care proiectul trebuie sa le indeplineasca.

Descrierea proiectului:

Aplicația are ca scop implementarea normativelor în domeniul urmăririi comportării construcțiilor hidroenergetice din perspectiva observațiilor directe, inspecțiilor vizuale și a stocării și interpretării datelor obținute de la rețeaua de senzori specifici fiecărei construcții.

Pe baza acestor interpretari, un utilizator al aplicatiei poate genera niste rapoarte de obervare, care vor include, pe langa data cand a fost creat, o descriere si o localizare, si posibiliatea de a insera poze de pe dispozitivul cu care acceseaza sie-ul, fisiere text de tip .pdf sau video-uri. Aceste rapoarte sunt salvate pe serverul aplicatiei, utilizatorul putand sa aduca modificari ulterioare raportului, sau sa ii ataseze acestuia imagini, inregistrari audio sau video , ori alte fisiere text. In fine, fiecare raport poate fi gestionat mai apoi de catre administratorul site-ului, care va mai avea la dispozitie si o pagina de admistrare a acestei aplicatii web, care sa permita personalizarea paginii de prezentare a site-ului, gestionarea celorlalti utilizatori sau alte functionalitati care tin de crearea sau interpretarea rapoartelor.

Funcționalități

In functie de cerintele care trebuiesc indeplinite, sa deterimina functionalitatile pe care le avea aplicatia. Functionalitatea reprezinta toate actiunile pe care un utilizator le poate intrepinde intr-o aplicatie. Astfel, in functie de tipul utilizatorului, functionalitatile aplicatiei sunt urmatoarele:

Pentru un utilizator neautentificat:

Posibilitatea de a accesa pagina de prezentare

Posibilitatea de a se loga in sistem

Pentru un utilizator autentificat cu rol de "user"

Accesarea paginii de prezentare

Accesare pagina de "Raport baraj"

Vizualizeaza toate rapoartele sale

Adauga un nou raport

Sterge un raport existent

Acceseaza un raport

Modifica descrierea unui raport

Modifica tipul constructiei hidroenergetice

Incarca o imagine raportului

Sterge o imagine din raport

Incarca o inregistrare video raportului

Sterge o inregistrare video

Atasaza un document de tip pdf raportului

Sterge un document pdf

Modifica descrierea unui document pdf

Vizualizeaza documentul in browser

Descarca documentul in browser

Modifica locatia constructiei hidroenergetice

Posibilitatea de a cauta in rapoarte dupa anumite cuvinte cheie

Posibilitatea delogarii din sistem

Pentru un utilizator autentificat cu rol de "admin"

Pe langa functionalitatile pe care le are un utilizator cu rol de "user", acesta mai are urmatoarele:

Accesare pagina de "Administrare "

Adauga un utilizator nou in sistem

Elimina un utilizator din sistem

Editeaza pagina de prezentare a site-ului

Editare titlu si descriere

Adaugare/stergere imagine

Adauga un nou tip de constructie hidroenergetica

Sterge un tip de constructie hideroenrgetica existent

In pagina de "Raport baraj "

Vizualizeaza rapoartele tuturor utilizatorilor

Diagrama cazurilor de utilizare:

Este este o reprezentare a interacțiunii unui utilizator(sau actor) cu sistemul si arată relația dintre utilizator și diferitele cazuri de utilizare în care este implicat acesta, in cadrul aplicatiei. O diagramă a cazurilor de utilizare poate identifica diferitele tipuri de utilizatori ai unui sistem și diferitele cazuri de utilizare ale sale. Pe baza acestei diagrame dezvoltatorul unei aplicatii soft isi poate contura ceea ce presupune proiectul dupa care isi poate imparti sarcinile.

Functionalitatile descrise in subcapitolul precedent sunt reprezentate in diagrama cazurilor de utilizare din figura urmatoare:

Etapa de proiectare

Această etapă cuprinde detalile referitoare la partea de proiectare a aplicatiei, pe baza specificatilor obtinute in etapa de analiza a proiectului. Aici voi prezenta solutile alese precum si motivarea acestora, anumite diagrame reprezentative si structura bazei de date.

Tehnologiile alese

Dupa cum am prezentant si in capitolul cu studiul biografic, pentru realizarea acestei aplicatii am ales sa folosesc un stil de arhitectura bazat pe REST, cu trei niveluri, separand astfel partea de client de partea de server, plus baza de date. Astfel, pentru fiecare nivel am ales o anumita tehnologie, dupa cum urmeaza:

Pentru partea de client am ales sa folosesc libraria ReactJS, scrisa in JavaScript. Alte alternative pot fi JavaScript pur, libraria jQuery, sau unul dintre framework-urile moderne din care il amintesc pe cel mai popular, AngularJS. Avand in vedere faptul ca tehnologia s-a dezolvat destul de mult de cand a aparut JavaScript, putina lume mai dezvolta azi aplicatii in JavaScript pur, datorita faptului ca este costisitor din punct de vedere al timpului si exista pe piata multe librarii sau framework-uri care transforma procesul de dezvoltare intr-unul mai rapid. Libraria jQuery reprezinta practic un mod mai simplu de a scrie JavaScript, din punct de vedere al codului. Asadar, cea mai buna alternativa la soluatia aleasa, ReactJS, ar fi AngularJS, ambele tehnologii permitand dezolvatarea de aplicatii de tip single page applicaton. Motivul principal pentru care am optat pentru React este faptul ca, spre deosebire de Angular, este mai usor de invatat, fiind mai putin complex, si in functie de specificatile aplicatiei am decis ca ar fi mai bine sa optez pentru o librarie in loc de un framework precum este AngularJS.

Pentru partea de server am ales sa folosesc Node.js, bazat si acesta pe JavaScript. Daca pe partea de client lucrurile par mai simple, pe partea de server mai sunt multe tehnologii consacrate, precum Java, #C, PHP, sau altele, fiecare cu avantajele si dezavantajele sale. Node.js este simplu de invatat pentru un programator care lucreaza cu JavaScript, se pliaza usor pe aplicatile web, ofera solutii rapide de implementare a unei aplicatii si este rapid. Avand in vedere aceste aspecte, am ales sa utilizez Node.js pentru partea de server.

Pentru baza de date am ales sa folosesc baza de date non-relationala MongoDB. Comparat cu o baza de date relationala, spre exemplu MySQL, MongoDB este mult mai felxibila: permite ca o schema de date sa fie modificata, fara ca datele existente sa fie modificate, iar in cazul adaugarii unor campuri sau colectii noi, coloanele existente nu sunt afectate. De asemenea, este mai rapida, mai scalabila si are avantajul de a pastra datele sub forma de JSON. De asemena, tinde mai mult sper programarea orientata pe obiect decat o baza de date relationala. Dintre tipurile de baze de date non-relationala, cea mai conscarata este MongoDB, movit pentru care am optat pentru aceasta tehnologie.

Diagrama de secventa

Este folosita in general pentru a descrie interactiunile dintre obiecte, in ordinea succesiva a acestora.

In figura de mai jos este descrisa o diagrama de secventa pentru cazul in care se incearca incarcarea unui fisier pe serverul aplicatiei, in cadrul unui raport al unui baraj. Pentru aceasta, este nevoie ca utilizatorul sa incarce un fisier, acesta fiind transmis catre server printr-un API. Serverul identifica cererea, genereaza un nume unic pentru fisier pentru a evita duplicatele, pregateste calea unde va fi salvat fisierul dupa care il salveaza pe server. Dupa aceasta, in functie de id-ul venit, din baza de date este scos raportul barajului in cadrul caruia este atasat fisierul, acesta se actualizaeaza cu noua cale spre locul unde este salvat fisierul pe server, dupa care raportul actualizat se trimite la client.

Figura X – Diagrama de secventa pentru incarcarea unui fisier intr-un raport

Diagrama claselor

Descrie structura proiectului prin afisarea claselor sistemului, a atributelor si a metodelor sale precum si relatia dintre obiecte.

Pentru realizarea proiectului am avut nevoie in primul rand de un obiect de tip "User" , care sa retina toate datele care tin de utlizator. Acest obiect poate avea unul sau mai multe obiecte de tip "DamRaport" care sa pastreze informatile legate de raportele fiecarui baraj. Printre aceste informatii, se afla si cele legate de tipul barajului si o lista de date despre fisierele de tip pdf, reprezentate prin obiectele "DamTypes" respectiv "Pdf". De asemenea, mai este nevoie un obiect de tip "Home" unde vor fi pastrate datele care tin de pagina de prezentare a aplicatiei.

În figura de mai jos sunt definite clasele utilizate în cadrul aplicatiei precum și relațile de asociere dintre ele.

Figura Y- Diagrama claselor

Structura bazei de date

Baza de date a aplicatiei stocheaza toate datele care sunt necesare a fi retinute si utilizate in cadrul site-ului, reprezentand practic "memoria" aplicatiei. Fiind vorba despre o baza de tip NoSql, datele sunt retine intr-un format de tip JSON, flexibil si usor de actualizat.

Aceasta este compusa din 6 colectii: users, dam_reports, dam_types, pdfs, homes si sessions, acestea avand diferite legaturi intre ele. Structura bazei de date este prezentata in figura urmatoare:

Figura Z – Diagrama bazei de date

-sessions: documentul in care sunt stocate datele care tin de sesiune

-dam_reports: documentul unde se afla datele care tin de raportul unui baraj

-pdfs: documentul in care se afla anumite date legate de fiecare document de tip pdf

-dam_types: documentul care stocheaza date legate de tipul unui baraj

-users: in acest document sunt pastrate datele care tin de un utilizator

-homes: aici se retin datele legate de pagina de prezentare

Implementare

Pentru implementarea aceste aplicatii web de monitorizare a starii hidroenergetice, am folosit urmatoarele tehnologii: pe partea de client am folosit CSS, HTML5 si ReactJS, in timp ce pe partea de server am folosit NodeJs. Pentru baza de date am folosit MongoDB.

Sistemul de operare folosit este Linux, distributia Ubuntu 16.04.

Implementarea bazei de date

Dupa cum am precizat, implementarea bazei de data s-a facut cu ajutorul tehnologiei MongoDB, cel mai popular mediu de administrare alm bazelor de date de tip NoSql(non-relationala).

Astfel, primul pas a fost sa imi instalez MongoDB. Pentru sistemul de operare Linux, distributia Ubuntu 16.04, am urmat pasii urmatori, din terminal:

https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-mongodb-on-ubuntu-16-04

sudo apt-key adv –keyserver hkp://keyserver.ubuntu.com:80 –recv 0C49F3730359A14518585931BC711F9BA15703C6 –am importat cheia pentru repository-ul oficial al celor de la MongoDB

echo "deb [ arch=amd64,arm64 ] http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list –am adaugat repository-ul

sudo apt-get update – am actualizat pachetele locale

sudo apt-get install mongodb-org – am instalat MongoDB

sudo systemctl start mongod – am pornit serviciul

mongo – am accesat baza de date

use database_name – am creat baza de date pentru aplicatie

Alte comenzi necesare:

show collections – pentru afisarea colectilor din cadrul unei baze de date

db.collection_name.find() – pentru afisarea unei anumite colectii

db.collection_name.insert({"field":"value"}) – pentru inserarea unui document intr-o colectie

db.colection_name.remove({"field":"value"}) – pentru stergerea unui anumit document care contine un camp anume

db.collection_name.remove({ }) – pentru stergerea tuturor docuumentelor dintr-o colectie

db.collection_name.drop() – pentru stergerea unei colectii

Dupa ce baza de date a fost configurata, se pot introduce colectile impreuna cu documentele lor. In figura urmatoare se pot observa o scurta demonstratie privind pasii pentru accesarea bazei de date si introducerea unui nou document in colectia "users", din linia de comanada:

Figura A

Astfel, dupa cum se poate observa in figura de mai sus, accesul la baza de date se poate destul de simplu, documentele stocate fiind usor de interpretat datorita faptului ca sunt scris in formatul JSON. De asemenea, datorita flexibilitatii de care dispune, structura documentele introduse intr-o colectie poate sa difere, fara ca baza de date sa fie afectata. Acest fapt a fost exemplificat prin introducerea unui document nou in colectia "users" care are un camp "extra" fata de celalalt document existent in colectia respectiva.

Baza de date, colectile si documentele pot fi introduse atat manual, precum in figura de mai sus, cat si prin intermediul unui ODM(Object Data Modeling), despre care voi aminti in subcapitolul legat de implementarea serverului.

Implementarea serverului

La fel ca si in cazul clientului, serverul a fost implementat folosind limbajul de programare JavaScript, diferenta constand in faptul ca in acest context codul este rulat in cadrul unui server Node.js, si nu in browser. Mediul de dezvoltare in care am scris codul pentru server este Visual Studio Code.

Primii pasi pe care i-am facut in aceasta etapa au fost instalarea modului pentru Node.js dupa care am instalat managerul de pachete npm oferit de cei de la Node.js:

sudo apt-get install nodejs – pentru modulul Node.js

sudo apt-get install npm – pentru managerul de pachete

Pasul urmator a fost pregatirea directoarelor , dupa cum se poate vedea in diagrama de pachete urmatoare:

Figura B – Diagrama de pachete pentru server

In continuare, voi prezenta continutul directoarelor si rolul acestora:

package.json: aici sunt incluse toate dependintele necesare aplicatiei de server

app.js: contine definirea modului aplicatiei Node.js, precum si a librariilor mai importante ale aplicatiei: Express, Mongoose

api – directorul care contine fisierul routes.js, unde sunt definite rutele de acces(API-urile) care fac legatura dintre client si server

config – contine un fisier unde sunt defenite principalele configuratii ale proiectului precum: port-ul pe care ruleaza serverul, numele bazei de date

models – contine fisierele cu clasele model ale aplicatiei

repository – contine fisierele care fac legatura dintre clasele model si baza de date

src – contine doua directoare:

lib – aici este descarcat directorul cu Bootstrap

poze – aici sunt incarcate imaginile folosite pentru pagina de prezentare

uploads – aici sunt salvate imaginile, fisierele video si de tip pdf necesare aplicatiei

node_modules – directorul unde sunt instalate librariile cu ajutorul managerului de pachete npm

In continuare, voi prezenta cele mai importante parti implementate ale serverului.

Ca si orice alt server, Node.js ruleaza pe un anumit port si foloseste un anumit protocol de comunicare. In cazul de fata, serverul va rula pe portul 9000 iar protocolul de comunicare este http. De asemenea, acesta se va conecta la o baza de date MongoDB. Aceste date de configurare au fost defininte in fisierul config.js, dupa cum se poate vedea in figura urmatoare:

Figura W – Configurarea serverului

Pentru exportarea fisierului am folosit "module.exports", ceea ce imi permite sa import constanta "config" in alte fisiere.

Pentru crearea claselor model si logica aplicatiei care face legatura cu baza de date am folosit libraria Mongoose []. Aceasta este o librarie de tip ODM(Object Data Modeling) pentru MongoDB si Node.js si are rolul de a gestiona relatile dintre date si a face legatura intre clasele model ale serverului si entitatile din baza de date. De asemenea, Mongoose furnizeaza un API flexibil, prin intermediul caruia se pot face operatii de CRUD(Create,Retrive,Update,Delete) in Node.js, care sunt transformate in cod inteles de MongoDB. Mai jos pot fi vazute o figura care reprezinta definirea unui clase model de tip "User" :

Figura X – Definire clasa model "User"

Pentru a importa modulul pentru Mongoose am folosit comanda require('mongoose'), dupa care am importat si o schema. O schema defineste proprietatile documentului printr-un obiect, unde numele cheii corespunde cu numele colectiei. De asemnea, Mongoose genereaza automat un set de metode precum: save(), find(), findOneAndRemove(), etc.

In figura urmatoare este codul folosit pentru implementarea metodei de salvare in baza de date a unui utilizator nou.

Figura Z – Salvare utilizator in baza de date

Dupa cum se poate vedea in figura, utilizatorul este cautat in baza de date dupa campul username, si in cazul in care exista deja, este returnata o eroare care va fi folosita ca un validator pe client. Daca username-ul nu este gasit in baza de date, se cripteaza parola prinr-un algoritm de hash, furnizat de libraria Bcrypt de la Node.js, dupa care noul utilizator este salvat in baza de date folosindu-se metoda save de la Mongoose.

Un alt aspect important al serverului este gestionarea sesiunii. Pentru creearea si configurarea sesiunii am folosit framework-ul Express.js. Acesta ofera diferite caracteristici care fac ca dezvoltarea unei aplicatii web sa se faca mai rapid si mai usor. Pentru a putea utiliza acesta componenta am apelat functia requer("express"), prin care care se include un modul in Node.js. Codul folosit se afla in figura urmatoare:

Figura Q – Configurare sesiune

Scopul unei sesiuni este acela de a retine faptul ca un utilizator este autentificat, permitandu-i acestuia sa navigheze prin aplicatie fara a fi nevoie sa isi introduca datele de logare de fiecare data. Creearea unei sesiuni se face in momentul in care un utilizator siia introdus corect credentialele. In cardul sesiunii mai sunt salvate anumite date care tin de utilizator, precum id-ul si rolul acestuia in sistem. In momentul in care sesiunea este salvata, acesteia i se adauga un cookie encriptat care va fi trimis catre client. Un cookie permite stocarea unor informatii care tin de un utilizator in browser. Browser-ul trimite apoi informatile respective inapoi catre server, la fiecare cerere, permitand aplicatiei de server sa identifice utilizatorul, sau sesiunea, in cazul nostru. Codul folosit pentru crearea unei sesiuni atunci cand utilizatorul se autentifica este descris in figura urmatoare:

Figura N – Crearea unui sesiuni la logare

Sesiunea se termina in momentul in care utilizatorul se delogheaza, prin comanda session.destroy() sau dupa ce expira.

Ultimul aspect important al serveului este modul in care acesta comunica cu clientul. Comunicarea dintre acestea se face prin intermediul unui API care respecta principile REST. API-ul(Application Programming Interface) este un instrument software care permite ca doua aplicatii sa comunice intre ele []. Un API de tip REST defineste un set de functii prin care dezvoltatorii pot sa faca anumite cereri prin intermediul metodelor http: post, get, put, delete. Aceste metode sunt definite in fisierul routes.js , cateva exemple fiind:

app.post('/users') – pentru indroducerea unui nou utilizator

app.get('/dam/:id') – pentru afisarea unui anumit baraj

app.put('/pdf-info/:id') – pentru actualizarea informatilor legate de un pdf

app.delete('/dam-type/:id') – pentru stergerea unui anumit tip de baraj

Pornirea serverului Node.js se face utilizand comanda din terminal node app.js.

Crearea structurii de bază a aplicației

Implementare client

Pentru implementarea clientului am folosit tehnologiile CSS, HTML5, Bootstrap si libraria ReactJS scrisa in JavaScript. Mediul de dezolvatare ales a fost Visual Studio Code. Pentru a avea datele intr-o singura pagina am folosit conceptul de Single Page Application, concept bine definit de tehnologia aleasa. De asemenea, am folosit libraria Redux, care retine si gestioneaza starea unui componente.

Arhitectura aplicatiei de client poate fi observata in fugura urmatoare, care prezinta diagrama de pachete pentru aplicatia de client.

Figura T – Structura directoarelor pentru partea de client

In continuare, voi prezenta continutul directoarelor din figura si rolul pe care acestea il au in cadrul aplicatiei:

package.json: aici sunt incluse dependintele necesare aplicatiei de client

node_modules – directorul unde sunt instalate modulele necesare

Src – directorul sursa al aplicatiei in care se afla intreg codul sursa al aplicatiei de client; contine urmatoarele fisiere si directoare:

Index.js: contine definirea modului aplicatiei ReactJS, precum si modulele principale ale aplicatiei

Index.css: pentru stilizarea anumitor elemente din cadrul aplicatiei

App.js: contine implementarea pentru rutararea paginilor

Actions – aici sunt pastrate actiunile folosite de Redux

Components – aici se afla directoarele si fisierele care tin de componentele aplicatiei

Config – contine fisierul de configurare url.js in care se afla constanta folosita pentru url-ul aplicatiei

Constants – aici sunt definite constantele globale ale aplicatiei, cum ar fi cele folosite pentru validare

Containers – aici se afla fisierele care fac legatura intre componente si stocul pentru Redux

Reducers – aici se afla fisierele care se ocupa de actualizarea starii componentelor

In continuare, voi descrie principalele functionalitati ale aplicatiei, precum si modul in care acestea au fost implementate.

Primul lucru pe care il va vedea un utilizator care acceseaza acest site web este pagina de prezentare, unde se afla afla anumite informatii generale, un container de tip carousel in care se schimba dinamic anumite imagini, precum si un buton de logare pentru acces la aplicatie. In figura urmatoare se poate vedea pagina intiala a aplicatiei

Figura X –

Prin apasarea butonului de logare, se afisaza un modal de autentificare, care contine contine anumite validari precum: "Completeaza toate campurile obligatorii", "User sau parola invalida" sau "Parola este invalida". Acest se poate vedea i figura urmatoare:

Figura Y –

Acest modal contine doua campuri, unul pentru username si altul pentru parola, iar in momentul in care se apasa butonul "Login", aceste date vor fi validate. Prima validare este una care tine strict de client, si verifica daca au fost introduse anumite date. In cazul in care aceste validari trec, credentialele introduse vor fi trimise pe server, care va verifica daca acestea exista in baza de date. Daca nu sunt gasite, se returneaza o eoare care va fi afisata sub forma unei validari, iar in cazul in care credentiale sunt corecte, se va crea o sesiune si vor fi trimise clientului anumite date precum faptul ca utilizatorul este logat, rolul si numele acestuia. Codul surse se poate vedea in figura urmatoare:

Fig F – Codul pentru functia de logare din client

In functie de rolul returnat, admin sau user, aplicatia de client va returna in browser anumite pagini la care utilzatorul are acces. Daca rolul acestuia este cel de user, va avea acces la pagina "Date Baraj" unde va putea vizualiza toate raportele sale, va putea sa stearga un raport deja existent, sa il modifice sau sa adauge un nou raport.

Adaugarea unui nou raport se poate vizualiza in figura de mai jos:

Figura Q – Adaugare raport baraj

Informatile care pot fi introduse intr-un raport sunt: descrierea raportului, data adaugarii, selectare tip baraj, adaugare imagini si video, adaugare fisiere pdf precum si selectare locatie prin intermediul unei interfete grafice oferite de google maps. Dupa ce raportul a fost completat, la butonul de Salvare, informatile sale sunt trimise catre server si salvat in baza de date. Un raport poate fi vizualizat si actualizat dupa cum se vede in figura urmatoare:

Figura T – Vizualizare raport

Unui raport ii pot fi atasate mai multe video-uri, care pot fi vizualizate sub forma unui video player, unde utilizatorul isi alege video-ul pe care doreste sa il vizualizeze. Aceasta functionalitate a fost implementata cu ajutorul librariei ReactPlayer de la React, codul sursa fiind descris in figura de mai jos:

Figura A – Implementare video-player

Un alt aspect important este reprezentat de functionalitatea legata de documentele de tip pdf. Un astfel de document are o descriere, poate fi vizualizat, descarcat si sters. Pentru afisarea documentele de tip pdf sub forma de tabel am folosit libraria react-bootstrap-table, cu ajutorul caruia implementarea tabelelor s-a facut mai eficient si simplu. Aceasta librarie ofera diverse functionalitati, precum sortarea elementelor, functie de cautare sau paginatie iar tabelul construit este responsiv. Codul care returneaza tabelul pentru documente pdf poate fi observat in figura urmatoare:

Figura U – Implementare tabel pentru documentele pdf

Iar modul in care acest tabel este afisat poate fi vazut in figura urmatoare:

{Aici figura cu funct. Pdf – template}

Al doilea tip de utilizator este administratorul. Acestea poate vizualiza toate rapoartele utilizatorilor si are aceleasi drepturi asupra rapoartelor ca si utilizatorii cu rol de user. De asemnea, adminstratorul are acces la pagina "Administrare" de unde poate gestiona utilizatorii(adaugare si stergere), are posbilitatea de a adauga sau a sterge un tip de baraj precum si de a actualiza descrierea si continutul imaginilor din cadrul paginii de prezentare.

Functionalitatile acesti pagini se pot observa in figurile urmatoare, unde sunt evidentiate functionalitatile de adaugare utilizator si actualizare pagina initiala:

Fig f – Adaugare utilizatori

Dupa cum se poate observa in figura de mai sus, aceasta functionalitate contine si anumite validari, una dintre ele fiind returnata de pe server, in cazul in care utilizatorul cu un anumit username exista deja in sistem. De asemenea, adminstratorul are posibilitatea de a personaliza pagina de prezentare, dupa cum se poate observa in figura de mai jos:

Fig g – Actualizare informatii pagina prezentare

Adminstratorul poate modifica titlul, descrierea si poate adauga sau sterge imagini, care vor fi afisate in cadrul paginii de prezentare a aplicatiei. In momentul in utilizatorul apasa butonul "LogOut", acesta este delogat din sistem iar sesiunea sa se sterge.

Pornirea aplicatiei se face prin comanda din terminal npm start, aceasta ruland local la adresa http://localhost:3000/ iar in productie la adresa http://damfu.utcluj.ro:8080/.

Testare și validare

Testarea aplicatiei este o parte esentiala in dezvoltarea unui sistem software. Aceasta reprezinta o analiza atenta si minutionasa a fiecarei componente si functionalitati a sistemului, verificandu-se dacat acesta functioneaza corespunzator.

In cadrul acesti proiect, a fost realizata o testare manuala la finalul proiectului pentru fiecare componenta si pentru fiecare caz de utlizare, atat pentru rolul administrator cat si pentru cel de utilzator. Testarea manuala este un tip de testare software prin care se incearca identificarea defectelor sau erorilor , prin executarea manuala a unor cazuri de testare si fara a se folosi intrumente de testare automata.

Pentru testarea functilor de pe server care fac legatura cu clientul (testarea API-ului) am folosit instrumentul software, care permite sa se faca cereri http catre un server fara sa fie nevoie de un browser. Astfel, am putut sa simulez destul de simplu fiecare metoda de API, verificand raspunsul primit de la server, dupa care am verificat si baza de date a aplicatiei, pentru a ma asigura ca datele introduse in baza de date sunt cele corecte. In figura urmatoare se poate vedea un exemplu de testare a metodei de listare a tutror rapoartelor, cu ajutorul Postman:

Figura X – Testare GET dam-reports din Postman

Asadar, la sfarsitul aplicatiei, am simulat pas cu pas, cu ajutorul unui browser, toate actiunile pe care un utilizator le-ar putea face, de la autentificarea in sistem, pana la delogare. Aceastea includ:

Verificarea rolului unui utilizator dupa ce asta s-a autentificat

crearea unui nou raport, cu fiecare functionaliate a sa, actualizarea rapoartelor, inclusiv adaugarea sau stergea de fisiere video, imagini sau pdf, vizualizarea si posibilitatea de descarcare a acestora; stergerea unui raport

Adaugarea de utilizatori noi in sistem, testand inclusiv cazurile in care acestia se afla deja in sistem(dupa username)

Functionalitatea de personalizare a paginii de prezentare a aplicatiei, inclusiv adaugarea si stergerea de imagini

Adaugarea unui tip nou de baraj sau stergerea acestuia

Functia de cautare dupa diverse cuvinte cheie

Pe langa aceastea, am cautat pe cat posibil sa testez si cazurile de utilizare neasteptate, cum ar fi incercarea unui utilizator sa acceseze o pagina inainte sa se fi logat in sistem sau incercarea de incarcare pe server a unor fisiere care sunt diferite de cele acceptate in sistem, precum video, image sau pdf.

Aplicatia a fost testata pe diferite browsere, precum: Google Chrome, Mozilla Firefox, Opera sau Safari. De asemenea, a fost testata si pe diferite device-uri, inclusiv pe smartphone, verificandu-se responsivitatea si functionalitatea ei pe acestea.

Pentru validarea aplicatiei, aceasta a fost pusa in productie si folosita de catre utilizatori reali.

Manual de Instalare si Utilizare

Pentru rularea aplicatiei, pe langa descarcarea codului sunt necesare si instalarea anumitor dependinte si instrumente externe. Atat componentele care se ocupa de client – in special React, cat si cele care tin de serverul Node.js, respectiv blocul care se ocupa de manipularea bazelor de date(Mongo DB) se pot utiliza in orice sistem de operare, fie ca este de vorba de Windows, Linux sau MacOS.

In continuare, voi descrie pasii necesari pentru instalarea aplicatiei pe un sistem de operare linux, distributia Ubuntu 16.04 LTS.

Prima dependinta care trebuie instalata este cea de Node.js. Aceasta poate fi instalata folosind instructiuni din linia de comanda a terminalului linux, dupa cum se poate gasi pe site-ul oficial al celor de la Node.js []. Comenzile necesare sunt urmatoarele:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash –

sudo apt-get install -y nodejs

Pentru instalarea altor librarii necesare Node.js se poate folosi managerul de pachete npm, care se poate instala folosind comanda:

sudo apt-get install -y npm

Dupa aceasta, aceste librarii (a caror referinta se afla in fisierul package.json) se instaleaza folosind comanda:

npm install

Sau pot fi instalate spearat folosind comanda:

npm install <package_name>

Astfel, va rezulta un director denumit node_modules in care se afla librariile necesare. Aceste comenzi se vor rula in cadrul directoarelor cu fisierele sursa pentru client, respectiv server, in cazul in care nu exista deja un director denumit node_modules.

Urmatoarea dependinta importanta care trebuie instalata este cea care se leaga de baza de date, si anume Mongo DB. Comenzile necesare pot fi gasite pe site-ul oficiail al celor de la MongoDB [] si sunt urmatoarele:

sudo apt-key adv –keyserver hkp://keyserver.ubuntu.com:80 –recv 2930ADAE8CAF5059EE73BB4B58712A2291FA4AD5

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.6 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.6.list

sudo apt-get install -y mongodb-org

Ultima dependenita necesara este cea de ReactJs. Comanda necesara este urmatoarea:

npm install -g create-react-app

Aceste comenzi au echivalent si in sistemele de operare Windows sau MacOS, cu observatia ca pentru baza de date MongoDB, pentru Windows, instalarea se face manual, prin descarcarea aplicatiei de pe serverul oficial MongoDB [].

Pentru rularea sau oprirea dependintelor instalate se vor rula urmatoarele comenzi, in functie actiune si dependinta dorita:

Pentru baza de date MongoDB:

Pornire serviciu: sudo service mongod start

Oprire serviciu: sudo service mongod stop

Pentru Node.js:

Pornire server: node app.js

Pentru React:

Pornire client: npm start

Pentru rularea aplicatiei in productie sunt necesare urmatoarele comenzi:

Pentru Node.js, se poate folosi dependinta pm2. Aceasta este un manger avansat al procesului de productie pentru Node.js.

npm install pm2 -g – pentru instatare

pm2 start app.js – pentru pornire

pm2 stop app.js – pentru oprire

Pentru React:

npm run start-server – pentru pornire

npm run build – in cazul in care se incarca o versiune noua

Odata ce acesti pasi au fost urmati, aplicatia poate fi accesata in browser la adresa http://localhost:8080 sau http://damfu.utcluj.ro:8080/ , unde utilizatorul, dupa ce se autentifica in sistem, poate sa foloseasca aplicatia.

Concluzii

Bibliografie

UNDE FACI REFERIRE LA BIBLIOGRAFIE IN TEXT?