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

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

7. 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

8. 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

9. 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

10. WIKIMEDIA MOBILE APP AND
PHONEGAP

11. App Features and Roadmap
• http://meta.wikimedia.org/wiki/Mobile_Proje
cts/App_Features_%26_Roadmap

12. 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.

13. PhoneGap
• Has community
to provide
useful Plug-ins
and Tools.

14. PhoneGap Supported Platforms
• Android • Windows Phone
• iOS • Symbian
• BlackBerry • Bada
• webOS • Mac OS X

15. 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.

16. 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.

17. 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

18. WIKIPEDIA MOBILE APP
PROJECT CODE

19. 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.

20. 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

21. 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.

22. 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

23. How to join the Project?
• http://meta.wikimedia.org/wiki/Mobile_Proje
cts/Contribute

24. Thank You!
Ted Chien
Secretary, Wikimedia Taiwan
htchien@wikimedia.tw