Traildevils Mobile Web-AppX-Platform

Stefan Oderbolz

Jürg Hunziker

16. Dezember 2011

Traildevils Mobile Web-App (X-Platform)

2 / 13

Agenda

0 Technologie0 Server: PHP0 Client: Sencha Touch (JavaScript)

0 Ziele0 Demo0 UI Richtlinien0 Offlinefähigkeit0 Zukunft

Traildevils Mobile Web-App (X-Platform)

3 / 13

Technologie

0 App realisiert als Webseite0 Server: PHP

0 Zwischenschicht von Traildevils API und App0 Bereitstellen der Daten0 Selektieren der Trails geordnet nach Distanz

0 Client: Sencha Touch0 Mobile JavaScript Framework

Traildevils Mobile Web-App (X-Platform)

4 / 13

System-Architektur

Traildevils Mobile Web-App (X-Platform)

5 / 13

Sencha Touch

0 Basierend auf ExtJS0 JavaScript Framework für Web-Applikationen0 seit 2007 (Sencha Touch: 2010)

0 Verwendet Web Standards (HTML5, CSS3)0 Touch Events0 MVC0 Zugriff auf Datenquellen (AJAX , JSON, Local Storage)0 Viele GUI-Komponenten

Traildevils Mobile Web-App (X-Platform)

6 / 13

Sencha Touch – Hello World

<script src="lib/sencha-touch.js" type="text/javascript"></script> <script type="text/javascript"> new Ext.Application({ launch: function() { new Ext.Panel({ fullscreen: true, html: 'Hello World!' }); } });</script>

Traildevils Mobile Web-App (X-Platform)

7 / 13

var list = new Ext.List({store: store,itemTpl : '{firstName} {lastName}',grouped: true,indexBar: true

});

Sencha Touch - Component

Traildevils Mobile Web-App (X-Platform)

8 / 13

Ziele

0 Priorität 1:0 Trailliste abhänging vom Standort0 Suche/Filterung von Trails0 Detailansicht0 Trails auf Karte anzeigen

0 Priorität 2:0 Favoritenliste0 Offlinefähigkeit

0Priorität 0: Neue Technologie kennenlernen :-)

Traildevils Mobile Web-App (X-Platform)

9 / 13

Demo

0 Unterstützte Browser:0 Alle Webkit-fähigen Browser

(Chrome, Opera, Safari)0 Mobile Browser

(iOS, Android, BlackBerry)

http://traildevils.rdmr.ch

Traildevils Mobile Web-App (X-Platform)

10 / 13

UI Richtlinien

0 Look & Feel von iOS Apps0 Dank CSS einfach austauschbar

0 Vorgaben: Apple, Android, BlackBerry0 Orientierung an Standards

Pull-Down Refresh

Swipe Options Menu

Filter/Suche-Textfeld

Traildevils Mobile Web-App (X-Platform)

11 / 13

Offlinefähigkeit

0 Caching der Sourcen (JavaScript, CSS, HTML usw.)0 Definition in Manifest-File

0 Datenablage im Local Storage des Browsers0 Key/Value Pairs mit primitiven Datentypen

0 Problem: Bilder0 Umwandlung in Base64 (Data-URL)

Traildevils Mobile Web-App (X-Platform)

12 / 13

Zukunft

0 Sencha Touch 2.00 seit 9. Dezember 3. Preview-Version0 Bessere Performance auf Android0 Neues Klassensystem0 Dynamisches Laden von JavaScript

0 Sencha.io0 Clouddienst für Mobile-Applikationen

Traildevils Mobile Web-App (X-Platform)

13 / 13

Das müssen Sie wissen(aka Lessons learned)

0 Sencha Touch macht Spass0 JavaScript eher weniger0 Grössere mobile Web-Applikationen sind noch nicht

«salonfähig»0 Es fehlt der native Touch0 Zu hohe Reaktionszeiten

0 Übergangslösung: Hybrid-Apps (z.B. mit PhoneGap)

Fragen

?