WEB TECHNOLOGIES FOR MOBILE APPS (2/2)

So far..

FRONTEND LOGIC

Smartphone

«Isolated, stand-alone apps»

Can we run (some) of app logic remotely?

FRONTEND LOGIC

Smartphone

REMOTESERVICE

Server

Inte

rnet

co

nnec

tion

Why use remote ‘services’• Very reach set of ‘services’, e.g., in the form of information

(weather, etc.), maps, etc..• ..or algorithms (image recognition, translators, AI,..)• .. authentication services (google sign-in, facebook,,)

• … and much more (See progammableweb of a list)

• Integration with other apps (social apps)

• Offload compute intensive tasks for demanding apps (like AR,…)

Big view

• Standard web browsing (human)• Programmatic access (API)

Web browsing

web browerHTTP

Application

HTTP API

Service

Connecting a mobile app to a service

XHTTP

TCP

Wire protocol

Web API• How to model the service?

• Which application protocol to use?

• How to represent data?

• How to authenticate the app?

• How to authenticate the user?

• Who is the initiator?

HTTP basics• HTTP regulates interaction between a browser (client) and a server

• HTTP 1.1 defines 8 request verbs (methods); the most important are

• GET: Retrieves the resource identified by the request URL• POST: Sends data of unlimited length to the URL

• PUT: Stores a resource under the request URL• DELETE: Removes the resource identified by the request URL

• HTTP 1.0 included only the GET, HEAD, and POST methods.

• HTTP 2.0 is the new protocol (with performance improvement and communication architecture, e.g., streaming, push,..)

Outline• Introduction to jQuery• Available communication patterns

• AJAX, Web Socket, Web Workers, Service workers, Push notification

• External data representation• JSON

• Wire protocols• WEB-API: JSONP, REST,..

• For detailed web tech usage, see: https://w3techs.com/

jQuery: a short introduction• The library implements the sunction jQuery• The $ sign is just an alias for the jQuery function; • Pattern: call the $() function and pass a selector• The reply is a jQuery object. • In JavaScript, functions are objects too• $() then has properties and methods, too. • For example, one use the $.ajax method to make an

AJAX request (see later).

https://ils.unc.edu/courses/2013_spring/inls760_001/lect11/lect11.pdf

JSON (JavaScript Object Notation)• Two fundamental types :

JSON values

JSON example

XML in a nutshell • XML (eXtensible Markup Language) is a language derived

from SGML (Standard Generalized Markup Language),from which HTML also derives.

• What is the difference with HTML?

• In HTML markups are fixed, whereas in XML new tagsare defined that are used to denote the meaning of thedata

XML in a nutshell• An XML document is a tree

• Data appear inside elements

• An element not only contains the data itself but alsoinformation describing the meaning of the data

Example<book>

<title> Il Signore degli Anelli

</title><author>

John R. R. Tolkien</author><editor>

Bompiani</editor>

</book>

Title

Author

Editor

Book Elements

Tips : Browser allows to see the structure of the document

Well formed document

WFD and validation

XMLDocument

Syntax check

Semantic checkGrammar

XML vs JSON

xml json

2.1 AJAX• AJAX=Asynchronous JavaScript And XML• Allows for exchanging data via HTTP• Runs in a separate thread• Caller is notified (via msg) when the HTTP returns

JS caller

Remotetime

AJAX programming model

2.1 AJAX restrictions• AJAX can be used to retrive data from the same ORIGIN

where the page is loaded from• Trying to get data from a different origins is blocked from the

browser

• Failed to load xxx: Redirect to xxx.. has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header ispresent on the requested resource. Origin yyy is therefore notallowed access.

• CORS = Cross-Origin Resource Sharing (CORS)

• .. Why?

Security issues (XSS cross-site scripting)• Suppose you open two windows in the browser• On one window authenticate with your bank account (say

you get a authorization token to allow for subsequent requests, e.g., a cookie)

• On the other window you load a malicious script• The script can issue a request pretending to be an

authorized request authenticated

M

B

M

B

Malicious

Bank

Fetching data from a remote source• Is the same-origin policy always used?• What happen when we load a library (like jQuery?)

• The same-origin policy doesn’t apply to the <script> tag: a remote JS can be loaded and executed

• We can use the <script> tag to load a page

• The page can return the desidered data… but how to precess the data in JS?

• One possible work-around is to use JSONP

2.2 JSONP• Idea: load a js file calling a local function wrapping fetched data• Pass the local function name to the remote server during the call

A

Bcallback f

f(data)f

Examplehttp://api.wunderground.com/api/[API_KEY]/conditions/q/rome.json

….http://api.wunderground.com/api/[API_KEY]/conditions/q/rome.json?callback=fJSONP

Example: Geocoding API

Example: Geocoding API (json)

Example: Geocoding API (xml)

Example: reverse Geocoding (json)

Example: Reverse geocoding (xml)

Example of XML replyhttp://api.wunderground.com/api/[APIKEY]/conditions/q/zmw:00000.1.16240.xml

Another example

…

http://api.wunderground.com/api/KEY/FEATURE/[FEATURE…]/q/QUERY.FORMAT

Features

geolookup conditions forecast

types= JSON, XML

Example of XML replyhttp://api.wunderground.com/api/[APIKEY]/conditions/q/zmw:00000.1.16240.xml

Interoperability

Chrome Developer tool