Wikipedia Mobile App with       PhoneGap           Ted Chien  Secretary, Wikimedia Taiwan    htchien@wikimedia.tw
WIKIPEDIA AND MOBILE
Wikipedia on Mobile    (Early Stage)          • HTML & WML hybrid            webserver.
Search Results & Browsing
Wikipedia Mobile App - iPhone           • Open code base           • Translated to over 25+ languages             through ...
New Mobile Gateway in 2011           • Ruby Based, open sourced.           • Collapsible Sections.           • Works on to...
Next Step• Continue to improve Mobile Gateway.• Wikipedia Mobile App on all Mobile Platforms.  – Wikipedia Mobile 1.0 for ...
WIKIMEDIA MOBILE APP ANDPHONEGAP
App Features and Roadmap• http://meta.wikimedia.org/wiki/Mobile_Proje  cts/App_Features_%26_Roadmap
PhoneGap• Apache S.F. project: Apache Callback (Oct.  2011).• Free open source Web Standards framework.• New FreeBSD & MIT...
PhoneGap           • Has community             to provide             useful Plug-ins             and Tools.
PhoneGap Supported Platforms•   Android       •   Windows Phone•   iOS           •   Symbian•   BlackBerry    •   Bada•   ...
Why PhoneGap?• Easy to create WebApp with native features  and deploy to native App Stores.• Consistence UI behavior on mo...
Why PhoneGap?• Tech support from nitobi (now Adobe) is  responsive.• PhoneGap is open sourced on GitHub, thus  their code ...
PhoneGap Resources• How to Start:  – http://phonegap.com/start• API Reference:  http://docs.phonegap.com/en/1.2.0/index.ht...
WIKIPEDIA MOBILE APPPROJECT CODE
Wikipedia Activity• assets/www/index.html  – Includes JS frameworks to use.  – Includes PhoneGap plug-ins.  – Includes app...
Wikipedia App Logic• NearByMe: assets/www/js/geo.js  – Directly executes NearMePlugin to start the    NearMeActivity in An...
Wikipedia App Logic• Settings: assets/www/js/settings.js• Select Text: assets/www/android/platform.js  – Directly executes...
How to join the Project?• http://meta.wikimedia.org/wiki/Mobile_Proje  cts/Contribute
Thank You!         Ted ChienSecretary, Wikimedia Taiwan  htchien@wikimedia.tw
Wikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGap
Wikipedia Mobile App with PhoneGap
Upcoming SlideShare
Loading in...5
×

Wikipedia Mobile App with PhoneGap

3,608

Published on

Presentation on Wikimedia Mobile App for Android and the PhoneGap open source cross-platform framework.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,608
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Wikipedia Mobile App with PhoneGap

  1. 1. Wikipedia Mobile App with PhoneGap Ted Chien Secretary, Wikimedia Taiwan htchien@wikimedia.tw
  2. 2. Agenda• Wikipedia and Mobile• Wikipedia Mobile and PhoneGap• PhoneGap Resources• Wikipedia Mobile App Project• How to Join the Project?
  3. 3. WIKIPEDIA AND MOBILE
  4. 4. Wikipedia on Mobile (Early Stage) • HTML & WML hybrid webserver.
  5. 5. Search Results & Browsing
  6. 6. Wikipedia Mobile App - iPhone • Open code base • Translated to over 25+ languages through community translations. • Geo-location of articles. • Over 150,000 downloads each month. • Download from iTunes Store: http://itunes.apple.com/app/wik ipedia-mobile/id324715238
  7. 7. New Mobile Gateway in 2011 • Ruby Based, open sourced. • Collapsible Sections. • Works on tons of cell phones. • Active community improving code base. • Available for 35+ Wikipedia projects. • Project URL: http://tinyurl.com/4uykd6e
  8. 8. Next Step• Continue to improve Mobile Gateway.• Wikipedia Mobile App on all Mobile Platforms. – Wikipedia Mobile 1.0 for Android scheduled for end/November, 2011. – More platforms to come….• More information – Wikimedia Mobile Projects: http://meta.wikimedia.org/wiki/Mobile_Projects
  9. 9. WIKIMEDIA MOBILE APP ANDPHONEGAP
  10. 10. App Features and Roadmap• http://meta.wikimedia.org/wiki/Mobile_Proje cts/App_Features_%26_Roadmap
  11. 11. PhoneGap• Apache S.F. project: Apache Callback (Oct. 2011).• Free open source Web Standards framework.• New FreeBSD & MIT license.• Based on HTML5/CSS3/JavaScript.• Build app once, deploy to multiple mobile platforms.• Support native features.
  12. 12. PhoneGap • Has community to provide useful Plug-ins and Tools.
  13. 13. PhoneGap Supported Platforms• Android • Windows Phone• iOS • Symbian• BlackBerry • Bada• webOS • Mac OS X
  14. 14. Why PhoneGap?• Easy to create WebApp with native features and deploy to native App Stores.• Consistence UI behavior on more mobile platforms.• HTML5/CSS3/JavaScript are supported on most platforms.• Can debug the code with Chrome DevTools, Apple Web Inspector or PhoneGap Weinre.
  15. 15. Why PhoneGap?• Tech support from nitobi (now Adobe) is responsive.• PhoneGap is open sourced on GitHub, thus their code is very easy to be verified.
  16. 16. PhoneGap Resources• How to Start: – http://phonegap.com/start• API Reference: http://docs.phonegap.com/en/1.2.0/index.ht ml• Wiki: http://wiki.phonegap.com
  17. 17. WIKIPEDIA MOBILE APPPROJECT CODE
  18. 18. Wikipedia Activity• assets/www/index.html – Includes JS frameworks to use. – Includes PhoneGap plug-ins. – Includes app logic. – Includes platform-specific codes. – Defines main UI, and initialize with main.js. – Defines app menu items.• assets/www/app.css – Defines main UI styles.
  19. 19. Wikipedia App Logic• MediaWiki API: – assets/www/js/mediawiki.js – http://www.mediawiki.org/wiki/API• Search: assets/www/js/search.js• Bookmarks: assets/www/js/bookmark.js• History: assets/www/js/app_history.js
  20. 20. Wikipedia App Logic• NearByMe: assets/www/js/geo.js – Directly executes NearMePlugin to start the NearMeActivity in Android and shows nearby Wikipedia geo-locations (WikiItemizedOverlay). Then do related actions in Android. – Get returned result from Android in NearMePlugin and callback to PhoneGap JS engine to show the Wikipedia article in WebView.• You need to get GMap API key first so you can see details in MapView.
  21. 21. Wikipedia App Logic• Settings: assets/www/js/settings.js• Select Text: assets/www/android/platform.js – Directly executes SelectTextPlugin in Android to select the text on WebView.• Share page: assets/www/android/platform.js – Directly executes Share plugin in Android to share the web page URL.• About: assets/www/js/main.js
  22. 22. How to join the Project?• http://meta.wikimedia.org/wiki/Mobile_Proje cts/Contribute
  23. 23. Thank You! Ted ChienSecretary, Wikimedia Taiwan htchien@wikimedia.tw

×