The document outlines the development and features of the Wikipedia mobile app, which utilizes PhoneGap to create a hybrid web application compatible with multiple mobile platforms. Key features include community translations, geo-location of articles, and an open code base, while the app aims for continuous improvement and broader platform support. Additionally, it provides resources for developers and instructions on how to participate in the project.

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