Jurnalul Multimedia In Perspectiva Aplicatiilor Multiplatforma

Cuprins

Introducere 5

Motivație 6

Explicație titlu 6

Obiective 6

1. Caracteristicile aplicației multiplatformă și structura ei 8

1.1. Jurnalul multimedia 8

1.2. Caracteristica aplicației 8

1.3. Structura aplicației 9

2. Tehnologii care fac asta să fie posibil 11

2.1. Aplicația web pe baza de .NET 4.5 11

2.1.1. MVC 5 11

2.1.2. Web API 2 12

2.1.3. Entity Framework 12

2.1.4. SQL Server 2012 12

2.1.5. LINQ to SQL 12

2.1.6. UNIT TESTING 12

1.1.1. MOQ 13

3.1.8. Ninject 13

3.1.9. Bootstrap 13

3.1.10. GIT 13

3.1.11. Dependency Injection 15

3.1.12. Test Driven Development 17

2.2. Aplicație Desktop în Java 18

2.2.1. Java SE 8 20

2.2.2. Librăria Apache HttpComponent 21

2.3. Apache Cordova 21

2.4. HTTP Protocol 22

3.4.1. Ce este o cerere Http? 22

3.4.2. Care este diferenta dintre POST si GET? 22

3.4.3. Cum se face o cerere tip post? 22

3.4.4. Cum realizam cererea tip post in Java? 23

3.4.5. Ce este cu Json? 23

2.5. Baza de date 24

3. Prezentarea aplicației 25

3.1. Ce se întâmplă când un utilizator încearcă sa utilizeze aplicația ? 26

3.2. Ce presupune lucrul cu Web API? 27

3.3. Publicarea aplicației 28

Concluzii. 29

Tendințe de viitor 29

Ce probleme și bug-uri au fost întîlnite pe parcurs? 29

În ce măsura s-au îndeplinit obiectivele 31

Bibliografie 33

Introducere

Progresul tehnic la etapa actuală a ajuns la un nivel foarte înalt, dacă înainte pentru a accesa internetul era pus la dispoziție doar calculatorul, astăzi o putem face cu ajutorul Smartphone-ului, tabletelor, laptop-urilor, televizoarelor smart cu acces la internet ș.a.m.d.

În urma acesteia a apărut problema creării uneia aplicații pe diferite platforme, și accesare informației de pe diferite dispozitive.

Ca prim scop s-a pus problema creării unei aplicații care v-a lucra concomitent pe mai multe dispozitive aceeași informație putând fi accesată cu ajutorul lor, transportul de informație se realizează cu ajutorul unui protocol de comunicare, protocolul de comunicare în acest caz este Http-ul.

Aplicația creată se numește “Sociality” care presupune un site blog ce permite vizualizarea, crearea și ștergerea unor publicații cu date multimedia create de utilizatorii înregistrați. Având o baza de date comună pentru toate dispozitivele, serverul lucrează cu un API care la cererile făcute din afară, întoarce Json sau XML, în cazul nostru vom lucra cu Json pentru ca este mai simplu, mai lizibil, și este universal pentru diferite tehnologii.

Aplicația de Web API la cererile făcute prin protocolul Http accesează baza de date,extrage datele necesare, le împachetează într-un obiect Json și le transmite ca răspuns mai departe, în cazul unor erori returnează un cod de eroare sau un mesaj corespunzător.

Aplicația de Web este realizata cu ajutorul tehnologiei ASP.Net cu pattern-ul de MVC, ea rulează pe ultima versiune de MVC, la fel aplicația de Web include la rîndul său un framework de lucru cu baza de date care se numește Entity Framework, și presupune în cazul nostru lucrul prin Code-First , la fel aplicația conține practicile TDD , testele fiind făcute la finalul proiectului și includ teste pe clase, metode, afișări, și chiar pe context,la fel ultima versiune de MVC presupune și o nouă versiune de autentificare numită Oauth 2, acesta presupune o integrare ușoara a mai multor feluri de înregistrări bazate pe conturile de facebook, gmail, twitter ș.a.m.d. Fiind necesar doar ca site-ul web sa ruleze pe un protocol securizat https.

Aplicația de desktop fiind realizată în limbajul de programare Java cu elemente de vizualizare Swing și o componentă de lucru cu protocolul Http de la producătorul Apache.

Aplicația de mobile v-a fi realizată cu ajutorul framework-ului Apache Cordova, pentru o simplificare semnificativă, acest framework permite crearea de aplicații cu ajutorul limbajelor de programare Html, Css și JavaScript.

El oferă un Api care permite accesul direct a componentelor Smartphone-urilor, fiind necesar doar cunoștințe ce țin de framework-ul respectiv.

Serverul Api cu aplicația de web și baza de date sunt găzduite pe un hosting gratuit , și se afla la adresa http://sociality.somee.com.

Tot proiectul a fost creat cu ajutorul unei aplicații de control de versiuni , numită GIT, făcându-se back-up-uri la fiecare zi de lucru atât local cât și online.

Lucrarea este împărțită în 3 capitole.

Capitolul I va include o prezentare a ceea ce este aplicație multiplatformă, structura unei aplicații, protocoalele de comunicare.

Capitolul II va include o scurtă prezentare a tehnologiilor utilizate, framework-urilor, bibliotecilor, protocoalelor și a tot cu ce lucrează aplicația în sine.

Capitolul III va conține dezvoltarea ideii aplicației, la fel și prezentarea aplicației.

