PLANIFICAREA ACTIVITĂȚII … … … … 3 [616994]

1
Cuprins

PLANIFICAREA ACTIVITĂȚII ………………………….. ………………………….. ………………………….. …… 3
LISTĂ DE ABREVIERI ………………………….. ………………………….. ………………………….. ……………….. 4
LISTĂ DE F IGURI: ………………………….. ………………………….. ………………………….. ……………………… 5
PAPER CONTENT ………………………….. ………………………….. ………………………….. ………………………. 6
1. Stadiul actual ………………………….. ………………………….. ………………………….. ……………………….. 12
1.1 Comunicarea pe internet ………………………….. ………………………….. ………………………….. ……….. 12
1.2 Skype ………………………….. ………………………….. ………………………….. ………………………….. ………….. 13
1.3 Whatsapp ………………………….. ………………………….. ………………………….. ………………………….. …….. 13
1.4 Skype vs Whatsapp ………………………….. ………………………….. ………………………….. …………………… 14
1.5 Twitch chat ………………………….. ………………………….. ………………………….. ………………………….. ….. 14
1.6 Scopul acestei lucrări ………………………….. ………………………….. ………………………….. ………………… 15
2. Fundamentare teoretică ………………………….. ………………………….. ………………………….. …………. 16
2.1 Tehnologii utilizate în implementarea clientului ………………………….. ………………………….. …… 17
2.1.1 HTML (HyperText Markup Language) ………………………….. ………………………….. ……… 17
2.1.2 CSS (Cascading Style Sheets) ………………………….. ………………………….. …………………… 18
2.1.3 JavaScript ………………………….. ………………………….. ………………………….. ………………….. 19
2.1.4 jQuery ………………………….. ………………………….. ………………………….. ……………………….. 20
2.1.5 Bootstrap ………………………….. ………………………….. ………………………….. …………………… 21
2.2 Tehnologii utilizate în implementarea serverului ………………………….. ………………………….. ….. 23
2.2.1 NodeJS ………………………….. ………………………….. ………………………….. ………………………….. 23
2.2.2 Socket.Io ………………………….. ………………………….. ………………………….. ……………………….. 24
2.2.3 ExpressJS ………………………….. ………………………….. ………………………….. ………………………. 24
3. Implementarea soluției adoptate ………………………….. ………………………….. ………………………….. .. 26
3.1. Arhitectura generală ………………………….. ………………………….. ………………………….. ……………… 26
3.2 Organizarea fișierelor și structura directoarelor ………………………….. ………………………….. …………. 27
3.2.1 Dosarul ‘public’ ………………………….. ………………………….. ………………………….. ………….. 28
3.3. Structura aplicației – implementarea ………………………….. ………………………….. ……………………….. 29
3.3.1 Implementarea serverului ………………………….. ………………………….. ………………………….. …. 30
3.3.2 Implementarea părții de client ………………………….. ………………………….. ……………………….. 35
4. Rezultate experimentale ………………………….. ………………………….. ………………………….. ………… 41
4.1 Rularea aplicației prezentate ………………………….. ………………………….. ………………………….. ………. 41

2
4.2 Accesul la pagina principală ………………………….. ………………………….. ………………………….. ………. 41
4.3 Participarea la chat ………………………….. ………………………….. ………………………….. ……………………. 42
4.4 Ascunderea chat -ului ………………………….. ………………………….. ………………………….. …………………. 43
4.5 Schimbarea camerelor ………………………….. ………………………….. ………………………….. ……………….. 44
4.6 Afișarea numărului de utilizatori ………………………….. ………………………….. ………………………….. … 45
4.7 Schimbarea numelui de către utilizator ………………………….. ………………………….. …………………….. 45
4.8 Validare utilizator duplicat ………………………….. ………………………….. ………………………….. …………. 46
4.9 Schimbarea mediului ………………………….. ………………………….. ………………………….. …………………. 47
5. Concluzii și perspective ………………………….. ………………………….. ………………………….. ………… 48
6. Bibliografie ………………………….. ………………………….. ………………………….. …………………………. 49
7. Anexe ………………………….. ………………………….. ………………………….. ………………………….. ………… 50
7.1 Diagrama use -case: ………………………….. ………………………….. ………………………….. …………………… 50
7.2 Diagrama sec vențială: ………………………….. ………………………….. ………………………….. ……………….. 51
7.3 Fișierul rooms.json care conține structura camerelor existente: ………………………….. ……………….. 51
7.4 Test detecție plagiat ………………………….. ………………………….. ………………………….. …………………… 53
8. Curriculum vitae ………………………….. ………………………….. ………………………….. …………………… 54

3

PLANIFICAREA ACTIVITĂȚII

Sarcini de lucru Data începerii Num ăr zile Data sfarsit
Alegerea temei 15.10.2016 1 15.10.2016
Studiu bibliografic
și acumularea de
cunoștiinte legate de
tema proiectului 15.10.2016 120 12.02 .2017
Studiul utilizarii
framework -urilor 13.02 .2017 26 11.03 .2017
Scrierea codului
sursă/
Testarea aplicație/
Redactarea lucrării
11.03 .2017 82 2.06.2017
Printarea și legarea 7.07.2017 2 9.07.2017
Termen de predare 10.07.2017 1 10.07.2017

4
LISTĂ DE ABREVIERI
HTML HyperText Markup Language
CSS Cascading Style Sheets
JS JavaScript
AJAX Asynchronous JavaScript And XML
NodeJS Node JavaScript
NPM Node Package Manager
HTTP Hypertext Protocol Transfer
ExpressJS Express JavaScript
HTTPS Hypertext Protocol Transfer Secure

5
LISTĂ DE FIGURI:
• Figura 1.1 Emisie/ recepție mesaje între clienți
• Figura 2.1 Limbaje fundamentale în implementarea clientului
• Figura 2.2 Sistemul de 12 coloane al Bootstrap
• Figura 2.3 NodeJS server, relaționare cu clienții
• Figura 2.4 Legătura client -server bazată pe evenimente în timp real
• Figura 3.1 Arhitectura client -server
• Figura 3.2 Diagrama use -case
• Figura 3.3 Organizarea fișierelor și a directoarelor
• Figura 3.4 Dosarul public
• Figura 3.5 Dosarul node_modules
• Figura 3.6 package.json
• Figura 3.7 Dependințele si pachetele inițializate
• Figura 3.8 Configurarea și setarea portului pe care serverul Express trebuie să asculte
• Figura 3.9 Tratarea evenimentului connection pe server
• Figura 3.10 Tratarea evenimentului ‘username’
• Figura 3.11 Logică pe ntru utilizatorul logat cu success la chat
• Figura 3.12 Interceptarea evenimentului de ‘chat message’
• Figura 3.13 Validare pe mesaje si manipularea acestora
• Figura 3.14 Evenimentul de schimbare al numelui de utilizator
• Figura 3.15 Evenimentul de schimbare al camerei
• Figura 3.16 Logica de schimbare a camerei
• Figura 3.17 Evenimentul de deconectare
• Figura 3.18 Structura paginii HTML
• Figura 3.19 Atribute de stilizare a elementelor HTML
• Figura 3.20 Validări pentru conținutul numelui, mesajelor
• Figura 3.21 Constr uirea mesajelor pe partea de client
• Figura 3.22 Evenimente de interceptare a numirii/redunimirii numelui de utilizator
• Figura 3.23 Numărul de utilizatori afisați în timp real
• Figura 3.24 Interceptarea istoricului de mesaje pe fiecare cameră
• Figura 3.25 Log ica pe partea de client în vederea schimbării camerei
• Figura 4.1 Rularea aplicației de chat
• Figura 4.2 Acces la pagina principală
• Figura 4.3 Participarea la chat
• Figura 4.4 Trimiterea de mesaje și participarea la chat
• Figura 4.5 Ascunderea chat -ului
• Figura 4.6 Lista cu camerele disponibile
• Figura 4.7 Schimbarea camerei și mesajele trimise de sistem
• Figura 4.8 Afișarea numărului de utilizatori
• Figura 4.9 Schimbarea numelui de către utilizator
• Figura 4.10 Validare utilizator duplicat
• Figura 4.11 Afișare stat us inactiv al camerei

6
PAPER CONTENT
1. State of the Art
Once the internet appeared, the life of many people has changed. We can say that navigating
on the internet has become the most popular activity and the one which is taking a lot of free time.
This way of communication of the internet represents the free d ialog between people, these
managing to communicate between any distances, without any issues or barriers.
The members of this virtual community which are using the internet to maintain relationships
or to keep theirselfs up to date regarding different do mains, became very comfortable with it and
using it, because there are a lot of applications which provide instant messages services.
The chat applications are systems which provide the change of instant messages between two
or more clients, users. We can think about it as a dialog / conversation, but the difference is that you
have to type. Ofcourse, the chat applications are different and each one of them can bring something
new or can provide a specific service, getting really close to a real conversatio n by using emoticons,
gifs, microphones and webcams.
In general, the chat applications require a server side, for implementing the logic and stocking
the data containing the messages, the users of the application, and the features implemented in it. The
users basically are connected to the same server, and by using a user interface they are able to use the
chat application, having a great experience.
The most chat applications used are: Skype, Whatsapp, Yahoo Messenger, Facebook
Messenger, Twitch chat etc.
The purpose of this application is to implement a integrable component of online free chat,
accessible, easy to use, and also to provide the users needs regarding the communication based on
instant messages.
As long as the chat application is self -contain ed it can be integrated in different domains of
activity like: news, medical, live streaming etc.

7
2. Theoretical fundamentals
In this chapter I will present the technologies, libraries and also the architecture used into the
application development.
A web application is an application which interacts with the user and is usually implemented
with a server side (backend) and a client part (frontend).
The implementation of the client side requires the use of the fundamentals programming
languages as: HT ML (Hypertext Markup Language), CSS (Cascading Style Sheets) and JavaScript.
The objective of creating a web application is to ensure the usability of a graphic interface. This
means creating a intuitive and accessible visual interface, and easy to read f or the user.
The implementation of the server side requires the use of different programming languages,
frameworks as: NodeJS, Java, .NET, PHP etc. The server side is containing all the data used in the
application, is manipulating and manages the logic an d the flows on the entire application.
2.1 The technologies used in implementing the client side

