Aplicatie Web Responsive Pentru Antrenorii DE Fitness

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

PROGRAMUL DE STUDIU CALCULATOARE

FORMA DE ÎNVĂȚĂMÂNT IF

PROIECT DE DIPLOMĂ

COORDONATOR ȘTIINȚIFIC

CONF.DR. ING. GIANINA GABOR

ABSOLVENT

MOISOIU MIRCEA MIHAI

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

DEPARTAMENTUL CALCULATOARE ȘI TEHNOLOGIA INFORMAȚIEI

TEMA_________

Lucrare de finalizare a studiilor a studentului – Moisoiu Mircea Mihai

1). Tema lucrării de finalizare a studiilor:

APLICAȚIE WEB RESPONSIVE PENTRU ANTRENORII DE FITNESS

2). Termenul pentru predarea lucrării: 5.07.2016

3). Elemente inițiale pentru elaborarea lucrării de finalizare a studiilor

HTML/HTML5, CSS/CSS3, JavaScript, jQuery, Microsoft Azure, C#, SQL,

4). Conținutul lucrării de finalizare a studiilor: Introducere, Tehnologii folosite în realizarea aplicației – HTML, HTML5, CSS, CSS3, JavaScript, jQuery, Bootstrap, ResponsiveWebDesign, JSON, Chart.js, Font-awesome, ASP.NET Core, ASP.NET Identity, EntityFramework, MSSQL, SendGrid, Microsoft Azure, Arhitectura Onion; Proiectarea și implementarea aplicației, Concluzii, Bibliografie.

5). Material grafic:

6). Locul de documentare pentru elaborarea lucrării:

Internet, laborator Calculatoare, biblioteca universitară

7). Data emiterii temei 1.10.2015

Coordonator științific

Conf. dr. ing. Gianina Gabor

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI

PROGRAMUL DE STUDIU CALCULATOARE

FORMA DE ÎNVĂȚĂMÂNT IF

APLICAȚIE WEB RESPONSIVE PENTRU ANTRENORII DE FITNESS

COORDONATOR ȘTIINȚIFIC

CONF.DR. ING. GIANINA GABOR

ABSOLVENT

MOISOIU MIRCEA MIHAI

CUPRINS

Capitol 1. Introducere

Capitolul 2. Tehnologii folosite în realizarea aplicației

2.1 HTML

2.2 HTML 5

2.3 CSS

2.4 CSS3

2.5 Javascript

2.6 jQuery

2.7 Bootstrap

2.8 Responsive web design (RWD)

2.9 JSON

2.10 Chart.js

2.11 Font-awesome

2.12 ASP.NET.Core

2.13 ASP.NET Identity

2.14 EntityFramework

2.15 MSSQL

2.16 SendGrid

2.17 Microsoft Azure

2.18 Arhitectura Onion

Capitolul 3. Proiectarea și implementarea aplicației

3.1 Proiectarea aplicației

3.1.1 jQuery

3.1.2 Boostrap

3.1.3 JSON (JavaScript Object Notation)

3.1.4 Chart.js

3.1.5 Font-awesome

3.1.6 ASP.NET Core

3.1.7 ASP.NET Identity

3.1.8 Structura bazei de date

3.1.9 Structura proiectului

3.18 Implementarea aplicației

3.2.1 Analiza implementări aplicației

3.2.2 Utilizarea aplicației

3.2.3 Agenda

3.2.4 Antrenament

3.2.4 Nutriție

3.2.5 Clienți

3.2.6 Sugestii

3.2.7 Setări

3.2.8 Ieșire

Capitolul 4. Concluzii

Bibliografie 42

Capitol 1. Introducere

În secolul 21 tehnologia avansează așa de repede încât și cei care sunt conectați cu tehnologia încep să aibă provocări, unul din motivele pentru care tehnologia avansează așa de repede este timpul, deoarece timpul este singura unitate de măsura care nu poate fi comprimată sau extinsă, singurul lucru care poate fi făcut în acest moment este eficientizarea lui.

Iar pentru asta tehnologia ne ajută să eficientizăm timpul cu diverse unelte, aplicații ca de exemplu căsuța poștală electronică (Gmail, Yahoo) pentru o comunicare mai ușoară sau rețelele de socializare (Facebook, Google Plus) pentru a putea ține legătură mai aproape de cei dragi dar desigur asta nu e suficient în zilele noastre, pentru că sunt atâtea aplicații incât nu știi care să o alegi sau care să fie cea mai potrivită pentru tine asta ca o persoană obișnuită.

Și totuși se poate eficientiza timpul și mai bine prin crearea unei aplicații dedicate unui segment anume de piață unde publicul este mai restrâns dar reacția sa la eficientizarea timpului este foarte bine primită, iar aici vorbesc despre segmentul sport și fitness mai exact despre antrenorii de fitness (sport) care o bună majoritate din ei își trec progresul pe foi care se pot pierde sau într-un caz mai fericit iși trec progresul în diverse aplicații simple care nu aduc o eficientizare a timpului optimă.

Din aceste motive am decis să dezvolt o aplicație web care vine în ajutorul antrenorilor de fitness cu un management al timpului mult mai bun și eficient decât metodele menționate anterior, aplicația web atinge niște puncte cheie specifice antrenorilor de fitness, cum ar fi cele de agendă, antrenament, nutriție și clienți.

Aceste puncte cheie vin dupa o scurtă cercetare și discuție cu diverși antrenori de fitness la care le-am cerut părerea și sfatul cât de mult i-ar ajuta o aplicație de management al clienților, iar părerea lor a fost una pozitivă, în unele cazuri am primit recomandări ce i-ar ajuta, cum i-ar ajuta și desigur ca developer să pot întelege mai bine și de ce i-ar ajuta.

Din punct de vedere tehnologic am încercat să folosesc cele mai noi tehnologii care să-mi permită scalarea aplicației într-o manieră ușoară, mentenanța aplicației să se faca ușor și să permită modificarea sau adăugarea de funcționalitate nouă în funcție de necesitățile antrenorilor de fitness.