Spre finalul lucrarii vom face o concluzie, și vom încerca să vedem tendințele spre viitor, vom discuta problemele cu care ne-am ciocnit pe parcursul lucrării, bug-urile întilnite , și la fel în ce măsură s-au îndeplinit obiectivele.

Motivație

Această tema a fost aleasă cu scopul învățării a mai multor limbaje de programare și punerea în practică a cunoștințelor căpătate pe parcursul anilor de studiu, am programat pe diferite dispozitive, și acum a ajuns momentul să le punem la lucru împreună. De obicei la baza tuturor platformelor stau aproximativ aceleași principii însă implementarea lor poate fi diferită, de la una la alta. Atât timp cât există cerere la crearea aplicațiilor multiplatformă, atât timp avem nevoie de aplicații robuste care să acopere cerințele de creștere pe piață.

Explicație titlu

În titlu apar noțiunile de aplicație prin perspectiva aplicațiilor multiplatformă, pentru că lucrarea presupune realizarea unei aplicații care v-a rula pe diferite platforme.La fel se v-a face o generalizare în vederea perspectivelor ceea ce țin de dezvoltarea multiplatformă, necesitatea dezvoltării lor, cerinței pe piață, la fel și lucru cu diferite fișiere binare, fișiere text, fișiere audio, și imagine.

Obiective

Obiectivele acestei lucrări presupun formarea unor idei de lucru în privința limbajelor de programare învățate, punerea în practică a cunoștințelor căpătate, la fel și lucrul de la cap la coadă a unui proiect.

Învățarea tehnologiilor recent introduse pe piață, integrarea mai multor limbaje de programare pe proiect. Partea practică a acestei teme presupune crearea unui Web-server care v-a primi cereri de la diferiți clienți ,va executa cererea , dacă va fi nevoie va accesa baza de date și va întoarce înapoi un răspuns. La fel va fi creată o aplicație Web care va putea fi accesată cu ajutorul browser-ului.

Aplicația desktop permite vizualizarea publicațiilor tuturor utilizatorilor și crearea a unei publicații noi.

Pe parcursul proiectului se dorește creare de teste, refactorizarea codului scris, și lucrul cu o aplicație de control de versiuni, la fel se dorește eliminarea dependențelor între clase, pentru o eventuală dezvoltare a proiectului și pentru o mentenanță cât mai ușoară pe parcurs.

Dacă acum 15 ani, aveam principala dispozitiv de acces la internet era desktop-ul

Acum avem o continuă creștere a dispozitivelor mobile, tabletelor și ieșite recent pe piață dispozitivelor smart (ceasuri, televizoare, console de jocuri).

În imaginea de mai jos putem vedea o continuă creștere a utilizatorilor mobile față de desktop, ajungând la sfârșitul anului 2014 la peste 1 miliard 600 milioane de utilizatori.

Spre viitor vom observa o continua creștere a acestor date, și cu siguranță putem spune,

că platforma de mobile este una rentabilă și de cîștig pe piață în care se merită de investit.

Figura1.1. Numărul de utilizatori desktop în comparație cu utilizatorii dispozitivelor mobile.(sursa:Mary Meeker „Internet Trends” 2010).

Caracteristicile aplicației multiplatformă și structura ei

Jurnalul multimedia

Au trecut ani buni de cand un jurnal era completat cu ajutorul pixului si a unei foi,astazi in era internetului exista milioane de jurnale care se pot gasi pe paginile Web-ului, in urma acestor ani definitia de Jurnal a evoluat , si s-a schimbat si scopul unui jurnal,daca inainte era vorba de un jurnal intim care era plin de notite persoanale,acum pe paginile de web avem asa zise Blog-uri care sunt publice si care permit ca fiecare vizitator sa comentezi sa distrubuie aceste publicatii,

Jurnalele au devenit ceva mai mult decat s-a asteptat a fi,acum ele sunt o forta mare care face parte din Mass-Media.

Jurnalul poate avea definitii diferite pentru un scriitor fiind o pagina web unde isi pot scrie gandurile ,pentru un programator un jurnal poate fi chiar acel “logging” care presupune salverea de date ce tin de componentele unui sistem de operare ca erorile,mesajele de stare s.a.m.d

Odata evoluand jurnalul a devenit ceva mai mult decat text, acum chiar si cele mai simple blog-uri contin imagini, audio, video si alte componente dinamice ,

Caracteristica aplicației

O aplicație multiplatformă presupune o aplicație dezvoltată pentru mai multe device-uri printr-un protocol comun de comunicare ,există mai multe tipuri de protocoale protocoale de transport( tcp/ip), de schimb de date (UDP, TCP ), cele de transfer de date (ftp, ftps).

În cazul nostru vom folosi http-ul, el permite transferul de text, este comun pentru toate browser-urile, ce permite crearea de cereri comune pentru fiecare aplicație, ca răspuns se pot întoarce obiecte de tip Json.

Fiecare aplicație va putea lucra cu diferite tipuri de fișiere, pentru asta se va implementa o interfață comuna pentru ele.

Protocolul de comunicare între hosting și programator este ftp ce permite încărcarea ușoară a proiectului pe server.

La moment exista multe framework-uri care permit crearea de aplicații pentru cu aceleași limbaje de programare pentru mai multe platforme, la fel se pot crea aplicații care se vor putea ușor porta de pe un dispozitiv la altul.