HTML (Hypertext Markup Language)
HTML is a markup language which represents the structure of the entire application of each
website. A website can’t exists without HTML. This is used for creating website pages and is
supported by all browers. The purpose of this language is to create the structure and to present the
information of a webpage described in: paragraphes, tables, fonts, images etc. Along with CSS
(Cascading Style Sheets) and JavaScript they represent the most important languages in
implementing frontend applications.
The HTML pages are build from different html elements described in tags. Most of this
elements are pairs, one tag being the opened tag (<tag>), and the other one the closed tag(<tag/>).
There are also individuals elements described by a closed tag (<tag/>).
CSS (Cascading Style Sheets)
CSS is a language that is used to format, style, position and edit the elements contained in a
HTML document. CSS is a fundamental language in frontend development, along HTML and
JavaScript. CSS is usually used to provide a better user experience to the u ser when this one is using
the application. The CSS language can apply style on different document types as: HTML, XHTML,
XML, SVG, XUL.
There are several possibilities to apply style on HTML elements: by using the <style> tag in
the html file, by using a n external css file with the reference of the html elements by using the CSS
selectors as: Id’s, classes, or adding inline style on the html element itself.
JS (JavaScript)
JavaScript is a fundamental programming language used in the implementation of a c lient
side application. It’s one of the three most important programming languages, along with HTML and
CSS. The JavaScript name burrows the name of the well known programming language Java, even
though there is no connection between them.

8
JavaScript is a object oriented programming language and procedural programming. It’s
usually used to result in a better interaction of the webpage with the user, and most of the time is
used in the client side development, but it can be used also in the server side by using NodeJs for
example, or in the mobile applications.
jQuery
jQuery is a JavaScript library. Is free, easy to use and very used and helpful for the
developers because it provides a lot of known implemented features, and a big documentation.
Bootstrap
Bootstrap is a very powerful frontend framework, intuitive and very easy to use during the
development. This offers to developers implemented stand -alone components, and also the
possilibity to make the application responsive on different screen sizes, b y using their grid system.

2.2 The technologies used in implementing the server side

NodeJS
NodeJS (JavaScript for server side) represents a cross platform implemented over the V8
engine of Google Chrome. NodeJS framework is free, with its own documentation, is running on
different and several operating systems as: Windows, Linux, Unix, Mac OS X etc, and it’s using
unique besides other server sides programming languages because it’s written with JavaScript.
NodeJS is a very efficient and accessible framework, it can be implemented by events, api’s,
or i/o operations.
Socket.IO
Socket.Io is a very appreciated library for the developers that prefer working with NodeJS.
Socket.Io represents the bidirectional communication in real time between client side (front end) and
server side (backend). These sockets are used when communication of the users in real time is
wanted and required.
ExpressJS
ExpressJS is a server side framework of NodeJS, which is very flexible which provides a lot
of features to develop web and mobile applications. It’s a free framework, and it’s very suitable with
NodeJS and ExpressJS. To install this framework we have to use the NPM registry by calling the
command: ‘npm install express –save’.

9
3. Implementation
In the application is used the client -server architecture, which is based on direct
communication between the client side and the server side.
This architecture is divided in two different parts:
The client side of the application is implemented using more programming languages and
also several libraries and frameworks as: HTML (Hypertext Markpup Language), CSS (Cascading
Style Sheets), jQuery, JavaScript, Socket.Io. The client side is communicating with the server side
within the transmission of events in real time between these two pa rts. Using this events there can be
sent variables, values that can be changed and managed in real time as: instant messages, the names
of the users, objects with different values and so on. The web part of the application is controlled and
managed by the server side and the both sides depend on to the other for the desired functionality
and also for the proper emit of the events in real time.
The server side of the application is implemented withing a new framework, called NodeJS,
which has the implementa tion written in JavaScript, and also there have been used server express and
Socket.Io for the transmission of the events in real time. This server side contains all the data and it
controls all the application and its functionality, saying to the client t he exact instructions that needs
to be sent to the user, all using these events sent in real time.

All the libraries, frameworks, packages and the required dependencies for the application to
work properly as: NodeJS, Server Express, SocketIo, jQuery, Bootstrap etc are installed within NPM
(Node Package Manager), which is the biggest software registry in the entire world, with
approximately 3 billions of downloads per each week. This software registry is sharing for
downloading like 600 000 of packages and dependencies. The open -source developers benefits of
this registry quite often and it’s very helpful for them during the development. Besides the download
itself of the packages, libraries and dependencies, NPM allows also the installation and the
mana gement of these.
For the development itself, I used the Visual Studio Code IDE, which is free, accessible and
easy to use. Other tools for development would be: Webstorm, Atom, Sublime etc.

10
4. Experimental results
For running the application there is nee ded the installation of node_modules, using the NPM.
For this, you have to open the terminal command line and run the command ‘npm install’, this
command will basically read the package.json and install all the dependencies listed in there. After
the inst allation went successfully, you are able to run the command node index.js, and after that the
application will run on http://localhost:3000 or 127.0.0.1:3000.
You can see in the following picture the principal room:

After accesing the specified url, you will be able to start using the application. The
implemented features are: loging in with a desired username, partipation to chat in all existing
rooms, access to the rooms, possibility to change the username.
You can see in the following pictures the instant messages feature and also changing the
username feature:

11

5. Conclusions
This paper work had as its purpose the implementation of a chat application, seen as a
integrable component in different environments of expe rience like: medical, commercial, marketing,
news, sport etc. The application is implemented using new technologies and it also can be considered
with a very good perspective because of the events sent in real time, this aspect giving to the users a
very p leasant experience when using the application.
The application is working properly, the architecture being client -server. The user interface is
a simple one, with a pleasant design, inteligible and very clear.
This project is using the NodeJS runtime environment for implementing the server side.
NodeJS is a perfect choice for implementing small projects, as prototypes or proof of concepts with a
very high perspective. The server is configured and created within ExpressJS, and the logic of the
server im plementation with Socket.IO by sending the events in real time. The client side is
implemented within HTML by defining the structure of the application using the HTML elements,
with CSS to style and position the HTML elements giving a bette r user interface and experience, and
the logic, the interaction with the user and the interception of the driven events with Socket.Io,
jQuery and JavaScript.
Even the application is working properly, I can mention the fact that this can be extend,
improved and adjusted b y case. Keeping in mind the domain and the place where this chat can be
integrated, it can be able to accept a database, an admin page for the rooms management, and the
implementation of the new features.
I can mention that ca purpose of this application h as been reached, this would be the
implementation of an integrable online chat component, easy to use, accessible, and also to satisfy all
the users’s needs regarding the communication based on instant messages.
In conclusion, I can say then the approach s ubject in this project is an actual one and even for
perspective, the application being suitable for any type of environment of experience. The
technologies used are new and very powerful and they are gonna be more used in the future.

12
1. Stadiul actua l
1.1 Comunicarea pe internet
Odată cu apariția internetului, viața multor oameni s -a schimbat. Se poate considera cu
ușurintă că este activitatea cea mai populară și care ocupă cel mai mult din timpul liber. Această
formă de comunicare a internetului reprezintă dialogul liber între oameni, aceștia reușind să
comunice la orice distanțe, fără impedimente sau orice fel de bariere, aceasta devenind varianta lor
preferată de comunicare.
Membrii acestei comunități virtuale care folosesc internetul pentru a relaționa, au devenit
comozi folosind -o și foarte familiari cu aceasta, deoarece există multe aplcații care oferă mesagerie
instantanee (Ch at).
Aplicațiile de tip chat sunt sisteme care oferă schimbul instantaneu de mesaje de diferite
formate între 2 sau mult mai mulți clienți, utilizatori. Poate fi considerat ca un dialog /convorbire, ce
are loc la telefon, diferența e că pe internet e în scris. Desigur, aplicațiile de chat diferă una de
cealaltă și fiecare aduce ceva nou, sau este special ă in felul ei, apropiindu -se tot mai tare de
convorbirea din viața reală prin adăugarea de: emoticoane, gif -uri, microfoane, webcam -uri ș.a.m.d
În general , aplicațiile care asigură emiterea de mesaje instantanee dispun de o parte de server,
unde sunt stocate toate mesajele, utilizatorii acelei a plicații și alte elemente care sunt utile în aplicația
respectivă pentru a funcționa . La acest server se conecteaz ă toti clienții, și prin intermed iul interfeței
web (implementate prin partea de client a aplicației respective ), se bucură de o experiență frumoasă
ca utilizatori ai chat -ului.
Unele dintre cele mai cunoscute si folosite aplicații de tip chat cu funcții î n mesageria
instantanee din lume sunt următoarele: Skype, Whatsapp, Yahoo Messenger, Facebook Messenger,
Twitch Chat

Figura 1.1 Emisie/ recepție mesaje între clienți

