Si acelasi cod scris in Angular.js: [616131]

IntroducereCartile au un rol extrem de important in viata student: [anonimizat], insa student: [anonimizat], ceea ce ii impune pe studenti sa economiseasca pe alte lucruri. Fiind in asa pozitie, o mare parte din studenti cauta alternative. Spre exemplu, gasirea gratuita a cartii in mod digital, ori s-o imprumute de la o biblioteca. In primul caz, sansa de a gasi gratis cartea pe internet este minima din cauza ca nu este legal. Se ajunge la concluzia ca cea mai buna metoda de a gasi o carte necesara este de a face o cautare prin biblioteci, dar nici asta nu ofera solutia instantaneu. Problema e in ceea ca nu toate bibliotecile au cartile necesare pentru un student. Luand in consideratie ca orasul are multe biblioteci, gasirea unei carti poate fi extrem de greu, si consuma mult timp. Student: [anonimizat], calatorind prin tot orasul numai pentru a gasi o carte, acum va avea sansa sa indeplineasca totul doar prin cateva click-uri. 
Am decis sa implementez o aplicatie web, din urmatoarele motive: 1.Nu depind de sistemul de operare, deci prin intermediul unui web browser aplicatia poate fi rulata de pe orice sistem de operare. 2.Actualizarile si upgrade-urile sunt foarte usor de facut. Practic toate modificarile se fac pe server, deci nu e nevoie sa instalam/ reinstalam aplicatia de fiecare data cand apare o noua actualizare din cauza ca toate modificarile se propaga automat catre toti utilizatorii. De obicei cand se face upgrade la codul server, e nevoie de un upgrade si pe codul client, in acest caz pe fiecare computer utilizator va trebui reinstalata aplicatia client. 3.Toate calculatoarele care dispun de un web browser pot accesa aplicatia, de aici rezulta ca aceasta poate fi accesata din orice punct de pe glob. 1

4.Backup-ul datelor este simplu de realizat, din cauza ca datele sunt stocate centralizat. 5.Aplicatiile web pot fi accesate de pe telefoane si tablete, intrucat au un browser incorporat. 6.Din cauza ca majoritatea prelucrarilor si modificarilor sunt facute pe server, resursele necesare ale calculatorului / dispozitivului de pe care e accesata aplicatia sunt minime.

2

Aplicatiile webAplicatia web – o aplicatie client-server, clientul fiind reprezentat de browser, iar serverul de web server. Logica aplicatiei web este distribuita intre server si client, datele fiind salvate pe server si schimbul de informatii si date se face in retea. Una din avantajele unei astfel de abordari este faptul ca clientul nu depinde de sistemul de operare al utilizatorului, din cauza asta aplicatiile web sunt cross-platform. Aplicatiile web au inceput a prinde popularitate la inceputul anilor 2000. Caracteristici ale aplicatiilor webAplicatiile web difera de celelalte aplicatii prin anumite particularitati, acestea fiind caracteristicile particulare cum ar fi frecventa de actualizari al aplicatiei si caracteristici care nu reprezinta aplicatiile aplicatiile non-web cum ar fi navigarea continutului. Aceste caracteristici depind si de tipul de aplicatie web, de exemplu pentru sistemele e-commerce se va pune accent asupra actualizarilor aplicatiei si a continutului acesteia, ceea ce nu va fi nevoie pentru o aplicatie tip sistem informational pur cum ar fi prezentarile virtuale. In dependinta de aceste caracteristici conceptele, tehnicile si metodele de proiectare software se vor schimba in functie de fiecare aplicatie web. Exista 3 dimensiuni de caracteristici si acestea sunt produs, utilizare si dezvoltare.

3

