Wikipedia Mobile App with PhoneGap

  • 3,373 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,373
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Wikipedia Mobile App with PhoneGap Ted Chien Secretary, Wikimedia Taiwan htchien@wikimedia.tw
  • 2. Agenda• Wikipedia and Mobile• Wikipedia Mobile and PhoneGap• PhoneGap Resources• Wikipedia Mobile App Project• How to Join the Project?
  • 3. WIKIPEDIA AND MOBILE
  • 4. Wikipedia on Mobile (Early Stage) • HTML & WML hybrid webserver.
  • 5. Search Results & Browsing
  • 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. 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. 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. WIKIMEDIA MOBILE APP ANDPHONEGAP
  • 10. App Features and Roadmap• http://meta.wikimedia.org/wiki/Mobile_Proje cts/App_Features_%26_Roadmap
  • 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. PhoneGap • Has community to provide useful Plug-ins and Tools.
  • 13. PhoneGap Supported Platforms• Android • Windows Phone• iOS • Symbian• BlackBerry • Bada• webOS • Mac OS X
  • 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. 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. 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. WIKIPEDIA MOBILE APPPROJECT CODE
  • 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. 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. 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. 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. How to join the Project?• http://meta.wikimedia.org/wiki/Mobile_Proje cts/Contribute
  • 23. Thank You! Ted ChienSecretary, Wikimedia Taiwan htchien@wikimedia.tw