Pentru asta m-am folosit de Microsoft Azure pentru partea de hosting în Cloud, deoarece vreau ca aplicația să o pot scala ușor, să imi ofere servicii de back-up și să poată desigur să fie accesată de oriunde. ASP.Net Core l-am folosit pe partea de backend și parțial pe partea de front-end pentru a dezvolta aplicația web.

Capitolul 2. Tehnologii folosite în realizarea aplicației

HTML

HTML este o formă de marcare orientată către prezentarea documentelor text pe o singură pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizează mijloacele prin care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include informații despre titlul și autorul documentului, informații structurale despre cum este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).[1]

HTML este un format text proiectat pentru a putea fi citit și editat de oameni utilizând un editor de text simplu. Totuși scrierea și modificarea paginilor în acest fel solicită cunoștințe solide de HTML și este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage permit ca paginile web să fie tratate asemănător cu documetele Word, dar cu observația că aceste programe generează un cod HTML care este de multe ori de proastă calitate.[2]

HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicații ca sistemele de gestionare a conținutului, wiki-uri și forumuri web generează pagini HTML.[1]

HTML este prescurtarea de la Hyper Text Mark-up Language și este codul care stă la baza paginilor web. Paginile HTML sunt formate din etichete sau tag-uri și au extensia .html sau .htm. În marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> și alta de închidere </eticheta>, mai există și cazuri în care nu se închid, atunci se folosește <eticheta /> browserul interpretează aceste etichete afișând rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face deosebirea între litere mici și mari). Pagina principală a unui domeniu este fișierul index.html respectiv index.htm. Această pagină este setată a fi afișată automat la vizitarea unui domeniu.[3]

Unele etichete permit utilizarea de atribute care pot avea anumite valori:[4]

<eticheta atribut="valoare"> … </eticheta>

Componenta unui document HTML este: [5]

versiunea HTML a documentului

zona head cu etichetele <head></head>

zona body cu etichetele <body></body> sau <frameset></frameset>

Versiunea HTML poate fi: [6]

HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 5:

<!DOCTYPE HTML>

Și în HTML poate fi introdus un comentariu, care bineînțeles nu va fi afișat de browser:

<!—Acesta este un comentariu –>

În implementarea aplicației am folosit un motor de view (view engine) care se numește Razor și ajută la design-ul paginilor folosind conținut HTML/HTML5 și cod C# ca anumită logică mai complicată să poată să fie tratată de C# exemplu legarea modelelor de anumite atribute din codul HTML.

HTML 5

La realizarea acestui nou standard au cooperat W3C (World Wide Web Consortium) și WHATWG (Web Hypertext Application Technology Working Group).WHATWG s-a ocupat de forumularele și aplicațiile web iar W3C de XHTML 2.0. În anul 2006 cele 2 grupuri s-au decis să colaboreze și să realizeze împreună noul standard HTML.

În crearea acestui standard s-au stabilit reguli noi și anume noile caracteristici trebuie sǎ se bazeze pe HTML,CSS,DOM și JavaScript,să se reducǎ nevoia unor pluginuri externe(exemplu Flash),manipularea mai ușoarǎ a erorilor,utilizarea marcajelor pentru a înlocui scriptingul.HTML5 trebuie să fie independent de dispozitiv iar procesul de dezvoltare trebuie sǎ fie deschis publicului.În special, HTML5 aduce multe noi caracteristici sintactice. Acestea cuprind elemente ca <video>, <audio>, <header> și <canvas> elemente HTML, precum și integrarea conținutului SVG care înlocuiește utilizarea tag-ului generic <object>.De asemenea, definește în câteva detalii prelucrările necesare pentru documentele invalide, astfel încât sintaxa erorilor va fi tratată uniform de toate browserele cunoscute.[7]

În HTML5 avem o singura declarație de tip <!DOCTYPE>.

<!DOCTYPE html>

Mai jos este exemplificat un document HTML5 simplu, cu minimul de tag-uri necesare.

<!DOCTYPE html>

<html>

<head>

<title>Titlul documentului</title>

</head>

<body>

Continutul documentului…

</body>

</html>

Elementul „<canvas> </canvas>” din HTML5 a fost folosit pentru crearea de diagrame în zona de progres a clientului (figura 2.1 și figura 2.2)

Figura 2.1 Exemplu utilizare de element HTML5

Figura 2.2 Exemplu utilizare de element HTML5

CSS

Cascading Style Sheets (CSS) a apărut ca o soluție propusă de W3C (World Wide Web Consortium – comunitate online fondată de inventatorul web-ului) pentru rezolvarea unei probleme. În versiunea 3.2 a HTML au apărut tag-urile pentru font și culoare iar acest lucru a creat mari probleme companiilor care aveau deja site-uri destul de voluminoase. Modificarea tuturor paginilor era un proces de durată și destul de costisitor. Pentru a rezolva această problemă, W3C a propus crearea unor fișiere externe care să conțină proprietățile atașate tag-urilor HTML – fișierele CSS.

Folosirea unui singur fișier CSS pentru setarea proprietăților mai multor tag-uri HTML din pagini diferite a rezolvat problema introdusă de tag-urile pentru font și culoare. Începând cu HTML 4.0 acest lucru a fost posibil. În momentul acesta toate browserele suportă folosirea fișierelor CSS. Pe scurt CSS-ul definește modul în care sunt afișate tag-urile HTML în cadrul site-ului web (figura 2.3). [8]

Figura 2.3 Exemplu Cascade Style Sheet

CSS-ul este gândit să aibă o sintaxă relativ simplă. O "instrucțiune" CSS este alcătuită din 2 elemente: un selector și lista de declarații cuprinsă între acolade. Declarațiile, la rândul lor, sunt alcătuite din 2 elemente: o proprietate și o valoare asociată proprietății. Declarațiile se separă prin punct și virgulă.

În cazul ultimei declarații folosirea punctului și virgulei la sfârșit nu este absolut necesară dar este recomandată pentru a evita problemele generate de editarea ulterioară a documentului [9].

CSS3

