Mobile Development mit ASP.NET MVC 4

19
Mobile Development mit ASP.NET MVC 4 Hans Peter Bornhauser, Noser Engineering AG Fachbereichsleiter .NET, Digicomp AG 1

description

Referent: Hans Peter Bornhauser

Transcript of Mobile Development mit ASP.NET MVC 4

Page 1: Mobile Development mit ASP.NET MVC 4

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

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

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 5: Mobile Development mit ASP.NET MVC 4

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

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

Demo

Standard (Mobile) Templates

jQuery Mobile

Adaptive Views

7

Page 8: Mobile Development mit ASP.NET MVC 4

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

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

Web API – Kommunikation mit dem Server

10

Page 11: Mobile Development mit ASP.NET MVC 4

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

Demo Web API

ProductsController

12

Page 13: Mobile Development mit ASP.NET MVC 4

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 15: Mobile Development mit ASP.NET MVC 4

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

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

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

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