0
Sviluppo di applicazioni mobile con ASP.NET                   MVC 4     Andrea Dottor – Microsoft MVP ASP.NET /IIS        ...
feedback           o feedback su:               • http://xedotnet.org/feedback           •   Codice: KPKP2           Email...
Alcuni numeriFrom http://www.trinitydigitalmarketing.com/the-rise-of-mobile-infographic  There are currently 6 Billion mo...
The Rise of MobileFrom http://www.trinitydigitalmarketing.com/the-rise-of-mobile-infographic
• Maggiore                     integrazione/supporto con                     HTML5                   • Nuovi template     ...
Template mobile Nuovo template di progetto con pieno  supporto al mobile Libreria JQuery Mobile inclusa e  referenziata...
demo
ASP.NET vNext - Fall 2012 Update Uscito il 31.Ottobre.2012   http://www.asp.net/vnext   http://weblogs.asp.net/jgallowa...
Single Page Application template Nuovo template  Doveva essere incluso in ASP.NET MVC 4 ma è   stato rimosso poco prima ...
demo
Differenziare il layout mobile Rinominare _Layout.cshtml in  _Layout.Mobile.cshtml In modo automatico ASP.NET MVC è  in ...
Personalizzare le View per mobile Come per il layout, è sufficiente  rinominare la view aggiungendo dopo  il nome .mobile...
Rendering per un preciso device Si ha la possibilità di personalizzare view   e layout per un preciso   dispositivo/brows...
demo
• Media-Query               • ViewPortAlcune coseda conoscere
Media-Query Fa parte delle specifiche di CSS3  http://www.w3.org/TR/css3-mediaqueries/ E ustensione dei media types  (s...
Esempio: Scott Hanselman blog
demo
ViewPort        Il viewport è un metatag introdotto con          HTML5           Va inserito nella sezione head della pa...
ViewPort – possibili valori width: Si può specificare un valore in pixel    oppure "device-width".   height: come la wid...
demo
Esporre i dati
Come fornire i Dati?1. JsonResult da metodi del controller2. Servizi REST tramite WCF  WebHttpBinding3. Web API4. …
JsonResult PRO:  Facile come creare un normale metodo   allinterno di un controller ASP.NET MVC  La soluzione più sempl...
WCF / Rest PRO:  Esposizione dei dati tramite JSON o XML (nel   caso del WebHttpBinding)  Non necessita di unapplicazio...
WebApi PRO:  Possibilità di fornire i dati sia in JSON che XML a   seconda della richiesta  Supporto query OData  Otti...
• Cosè              • Alcune soluzioniSame originpolicy
Same origin policy Per fornire maggiore sicurezza ai  browser Impedisce a script client (JavaScript nel  nostro caso) di...
Soluzione 1: proxy in locale Creare un proxy nel dominio corrente  che si occupi di rieseguire/ridirezionare  le chiamate...
Soluzione 2: JSONP JSON with Padding Permette di bypassare le problematiche di cross-domain  Lurl della chiamata viene ...
Esempio di chiamata JSONP Url:   http://s.site.com/Products/1?callback=ShowProd    uct Costruzione chiamata:   <script...
JSONP con ASP.NET MVC Creare una classe che derivi da  JsonResult Eseguire loverride del metodo  ExecuteResult in modo d...
JSONP con WCF            Valido dal Framework 4.0            Utilizzo di uno WebScriptEndpoint               Si tratta ...
JSONP con jQuery           Utilizzare il metodo $. getJSON()           Aggiungere nellurl il testo             "?callbac...
JSONP con jQuery          Utilizzare il metodo $.ajax()          Specificare             dataType: "jsonp"            ...
Esempio chiamate da JQuery$.ajax({    url: "http://localhost:1044/home/GetData",    data: { id: ALFKI },    type: "GET",  ...
demo
Soluzione 3: CORS (Cross-Origin Resource                  Sharing)                   Specifiche uscite con HTML5         ...
CORS headers Response:  Access-Control-Allow-Origin:    Indica gli url che possono accedere alla risorsa corrente  Acc...
Esempio CORS Request: Origin: http://api.bob.com Access-Control-Request-Method: PUT Access-Control-Request-Headers: X-Cus...
Thinktecture.IdentityModel                   Modulo presente su NuGet che                       permette di abilitare COR...
demo
Domande?
feedback           o feedback su:               • http://xedotnet.org/feedback           •   Codice: KPKP2           Email...
Upcoming SlideShare
Loading in...5
×

Sviluppo di applicazioni mobile con ASP.NET MVC 4

3,486

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,486
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Sviluppo di applicazioni mobile con ASP.NET MVC 4"

  1. 1. Sviluppo di applicazioni mobile con ASP.NET MVC 4 Andrea Dottor – Microsoft MVP ASP.NET /IIS in collaborazione con http://www.remedia.it
  2. 2. 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 confeedback10 http://www.remedia.it
  3. 3. Alcuni numeriFrom 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
  4. 4. The Rise of MobileFrom http://www.trinitydigitalmarketing.com/the-rise-of-mobile-infographic
  5. 5. • Maggiore integrazione/supporto con HTML5 • Nuovi template • Personalizzazione view/layout per navigazione da mobileNovità inASP.NET MVC4 per il mobile?
  6. 6. 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
  7. 7. demo
  8. 8. 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
  9. 9. 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 unapplicazione "Todo List" completa
  10. 10. demo
  11. 11. 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 lapplicazione
  12. 12. 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
  13. 13. 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 DisplayModeProviderDisplayModeProvider.Instance.Modes.Insert(0, newDefaultDisplayMode("iPhone"){ ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)}); Creare le nuove view/layout utilizzando la sintassi Index.iPhone.cshtml
  14. 14. demo
  15. 15. • Media-Query • ViewPortAlcune coseda conoscere
  16. 16. 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
  17. 17. Esempio: Scott Hanselman blog
  18. 18. demo
  19. 19. 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 dellutente<meta name="viewport" content="width=device-width , user-scalable=no" />
  20. 20. ViewPort – possibili valori width: Si può specificare un valore in pixel oppure "device-width". height: come la width ma per laltezza. 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" lutente 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 lutente può arrivare. maximum-scale: da 0 a 10, con user-scalable a "yes" indica il livello massimo di zoom a cui lutente può arrivare.
  21. 21. demo
  22. 22. Esporre i dati
  23. 23. Come fornire i Dati?1. JsonResult da metodi del controller2. Servizi REST tramite WCF  WebHttpBinding3. Web API4. …
  24. 24. JsonResult PRO:  Facile come creare un normale metodo allinterno di un controller ASP.NET MVC  La soluzione più semplice per fornire i dati allapplicazione CONTRO:  Restituisce i dati solamente in formato JSON
  25. 25. WCF / Rest PRO:  Esposizione dei dati tramite JSON o XML (nel caso del WebHttpBinding)  Non necessita di unapplicazione ASP.NET MVC  Possibilità di esporre gli stessi dati anche attraverso altri binding modificando solamente la configurazione CONTRO:  La configurazione di WCF
  26. 26. 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:
  27. 27. • Cosè • Alcune soluzioniSame originpolicy
  28. 28. 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
  29. 29. 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
  30. 30. Soluzione 2: JSONP JSON with Padding Permette di bypassare le problematiche di cross-domain  Lurl 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 nellurl (nel parametro callback)
  31. 31. 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 });
  32. 32. JSONP con ASP.NET MVC Creare una classe che derivi da JsonResult Eseguire loverride del metodo ExecuteResult in modo da modificare loutput generato  La funzione dovrà recuperare il parametro querystring callback, e comporre correttamente la risposta
  33. 33. 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>
  34. 34. JSONP con jQuery  Utilizzare il metodo $. getJSON()  Aggiungere nellurl il testo "?callback=?"jQuery.getJSON("http://search.twitter.com/search.json?callback=?", { q: "XeDotNet"}, function (tweets) { // Handle response here console.info("Twitter returned: ", tweets);});
  35. 35. 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 });
  36. 36. 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);});
  37. 37. demo
  38. 38. 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 allopzione 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
  39. 39. 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:
  40. 40. 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
  41. 41. 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/
  42. 42. demo
  43. 43. Domande?
  44. 44. 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 confeedback10 http://www.remedia.it
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×