Caracteristicile produselorAceste caracteristici reprezinta segmentul cel mai important al aplicatiilor, ele fiind continutul, structura de prezentare adica interfata utilizatorului si hipertextuala adica structura de navigare.
Continut Aplicatiile web sunt accesate si utilizate datorita continutului pe care il ofera, din acest motiv dezvoltatorii mai trebuie sa indeplineasca pe langa rolul de programator si rolul de autor. Cu cat aspectul si continutul aplicatiei va arata mai bine, cu atat mai multe accesari si vizualizari va avea aplicatia. 
Ce tine de modul de organizare, continutul poate fi oferit sub forma de imagini, tabele, diferite animatii , imagini video si audio, etc. In functie de domeniul aplicatiei, continutul trebuie updatat mereu. De exemplu site-urile de stiri, facand parte din mediul de distribuire a informatiei, va trebui mereu actualizat. Un impediment ar fi daca nu ar exista posibilitatea de a actualiza intr-un mod cat mai usor si rapid. Inexistenta unei astfel de posibilitati ar insemna mai mult timp pierdut pe actualizare, ceea ce ar rezulta nesatisfacerea cererilor utilizatorilor. 

Ce se intampla daca informatia de pe site nu e actualizata la timp?
Un exemplu ar fi un sistem de tranzactii al unei afaceri. Din cauza ca preturile nu sunt afisate 4

corect incorect (nu s-a actualizat informatia despre pret), ar duce anularea comenzilor actuale, scaderea vanzarilor al stocului de produse existent, probleme legate de livrarea produselor din cauza ca pe site ar aparea produsul disponibil, dar de fapt el nu este in stoc, etc. In cazul dat, provocarea cea mai mare ar fi garantarea calitatii datelor indiferent de volumul mare de actualizari. Hipertext Printre caracteristicile aplicatiilor web se numara si natura non-liniara a documentelor hipertextuale. [1] Vannevar Bush a prezentat folosirea paradigmei hipertext ca baza pentru structurarea si prezentarea informatiei, elementele bazei fiind nodurile, legaturile si ancorele. Un nod este o unitate de informatie unic identificata care are continut propriu. De exemplu un document HTML care ar putea fi accesat printr-un URL se numeste nod. Numim legatura calea de la un nod la altul. O ancora este sursa sau destinatia unei legaturi. Ancora reprezinta o zona din continutul nodului, iar in web ancorele pot exista doar in documente de tip HTML. Trasaturile esentiale a acestei paradigme sunt: 1.Non-liniaritatea continutului scris de autor / dezvoltator si cel receptionat de catre utilizator. Aplicatiile web se deosebesc de aplicatiile non-web prin citirea sistematica relativa, stereotip implicat de catre hipertext. Stilul dat de citire dezvolta abilitatea de a invata al utilizatorului. Pentru dezvoltatori a fost mereu o provocare crearea unui hipertext care sa contina un continut lizibil, bine structurat si definit, scopul fiind potentialele probleme de dezorientare si supra-incarcare cognitiva. 2.Dezorientarea si supra-incarcarea cognitiva sunt problemele pe care le intalneste dezvoltatorul in crearea unui hipertext. Dezorientarea fiind pierderea pozitiei intr-un document non-liniar si supra-incarcarea cognitiva reprezentand un efort suplimentar pentru memorarea a mai multor lucruri. Pentru a nu permite utilizatorilor sa isi piarda orientarea in aplicatie, ar putea fi implementate niste lucruri cum ar fi afisarea timpului petrecut si a timpului accesarii aplicatiei, o cautare mai avansata cu cuvinte cheie, utilizarea sabloanelor in 5