Limbajele care fac asta sa fie posibil sunt HTML, CSS și JavaScript atât pe partea de Web cât și pe partea de mobile. Framework-urile necesare fiind sau Apache Cordova sau PhoneGap.

Figura 2.1. Schema UML a aplicației.

În Figura 2.1 este reprezentată o schemă care ne ajuta la o mai bună vizualizare a tuturor componentelor aplicației.

Structura aplicației

Vom începe descrierea începând de la partea superioara(dispozitive) și vom ajunge pana la partea inferioara (Web Serverul).

Utilizatorul cu ajutorul unui dispozitiv cu o interfață grafică, fiind asta aplicația de un Smartphone android sau de pe un browser pe calculator, dorește să accese o pagină web, în cazul aplicației web, browser-ul stabilește URL-ul îl parsează , în cazul nostru avem o cerere de tip Get la adresa http://sociality.somee.com prin portul 80, în caz de succes serverul returnează un cod răspuns (200) și ne returnează HTML-ul paginii care urmează a fi afișat de browser, aplicația web are access la baza de date și la cererea utilizatorului sau în caz de necesitate o poate accesa prin protocolul de transport TCP/IP cu SQL cereri, ca rezultat în caz de succes, primim careva date(o listă a utilizatorilor sau o listă a publicațiilor s.m.a.d.).

Baza de date conține 2 fișiere de tip mdf caracteristic pentru baza de date, primul fișier este dedicat tuturor tabelelor create de utilizator (post, file s.m.a.d)

Fișierul nr.2 este responsabil de stocarea bazei de date și tabelelor utilizatorilor înregistrați (ASP.NET Identity), baza de date rulează pe sistemul de operare Windows Server 2012 pe care e instalat și SQL serverul .

Baza de date primește cereri din afara, de la Web Api sau de la aplicația de MVC.NET și returnează datele necesare.

Figura 2.2.Comunicarea între componentele aplicației.

După cum vedem în imaginea de mai sus Browser-ul comunica la nivel de protocol de aplicație avem protocolul de http la nivel de protocol de transport îl avem pe TCP/IP pentru ca este un protocol de tip “three-way handshake” ce ne sugerează ca este un protocol care permite transportul sigur de date fără pierderi ca în cazul UDP-ului.

La rândul sau serverul comunica cu baza de date printr-un protocol securizat SSL și TCP/IP.

Tehnologii care fac asta să fie posibil

Aplicația web pe baza de .NET 4.5

MVC 5

Dezvoltarea aplicațiilor web a evoluat în ultimii 10 ani, la etapa actuală am ajuns la versiunea 4.5 de .NET și MVC 5.

MVC-ul este un model de arhitectură care presupune o izolarea mai buna a tuturor componentelor aplicației, abstractizarea permițând modificarea cu ușurință a datelor nefiind afectate alte parți a programului.

Prima parte este Model-ul,în model avem clasele de lucru cu datele la fel și funcțiile,cu ajutorul acestor clase se pot crea tabele în baza de date , clasele de lucru cu datele s.a.m.d.

View-ul reprezintă parte a programului care permite vizualizarea content-ului de către utilizator.

Controller-ul face legătura între utilizator și sistem, verifică input-ul utilizatorului,face cereri către sistem,accesează baza de date, la fel pot accesa clasele din Model.

Cu ultima versiune de .NET a fost realizat și Framework-ul de OAuth2 care facilitează utilizarea unor tehnologii noi de autentificare și securitate a userilor.

Figura 3.1.Structura aplicației in Visual Studio 2013.

Mai sus putem vedea cum arată structura aplicației in Visual Studio 2013, un mediu de dezvoltare cu care se lucrează în .NET.

Web API 2

Web API 2 este un framework independent de MVC.Net pentru că poate fi accesat atât de aplicații WEB cât și de aplicații mobile și desktop, știind doar documentația acestui API.Acest framework presupune lucru cu protocolul HTTP, un proiect Web API este asemanator cu unul MVC, în urmare poate fi integrat ușor într-o aplicație de Web .

Entity Framework

Entity Framework este o realizare de succes a Microsoft-ului ea permite lucru prin tehnologia de Code First, ce presupune crearea în primă fază a claselor(modelelor) după aceasta pe baza acestor modele se pot crea tabele în baza de date, nefiind necesare cunoștințe profunde în baze de date și în cele din urmă în SQL.

Toate validările fiind create direct în model excluzând lucrul direct cu baza de date fiind necesare doar cunoștințe a framework-ului MVC.

SQL Server 2012

Noua versiune de SQL Server presupune o integrare mai bună cu cloud-ul la fel si un publicare mai usoară pe serverele Microsoft Azure.

LINQ to SQL

Linq-ul este o tehnologie care face parte din familia .Net și permite o interogări dintr-o baza de date, dintr-o colecție de obiecte, sau chiar dintr-un document XML fara injectarea de SQL ce face codul mai curat și lizibil.

Linq-ul poate fi ușor integrat în codul sursa,și nu exista necesitatea folosirii interogărilor SQL.

UNIT TESTING

Unit-Testing sunt niște teste aplicate pe proiect care ajuta la o mai buna mentenanță și la o depistare cât mai rapida a erorilor, testele pot acoperi o mare parte din program, și sunt foarte utile în realizarea unui proiect.

MOQ

Framework-ul Moq ajuta la efectuare de Unit-Testing , în cazul în care este nevoie pentru emularea unei funcționalități. Cum ar fi crearea unui obiect de tip Moq care emulează funcționalitatea unei colecții de obiecte pentru parcurgerea cu succes a testelor.

