Sviluppo di applicazioni mobile con ASP.NET MVC 4

Sviluppo di applicazioni mobile con ASP.NET
MVC 4

Andrea Dottor – Microsoft MVP ASP.NET /IIS

in collaborazione con

http://www.remedia.it

feedback

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

• Codice: KPKP2

Email: andrea@dottor.net
Blog: http://blog.dottor.net
Twitter: http://twitter.com/dottor
in collaborazione con
feedback

10 http://www.remedia.it

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

 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

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

• Maggiore
integrazione/supporto con
HTML5
• Nuovi template
• Personalizzazione view/layout
per navigazione da mobile

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

Template mobile

 Nuovo template di progetto con pieno
supporto al mobile
 Libreria JQuery Mobile inclusa e
referenziata
 Le view presenti fanno uso di JQuery
Mobile

ASP.NET vNext - Fall 2012 Update
 Uscito il 31.Ottobre.2012
 http://www.asp.net/vnext
 http://weblogs.asp.net/jgalloway/archive/2012/10/31/te
n-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

Single Page Application template

 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

Differenziare il layout mobile

 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

Personalizzare le View per 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

Rendering per un preciso device

 Si ha la possibilità di personalizzare view
e layout per un preciso
dispositivo/browser
 Intervanire nel global.asax andando a
personalizzare il DisplayModeProvider
DisplayModeProvider.Instance.Modes.Insert(0, new
DefaultDisplayMode("iPhone")
{
ContextCondition = (context =>
context.GetOverriddenUserAgent().IndexOf
("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

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

• Media-Query
• ViewPort

Alcune cose
da conoscere

Media-Query

 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

ViewPort

 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
<meta name="viewport" content="width=device-width , user-
scalable=no" />

ViewPort – possibili valori
 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.

Come fornire i Dati?

1. JsonResult da metodi del controller
2. Servizi REST tramite WCF
 WebHttpBinding
3. Web API
4. …

JsonResult

 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

WCF / Rest

 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

WebApi

 PRO:
 Possibilità di fornire i dati sia in JSON che XML a
seconda della richiesta
 Supporto query OData
 Ottimizzate per lavorare via HTTP

 CONTRO:

• Cos'è
• Alcune soluzioni

Same origin
policy

Same origin policy

 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

Soluzione 1: proxy in locale

 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 2: JSONP

 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)

Esempio di chiamata JSONP

 Url:
 http://s.site.com/Products/1?callback=ShowProd
uct
 Costruzione chiamata:
 <script type="text/javascript"
src="http://s.site.com/Products/1?callback=Show
Product"><script/>
 Risposta:
 ShowProduct({ "ProductName":
"Bicicletta", "Price":950.23, "Id":23 });

JSONP con ASP.NET MVC

 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 WCF

 Valido dal Framework 4.0
 Utilizzo di uno WebScriptEndpoint
 Si tratta di un WebHttpBinding con impostato
WebScriptEnablingBehavior
 Impostare
crossDomainScriptAccessEnabled a
true
<system.serviceModel>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
<standardEndpoints>
<webScriptEndpoint>
<standardEndpoint name="" crossDomainScriptAccessEnabled="true"/>
</webScriptEndpoint>
</standardEndpoints>
</system.serviceModel>

JSONP con jQuery

 Utilizzare il metodo $. getJSON()
 Aggiungere nell'url il testo
"?callback=?"
jQuery.getJSON("http://search.twitter.com/search.json?callback=?", {
q: "XeDotNet"
}, function (tweets) {
// Handle response here
console.info("Twitter returned: ", tweets);
});

JSONP con jQuery

 Utilizzare il metodo $.ajax()
 Specificare
 dataType: "jsonp"
 crossDomain: true
 jsonp: "nome funzione da creare per callback"
$.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=?", f
unction (data) {
alert(data.CustomerID + " - " + data.Country);
});

Soluzione 3: CORS (Cross-Origin Resource
Sharing)

 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/
http://blogs.msdn.com/b/carlosfigueira/archive/2012/02/20/implementing-cors-support-in-asp-net-web-apis.aspx

CORS headers
 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:

Esempio CORS

 Request:
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

 Response:
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8

Thinktecture.IdentityModel

 Modulo presente su NuGet che
permette di abilitare CORS
 http://nuget.org/packages/Thinktecture.IdentityMo
del
 Supporta MVC4
 Supporta WebAPI
 Altamente configurabile
 Filtro delle risorse esposte tramite CORS
 Filtro degli url abilitati ad accedere alle risorse
 Filtro degli header
 …
http://brockallen.com/2012/06/28/cors-support-in-webapi-mvc-and-iis-with-thinktecture-identitymodel/

Sviluppo di applicazioni mobile con ASP.NET MVC 4

Recomendados

Recomendados

Más contenido relacionado

Más de Andrea Dottor

Más de Andrea Dottor (20)

Sviluppo di applicazioni mobile con ASP.NET MVC 4