traildevils mobile web-app
DESCRIPTION
16. Dezember 2011. Traildevils Mobile Web-App. Stefan Oderbolz Jürg Hunziker. X- Platform. Agenda. Technologie Server: PHP Client: Sencha Touch (JavaScript) Ziele Demo UI Richtlinien Offlinefähigkeit Zukunft. Technologie. App realisiert als Webseite Server: PHP - PowerPoint PPT PresentationTRANSCRIPT
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
?