interacţiune web: ajax

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/Tehnologii Web

micro-servicii & interacțiune Web

↹suita de tehnologii Ajax

aplicații Web hibride (mash-ups)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

„Modul în care dăm face mai mult decât ceea ce dăm.”

Pierre Corneille

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Există alternative la servicii Web?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

micro-servicii

Implementează o funcționalitate specifică, oferită la nivel de unic proces

self-contained system

componentă la nivel de backend dezvoltată cu scopul de a fi înlocuită, nu de a fi reutilizată

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

smalleach running in its own process

lightweight communication mechanisms (usual, HTTP)built around business capabilities

independently deployableminimum of centralized management

may be written in different programming languagesmay use different data storage mechanisms

caracteristici ale micro-serviciilor conformJames Lewis & Martin Fowler, Microservices (2014)

http://martinfowler.com/articles/microservices.html

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

modularitate, descentralizare și evoluție permanentă

exemple de bună practică: http://microservices.io/

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

micro-servicii

Funcționale (functional services)

implementează funcționalităti specifice (business operations)

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

micro-servicii

Funcționale (functional services)

implementează funcționalităti specifice (business operations)

expuse consumatorului de servicii

independente (fără efecte colaterale – side effects)

nu sunt partajabile uzual

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

micro-servicii

Control – infrastructură (infrastructure services)

implementează activități non-funcționale: autentificare, autorizare, jurnalizare, monitorizare,…

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

micro-servicii

Control – infrastructură (infrastructure services)

implementează activități non-funcționale: autentificare, autorizare, jurnalizare, monitorizare,…

nu sunt expuse în exterior – private

pot fi partajate la nivel de aplicație ori servicii interne

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

brow-ser

controlproce-

sare

client „puternic”și/sau „isteț”

micro-servicii în context serverless – aplicația depinde semnificativ de componente externe, disponibile în „nori”

BaaS

Mike Roberts (2016) – http://martinfowler.com/articles/serverless.html

func-ționa-litate1

☁

func-ționa-litate2

☁

☁

auten-tificare

☁

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

☁

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

micro-servicii

Aspect de interes:

partajarea funcționalităților

share-as-much-as possible (SOA clasic)versus

share-as-little-as possible (micro-servicii)

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

micro-servicii

Aspect de interes:

comunicarea – uzual, asincronă – între (micro-)servicii

abordări:point-to-point

sau publish-subscribe

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

implementare

intern, (micro-)serviciile pot comunica recurgând la publish-subscribe – www.w3.org/TR/pubsub/

simplificarea accesului clientului

via API

Jonas Bonér (2016)

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

micro-servicii

Uzual, arhitecturile ce recurg la micro-serviciinu includ componente middleware

și nu oferă suport pentru abstractizarea interacțiunii dintre producătorii și consumatorii de servicii

(contract decoupling)

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

arhitectură bazată pe servicii Web

arhitectură recurgând la micro-servicii

cazuri concrete: Amazon, Groupon, Netflix,…

de studiat prezentările lui Stefan Tilkov: https://speakerdeck.com/stilkov

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Care e modalitatea de a transfera asincrondate între client(i) și server(e) Web?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

interacțiune web: ajax

Asynchronous JavaScript And XML(Jeese James Garrett)

permite transferul asincron de date între un document HTML redat de client (browser)

și o aplicație rulând pe un server Web

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


O suită de tehnologii deschise:

limbaje standardizate de structurare – e.g., HTML –și de prezentare a datelor: CSS

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



redare + interacțiune la nivel de client (navigator) Webvia standardul DOM

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



interschimb și manipulare de date reprezentate prin:diverse dialecte XML,

JSON,HTML,

alte formate

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



transfer (a)sincron de date via HTTPfacilitat de obiectul XMLHttpRequest

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



procesare folosind limbajul ECMAScript (JavaScript)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Componenta de bază: obiectul XMLHttpRequest

disponibil la nivelul navigatorului Web via JavaScript

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