13
În cele ce urmează vor fi prezentate câteva sisteme similare : aplicații de comunicare on line.
1.2 Skype
Skype -ul este o aplicație de comunicare ce suportă mesajele instantanee scrise, call -uri audio,
video, conferințe între doi sau mai mulți utilizatori. Această aplicație este una din cele mai cunoscute
aplicații de comunicare online, și apa rține lui Microsoft.
Skype a fost fondat în anul 2003, având sediul principal la Luxembourg, aplicația fiind o
diviziune pentru Microsoft Corporation. [6]
Aplicația este disponibilă pe internet, poate fi descărcată gratis și are o mulțime de facilități
precum menținerea de: conversații /conferin țe bazată pe scrierea de mesaje cu un număr nelimitat de
utilzatori din orice colț al lumii, conversații /conferințe audio bazată pe recunoașterea microfonului si
a perifericelor audio conectate la terminalul folosit de către utilizator, conversații /conferințe audio –
video bazate pe recunoașterea microfonului, a perifericelor audio și a webcam -ului conectat la
terminalul folosit de utilizator și desigur, dispune de o listă de prieteni pentru o accesibilitate mai
mare s i un comfort mai mare pentru client în momentul folosirii aplicației.
Skype poate fi folosit atât pe calculatoare , pe toate sistemele de operare precum: Windows,
Linux, Mac ș.a.m.d cât și pe terminalele mobile, cu sistemele de operare: Android, iOS, Wind ows
ș.a.m.d, oferind utilizatoril o accesiblitate mai mare. O mare masă de oameni preferă această
aplicație din cauza serviciilor pe care le oferă aceasta și pentru că o pot folosi în interesul lor
personal în diferite ipostaze comfortabile lor , precum: la serviciu, la birou, acasă, pe stradă, mai pe
scurt oriunde au acces la internet.
În ceea ce privește Skype, utilizatorii pot achiziționa statutul de ‘Premium Member’ al Skype,
și altfel au posibilitatea de a suna de pe skype direct pe mobil și de a transmite mesaje text pe mobil,
sau desigur aplicația dezvoltată din Skype, numită ‘Skype for Business ’, aceste opțiuni venind cu
niște performanțe mult mai bune în ceea ce privește e xperiența clientului în momentul folosirii
aplicației .
1.3 Whatsapp
Whatsapp este una din cele mai cunoscute aplicații de comunicare online din întreaga lume
destinată smartphone -urilor din întreaga lume, se poate descărca gratis de pe orice magazin onlin e, si
necesită acces la internet în momentul folosirii. Aplicația a fost lansată în anul 2009 de către
angajații de la Yahoo, urmând ca după sa fie relansată de Facebook în anul 2014, cu noi modificări.
Aplicația folosește internetul la care e conectat te rminalul mobil al utilizatorului pentru a fi
folosit, astfel clientul poate evita taxe precum sunatul, trimisul de mesaje. Sistemul de comunicare
Whatsapp oferă multe funcționalități, servicii și beneficii celui ce îl utilizează, precum: trimiterea de
mesa je text unei persoane, mai multor persoane sau în cadrul unei conferințe 7, susținerea unei
convorbiri audio cu o persoană, susținerea unei convorbiri audio -video cu o persoană, înregistrare
voce, trimitere de fișiere de orice tip , încărcarea unei povești a semănătoare celei din aplicația
Snapchat și multe altele.

14
Deși aplicația este predestinată terminalelor mobile, pe orice sistem de operare precum:
Android ,iOS, Windows ș.a.m.d. accesul la Whatsapp se poate realiza si de pe calculatorul personal,
folosind logarea cu QR code. Spre deosebire de alte aplicații de comunicare online, lista de prieteni
poate fi updatată în funcție de numărul de telefon al utilizatorilor , fără a fi nevoie de nume le de
utilizator.
Printre beneficiile aduse de aplicația de comunic are online Whatsapp, se enumeră și
următoarele:
• Formatarea mesajelor după bunul plac a clientului înainte ca acesta sa fie trimis
• Folosirea aplicației pe calculatorul personal
• Folosirea aplicației pentru transferul de fișiere de orice tip
• Păstrarea convorbirilor private
• Se poate observa persoana cu are ai vorbit cel mai mult
• Se poate verifica exact cât trafic de internet s -a consumat folosind Whatsapp
• Accesând setările aplicației, util izatorul poate activa opțiunea în urma căreia să se
consume mai puțin trafic de internet, cu riscul de a pierde din performanțe.
• Setarea unei conversații pe mut.
• Distribuirea locației clientului în momentul respectiv unui alt utilizator.
• Salvarea conversațiilor in iCloud sau Google Drive.
1.4 Skype vs W hatsapp
• Skype este predestinat în a fi folosit pe calculatoarele personale ale clienților , pe când
Whatsapp este o aplicație predestinată terminalelor mobile.
• Skype dispune de o listă de prieteni si de o putere de stocare mai mare decât Whatsapp.
• Pentru a căuta o persoană cu scopul de a o adăuga în lista ta de prieteni, în cazul Skype este
nevoie de nume + prenume sau nume de utilizator, iar in cazul Whatsapp doar de numărul de
telefon.
• În ceea ce privește calitatea audio aplicația Skype este cu mult peste aplicația Whatsapp, și
asta din cauză ca Skype are propriul codec care ajută în creșterea performanțelor audio.
• Din punct de vedere al costului traficului de internet, un minut într -o convorbire în cadrul
aplicației Skype costă mai mult decât un minut int r-o convorbire în cadrul aplicației
Whatsapp.
• Deși Whatsapp este mai ieftin în ceea ce privește traficul de internet, Skype dispune de niște
performanțe mai bune.
• În cadrul Skype se pot susține conferințe cu un număr mare de persoane, la performanțe
foarte bune, spre deosebire de Whatsapp.

1.5 Twitch chat
Twitch este cea mai cunoscută platformă de live streaming. Fiecare utilizator al acestei
platforme poată să își impărtașească experiența trăită în orice moment prin crearea unui canal, și
integrarea unui live streaming în acesta.

15
Există deja multe canale cunoscute pe twitch în care utilizatorii pot fi: jucători profesioniști,
bloggeri, entertaineri, prezentatori de evenimente cunoscute sau știri online și multe altele.
Fiecare astfel de canal are atașat un chat, unde toți vizitatorii live streaming -ului respective
pot comenta și discuta în timp real pe tema prezentată în cadrul camerei respective. Pentru a fi activ,
este nevoie de înregistrarea cu un cont nou la platforma Twitch și în urma la aceasta fiec are
utilizitaror este disponibil să ia parte la chatul oricărui canal, respectiv are posibilitatea de a -și crea
propriul canal de live streaming.
1.6 Scopul acestei lucrări
Scopul acestei lucrări este implementarea unei componente integrabile de chat online, care să
fie gratuită, ușor de folosit, accesibilă, si totodată să satisfacă toate nevoile clienților în ceea ce
privește comunicarea online bazată pe mesageria instantanee. În cadrul acestei aplica ții, utilizatorii
acesteia au posibilitatea de a comunica în timp real, în diferite camere cu mediul specific destinate
mai multor domenii, după preferința de utilizare.
Structura aplicației se divide in două părți mari: partea de server (Back End) care v a ține
evidența utilizatorilor conectați la chat , respectiv în fiecare cameră, a mesajelor emise între ace știa în
fiecare cameră, și partea de client (i) (Front End) care oferă utilizatorilor o experiență placută în
timpul folosirii acesteia și de asemenea tratarea fiecărui eveniment trimis și controlat de pe server.
Folosind această aplicație accesibilă, clienții pot doar alegând un nume de utilizator să se
conecteze la chat, să se alăture celorlalți clienți dintr-o cameră , și să comunice cu ușurință despr e
domeniul aferent acelei camere.
Se pun în valoare și tehnologiile folosite pentru implementarea acestui proiect și anume:
NodeJS si Socket.IO care permit transmiterea de evenimente între server si interfața web în timp
real, deci implicit transmiterea de mesaje între clienți în timp real, fără a fi nevoie de refreshuirea
paginii pentru recunoașterea de date noi.
Din moment ce aplicația de chat prezentată este de sine stătătoare, se poate integra cu
ușurință în alte aplicații mari, de sine stătătoare, d in diferite domenii, precum: știri, domeniul
medical , live streaming la evenimente ș.a.m.d. după preferințe.

16
2. Fundamentare teoretică
În acest capitol vor fi prezentate limbajele de programare, librăriile, framework -urile, precum
și arhitectura folo sită.
O aplicație web este o aplicație ce interacționează cu utilizatorul în mod direct și dispune de
un client și de un server.
Implementarea clientului, presupune folosirea în general a limbajelor de programare
fundamentale: HTML (Hypertext Markup Langua ge), CSS (Cascading Style Sheets) și JavaScript
pentru crearea unei aplicații Web și pentru ca utilizatorul să poată interacționa direct cu aceasta.
Obiectivul proiectării unui sistem web este de a asigura utilizabilitatea interfeței grafice. Aceasta
const ă in crearea unei interfețe accesibile, intuitive și usor de citit pentru utilizator.
Implementarea serverului, presupune folosirea a limbajelor de programare / framework -urilor
precum: Node.Js, Java, C#, PHP ș.a.m.d. Partea de server controlează si cre ează tot parcursul, logica,
demersul aplicației și al funcționalității acesteia de care se folosește clientul (partea de frontend)
pentru a oferi utilizatorului o experiență plăcută în accesarea aplicației.
În zilele noastre, tehnologia a evoluat foarte mult și continuă să evolueze în continuare, și se
dorește și practică tot mai mult folosirea framework -urilor și bibliotecilor în JavaScript.
Framework -ul reprezintă structura care ar trebui să fie respectată în codul sursă. Asemănător unui
șablon de cod, acesta aduce un parcurs bine stabilit alături de niște reguli care trebuie respectate în
momentul implementării. Exemple de framework -uri: NodeJS, Angular, React, Ember, Backbone,
ExpressJs, Meteor ș.a.m.d. Biblioteca conține un ‘set de instrucțiuni ’ care oferă o mulțime de
instrumente și funcționalități predefinite care simplifică experiența developerului în cod, în
momentul implementării. Exemple de biblioteci și librării : jQuery, MooTools, Yui, Sockets.io,
Create.Js, Sound.Js
Avantajele folosirii fra mework -urilor de JavaScript sunt eficiența, siguranța si costul.
Din punct de vedere al eficienței, un proiect care în mod normal ar presupune o muncă de
câteva luni de zile si scrierea a sute de linii de cod, cu ajutorul unui framework se poate realiza mu lt
mai repede ca timp, și cu mult mai puțin cod scris, prin modele, funcții si flow -uri foarte bine
structurate. Din punct de vedere al siguranței, framework -urile de top au acorduri de la firme de
securitate și sunt suportate in comunități foarte mari. Î n final, din punct de vedere al costului, aceste
framework -uri sunt gratuite, pot fi folosite de toata lumea, fiecare având la dispoziție documentație
proprie, pentru a ajuta programatorii să construiască mai repede soluții personalizate.
Cele mai folosit e cinci framework -uri în 2017 sunt: Angular, NodeJs, React, Vue, Ember.
În cele ce urmează vor fi prezentate tehnologiile folosite în cadrul aplicației pentru
implementarea părții de client, respectiv părții de server.

17
2.1 Tehnologii utilizate în implementarea clientului