Ninject

La fel ca și Moq și Unit-Testing,Ninject-ul este un Framework care permite injectarea de dependențe între clase, uneori unele clase sunt strâns legate una de alta ce blochează o expandare pe parcurs a proiectului , în acest caz este nevoie de o Ninject pentru distrugerea legăturilor strînse între clase.

Bootstrap

Bootstrap-ul este un framework de Front-end care oferă librarii de JavaScript și de Css,care ajută la o aplicație cât mai plăcută vizual și ușor portabilă pe diferite device-uri fără ai strica aspectul vizual al aplicației.

GIT

Git-ul este o aplicație de control de versiuni care ajută la lucru mai eficient pe proiect, având posibilitatea de a da roll-back la aplicație atât online cât și local, și la fel permite un lucru în echipa mai bine organizat, fiecare membru lucrând pe o ramură (branch) aparte.

Git-ul presupune unele restricții la proiect , dintre care , proiectul trebuie sa fie sub licența GNU adică sa fie open-source asta presupunând că orice utilizator să poată contribui la proiect într-un mod oarecare spre exemplu modificând sau adaugând cod.

In figura 3.2 putem vedea cum funcționează aplicația de Git, avem fiecare înregistrare (Commit) la un anumit timp, și modificările făcute în fișiere, la fel cu verde ne este arătat ce s-a adăugat nou, și cu rosu ce s-a șters din fișier,mai putem vedea pe ce ramură suntem la momentul modificării.

Figura 3.2. Modificările făcute cu ajutorul unui sistem de control de versiuni.

Figura 3.3. Aplicație publicată pe Github

În figura 3.3 este arătată aplicația publicată pe un site de control de versiuni ca GIT-ul,unde fiecare aplicație a noastră este expusa sub o licența GNU , adică open-source și fiecare doritor poate contribui la proiect.

Dependency Injection

Uneori pe parcursul creării aplicațiilor se pot forma dependențe între clase, și asta nu e o problemă mare când avem o aplicație mică, dar odată ce aplicația crește și ea trebuie menținută, există riscul de probleme atunci când se cere o modificare într-o clasa, uneori pentru asta fiind necesar modificarea în fiecare clasa unde este întâlnită clasa respectivă , asta poate uneori duce la o problemă mare mai ales când programatorul care vrea să modifice nu este autorul codului sau crearea aplicației a fost realizată cu mult timp înainte ca nici autorul nu ține minte unde se pot face modificări.

În codul prezentat mai jos avem 2 clase ,cu o legătură strânsă între ele, asta fiind o practică de lucru rea.

public class Class1

{

    public Class2 Class2 { get; set; }

}

public class Class2

{

}