specificația inițială bazată pe implementarea MSIE

oferită în prezent de (aproape) orice browser

www.w3.org/TR/XMLHttpRequest1/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



specificația actuală (HTML5 Living Standard, 9 mai 2017)

implementată de navigatoarele Web curente

https://xhr.spec.whatwg.org/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



permite realizarea de cereri HTTP – e.g., GET, POST,… –dintr-un program rulând la nivel de client (browser)

spre o aplicație / un serviciu Web existent(ă) pe server,în mod asincron ori sincron

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



datele vehiculate între programele client și serverpot avea orice format

uzual, modelate în XML (e.g., Atom, RSS, KML,…),HTML și/sau JSON

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



paginile Web nu mai trebuie reîncărcate complet,conținutul lor – structurat via HTML –

fiind manipulat prin DOM în cadrul browser-ului,în conformitate cu datele recepționate de la server

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Metode importante oferite de XMLHttpRequest

open ( )

inițiază – deschide – o conexiune HTTP cu serverul,emițând o cerere: GET, POST,…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



send ( )

transmite (asincron) date – e.g., XML, JSON etc. –,spre aplicația/serviciul ce rulează pe server

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



send ( )

transmite (asincron) date – e.g., XML, JSON etc. –,spre aplicația/serviciul ce rulează pe server

orice listener (asociat evenimentelor onload, ontimeout,onabort,…) trebuie stabilit înainte de a trimite date

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



abort ( )

abandonează transferul de date curent

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



setRequestHeader ( )

specifică anumite câmpuri de antet HTTP

exemple: Cookie, Keep-Alive, User-Agent,…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



getResponseHeader ( )

furnizează valoarea unui anumit câmp prezentîn antetul mesajului de răspuns HTTP trimis de server

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



getAllResponseHeaders ( )

oferă toate câmpurile HTTP trimise de server,exceptând Set-Cookie

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Proprietăți de bază ale XMLHttpRequest

readyState

furnizează starea transferului:0 – UNSENT

1 – OPENED

2 – HEADERS_RECEIVED

3 – LOADING

4 – DONE

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



status

oferă codul de stare HTTP întors de serverul Web:200 (Ok)

404 (Not Found)500 (Internal Server Error)

…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



statusText

conține mesajul corespunzător codului de stare HTTP

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



responseText

responseXML

stochează răspunsul (datele) obținut(e) de la server

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



onreadystatechange

specifică funcția ce va fi invocată la modificările de stareale transferului de date dintre server și client

handler de tratare a evenimentelor de transfer

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Excepții ce pot fi emise

AbortError

InvalidAccessError

InvalidStateError

NetworkError

SecurityError

TimeoutError

…

conform DOM 4 Core

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Noutăți:stabilirea unui timeout privind realizarea unei cereri

(la nivel de milisecunde)

o valoare nenulă cauzează realizarea unei preîncărcări (fetching) a resursei

a se studia și Fetch (HTML5 Living Standard, 24 mai 2017)https://fetch.spec.whatwg.org/

developers.google.com/web/updates/2015/03/introduction-to-fetch

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Noutăți:datele vehiculate pot fi de mai multe tipuri

(ArrayBuffer, Blob, Document, DOMString, FormData)

detalii la https://xhr.spec.whatwg.org/#interface-formdata

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Noutăți:procesul de transmitere a datelor spre server (upload)

poate avea asociat un handler specific via proprietatea upload

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Noutăți:progresul încărcării poate fi urmărit pe baza

funcționalităților specificate de interfața ProgressEvent

https://xhr.spec.whatwg.org/#interface-progressevent

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Ce alte aspecte trebuie considerate

atunci când se recurge la Ajax?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

interacțiune web: ajax – utilizări

Reîmprospătarea periodică a conținutului

e.g., știri recepționate în formate ca Atom sau RSS, mesaje în cadrul aplicațiilor sociale, notificări,…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Anticiparea download-urilor

pre-încărcarea datelor (e.g., imagini) ce vor fi solicitate

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Auto-completarea datelor

