Sviluppo di applicazioni mobile con ASP.NET MVC 4

Andrea Dottor – Microsoft MVP ASP.NET /IIS

Sviluppo di applicazioni mobile con ASP.NET MVC 4

in collaborazione con

http://www.remedia.it

feedback

10

o feedback su:• http://xedotnet.org/feedback

• Codice: KPKP2

Email: andrea@dottor.netBlog: http://blog.dottor.netTwitter: http://twitter.com/dottor

feedback

in collaborazione con

http://www.remedia.it

There are currently 6 Billion mobile subscribers worldwide

This equals 87% of the world’s population

China and India account for 30% of this growth

There are over 1.2 Billion people accessing the web from their mobiles

Over 300,000 apps have been developed in the past 3 years

Google earns 2.5 Billion in mobile ad revenue annually

Alcuni numeriFrom http://www.trinitydigitalmarketing.com/the-rise-of-mobile-infographic

The Rise of MobileFrom http://www.trinitydigitalmarketing.com/the-rise-of-mobile-infographic

Novità in ASP.NET MVC 4 per il mobile?

• Maggiore integrazione/supporto con HTML5

• Nuovi template• Personalizzazione

view/layout per navigazione da mobile

Nuovo template di progetto con pieno supporto al mobile

Libreria JQuery Mobile inclusa e referenziata

Le view presenti fanno uso di JQuery Mobile

Template mobile

demo

Uscito il 31.Ottobre.2012 http://www.asp.net/vnext http://weblogs.asp.net/jgalloway/archive/2012/1

0/31/ten-oh-wait-eleven-eleven-things-you-should-know-about-the-asp-net-fall-2012-update.aspx

Nuovi template Single Page Application templates Facebook Application

ASP.NET Web API Update ASP.NET Web API OData ASP.NET Web API Tracing ASP.NET Web API Help Page

Windows Azure Authentication ASP.NET SignalR ASP.NET Friendly URLs

ASP.NET vNext - Fall 2012 Update

Nuovo template Doveva essere incluso in ASP.NET MVC 4

ma è stato rimosso poco prima del rilascio ufficiale

Utilizza knockout.js lato client Utilizza Web API lato server

E' un'applicazione "Todo List" completa

Single Page Application template

demo

Rinominare _Layout.cshtml in _Layout.Mobile.cshtml

In modo automatico ASP.NET MVC è in grado di utilizzare il layout corretto a seconda del dispositivo che stà consumando l'applicazione

Differenziare il layout mobile

Come per il layout, è sufficiente rinominare la view aggiungendo dopo il nome .mobile Es: Index.cshtml -> Index.mobile.cshtml

La logica nel controller rimane la stessa

Viene differenziato solo il rendering HTML

Personalizzare le View per mobile

Si ha la possibilità di personalizzare view e layout per un preciso dispositivo/browser

Intervanire nel global.asax andando a personalizzare il DisplayModeProvider

Creare le nuove view/layout utilizzando la sintassi Index.iPhone.cshtml

Rendering per un preciso device

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone"){ ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)});

demo

Alcune cose da conoscere

• Media-Query• ViewPort

Fa parte delle specifiche di CSS3 http://www.w3.org/TR/css3-mediaqueries/

E' ustensione dei media types (screen,print) di CSS2

Permette di poter aggiungere degli stili in particolari condizioni Il caso più commune è quello della width

Smartphone 320px Tablet 768px Netbook 1024px Desktop 1600px

Media-Query

Esempio: Scott Hanselman blog

demo

Il viewport è un metatag introdotto con HTML5 Va inserito nella sezione head della pagina

Permette di specificare ad un browser mobile come gestire lo zoom e le dimensioni del sito

Senza questo tag il browser setta un width di circa 850px

Possiamo indicare di settare la width del sito uguale alla width del telefono

Possiamo bloccare lo zoom da parte dell'utente

ViewPort

<meta name="viewport" content="width=device-width , user-scalable=no" />

width: Si può specificare un valore in pixel oppure "device-width".

height: come la width ma per l'altezza. Oltre ai pixel si può usare "device-height".

initial-scale: scala da 0 a 10, indica il livello di zoom iniziale (con 1 = nessuno zoom). Il consiglio è lasciare questo valore vuoto o settarlo a "1".

user-scalable: yes/no. Se "no" l'utente non può modificare il livello di zoom della pagina.

minimum-scale: da 0 a 10, con user-scalable a "yes" indica il livello minimo di zoom a cui l'utente può arrivare.

maximum-scale: da 0 a 10, con user-scalable a "yes" indica il livello massimo di zoom a cui l'utente può arrivare.

ViewPort – possibili valori

demo

Esporre i dati

1. JsonResult da metodi del controller

2. Servizi REST tramite WCF WebHttpBinding

3. Web API4. …

Come fornire i Dati?

PRO: Facile come creare un normale metodo

all'interno di un controller ASP.NET MVC La soluzione più semplice per fornire i dati

all'applicazione

CONTRO: Restituisce i dati solamente in formato

JSON

JsonResult

PRO: Esposizione dei dati tramite JSON o XML

(nel caso del WebHttpBinding) Non necessita di un'applicazione ASP.NET

MVC Possibilità di esporre gli stessi dati anche

attraverso altri binding modificando solamente la configurazione

CONTRO: La configurazione di WCF

WCF / Rest

PRO: Possibilità di fornire i dati sia in JSON che