Figura 2.1 Limba je fundamentale în implementarea clientului [2]
2.1.1 HTML (HyperText Markup Language)
Hypertext Markup Language (HTML) este un limbaj de marcare și reprezintă coloana
vertebrală a fiecărui website. Acesta este utilizat pentru crearea paginilor web și este suportat de
toate browserele. Specificațiile HTML sunt date de W3C (World Wide Web Consortium). Scopul
acestui limbaj de pr ogramare este de a construi și prezenta structura și informațiile unei pagini
web: conținut cu paragrafe, tabele, fonturi, imagini, ș.a.m.d. Acest cod stă la baza paginilor web.
Alaturi de CSS si JavaScript formează un ‘trio’ puternic, aceste trei limbaje fiind cele
fundamentale în implementarea front -end. [9]
Paginile HTML sunt formate din etichete sau tag -uri, având extensia ‘.html’. Majoritatea
etichetelor sunt perechi, una fiind eticheta de deschidere (<eticheta>) și cea de a doua fiind
eticheta de înch idere (</eticheta>). Restul etichetelor sunt individuale, și in acest caz sintaxa
este: <eticheta/>. [1]
<!DOCType HTML/>
<html lang="en">
<head>
<title>Titlul paginii web</title>
<link rel="stylesheet" href="">
</head>

18
<body>
<h1> Titlul aplica ției </h1>
<p>Primul paragraf al paginii</p>
</body>
</html>
Exemple etichete : <h1>; <title>; <div>; <span>; <header>; <section>; <input>; <article>;
ș.a.m.d. HTML se consideră a fi un limbaj de marcare din cauză ca etichetele folosite decid ce se
întâmplă cu text -ul din interiorul lor. Întregul conținut al unei pagini web la care utilizatorul are
acces, este structurat în elemente de HTML, urmând ca mai apoi să fie stilizate (aranjate, decorate)
prin CSS, sau să le fie adăugată funcționalitate folosind JavaScript /jQuery .
Ultima versiune de HTML este HTML5, evoluat de la versiunea precedentă: HTML4.
Toate browserele recunosc codul HTML sursă al paginiilor, și se poate inspecta acest cod sursă
în două moduri, de către orice utilizator al site -ului:
• Click dreapta oriunde în pagină, selectarea opțiunii inspectează, selectarea opțiunii de
Elemente din meniul de sus.
• Apăsarea butonului F12 în pagină, selectarea opțiunii Elemente din meniul de sus.
Cu ajutorul codului HTML programatorul poate adăuga in pagină toate tipurile de elemente
posibile, precum: Elemente, etichete, atribute, paragrafe, titluri, secțiuni, spațieri, rânduri libere, liste,
formatări, diferite fonturi, entități, email -uri, i magini, link -uri spre diferite pagini web, imagini,
formulare, tabele, muzică, video -uri, comentarii ș.a.m.d
2.1.2 CSS (Cascading Style Sheets)
CSS a fost prima data creat în data de 10 Octombrie 1994, după care a fost susținut de un
grup din W3C (World Wide Web Consortium), numit ‘the CSS working group’ . Prima versiune a
acestui limbaj – CSS1 a fost lansat în Decembrie 1996 de către W3C. A doua versiune a acestui
limbaj – CSS2, a fost lansată în anul 1999 tot de către W3C. [5]
Cascading Style Sheets (CSS) este u n limbaj care are rolul de a formata, stiliza, poziționa și
edita cum arată elementele unui document HTML. Specificațiile CSS sunt date de W3C (World
Wide Web Consortium). CSS este un limbaj fundamental de programare, alături de HTML și
JavaScript. CSS se folosește pentru a oferi utilizatorului o experiență mai frumoasă în timpul folosirii
paginii web, acest limbaj se poate aplica pe: HTML, XHTML, XML, SVG, XUL. [9]
Există mai multe modalități de a adăuga stilizare pe elementele HTML: prin eticheta <style>
în cadrul aceluiași fișier; prin fișier extern cu referința la elementele HTML prin selectori (clasă, Id)
sau adăugând direct pe element, pe aceeași linie.
CSS3 este o noua versiune lansată de CSS, care aduce multe beneficii în ceea ce privește
aspect -ul paginii web ; Exemple: selectori, background, margini, borduri, efecte, animații și multe
altele care oferă utilizatorului o experiență placută in momentul navigării.