auto-completionsugestii de căutare – exemplu: Google Suggest

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Validarea în timp-real a datelor introduseîn formulare de către utilizator

exemplificare: verificarea existenței unui cont sau a unei localități

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Creare de componente de interfață Web (widgets) sau de aplicații Web rulând pe platforme mobile

interacționează cu utilizatorulpe baza evenimentelor survenite

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

interacțiune web: ajax – aspecte

Evitarea încărcării întregului document Web

avantaj:se pot modifica doar fragmente de document

dezavantaj:bookmarking-ul poate fi compromis(nu există un URL unic desemnând

reprezentarea resursei curente)

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Oferirea de alternative la Ajax,atunci când suportul pentru acesta

nu este implementat/activat

graceful degradation

progressive enhancement

www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Minimizarea traficului dintre browser și server

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Transferul de date poate fi monitorizat(+interceptat) via instrumente dedicate

la nivel de desktop: instrumentul WireShark

direct în navigator (eventual, ca extensii)Firebug, Fiddler, TamperData, Live HTTP Headers

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Adoptarea Ajax pentru creșterea utilizabilității,nu doar de dragul tehnologiei

exemple negative:distragerea utilizatorului

abuz de resurse (supradimensionarea arborelui DOM)

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Ajax oferă premisele invocării asincronede (micro-)servicii Web în stilul REST

folosind diverse reprezentări ale datelor transferate: POX (Plain Old XML)

JSON (JavaScript Object Notation)AHAH (Asynchronous HTML and HTTP)

text neformatat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Care e suportul vizând implementarea?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

interacțiune web: ajax – programare

La nivel de clientbiblioteci + framework-uri JavaScript tradiționale

AngularJS – angularjs.org

Backbone.js – backbonejs.org

Dojo Toolkit – dojotoolkit.org

jQuery (plus jQuery UI) – jquery.com

Prototype – prototypejs.org

MooTools – mootools.net

micro-biblioteci: http://microjs.com/#ajax

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


La nivel de serverbiblioteci, module, framework-uri – exemple:

Java – Apache Wicket, DWR, OpenXava, Vaadin etc..NET – AJAX Control Toolkit: devexpress.com/act

Node.js – nodejsmodules.org/tags/ajax

PHP – Cjax: github.com/ajaxboy/cjax

Perl – CGI::Ajax, Catalyst, Mason etc.Python – wiki.python.org/moin/WebFrameworks

…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


API-uri specializate

exemplificări:Bing Maps V8 Web Control

https://msdn.microsoft.com/en-us/library/mt712542.aspx

HERE JavaScript APIshttps://developer.here.com/javascript-apis

Ajax în contextul extensiilor WordPresshttps://codex.wordpress.org/AJAX_in_Plugins

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

interacțiune web: ajax – studiu de caz

Verificarea existenței unui nume de utilizatorîn vederea creării unui cont de autentificare

în cadrul unei aplicații Web

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/Client

ServerWeb

XMLHttpRequest

Server de aplicații

open ("GET")

open ("POST")

send (...)

DOM

fereastra navigatorului

verificarea asincronă a existenței unui cont pe server

date XML (pe server)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/




tratând prin DOM evenimentul onblur, putem detecta– interogând asincron aplicația Web de pe server –

faptul că numele de cont introdus de utilizatorîntr-un formular Web deja a fost folosit de altcineva

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/




aplicația Web de pe server – adoptând stilul REST –va oferi un document XML modelând răspunsul la

interogarea „există deja un utilizator având un nume dat?”

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

<?php // program PHP, cu rol de serviciu Web, rulat la nivel de serverdefine ('DOCXML', './particip.xml'); // locația documentului XML// trimitem tipul conținutului; aici, XMLheader ('Content-type: text/xml');