XML a seconda della richiesta Supporto query OData Ottimizzate per lavorare via HTTP

CONTRO:

WebApi

Same origin policy

• Cos'è• Alcune soluzioni

Per fornire maggiore sicurezza ai browser

Impedisce a script client (JavaScript nel nostro caso) di accedere a risorse/metodi provenienti da un dominio diverso da quello corrente Es: mobile.site.com non può accedere ai

dati di services.site.com

Same origin policy

Creare un proxy nel dominio corrente che si occupi di rieseguire/ridirezionare le chiamate

Facilemente implementabile Può richiedere una doppia

manutenzione Servizi remoti Proxy in locale

Soluzione 1: proxy in locale

JSON with Padding Permette di bypassare le

problematiche di cross-domain

L'url della chiamata viene inserito come src di uno tag script

Lo script ritornato conterrrà una chiamata ad un metodo di callback che deve essere specificato nell'url (nel parametro callback)

Soluzione 2: JSONP

Url: http://s.site.com/Products/1?

callback=ShowProduct

Costruzione chiamata: <script type="text/javascript"

src="http://s.site.com/Products/1?callback=ShowProduct"><script/>

Risposta: ShowProduct({ "ProductName":

"Bicicletta", "Price":950.23, "Id":23 });

Esempio di chiamata JSONP

Creare una classe che derivi da JsonResult

Eseguire l'override del metodo ExecuteResult in modo da modificare l'output generato La funzione dovrà recuperare il parametro

querystring callback, e comporre correttamente la risposta

JSONP con ASP.NET MVC

Valido dal Framework 4.0 Utilizzo di uno WebScriptEndpoint

Si tratta di un WebHttpBinding con impostato WebScriptEnablingBehavior

Impostare crossDomainScriptAccessEnabled a true 

JSONP con WCF

<system.serviceModel> <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/> <standardEndpoints> <webScriptEndpoint> <standardEndpoint name="" crossDomainScriptAccessEnabled="true"/> </webScriptEndpoint> </standardEndpoints></system.serviceModel>

Utilizzare il metodo $. getJSON() Aggiungere nell'url il testo "?

callback=?"

JSONP con jQuery

jQuery.getJSON("http://search.twitter.com/search.json?callback=?", { q: "XeDotNet"}, function (tweets) { // Handle response here console.info("Twitter returned: ", tweets);});

Utilizzare il metodo $.ajax() Specificare

dataType: "jsonp" crossDomain: true jsonp: "nome funzione da creare per

callback"

JSONP con jQuery

$.ajax({ // ... dataType: 'jsonp', // ...});

json123456789({ 'uid': 23, 'username': 'andreadottor', 'name': 'Andrea Dottor' });

Esempio chiamate da JQuery

$.ajax({ url: "http://localhost:1044/home/GetData", data: { id: 'ALFKI' }, type: "GET", dataType: "jsonp", jsonp: "callback", success: function (data) { alert(data.CustomerID + " - " + data.Country); }});

$.getJSON("http://localhost:1044/home/GetData?id=ALFKI&callback=?", function (data) { alert(data.CustomerID + " - " + data.Country);});

demo

Specifiche uscite con HTML5 http://www.w3.org/TR/cors/

E' un set di headers che permettono di bypassare/controllare le restrizioni di cross-domain

E' equivalente all'opzione CrossDomainScriptAccessEnabled di del WebHttpBinding di WCF

Tutorial: http://www.html5rocks.com/en/tutorials/cors/

Soluzione 3: CORS (Cross-Origin Resource Sharing)

http://blogs.msdn.com/b/carlosfigueira/archive/2012/02/20/implementing-cors-support-in-asp-net-web-apis.aspx

Response: Access-Control-Allow-Origin:

Indica gli url che possono accedere alla risorsa corrente

Access-Control-Allow-Credentials: Indica che nella request possono venir passati anche i cookies

Access-Control-Expose-Headers: Indica quali altri header il client può aver accesso

Request: Origin:

Incluso in modo automatico da tutti i browser durante tutte le chiamate

Access-Control-Request-Method: Metodo a cui si vuole accedere alla risorsa PUT, GET, DELETE

Access-Control-Request-Headers: Header a cui si vuole accedere (separati da virgola)

CORS headers

Request:

Response:

Esempio CORS

Origin: http://api.bob.comAccess-Control-Request-Method: PUTAccess-Control-Request-Headers: X-Custom-HeaderHost: api.alice.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0...

Access-Control-Allow-Origin: http://api.bob.comAccess-Control-Allow-Methods: GET, POST, PUTAccess-Control-Allow-Headers: X-Custom-HeaderContent-Type: text/html; charset=utf-8

Modulo presente su NuGet che permette di abilitare CORS http://

nuget.org/packages/Thinktecture.IdentityModel

Supporta MVC4 Supporta WebAPI Altamente configurabile

Filtro delle risorse esposte tramite CORS Filtro degli url abilitati ad accedere alle

risorse Filtro degli header …

Thinktecture.IdentityModel

http://brockallen.com/2012/06/28/cors-support-in-webapi-mvc-and-iis-with-thinktecture-identitymodel/

demo

Domande?

feedback

10

o feedback su:• http://xedotnet.org/feedback

• Codice: KPKP2

Email: andrea@dottor.netBlog: http://blog.dottor.netTwitter: http://twitter.com/dottor

feedback

in collaborazione con

http://www.remedia.it