CSS3 vine ca ajutor pentru a aduce design-ul la un alt nivel, vine cu multe caracteristici și instrumente noi care împreună cu o combinație de javascript ajuta o aplicație web să prindă contur.

CSS3 vine față de CSS cu gradient și cornuri rotunde ceea ce înseamnă mai puțină bătaie de cap pentru developeri web, designeri deoarece nu mai e nevoie să implementeze un nou design. CSS3 mai vine și cu animații și efecte pentru text de exemplu text-shadow care poate să adauge umbre efecte care înainte erau posibile doar cu ajutorul scripturilor de tip Javascript și/sau jQuery.

Deoarece toate browserele moderne au stiluri diferite de abordare al design-ului au trebuit tratate anumite cazuri independent pentru asta au apărut prefixele pe care le vom întâlni în CSS3, iar acestea sunt (figura 2.4):

webkit- Specific browserelor Webkit (Google Chrome, Safari, Opera);

moz- Specific browserului Mozilla Firefox;

ms- Specific browserului Internet Explorer;

Pentru aplicație am folosit un modul care se numește Bootstrap și reprezintă o combinație de CSS3 și Javascript împreuna cu diverse șabloane.

Figura 2.4 Exemplu element CSS3

Javascript

JavaScript este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul Javascript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea siteurilor web, dar este folosit și pentru accesul la obiecte încastrate (embedded objects) în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript [10].

Schimbarea numelui din LiveScript în JavaScript s-a făcut cam în același timp în care Netscape încorpora suport pentru tehnologia Java în browserul web Netscape Navigator.În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul Java nu există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are mai multe în comun cu limbajul Self decât cu Java.

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate. Browserele rețin în memorie o reprezentare a unei pagini web sub forma unui arbore de obiecte și pun la dispoziție aceste obiecte script-urilor JavaScript, care le pot citi și manipula. Arborele de obiecte poartă numele de Document Object Model sau DOM. Există un standard W3C pentru DOM-ul pe care trebuie să îl pună la dispoziție un browser, ceea ce oferă premiza scrierii de script-uri portabile, care să funcționeze pe toate browserele. În practică, însă, standardul W3C pentru DOM este incomplet implementat. Deși tendința browserelor este de a se alinia standardului W3C, unele din acestea încă prezintă incompatibilități majore, cum este cazul Internet Explorer [11].

În aplicație am folosit Javascript în zona de client pentru a oferi un plus de design aplicației precum și pentru manipularea DOM-ului. Acțiunea din figura 2.5 arată un exemplu de modificarea elementelor de DOM prin ascunderea unei mese la apăsarea unui buton.

Figura 2.5 Exemplu de cod Javascript din aplicație

jQuery

jQuery este o platformă de dezvoltare JavaScript, concepută pentru a ușura și îmbunătăți procese precum traversarea arborelui DOM în HTML, managementul inter-browser al evenimentelor, animații și cereri tip AJAX. jQuery a fost gândit să fie cât mai mic posibil, disponibil în toate versiunile de browsere importante existente, și să respecte filosofia "Unobtrusive JavaScript".[12]

selecții de elemente în arborele DOM.

parcurgere și modificarea arborelui DOM (incluzând suport pentru selectori CSS 3 și XPath simpli);

înregistrarea și modificarea evenimentelor din browser;

manipularea elementelor CSS;

efecte și animații;

cereri tip AJAX;

extensii;

Exemplu de cod din figura 2.6 arată modificarea elementului de DOM din zona de nutriție și trimitea de apeluri AJAX.

Figura 2.6 Exemplu cod jQuery din aplicație

La jQuery pot fi adăugate diverse extensii, arhitectura sa permite developerilor să dezvolte funcții (subaplicații) bazate pe biblioteca principală care extind funcțiile de bază jQuery.

Un exemplu este jQuery UI care oferă un set de extensii pentru interactivitate de bază, efecte mai complexe decât cele din biblioteca de bază și teme de culori. Avantajul jQuery UI față de alte extensii este că dezvoltarea și testarea acestor componente se face în paralel cu dezvoltarea bibliotecii principale, minimizând riscul de incompatibilitate. [13]

În aplicație, jQuery este folosit pentru trimiterea de apelări Ajax și manipularea anumitor elemente în funcție de interacțiunea utilizatorului împreună cu Bootstrap.

Bootstrap

Bootstrap este un framework pentru design HTML/CSS și Javascript dezvoltat de Twitter. Conține șabloane de design create în HTML și CSS pentru diferite elemente HTML cum ar fi forms,buttons, navigation și alte componente de interfață precum și opțional diverse extensii JavaScript, comparativ cu alte framework-uri Bootstrap se concetrează doar pe dezvoltarea front-end (figura 2.7, figura 2.8).

Figura 2.7 Înainte de folosirea Bootstrap

Figura 2.8 După folosirea Bootstrap

O facilitate extrem de importantă care face să fie unul din cele mai folosite framework-uri este compatibiltiatea pe o varietate largă de browsere și versiunile lor precum și pe dispozitive mobile ceea ce rezultă că aplicația web poate să se adjusteze dinamic pe diferite ecrane/rezoluții.

Pentru a putea folosi Bootstrap într-o aplicație web tot ce trebuie să facem e sa descărcăm librăria Bootstrap și să includem fișierele necesare în fișierul HTML.

Bootstrap a fost implementat pe partea de front-end, fiind componenta de bază pentru design-ul interfeței de utilizator, prin folosirea acestui framework am putut face aplicația să fie responsive atât pe device-uri mobile cât și pe alte calculatoare.

Responsive web design (RWD)

Responsive web design reprezintă o abordare de web design cu scopul clar de a oferi o experiență de utilizare și afișare ușoară pentru utilizator indiferent dacă acesta folosește dispozitive mobile sau desktop. O aplicație web care abordează standarul RWD adaptează aspectul la mediul de vizionare prin folosirea grid-uri bazate pe propoții, imagini flexibile, CSS3 interogări media (@media) în mai multe feluri.