documente hipertext pentru a modela aspectul, o denumire cat mai inteligenta pentru legaturile din aplicatie. Prezentarea Prin prezentare se are in vedere designul aplicatiei web, caracteristicile fiind: 1.Estetica. In aplicatiile web conteaza foarte mult cum arata site-ul. Un design cat mai frumos si interesant, o interfata cat mai user-friendly sunt factorii centrali pentru o prezentare vizuala a aplicatiei de succes. 2.Auto-explicarea. Pe langa estetica, continutul aplicatiei web trebuie sa fie unul sugestiv, astfel incat sa se poata utiliza aplicatia fara studierea unei documentatii. Caracteristici asociate utilizariiUtilizatorii aplicatiilor web difera de utilizatorii celorlalte tipuri de aplicatie prin faptul ca acestia sunt eterogeni. Dispozitivele cu care te poti conecta la aplicatie difera prin caracteristicile software si hardware, este imposibil de prevazut popularitatea aplicatiei, cati utilizatori ar putea fi conectati in acelasi moment, care este ora sau locatia de unde e accesata aplicatia de catre fiecare utilizator. Din cauza acestor factori, dezvoltatorii trebuie sa trateze toate cazurile astea si sa adapteze aplicatia la anumite contexte, acestea fiind: 1.Context social – Utilizatorii. Spatiul web e un mediu in care utilizatorul nu are nici o obligatie, de aici rezulta ca utilizatorul poate sa acceseze si sa paraseasca o aplicatie web oricand doreste el. Pe langa asta el nu trebuie sa fie fidel unei singure aplicatii web, cu ajutorul motoarelor de cautare el poate gasi informatia cautata mult mai rapid accesand mai multe aplicatii web. 6

2.Context tehnic – Reteaua si dispozitivele. 2.1.Tehnic vorbind, aplicatiile web sunt aplicatii client-server. Atunci cand construim o aplicatie web, trebuie sa tinem cont de cum facem setarea conexiunii intre client si server, factorii cheie pentru o transmitere a datelor cat mai eficienta si o calitate sporita a serviciului sunt siguranta si stabilitatea unei conexiuni. 2.2.Distribuirea pe mai multe platforme. De obicei, o aplicatie web este conceputa, pe langa calculatoare, sa poata fi accesata si de pe telefoanele mobile care au un browser incorporat, indiferent de softwarre-ul instalat sau dimensiunea ecranului. 3.Contextul natural – locatia si ora. Este foarte important sa stim locatia utilizatorilor care acceseaza aplicatia noastra. In caz ca aplicatia web are implementat un serviciu care cere de la utilizator acces la locatia lui, iar acesta nu permite aplicatiei sa ii afle pozitia geografica, atunci serviciul dat nu va mai putea fi folosit pana cand acesta nu o sa permita accesul catre locatia din care acceseaza aplicatia. Un alt lucru care ar spori accesarea aplicatiei este disponibilitatea globala, adica utilizatorii sa poata sa acceseze aplicatia la orice ora indiferent de locatia in care se afla. Asta ar insemna ca aplicatia trebuie sa fie stabila oricand, iar serverul pe care lucreaza aceasta, sa fie optimizat cat mai bine. Caracteristici asociate dezvoltariiProcesul de dezvoltare a unei aplicatii incepe, dupa parerea mea, de la echipa de dezvoltare si procesele si tehnicile de dezvoltare folosite, cat si infrastructura tehnica in care lucreaza programatorii. 1.Echipa de dezvoltare
Fiind un domeniu relativ nou, interesul sporit de a invata si dezvolta aplicatii web este vazut la programatorii mai tineri, acestia fiind interesati de a invata tehnologii noi. Dezvoltarea unei aplicatii web cuprinde mai multe domenii, pe langa implementarea tehnica a aplicatiei programatorii trebuie sa stie cum sa creeze continutul aplicatiei, cum sa prezinte acest 7

