UNIVERSITATEA „ALEXANDRU IOAN CUZA” IAŞIFACULTATEA DE INFORMATICĂ

LUCRARE DE LICENŢĂ

BlueChat

Dezvoltarea unei aplica ii de tip chatțutilizând XMPP

propusă de

David Ionu -Cătălinț

Sesiunea: februarie, 2017

Coordonator ştiinţific

Asist. Dr. Vasile Alaiba

1

DECLARAŢIEPRIVIND ORIGINALITATEŞI RESPECTAREA

DREPTURILOR DE AUTOR

Prin prezenta declar că Lucrarea de licenţă cu titlul „BlueChat –

Dezvoltarea unei aplicații de tip chat utilizând XMPP” este scrisă de mine

şi nu a mai fost prezentată niciodată la o altă facultate sau instituţie de

învăţământ superior din ţară sau străinătate. De asemenea, declar că

toate sursele utilizate, inclusiv cele preluate de pe Internet, sunt indicate

în lucrare, cu respectarea regulilor de evitare a plagiatului:

toate fragmentele de text reproduse exact, chiar şi în traducere

proprie din altă limbă, sunt scrise între ghilimele şi deţin referinţa

precisă a sursei;

reformularea în cuvinte proprii a textelor scrise de către alţi autori

deţine referinţa precisă;

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;

rezumarea ideilor altor autori precizează referinţa precisă la textuloriginal.

Iaşi, data

Absolvent David Ionuț-Cătălin

_______________________

2

DECLARAŢIE DE CONSIMŢĂMÂNT

Prin prezenta declar că sunt de acord ca Lucrarea de licență cu titlul„BlueChat – Dezvoltarea unei aplicații de tip chat utilizând XMPP”,codulsursă al programelor şi celelalte conţinuturi (grafice, multimedia, date detest etc.) care însoţesc această lucrare să fie utilizate în cadrul Facultăţii deInformatică.

De asemenea, sunt de acord ca Facultatea de Informatică de laUniversitatea „Alexandru Ioan Cuza” Iași să utilizeze, modifice, reproducă şisă distribuie în scopuri necomerciale programele-calculator, formatexecutabil şi sursă, realizate de mine în cadrul prezentei lucrări de licenţă.

Iaşi, data

Absolvent David Ionuț-Cătălin

_________________________

3

CuprinsIntroducere.................................................................................................................................5

Context..................................................................................................................................5Motivație...............................................................................................................................5Contribuții.............................................................................................................................6

Capitolul 1: Dezvoltarea aplicației client...................................................................................71.1 Arhitectura aplicației.......................................................................................................71.2 Implementare.................................................................................................................12

1.2.1 Conectarea utilizatorului.......................................................................................121.2.2 Preluarea listei de prieteni.....................................................................................131.2.3 Prezența.................................................................................................................141.2.4 Trimiterea/Tratarea cererilor de prietenie..............................................................141.2.5 Trimiterea/Primirea mesajelor...............................................................................151.2.6 Stările conversației................................................................................................151.2.7 Ultima activitate....................................................................................................16

1.3 Interfața aplicației client................................................................................................161.3.1 Componenta părinte...............................................................................................161.3.2 Fereastra Tabs........................................................................................................161.3.3 Fereastra Conversations.........................................................................................161.3.4 Fereastra Friends...................................................................................................171.3.5 Fereastra Friend Requests......................................................................................181.3.6 Fereastra Profile.....................................................................................................201.3.7 Fereastra Chat........................................................................................................20

1.4 Tehnologii folosite.........................................................................................................211.4.1 AngularJS 2...........................................................................................................211.4.2 Typescript..............................................................................................................221.4.3 Ionic 2....................................................................................................................23

1.5 Serviciu Android...........................................................................................................241.5.1 Implementarea notificărilor folosind Firebase Google Cloud Messaging............25

Capitolul 2: Dezvoltarea serverului.........................................................................................312.1 Server TCP....................................................................................................................332.2 REST API......................................................................................................................332.3 Stocarea datelor.............................................................................................................35

Capitolul 3: Serverul Ejabberd.................................................................................................383.1 XMPP............................................................................................................................393.2 Extensii XMPP..............................................................................................................40

Concluzii..................................................................................................................................42Referințe...................................................................................................................................43

4

Introducere

Context

Mesageria instantă este un tip de comunicare online, ce oferă o transmisie în timp real cuajutorul internetului. Mesajele sunt transmise de obicei bidirec ional între două păr i. Unele ț țaplica ii folosesc tehnologia ț push pentru a oferi un schimb de mesaje în timp real, trimi ând țmesajele caracter cu caracter în timp ce ele sunt compuse. Unele aplica ii mai avansate pot oferi ți schimb de fi iere, apeluri peste internet (VOIP), sau apeluri video.ș ș

Ideea de mesagerie are rădăcini încă din anii '90, cu primul mesaj de tip SMS trimis prin re eaua de telefonie Vodafone, având textul “Merry Christmas”, mesaj trimis în Decembrie ț1992. După scurt timp, aproximativ 4 ani, firma Mirabilis a lansat prima aplica ie de mesagerie țonline numind-o ICQ (“”I Seek You”). Aceste două tipuri de mesagerie sunt folosite i astăzi în șparalel, cu men iunea că numărul de mesaje trimise folosind aplica ii de mesagerie online ț țsurclasează în fiecare an numărul de mesaje trimise prin furnizorii de servicii telefonice.

Pâna în anul 2009, când aplica ia WhatsApp a fost lansată, serviciul de mesagerie prin țintermediul furnizorilor de servicii telefonice avea monopol. Odată cu avansarea tehnologiei, cre terea vitezei de internet, acoperirea tot mai largă Wi-Fi, utilizatorii au început tot mai mult șsă folosească op iunea de a trimite mesaje online, în detrimentul SMS-urilor. Această schimbare ța fost datorată i aspectului costisitor în unele ări al serviciului de mesagerie.ș ț

Apogeul serviciului de mesaje a fost în 2012, urmând ca în anul 2013 să fie surclasat de aplica iile ce trimiteau mesaje prin intermediul internetului, având un pre mai scăzut sau fiind ț țchiar gratis. Această diferen ă este redată în numărul de mesaje trimise zilnic. Până în Ianuarie ț2015 WhatsApp gestiona 30 miliarde de mesaje pe zi în compara ie cu 20 miliarde mesaje țtrimise prin SMS.

MotivațiePrin dezvoltarea acestei aplica ii am vrut să aduc la cuno tin ă o serie de tehonologii ce ț ș ț

permit implementarea unei aplica ii de tip chat, sau tehnologii ce au o mare influen ă în cadrul ț țdezvoltării aplica iilor web sau server. ț

5

Contribuții

Lucrarea este împăr ită în trei capitole, fiecare capitol fiind destinat unei aplica ii ț ț(server sau client), unde voi face o descriere a procesului de dezvoltare, i voi men iona, undeș țeste cazul resursele necesare pentru dezvoltarea acesteia. Capitolele se situează în următoareaordine :

● Capitolul 1: Dezvoltarea aplica iei clientț

● Capitolul 2: Dezvoltarea serverului

● Capitolul 3: Serverul Ejabberd1

În capitolele men ionate vor fi prezentate i compara ii între diferite modalită i de a ț ș ț țimplementa anumite func ionalită i.ț ț