Gridul fluid apelealză la un element din pagină ca să fie într-o manieră mai ușoară cum ar fi procentele în loc de folosirea punctelor sau pixelilor.

Imaginile flexibile sunt și ele măsurate în unități relative ca să poată preveni afișarea înafara elementului în care e inclusă imaginea

Interogările media permit paginii să folosească diferite reguli de CSS bazat pe anumite caracteristicii cheie ca de exemplu lătimea pe care este afișat aplicația web.

În aplicația web acest lucru a fost tratat prin folosirea framework-urilor Bootstrap și Font-awesome prin diferite reguli în funcție de anumite elemente.

JSON

JSON este prescurtarea de la JavaScript Object Oriented și reprezintă un format de afișare și interschimbare de date între aplicațiile informatice (figura 2.9). Este un format text, inteligibil pentru oameni, utilizat pentru reprezentarea obiectelor și a altor structuri de date și este folosit în special pentru a transmite date structurate prin rețea, procesul având numele de serializare [14].

Figura 2.9 Exemplu JSON

În aplicație am folosit JSON pentru trimiterea de obiecte de la client la server și invers. JSON-ul m-a ajutat în special când trebuia sa trimit obiecte de la client spre server sau invers și nu doream sa creez un model special pentru acest lucru.

Chart.js

Este o librarie javascript care poate fi ușor folosită pentru a crea grafice animate și interactive într-o pagină web. Chart.js se folosește de elementul canvas din HTML5 și este responsive. Chart.js suporta graficele de tip Line, Bar, Radar, Polar, Area, Pie și desigur incluse și optiuni care permit extinderea funcționalităti precum și adăugarea altor chart-uri[15].

În aplicație am folosit libraria pentru afișarea anumitor informații despre client într-un mod mai ușor de citit atât de antrenor cât și de client.

Font-awesome

Este o unealtă pentru icoane și font-uri bazat pe CSS și pe LESS. A fost dezvoltat de Dave Gandy pentru a fi folosit împreuna cu Bootstrap[16].

În aplicație am folosit font-awesome pentru icoane pentru a elimina din ecuație problema rezoluției și scalarea imagini pe diferite rezoluți .

ASP.NET.Core

Este o librărie open-source pentru aplicații web și următoarea generație ASP.NET dezvoltată de Microsoft și comunitate. Este o librărie modulară care rulează atât pe implementarea de .NET framework din Windows cât și cross-platform .NET.CORE [17].

Librăria ASP.NET Core este modulară și este optimizată cloud și poate rula atât pe instanța de IIS din Windows cât și de una singură.

În aplicația web reprezintă nucleul aplicației deoarece am dorit să am libertatea de a putea implementa aplicația atât pe sisteme de operare Windows cât și Linux sau MacOS.

ASP.NET Identity

Este un modul care vine la pachet cu ASP.NET și are ca rol implementarea autentificări, înregistrări precum și alte profile de tip OAuth, Owin și vine ca șablon în orice proiect de ASP.NET (dacă este selectată opțiunea) și te scutește ca developer dacă nu ai nevoie de o metodă de autentificare și înregistrare foarte complicată .

În aplicația web am ales această metoda deoarece nu am nevoie pentru moment de o metodă mai specială de autentificare și/sau de tratatea anumitor roluri în aplicație sau nevoie de autorizație în anumite zone ale aplicației.

EntityFramework

Este un modul open source care transformă sintaxa C# într-un limbaj specific bazei de date. EntityFramework suportă mai multe moduri de a comunica cu o bază de date, unul dintre aceste moduri este CodeFirst care îți permite să definești/creezi tabele prin crearea de modele în cod C#

În aplicație am folosit EntityFramework pentru a scrie interogări, inserări, editări în limbaj C# fară să fie nevoie să cunosc în detaliu limbajul SQL.

MSSQL

Este un sistem de management pentru bazele de date relaționale dezvoltat de Microsoft cu principala funcție de stocare și interogare a datelor prin solicitarea de alte aplicații software/web care pot să ruleze pe același calculator sau pe alt calculator/server din rețea. [18]

În aplicația web l-am folosit împreună cu EntityFramework pentru a crea baza de date împreună cu crearea de tabele și relațiile aferente lor.

SendGrid

Este un serviciu de management și trimitere al e-mailurilor și vine în ajutorul celor care vor să aibe un sistem ușor și bine pus la punct. SendGrid este un serviciu de încredere iar prin încredere mă refer ca serviciile de e-mail (Gmail,Yahoo etc.) nu vor trimite mailurile trimise la spam direct decât dacă mailul a fost explicit trecut ca și spam. Serviciul mai oferă și servicii de verificare dacă mailul a fost citit, dacă a fost dat click în anumite zone din e-mail și se pot crea și diverse șabloane pentru anumite tipuri de e-mail.

În aplicația web l-am folosit pentru trimitea de e-mail atunci când un antrenor de fitness se înregistrează pentru a evita înregistrarea de conturi false.

Microsoft Azure

Este o platformă cloud computing și de infrastructură creat de Microsoft pentru dezvoltarea, lansarea și managementul aplicațiilor și serviciilor printr-o rețea globală de centre de date.[19]

Microsoft Azure are avantajul că pot să scalez aplicația și să platesc exact pentru cât folosesc, îmi oferă flexibilite și pot să am cele mai noi tehnologi de backend fară costuri adiționale. Microsoft Azure a fost folosit pentru a hosta atât aplicația web cât și baza de date.

Arhitectura Onion

În aplicație am folosit arhitectura Onion care are un concept introdus de Jeffery Palermo în 2008 cu scopul de a face o separare între diferite zone ale aplicației cu scopul de a face dezvoltarea unei aplicații să fie mai ușoara și desigur și mentenanța la rândul ei să fie mai ușoara. Obiectivele care trebuiesc îndeplinite atunci când se aplica arhitectura Onion[21]:

Codul depinde de nivelele mai apropiate de centrul nucleului.

Modelele de tip domain vor fi în centrul nucleului

Stratul interior definește interfețele iar stratul exterior implementează interfețele