// funcție care verifică dacă un nume de participant deja există// returnează 1 dacă numele există, 0 în caz contrarfunction checkIfNameExists ($aName) {// încărcăm datele despre participanți via SimpleXMLif (!($xml = simplexml_load_file (DOCXML))) { return 0; }// parcurgem toți participanții găsiți cu XPath...foreach ($xml->xpath('/participants/participant/name') as $name) {

// comparăm numele, ignorând minusculele de majusculeif (!strcasecmp($aName, $name)) { return 1; }

}return 0;

}?><response>

<result><?php echo checkIfNameExists ($_REQUEST['name']); ?></result></response>

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

<form action="add.php" method="post">

<div><label for="name">Account name:</label><input type="text" name="name" id="name"

onblur="javascript:signalNameExists (this.value, '')" /><span class="hidden" id="errName">

Name already exists, choose another one...</span>

</div>

<div><label for="adr">Address:</label><input type="text" name="adr" id="adr" />

</div>

<input type="submit" value="Apply" /></form>

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// programul JS executat în cadrul browser-uluivar request; // încapsulează cererea HTTP către serverul Web

function loadXML (url) { // încarcă un document XML desemnat de 'url'// verificăm existența obiectului XMLHttpRequestif (window.XMLHttpRequest) {

request = new XMLHttpRequest (); // există suport nativ} else

if (window.ActiveXObject) { // se poate folosi obiectul ActiveX din MSIErequest = new ActiveXObject ("Microsoft.XMLHTTP");

}if (request) { // există suport pentru Ajax

// stabilim funcția de tratare a stării transferului de daterequest.onreadystatechange = handleResponse; // preluăm documentul prin metoda GET request.open ("GET", url, true); request.send (null); // nu trimitem nimic serviciului Web

}}

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

// funcția de tratare a schimbării de stare a cereriifunction handleResponse () {

// verificăm dacă încărcarea s-a terminat cu succesif (request.readyState == 4) {

// am obținut codul de stare '200 Ok'?if (request.status == 200) {

// procesăm datele recepționate prin DOM// (preluăm elementul rădăcină al documentului XML)var response = request.responseXML.documentElement; var res = response.getElementsByTagName('result')[0].firstChild.data;

// apelăm o funcție ce va modifica arborele DOM al paginii Web// conform răspunsului transmis de serviciul invocat…

}// eventual, se pot trata și alte coduri HTTP (404, 500 etc.)

else { alert ("A problem occurred:\n" + request.statusText);

}}

veziexempluldin arhivă

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

utilizatorul introduce un nume de cont; via Ajax, i se va semnala cădeja există, conform răspunsului XML trimis de către serviciul Web

cerere HTTP via URL-ul http://undeva.info/verify.php?name=tux

răspuns XML de forma <response><result>1</result></response>

0 = nu există

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

studiu de caz: RandomAjax

preia asincrono secvență de numere aleatoare generate de random.org – trimisă ca

text obișnuitjsfiddle.net/busaco/2254kdqn/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

const URL = 'https://www.random.org/sequences/?min=1&max=33&col=1&format=plain';const TIME = 2000;

var xhr = new XMLHttpRequest();var numbers = document.getElementById('numbers');// eveniment de tratare a expirării timpului de așteptarexhr.ontimeout = function () { numbers.textContent = 'Time-out... :('; };// eveniment de tratare a preluării datelor solicitate unui serviciuxhr.onload = function () {

if (xhr.readyState === 4) { // am primit dateleif (xhr.status === 200) { // răspuns Ok din partea serverului

// înlocuim spațiile albe cu virgulă și plasăm conținutul// în cadrul elementului HTML identificat prin 'numbers'numbers.textContent = xhr.responseText.trim().replace(/\W+/g, ', ');

} else {numbers.textContent = 'An error occurred: ' + xhr.statusText;

}}

};

xhr.open("GET", URL, true); // deschidem conexiuneaxhr.timeout = TIME; // stabilim timpul maxim de așteptare a răspunsuluixhr.send(null); // nu expediem date

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

studiu de caz: RandomAjax (Fetch)

soluție folosind Fetch API