Contribu ia mea în dezvoltarea acestui proiect este implementarea aplica iei de client ț țcompatibilă atât pe platformele mobile cât i în browser, dezvoltarea aplica iei server, i ș ț șconfigurarea serverului Ejabberd. A fost nevoie de o aprofundare a protocolului XMPP, protocol ce stă la baza aplica iilor de tip chat. Folosind acest protocol împreună cu extensiile țsale am reu it să implementez o aplica ie care oferă informa ii ce îl in pe utilizator antrenat ș ț ț țîn aplica ie. Următoarele implementări sunt realizate folosind XMPP i extensiile acestuia:ț ș

• Actualizare în timp real al statusul unui prieten, online sau offline.

• Ultimele conversa iiț

• Informarea utilizatorului asupra stării conversa iei. Atunci când utilizatorul ț

este angajat într-o convorbire, acesta prime te informa ii ce îl semnalează că ș țpersoana cu care este angajat în convorbire compune un mesaj, sau s-a oprit din scrierea acestuia.

• Ultima oară când un utilizator a fost activ în aplica ieț

• Setare avatar i alte informa ii precum numele complet, adresa.ș ț

Pe lângă func ionalită ile men ionate mai sus, aplica ia client dispune i de o interfa ă ț ț ț ț ș ț

intuitivă i placută din punct de vedere vizual. Interfa a este realizată ș ț folosind componente cerespectă ultimele specifica ii ț Material Design. Datorită acestei abordări am reu it sa creez o șinterfa ă compatibilă cu orice dimensiune a ecranului.ț

1 https://github.com/processone/ejabberd

6

Capitolul 1: Dezvoltarea aplica iei clientț

Aplica ia are scopul de a da posibilitatea utilizatorilor să trimită mesaje text altor țultilizatori. Interfa a este foarte intuitivă, i va fi descrisă în următoarele subcapitole. ț șDeasemenea, în următoarele subcapitole voi descrie arhitectura aplica iei, mediul de dezvoltare ți tehnologiile folosite, cu o scurtă compara ie pentru fiecare tehnologie în parte, acolo unde esteș ț

cazul.

1.1 Arhitectura aplicațieiPentru dezvoltarea aplica iei client s-au folosit o serie de tehnologii web ce permit ț

utilizatorului să folosească aplica ia atât pe o platformă mobilă cât i în browser. Aceste ț ștehnologii vor fi men ionate pe parcursul lucrării i detaliate în capitolul Tehnologii folosite.ț ș

Structura aplica iei este una simplă, în care fiecare fereastră de navigare este o țcomponentă. Această structură are ca rezultat o modularizare a aplica iei, unde fiecare fereastră țare propria sa logică, interfa ă i foaie de stilizare. Mai mult, structurând aplica ia pe ț ș țcomponente este posibilă refolosirea acestora oriunde în aplica ie, lucru ce duce la o dezvoltare țrapidă, i satisface principiul dezvoltării software (DRY).ș

Aplica ia dispune i de două servicii Angular, ce vor fi injectate în componentele ce au ț șnevoie de ele. Aceste servicii sunt :

• Messages Manager

Serviciu folosit pentru a realiza conexiunea cu serverul Ejabberd, trimitere mesaje, procesare mesaje primite.

• Chat Storage

Serviciu folosit pentru a executa opera ii cu baza de date (preluare istoric, inserare țconversa ii i mesaje).ț ș

Aplica ia dispune i de un serviciu Androidț ș 2 pentru procesarea mesajelor primite când utilizatorul nu are aplica ia deschisă. Serviciul va fi descris pe larg în Capitolul 1.5.ț

Voi descrie succint rolul fiecărei componente urmând ca în capitolul Interfa ă grafică să țfac o descriere detaliată împreună cu imagini din aplicație.

• AppComponent

Componenta principală va incapsula componentele cu con inut specific. Interfa a ț ț

componentei rădacină va con ine doar un toolbar ce va avea diferite ac iuni în func ie de ț ț țcomponenta copil afi ată.ș

2 https://developer.android.com/guide/components/services.html

7

• TabsComponent

Componenta con ine două taburi : Conversations i Friends.ț ș

• ChatComponent

Fereastra în care este redată conversa ia dintre doi utilizatori.ț

• FriendRequestComponent.

În interiorul acestei componente sunt afi ate cererile de prietenie primite.ș

• ProfileComponent

În această fereastră utilizatorul î i poate schimba poza de profil i/sau alte dateș șlegate de contul acestuia.

• SettingsComponent

Componenta redă posibilitatea de a schimba anumite setări în aplica ie.ț

În AngularJS[1], o componentă este definită ca fiind un caz special al unei directive ce folose te o configura ie mai simplă, lucru ce se potrive te cu structura modulară a ș ț șaplica iei.ț

8

// imports@Component({ selector: 'app-friends', templateUrl: './friends.component.html', styleUrls: ['./friends.component.css']})

export class FriendsComponent implements OnInit { friends : Friend[] = []; constructor(private router : Router, public dialog: MdDialog, private messagesManager : MessagesManager) { this.friends = [] } ngOnInit() { this.friends = this.messagesManager.friends; }}

Cod1. Componenta Friends

Componenta FriendsComponent dată ca exemplu con ine clasa FriendsComponent ce țimplementează interfa a OnInit pentru a putea suprascrie metoda ț ngOnInit apelată atunci când se ini ializează componenta. Serviciul MessagesManager este injectat în clasă folosind ținjectarea de dependin e oferită de AngularJS. Pentru ca serviciul să poată fi injectat în diferite țcomponente acesta trebuie adnotat cu @Injectable.

Structura proiectului este o structură standard a aplica iilor dezvoltate folosind Ionic 2. țAceasta se poate realiza utilizând linia de comandă oferită de Ionic 2. Atât linia această de comandă cât i altele, sau dependin ele aplica iei sunt instalate folosind ș ț ț npm.

Npm este un distribuitor de pachete ce se instalatează o dată cu Node.js. Sintaxa pentru ainstala un pachet este npm install <numele pachetului>. Deoarece o aplica ie poate avea mai țmulte dependin e nu este comodă instalarea pachetelor unul câte unul. Pentru asta se folose te ț șfi ierul ș package.json. Comanda npm install va căuta fi ierul respectiv i va citi toate pachetele ș șdin acesta, care mai apoi vor fi instalate în folderul node_modules.

O altă linie de comandă folosită este cordova-CLI, folosită pentru a instala fi ierul apk șgenerat în urma compilării proiectului. Serverul este pornit utilizând comanda node specificându-i ca parametru calea spre fi ierul ce serve te ca punct de intrare al aplica iei. Alte ș ș țcomenzi folosite în procesul de dezvoltare sunt :

• ejabberdctl start

• tail -f

• ionic build android

• ionic serve

• cordova plugin install

9

//imports@Injectable()export class MessagesManager {// declarații

public constructor(private chatStorage : ChatStorage,private platform : Platform) {

this.chatStateEvent = new EventEmitter<string>();}

}

Cod2. Serviciul Messages Manager

• node_modules este directorul unde sunt instalate bibliotecile AngularJS, Ionic,

Typescript i alte dependin e folosite în aplica ie.ș ț ț

• platforms este directorul ce con ine platformele pe care aplica ia poate fi ț ț

rulată. Momentan con ine platforma android.ț

• plugins con ine codul extensiilor native folosite în aplica ie.ț ț

• resources con ine resursele fiecărei platforme.ț

• src con ine codul sursă al aplica iei. În interiorul acestui director se află ț ț

10

Fig 1: Structura aplicației

componentele, serviciile Angular i modelele.ș