Comportamentul nivelului în jurul domeniului.

Infrastructura care conține datele și implementarea serviciilor ar trebui să fie împinsă la margini împreună cu infrastructura și cerințele ce țin de interfața de utilizator trebuiesc împinse la margine.

Avantajele arhitecturi Onion

În arhitectura Onion fiecare nivel comunică cu altul folosind interfețe.

Orice depedență externă ca și bază de date și/sau apelari servicii web fac parte din nivelul extern și desigur și interfața de utilizator face parte din stratul din exterior.

Obiectele care reprezintă domenii fac parte din nivelul din interior și/sau chiar central.

Stratul din interior nu ar trebui să depindă de niciun strat din exterior.

Obiectul de domeniu care e la nucleu sau la centru poate să aibă acces atât la nivelul de la baza de date cât și la nivelul de interfață de utilizator.

Fiecare legătura trebuie să aibe din exterior spre interior iar codul ce se schimbă cel mai des ar trebui să fie la nivelul exterior.

Figura 2.18 – Arhitectura Onion [22]

Capitolul 3. Proiectarea și implementarea aplicației

Proiectarea aplicației

Aplicația a fost proiectată pe arhitectura onion . Iar structura aplicației este formată din nivelul de client, infrastructura și partea de logică și date.

Figura 3.1 Logica aplicației

La nivelul de Client UI se află:

Chart.js – Generarea de diagrame care ajută atât antrenorul cât și pe client să vada progresul

Bootstrap – Principala unealtă pentru designul aplicației

jQuery – Folosit pentru comunicarea Ajax și validările care au loc pe interfața de utilizator.

La nivelul de Bussines Logic se află:

EntityFramework – Permite comunicarea între baza de date și aplicația web

View Models – Principalul mod prin care informația este transmisă de la controller la view

ASP.Net Identity – Modulul de autentificare și înregistrare al antrenorilor.

SendGrid – Modulul de trimitere a e-mailurilor

La nivelul de Repository Interfaces se află:

Interfețele care comunică cu Business Logic și Domain Entities

Metode care expun entitățile din domeniu

La nivelul de Domain Entites se află

Entitățile de domeniu – tabelele din baza de date

jQuery