19
O altă modalitate de a adăuga stilizare elementelor de HTML este prin targetarea acestor
elemente folosind selectori de CSS, precum clase, id -uri, părinți, copii ș.a.m.d. Pentru ca această
stilizare sa fie citită este nevoie ca fișierul de CSS extern să fie impo rtat in fișierul HTML unde se
dorește stilizarea. Stilizarea poate fi adăugată /modificată și din fișierul de JavaScript, si de asemenea
folosind jQuery, adăugand proprietati de CSS și targetând elementele de HTML.
Avantajele CSS (Cascading Style Sheets) su nt:
• Eficiența din punct de vedere al timpului datorată posibilităț ii de reutilizare: fiecare clasă
declarată în CSS, care are atributele de stilizare asignate în cadrul acesteia, poate fi refolosită
si asignată pe orice element de HTML se dorește.
• Pagina d e HTML se incarcă mai repede: în scrierea de CSS nu este nevoie să se adauge tagul
de HTML de fiecare dată. Este de ajuns să se precizeze tagul de HTML o singură dată iar
CSS-ul aferent acestuia se va aplica pentru toate tagurile respective din întreaga pa gină. De
exemplu: dacă se dorește o modificare asupra tuturor paragrafelor din pagină este de ajuns să
folosești targetarea: ‘p {//atribut css;}’ , și toate paragrafele se vor updata automat.
• Codul CSS poate fi stocat în modul offline, salvându -se local, cu ajutorul cache -ului
browserelor.
Exemplu de CSS care modifică toate paragrafele si elementele h1 din HTML:
h1 {
color: red;
background -color: yellow;
border: 1px solid black;
}
p {
color: green:
border: 2px solid yellow;
margin -top: 10px;
}

2.1.3 JavaScript
JS (JavaScript) este un limbaj de programare fundamental folosit în implementarea părții de
client a unei aplicații web. El este unul dintre cele trei limbaje fundamentale cunoscute în
developmentu l frontend, alături de HTML (HyperText Marku p Language) și CSS (Cascading Style
Sheets). Denumirea de JavaScript împrumută numele limbajului cunoscut de programare Java, chiar
dacă nu are neaparată legătură cu Java. [10]

20
Limbajul de programare JavaScript s -a lansat în anul 1995 de către Brendan Eic h. Prima data
acest limbaj a fost denumit Mocha, apoi LiveScript, ca pe urma sa devină JavaScript -ul de azi.
Înainte de JavasScript, era limbajul de programare numit VBScript, care era suportat doar de
browserul Internet Explorer, și la scurt timp a fost î nlocuit de JavaScript.
JavaScript este un limbaj de programare suportat de toate browserele moderne. Este un limbaj
de programare care suportă si se bazează pe programare orientată pe obiecte și programare
procedurală. Este folosit de obicei pentru a avea un control mai bun al paginiilor web, si se folosește
de cele mai multe ori pe partea de client, dar se folosește de asemenea și pe parte de server sau
aplicații mobile. El poate avea acces la elementele din DOM (Document Object Model) rezultat în
urma ran dării codului HTML și prin intermediul scripturilor să le controleze, manipuleze sau chiar
de a le face dinamice având posibilitatea de a adăuga logică, efecte, tranziții ș.a.m.d. [3].
Exemplu de a adăuga conținut într -un element de HTML folosind cod Java Script:
“document.getElementById(‘elementHtml’).innerHTML = ‘Hello JavaScript’”;
Se poate spune ca JavaScript este unul din cele mai folosite limbaje de programare pentru că
este folosit în cele mai multe cazuri și situații. El este singurul limbaj de pr ogramare web prezent atât
în implementarea de Front -End cât și pe Back -End. Programare in JavaScript este disponibilă chiar
în cadrul fiecărui browser modern, accesând consola acestora, deoarece acestea au JavaScript
instalat, spre deosebire de alte limbaj e precum Ruby sau Python. Deși aproape toate browserele
suportă si compilează codul JavaScript, acesta poate reacționa totuși diferit pe fiecare browser în
parte (Chrome, Firefox, Internet Explorer, Opera, Microsoft Edge, Safari ș.a.m.d.) .
Apariția AJAX -ului a avut un impact puternic, acest AJAX permițând Front -End-ului sa
acceseze și să încarce conținut de pe partea de server (Back -End) fără a da refresh la pagină. Cea mai
populară cale de transfer de date este JSON (JavaScript Object Nation).
Framework -urile ca: Angular.js, Backbone.js, View.js, Ember.js și altele au la bază tot
limbajul de programare JavaScript.
Pe partea de server (Back -End) s -a lansat framework -ul numit Node.js care are la bază
limbajul de programare JavaScript și este sing urul limbaj de programare care furnizează servicii de
server având la bază JavaScript.
2.1.4 jQuery
jQuery este o librărie JavaScript lansată în anul 2006 de către John Resig. Este gratuit ă, ușor
de importat în cadrul proiectului, cu o dimensiune mică de aproximativ 20kb, este simplu de folosit
și este de foarte mare ajutor programatorilor pentru ca oferă multe funcționalităti predefinite,
avantaje si o documentație bogată. [10]
O cale ușoară de a importa și pentru ca jQuery să fie pregătit pentru a fi folosit este de a scrie
urmatoarele linii de cod în index.html:
<script src= http://code.jquery.com/jquery -1.11.1.js ></script>
<script src=”http://ajax.goo gleapis.com/ajax/libs.jquery/1.11.1/jquery.min.js”></script>

21
Pentru folosirea mai cu ușurinta a librăriei jQuery programatorul ar trebui să cunoască destul
de bine selectorii de CSS, de exemplu: id (#), clasa (.) , copii, părinți ș.a.m.d., deoarece adăugare a de
funcționalități pe elementele din HTML se folosește folosind acești selectori de CSS, ca în
următoarele exemple:
$(‘.element’).css(‘display’, ‘none’);
$(‘#element > a”).on(‘click’, function(){
alert(‘Mesaj de alertă pe click’ );
//alte instrucțiuni ;
}

jQuery are mai multe roluri și oferă o experiență placută utilizatorului în momentul
implementării:
▪ Disponibilitatea de a șterge conținutul unei pagini sau a porțiunilor dorite din pagină, folosind
selectori de CSS pentru a t argeta elementele de HTML .
▪ Disponibilitatea de adăugare de animații și /sau efecte precum “SlideUp, SlideDown,
FadeOut, FadeIn” ș.a.m.d. pe anumite elemente din HTML, tot folosind selectori d e CSS.
▪ Accesul la requesturile AJAX cu scopul de a prelua date de pe server, și folosirea lor pe
client. Se pot face requesturi de tip POST, GET, ADD sau DELETE.
▪ Adăugare de diverse evenimente pe orice element din pagina HTML, pentru o mai buna
accesabilitate si experiență a utilizatorului precum: click, hover, focus ș.a.m.d.
▪ Se pot realiza aceleași lucruri ca în JavaScript, dar folosind mult mai puțin cod.
2.1.5 Bootstrap
Bootstrap este un framework frontend foarte puternic, intuitiv și ușor de folosit în cadrul
implementării, care ajută și oferă programatorului o suită de servicii , funcționalități predefinite și
realizarea structurii paginii să fie frumos vizibilă pentru mai multe dimensiuni ale
ecranului(responsive), folosind HTML, CSS și JavaScript. Acesta este lan sat open -source în anul
2011.
O variantă ușoară de a folosi Bootstrap este similar ca la jQuery, importând librăria de pe
internet, ca în exemplu:
“<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/
css/bootstrap.min.css”integrity=””sha384 -BVYiiSIFeK1dGmJRAkyucHaHRg32OmUcww
7on3RYdg4Va+pmstSZ/k68VBDeJH4U” crossorigin=”anonymous”>
Boostrap are mai multe roluri și oferă multe avantaje programatorului, precum:
▪ Compilarea și personalizarea este un motiv i mportant pentru care se dorește folosirea
Bootstrap, în cazul în care se urmărește performanța site -ului. [4]

22
▪ Datorită sistemului găzduit de Bootstrap, structura paginii web poate fii împărțită în 12
coloane egale, folosind diferite combinații, după prefer ințe. Acest lucru se consideră cel mai
important avantaj pentru care se dorește folosirea Bootstrap. Coloanele pot fi de 4 mărimi
diferite: extra -small ( -xs), small ( -sm), medium ( -md), large ( -lg). În funcție de aceste coloane
și mărimi programatorul real izează structura paginii după cum dorește, respective după cum
este nevoie, rezultând că la diferite rezoluții și mărimi ale ecranului, interfața utilizatorului să
arate bine, iar elementele din HTML să fie frumos aranjate.
▪ Framework -ul Bootstrap pune la d ispoziția utilizatorului o suită de documente si elemente
predefinite, reutilizabile, ușurând cu mult astfel, munca developerului. De exemplu: meniu de
navigare, carusel, butoane stilizate, dropdown -uri ș.a.m.d.
▪ Clase predefinite pentru a adăuga stiluri el ementelor din HTML
▪ Documentație gratis, foarte bogată și ușor de accesat

Exemplu pentru grid -ul responsiv bazat pe sistemul de 12 coloane găzduit de Bootstrap:
<div class=”row”>
<div class=”col -lg-2”>2 Coloane</div>
<div class=”col -lg-4”>4 Coloane</div>
<div class=”col -lg-6”>6 Coloane</div>
</div>

Figura 2.2 Sistemul de 12 coloane al Bootstrap

23
2.2 Tehnologii utilizate în implementarea serverului

Figura 2.3 NodeJS server, relaționare cu clienții

2.2.1 NodeJS
NodeJS (JavaScript la nivel de server) reprezintă o platformă realizată pe motorul V8 al
Chrome. Framework -ul NodeJS este gratis, cu documentație proprie, rulează pe diferite browsere
precum: (Windows, Linux, Unix, Mac Os X ș.a.m.d) și folosește JavaScript ca limbaj de programare
de bază pe par tea de implementare pe server, fiind singurul cu această caracteristică. A fost lansat în
anul 2009 de către Ryan Dahl. [8]
NodeJS folosește un model bazat fie pe evenimente, api -uri sau operații de intra re/ieșire astfel
fiind un framework foarte accesibi l și eficient. Pachetul de care dispune și anume ‘npm’, este cel mai
mare ecosistem de librării gratuite si disponibile din întreaga lume. Folosind NodeJS se pot realiza
mai multe tipuri de aplicații:
▪ Aplicații bazate api -uri folosind JSON
▪ Aplicații în ti mp real, web, de rețele sociale, software -uri de chat
▪ Aplicații simple
▪ Aplicații bazate pe evenimente
▪ Aplicații care au la bază un schimb de date cu back -end-ul.
În aplicația prezentată, se folosește NodeJS pentru implementarea unei aplicații în timp rea l de
tip chat, bazată pe evenimente emise între Back -end si Front -end.
Benificiile NodeJS sunt:

24
▪ E foarte rapid și scalabil, din cauza arhitecturii asincron bazată pe emitere de evenimente și
folosirea limbajului JavaScript. În cadrul implementării, mai pu ține linii de cod, mai puține
fișiere.
▪ Folosirea de mai puțin cod si mai puțini programatori în scopul finalizării unui proiect,
datorată faptului ca toată aplicația se poate scrie în același limbaj: JavaScript si de asemenea
poate rula pe mai multe platfo rme.
▪ Dispune de o documentație bogată cu privire la evenimente, socketuri, api -uri, intrări sau
ieșiri si multe alte benificii, funcționalități de care dispune.

Figura 2.4 Legătura client -server bazată pe evenimente în timp real
2.2.2 Socket.Io
Prima lansare a Socket.IO a versiunii 1.0 a avut loc pe data de 24 Mai 2014.
Socket.Io este una dintre cele mai apreciate librării pentru cei care programează folosind
NodeJS. Socketurile permit comunicarea bidirecțională în timp real între Front -end și B ack-end. Sunt
predestinate cel mai bine aplicațiilor de tip chat. Aceste socketuri sunt folosite în cazul în care se
doreste comunicare în timp real a utilizatorilor pe o pagină web în timp real.
Socket.Io se instalează apelând la pachetul cunoscut NPM.
Aceste socketuri relaționează prin evenimente cu nume identic între clienți si serverul de pe
NodeJS. În cadrul acestor evenimente se pot trimite intre Front -end si Back -end variabile, mesaje,
chei ș.a.m.d, ca in exemplul:
▪ Pasul 1: Server to Client : Io.em it(‘event1 ’, data1 );
▪ Pasul 2: Client to Server: Socket.on(‘event1’, data1);
▪ Pasul 3: Client to Server: Socket.emit(‘event2’, data2);
▪ Pasul 4: Server to Client: Socket.on(‘event2’, data2’);
2.2.3 ExpressJS
Express este un framework (pe parte de server) de NodeJS minimalizat si flexibil care oferă
un set robust de caracteristici pentru a dezvolta aplicații web și aplicații mobile. Este gratuit cu

25
licență MIT. Autorul principal al acestui framework este TJ Holowaychuk. Es te compatibil și se
comportă bine in combinație cu Socket.IO și NodeJS.
Pentru folosirea acestui framework este necesară instalarea lui, care are loc in linia de
comandă folosind pachetul bine cunoscut NPM:
“$ npm install express –save”
Cu ajutorul Expr essJS se realizează crearea unui server și de asemenea configurarea acestuia
pentru a -l seta să asculte un anumit port (port standard: 3000). Limbajul ce stă la baza Express.JS
este JavaScript, și este foarte dorit de programatori din cauza ușurinței si ac cesibilității pe care o
oferă atunci cand se dorește creare a de aplicații .
Exemplu creare server și configurarea acestuia:
var express = require(‘express’);
var app = express();
var http = require(‘http’).Server(app);
http.listen(3000, function(){
consol e.log(‘Serverul ascultă portul *3000’);
});

26
3. Implementarea soluției adoptate
3.1. Arhitectura generală
În aplicație este folosită arhitectura client -server care se bazează pe comunicarea directă ce
are loc între partea de client și partea de server.
Această arhitectură se divide în două părți:
▪ Partea de client a aplicației este realizată folosind mai multe limbaje de programare și cu
ajutorul anumitor librării si framework -uri precum: HTML (HyperText Markup Language),
CSS (Cascading Style Sheets), jQuery, JavaScript, Socket.Io. Clientul comunică cu serverul
prin intermediul unor evenimente emise de către socketuri între aceste doua părti în timp real.
Pe baza acestor evenimente trimise de server se trimit ș i variabile cu valori ce pot fi
schimb ate si manipulate în timp real, precum: mesaje, numele utilizatorilor, obiecte cu valori
ș.a.m.d. Partea web a aplicației este controlată de c ătre partea de server și cele doua părți
depind una de cealaltă pentru funcționarea dorită si pentru emiterea corectă a evenimentelor
în timp real.
▪ Serverul aplicației este implementat cu ajutorul unui framework nou apărut, numit NodeJS,
care are la bază, limbajul de programare JavaScript, de asemenea s -au folosit servere express
și Socket.Io.
Acesta conține toate datele si controlează toata aplicația si funcționalitatea acesteia, dictând
clientului ce, cum si c ând sa transmită utilizatorului, totul pe bază de evenimente transmise în
timp real.

Figura 3.1 Arhitectura client -server
Toate librăriile, framework -urile, pachetele și dependințele necesare pentru folosirea
aplicației precum: NodeJS, Server Express , Socket Io, jQuery, Bootstrap ș.a.m.d. sunt instalate cu
ajutorul NPM (Node Package Manager), care este cel mai mare registru de software din întreaga
lume, cu aproximativ 3 miliarde de descărcări pe săptămână. Acest registru dispune și în același timp
pune la dis poziție 600 000 de pachete și dependințe. Programatorii open -source beneficiază de acest
registru foarte des și le este de foarte mare ajutor în timpul programării efective [7]. Pe lângă
descărcatul acestor pachete, dependințe și librării NPM permite de ase menea si instalarea propriu
zisă, respectiv manipularea acestora.
Pentru scrierea codului propriu -zis, am folosit IDE -ul Visual Studio Code, acesta este gratis
și poate fi folosit de oricine. Alte editoare cunoscute ar fi: Webstorm, Atom, Sublime ș.a.m.d .

27
În figura de mai jos se poate observa o diagramă use case pentru fiecare utilizator:

Figura 3.2 Diagrama use -case

3.2 Organizarea fișierelor și structura directoarelor
Proiectul este structurat din punct de vedere architectural, după cum urmează în figura de mai
jos:

Figura 3. 3 Organizarea fișierelor și a directoarelor
După cum se poate observa în structura obiectului putem scoate în evidență dosarul ‘images’:
care conține toate imaginile folosite în proiect ulterior, dosarul ‘node_modules’ : care conține toate
dependințele și pachetele necesare instalate prin intermediul NPM (Node Package Manager) pentru

28
funcționarea corectă a proiectului în ceea privește tehnologiile, dosarul ‘public’ : acesta conține
fișiere necesare pentru funcționarea părții de client (Front End), dosarul ‘views’ : de asemenea
conține fișiere pentru Front End.
3.2.1 Dosarul ‘public’

Figura 3.4 Dosarul public
Dosarul public este cel care conține la rândul lui alte fișiere sau alte dosare, care sunt folosite
și implementate în cadrul aplicației. Dosarul ‘scripts’ conținut de dosarul ‘public’ conține fisiere de
tip JavaScript (.js) care ajută în manipularea părții vizuale a aplicaț iei oferindu -I utilizatorului o
experiență mai placută. Dosarul ‘styles’ conținut de dosarul ‘public’ are la rândul lui fișisere de
Cascading Style Sheets (.css), acestea stilizează si poziționează elementele de HTML, oferindu -le un
aspect mai frumos și ma i plăcut pentru utilizator. Se pot observa cele două fișiere de tip JavaScript
Object Notation (.json) și anume config.json, respectiv rooms.json. Aceste fișiere au o structură
obiectuala si arhitecturală și sunt folosite pentru a define o structură de dat e de amploare mai ridicată
si pentru a avea un acces mai bun la toate datele din aceasta structură.
3.2.2 Dosarul ‘node_modules’

29

Figura 3.5 Dosarul node_modules
Acest dosar de conține module, dependințe și pachete necesare aplicației pentru funcționarea
corectă. Acestea sunt structurate și organizate în mai multe dosare, după cum se poate observa în
figura de mai sus. Dosarul ‘node_modules’ se genereaz ă de catre npm prin folosirea comenzii ‘npm
install’ în linia de comandă. Comanda ‘npm install’ citește fișierul package.json care conține toate
enumerarea tuturor dependințelor, pachetelor și versiunile acestora necesare a fi instalate pentru
rularea aplicației și în urma la asta se instalează dosarul ‘node_modules’ .

Figura 3.6 package.json
3.3. Structur a aplicației – implementarea
Aplicația care prezintă o componentă de chat integrabilă în orice domeniu de expertiză are la
bază transmiterea de evenimente în timp real de pe partea de server (Backend) înspre partea de client
(Frontend) și înapoi. Aceste e venimente sunt trimise prin intermediul Socket.IO și folosesc la bază o
cheie de recunoaștere care definește evenimentul în sine, parametrii opționali în funcție de care se

30
creează logica de funționare, respectiv logica propriu zisă și anume tratarea acest or evenimente.
Implementarea aplicației se împarte în două alte părți care comunică: server și client.
3.3.1 Implementarea serverului
Într-o primă fază pe partea de server a aplicației se inițializează si definesc pachetele folosite
și instalate, necesare pentru a simula partea de server și totodată configurarea acestuia pentru a fi
active pentru unu dintre porturile disponibile:

Figura 3.7 Dependințele si pachetele inițial izate

Figura 3.8 Configurarea și setarea portului pe care serverul Express trebuie să asculte
După cum este menționat mai sus, aplicația funcționează după transmiterea evenimentelor în timp
real, prin interemediul evenimentelor imple mentate prin Socket.I o după cum urmează:

31
3.3.1.1 Evenimentul ‘connection’

Figura 3.9 Tratarea evenimentului connection pe server
Evenimentul de connection se refer ă exact la momentul în care utilizatorul accesează pagina
plin url respectiv prin portul aferent al aplicației (în cazul de față este vorba despre:
http://localhost:3000 . Browserul prin transpilarea si compilarea codului de JavaScript intereceptează
evenimentul de ‘connection’ iar î n momentul accesării pagini i, acesta răspunde prin logica
implementată.
În evenimentul de ‘connection’ serverul contorizează și ține cont de noua sesiune creată prin
intermediul acestui eveniment, precum și a celorlalți utilizatori existenți și conectați la aplicație.
Serverul este astfel configurat și implementat ca la evenimentul de conectare să raspundă cu o
cameră default, și să i se ofere un istoric al mesajelor scrise în acea cameră până la un număr de 100
de mesaje. Prin acest eveniment se numără în timp real câți utilizatori sunt co nectați la chat în fiecare
moment.
3.3.1.2 Evenimentul ‘username’

Figura 3.10 Tratarea evenimentului ‘username’
Evenimentul ‘username’ este accesat în momentul în care utilizatorul își alege un nume cu
care este disponibil să participe la chat. În figură se validează anumite valori posibile de nume de
utilizator astfel încât dacă acelea sunt alese, utilizatorul este anunțat să iși schimbe num ele. De

32
asemenea dacă utilizatorul se autentifică prin un cod secret, acesta primește numele de utilizator de
admin.

Figura 3.11 Logică pentru utilizatorul logat cu success la chat
Prin intermediul acestui eveniment putem ști exact în fiecare secundă nu mele tuturor
participanților la chat. În cazul în care utilizatorul încearcă să se logeze cu un nume deja existent și
folosit de altcineva, un popup va apărea iar acesta va fi anunțat ca există deja acel nume de utilizator,
implicit este rugat să iși schim be numele de utilizator.
Dacă numele utilizatorului este înscris cu succes, atunci acesta se conectează la chat. Este
numărat în timp real și are posibilitatea de a partipica la chat, adică are posibilitatea de a trimite și el
mesaje.
3.3.1.3 Evenimentul ‘chat message’

Figura 3.12 Interceptarea evenimentului de ‘chat message’
Acest eveniment este interceptat în momentul în care utilizatorul trimite un mesaj înspre a fi
afișat de ceilalți utilizatori. Într -o primă fază este implementată o validare în c are fiecare mesaj în
parte trece printr -un filtru de mesaje interzise pe chat, iar dacă acestea sunt folosite ele sunt înlocuite
cu cuvinte alese aleatoriu.

33
În cadrul acestui eveniment se verifică camera pe care se află utilizatorul, pentru a ne asigura
că mesajele trimise de acesta se trimit unde trebuie.

Figura 3.13 Validare pe mesaje si manipularea acestora
În figura de mai sus, pe lângă manipularea prop riu-zisă a mesajelor pe fiecare cameră, se
adaugă și o optimizare astfel incât daca pe camera curentă s -au scris peste 50 de mesaje, să se șteargă
automat un mesaj din coadă, astfel optimizând fiecare camera de mesaje inutile.
3.3.1.4 Evenimentul ‘usernam eReset’

Figura 3.14 Evenimentul de schimbare al numelui de utilizator
Utilizatorul are posibilitatea de a -și schimba numele de utilizator. Aceasta posiblitate este
implementată în evenimentul ‘usernameReset’. În momentul înscrierii noului nume de utilizator se
verifică dacă acesta există și se ține cont de acesta, contorizând -ul aferent pe camera pe care
utilizatorul figurează. Dacă utilizatorul dorește schimbarea numelui, un popup se deschide pentru a -i
oferi utilizatorului această posibilitate.
3.3.1.5 Evenimentul ‘choose room’

34

Figura 3.15 Evenimentul de schimbare al camerei

Figura 3.1 6 Logica de schimbare a camerei
Utilizatorul, în cadrul aplicației are la dispoziție mai multe camere orientate spre diferite
teme, pe care acesta le poate fo losi după preferință. În cazul în care acesta doreste schimbarea ei,
intră în vigoare evenimentul de ‘choose room’ . Logica implementării verifică camera de pe care
utilizatorul pleacă și de asemenea camera pe care acesta dorește să ajunga, pentru a notific a toți
utilizatorii despre aceasta. Totodată, logica verifică mesajele, istoricul mesajelor emise, și îi oferă
utilizatorului experiența potrivită pentru ca schimbarea de camera să fie incheiată cu succes.

35
3.3.1.6 Evenimentul ‘disconnect’

Figura 3.1 7 Evenimentul de deconectare
Acest eveniment intră in vigoare în momentul în care utilizatorul decide să părăsească aplicația
prin închiderea ferestrei propriu -zise, astfel încheiându -se sesiunea acestuia. În acest moment logica
se asigură ca, numele utiliz atorului este sters din camera curentă, sesiunea acestuia se șterge pentru
ca ulterior utilizatorul să nu mai figureze nici ca fiind conectat la aplicație, nici ca fiind conectat la
chat. Aplicația anuntă toti utilizatorii ca utilizatorul a părăsit aplicaț ia.
3.3.2 Implementarea părții de client
În ceea ce privește partea de client a aplicației, scheletul paginii principale este prezentat în
pagina HTML numită index.html. Stilizarea acestei pagini pentru a oferi utilizatorului o experiență
mai placută în aplicație are loc într -un fișier CSS numit main.css.
Partea de client (Frontend) a aplicației, este alcătuită din HTML, CSS și JavaScript. Pagina
de index.html prezintă structura si scheletul aplicației, care ulterior urmează să fie stilizată de clasele
și atributele existente în pagina main.css, iar logica și interacțiunea cu utilizatorul prin evenimentele
transmise în timp real este realizată prin JavaScript, jQuery și interceptarea acestor evenimente.

36

Figura 3.18 Structura paginii HTML
Se poate observa în figura de mai sus o parte din codul pagini index.HTML, care semnifică
structura scheletului întregii aplicației.

Figura 3.19 Atribute de stilizare a elementelor HTML
În figura de mai sus se pot observa o parte din clasele de CSS atribuite ele mentelor de HTML, pentru
stilizarea, pozitionarea acestora, rezultând într -o interfață grafică placută pentru utilizator.

37
În prima parte a scriptului de frontend care implementează logica părții de client, sunt setate
niște validări atât pentru setarea nu melui de utilizator, cât și pentru conținutul mesajelor, pentru a ne
asigura ca aplicația nu poate fi hackuită, iar în cazul în care cineva incearcă să facă asta, este oprit si
anunțat printr -o alertare a paginii web.

Figura 3.20 Validări pentru conținut ul numelui, mesajelor
3.3.2.1 Interceptarea evenimentului ‘chat message’

Figura 3.21 Construirea mesajelor pe partea de client
În momentul în care se interceptează evenimentul de trimitere a mesajelor, partea de client se
ocupă de construirea acestora în ceea ce privește partea vizuală și interfața grafică a acestora.

38
Logic a interceptării acestui eveniment presupune randarea mesaj elor sub formă de elemente într -o
listă neordonată. Fiecare mesaj conține ca element de interfață grafică: conținutul mesajului, numele
utilizatorului care a trimis mesajul și timpul exact la care mesajul a fost trimis. Mesajul trimis poate
apărea în trei feluri diferite: este portocaliu dacă mesajul a fost trimis de utilizator, este alb dacă
mesajul este trimis de alți utilizatori și gri în cazul în care mesajele fac parte dintr -un istoric al
camerelor. Această diferențiere între utilizatorul propriu -zis ș i ceilalți utilizatori se realizează pe
partea de client în funție de cookie -ul browserului. Fiecare utilizator în momentul în care s -a conectat
primește un cookie pentru a -i defini sesiunea acestuia.
Codul scris pentru diferențierea utilizatorilor:
function getCookie () {
var cookieValue = document .cookie.split('userNameCookie= ')[1];
return cookieValue;
}

document.cookie = "userNameCookie= " + username;
var x = getCookie ();
if (x===usernameee) {
$('#messages ').append($('<li class="messagesByMeClass"> ').html(msg));
De asemenea se folosește în cadrul acestui eveniment o optimizare pe partea de client în ceea
ce privește stocarea mesajelor în listele neordonate mai sus menționate. În cazul în care lista de
mesaje dintr -o cameră anume ajunge sa conțină 30 de mesaje, se incepea ștergea primului element
din coadă pentru a elibera spațiul de stocare al datelor din partea de client și pentru a ne asigura că nu
apar probleme de performanță în experiența utiliz atorului cu aplicația.
3.3.2.2 Evenimentele de numire / redenumire al numelui de utilizator

Figura 3.22 Evenimente de interceptare a numirii/redunimirii numelui de utilizator
În cazul în care numele de utilizator cu care acesta încearcă să intre în aplicație există deja și
este folosit de altcineva, partea de client deschide un popup spre utilizator pentru ca acesta să aleagă
unul nou.
În cazul în care utilizatorul a reușit conectarea la chat prin alegerea numelui de utilizator,
partea de client anunță ceilalți client de aceasta printr -o notificare în cadrul chatu -ului și de asemenea
îl lasă pe utilizator să participe la chat.

39
În cazul î n care utilizatorul dorește schimbarea numelui său, prin apăsarea unui buton partea
de client ii deschide utilizatorului un popup în care acesta are posibilitatea să iși aleagă noul nume de
utilizator.
3.3.2.3 Evenimentele care contorizează în timp real câ ți utilizatori sun conectați

Figura 3.23 Numărul de utilizatori afisați în timp real
Datorită faptului că aplicația functionează prin transmiterea de evenimente, avem posibilitatea de
afișare a numărului de utilizatori atât conectați la pagina web, cât și la chat (prin nume de utilizator).
Cele două interceptări din figura de mai sus primesc de la partea de server numărul exact de
utilizatori atât la pagina web cât și la chat din fiecare moment și le afișează în două elemente HTML.
3.3.2.4 Interceptarea evenimentului ‘history per rooms’

Figura 3.24 Interceptarea istoricului de mesaje pe fiecare cameră

În cadrul acestei interceptări de eveniment, partea de client oferă utilizatorului în momentul
în care acesta accesează o camera nouă, ultimele 30 de m esaje din istoricul acelei camere.

40
3.3.2.5 Interceptarea evenimentului ‘choose room’

Figura 3.25 Logica pe partea de client în vederea schimbării camerei
În momentul în care utilizatorul dorește schimbarea camerei evenimentul și logica relatate mai
sus se ocupă de aceasta parte. Utilizatorul are în partea grafică un meniul de selectarea cu mai multe
opțiuni, fiecare opțiune reprezentând o cameră. Daca o nou ă camera este selectată partea de client
comunică părții de server camera nouă, respectiv schimbă tot mediul în funcție de camera nouă: îi
afișează acestuia conținutul paginii noi, mesajele noi, istoricul camerei noi, respectiv vede câți
utilizatori se afl ă acolo.

41
4. Rezultate experimentale
4.1 Rularea aplicației prezentate
Pentru rularea aplicației prezentate este nevoie de instalarea anumitor programe, dependințe
și pachete precum: NodeJS (este necesară o versiune mai mare decat 6.0.0), NPM (Node package
manager).
Prin intermediul registrului NPM și al fișierului package.json existent în structura proiectului,
putem lansa instalarea dependințelor, pachetelor și a librăriilor folosite în proiect prin executarea în
linia de comanda sau a terminalului a comenzii ‘npm install’. Acest proces dureaz ă de regulă cateva
minute, dar odată ce acesta s -a încheiat cu succes s e poate rula o altă comandă în aceeași linie de
comandă pentru rularea aplicației. Aceasta comandă se numește ‘node index.js’ . Fișierul index.js este
punctul de pornire al aplicației, acesta este fișierul unde serverul este configurat să primească toată
partea de client (Frontend) și să ruleze toata aplicația prin intermediul serverului Express. În urma
rulării acestei comenzi, terminalul va răspunde cu un mesaj care va menționa ca serverul a pornit si
ca aplicația asculta portul 3000. Utilizatorul poate sa acceseze aplicația din orice browser prin url -ul:
http://localhost:3000 sau 127.0.0.1:3000.

Figura 4.1 Rularea aplicației de chat
4.2 Accesul la pagina principală

42
Figura 4.2 Acces la pagina principală

În momentul în care utilizatorul accesează http://localhost:3000 sau 127.0.0.1:3000, acesta
are acces la camera principal, unde este prezentat mediul descris în camera respectivă, respectiv chat –
ul propriu -zis în parte a dreapta a imaginii, unde pentru a participa la chat este nevoie sa te autentifici
fără parte de securitate alegând un nume de utilizator.
4.3 Participarea la chat
După ce utilizatorul a accesat pagina, are posibilitatea de a vizualiza mesajele care au f ost
afișate pe pagina curentă. Totodată, are posibilitatea de a se autentifica la chat alegând un nume de
utilizator ca în imagine:

Figura 4.3 Participarea la chat
După ce utilizatorul și -a ales numele de utilizator, se afișează un mesaj de notificare cum că
acesta a fost conectat la chat și astfel comunicarea prin chat poate începe. Se poate observa în partea
dreaptă jos și contorul care își schimbă valoarea în timp real î n funcție de numărul de utilizatori.

43

Figura 4.4 Trimiterea de mesaje și participarea la chat
4.4 Ascunderea chat -ului
Aplicația poate permite utilizatorului să ascundă chat -ul pentru a îi oferi acestuia posibilitatea
de a avea un câmp vizual mai bun a supra mediului descries în camera în care acesta se află în
momentul respectiv.

Figura 4.5 Ascunderea chat -ului

44
4.5 Schimbarea camerelor
Utilizatorul aplicației are posibilitatea de a schimba camerele, pentru a accesa diferite chat –
uri, grupuri sau dif erite medii. Acesta are la dispoziție o listă în care există mai multe camere,
utilizatorul putând să opteze pentru fiecare dintre ele.

Figura 4.6 Lista cu camerele disponibile
Odată ce utilizatorul a ales una dintre camerele disponibile, mediul aplicației se va schimba,
chat-ul se va reranda cu noii participanți din camera respectivă, acesta va avea acces la istoricul de
mesaje activ în camera respectivă, iar toti utilizatorii v or fi notificați printr -un mesaj automat trimis
de către sistem de aceasta schimbare menționând camera din care a plecat și camera în care ajunge
noul utilizatorul intrat , iar acesta primește de asemenea un mesaj de bun venit în camera nouă cu
numele camer ei atașat .

45

Figura 4.7 Schimbarea camerei și mesajele trimise de sistem
4.6 Afișarea numărului de utilizatori
Prin intermediul transmiterii evenimentelor în timp real implementate cu Socket.io fiecare
utilizator are posibilitatea de a vedea în timp rea l numărul de utilizatori atât conectați la pagina web,
cât și conectați la chat, prin alegerea numelui de utilizator. Se poate observa în imaginea de mai jos,
pe lângă cele doua contoare afișate în timp real, si numele utilizatorului logat.
Fiecare dintr e cele două contoare sunt afișate lângă o iconiță specfică, una care indică
numărul oamenilor care vizualizează chat -ul nefiind conectați, iar cealaltă numărul utilizatorilor care
sunt conectați la chat.

Figura 4.8 Afișarea numărului de utilizatori
4.7 Schimbarea numelui de către utilizator
În situația în care utilizatorul d orește să iși schimbe numele pentru a fi afișat diferit în
momentul experienței sale în cadrul aplicației, acesta are posibilitatea dacă apasă pe numele său
afișat în partea dreaptă jos. În urma apăsării acelui buton, se va deschide un popup în care
utilizatorul poate să iși schimbe numele și să îl salveze.

46

Figura 4.9 Schimbarea numelui de către utilizator
4.8 Val idare utilizator duplicat
În situația în care un nou utilizator încearcă să se logeze cu un nume care deja este folosit de
altcineva logat in aplicație, sistemul îl va alerta cu un mesaj de notificare, și îi va afișa un popup în
care utilizatorul va avea posibilitatea să isi aleagă un nou nume.

Figura 4.10 Validare utilizator duplicat

47
4.9 Schimbarea mediului
Aplicația permite să fie configurată și astfel camerele să fie customizate și specializate pe
domeniul pe care se dorește folosită aplicația. Camerele pot conține ca mediu de desfășurare:
înregistrare live, știri live, muzică live, conferințe live ș.a.m.d. În cazul în care un a dintre camere are
activitatea pusă pe pauză sau nu este live există o notificare a statusului mediului expus printr -o poză
ca în imagine:

Figura 4.11 Afișare status inactiv al camerei

48
5. Concluzi i și perspective
Această lucrare a avut ca și scop implementarea și concretizarea unei aplicații de tip chat,
văzută chiar sub forma unei componente integrabile în diferite domenii de experiență (exemplu:
domeniu medical, domeniu comercial, domeniu marketing, domeniu știri, domeniu sport). Aplicația
este implementată prin unele din cele mai noi tehnologii și lucr ul pentru care aceasta prezintă o
perspectivă de foarte mare amploare, este transmiterea evenimentelor în timp real, oferind
utilizatorilor o experiență foarte plăcută în acest sens.
Se poate menționa faptul că aplicația este perfect funcțională, logica i mplementării a
evenimentelor tratate pe partea de server fiind foarte optimizată, rezultând în aplicația de chat expusă
pe parcursul lucrării, cu toate funcționalitățile necesare pentru o experiență plăcută, mulțumitoare și
completă. Interfața cu utilizato rul este una simplă, cu un design plăcută, fiind foarte inteligibilă și
sugestivă.
Acest proiect folosește mediul de execuție NodeJS pentru implementarea părții de server.
NodeJS este o alegere perfecta pentru implementarea de proiecte micuțe, sub forma un or prototipuri
cu o perspectivă foarte mare. Serverul este configurat si simulat cu ajutorul ExpressJS, iar logica
implementării si comunicarea cu partea de client este realizată prin transmiterea evenimentelor în
timp real cu Socket.Io. Partea de client a aplicației este implementată prin HTML pentru structurarea
aplicației în elemente sub forma unui schelet , prin CSS care stilizează si ajuta la poziționarea
elementelor de HTML oferind utilizatorului o parte vizuală mai plăcută, respectiv logica și
interac țiunea cu utilizatorul este realizată prin interceptarea evenimentelor Socket.Io, jQuery și
JavaScript.
Aplicația deși este funcțională perfect, pot menționa și faptul că aceasta poată fi extinsă,
îmbunătățită și ajustată după caz. În funcție de domeniul ș i locul în care aceasta poate fi integrată, ea
primește și poate accepta integrarea unei baze de date, unei pagini de admin pentru managementul
camerelor și al mediilor prezentate în acestea și desigur implementarea de noi funcționalități.
Putem spune că s copul acestei lucrări a fost atins și este implementarea unei componente
integrabile de chat online, care să fie gratuită, ușor de folosit, accesibilă, si totodată să satisfacă toate
nevoile clienților în ceea ce privește comunicarea online bazată pe mesag eria instantanee.
În concluzie, putem menționa faptul că tema abordată în acest proiect este una de actualitate și
chiar de perspectivă, aplicația fiind disponibilă să se plieze pe orice domeniu de experiență cu scopul
de a îmbunătăți diferite experiențe, tehnologiile fiind din suita celor mai noi care vor crește și vor fi
din ce în ce mai folosite.

49
6. Bibliografie
[1] https://en.wikipedia.org/wiki/HTML Accesat – 20.08.2018
[2] https://developer.mozilla.org/en -US/docs/Learn/JavaScript/First_steps/What_is_JavaScript
Accesat – 20.08.2018
[3] http://study.com/academy/lesson/what -is-javascript -function -uses-quiz.html Accesat 15.08.2018
[4] http:/ /ctrl-d.ro/tutoriale/ce -este-bootstrap -si-cum-te-poate -ajuta -in-dezvoltarea -de-site-uri-web-
moderne/ Accesat 16.10.2017
[5] https://www.tutorialspoint.com/css/what_is_css.htm Accesat – 20.08.2018
[6] https://www.skype.com/en/about/ Accesat – 21.08.2018
[7] https://docs.npmjs.com/getting -started/what -is-npm Accesat 25.08.2018
[8] Beginning Node.js – Unleash the power of NodeJS and create highly scalable websites – Basarat
Ali Syed
[9] HTML & CSS – Design and build websites – Jon Duckett
[10] JavaScript & jQuery – Interactive front -end web development

50
7. Anexe
7.1 Diagrama use -case:

51
7.2 Diagrama sec vențială:

7.3 Fișierul rooms.json care conține structura camerelor existente:
[
{"id": "1",
"name": "Camera Principala !",
"embeddedCode":
"https://livestream.com/accounts/6370732/events/2725565/player?autoplay=1&showinfo=0&control
s=0",
"listOfUsers": [],
"countUsersByConnection": "0",
"countUsersByUsername": "0",
"emittedMessages": [],
"image": "https://twitchoverlay.com/stuff/uploads/edd/2016/02/gun -city-offline –
1024×576.jpg"},
{"id": "2",

52
"name": "Live Music",
"embeddedCode": "https://www.youtube.com/embed/H5Zigs –
54X4?auto play=1&showinfo=0&controls=0",
"listOfUsers": [],
"countUsersByConnection": "0",
"countUsersByUsername": "0",
"emittedMessages": [],
"image": "https://twitchoverlay.com/stuff/uploads/edd/2016/02/gun -city-offline –
1024×576.jpg"},
{"id": "3",
"name": "Pass it on",
"embeddedCode": "https://player.twitch.tv/?channel=livestreamtwitch 1234",
"listOfUsers": [],
"countUsersByConnection": "0",
"countUsersByUsername": "0",
"emittedMessages": [],
"image": "https://twitchoverlay.com/stuff/uploads/edd/2016/02/gun -city-offline –
1024×576.jpg"},
{"id": "4",
"name": "Nice Song",
"embeddedCode":
"https://www.youtube.com/embed/VzijytdpxpE?autoplay=1&showinfo=0&controls=0",
"listOfUsers": [],
"countUsersB yConnection": "0",
"countUsersByUsername" : "0",
"emittedMessages": [],
"image": "https://twitchoverlay.com/stuff/uploads/edd/2016/02/gun -city-offline –
1024×576.jpg"},
{"id": "5",
"name": "Play list: 2018 Music",

53
"embeddedCode":
"https://www.youtube.com/embed/GsF05B8TFWg?list=RDGsF05B8TFWg&autoplay=1&showinfo
=0&controls=0",
"listOfUsers": [],
"countUsersByConnection": "0",
"countUsersByUsername": "0",
"emittedMessages": [],
"image": "https://twitchoverlay.com/stuff/uploads/edd/2016/02/gun -city-offline –
1024×576.jpg"},
{"id": "6",
"name": "News",
"embedd edCode":
"https://livestream.com/accounts/6370732/events/2725565/player?autoplay=1&showinfo=0&control
s=0",
"listOfUsers": [],
"countUsersByConnection": "0",
"countUsersByUsername": "0",
"emittedMessages": [],
"image": "https://twitchoverlay.com/stuff/uploads/edd/2016/02/gun -city-offline –
1024×576.jpg"
}
]

7.4 Test detecție plagiat

54
8. Curriculum vitae
PERSONAL INFORMATION GRATIAN CATALIN MUNTEAN

Bucuresti street, 68 No., bl. D16, sc. I, ap. 10, 400148, Cluj -Napoca, România
+40 741 903 140
gratiancatalin .muntean@gmail.com

Sex Male | Date of birth 22/05/1994 | Nationality Romanian
EDUCATION AND TRAINING
2013 – 2017 Faculty of Electronics, Telecommunications and Information Technology –
The Technical University of Cluj -Napoca, Romania

2009 – 2013 Theoretical High School “Nicolae Balcescu ”, Mathematics and
Information Technology profile, Cluj -Napoca, Romania

PERSONAL SKILLS

WORK EXPERIENCE

JULY 2016 – AUGUST 2 016

SEPTEMBER 2016 –
PRESENT

Internship

I was an intern to an UI -UX/ Frontend Development internship at Endava. There
were six weeks of theoretical and practical sessions where we improved our
frontend skills.

Frontend Developer

Since September 2016, I am working as a Frontend Developer in Endava.
I worked on several small projects where implementation of presentation sites was
needed using HTML, CSS, jQuery, Bootstrap, JavaScript.
I implemented a real -time chat implemented by Node.js, Socket.io, Expres s for the
Backend part, and jQuery, HTML, CSS for the Frontend part.
I am working for more than one year on a big commercial project
Implemented by latest Angular version and TypeScript.

Mother tongue(s) Romanian

Other language(s) UNDERSTANDING SPEAKING WRITING

55

Listening Reading Spoken
interaction Spoken
production
English B2 B2 B2 B2 B2

French B1 B1 B1 B1 B1

Communication skills I have great interpersonal communication skills which enables me to work and to
collaborate more effectively in groups and teams .
– Clearly explanations about what I developed
– Provide feedback
– The ability to understand what is required
– Ask questions if something is not clear

Personal skills and competences – Organisational, managerial and decision -making skills
– Accept ideas from team members and also interested to find best solution into
getting the things done
– Always trying to keep up to date with the new information, latest news,
exploring new technologies
– Flexibility and adaptability – quickly adapt as required
– Motivated about technical improve ments
– Ambitious person
– Positive energy and attitude

56

T echnical skills My key skills:
– Angular 5
– JavaScript
– TypeScript
– Angular CLI/ Angular Material
– jQuery
– HTML/ HTML5
– CSS/SASS/LESS/
– Bootstrap
– Lodash

Also good knowledge about:
– Ajax
– Git
– Jira
– OOP
– Node.js
– Socket.io

Good knowledge about Agile Methodologies.

Very good command of Dreamweaver 8 and Adobe Dreamweaver : Implemented
a website for programming certificate.

Other skills I studied piano for 7 years.

I played basketball for 8 years.

Strategical and good teammate skills gained through my experience as
professional gamer in electronics competitions (League of L egends)

Teamwork, work on projects with deadlines

Ability to build and maintain strong relationships

Self-control and adapting behavio r depending on the situation

Driving licence

Cluj-Napoca,
23.04.2018 B category since 2013

Muntean Gratian Catalin