pentru aceeași problemăjsfiddle.net/busaco/a2q9regd/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

function status(response) { // recurgem la promises – github.com/wbinnssmith/awesome-promises –// pentru a realiza procesări în funcție de codul de stare HTTPif (response.status >= 200 && response.status < 300) {return Promise.resolve(response) // cererea poate fi rezolvată

} else {return Promise.reject(new Error(response.statusText)) // cererea a fost rejectată

}}

fetch(URL).then(status) // verificăm dacă datele au fost recepționate cu succes.then((response) => response.text()) // transformăm obiectul răspunsului în șir de caract..then(function(response) { // procesăm secvența de numere

// înlocuim spațiile albe cu virgulă și plasăm conținutul// în cadrul elementului HTML identificat prin 'numbers'var numbers = document.getElementById('numbers');numbers.textContent = response.trim().replace(/\W+/g, ', ');

}).catch(function(error) { // a survenit o eroare :(

numbers.textContent = 'An error occurred: ' + error;});

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Obținerea fotografiilor publice stocate pe situlFlickr pe baza serviciului Web oferit

codul-sursă recurge la biblioteca jQuery și e disponibil la http://jsfiddle.net/busaco/4d2tmc6b/

studiu de caz: FlickrPics

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Obținerea fotografiilor publice stocate pe situlFlickr pe baza serviciului Web oferit

utilizăm URL-ulhttp://api.flickr.com/services/feeds/photos_public.gne

pentru a obține informații despre imagini(formate disponibile: Atom, CSV, JSON, XML,…)

vezi http://www.flickr.com/services/feeds/docs/photos_public/


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

interactiune web: ajax – studiu de caz

Forma generală a răspunsului JSON transmis de Flickr:{

"title" : "Recent Uploads", "link" : "http://www.flickr.com/photos/", "modified" : "2017-05-23T13:03:07Z", "generator" : "http://www.flickr.com/", "items" : [ {

"title" : "...","link" : "http://www.flickr.com/photos/.../4204222/","media" : { "m": "https://farm.staticflickr.com/...jpg" },"date_taken": "2012-05-20T17:23:43-08:00","description": "...","published" : "2012-05-26T13:49:08Z","author" : "...","author_id" : "...","tags" : "iasi romania informatica FII ..."

} ]}

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/// preluăm asincron imagini disponibile pe Flickr

jQuery.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { // datele de intrare transmise serviciului Web tags: "Iasi, informatica", tagmode: "all", format: "json"

}, // funcția anonimă ce va procesa datele JSON trimise asincron de Flickr function (data) { // iterăm fiecare informație obținută de la serviciul Web $.each (data.items, function (number, photo) {

// creăm un element <img> având ca valoare a atributului "src" // adresa Web inclusă în datele JSON obținute; // acest <img> va fi adăugat la elementul cu id="pics" din pagină$ ("<img/>").attr ("src", photo.media.m).attr ("title", photo.title)

.appendTo ("#pics"); });

});


JSONP

JSONP (JSON with Padding) – tinyurl.com/n733jtb

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Generalizând, putem recurge la metoda ajax ():

jQuery.ajax ({ // execută o cerere POST pentru invocarea serviciului Web

type: "POST",

contentType: "application/json; charset=utf-8",

url: "http://undeva.info/ServiciuWeb/Resursa",

data: "{…}", // datele de intrare trimise serviciului

dataType: "json", // așteptăm răspunsul în format JSON

success: function (data) { // funcție apelată la transferul cu succes

$('.rezultat').html (data); // preluăm datele, convertindu-le în HTML

}

});

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

interacțiune web: comet

Comet

termen propus de Alex Russel

permite ca datele să fie „împinse” (push) de către serverspre aplicația client, utilizând conexiuni HTTP

persistente (long-lived) în vederea reducerii latenței

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Șablon de proiectare a aplicațiilor Webcare necesită realizarea de conexiuni persistente,

în stilul peer-to-peer

utilizat de aplicațiile Web intensiv interactive,eventual colaborative – e.g., Mibbit

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Complementar Ajax

