Documente Academic
Documente Profesional
Documente Cultură
FACULTATEA DE INFORMATICĂ
LUCRARE DE LICENŢĂ
Start2Travel
propusă de
Coordonator ştiinţific
FACULTATEA DE INFORMATICĂ
Start2Travel
Coordonator ştiinţific
DREPTURILOR DE AUTOR
toate fragmentele de text reproduse exact, chiar şi in traducere proprie din altă
limbă, sunt scrise intre ghilimele şi deţin referinţa precisă a sursei;
codul sursă, imaginile etc. preluate din proiecte open-source sau alte surse sunt
utilizate cu respectarea drepturilor de autor şi deţin referinţe precise;
Iaşi,
_____________________
DECLARAŢIE DE CONSIMŢĂMÂNT
Iaşi,
_______________
Cuprins
Introducere ...................................................................................................................... 1
I. Tehnologii ................................................................................................................... 3
A. Structura proiectului .............................................................................................. 6
B. Componente ........................................................................................................... 8
1. NgTable .............................................................................................................. 9
2. NgDialog .............................................................................................................. 10
3. File saver .......................................................................................................... 11
4. Moment............................................................................................................. 12
5. Angular loading spinner ................................................................................... 12
II. Arhitectura aplicației ................................................................................................ 13
A. Structura bazei de date ......................................................................................... 18
III. Structura aplicației în funcție de rol ....................................................................... 20
A. Rolul de Angajat .................................................................................................. 22
O delegație nouă va trece prin mai multe stări. În primul pas este adăugată de
către managerul de proiect, în sistem. Următorul pas este ca asistentul de birou să
aleagă o listă cu zboruri disponibile pentru data și țara de destinație specificate de
manager, pentru ca acesta din urmă să aleagă și să aprobe cel mai potrivit zbor pentru
acea călătorie. După ce toate datele sunt disponibile, se pot descărca actele necesare
pentru departamentul de finanțe care vor fi automat completate cu datele delegației cât
și datele angajatului sau angajaților ce vor pleca.
Pentru toate acțiunile ce necesită atenția celor implicați în proces, se vor trimite
notificări prin email către utilizatorii vizați.
Motivaţia alegerii temei şi a modului de lucru
1 Eroare in aplicație.
2 Team Foundation Server (Microsoft)
Impărțirea pe sprint-uri este un mare avantaj atât pentru echipă cât și pentru
clienții ce doresc un produs finit de cea mai bună calitate, deoarece erorile în
dezvoltare și în modul de lucru nu se vor propaga în viitor, aceastea putând fi raportate
și fixate imediat. Din punctul de vedere al echipei, aceasta se va concentra să producă
funcționalități mici, ceea ce previne pierderea concentrării sau pierderea motivației.
I. Tehnologii
- Servicii REST3: data layer (Entity Framework Code First), business layer
(CQRS4) şi service layer (ASP.NET Web API);
Orice dezvoltator își dorește să scrie cod puțin, dar de calitate, iar acest lucru se
poate realiza folosind biblioteca în discuție, deoarece ea implementează eficient
conceptul MVC7. În timpul implementării dezvoltatorul nu trebuie să se preocupe de
legarea explicită a celor 3 componente.
1. function usersService(Restangular) {
3.
4. function getUsers() {
5. return Restangular.all('api/employees').customGET("");
6. };
7.
8. function getEmployeeById(employeeId) {
operații. Acesta se poate folosi pentru a specifica ce urmează să se întâmple cand o operație
reușește sau cand nu.
10 Asynchronous JavaScript and XML.
9. return Restangular.one('/api/employees', employeeId).get();
10. };
11.
14. };
15.
18. };
19. usersService = {
25. };
26.
1. .state('main.delegationsByName.add-del', {
2. url: '/add-del/:id',
3. controller: 'delegationsByNameAddController',
4. controllerAs: 'vm'
5. });
A. Structura proiectului
11 http://yeoman.io/
În proiectul prezentat s-a mai folosit și GruntJS12 – un tool pentru
automatizarea sarcinilor precum: minificarea codului, rularea locală a aplicației,
crearea unei distribuții sau personalizarea precum și adăugarea unor noi sarcini dorite
de utilizator precum: copierea de fișiere ce provin din surse externe, crearea de
distribuții pentru diferite platforme, etc.
12 http://gruntjs.com/
B. Componente
Crearea unor noi funcționalități poate genera o serie de erori în gândire, ceea ce
necesită testare amănunțită, deci implicit resurse consumate. Atunci când resursele nu
ne permit reimplementarea unei funcționalități probabil existente, soluția cea mai bună
este să căutăm o componentă open-source pe care să o putem folosi cu încredere,
aceasta de obicei fiind testată de către cei ce au oferit codul sau de către alți utilizatori
care au raportat problemele găsite.
13 Sau coding style-guide – set de reguli pentru anumite tehnologii ce prezintă un standard
sau cea mai bună abordare pe anumite teme
14 Lucru recomandat a se face înainte de a lansa produsul în producție. În timpul dezvoltării
plasate la diferite noduri ale unei reţele. Nodurile rețelei conlucreaza pentru a satisface rapid
și eficient cererile de conținut Web ale utilizatorilor
În continuare se vor prezenta pe scurt câteva dintre componentele folosite în
implementarea aplicației prezentate. Acestea au fost integrate cu bower al cărui avantaj
este că avem fișierul de configurare cu toate modulele adăugate în proiect, prin urmare
este necesar să avem pe TFS doar acest fișier, nu tot folderul ce conține codul sursa a
tututor componentelor. Atunci când un alt dezvoltator va prelua proiectul local, acesta
va trebui doar să ruleze comanda bower install16 ce îi va aduce automat toate pachetele
dependință a proiectului. La fel se va proceda şi pentru modulele dependință pentru
Node17.
1. NgTable
2. page: 1,
3. count: 5,
4. }, {
6. total: vm.users.length,
10. $defer.resolve(users);
11. }
12. }
13. });
2. NgDialog
NgDialog este o componentă ce furnizează dialoguri şi ferestre de tip pop-up
pentru aplicații AngularJS, aceasta fiind singura dependință a modulului.
este închis, iar în acest caz se redirecționează către starea (ruta) precedenta şi se
reactualizează datele pentru starea respectivă.
În mod implicit modulul NgDialog este servit cu directiva ngDialog, care poate
fi utilizată ca atribut pentru butoane sau link-uri ca în următorul exemplu:
1. <button type="button"
2. ng-dialog="templateId.html”
3. ng-dialog-class="ngdialog-theme-flat"
4. ng-dialog-controller="ModalCtrl"
5. ng-dialog-close-previous>
6. Open modal text
7. </button>
3. File saver
1. $scope.additionalpaper = function () {
2. var blob = new Blob([AdditionalPaper], {
3. type:'application/vnd.openxmlformats-
officedocument.wordprocessingml.document'
4. });
18World Wide Web Consortium – consorțiu internațional care are ca scop dezvoltarea de
standarde pentru Worl Wide Web
5. var filename = "additionalpaper.docx"
6. saveAs(blob, filename);
7. };
4. Moment
19 Model-view-whatever
preNav.directive.js
1. function preNavCtrl($scope) {
2. $scope.userRole = $cookies.get('role');
3. //continuarea funcționalității
4. };
preNav.template.html
1. <div class="user-container">
2. <span id="logged-user">{{userRole}}</span>
3. </div>
Model-View-Whatever - http://www.edureka.co/blog/angularjs-superheroic-javascript-
22
mvw-framework
Structura arborescentă a folderului app este următoarea:
2. în fisierul app.js*/
3. angular.module('travelingApp.configuration.configurationManager',
5. 'travelingApp.configuration.controller'])
6. .config(function($stateProvider) {
7. $stateProvider.state('main.config', {
8. url: 'config',
9. controller: 'configurationController',
11. resolve: {
17. });
18. },
23. .then(function(results) {
25. });
26. },
31. .then(function(results) {
33. });
34. }
35. }
36. });
37. });
Baza de date este structurată în 8 tabele legate între ele după cum este prezentat
în Figura 5. Datele primite de la utilizator sunt stocate folosind SQL Server.
În cazul în care sesiunea expiră sau utilizatorul încearcă să acceseze un url din
interiorul aplicației, fără ca acesta să fie logat, va fi redirecționat automat către pagina
Login. De asemenea s-a implementat și autorizarea pe cererile către server, ceea ce
înseamnă că pentru a putea primi răspuns de la server pe o anumită cerere, trebuie ca
utilizatorul să aibă rolul potrivit24.
1. $stateProvider.state('main', {
2. url: '/',
3. abstract: true,
4. resolve: {
5. resolveUser: resolveUser,
7. },
9. });
1. $scope.logout = function() {
4. $cookies.remove(k);
5. $state.go('login');
6. });
7. };
A. Rolul de Angajat
Un angajat al companiei va avea acces la aplicație abia după ce a fost introdus
în sistem. După introducere, acestuia i se genereaza o parolă de start cu care se poate
autentifica pentru prima dată in aplicație. După prima accesare a aplicației i se
recomandă schimbarea parolei, acest lucru fiind posibil dacă acesta va face click pe
numele său, lucru care duce la deschiderea unui dialog precum cel prezentat în Figura
7, de unde utilizatorul își poate modifica parola contului.
Acest rol poate vizualiza tabela de angajați, de angajați asignați unei delegații și
tabela de delegații curente sau trecute, dar nu are dreptul de a modifica, șterge sau
adăuga în tabelele precizate.
De asemenea datele cu caracter special, precum cnp-ul, adresa de email a altui angajat
sau actele disponibile completate, vor fi ascunse de acesta,.
Angajatul care este introdus în sistem, va fi notificat prin email despre orice
modificare survenită în delegația curentă şi poate să urmărească starea în care este
delegația lui, în pagina Delegations by name, în coloana intitulată Status, după cum se
poate observa în Figura 8.
Pe pagina Delegations by name acest rol poate doar vizualiza detaliile unei
delegații.
După cum a fost precizat anterior, Managerul este acel tip de utilizator ce poate
adăuga o delegație nouă în sistem după cum arată Figura 11.
Figura 11. Adăugarea unei noi delegații
După ce datele au fost trimise către server, o notificare prin email va fi trimisă
către toți angajații ce vor participa la delegația adăugată, iar delegația primeste statusul
New.
26 Angajatul pleacă de urgentă cu un zbor scump sau pleacă în alte circumstanțe speciale.
O altă acțiune disponibilă pentru acest rol este de alegere a zborurilor adăugate
de Asistentul de birou pentru delegațiile cu statusul New. Pentru ca o delegație să aibă
disponibilă opțiunea Choose flights, ea trebuie să fie în starea Pending. După ce un
zbor a fost ales, Managerul completează numele hotelului și pretul pe noapte pentru
cazarea angajaților ce vor pleca în delegația respectivă. Aceste date sunt importante
deoarece vor apărea în raportul financiar descărcat de către utilizatorul cu rolul
Finanțe. În acest pas delegația a fost aprobată și toți angajații implicați în acest proces
vor primi câte o notificare prin email.
Orice delegație poate fi ștearsă, dar această acțiune poate fi realizată doar de
către un utilizator ce are rolul de Manager. O delegație care are orice alt status mai
puțin Cancelled poate fi modificată. Din diferite motive un angajat poate pleca mai
târziu sau poate să nu mai plece deloc, iar atunci se modifică datele corespunzător în
sistem pentru a ține evidența într-un mod corect.
Pentru acest rol este disponibilă pagina de configurări de unde managerul poate
schimba sau seta rolul unui utilizator (Figura 12) și adăuga sau șterge țări și orașe din
sistem (Figura 13).
La încercarea adăugarii unui oraș sau a unei țări deja existente în sistem, se va
genera o eroare, deoarece acestea nu pot fi duplicate.
Se vor completa: ruta de plecare, ruta de întoarcere și via (unde este cazul),
informații despre zbor, prețul și comentarii dacă sunt necesare. Câmpul Info permite
introducerea de date în format rich-text după cum este prezentat în Figura 14.
28 What You See Is What You Get – Angular rich text editor.
Figura 15. Rich text editor
Dupa ce s-au adăugat mai multe opțiuni, acestea trebuie salvate, iar statusul
delegației va fi schimbat din New în Pending și opțiunea Add flights va fi înlocuită de
Edit flights. Starea Pending reprezintă că delegația asteaptă aprobarea Managerului
pentru a trece în starea Approved. O dată ajunsă în această stare nu se mai pot modifica
detaliile zborurilor sau a delegației ci doar se pot vizualiza (Figura 16).
Salvarea datelor în format .xlsx29 se face cu ajutorul serviciului File Saver, care
a fost prezentat în subcapitolul I.A 3. File saver. Pentru salvarea în discuție, s-a
implementat funcţia următoare:
2. delegationsEmployeesService.getFinancialReportById(userId)
3. .then(function (results) {
4. $scope.FinancialResultMS = results;
29 Format Excel.
5. });
6. $timeout(function () {
8.type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
9. });
12. }, 1000);
13. };
Concluzii
La finalizarea acestei lucrări - atât partea teoretică cât și cea pratica - îmi
doream să îmi dau seamă de evoluția mea din punct de vedere tehnic, lucru care s-a și
întâmplat. În ciuda faptului că la momentul implementării aplicației am simțit că
provocarea este mare și că îmi va fi greu cu modul de lucru ales, odată cu trecerea
timpului și datorită implicării am reușit să mă integrez și să mă dezvolt pe domeniul
ales.
Soluția aleasă pentru problema dată este una cu care se confruntă orice
instituţie, prin urmare acest sistem ar putea fi folosit în diferite firme, extins sau
adaptat pentru a se potrivi regulilor interne și organizatorice. Transpunerea unui proces
complex într-o sarcină automată poate deschide interesul pentru automatizarea unor
procese greoaie din viața de zi cu zi.
30 https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
31 Denumite componente în Angular 1.5
32 Document Object Model
Bibliografie