continut, si cum sa il afiseze pe pagina. Avand posibilitatea de a integra diferite sisteme open-source in aplicatie, aceste sisteme fiind create pentru a face aplicatia sa indeplineasca anumite functionalitati si/sau sa arate mai user-friendly. 2.Integrarea
O caracteristica specifica aplicatiilor web este integrarea interna si externa. Integrarea interna reprezentand integrarea cu un serviciu de baze de date din care putem extrage anumite date care mai apoi sa le afisam in aplicatia noastra. Integrarea externa fiind reprezentata de integrarea cu anumite servicii externe. Fiind o comunitate mare, sunt o multime de servicii din care putem alege, datorita faptului ca fiecare serviciu are documentatia lui, programatorul poate decide ce serviciu extern vrea sa foloseasca. 3.Infrastructura tehnica
Dezvoltarea aplicatiilor web depinde de cum e configurat browserul si serverul. Serverul poate fi configurat cum doreste programatorul, insa acesta nu poate schimba nicicum setarile browserului folosit de utilizator. Apar probleme de compatibilitate intre aplicatie si browser, problemele fiind din cauza versiunii browserului si a extensiilor acestuia. 
De multe ori se intampla ca din cauza deadline-urilor impuse de client, programatorii sa nu implementeze intr-un mod corect si eficient anumite functionalitati, astfel produsul poate ajunge pe piata avand diferite bug-uri.
Programatorul trebuie sa fie flexibil si sa se poata adapta la anumite conditii, pentru ca deseori se intampla ca planul setat initial pentru implementarea aplicatiei sa nu fie respectat.
Atunci cand se cere ca aplicatia web sa fie implementata intr-un timp cat mai scurt, toate task-urile de implementare sunt impartite, echipe sunt impartite in subgrupuri si se lucreaza in paralel la fiecare task. Aceste subgrupuri sunt formate in fuctie de taskul pe care il are.[2]
8

Caracteristici tehniceUn avantaj substantial a construirii unei aplicatii web pentru suportul de functii standarte a browserului este faptul ca aceste functii vor fi executate indiferent de sistemul de operare al utilizatorului. In loc sa scriem cate o versiune de aplicatie pentru Microsoft Windows, Mac OS X, GNU/Linux si alte sisteme de operare, aplicatia se creeaza o singura data pentru sistemul de operare ales arbitrar si se desfasoara pe acel sistem. Cu toate acestea, implementarea diferita HTML, CSS, DOM si ale altor specificari in browser poate fi o problema in dezvoltarea aplicatiei web si a suportului acesteia. Pe langa asta, posibilitatea utilizatorului de a modifica anumiti parametri ai browserului cum ar fi dimensiunea fontului, culorile, dezactivarea suportului aplicatiei, poate deveni o problema in functionarea corecta a aplicatiei. O abordare mai putin universala este folosirea Adobe Flash, Silverlight sau Java applet la realizarea partiala sau completa a interfetei utilizator. Din cauza ca majoritatea browserelor suporta aceste tehnologii, de regula cu ajutorul plug-in-urilor, aplicatiile Flash sau Java pot fi implementate cu usurinta, deoarece acestea ofera programatorului un control asupra interfetei utilizator, e posibila tratarea erorilor de incompatibilitate in configuratiile browser-ului, dar fiind imposibila realizarea Java si Flash pe partea de client, folosirea acestora ar putea crea diverse complicatii. Din acest motiv tehnologia Adobe Flash nu mai este suportata de catre browser-ele Safari, Chrome, si alte browsere populare.

9

Tehnologii utilizate
Mean.jsMEAN.JS este o solutie full-stack JavaScript cu care putem construi o aplicatie web rapida, robusta si mentenabila in productie, folosind MongoDB, Express, AngularJS si Node.js -De ce MEAN.JS? Crearea si mentenanta unei simple si lizibile solutii open-source care poate fi aplicata in proiectele voastre, puteti mentine aplicatia organizata, evitand problemele capcana pe care le putem intalni in alte limbaje. Angular.jsAngular.js e un open-source framework care permite crearea unei aplicatii web de tip SPA (Single Application Page). Framework-ul a aparut in 2009 si a castigat popularitate foarte repede, devenind cel mai utilizat framework pentru JavaScript Avantajele Angular.js 1.O comunitate foarte mare.
Sa incepem de la faptul ca Angular.js are o comunitate foarte mare. Din ea fac parte dezvoltatorii acestui framework, si ceilalti care doresc sa contribuie la dezvoltarea acestuia. Angular.js este un subiect foarte discutabil la concursurile de hackathon si in forumurile de IT, sunt organizate o multime de conferinte legate de Angular.js. Exista multe carti si resurse online despre Angular.js pentru programatori. Pentru client asta inseamna ca daca ar alege Angular.js, atunci proiectul sau va fi in trend si o sa poata mereu sa gaseasca programatori. 2.Declararea codului
La crearea templatei in Angular.js se aplica paradigma de declarare. Asta face codul mult mai 10