long pollingHTTP server push

Reverse Ajax

de studiat M. Carbou, “Reverse Ajax, Part 1.Introduction to Comet”, IBM developerWorks, 2011

www.ibm.com/developerworks/web/library/wa-reverseajax1/

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Soluții alternative, moderne: adoptarea diverselor tehnologii HTML5

server-sent eventsWebSocket

detalii la cursul „Dezvoltarea aplicațiilor Web la nivel de client”https://profs.info.uaic.ro/~busaco/teach/courses/cliw/

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

(în loc de) pauză

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

Ajax/Comet oferă suport pentru dezvoltarea de aplicații Web hibride – mash-ups

combinarea – la nivel de client și/sau server –a conținutului ce provine din surse (situri)

multiple, oferind o funcționalitate/experiență nouă

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

Exemplificare:

dorim să oferim o aplicație ce pune la dispozițieinformații din domeniul muzical

în funcție de activitățile fizice ale utilizatorului,pe baza unor servicii Web publice

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

http://www.last.fm/api/rest

https://wiki.fitbit.com/display/API/Fitbit+API

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

acces la serviciile RESTdespre formații + albume

via o cheie de autentificare

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

API-ul REST de la FitBit oferă date în formatele JSON și XML

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

+ FiLaaplicație Web hibridă

http://www.last.fm/api/rest

https://dev.fitbit.com/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

Se bazează pe fluxuri de știri RSS/Atom, servicii Web, API-uri publice,…

„curentul” SaaS (Software As A Service)

implementare la nivelul: clientului (browser-ului) Web și/sau serverului Web

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

Caracteristici:combinarevizualizare

agregare

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

Combinare

utilizarea de surse de date multiplepoate avea caracter multidimensional

de exemplu, subiect de interes + locație geografică + moment de timp

Yahoo! Music Search + Google Maps + Eventful

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

un mash-up Web de studiere a efectelor detonării bombelor nucleare – nuclearsecrecy.com/nukemap/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

Vizualizare

pot fi adoptate diverse tehnici de vizualizare(prezentare) a datelor:

chart-uri, cartografică, tag cloud-uri, tridimensională,…

detalii în cadrul materiei „Dezvoltarea aplicațiilor Web la nivel de client” (anul 3, sem. I)

https://profs.info.uaic.ro/~busaco/teach/courses/cliw/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

metode diverse de vizualizare în timp-real a evoluției cursului monedelor virtuale – Coinorama

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

Agregare

gruparea datelor provenite din mai multe surse șianalizarea lor: statistici, clasificări, predicții,…

e.g., folosind data mining se pot relevaaspecte „ascunse” ale datelor procesate

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

recomandare de parfumuri – ScentSee

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

Surse de date(data feeds)

Atom, RSS, geoRSS, micro-date HTML5, RDFa,…

Interfețe de programare(API-uri)

specifice serviciilor publiceși de procesare JSON/XML/RDF

Biblioteci/framework-uripentru dezvoltare

framework-uri Web genericesau oferite de organizații

Instrumente interactive(Web tools)

eventual, disponibile în cloud

Platforme(Platform As A Service)

Heroku, Google Cloud Platform, Nodejitsu, Windows Azure,…

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

Your Life on Earth (BBC)www.bbc.com/earth/story/20141016-your-life-on-earth

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

mash-ups

lista mash-up-urilor: www.programmableweb.com/mashups/directory

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Nu există o problemă de securitateprivind accesul la resurse via JavaScript?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Same-Origin Policy

“restricts how a document or script loaded from one origin can interact with a resource from another origin”

astfel, un program JavaScript trebuie să acceseze doar datele aparținând aceleași origini

– i.e., provenite din același domeniu Internet

mash-ups: securitate

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

se permit doar transferuri vizând reprezentări de resursereferitoare la imagini, fișiere CSS

și alte programe JavaScript aparținând aceleași origini

avansat

clientserver Web

