Download - Mobile Development mit ASP.NET MVC 4
![Page 1: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/1.jpg)
Mobile Development
mit ASP.NET MVC 4
Hans Peter Bornhauser, Noser Engineering AG
Fachbereichsleiter .NET, Digicomp AG
1
![Page 2: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/2.jpg)
Der Referent: Hans Peter Bornhauser
Dipl. Ing ETH
Software Architect, Senior Software Engineer, Consultant and Trainer bei Noser Engineering AG in Winterthur
Fachbereichsleiter .NET bei Digicomp
12 Jahre Webentwicklung mit .NET (seit Beta 1.0)
ASP.NET Webforms und MVC
WPF und Silverlight
WCF und Entity Framework
Windows 8 Apps (search.ch, Family Trips)
div. Microsoft Zertifikate
MCPD Web
MCPD Windows
MCPD Silverlight + Azure
MCSD Web Applications 4.5
MCT (Certified Trainer)
2
![Page 3: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/3.jpg)
Warum ist mobile Entwicklung wichtig?
5.9 Mia. mobile Geräte (85% der Bevölkerung)
davon 1.5 Mia. 3G/4G
Anzahl Benutzer, welche über‘s Telefon ins Internet gehen
US/UK 25%
China 30%
Indien 59%
Ägypten 70%
3
![Page 4: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/4.jpg)
Was können wir tun?
Nichts
Hoffen, dass die mobilen Browser besser werden
Adaptive Designs
HTML5 / CSS
Mobile Apps
Speziell adaptierte Web App
Native App
4
![Page 5: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/5.jpg)
Was bietet ASP.NET MVC 4?
Auf den 1. Blick: wenig Neues!
Neue Templates
jQuery Mobile (UI für Mobile auf jQuery aufbauend)
knockout.js (MVVM für Web)
Asynchrone Controller
Adaptive Views
View Switches, Browser Overriding
Bundling + Minification
ASP.NET Web API
WebSockets + SignalR
5
![Page 6: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/6.jpg)
Möglichkeiten von HTML
Viewport einstellen (mobile Browser detektiert Breite des Geräts)
<meta name="viewport" content="width=device-width" />
Media Queries (CSS3 => Default Styles verwenden)
@media all and (min-width: 700px) and (max-width: 1000px)
{…}
@media screen and (min-width: 400px) and (max-width:
700px) { …}
6
![Page 7: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/7.jpg)
Demo
Standard (Mobile) Templates
jQuery Mobile
Adaptive Views
7
![Page 8: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/8.jpg)
jQuery Mobile
Auf jQuery basierendes Framework
HTML5 konforme data-Attribute, um Darstellung der Elemente zu
steuern
Aufteilung physischer Pages in logische Pages (Blättern)
Dialogfelder («Popup»)
Navigation
Formularfelder
(verschachtelte) Listen
5 Farbschemata, Konfigurator für weitere
8
![Page 9: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/9.jpg)
modernizr
Framework zum Prüfen, ob Browser ein bestimmtes Feature
unterstützt
if (Modernizr.localstorage)
Polyfills (Nachbildung von HTML5 Features mit JavaScript)
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js' });
9
![Page 10: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/10.jpg)
Web API – Kommunikation mit dem Server
10
![Page 11: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/11.jpg)
Web API
WCF kennt seit Version 3.5 WebHttpBinding
ASP.NET MVC hat ähnliche Fähigkeiten (JsonResult)
Neu: Web API mit folgenden Funktionen:
Zugriffsprotokoll über HTTP zum Lesen und Ändern von Objekten
Abfragen über OData, flexible Unterstützung für JSON, XML und
andere Protokolle
Flexibles Hosting: nicht nur im IIS, sondern auch in eigenen
Applikationen
Web API Controller können jedem Projekt hinzugefügt werden
11
![Page 12: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/12.jpg)
Demo Web API
ProductsController
12
![Page 13: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/13.jpg)
Schnittstellenkonvention
Konvention aufgrund Route in WebApiConfig.cs
Mapping durch Naming Conventions
13
Controller Methode URI
GetAllProducts /api/products
GetProductById /api/products/id
GetProductsByCategory /api/products/?category=category
Automatische Hilfeseite /help
![Page 14: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/14.jpg)
Unterschiedliche Ergebnisse
Aufgrund unterschiedlicher Accept-Header
Request von IE: Antwort JSON
Request von Firefox: Antwort Xml
14
![Page 15: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/15.jpg)
Self Hosting
z.B. In einem Windows Service
var config = new
HttpSelfHostConfiguration("http://localhost:8080");
using (var server = new HttpSelfHostServer(config))
{
server.OpenAsync().Wait();
}
15
![Page 16: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/16.jpg)
Zusammenfassung
Mobile Development für jede (Web-)App
ASP.NET MVC ist Servertechnologie
JavaScript auf dem Client
Viele Bibliotheken lindern den Schrecken von JavaScript
jQuery / jQuery Mobile
knockout.js
TypeScript
Schnittstellen sind wichtig: Web API, REST, Json
Trotzdem: testen, testen, testen, …
19
![Page 17: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/17.jpg)
Aktuelle Digicomp-Kurse zum Thema
Entwicklung von Webapplikationen mit MVC 4 (2 Tage)
www.digicomp.ch/kurse/MVC.html
Windows 8 für WPF Entwickler (2 Tage)
www.digicomp.ch/kurse/WP8.html
HTML 5 (1 Tag) www.digicomp.ch/kurse/HT5.html
jQuery (2 Tage) www.digicomp.ch/kurse/IJQ.html
Neues in .NET 4.5 und Visual Studio 2012 (2 Tage)
www.digicomp.ch/kurse/CN5.html
20
![Page 18: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/18.jpg)
Literatur
C# 5.0 in a Nutshell Joseph & Ben Albahari
O'Reilly ISBN 978-1-449-32010-2
Async in C# 5.0 Alex Davies
O'Reilly ISBN 978-1-449-33716-2
Programming ASP.NET MVC 4 Jess Chadwick, Jess Snyder
O’Reilly ISBN 978-1-449-32031-7, 9.2012
Pro ASP.NET MVC 4 Adam Freeman
O’Reilly ISBN 978-1-430-24236-1, 12.2012
Webanwendungen mit ASP.NET MVC 4 Holger Schwichtenberg
Microsoft Press ISBN 978-3-866-45564-1, 5.2013
21
![Page 19: Mobile Development mit ASP.NET MVC 4](https://reader033.vdocuments.us/reader033/viewer/2022052507/558bd267d8b42a605c8b4637/html5/thumbnails/19.jpg)
Links
Visual Studio 2012 News: http://msdn.microsoft.com/en-
us/library/bb386063.aspx
.NET News http://msdn.microsoft.com/en-us/library/ms171868.aspx
ASP.NET MVC http://www.asp.net/mvc
SignalR: http://signalr.net/
22