jQuery l-am folosit în diverse locuri unde putea reduce nivelul de cod utilizat și în plus și validarea pe client fără să facă submit pe server. Pentru asta în fisierul _Layout.cshtml am introdus referința de jQuery. În alte zone din aplicație m-am folosit de jQuery și de selector (ex. $(”#idSelector”) ) pentru a citi valoarea unui element din pagina web și de a face apelări AJAX o bună majoritate din ele au fost stocate în fișierul site.js.

Boostrap

Este folosit pe partea de front-end și la implementarea diferitor funcții responsive care să permită să fie compatibil atât pe dispozitive obișnuite cât și pe dispozitive mobile precum și folosirea diferitelor modal-uri care permit afișarea de popup-uri.

Fișierele care permit toată această funcționalitate sunt:

Bootstrap.css – Conține toate șabloanele pentru adăugarea funcțiilor în aplicație și șabloane, definirea culorilor

Bootstrap.js – diferite opțuni care au nevoie de funcții javascript (Ex. Modal)

Transition.js – oferă diferite tranziți și efecte în aplicație.

Collapse.js – lucrează împreună cu Modal pentru a închide popup-uri sau a le deschide

JSON (JavaScript Object Notation)

Este folosit ca și mijloc de comunicare între View și Controller atunci când modelul nu permite acest lucru și este folosit și ca comunicare de tip Ajax între modulele javascript și controller.

Chart.js

Este un plugin ce oferă diagrame în zona de client. Este inclus în fișierul _Layout.cshtml sub denumirea de Chart.js

Font-awesome

Este un plugin pentru Boostrap folosit pentru adăugarea anumitor icoane scalabile în aplicație. Este inclus în fișierul _Layout.cshtml sub denumirea de font-awesome.css

jQuery.Maplight.js

Este un plugin de jQuery care este folosit pentru nuanțarea zonelor în care s-a folosit map și area în zona de Client. Fișierul cu numele jquery.maphilight.min.js este inclus în structura fișierelor ce aparțin de Client.

ASP.NET Core

Este framework-ul folosit pentru a crea View-uri, Controllere și Modele care să permită comunicarea între View și Model. Are opțiunea de a genera cod html din template-urile implicite pentru (Create,Edit,List,Detail). Implementarea este de tipul MVC (Model View Controller)

Figura 3.2 Model View Controller în ASP.NET [23]

ASP.NET Identity

ASP.NET.Identity este un modul din ASP.NET care este folosit împreuna cu ASP.NET Core pentru implementarea funcției de autentificare, înregistrare, recuperare cont. Pe langă logica de business creată mai crează și următoarele tabele în baza de date.

L-am utilizat în aplicație pentru generarea tabelelor și relațiilor între tabele care sunt necesare stocări datelor de autentificare/înregistrare și rolurile care le poate avea un utilizator în cazul nostru antrenorul personal.

Mai jos sunt numele tabelelor generate de ASP.NET Identity și o scurtă descriere (figura 12).

AspNetRoleClaims – unde sunt stocate cererile/ unui antrenor pentru un anumit rol dacă e nevoie

AspNetRoles – toate rolurile din aplicație (momentul de față doar rolul de client)

AspNetUserClaims – ce cereri are un user (antrenor) înafară de cele care le are din roluri

AspNetUserLogins – Are ca rol stocarea înregistrării antrenorilor prin alte servicii decât cel din aplicație (ex. Facebook, Google Plus)

AspNetUserRoles – Rolurile care le are un user (antrenor)

AspNetUsers – Tabela unde sunt stocați toți useri (antrenori)

Figura 3.3 Diagrama tabelelor Asp.Net Identity

Structura bazei de date

Structura bazei de date (figura 3.4) este formată cu majoritatea relațiilor conectate la AspNetUSers deoarece la ideea de bază stă antrenorul iar din acest motiv am ales ca totul să se învârtă în jurul antrenorului.

Figura 3.4 Schema bazei de date

Toate tabelele sunt legate în formatul one-to-many (unul-la-mai-multe) ceea ce înseamnă că în fiecare tabelă (excepție AspNetRoles, AspNetRoleClaims, AgendaAppointment și NutritionFood) are referință la AspNetUsers.

Tabela AgendaAppointment – stochează toate evenimentele din agendă pentru un client. Tabela Client – toti clienți unui Antrenor (AspNetUsers) vor fi stocați în această tabelă împreună cu caracteristcile lor. Tabela TrainerAgenda – stochează evenimentele antrenorului de fitness.

Tabela Nutrition – stochează toate planurile nutriționale care un antrenor le-a adăugat și are relație de one-to-many cu NutritionFood care conține alimentația propriu zisă (mesele, caloriile unei mese) iar tabela Training – stochează toate antrenamentele unui antrenor de fitness.

Structura proiectului

Structura proiectului este formată din soluția PersonalTrainerAgenda și 2 proiecte, din care PersonalTrainerAgenda reprezintă proiectul web și PersonalTrainerAgenda.Data reprezintă proiectul pentru baza de date (figura 3.5)

În proiectul PersonalTrainerAgenda se poate observa structura MVC prin separarea Modelelor de Controller și de Views prin directoare separate.

În proiectul PersonalTrainerAgenda.Data directorul de Repository conține clasele cu metode pentru interacțiunea cu baza de date iar în directorul EfModels se află clasele de Domain Events care reprezintă tabelele din baza de date.

Implementarea aplicației

Implementarea aplicației s-a făcut cu gândul de scalabilitate și optimizarea traficului între client și server cu scopul dacă un antrenor de fitness va folosi aplicația pe mobil și nu va avea internet prin wi-fi să nu simtă o foarte mare diferență la încărcarea pagini sau timp mare de așteptare la trimiterea informațiilor la server și inapoi către client.

Figura 3.6 Structura implementării aplicației

În figura 3.6 putem vedea structura implementării aplicației împărțită în cele 3 secțiuni cheie de client, logica de business și baza de date. Schema din figura 12 arată într-un mod mai inteligibil implementarea aplicației.

În zona de Logica de business ASP.NET Core și ASP.NET Core Controller oferă diferite acțiuni și model pentru respectiva acțiune în funcție de unde utilizatorul navighează în aplicație.

Zona de Client arată modul cum comunicarea și înlănțuirea între modulele de jQuery, Font-awesome, Chart.js se leagă la Bootstrap care la răndul său oferă designul pentru View care primește un Model din Logica de Business.

În zona de Baza de date în funcție de cererile primite din Logica de business se obțin informațiile prin EntityFramework din MSSQL (baza de date) prin domain entity și se returnează la Logica de business tot printr-un domain entity .

Analiza implementări aplicației

Analiza implemetări aplicației a rezultat că un antrenor dorește să aibe acces într-un mod cât mai ușor la puncte cheie din aplicație (Agendă, Nutriție, Clienți, Antrenament) din acest motiv în figura 3.7 se observă structura paginilor în aplicația web împreună cu fiecare acțiune care o oferă.

Fiecare zonă din structura paginilor a fost explicată în detaliu în subcapitolurile următoare.

Figura 3.7 Structura paginilor web ale aplicației Personal Trainer Agenda

Utilizarea aplicației

Pentru a putea face deosebirea între antrenori și antrenamentele lor personale în aplicația web s-a implementat un modul de autentificare si înregistrare. Modul de înregistrare cere de la antrenor o adresă de email validă la care îi va fi trimis un email de confirmare. Parola care din motive de securitate trebuie să aibă o lungime de minim 8 caractere și să conțină minim un caracter special, o cifră și un caracter scris cu majuscule. În figurile 3.8 și 3.9 se pot observa pagina de logare și de înregistrare

După autentificare antrenorul va vedea în zona din stânga un meniu conținând 7 secțiuni: Agendă, Antrenament, Nutriție, Clienți, Sugestii, Setări, Ieșire. Unde antrenorul va putea să-și personalizeze antrenamentele să facă un management al clienților și desigur să-și completeze agenda cu clienți și să aibe o viziune în avans ai clienților pe care îi antrenează.

Agenda

Agenda reprezintă zona din aplicațe unde antrenorul de fitness poate să planifice singur sau împreună cu clienții săi în ce zi, oră ar fi bine ca antrenamentul să aiba loc, durata antrenamentului, tipul de antrenament și/sau nutriția pentru client (figura 3.10) .

Utilizare:

Antrenorul alege ziua și ora când doreste, iar dupa ce apasă pe respectivul câmp îi va apărarea o fereastră unde poate să aleagă clientul, antrenamentul, nutriția, data, ora și ce durată dorește să aibă antrenamentul precum și câmpul de detalii care e opțional ca în final să apese pe „Salveaza programarea” (figura 3.11).

Observații:

În aceasta zonă câmpul de client este obligatoriu precum și zona de dată, oră și durata antrenamentului, celelate câmpuri fiind opționale.

Antrenament

Zona după cum spune și numele este dedicată antrenamentelor, unde un antrenor poate să-și personalizeze antrenamentele după bunul plac și poate să o facă prin: nume, repetări, seturi, tempo și pauză. Antrenorul poate să editeze ulterior antrenametele și/sau să le steargă în caz dacă nu mai are nevoie (figura 3.12).

Utilizare:

Antrenorul poate să treacă orice nume pentru antrenament care îl poate ajuta să gasească mai ușor antrenamentul ulterior pe urmă va trece numărul de repetări, seturi, tempo precum și pauza, urmând ca la sfârșit să apese pe „Adauga”

Observații:

Numele antrenamentului este obligatoriu iar restul zonelor ramân la decizia antrenorului dacă dorește sau nu.

Nutriție

Nutriția este o zonă la fel de importantă precum antrenamentul deoarece fiecare antrenor știe că pentru a atinge un anumit obiectiv din punct de vedere al antrenamentelor trebuie să avem și o alimentație corespunzătoare. În această zonă antrenorul poate să definească planurile de nutriție care le va putea face împreună cu clientul și apoi să-i atribuie.

Utilizare:

Ca un antrenor să treacă un plan alimentar trebuie să adauge numele planului nutrițional precum și ora în care să fie servit acest plan nutrițional și desigur elementul (masă) care arată ce reprezintă (ex. Musli, supă, paste etc.), cantitatea și caloriile și desigur poate să adauge mai multe elemente nu doar unul singur urmând ca în incheiere să apese pe „Adauga nutriție” pentru salvare (figura 3.13)

Observații:

În zona de nutriție numele nutriției și ora sunt obligatorii iar elementul (masă) , cantitatea și caloriile sunt opționale.

Clienți

Orice antrenor care prin definiția sa întelegem persoană care se ocupă de pregătirea unei persoane iar în cazul nostru antrenorul antrează persoane pe care îi numim clienți.

În zona Clienți un antrenor poate să adauge, editeze, ștearga clienți și evident poate să și adauge progresul său pentru a monitoriza cât de mult a avansat și dacă se ating obiectivele propuse și să poată dovedi prin diagrame acest lucru, precum și o zonă de subscripție, care are ca rol să treacă dacă clientul în cauză a plătit abonamentul pentru antrenament și câte zile mai are din respectiva subscripție (figura 3.14).

Pentru adăugare clienți antrenorul trebuie să apese pe butonul „Adauga”, unde va putea trece date despre client cum ar fi: numele, prenumele, e-mailul, numărul de telefon și date despre corpul său cum ar fi: greutatea, inălțimea, dimensiunea brațelor, picioarelor etc. și la sfârsit va apăsa pe „Adaugă client” ca să fie salvat în sistem (figura 3.15).

Pentru adăugarea de subscripție antrenorul trebuie să aibe deja un client salvat, iar la apăsare îi va apărea o fereastră unde poate să aleagă tipul de subscripție, perioada de start și perioada de sfârșit urmând să apese pe „Salvează” iar antrenorul va observa în dreptul butonului de subscripție că apar câte zile rămase mai are clientul la care i-a fost adăugată subscripția (figura 3.16).

Pentru adăugarea progresului, la fel ca și la subscripție avem nevoie de un client existent, dacă la adăugarea de client s-au adăugat deja informații despre client (greutate, înălțime, diferite dimeniuni ale trupului) ar trebui să vedem deja un progres adăugat inițial, dacă nu, se poate adăuga prin butonul de „Adaugă” care e asemănător cu cel de la pagina de adăugare client doar că lipsesc câmpurile de informații personale ale clientului (figura 3.17).

La adăugare client câmpurile Nume și Prenume sunt obligatorii restul câmpurilor fiind opționale.

La adăugare de subscripție este obligatoriu să se aleagă tipul de subscripție. O alta observație, zilele vor începea să scadă doar după ce data de start începe să devină data curentă. (ex subscripția începe din data de 25.06.2016 iar data curentă este 20.06.2016 zilele vor scădea abia din data de 26.06.2016 și nu înainte)

La adăugarea progresului se afișează 2 valori în diagramă indiferent de câte valori s-au adăugat ulterior. Mai exact prima oară se afișează valorile din progresul care s-a adăugat prima oară și ultimul progres adăugat.

Sugestii

Pentru că fiecare antrenor de fitness/cross/bodybuilding are tipuri diferite de antrenament și cerințe diferite această zonă este dedicată pentru trimtirea de sugestii și/sau contact al echipei unde vom ține cont de fiecare sfat pentru îmbunătățirea aplicației (figura 3.18).

Utilizare:

Antrenorul dacă are o sugestie sau o idee de implementare nouă, trebuie să-și adauge numele, e-mailul și mesajul care să descrie pe larg informațiile necesare ca în final să apese pe butonul „Trimite”.

Observații:

Numele, e-mailul și mesajul sunt câmpuri obligatorii iar e-mailul trebuie să fie unul valid din punct de vedere al formatului și mesajul trebuie să fie de minim 5 caractere.

Setări

Zona este dedicată dacă antrenorul personal dorește să-și schimbe parola. Pentru a-și schimba parola trebuie înainte să-și treacă „parola actuală” iar apoi „parola nouă” să confirme repetând parola și să apese pe „Schimba parola” (figura 3.19).

Utilizare:

Ca să-și schimbe parola antrenorul va trebui să-și treacă parola actuală, parola nouă și să-și confirme parola repetând-o din nou în campul „Confirma parola” pe urmă sa apese pe butonul „Schimba parola”.

Observații:

Toate câmpurile sunt obligatorii, câmpul parolă nouă și confirrmă parola trebuie să coincidă și trebuie să respecte și complexitatea parolei.

Figura 3.19 Setări

Ieșire

Dacă un antrenor dorește să se delogheze poate să o facă apăsând butonul „Ieșire” care îl va redirecționa la pagina de început.

Utilizare:

Doar se apasă pe butonul „Ieșire” și va fi redirecționat la pagina de început

Observații:

Dacă clientul este autentificat delogarea va avea loc automat la o zi după logare.

Capitolul 4. Concluzii

Scopul aplicației este să vină în ajutorul antrenorilor de fitness să fie mai eficienți care la rândul său rezultă în a avea mai mulți clienți. A fost realizată cu ajutorul informațiilor primite de la diverși antrenori de fitness din Oradea și realizată dupa nevoile lor. Avantajul aplicației web Persoanl Trainer Agenda comparativ cu metodele convenționale folosite până acum de antrenorii de fitness (foi, aplicații gen notes, etc.) oferă toate secțiunile necesare (antrenament, clienți, nutriție etc.) într-un singur loc ceea ce rezultă că antrenorul oferă un serviciu mult mai profesionist clienților pe care îi antrenează.

La utilizarea ASP.NET Core au fost niște provocări destul de serioase deoarece de la început am decis să folosesc cele mai noi tehnologii iar pentru asta a trebuit sa rezolv comunicarea cu baza de date și incompatibilitatea între module. O altă provocare a fost când cei de la ASP.NET Core au schimbat compilatorul de la DNX la .NET CLI lucru care a urmat în lanț alte actualizări ale modulelor și incompatibilități.

Aplicația se dorește a fi comercială, iar într-un viitor apropiat se dorește să se bazeze pe abonament de tip freemium (serviciile de bază sunt gratuite urmând ca serviciile mai sofisticate să fie contra cost), mai exact fiecare antrenor va putea înregistra un număr de clienți gratuit urmând ca apoi să plătească o sumă simbolică pe an pentru mentenanța aplicației și a serviciilor de hosting.

De asemenea în funcție de sugestiile antrenorilor de fitness aplicația va suferi niște modificări de interfață unde vor fi adăugate funcționalități noi care să vină în ajutorul acestora. Una dintre funcționalitățile care o voi implementa ce va fi opțională pentru antrenorii de fitness va fi contactul prin SMS al clienților pentru reamintirea programării antrenamentului precum și integrarea cu serviciul de calendar de la Google.

Pe partea internă aplicația va suferi niște modificări pe partea de client, unde se va folosi Angular JS pentru comunicarea dintre client și server. Iar cum aplicația este responsive (pentru diferite rezoluții mai exact) poate fi folosită și pe telefoane sau tablete. Într-un viitor nu foarte îndepărtat se va dezvolta o aplicație dedicată pentru aceste dispozitive pentru un management mai bun și aplicația să poată să fie folosită și offline în cazul în care antrenorul nu are internet.

Partea de autentificare și înregistrare va fi implementată folosind autentificări și înregistrări cu Facebook/Google și desigur tot aici va fi adăugată/implementată opțiunea de 2-ways-authentication (dublă autentificare) care aduce un plus de securitate, mai exact dacă un utilizator alege această opțiune va trebui să-și adauge numărul de telefon pe care va primi un cod unic ce va trebui să-l introducă la autentificare. Renunțarea la cookie-uri pentru stocarea datelor de autentificare și folosirea token-urilor pentru autorizare și autentificare pentru adăugarea înca unui strat de autentificare.

Arhitectura Onion să fie implementată complet prin adăugarea de un nivel nou cel de servicii care va face ca, comunicarea atât cu aplicația web cât și cele de mobile să fie făcută mult mai ușor. Adăugare de API pentru mobile, pentru a crea un nivel de comunicare între aplicație și dispozitive mobile la care se va adăuga și un strat de securitate.

Bibliografie

[1] http://ro.wikipedia.org/wiki/HTML#Introducere consultat la 01.05.2016

[2] http://en.wikipedia.org/wiki/HTML#WYSIWYG_editors, consultat la 02.05.2016

[3] http://en.wikipedia.org/wiki/HTML#Elements, consultat la 12.05.2016

[4] http://en.wikipedia.org/wiki/HTML#Attributes, consultat la 12.05.2016

[5] http://en.wikipedia.org/wiki/HTML#Markup, consultat la 12.05.2016

[6] http://en.wikipedia.org/wiki/HTML#Version_history_of_the_standard, consultat la 12.05.2016

[7] http://ro.wikipedia.org/wiki/HTML5#Markup consultat la 12.05.2016

[8] http://www.spidersolutions.ro/blog/Introducere-in-Cascading-Style-Sheets/27 consultat la 13.05.2016

[9] http://en.wikipedia.org/wiki/Css#Syntax consultat la 13.05.2016

[10] http://ro.wikipedia.org/wiki/Javascript consultat la 13.05.2016

[11] http://ro.wikipedia.org/wiki/Javascript#Utilizare consultat la 13.05.2016

[12] http://ro.wikipedia.org/wiki/Jquery consultat la 13.06.2016

[13] http://ro.wikipedia.org/wiki/Jquery#Extensii, consultat la 13.06.2016

[14] https://en.wikipedia.org/wiki/JSON, consultat la 13.06.2016

[15] http://stackoverflow.com/tags/chart.js/info, consultat la 13.06.2016

[16] https://en.wikipedia.org/wiki/Font_Awesome, consultat la 13.06.2016

[17] https://en.wikipedia.org/wiki/ASP.NET_Core, consultat la 16.06.2016

[18] https://en.wikipedia.org/wiki/Microsoft_SQL_Server, consultat la 16.06.2016

[19] https://en.wikipedia.org/wiki/Microsoft_Azure, consultat la 16.06.2016

[20] http://www.codeproject.com/Articles/808400/Onion-Architecture-in-ASP-Net-MVC, consultat la 16.06.2016

[21] https://debugmode.net/2015/04/17/step-by-step-implementing-onion-architecture-in-asp-net-mvc-application/, consultat la 16.06.2016

[22] https://www.incredible-web.com/media/1047/onion-arch.jpg, consultat la 16.06.2016

[23] http://www.codeproject.com/Articles/528117/WebForms-vs-MVC, consultat la 16.06.2016

DECLARAȚIE DE AUTENTICITATE A

LUCRĂRII DE FINALIZARE A STUDIILOR

Titlul lucrării

APLICAȚIE WEB RESPONSIVE PENTRU ANTRENORII DE FITNESS

Autorul lucrării

MOISOIU MIRCEA MIHAI

Lucrarea de finalizare a studiilor este elaborată în vederea susținerii examenului de finalizare a studiilor organizat de către Facultatea Inginerie Electrică și Tehologia Informației din cadrul Universității din Oradea, sesiunea iulie a anului universitar 2015-2016.

Prin prezenta, subsemnatul Moisoiu Mircea Mihai, CNP [anonimizat], declar pe proprie răspundere că această lucrare a fost scrisă de către mine, fără nici un ajutor neautorizat și că nici o parte a lucrării nu conține aplicații sau studii de caz publicate de alți autori.

Declar, de asemenea, că în lucrare nu există idei, tabele, grafice, hărți sau alte surse folosite fără respectarea legii române și a convențiilor internaționale privind drepturile de autor.

Oradea,

5.07.2016 Semnătura