Traildevils Mobile Web-App

1. 16. Dezember 2011 TraildevilsMobile Web-App Stefan Oderbolz Jürg Hunziker X-Platform

2. Agenda • Technologie • Server: PHP • Client: Sencha Touch (JavaScript) • Ziele • Demo • UI Richtlinien • Offlinefähigkeit • Zukunft Traildevils Mobile Web-App (X-Platform)

3. Technologie • App realisiert als Webseite • Server: PHP • Zwischenschicht von Traildevils API und App • Bereitstellen der Daten • Selektieren der Trails geordnet nach Distanz • Client: Sencha Touch • Mobile JavaScript Framework Traildevils Mobile Web-App (X-Platform)

4. System-Architektur Traildevils Mobile Web-App (X-Platform)

5. Sencha Touch • Basierend auf ExtJS • JavaScript Framework für Web-Applikationen • seit 2007 (Sencha Touch: 2010) • Verwendet Web Standards (HTML5, CSS3) • Touch Events • MVC • Zugriff auf Datenquellen (AJAX , JSON, Local Storage) • Viele GUI-Komponenten Traildevils Mobile Web-App (X-Platform)

6. Sencha Touch – Hello World <scriptsrc="lib/sencha-touch.js"type="text/javascript"></script> <script type="text/javascript"> newExt.Application({ launch:function(){ newExt.Panel({ fullscreen:true, html:'Hello World!' }); } }); </script> Traildevils Mobile Web-App (X-Platform)

7. Sencha Touch - Component varlist=newExt.List({ store:store, itemTpl:'{firstName} {lastName}', grouped: true, indexBar: true }); Traildevils Mobile Web-App (X-Platform)

8. Ziele • Priorität 1: • Traillisteabhänging vom Standort • Suche/Filterung von Trails • Detailansicht • Trails auf Karte anzeigen • Priorität 2: • Favoritenliste • Offlinefähigkeit • Priorität 0: Neue Technologie kennenlernen :-) Traildevils Mobile Web-App (X-Platform)

9. Demo http://traildevils.rdmr.ch • Unterstützte Browser: • Alle Webkit-fähigen Browser(Chrome, Opera, Safari) • Mobile Browser(iOS, Android, BlackBerry) Traildevils Mobile Web-App (X-Platform)

10. UI Richtlinien Filter/Suche-Textfeld Swipe Options Menu Pull-Down Refresh • Look & Feel von iOS Apps • Dank CSS einfach austauschbar • Vorgaben: Apple, Android, BlackBerry • Orientierung an Standards Traildevils Mobile Web-App (X-Platform)

11. Offlinefähigkeit • Caching der Sourcen (JavaScript, CSS, HTML usw.) • Definition in Manifest-File • Datenablage im Local Storage des Browsers • Key/Value Pairs mit primitiven Datentypen • Problem: Bilder • Umwandlung in Base64 (Data-URL) Traildevils Mobile Web-App (X-Platform)

12. Zukunft • Sencha Touch 2.0 • seit 9. Dezember  3. Preview-Version • Bessere Performance auf Android • Neues Klassensystem • Dynamisches Laden von JavaScript • Sencha.io • Clouddienst für Mobile-Applikationen Traildevils Mobile Web-App (X-Platform)

13. Das müssen Sie wissen(akaLessonslearned) • Sencha Touch macht Spass • JavaScript eher weniger • Grössere mobile Web-Applikationen sind noch nicht «salonfähig» • Es fehlt der native Touch • Zu hohe Reaktionszeiten • Übergangslösung: Hybrid-Apps (z.B. mit PhoneGap) Traildevils Mobile Web-App (X-Platform)

14. Fragen ?