HTTPJSON, XML,…

APIpublic

APIpublic

HTTPJPG

HTTPJPG

Same-Origin Policy

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Same-Origin Policy

previne cazurile în care un document/program încărcatdintr-o origine să poată accesa/modifica proprietăți

ale unui document aparținând altei origini

pentru detalii, a se consultahttps://developer.mozilla.org/Web/Security/Same-origin_policy

avansat


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

interactiune web: ajax – studiu de cazvar url = "http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film";

// realizăm o cerere HEAD pentru a obține meta-date despre o resursăvar client = new XMLHttpRequest ();client.open ("HEAD", url, true);client.send ();client.onreadystatechange = function () {

// am recepționat câmpurile-antet?if (client.readyState == 2) {// semnalăm tipul MIME și data ultimei actualizărialert ("Resursa de tip '" +

client.getResponseHeader ("Content-Type") + "' s-a actualizat la " + client.getResponseHeader ("Last-Modified"));

}}

preluarea cu HEAD a unor meta-date, în mod asincron

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

URL al altui domeniuse încalcă Same Origin Policy

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

CORS (Cross-Origin Resource Sharing)

recomandare W3C (2014)www.w3.org/TR/cors/

permite partajarea la nivel de client a resurselorprovenind din domenii Internet diferite

astfel, se pot emite cereri între domenii (cross-origin)

avansat


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

Poate fi abstractizat accesul la surse de date disponibile pe Web?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

model de acces la date: yql

Yahoo! Query Language

abstractizează accesul la surse de date eterogenece pot fi obținute via servicii Web

https://developer.yahoo.com/yql/

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Permite – pe baza unui limbaj similar SQL –interogarea, filtrarea, combinarea datelor la nivel de Web

(suport pentru realizarea de mash-up-uri)

facilitează atașarea la aplicația Web dezvoltatăa surselor de date de interes:

fluxuri de știri, informații cartografice, resurse multimedia etc.

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Adoptă o sintaxă SQLshow, desc, select, use, insert, update, delete

surse de date publice Yahoo! (built-in tables) sau oferite de terți (community tables) – e.g., Amazon,

Apple, arXiv, Deviant Art, Europarliament, GitHub, Last.fm, PayPal, Spotify, Steam, Tumblr, Yelp,…

răspunsul la o interogare ≡ rânduri (rows) de date

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

avansat

creații muzicaleoferite de iTunes

select * from apple.itunes

where term='Eclipse' and

media='music';

URL-ul corespunzător cererii

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

model de acces la date: graphql

Graph Query Language

“a query language for APIs and a runtime for fulfilling those queries with your existing data”

declarativ, inspirat de JSON, strict (strong-typed)considerat alternativă la paradigma REST

http://graphql.org/

https://learngraphql.com/

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Graph Query Language

implementare de referință în JavaScript: GraphQL.js

biblioteci disponibile pentru C, Go, Java, .NET, PHP, Python, Scala, Typescript,…

de experimentat și Apollo – www.apollodata.com

detalii în Vince Ling, State of GraphQL 2016https://scaphold.io/blog/2016/10/31/state-of-graphql.html

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


interogare interactivă cu GraphQLa API-ului vizând „Războiul Stelelor”

graphql.org/swapi-graphql/

exemple de interogări via GraphQL ale unor API-uri publice (e.g., Hacker News, Reddit, Twitter): www.graphqlhub.com

schemarezultateinterogare

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

model de acces la dateservicii Web

model de calcul

ofertantde servicii mobile

mash-up-uri la nivelde dispozitiv mobil

model de implementaremodel de interacțiune

adaptare după Tom Croucher

model de comunicare

model al fluxului

de date

⚙⚙

⚙⚙

GraphQLYQL

avansat

studiu de caz

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/rezumat

micro-servicii & interacțiune Web

↹micro-servicii Ajax

mash-up-uri Web modele de acces la date

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

„ultimul” episod: securitatea aplicațiilor Web

interacţiune web: ajax

Documents