This presentation is created for PhoneGap Meetup San Francisco, held on May 22, 2014. It describes how you can develop a Twitter client using PhoneGap/Cordova framework, and using Monaca as a development platform. Includes source code with description. Uses Onsen UI CSS Components, jsOAuth, underscore, micro templating, and other techniques to develop a nice & beautiful UI. For more details about Monaca, please come to the Website: http://monaca.mobi/

1. Get Help Building Your
PhoneGap Hybrid App
Overview and Workshop
May 22, 2014
MASAHIRO TANAKA
FOUNDER & CEO, MONACA
The Official PhoneGap Meetup :: SF Bay Area

2. Venue provided by Adobe.

3. Who am I?
Masahiro Tanaka
Founder & CEO, Monaca
Twitter: @massie
E-mail: masahiro@asial.co.jp
Recent books and magazines:

4. PhoneGap company.
Official docs
translations.
#1 PG community
In Japan.
Cloud IDE

5. What’s HOT in PhoneGap?

6. No.1Platform: PhoneGap

7. Why PhoneGap?
 Open & standard technology.
 Allows greater access to mobile
development.

8. Today’s Workshop
Twitter Client from Onsen CSS Components:
http://components.onsenui.io/

9. Using Twitter API
Useful resource: https://dev.twitter.com/docs/api/1.1
 Twitter opens all features.
 All APIs are RESTful (Ajax), but requires auth.
 Be careful about # of request has limitation.
Example: Timeline
https://dev.twitter.com/docs/api/1.1/get/statuses/mentions
_timeline
Example: Specific user
https://api.twitter.com/1.1/statuses/user_timeline.json?scree
n_name=monaca_io&count=20

10. Run on your device now!
Here, I will use Monaca for quicker start.
http://monaca.mobi/
Please access and signup (forever free):
You can also use your Cordova environment.

11. Install debugger app
Find and install
“Monaca”

12. Import the project
Open dashboard, and click New Project.
Then, import from the following URL:
https://github.com/monaca/sample-twitter-client

13. Edit index.html
Open index.html and replace consumer key and
secret to your Twitter API key and secret.

14. Run It!

15. Code Reading
 oAuth handling
 jsOAuth (http://bytespider.github.io/jsOAuth/)
 Micro templating
 Underscore.js (http://underscorejs.org/)
Important keywords for code reading:

16. Want a native-like UI for
your PhoneGap app?
1. Performance oriented.
2. Web-component based.
3. Fully customizable.
4. Android 2.3, multi-screen.
http://onsenui.io/

17. Thank you.
Check @monaca_io to download this slide
and the source code.

18. Contest runs until June 30, 2014