simplu, lizibil si usor de suportat, din cauza ca se scrie doar rezultatul final dorit in loc de toti pasii ca sa ajungi la acel rezultat. De exemplu, vedeti un fragment de cod scris in JavaScript:
Si acelasi cod scris in Angular.js:


3.Utilizarea directivelor
Angular.js foloseste ca limbaj de templata HTML. El se extinde cu ajutorul directivelor MongoDBMongoDB este o baza de date open source care poate fi rulata pe orice platforma, este o baza de date de tip document care ofera o performanta mare fiind accesibila oriunde, si o scalabilitate 11

usoara. MongoDB lucreaza cu colectii si documente. 
1.MongoDB stocheaza datele intr-un format flexibil de tip JSON, ce inseamna ca campurile dintre documente pot varia, iar structura de date poate fi schimbata oricand. 2.Obiectele care vin din codul aplicatiei sunt mapate in documente, ceea ce inseamna o operare a datelor foarte usoara. 3.Accesarea si analizarea datelor intr-un mod eficient prin indexare, agregare in timp real si query-uri ad hoc. 4.MongoDB e o baza de date gratuita si open-source. Node.jsNode.js este o platforma construita pentru dezvoltarea aplicatiilor server-side. Aplicatiile Node.js sunt scrise in limbajul JavaScript, si pot fi rulate pe orice sistem de operare. -Avantajele Node.js 1.Dezvoltarea web intr-un limbaj dinamic (JavaScript) care parseaza datele foarte rapid. Este mult mai rapid decat Ruby, Python, Perl. 2.Abilitatea de a mentine mii de conectiuni cu costuri minime intr-un singur proces. 3.JavaScript e perfect pentru instructiuni de repetare a evenimentelor prin functii. Event-urile initiate de catre user pot fi vazute in consola browser-ului. 4.Foarte multi oameni deja stiu JavaScript, chiar si cei care nu pretind a fi programatori. 5.Folosirea limbajului Javascript ca limbaj de frontend dar si ca limbaj de server reduce riscul de conflicte intre 2 medii de dezvoltare care comunica prin structuri de date JSON. 12

-Caracteristicile Node.js 1.Toate API-urile din librariile Node.js sunt asincrone, adica serverul nu o sa astepte ca API-ul sa returneze datele. El pur si simplu o sa faca call-ul catre urmatorul API, iar datorita mecanismului "Events" acesta ajuta serverul sa primeasca un raspuns de la call-ul catre anteriorul API. 2.Fiind construit pe aceeasi masina de compilare a codului JavaScript cu Google Chrome, libraria Node.js executa foarte rapid codul. 3.O foarte mare comunitate, si foarte multe librarii bazate pe un manager de pachete (npm). Express.jsExpress este un flexibil web application framework pentru Node.js, care ofera un set de caracteristici viguros pentru aplicatii web si mobile.
-Avantajele Express.js 1.Organizeaza aplicatia pe partea de server intr-o arhitectura MVC 2.Putem lucra in diferite sisteme de template, cum ar fi EJS, Jade, Dust.js etc. 3.Putem administra totul, incepand de la rutare si terminand cu HTTP requesturi si views. npmnpm este un manager de pachete pentru Node.js. Scopul principal al npm-ului este incarcarea dependintelor in proiect. Asta insemnand ca tu poti specifica toate dependintele pe care le are un proiect in fisierul "package.json" si mai apoi oricine va dori sa lucreze la proiect, va rula npm install si imediat va avea toate dependintele instalate. Pe langa asta, ai posibilitatea sa alegi versiunea fiecarei dependinte, sa setezi versiunea maxima permisa pe care o poate avea respectiva dependinta, ca sa previi generarea anumite erori de compatibilitate. 13