• www este directorul ce con ine sursele rezultate în urma compilării aplica iei. ț ț

Are ca intrare un fi ier index.html i fi iereul build.js, fi ier rezultat în urma ș ș ș șcompilării codului TypeScript în JavaScript.

Entită ile gestionate în aplica ie sunt prietenii, conversa iile, mesajele i cererile de ț ț ț șprietenie. Rela iile dintre prieteni – conversa ie i prieten – cerere prietenie sunt de unu la unu. ț ț șRela ia dintre conversa ie i mesaj este de unu la mai mul i.ț ț ș ț

1.2 ImplementareAplica ia client prezentată în lucrare folose te ț ș StropheJS pentru construirea mesajelor,

care ulterior vor fi trimise serverului Ejabberd. StropheJS este o bibliotecă JavaScript care oferă obiecte i func ii utilitare pentru a u ura dezvoltarea aplica iilor ce folosesc protocolul de ș ț ș țcomunicare XMPP. Acestei librării i se pot adăuga i extensii ce aduc func ionalită i noi în ș ț țaplica ie. Majoritatea cererilor sunt trimise către serverul Ejabberd iar cererile ce vor fi trimise țcătre serverul Node.js vor fi specificate.

11

Fig 2: Diagramă clase

1.2.1 Conectarea utilizatorului

Când utilizatorul acceseaza aplica ia o nouă conexiune este realizată. Serverul țEjabberd este configurat să primească doar o singură conexiune pentru fiecare utilizator, prin urmare dacă un utilizator accesează aplica ia de pe alt dispozitiv, conexiunea precedentă țdevine inactivă. Conexiunea se realizează apelând func ia ț connect din interiorul serviciului MessagesManager.

Func ia ț onConnect va fi apelată cu parametrul status ce va con ine statusul țconexiunii, i cu parametrul ș error ce va con ine o eroare în cazul în care conexiunea nu a fostțrealizată cu succes. Dacă conexiunea este realizată cu succes, o serie de func ii vor fi țînregistrate pentru a gestiona evenimentele primite de la server.

12

/** * This method will try to connect to ejabberd * @param user */public connect(user : string) { this.xmpp_user = user; this.connection = new Strophe.Connection(this.BOSH_SERVICE); this.connection.connect(user + '@' + this.XMPP_DOMAIN, this.xmpp_pass, function(status, error){ this._onConnect.call(this, status, error); }.bind(this));}

Cod 3 : Funcția de conectare

this.connection.addHandler((stanza) => {return this.onMessage(stanza)}, null, "message", null, null, null);

this.connection.addHandler((stanza) => {return this.subscribedStanza(stanza)}, null, "presence", "subscribed");

this.connection.addHandler((stanza) => {return this.subscribeRequest(stanza)}, null, "presence", "subscribe");this.connection.addHandler((stanza) => {return this.userStatusChange(stanza)}, null, "presence");this.connection.addHandler(this.iqMessage, null, 'iq', null, null, null);

Cod 4 : Înregistrarea funcțiilor

1.2.2 Preluarea listei de prieteni

După ce conexiunea este realizată cu succes, lista persoanelor care sunt angajate cu utilizatorul este preluată. Această listă nu reprezintă lista finală de prieteni, prin urmare este aplicată o filtrare pe câmpul subscription ce va avea valoarea both.

Valoarea câmpului subscription este to atunci când utilizatorul a trimis o cerere de prietenie care a fost acceptată în timp ce acesta era offline. Prin urmare, se autorizează automat cererea primită i câmpul ș subscription î i schimbă valoarea în ș both.

1.2.3 Prezența

Totodată după ce conexiunea este realizată cu succes, se trimite o cerere prin care se semnalează că utilizatorul a devenit online. După trimiterea acestei cereri, to i prietenii acestuia țvor fi semnala i cu privire la statusul utilizatorului. Acest mesaj va fi genstionat în func ia ț țînregistrată userStatusChange.

1.2.4 Trimiterea/Tratarea cererilor de prietenie

Mecanismul de cerere prietenie nu este clar definit în specifica iile XMPP, prin urmare țam decis ca termenul “prieten” să fie descris ca fiind legătura dintre doi utilizatori creată în urma trimiterii unei cereri de abonare (subscription) de la un utilizator la altul i acceptarea șacesteia de către utilizatorul care a primit-o. Pentru a în elege mai bine mecanismul de abonare țvoi descrie în ca iva pa i cum este realizată legătura de prietenie între doi utilizatori.ț ș

1. John îl adaugă pe Smith ca prieten. În acest moment se trimit serverului Ejabberd următoarele date :

2. Smith prime te cererea de prietenie i o acceptă. Se trimit serverului următoarele date : ș ș

13

<presence to=' John @ domain .co m' type='subscribed'/>

<presence to='Smith@domain.com' type='subscribe'/>