Figura 3.4. Dependență strânsă între clase(sursa: https://msdn.microsoft.com/)

Există mai multe căi de a evita dependențele între clase, dintre care pot fi , introducerea unei interfețe între clase, framework-uri ca Ninject sau Ioc, sau Injectarea de dependență cu ajutorul constructorului clasei.

În cazul nostru vom folosi includerea de interfață intre clase ce va face legătura între clase mai slabă, și va presupune că clasa nr .1 nu va ști nimic despre clasa nr.2 , pentru că o interfața presupune numai un contract de implementare nu și implementarea în sine.

public class Class1

{

public IClass2 Class2 { get; set; }

}

public interface IClass2

{

}

public class Class2 : IClass2

{

}

Figura 3.5. Dependență slabă între clase ( sursa: https://msdn.microsoft.com)

Test Driven Development

Unit testarea s-a demonstrat a fi o practică foarte utila în dezvoltarea de aplicații , în special practica de TDD care presupune în primul rând crearea de teste pentru codul neexistent , pe urma pe baza a acestor teste să se construiască codul în sine.

Mai jos avem un exemplu de cod din C# creat cu ajutorul framework-ului implicit de testare, fiecare clasă testată are un atribut TestClass la fel cum și fiecare metodă are un atribut TestMethod.

Arrange presupune partea de inițializare a testului , Act este metoda care se execută, și Act rezultă un output care determină validarea testului.

[TestClass]

public class PostControllerTest

{

[TestMethod]

public void ViewController()

{

// Arrange

PostsController controller = new PostsController();

// Act

ViewResult result = controller.Index() as ViewResult;

// Assert

Assert.IsNotNull(result);

}

}

Aplicație Desktop în Java

Pentru aplicația de desktop s-a ales a lucra cu Java, pentru că este destul de ușor de implementat și nu necesită cunoștințe de XML pentru crearea de interfețe grafice ca în WPF de la .NET și pentru a avea o varietate de limbaje de programare in cadrul proiectului de licență.

Figura 3.6. Clasele aplicației de desktop

Pentru asta s-a creat 6 clase, una pentru partea de lucru cu protocolul de comunicare HTTP,o clasa pentru definirea modelului al publicației,una pentru interfața grafica a programului,alta pentru interfața grafică a ferestrei de adăugare a unei publicații noi și una pentru definirea modelului userului.

În imaginea 3.6 putem vedea 2 ferestre, una pentru aplicație părinte și una pentru crearea de publicații noi.

Aplicația principala este formată dintr-un JFrame care face parte din componenta SWING,pe aceasta componentă JFrame .

Figura 3.7. Aplicația de Desktop si fereastra de adaugare a unei publicații noi.

(sursa: http://www.java-tutorial.org/upload/image/)

După cum putem vedea în imaginea de mai sus JFrame-ul este componentă de bază, pe această componentă în aplicația noastră avem atașate un JMenuBar care include 2 butoane , unul pentru vizualizarea de publicații și unul pentru publicarea unei publicații noi.

Mai jos în ContentPane avem un JTextPane care ne afișează toate posturile recente.

Fiecare buton are un ActionListener care este accesat o data cu click-ul unui buton.

Dacă se da click pe buton-ul posts atunci prin intermediul clasei HttpClass se accesează o componentă din librăria Apache Components, se face o trimitere la adresa serverului dat ca parametru și crează un header care spune serverului că tipul acceptat este de tip JSon și trimite printr-o metodă de tip Get către server o cerere.

Butonul "Add" al aplicației crează un obiect de tip PostWindow care este o fereastra,și odată inițializata se deschide o fereastra noua cu 2 textbox-uri un combobox și 2 butoane.

Dacă se accesează butonul "create" , atunci programul citește datele din componente le împachetează într-un JSon și le trimite către server print-o cerere de tip Post , dacă cererea a fost executată cu succes și a primit de la server un răspuns cu codul de statut 200 atunci ,putem spune că am creat o publicație noua.

Figura 3.8. Aplicația de Desktop și fereastra de adăugare a unei publicații noi.

Java SE 8

Java SE este o platformă de programare open-source ,ce ne permite crearea de aplicații individuale sau pentru întreprinderi mici, se pot face aplicații diverse atât pentru desktop cât și pentru web și device-uri mobile,incluzând pentru ultima un SDK special,

Principalul scop pentru care s-a optat în lucru cu java este ca este open-source oferă un mediu de dezvoltare(eclipse) intuitiv și ușor de înțeles.

Librăria Apache HttpComponent

Librăria Apache HTTP Components este o librărie care ușurează lucrul cu protocolul http,este open-source oferă o documentație stufoasă pe programare Web,și poate fi integrată ușor în proiect.

Apache Cordova

Pentru aplicația de mobile, este utilizat framework-ul Apache Cordova,care permite crearea de aplicații cu ajutorul limbajelor de programare HTML,CSS și JavaScript.

Aplicația realizează o cerere de tip post către Web API ,și cu ajutorul ei se pot face cu ușurință adăugarea de noi publicații,aplicația este formată dintr-o formă Html unde se completează datele noului post se crează o formă de tip post către adresa http://sociality.somee.com/api/posts.

În codul de mai jos este reprezentat codul sursă in Html al aplicației de mobile.

Cu ajutorul lui este creată o formă cu o metodă de tip post care este transmisă la server.

Ea conține 3 editbox-uri și un buton de submit,la fel aplicația de mobile include referințe către fișierele de CSS care implementează un framework de front-end și care oferă partea vizuală de Material-Design identic cu cel al Android-ul versiunea 5.0 ceea ce ne permite crearea de aplicații vizual identic cu cele implicite ale Android-ului.

<legend>Create new Post </legend>

<form action="http://www.sociality.somee.com/api/values" method="post">

<fieldset>

<br>

<div class="form-group">

<label for="title" class="col-lg-2 control-label"></label>

<div class="col-lg-10">

<input type="text" class="form-control" id="title" placeholder="Title">

</div>

</div>

<br>

<div class="form-group">

<label for="email" class="col-lg-2 control-label"></label>

<div class="col-lg-10">

<input type="text" class="form-control" id="email" placeholder="Email">

</div>

</div>

<br>

<div class="form-group">

<label for="description" class="col-lg-2 control-label"></label>

<div class="col-lg-10">

<input type="text" class="form-control" id="description" placeholder="Description">

</div>

</div>

<br>

<div class="form-group">

<div class="col-lg-10 col-lg-offset-2">

<button type="submit" class="btn btn-primary" value="Publish">Create</button>

</div>

</div>

</fieldset>

</form>

HTTP Protocol

HTTP-ul este cel mai utilizat protocol în Web, el presupune transmiterea de date Hyper-Text,prin intermediul lui se pot transmite date de la un calculator la altul (Server- Client) . Transferul se realizează cu ajutorul unor cereri , cele mai utilizate fiind get și post, spre exemplu un client face o cerere de tip get către un server, el introduce numele de domeniu la portul 80 implicit acestui protocol,în primă fază domeniul este convertit într-o adresa ip, și în funcție de cererea făcută se poate transmite date, în caz de eroare se returnează un cod și un mesaj de eroare.

Ce este o cerere Http?

O cerere Http este o cerere făcută de client către server, cea mai des utilizată cerere este cea de get, care nu presupune nici o modificare pe server ea doar execut un proces de trimitere de date.

Care este diferenta dintre POST si GET?

Cu ajutorul cererii de tip post se pot modifica date pe server se pot transmite printr-un header careva date de la client (imagini, text, audio).

Clientul având nevoie de autorizare sau de Bearer-Token în cazul aplicației de MVC 5

Cum se face o cerere tip post?

Figura 3.9. Cum se realizează o cerere de tip Post în aplicația de MVC.

După cum se vede în figura 3.9 cu ajutorul unui browser clientul încearcă sa transmită careva date către server , aceasta fiind spre exemplu cand se dorește o logare sau un submit la o pagină,browser-ul împachetează datele transmise de client și le transmite mai departe la un server prin intermediul cererii Post, la rândul său aplicația primește o cerere, parsează URL-ul,determină care este controller-ul , action-ul și în unele cazuri parametrii, după aceasta merge la controller-ul din URL și la action-ul respectiv, și execută cererea,în cazul în care avem un model utilizează acest model acceseaza baza de date dacă e nevoie și returnează un View adică trimite datele înapoi la browser.

Cum realizam cererea tip post in Java?

Mai jos avem codul necesar pentru efectuarea unei cereri de tip post în Java.

ArrayList<NameValuePair> postParameters;

String url="http://www.sociality.somee.com/api/values";

postParameters = new ArrayList<NameValuePair>();

postParameters.add(new BasicNameValuePair("Title", textFieldTitle.getText()));

postParameters.add(new BasicNameValuePair("Email", comboBox.getSelectedItem().toString()));

postParameters.add(new BasicNameValuePair("Description", textFieldDescription.getText()));

try {

HttpResponse response= HttpClass.MakePostRequest(postParameters, url);

if(response.getStatusLine().getStatusCode()==201)

{

JOptionPane.showMessageDialog(rootPane, "Your post has been created !");

}

else

{

JOptionPane.showMessageDialog(rootPane, "Something has gone wrong !");

}

Se crează o lista care salvează toate datele necesare pentru trimiterea la server, se crează o variabila care ne salvează URL-ul serverului,și o variabila de tip HttpResponse care ne salvează răspunsul în urma executării cererii către server.

Dacă în urma executării primim un Status-Code egal cu 201 care în protocolul HTTP înseamna „created” atunci putem considera ca s-a executat cu succes la fel și primind un mesaj de succes cererea în caz contrar ne afișează un mesaj de eroare la creare.

Ce este cu Json?

JSon-ul este o formă de reprezentare de date ,care este foarte lizibilă pentru programator și nu numai, este pe înțelesul mașinilor de calcul și este utilizat pentru transferul de date prin rețea.

Baza de date

Baza de date cu care lucrăm este SQL Server,este o bază de date integrată în platforma de .NET.

Baza de date al aplicației este formată din mai multe tabele,unele fiind responsabile pentru datele utilizatorului și este o bază de date care se inițializează implicit dacă alegem tipul proiectului direct integrat cu partea de autentificare OAuth2.

Pe lângă tabelele utilizatorului au fost create încă 2 tabele necesare stocării de date pentru publicațiile făcute.

Tabelul "Posts" este include asa câmpuri ca Id-ul publicației, id-ul utilizatorului ,titlul publicației ,descrierea și data la care a fost făcuta publicația curenta.

Tabelul "Files" este tabelul necesar pentru lucrul cu fișierele atașate unei publicații la rândul sau ea include asa câmpuri ca , id-ul fișierului,denumirea fișierului,tipul fișierului,câmpul pentru stocarea biților pentru fișier și un Foreign-Key la id-ul publicației atașate.

Figura 3.10 Structura bazei de date.

După cum se poate vedea în imaginea de mai sus avem 7 tabele în baza de date, 5 responsabile pentru datele utilizatorului și 2 pentru publicații.

Putem observa că între tabelul de user și post există o legătura de tip 1 la n.

Ceea ce ne spune că un utilizator poate avea mai multe publicații,iar intre tabelul publicații și files la fel exista o relație de tip 1 la n ce presupune ca o publicație poate avea atașate mai multe fișiere.

Prezentarea aplicației

Microsoft este un jucător important în domeniul de dezvoltare Web, astfel la momentul actual

15% din toate serverele de hosting din lume rulează sub sistemul de operare Windows.

.NET-ul este o platforma fiabila și sigura , extrem de securizată care permite crearea de aplicații Enterprise cum ar fi (Bănci,E-Commerce s.m.a.d.).

Ideea aplicației a venit odată ce am avut de a alege platforma viitoarei aplicații, având ca alegere 2 platforme (Java și .NET ).

Analizând toate punctele pro și contra s-a decis să se creeze o aplicație pe ambele platforme astfel sa se ajungă în practica cu problemele propuse, și sa se facă o idee ce tine de dezvoltare aplicațiilor în Java și C#.

S-a dorit în primă fază să se înceapă cu crearea unui server care va putea primi cereri HTTP din afară și va putea întoarce răspunsuri la cererile date.

.Net-ul oferă un Framework pentru aceasta, Web API care ne ajută la realizarea acestei idei,mai mult ca atât acest framework se aseamănă mult cu MVC.NET. și e ușor de integrat unul in altul.

În spatele aplicației stă o bază de date care poate fi ușor accesată prin intermediu la framework-ului de Linq to SQL,

A fost ales limbajul C# pentru programarea web și. Web API-ului pentru este foarte comod pentru programator,și este des actualizat, fiecare versiune aducând ceva nou în industria IT,mai mult ca atât de ceva timp în urma este Open-Source și poate fi acum portat pe dispozitive cu procesoare ARM și pe dispozitive ce rulează Sistemul de operare mac Os sau chiar iOS.

La fel în orice proiect de .NET pot fi integrate o mulțime de biblioteci sau framework-uri unul din framework-urile recent apărute ,este SignalR de la Microsoft ce permite lucrul real-time al aplicației și presupune creare de aplicații real-time ca exemplul chat-urilor.

De la începutul proiectului „Sociality” s-a optat pentru crearea aplicației direct pe HTML cu CSS și cu JavaScript, pentru că în ultimii ani au apărut foarte multe framework-uri și librarii JavaScript cu o popularitate mare ca AngularJS de la cei de la Google, NodeJS care ne permite instalarea și crearea serverelor doar cu ajutorul Javascriptului la fel librăria de JQuery care ușurează considerabil programare în Web, și până la urma există o sumedenie de aplicații multiplatformă care rulează doar cu ajutorul a html ului, CSS-ului și a javascript-ului, însă până la urma s-a decis lucrul cu diferite platforme de programare, diferite limbaje și diferite tehnologii cu scopul de a învață cum și cu ce se lucrează nativ.

Ce se întâmplă când un utilizator încearcă sa utilizeze aplicația ?

.

Utilizatorul intrând prima pe sait este trimis la pagina de start care este http://sociality.somee.com.

Aplicația de .net determină care este ruta implicită pentru acest site,ruta implicită fiind http://sociality.somee.com/home/index unde home este controller-ul în MCV, controller-ul este responsabil pentru a face legătura dintre utilizator și sistem la fel validează datele utilizatorului și în unele cazuri accesează baza de date, Action-ul pentru controller-ul dat este index,un action este o metodă care se execută odată la apelarea ei prin intermediul URL-ului.

Dacă utilizatorul este pentru prima oară pe site,i se prezintă o pagina de start și cu un link către pagina de login sau de înregistrare, în cazul în care utilizatorul este înregistrat se trece la pagina de logare iar de nu, utilizatorul introducând email-ul și parola se poate înregistra,e de menținut că parola se păstrează în baza de date doar în format "hash" , adică criptată pentru o mai bună siguranță.

Odată logat utilizatorul poate crea publicați prin intermediul REST-ului , adică poate șterge, adaugă , modifica o publicație.

Figura 5.1. Pagina de adaugare a unui noi publicații pe pagina Web.

La fel pe website există un link către Wall(lista de publicații a tuturor userilor)

Dacă utilizatorul nu este autorul publicației el nu poate în nici un fel modifica publicația.

O Publicație sau un Post este format dintr-un titlu,descriere,autorul publicației , data când a fost făcută publicația și în unele cazuri fișiere de tip imagine.

Utilizatorul își poate modifica datele personale , parola și email-ul din căsuța de modificări. Aplicația de web nu are nici o legătura cu Web API pentru că lucrează direct cu baza de date .

Ce presupune lucrul cu Web API?

Cu ajutorul acestui Framework se facilitează integrarea diferitelor dispozitive care pot lucra prin intermediul protocolului Hyper-Text Http.

Web API funcționează ca un server care ascultă cereri prin intermediul a unei adrese IP și a unui port implicit protocolului http „80”.

Spre exemplu un dispozitiv face o cerere către adresa http://sociality.somee.com/Api/values

La adresa aceasta Web API returnează lista tuturor Publicațiilor, pentru că aceasta rută nu necesita autorizare în header-ul nu se va conține nimic și tipul cererii va fi get.

În cazul în care se cere modificarea a careva date,spre exemplu ștergerea unei publicații,Web Api-ul va cere ca header-ul cererii http sa conțină un Token de Autentificare, care poate fi dobândit la o cerere de Tip get către adresa http://sociality.somee.com/Token în header introducând userul, parola și tipul tokenului , ca răspuns serverul va trimite un Token de Autentificare valabil o perioada de timp și atunci cu ajutorul acestui Token se pot face cereri de modificare de date ale utilizatorului atașat token-ului .

S-a lucrat prin intermediul unui Web API numai din considerente de siguranța,fiind foarte nesigur conectarea directa a dispozitivelor către baza de date.Web API-ul validând cererile din afara și blocând accesul persoanelor neautorizate.

Web Api-ul are acces direct la baza de date și în caz de necesitate accesează baza de date.

Între Web Api și restul aplicațiilor se comunica prin JSon , care este un format foarte lizibil și ușor de lucrat care este suportat de mai multe aplicații s.a.m.d

Aplicația de desktop presupune o aplicație destul de simpla care conține 2 butoane și o interfața pentru Afișarea datelor de la server.

Butonul Wall odată apăsat trimite o cerere de tip get către server ,primește date în format Json le pansează le transforma în obiecte de tip Gson și le afișează pe ecran descrescător.

Butonul crează publicație trimite către server o cerere de tip post în care citește datele din boxele de input și la transmite la sever în caz de succes se afișează un mesaj.

Aplicația de mobile realizata pe sistemul de operare Android, presupune o pagina în care se poate crea o publicație nou,aplicația fiind creată cu scopul de a arată portabilitate aplicației.

Figura 4.2. Documentația pentru WebAPI.

Publicarea aplicației

Pentru o ușurintă de lucru aplicația a fost publicată pe un găzduire gratuiă cu motivul de a lucra autonom si de a nu fi nevoie de fiecare data ăa se pornească un server local, problema întâlnita a fost odata cu crearea bazei de date pentru fișierele publicațiilor, ele se salvează direct in baza de date,ceea ce presupune o creștere suficient de mare a bazei de date cu crearea noilor publicații, odata ce găzduirea oferind o limitare la mărimea bazei de date.

Pentru publicația aplicației a fost nevoie doar de codul sursa.

Pentru a fi funcționabilă a fost nevoie doar sa se modifice adresa de conectare la baza de date, schimbând de pe adresa locală pe adresa găzduirii.

Concluzii.

Tendințe de viitor

În următorii câțiva ani vom vedeam o creșterea continua a utilizatorilor pe platforme mobile,ceea ce va duce la crearea unor framework-uri sau la îmbunatățirea celor existente(Cordova,PhoneGap) care vor ajuta la crearea unei aplicații care va rula după compilare pe toate platformele mobile, va dispărea necesitatea utilizatorului simplu să folosească desktop-ul ca device principal.

Vor apărea noi și noi biblioteci de simplificare a creării de aplicații multiplatformă dar cu siguranță nu va dispărea necesitatea unui programator ca atare .

Ce probleme și bug-uri au fost întîlnite pe parcurs?

Pe parcursul proiectului au fost întâlnite numeroase probleme și bug-uri.

Dintre cele mai importante au fost problema stocării datelor în baza de date,când este nevoie de salvat un fișier BLOB și exista o limitare la dimensiunea bazei de date date de hosting,s-a ajuns la ideea salvării datelor pe server si creării unui link în baza de date către fișier spre server.

La fel a fost întâlnita problema integrării a Web Api cu MVC.Net,de la început s-a dorit crearea de 2 aplicații una de .net și una de Api care necesita rularea concomitenta pe server,apoi s-a ajuns la concluzia sa se integreze a proiectului de .NET în Web Api.

Diferența intre controller fiind clasa la care se deriva și rezultatul care întorcea era diferit,în cazul Web Api obiecte de tip JSON.

O alta problema a fost problema legata de certificatele pentru protocolul Https, odată ce s-a dorit integrarea autentificărilor cu Facebook și gmail, a fost nevoie de protocolul securizat https, după realizarea acestor criterii odată ce aplicația rula pe „localhost” aplicația de java nu deținea drepturile și certificatele care permiteau lucrul cu acest protocol, și s-a decis migrarea înapoi pe protocolul nesecurizat fără autentificare externa in favoarea compatibilității în lucrul cu aplicația de desktop în Java.

La începutul proiectului a fost nevoit de crearea de mai multe ori aceluiași proiect pentru ca nu s-a folosit de la bun început de un sistem de control de versiuni(în cazul nostru GIT), și toate modificările erau definitive și încă cazul unei erori nu se putea trece la starea trecuta a proiectului.

O data la crearea aplicației pe Java s-a ajuns la problema autentificării prin Web API,la crearea unei cereri unui cereri de tip „post” către server cu parametrii:numele și prenumele, serverul întorcea un token de autorizarea care identifica userul , însa acest token se pierdea odată ce era transmis de la o clasa la alta în java.

Soluția a fost în crearea unei variabile de sesiune in care se putea ulterior salva tokenul.

În ce măsura s-au îndeplinit obiectivele

Obiectivele au fost îndeplinite în proporție de 80 % , fiind functionabila aplicația de web și desktop la fel cât și Web Api care permite integrarea cu ușurința a altor platforme cum ar fi mobile.

A fost decis pana la urma sa nu se mai creeze aplicație mobile pentru ca o data ce a fost folosit Bootstrap-ul care permite un design responsive atât pe browserul de desktop cât și pe cel de mobile.

In fișierele 6.1,6.2 și 6.3 putem vedea vizualizarea aplicației cu ajutorul browser-ului de desktop,Smartphone și o tableta.

Figura 4.3 Pagina Web vizualizata pe Desktop

Figura 4.4. Pagina Web vizualizata pe un ecran 5 si 8 inci

După vizualizarea imaginilor de sus putem spune că s-a realizat un design responsive, și aplicația arată la fel de bine pe diferite device-uri.

Bibliografie

[1]Getting Started with ASP.NET MVC 5, http://www.asp.net/mvc/overview/getting-started/introduction/getting-started (data accesării: 16.02.2015).

[2]ASP.NET Web API 2, https://msdn.microsoft.com/en-us/library/dn448365(v=vs.118).aspx (data accesării: 22.02.2015).

[3] Getting Started with ASP.NET Web API 2, http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api (data accesării: 24.02.2015).

[4]Getting Started with Entity Framework 6 Code First using MVC 5, https://www.asp.net/mvc/overview/getting-started/getting-started-with-ef-using-mvc/creating-an-entity-framework-data-model-for-an-asp-net-mvc-application (data accesării: 25.02.2015).

[5]Roy Osherove. The Art of Unit Testing: with Examples in .NET ,  Manning Publications; 1 edition (July 8, 2009)

[6]Quickstart Moq, https://github.com/Moq/moq4/wiki/Quickstart(data accesării: 28.02.2015).

[7]Learn more about Ninject, http://www.ninject.org/learn(data accesării: 2.03.2015).

[8]Getting Started, http://getbootstrap.com/getting-started/ (data accesării: 5.03.2015).

[9]HttpClient Quick Start, https://hc.apache.org/httpcomponents-client-4.5.x/quickstart.html (data accesării: 6.03.2015).

[10]Introducing JSON, http://json.org/ (data accesării: 7.03.2015).

[11]Guides, http://cordova.apache.org/docs/en/5.0.0/ (data accesării: 5.03.2015).

[12]Introduction, http://docs.build.phonegap.com/en_US/#googtrans(en) (data accesării: 5.03.2015).

[13]Eric T. Freeman, Elisabeth Robson. Head First JavaScript Programming, O'Reilly Media 2014

[14]HTTP – Hypertext Transfer Protocol, http://www.w3.org/Protocols/,(data accesării: 12.03.2015).

[15]Unified Modeling Language™ (UML®) Resource Page, http://www.uml.org(data accesării: 17.03.2015).