sviluppo di applicazioni mobile con asp.net mvc 4
DESCRIPTION
Lo sviluppo di applicazioni mobile stà entrando sempre maggiornmente nella vita dello sviluppatore web.In questa sessione vedremo come ASP.NET MVC 4, con l'aiuto di alcune librerie, possa agevolare lo sviluppo di applicazioni web che dovranno essere consumate da dispositivi mobile. Analizzeremo le problematiche che differenziano lo sviluppo web-mobile rispetto al normale sviluppo web e le affronteremo passo passo.TRANSCRIPT
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: [email protected]: 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: [email protected]: http://blog.dottor.netTwitter: http://twitter.com/dottor
feedback
in collaborazione con
http://www.remedia.it