source.filter((friend : any) => friend.subscription == "both") .subscribe((item : any) => { let friend = new Friend();

// set values from result this.dsFriends.push(friend); });

Cod 5 : Filtrarea listei de prieteni

Din moment ce Smith a acceptat cererea de prietenie se va trimite automat:

3. John prime te cererea de prietenie, dar din moment ce acesta a trimis o cerere, care ș

ulterior a fost acceptată, acceptarea noii cereri se va face automat, iar noul prieten esteadăugat în listă.

În acest moment cei doi utilizatori pot deschide o conversa ie i totodată sunt notifica iț ș țcând unul din ei î i schimbă statusul.ș

1.2.5 Trimiterea/Primirea mesajelor

Trimiterea mesajelor este realizată din fereastra Chat. Atunci când un utilizator trimiteun mesaj unui prieten, o cerere cu un mesaj de tipul message este trimisă serverului.

Pentru trimiterea mesajului se folose te extensia ș receipts care adaugă un nou element mesajului pentru a beneficia de notificări asupra statusului mesajului trimis conform extensiei XEP-0184 Message Delivery Receipts[2].

Mesajele primite sunt tratate de func ia înregistrată ț onMessage unde este primit atât mesajul trimis de prieten, cât i statusul ultimului mesaj trimis de utilizator. Prin acest status șmă refer la : “mesaj primit”. Acest lucru este semnalat prin primirea unui mesaj ce con ine țelementul recv împreuna cu id-ul mesajului. Primirea acestei notificări nu redă faptul că utilizatorul a citit mesajul, ci semnalează faptul că mesajul a fost primit i procesat de către șaplica ie.ț

Atât la primirea mesajului cât i la trimitere, se construiesc obiectele de tip ș Message

14

<presence to='John@domain.com' type='subscribe'/>

public sendMessage(messageToSend, to, thread) : Message{ let message : any; message = $msg({to: to+'@'+this.XMPP_DOMAIN, from: this.xmpp_user+'@'+this.XMPP_DOMAIN, type : 'chat', thread : thread}) .c("body").t(messageToSend); let id = this.connection.receipts.sendMessage(message); let sentMessage : Message = new Message(); sentMessage.id = id; sentMessage.who = "me"; sentMessage.status = "unsent"; sentMessage.text = messageToSend; return sentMessage;}

Cod 6 : Funcția de trimitere mesaj

i se adaugă conversa iei. Următorul pas este inserarea acestor mesaje în baza de date locală a ș țdispozitivului. Inserarea se face doar dacă platforma pe care rulează aplica ia este una Android.ț

1.2.6 Stările conversației

În timpul unei conversa ii utilizatorul prime te notificări cu privire la statusul ț șconversa iei. Aceste notificări sunt :ț

• compune mesaj

• s-a oprit din compunerea mesajului

• este sau nu este activ în conversa ieț

Stările conversa iei sunt emise componentei Chat prin instan a unui obiect de tip ț țEventEmitter, iar acest lucru va fi afi at corespunzător în interfa a respectivă.ș ț

1.2.7 Ultima activitate

Atunci când utilizatorul deschide istoricul conversa iei cu un anumit prieten, acesta țpoate vedea data i ora când respectivul prieten a fost activ în aplica ie. Această func ionalitate ș ț țeste descrisă de XEP-0012 Last Activity.

După primirea răspunsului este folosit acela i obiect (chatStateEvent) pentru a afi a data ș și ora.ș

15

let composing = $(stanza).find('composing');let paused = $(stanza).find('paused');let active = $(stanza).find('active');let error = $(stanza).find('error'); if(!_.isUndefined(composing) && composing.length > 0){ this.chatStateEvent.emit('typing...'); } else if(!_.isUndefined(paused) && paused.length > 0){ this.chatStateEvent.emit(''); } else if(!_.isUndefined(active) && active.length > 0){ this.chatStateEvent.emit('online'); }

Cod 7 : Tratarea stărilor primite în chat

public lastOnline(user : string){ var iq = $iq({ type: 'get', id: 'last1', to: user+"@"+this.XMPP_DOMAIN }) .c('query', {xmlns: 'jabber:iq:last'}); this.connection.sendIQ(iq);}Cod 8 : Ultima activitate

1.3 Interfața aplicației clientPentru a crea o experien ă plăcută utilizatorului, interfa a este creată după standardele ț ț

Material Design3. De i Ionic 2 este într-o versiune beta, componentele oferite sunt mai bine șdocumentate i dezvoltate decât biblioteca Angular Material care la rândul ei este într-o șversiune beta.

1.3.1 Componenta părinte

După cum am men ionat anterior, App Component este componenta părinte, i ț școn ine componenta <ion-nav> ce are ca pagină rădăcină componenta TabsComponent.ț

▪ Accesarea ferestrei Friends Requests, unde utilizatorul poate vedea cererile de

prietenie primite

▪ Accesarea meniului, cu op iunile de a naviga în fereastra destinată profilului.ț

1.3.2 Fereastra Tabs

Această fereastră este structurată sub formă de taburi, oferind o navigare rapidă în interiorul aplica iei între diferite ferestre. Utilizatorul are op iunea de a naviga între fereastra ț țde Conversations, pentru a vedea conversa iile i fereastra ț ș Friends unde sunt afi ati șprietenii, împreună cu statusul online sau offline.

1.3.3 Fereastra Conversations

Fereastra Conversations redă lista conversa iilor deschise, unde utilizatorul poate țvedea numele prietenului, avatarul acestuia, i un fragment din ultimul mesaj primit sau ș

3 https://material.io/guidelines/

16

Fig 3: Caz utilizare Componenta Tabs

trimis. Utilizatorul poate deschide conversa ia din această listă.ț

1.3.4 Fereastra Friends

În interiorul acestei interfe e este afi ată lista de prieteni, fiecare intrare având un nume ț și poza de avatar. Utilizatorul poate naviga în fereastra de Chat pentru fiecare prieten în parte, ș

unde poate deschide o nouă conversa ie sau pentru a continua o conversa ie deschisă cu un ț țanumit prieten.

Deasemeni există i op iunea de a adăuga un prieten, folosind butonul de adăugare ce va ș țfi vizibil în partea dreaptă jos. Butonul este de tip floating i datorită acestui aspect va fi mereu șvizibil deasupra listei.

Pentru adăugarea unui prieten este nevoie de numele acestuia, iar dacă utilizatorul este înregistrat în aplica ie, va primi cererea ce poate va fi procesată din fereastra ț Friend Requests.

17

Fig 4: Interfața conversațiilor

Fig 5: Caz utilizare componenta Conversations

1.3.5 Fereastra Friend Requests

Cererile de prietenie vor fi afi ate în această interfa ă. Utilizatorul poate accepta sau ș ț

18

Fig 6: Interfața listei de prieteni

Fig 7: Caz utilizare Friends Component

refuza o cerere de prietenie. Dacă acesta acceptă cererea de prietenie, prietenul este adăugat automat în lista de prieteni, iar o nouă conversa ie poate fi deschisă. Numărul cererilor țneprocesate va apărea în bara de op iuni.ț

Navigând în fereastra Friend Requests, cererile vor fi afi ate într-o listă, iar pentru șfiecare, este posibilă una din op iunile: accept sau refuzare.ț

19

Fig 8: Notificări

Fig 10: Caz utilizare componenta Friend Request

Fig 9: Interfața listei de notificări

1.3.6 Fereastra Profile

Accesând această interfa ă, utilizatorul î i poate schimba poza de profil. Poza poate fi ț șîncărcată din galeria telefonului.

1.3.7 Fereastra Chat

Cea mai accesată fereastră din aplica ie este ț Fereastra Chat. Din acest motiv am implementat cât mai multe funcționalități pentru a da utilizatorului informații cât mai detaliate.

• Statusul conversa iei, având următoarele caracteristici:ț

◦ Utilizatorul cu care suntem angaja i într-o convorbire compune un mesaj sau nuț

◦ Acela i utilizator a ie it din conversa ie sau încă este activș ș ț

• Statusul unui mesaj, având următoarele caracteristici:

◦ Mesajul este trimis, primit sau văzut.

20

Fig 11: Caz utilizare componenta Chat

Mesajele sunt primite de Roberta, iar acest lucru este afi at pe ultimul mesaj trimis de șAlexander. Mai mult acesta poate vedea că Roberta este angajată în convorbire, i compune un șmesaj. Prin această informa ie este asigurată o consisten ă a convorbirii, i se poate a tepta ț ț ș șmereu un răspuns la o anumită întrebare.

1.4 Tehnologii folosite

Pentru dezvoltarea aplica iei client s-au folosit o serie de tehnologii de actualitate, care țoferă atât avantaje dezvoltatorului cât i o experien ă plăcută utilizatorului.ș ț

1.4.1 AngularJS 2

Aplica ia în momentul prezentării folose te versiunea 2.4.1. AngularJSț ș 4 este un framework în care po i dezvolta aplica ii web, web-mobile, mobile native i desktop native ț ț șfolosind un singur limbaj de programare, typescript, ce va fi descris în sec iunea 1.4.2. țBeneficiile aduse de AngularJS 2 sunt :

4 https://angular.io/

21

Fig 12: Așteptare mesajFig 13: Primire mesaj

• Folose te un sistem modular introdus de ECMAScript 6ș 5.

• Folose te utilitare moderne pentru a împacheta proiectul, precum ș Webpack sau

SystemJS.

De-a lungul dezvoltării framework-ului s-a folosit pe rând SystemJS, iar mai apoi Webpack, la care s-a și rămas, cu mențiunea că opțiunea de a configura acest utilitar nu mai este posibilă deoarece este folosit automat și configurat de AngularJS.

Un alt avantaj oferit de AngularJS este împăr irea aplica iei în componente. Asta duce ț țla posibilitatea de a refolosi anumite componente în diferite păr i ale aplica iei. O ț țcomponentă este alcătuită dintr-o clasă având logica componentei, un template i o foaie de șstilizare.

1.4.2 Typescript

Typescript[3] este un typed superset al limbajului Javascript, ce este mai apoi compilat în Javascript pur. Poate fi compilat în orice versiune ECMAScript, începând cu ECMAScript3, până la ECMAScript6, pentru a oferi suport pentru orice browser sau sistem de operare. În următoarele două sec iuni de cod voi prezenta versiunea compilată in țJavascript a unei clase având un constructor i o metodă;ș

Unele avantaje oferite de Typescript sunt:

• Oferă type safety, asta înseamnă că vor apărea erori la compilare în cazul în care

asignezi valori diferite de tipul la care variabila este declarată. Acela i lucru se aplică i laș șapelarea unor func ii cu parametri de tip diferit.ț

• API clar definit pentru librării. Acest aspect poate fi incorporat i în librăriile ș

dezvoltate in Javascript, adaugându-le fi iere de definire.ș

• Sintaxă asemănătoare cu limbajele de programare orientate obiect (Java, C#).

5 http://es6-features.org/

22

Codul scris în Typescript este compilat în JavaScript (ECMAScript5) sau (ECMAScript 6), în func ie de op iunea aleasă.ț ț

1.4.3 Ionic 2

Ionic[4] este un framework utilizat pentru dezvoltarea aplica iilor hibride. Folosind Ionicțpo i dezvolta aplica ii web care mai apoi pot fi portate pe platforme mobile. Acest lucru este ț țasigurat de Apache Cordova. Aplica ia rulează într-o componentă nativă a sistemului de operare,ț

23

class Greeter {greeting: string;

constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; }}let greeter = new Greeter("world");let button = document.createElement('button');button.textContent = "Say Hello";button.onclick = function() { alert(greeter.greet());}document.body.appendChild(button);

Cod 9 : Clasa Typescript

var Greeter = (function () {function Greeter(message) {

this.greeting = message;}Greeter.prototype.greet = function () {

return "Hello, " + this.greeting;};

return Greeter;}());

var greeter = new Greeter("world");var button = document.createElement('button');button.textContent = "Say Hello";button.onclick = function () {

alert(greeter.greet());};document.body.appendChild(button);

Cod 10 : Codul clasei compilat

spre exemplu în Android este rulată într-un WebView. Se pot accesa în continuare resursele hardware ale telefonului precum camera folosind extensii, lucru posibil numai implementând func ionalitatea în limbajul nativ (Java). Unul dintre plugin-urile folosite este serviciul de țnotificări care este responsabil de afi area mesajelor sub formă de notificări.ș

1.5 Serviciu Android

Serviciul este o componentă care realizează opera ii de lungă durată, fară a oferi o ținterfa ă utlizatorului. Un serviciu poate fi deschis de o altă componentă, spre exemplu o țactivitate, i rămâne deschis continuu chiar dacă utilizatorul a navigat într-o altă aplica ie. În ș țmod normal Android oferă două tipuri de servicii, cu un comportament diferit în func ie de ț

24

Fig 14: Serviciu Android

https://www.tutorialspoint.com/android/android_services.htm

necesitatea aplica iei. Aceste două tipuri sunt :ț

• Service

Aceasta este clasa de bază pentru toate serviciile. Dacă se dore te implementarea unui șserviciu folosind această clasă este important ca opera iile să fie executate într-un nou fir de țexecu ie, deoarece serviciul folose te în mod normal firul de execu ie principal al aplica iei.ț ș ț ț

• IntentService

Acest tip de serviciu este o subclasă a clasei Service ce folose te un fir de execu ie ș țpentru a executa opera iile. O altă caracteristică este aceea că acest tip de serviciu se închide țautomat după ce comanda a fost executată.

În cadrul dezvoltării aplica iei s-a folosit clasa de baza ț Service deoarece este nevoie de men inerea unei conexiuni persistente între utilizator i serverul ce gestionează mesajele. În ț șacest mod se pot implementa i notificări atunci când utilizatorul prime te un mesaj dar acesta ș șnu are aplica ia deschisă. Deoarece aplica ia nu este una nativă, este necesară implementarea ț țserviciului într-un plugin, care mai apoi va fi instalat în aplica ie. Comanda pentru a instala un țplugin într-un proiect Ionic este : ionic plugin add BlueChatServicePlugin.

25

1.5.1 Implementarea notificărilor folosind Firebase Google Cloud Messaging

26

Fig 15: Serviciul Firebase Cloud Messaginghttps://firebase.google.com/docs/cloud-messaging/

Firebase Cloud Messaging6 este o platformă ce permite trimiterea de mesaje sau notificări dispozitivelor. Dacă este folosit cu scopul de a trimite mesaje instant, mărimea unui mesaj trimis nu poate depă i 4KB. ș Firebase Cloud Messaging este folosit pentru a trimite mesaje utilizatorilor care nu au aplica ia deschisă. Când un mesaj este primit acest lucru va fi țsemnalizat printr-o notificare, care va con ine numele celui care a trimis mesajul, avatarul i un ț șfragment de text.

Pentru a vedea mesajul întreg, sau implicit pentru a naviga în fereastra conversa iei, țutilizatorul poate deschide aplica ia apasând pe notificare sau o poate anula.ț

Acest modul folose te două servicii, unul pentru gestionarea notificărilor primite, i unulș șpentru genstionarea cheii primite de la serviciul Firebase.

6 https://firebase.google.com/docs/cloud-messaging/

27

Fig 16: Notificări mesaje

<service android:name="notification.MessagingService"> <intent-filter> <action android:name="com.google.firebase.MESSAGING_EVENT" /> </intent-filter></service><service android:name="notification.FirebaseInstanceIDService"> <intent-filter> <action android:name="com.google.firebase.INSTANCE_ID_EVENT" /> </intent-filter></service>

Fig 17: Înregistrarea serviciilor în AndroidManifest

Serviciul MessagingService extinde FirebaseMessagingServer i suprascrie metoda șonMessageReceived pentru a prelua mesajele i ulterior pentru a construi notificarea.ș

Conform documenta iei, o notificareț 7 este un mesaj care poate fi afi at în afară șinterfe ei grafice a aplica iei. Când i se comunică sistemului Android să construiască o ț țnotificare, prima dată notificarea apare ca o iconi ă în zona notificărilor. Pentru a vedea țdetaliile, utilizatorul poate deschide interfa a unde sunt afi ate toate notificările. Aceste două ț șzone sunt controlate de sistem i pot fi văzute de către utilizator în orice moment.ș

Notificările implementate folosind acest serviciu au un comportament ce depinde de starea aplica iei i tipul mesajului trimis de către server. Prin starea aplica iei mă refer la ț ș țforeground/background. Prin urmare, dacă aplica ia este în ț background, asta însemnând că utilizatorul a ie it din aplica ie sau aplica ia nu mai este vizibilă utilizatorului, notificările vorș ț țfi construite automat de sistemul Android pe baza proprietă ilor mesajului de tip ț notification primit de la server. Atunci când aplica ia este în ț foreground, este vizibilă utilizatorului, notificările vor fi procesate în metoda suprascrisă onMessageReceived. Aplica ia prezentată țîn lucrare prime te de la server mesaje de tip ș data ce vor fi procesate în metoda men ionată țindiferent de starea aplica iei. Mesajele trimise sunt prezentate în Capitoul 2 : Dezvoltarea țserverului. S-a dorit această abordare deoarece notificările sunt personalizate în func ie de țnumărul mesajelor primite. Pentru a deschide aplica ia apăsând pe notificare un obiect de țtipul PendingIntent8 este folosit. PendingIntent con ine descrierea unui Intentț 9 i ac iunile ș țacestuia.

Un Intent este o descriere abstractă a unei opera ii ce poate fi executată. Cel mai des țeste folosit atunci când utilizatorul navighează între activită i, când se dore te pornirea unui ț șservciu sau când o componentă se ata ează serviciul respectiv pentru a comunica cu acesta. șÎn Intent este specificată activitatea ce va fi deschisă.

La deschiderea aplica iei, nu se vor prelua mesajele din Intent-ul folosit de notificare țdeoarece acestea vor fi trimise de serverul Ejabberd în mod automat după conectare. Acest lucru este datorat faptului că mesajele trimise utilizatorilor offline sunt salvate în baza de dateproprie a serverului. Mesajele primite vor fi procesate în acela i fel ca atunci când utilizatorulșeste angajat într-o conversa ie.ț

7 https://developer.android.com/guide/topics/ui/notifiers/notifications.html8 https://developer.android.com/reference/android/app/PendingIntent.html9 https://developer.android.com/reference/android/content/Intent.html

28

Serviciul FirebaseInstanceIDService extinde serviciul FirebaseInstanceIdService i are șca scop procesarea id-ului trimis de platforma Firebase. Acest identificator este unic pentru fiecare instan ă a aplica iei, i este folosit ca un mecanism de autentificare i autorizare a unor ț ț ș șac iuni, în cazul aplica iei prezentate trimiterea de notificări. Este nevoie de implementarea ț țacestui serviciu deoarece în unele cazuri acest identificator poate fi regenerat.

29

private void buildNotification(String message){ NotificationCompat.Builder builder = new NotificationCompat.Builder(this); ArrayList<String> messages = MessagesContainer.getInstance().getMessages(); messages.add(0, message); NotificationCompat.InboxStyle notStyle = new NotificationCompat.InboxStyle(); if(messages.size() > 1){ notStyle.addLine(messages.get(messages.size() - 1)); notStyle.addLine(messages.get(messages.size() -2)); } else if(messages.size() == 1){ notStyle.addLine(messages.get(0)); } int moreMessage = messages.size() - 2; if(moreMessage > 0){ notStyle.setSummaryText("+"+moreMessage+" more"); } notStyle.setBigContentTitle("BlueChat"); String title = "BlueChat"; String contentText = "You have "+messages.size()+" new "; contentText += messages.size() == 1 ? "message" : "messages"; Intent resultIntent = new Intent(this, MainActivity.class); PendingIntent resultPendingIntent = PendingIntent.getActivity( this, 0, resultIntent, PendingIntent.FLAG_UPDATE_CURRENT);

builder.setContentTitle(title) .setContentText(contentText) .setStyle(notStyle) .setContentIntent(resultPendingIntent) .setSmallIcon(R.drawable.icon) .setGroupSummary(true) .setAutoCancel(true) .setGroup("group"); Notification notification = builder.build(); NotificationManagerCompat mNotifyManager = NotificationManagerCompat.from(this.getApplicationContext()); mNotifyManager.notify(123456, notification);}

Fig 18: Construirea notificării

Cazurile în care identificatorul este regenerat de platforma Firebase sunt:

• Aplica ia terge ID-ulț ș

• Utilizatorul dezinstalează/reinstalează aplica iaț

• Utilizatorul terge manual datele aplica iei.ș ț

Deoarece acest ID se poate schimba în urma unui scenariu prezentat este nevoie ca acesta să fie salvat în baza de date a serverului Node.js. Pentru trimitea cererilor este folosită biblioteca Volley sugerată de documenta ia Android. Conform acesteia, Volley este o țbiblioteca HTTP cu sursă deschisă ce face comunicarea cu serverul mai u oară i mai rapidă. ș șBiblioteca se adaugă proiectului prin definirea dependin ei în interiorul fi ierului gradle ț șastfel:

30

dependencies { ... compile 'com.android.volley:volley:1.0.0'}

Capitolul 2: Dezvoltarea serverului

Din moment ce serverul nu are de făcut opera ii intensive s-a decis alegerea unui server țNode.js10, implementat în framework-ul Express. Unul din avantajele acestui server este acela căsuportă un număr mare de conexiuni simultane, lucru crucial într-o aplica ie de tip chat. țRezultatele unor teste arată că un server Node.js poate procesa mai multe cereri fa ă de un serverțscris în PHP say Python. Acest tip de server este u or de configurat, i poate fi rulat pe orice ș șsistem. Serverul are următoarele func ionalită i:ț ț

• Notificarea utilizatorilor cu privire la statusul mesajului. În acest caz mă refer la

un mesaj care a fost citit.

• Înregistrarea utilizatorilor.

• Salvarea mesajelor trimise.

• Procesarea mesajelor trimise unui utilizator offline.

Pentru a realiza aceste functionalită i este necesar ca serverul să poată accepta conexiuni țTCP din partea utilizatorilor, dar i de a oferi un API REST, folosit de aplica ia client i serverul ș ț șEjabberd. Serverul ejabberd împreună cu configurările necesare vor fi descrise detaliat în Capitolul 3.

Express11 este framework-ul standard pentru dezvoltarea aplica iilor web sau a ținterfe elor aplica iilor, sursa acestuia fiind deschisă. Comportamentul serverului, cererile pe ț țcare acesta le poate procesa sunt definite în Express sub formă de rute (routes).

Pe lângă caracteristicile men ionate, serverul Node.js este folosit i ca un server proxy. ț șConform paginei Wikipedia, un server proxy este un server ce se comportă ca un intermediar pentru cererile de la un anumit client, cautând resurse în alte servere. Acest ablon de proiectare șeste folosit atunci când utilizatorul dore te să se înregistreze la serverul Ejabberd. În procesul deșînregistrare aplica ia nu va trimite o cerere direct serverului Ejabberd, ci mai întai va trimite o țcerere serverului Node.js urmând ca acesta să trimită cererea de înregistrare după ce verificările au fost terminate cu succes.

10 https://nodejs.org/en/11 http://expressjs.com/

31

Serverul Ejabberd este configurat ca atunci când se dore te trimiterea unui mesaj cătreșun utilizator care are statusul offline(nu este connectat în aplica ie), mesajul trimis să fie țredirec ionat către serverul Node.js. Acest lucru este asigurat de compilarea i instalarea ț șmodulului mod_offline_post. Compilarea modulului se realizează rulând comanda următoare:

Asupra acestui modul scris în limbajul Erlang am venit cu modificări în apelul func iilor ce parsează mesajele XML deoarece generau erori, motivul fiind folosirea unor țfunc ii ce nu mai erau suportate în noua versiune a serverului.ț

32

Fig 19: Trimitere mesaj unui utilizator offline

erlc -I /lib/ejabberd-0.0/include/ -pa [path_to_ejabberd_src]/ejabberd-master/deps/lager/ebin/ [path_to_module]/mod_offline_post.erl

Acest mecanism face posibilă trimiterea mesajelor prin intermediul platformei Firebase Cloud Messaging.

2.1 Server TCPProtocolul de control al transmisiei este un protocol folosit de obicei de aplicaţii care au

nevoie de confirmare de primire a datelor. Efectuează o conectare virtuală full duplex între douăpuncte terminale, fiecare punct fiind definit de către o adresa IP şi de către un port TCP.

În acest scop am folosit librăria socket.io care permite conectarea unui client la un serverpentru a primi pachete în timp real.

2.2 REST API

Folosind Express, putem defini foarte simplu modul în care aplica ie server răspunde ț

cererilor trimise de clien i, prin folosirea ț rutelor.

Rutele serverului sunt apelate atât de aplica ia client cât i de serverul Ejabberd pentru a ț ștrimite mesaje.

33

Fig 20: Înștiințare mesaj

app.METHOD(PATH, HANDLER)• app – instanța extensie Express• METHOD – una din metodele HTTP• PATH – cale server• HANDLER – funcția ce va fi executată atunci

când ruta este potrivită

Înregistrarea utilizatorului este realizată atunci când serverul prime te o cerere de la șclient. Această cerere va fi validată i procesată, iar mai apoi serverul va returna un răspuns șdupă ce va face o cerere de înregistrare a utilizatorului la serverul Ejabberd. Este nevoie de instalarea i configurarea modulului ș mod_rest pentru a face posibilă trimiterea mesajelor sau a unor comenzi folosind cereri HTTP[5]. Pentru a trimite cererea se folose te modulul node șrequest12, i un obiect Promise va fi returnat.ș

Pentru a implementa func ionalitatea de notificare a utilizatorilor când ace tia sunt ț șoffline modulul mod_offline_post este instalat i configurat pe serverul Ejabberd. În acest fel șmesajul este redirec ionat i o cerere către serverul Node.js este făcută. După primirea ț șmesajului se caută id-ul aplica iei pentru utilizatorul respectiv. Dacă a fost găsit id-ul o cererețce con ine următoarele date va fi fâcută serverului Firebase. Tipul mesajului trimis este de tipțdata deoarece nu se dore te ca sistemul să genereze automat notificarea. Acest lucru se poate șface schimbând tipul mesajului din data în notification13.

12 https://github.com/request/request13 https://firebase.google.com/docs/cloud-messaging/concept-options

34

router.post('/register', function(req, res){ });

Cod 19 : Ruta Express

function registerUser(user){ var dfd = P.defer(); var command = "register "+user+" localhost pass"; var commandLength = _.size(command); var httpOptions = {}; httpOptions.url = cfg.jabberdCredentials.urlEjabberdRest; httpOptions.method = "POST"; httpOptions.headers = { "Content-Length" : commandLength, "Content-Type" : 'text/html; charset=utf-8' }; httpOptions.body = command; makeRequest(httpOptions).done(dfd.resolve, dfd.reject); return dfd.promise;}

Code 20 : Funcția de înregistrare

2.3 Stocarea datelor

Pentru stocarea datelor s-a folosit baza de date SQLITE14 oferită de Android. Interogărilese fac folosind extensia cordova-sqlite-storage 2.0.1. SQLite este o bază de date SQL cu sursă deschisă, ce salvează datele în fi iere text. Spre deosebire de alte baze de date SQL, aceasta nu șare un proces server separat, ci este rulată pe orice dispozitiv.

În baza de date sunt salvate conversa iile i istoricul acestora, pentru a fi afi ate imediat ț ș ș

14 https://www.sqlite.org/

35

var data = { body : body.body, title : body.from, tag : 'bluechat'};var fcmOptions = { url: 'https://fcm.googleapis.com/fcm/send', method: 'POST', body : JSON.stringify({ data : data, to : firebaseId, collapse_key : "chat" }), headers: {}};var headers = { 'authorization': 'key='+SERVER_KEY, 'content-type': 'application/json'};fcmOptions.headers = headers;

Cod 21 : Datele trimise în notificare

Fig 21: Entitățile salvate în baza de date

la deschiderea aplica iei. Logica comunicării cu baza de date este incapsulată în serviciul țAngular : storage, care la rândul lui folose te extensia io.sqlc, ce rulează cod nativ Android, și este injectat oriunde este nevoie de el.ș

“Obiectul Promise15 este folosit pentru opera iile asincrone. Un Promise reprezintă o țvaloare ce va putea fi folosită la momentul curent, în viitor sau niciodată”. Un Promise are trei stări :

• pending – starea ini ialăț

• fulfilled – opera ia s-a terminat cu succesț

• rejected – opera ia nu a fost reu ităț ș

Apelarea func iei ț executeSql va întoarce un Promise ce va fi folosit ulterior pentru preluarea rezultatului.

15 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise

36

this.chatStorage.getConversations() .then((result) => { if(result.rows.length > 0){ for(let i = 0; i < result.rows.length; i++){ let conversation : Conversation = new Conversation(); conversation.thread = result.rows.item(i).threadId; let friend : Friend = new Friend(); // Get messages for conversations friend.name = result.rows.item(i).friend; conversation.friend = friend; self.chatStorage.getMessages(conversation.thread) .then(result => { if(result.rows.length > 0){ // Construire mesaje } self.dsConversations.push(conversation); }); } } })

Cod 23 : Prelucrarea conversațiilor

public getConversations() : Promise<any>{ if(this.db == undefined) return; return this.db.executeSql("SELECT * FROM conversations", {});}public getMessages(threadId : string) : Promise<any>{ return this.db.executeSql("SELECT * FROM messages WHERE threadId = '"+threadId+"'", {});}

Cod 22 : Preluare lista conversații

Pe serverul node sunt salvate id-urile aplica iei generate de Firebase Cloud Messaging țîmpreuna cu utilizatorul înregistrat pe serverul Ejabberd. Aceste date sunt salvate într-un fi ier șJSON. Datele sunt preluate atunci când se trimit notificări utilizatorilor cu statusul offline.

Aceste entită i sunt citite din fi ier folosind modulul ț ș npm, File System16

16 https://nodejs.org/api/fs.html#fs_file_system

37

{ user : "user înregistrat în serverul Ejabberd", firebaseID : "id-ul aplicației instalate generat de Firebase"}

Cod 24 : Entitate utilizator pe server

Capitolul 3: Serverul Ejabberd

Ejabberd este un server destinat dezvoltării aplicațiilor de tip chating. Protocolul de comunicare este bazat pe XMPP(Extensible Messaging and Presence Protocol). XMPP este cel mai securizat protocol de mesagerie. Este folosit de multe aplica ii cunoscute, precum țMessenger (Facebook), WhatsApp, acestea având versiuni personalizate de server jabberd.

O alta alternativă de a integra un server bazat pe acest protocol este Moongoseim. Diferen a care a adus la alegerea serverului Ejabberd a fost documenta ia detaliată i ț ț șsumedenia de surse disponibile pentru a duce la sfâr it proiectul. Deasemeni comunitatea șmare ajută la optimizarea codului i implementarea noilor protocoale care apar în urma șdescoperirii unor noi func ionalită i sau îmbunătă irea uneia deja existente. În continuare voi ț ț țface o scurtă compara ie între cele două.ț

Ejabberd:

• Avantaje

◦ Comunitate mare i documenta ie detaliată ce con ine exemple de configuare sau ș ț ț

modificare server

◦ Administrare web. Ejabberd oferă o pagină de administrare web, unde po i realizaț

opera ii CRUD asupra conturilor, domeniilor, po i vizualiza statusul fiecărui ț țutilizator.

◦ CLI. Ejabberd oferă i o interfa ă linie de comandă pentru a rula comenzi ce ș ț

reproduc opera iile men ionate în modulul de administrare web.ț ț

• Dezavantaje

◦ Versiunea gratuită a acestui server nu este optimizată pentru proiecte mari.

Mongooseim:

• Avantaje

◦ Este optimizat pentru proiecte mari

◦ Cod mai clar pentru cei ce vor sa facă ajustări sau modificări personalizate, sau

chiar dezvoltări ulterioare.

• Dezavantaje

◦ Nu are interfa ă web pentru administrareț

◦ Comunitatea nu este a a mare iar sursele de documenta ie nu sunt accesibile.ș ț

38

Ejabberd are o structură modulară, lucru ce face ca integrarea unor noi module să fie cât mai simplă. Pentru a vedea întreaga listă de module disponibile pentru instan a de Ejabberd se țexecuta comanda ejabberdctl modules_available. Pentru dezvoltarea aplica iei au fost nevoie de țtrei module:

• mod_offline_post – interceptarea mesajelor către utilizatorii offline.

• mod_post_log – loghează mesajele la un API HTTP.

• mod_rest – folosit pentru înregistrarea unui utilizator.

Configurarea modulelor se face în fi ierul de configurare ș ejabberd.yml. În interiorul acestui fi ier se poate modifica i lista de acces, pentru fiecare domeniu în parte, sau setarea ș șuserului administrator.

3.1 XMPPProtocolul de comunicare dintre aplica ia client i serverul Ejabberd este XMPPț ș [6].

XMPP este un protocol cu sursă deschisă bazat pe standardul XML i fost dezvoltat original în școmunitatea Jabber, iar prima tehnologie Jabber/XMPP a fost dezvoltată in anul 1998 de Jeremie Miller. Acest protocol are i o serie de extensii denumite XEP, dezvoltate după șstandardul XMPP (XSF).

Următoarele extensii sunt folosite în aplica ia client :ț

• XEP-0012 : Last Activity

• XEP-0085 : Chat State Notifications

• XEP-0184 : Message Delivery Receipts

• XEP-0206 : XMPP Over BOSH[7]

39

modules : mod_post_log: url: "http://localhost:3000/notification/history" mod_offline_post: auth_token: "offline_post_auth_token" post_url: "http://localhost:3000/notification/offline"

3.2 Extensii XMPPXMPP Standards Foundation (XSF)[8] publică o serie de documente adiționale

cunoscute ca XMPP Enhancement Proposals (XEPs)[9] ce descriu o activitate și oferă un format standard pentru folosirea respectivei activități.

Extensia Chat State Notification[10] oferă informa ii cu privire la stare unei țconversa ii.ț

           o (start)    

               |               |

INACTIVE <­­> ACTIVE <­­> COMPOSING <­­> PAUSED    |                                       |    |                                       | +­­­<­­­<­­­<­­­<­­­<­­­<­­­<­­­<­­­<­­­+

Când un utilizator începe sa compună un mesaj, acesta va trimite:

<message>    from='romeo@montague.net/orchard'            

to='juliet@capulet.com/balcony'type='chat'>

  <thread>act2scene2chat1</thread>  <composing xmlns='http://jabber.org/protocol/chatstates'/></message>

Când acela i utilizator nu mai compune, se va trimite notificarea ș paused.

<message 

 from='romeo@montague.net/orchard' 

 to='juliet@capulet.com/balcony'

 type='chat'>

 <thread>act2scene2chat1</thread>

 <paused xmlns='http://jabber.org/protocol/chatstates' />

</message>

Extensia Last Activity[11] este folosită pentru a oferi utilizatorul informa ii cu privire țla momentul în care un alt utilizator a fost online. Această informa ie poate fi redată sub tipul țdată, sau un număr de minute.

Pentru a ob ine această informa ie se va trimite:ț ț

40

<iq from='romeo@montague.net/orchard'

id='last1'

to='juliet@capulet.com'

type='get'>

<query xmlns='jabber:iq:last'/>

</iq>

La primirea acestei cereri serverul va răspunde cu numărul de secunde sau o eroare dacă este cazul.

<iq from='juliet@capulet.com' id='last1'

to='romeo@montague.net/orchard' type='result'> <query xmlns='jabber:iq:last' seconds='903'/></iq>

Extensia Message Delivery Receipts oferă func ionalitatea de a primi statusul mesajului țtrimis. După cum am men ionat, extensia bibliotectii ț StropheJs (receipts) este folosită pentru a adăuga un element nou mesajului.

<message from='northumberland@shakespeare.lit/westminster' id='richard2­4.1.247' to='kingrichard@royalty.england.lit/throne'> <body>My lord, dispatch; read o'er these articles.</body> <request xmlns='urn:xmpp:receipts'/></message>

Elementul <request> este adăugat mesajului pentru a semnala clientul cu care comunicăm că se dore te primirea statusului când acesta a fost primit. Atunci când este primit șun mesaj de acest gen clientul care a primit mesajul va răspunde cu :

<message from='kingrichard@royalty.england.lit/throne' id='bi29sg183b4v' to='northumberland@shakespeare.lit/westminster'> <received xmlns='urn:xmpp:receipts' id='richard2­4.1.247'/></message>

41

ConcluziiÎn această lucrare au fost prezentate atât tehnologiile necesare implementării unei

aplica ii de tip chat cât i arhitectura din spatele aplica iei.ț ș ț

Pe parcursul dezvoltării aplica iei client nu au fost întâmpinate probleme, motivul țfiind documenta ia elaborată cu privire la framework-urile i librăriile folosite. Testarea este ț șrapidă pentru că aplica ia poate fi rulată i într-un browser, iar modificările aduse acesteia ț șsunt redate imediat. În tot acest timp s-au folosit i alte aplica ii de mesagerie precum Pidgin ș țsau Psi, pentru a testa func ionalită ile de trimitere mesaje, trimiterea statusului utilizatoruluiț ți statusul conversa iei, func ionalită ile de trimitere cerere prietenie i acceptarea acestora.ș ț ț ț ș

În lucrare a fost prezentat i protocolul ce stă la baza unei aplica ii de tip chat i ș ț șextensiile sale ce oferă o sumedenie de op iuni pentru a reda utilizatorului informa ii rapide iț ț șprecise.

În momentul de fa ă aplica ia poate fi folosită pentru a schimba mesaje cu al i ț ț țutilizatori i următoarele îmbunătă iri pot fi aduse:ș ț

• Implementarea unui server Asterisk pentru func ionalitatea de apeluri.ț

• Implementarea unui server jabberd customizat pentru performan ă sau utilizarea ț

serverului Ejabberd în varianta comercială.

• Implementarea serviciului de notificări i pe alte platforme mobile.ș

42

Referințe1: AngularJS,

https://angular.io/docs/ts/latest/2: Peter Saint-Andre, Joe Hildebrand, XEP-0184: Message Delivery Receipts, 20113: Typescript

https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md, 4: Ionic 2,

http://ionicframework.com/docs/v2/intro/installation/, 5: R. Fielding, J. Gettys, J. Mogul, H. Frystyk, L. Masinter, P. Leach, T. Berners-Lee , Hypertext Transfer Protocol, 19996: P. Saint-Andre, Internet Engineering Task Force (IETF), 20117: Ian Paterson, Peter Saint-Andre, Lance Stout, Winfried Tilanus, XEP-0206: XMPP Over BOSH, 2014-04-098: XMPP Standards Foundation, https://xmpp.org/about/xmpp-standards-foundation.html, 9: XMPP Extensions, https://xmpp.org/extensions, 10: Peter Saint-Andre, Dave Smith, XEP-0085: Chat State Notifications, 200911: Jeremie Miller, Thomas Muldowney, Peter Saint-Andre, XEP-0012: Last Activity, 2008

43