Download
1 / 14
140 likes | 273 Views
This presentation discusses the Traildevils Mobile Web App, developed using X-Platform technology, server-side PHP, and client-side Sencha Touch (JavaScript). Key topics include app goals such as location-based trail lists, search/filter functionalities, and offline capabilities. The architecture relies on web standards (HTML5, CSS3), and important UI guidelines are addressed, focusing on mobile usability. The app supports all WebKit-based browsers and is designed to provide a smooth user experience. Future developments will explore performance enhancements and cloud services.
E N D
16. Dezember 2011 TraildevilsMobile Web-App Stefan Oderbolz Jürg Hunziker X-Platform
Agenda • Technologie • Server: PHP • Client: Sencha Touch (JavaScript) • Ziele • Demo • UI Richtlinien • Offlinefähigkeit • Zukunft Traildevils Mobile Web-App (X-Platform)
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)
System-Architektur Traildevils Mobile Web-App (X-Platform)
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)
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)
Sencha Touch - Component varlist=newExt.List({ store:store, itemTpl:'{firstName} {lastName}', grouped: true, indexBar: true }); Traildevils Mobile Web-App (X-Platform)
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)
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)
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)
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)
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)
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)
Fragen ?
