Get Help Building Your

PhoneGap Hybrid App

Overview and WorkshopMay 22, 2014

MASAHIRO TANAKA

FOUNDER & CEO, MONACA

The Official PhoneGap Meetup :: SF Bay Area

Venue provided by Adobe.

Who am I?

Masahiro TanakaFounder & CEO, Monaca

Twitter: @massie

E-mail: masahiro@asial.co.jp

Recent books and magazines:

PhoneGap company.Official docs

translations.

#1 PG community

In Japan.

Cloud IDE

What’s HOT in PhoneGap?

No.1Platform: PhoneGap

Why PhoneGap?

Open & standard technology.

Allows greater access to mobile

development.

Today’s Workshop

Twitter Client from Onsen CSS Components:

http://components.onsenui.io/

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?screen_name=monaca_io&count=20

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.

Install debugger app

Find and install

“Monaca”

Import the project

Open dashboard, and click New Project.

Then, import from the following URL:

https://github.com/monaca/sample-twitter-client

Edit index.html

Open index.html and replace consumer key and

secret to your Twitter API key and secret.

Run It!

Code Reading

oAuth handling

jsOAuth (http://bytespider.github.io/jsOAuth/)

Micro templating

Underscore.js (http://underscorejs.org/)

Important keywords for code reading:

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/

Thank you.

Check @monaca_io to download this slide

and the source code.

Contest runs until June 30, 2014