In aplicatia noastra, cu ajutorul npm am instalat o multime de dependinte, acestea fiind: 1.Gulp e un task runner pentru JavaScript care permite automatizarea taskurilor, de exemplu: •la fiecare modificare si salvare al unui fisier, automat se face refresh la browser; •gruparea si modificarea librariilor si a stylesheet-urilor; •rularea unit testelor; •compilarea fisierilor SASS/LESS in fisiere css; 2.Gulp-inject + wiredep: reutilizarea de cod, injectarea fisierelor de css, javascript in fisierele de html. Plusul cel mai mare pe care il vad eu e ca pot defini formatul fisierelor pe care vreau sa le injectez, si de fiecare data cand o sa apara noi fisiere css, javascript, ele automat o sa fie injectate in locurile unde e declarata injectia. Wiredep-ul creeaza legatura intre fisierul in care urmeaza sa fie injectate fisiere de frontend si task-ul pe care il are gulp-ul. 3.gulp-jscs and gulp-jshint: aceste 2 dependinte au grija ca codul pe care il scriem sa fie unul cat mai curat, cat mai bine structurat, si in caz ca facem vre-o eroare, aplicatia ne da hint-uri prin warning-uri in ce fisier, ce linie de cod din fisier nu e bine scrisa.
4.gulp-nodemon: scopul nodemon-ului este sa urmareasca tot ce se intampla in fisierele aplicatiei node, si de fiecare data cand se face o modificare in fisiere, el automat o sa restarteze aplicatia node.
5.body-parser: este utilizat atunci cand vrem sa facem un POST, PUT, PATCH Request. rolul lui este sa parseze datele care vin din HTTP requesturi in req.body, si sa folosim datele pentru 14

a insera in baza de date.
6.EJS: este o templata JavaScript. Rolul EJS-ului este sa combine codul de JavaScript si un template ca sa produca un fisier HTML.
7.passport: un middleware de autentificare flexibil si modular. Passportul cu ajutorul functiei de serialize determina ce date din obiectul user ar trebui salvate in sesiunea data, iar cu ajutorul unui key (care e generat atunci cand apelam functia de serialize) care il trimitem ca parametru in functia de deserialize, scoatem user-ul din sesiunea data. bowereste un manager de pachete pentru partea de frontend. Bower se ocupa de administrarea fisierelor de HTML, CSS, JavaScript. El are grija ca pachetele impreuna cu dependintele lor sa aiba versiunea corecta. Toate dependintele lui bower pot fi gasite in fisierul “bower.json". In aplicatia noastra, cu ajutorul bower am instalat o multime de dependinte, acestea fiind: 1.Bootstrap: e un open-source framework pentru CSS si JavaScript creat de Twitter cu scopul de a crea mai usor si mai rapid o aplicatie web responsive. 
Bootstrap-ul mai poate fi vazut ca o colectie de clase definite in CSS si JavaScript. Aceasta colectie permite programatorului sa creeze repede si usor o aplicatie web responsive, adica care reda continutul scalat indiferent de dimensiunea ecranului.
De ce Bootstrap? •Cunoscand HTML si CSS, e foarte usor sa incepi sa lucrezi in Bootstrap •Este open-source •Ofera un design responsive 15

•Un sistem de grile bine pus la punct •Contine stilizare pentru majoritatea elementelor HTML •Ofera un set de componente functionale,customizabile si care arata foarte bine •O documentatie foarte buna •Este recunoscut de toate browserele populare 2.Font Awesome: e un tool-kit de fonturi, imagini si iconite creat de Twitter ca sa lucreze impreuna cu Bootstrap-ul. Setul de iconite e scalabil si poate fi customizat cu CSS. De ce Font Awesome? •O colectie care contine peste 500 de iconite •Putem controla si customiza iconitele cu CSS •Creat initial pentru a lucra impreuna cu Bootstrap, Font Awesome e compatibil cu toate frameworkurile •O scalabilitate infinita, ce inseamna ca iconitele arata bine la orice dimensiune

16

Bibliografie[1] – Bush, V ., As We May Think, The Atlantic Monthly, 176 (1), 1945, pp. 101-108. [2] – McDonald, A., Welland, R., A Survey of Web Engineering in Practice, Department of Computing Science. Technical Report R-2001-79, University of Glasgow, Scotland, 2001.
17