2024: Domino Containers - The Next Step. News from the Domino Container commu...
Terence Barr - beyond smartphones - 24mai2011
1. <Insert Picture Here>
Beyond Smartphones:
Rich Applications and Services for the Mobile Masses
Terrence Barr
Senior Technologist, Mobile & Embedded
2. Important Note
"THE FOLLOWING IS INTENDED TO OUTLINE OUR
GENERAL PRODUCT DIRECTION. IT IS INTENDED
FOR INFORMATION PURPOSES ONLY, AND MAY NOT
BE INCORPORATED INTO ANY CONTRACT. IT IS NOT
A COMMITMENT TO DELIVER ANY MATERIAL, CODE,
OR FUNCTIONALITY, AND SHOULD NOT BE RELIED
UPON IN MAKING PURCHASING DECISION. THE
DEVELOPMENT, RELEASE, AND TIMING OF ANY
FEATURES OR FUNCTIONALITY DESCRIBED FOR
ORACLE'S PRODUCTS REMAINS AT THE SOLE
DISCRETION OF ORACLE."
3. Goals Of This Talk
Java ME has all the tools to build rich and compelling
smartphone-like applications -
Learn how to build the basics of a cool, good-looking
social networking mash-up
Note:
Due to time constraints we will glance over many details.
More info and full source code will be online for further
learning.
4. Program Agenda
• Rich Applications for Mass Markets <Insert Picture Here>
• Quick Intros
• UI (LWUIT - Lightweight User Interface Toolkit)
• Search + Map (Mobile Ajax for Java ME)
• Twitter (Twitter API ME + OAuth)
• Demo Scenario and Flows
• Code!
• Appendix
• Q&A
5. Rich Applications for the Mass Market
User Experience Drives Emotion, Satisfaction
• User Experience Matters
• Smartphones have raised the bar
• In todays market, applications and content
must be visually rich and engaging
• Good design drives users satisfaction,
productivity, and ultimately, value
• Going after the numbers
• Java ME-based deployments (~3 billion)
dwarf smartphones
• For many content developers this is where
the bulk of the revenue is
• Java ME lets you deliver to billions
6. What is LWUIT?
Lightweight User Interface Toolkit
• Advanced, lightweight UI library
• Compelling UI
• Consistent across different devices
• For todays handsets (and more ...)
• Portable
• MIDP, Blackberry, Android, CDC, SE, TV, ...
• Inspired by Swing
• Tools support
• Open Source!
• GPLv2 + Classpath Exception, free for commercial use
• Active community
8. LWUIT
Key Benefits
• Rapid development
• Familiar API
• Clean & simple
• Easy deployment
• One jar, many devices
• Consistent & flexible
• Customizable, extendable
• “Filthy Rich” UI
• Brand-able
• Designed for mass market devices
• Tested on broad range of hardware
9. LWUIT
Key Features
• Swing-like MVC
• Layouts
• Fonts
• Rich widgets
• 3D & SVG integration
• Touch screen support
• Animations & transitions
• Pluggable Look & Feel, theming
• I18N/L10N support
• ... more
10. Cross-Platform Content
LWUIT handles many device-specific details
• Identical application code, multiple platforms
Mobile Emulator Sony Ericsson G705 HTC Touch Diamond
12. Mobile Ajax for Java ME
RESTful Web Services For Your Applications
• RESTful Web Services made easy
• Easily consume and integrate RESTful
web services into your mobile app
• Open sourced under BSD license
• Mobile Ajax Libraries
• Streaming atom, JSON,
expression language, async I/O, blog
reading, and more
• Sample Applications
• GPS client, Flickr client, Yahoo! Local
search & mapping, Twitter access,
more
13. Twitter API ME + OAuth
Easy access to Twitter services
• Application authentication and authorization
• OAuth: Open protocol for flexible and secure authentication
and authorization to Internet services
• Increasingly used across the web (Twitter, Facebook,
Yahoo, ...)
• However, an OAuth client is non-trivial to implement
• Twitter API ME makes building Twitter clients easy
• Simple API for Java ME, Android, and BlackBerry platforms
• Register your app with Twitter
• Use the Twitter API ME to log into Twitter and access
authorized resources with a few lines of code
15. Demo Scenario
“Meet Me For Dinner”
• Goal: Build a social networking & LBS mash-up
• Combines several popular web services and device features
(GPS, camera, address book) + compelling UI
• Scenario
• User is in the city, wants to meet up with friends for dinner
• Chooses highly rated restaurant convenient for everyone
• Map
• Current user location
• The locations of nearby friends
• Restaurants in the vicinity
• Directions to selected restaurant overlaid on map
• Send out a geo-located Tweet with restaurant information
• (Optional) Post camera pic, send SMS
16. Demo Functionality
High-Level Application Flow
1. Get current location of user via device built-in GPS
2. Get current locations of friends via 3rd party server
3. Do local business search with keyword
4. Get and display map with markers: user, friends, restaurants
5. Let user browse restaurant details and select a restaurant
6. Get directions to restaurant and overlay in map
7. (Optional) User takes picture of restaurant
8. Tweet “Meet me for dinner” (with optional URL to picture)
9. (Optional) Access device address book and send SMS to
friend(s) without Twitter access
17. Map Screen
• Get locations
• Device location via built-in GPS (JSR 172)
• Friend locations via 3rd party service
• Business POIs via local business search
• Get map centered on user location
• Create LWUIT image from map png, use
as background via custom painter
• For each location create a marker
• Translate lat/long coordinates into pixel
positions in map
• Position marker images (LWUIT labels) in
map using CoordinateLayout
• Display map in LWUIT form
18. Get current location
//Option 1: JSR-179
LocationProvider lp = LocationProvider.getInstance(null);
Location loc = lp.getLocation(10);
QualifiedCoordinates qc = loc.getQualifiedCoordinates();
//Option 2: by CellID (eg Nokia, SEMC, Samsung, OJWC etc)
String cellid = System.getProperty(X_CELLID_PROP_KEY);
restUrl = http://www.opencellid.org/cell/get? [params]
//Send and parse response
//Option 3: Network APIs, provider specific
19. Search business
private static final String APPID = ...
private static String LOCAL_BASE =
"http://local.yahooapis.com/LocalSearchService/V3/localSearch
...
Arg[] args = new Arg[] { ... }; // json, appid, lat, lon, ...
Response response = Request.get(LOCAL_BASE, args, ...);
Result result = response.getResult();
for (i < resultCount) {
poi.address =
result.getAsString("ResultSet.Result["+i+"].Address");
poi.title = ...
...
}
20. Getting the map
private static final String MAP_BASE =
"http://maps.google.com/maps/api/staticmap";
...
String loc = MAP_BASE + "?" + “center=” +
lat + “,” + lon + “&zoom=” + zoom + ... <params> ;
HttpConnection conn = HttpConnection)Connector.open(loc);
InputStream is = conn.openInputStream();
Image mapImage = Image.createImage(is);
21. Pop-Up Dialogs
• Improving the user experience
• Point-and-click access to all relevant information
within Map Screen
• Reduce number of screen transitions
• Transparency maintains visual relationship to map
• LWUIT Dialog
• Modal
• Partly transparent
• Smooth fade-in and fade-out transitions
• Automatic timeout reduces number of user clicks
• Slightly customized (added timeout callback)
22. POI List Screen
• Scrollable list of POIs
• Vertical LWUIT list
• Custom fish-eye renderer
• Unselected item: Single line POI name
• Selected item: Expands to picture, POI
name, and additional info
• “Bevel-raised” border
• Scrolling behavior is “one margin from the
edge” for better legibility
• Smooth pixel-based & kinetic scrolling
out of the box
23. POI Selection and Directions in Map
• When user clicks on restaurant
marker set label state to “selected”
• Show restaurant pop-up, allow user to
select POI
• Get map with directions
• Get route from user to POI, save returned
list of path segments
• Get map image as before, but with
embedded route using path segments
• Update on-screen form
• Replace background map with new map
• Existing markers remain in place
24. Announce Screen
• Pre-populate announcement text
with restaurant details
• User enters meeting time
• Pop up virtual keyboard
• Tweet using Twitter API ME
• Secure log in and authentication (https)
• Post geo-located tweet
• (Optional) Tweet with picture
• Allow user to take picture of restaurant
using JSR 135 (MMAPI)
• Post picture to web service, add URL to
tweet
25. Tweet
private final String ... //0Auth keys and secrets
...
Token token = new Token(oauth_token, oauth_token_secret);
Credential crd = new Credential(key, secret, token);
UserAccountManager uam = UserAccountManager.getInstance(crd)
uam.verifyCredential();
...
TweetER tweeter = TweetER.getInstance(userAccMgr);
Tweet tweet = new Tweet(message, tweetLocation);
tweeter.post(tweet);
26. (Optional) Send SMS
• Friends might not have Twitter access
• Use SMS as notification mechanism
• Access phone book to get phone numbers of friends
• Using JSR 75 (PIM)
• Send SMS with info similar to tweet
• Use JSR 205 (WMA)
27. Additional Ideas
Spice it up!
• Splash screen, animations (marker selection, pop-up
animation, POI details bubble, list scrolling, ...)
• Map zooming and scrolling
• Moving map (real-time tracking of user location)
• Integration with HTML/XHTML content
• Integration with other web services (fire eagle,
foursquare, etc)
• Integrate with payment, advertising
• Deeper integration with platform features (e.g. Nokia
gesture API, SonyEricsson JSR-211/CHAPI, etc)
• ...
28. Summary
It's not always about smartphones
• The Mass Market is where the numbers and the
revenue for many developers are
• You can deliver smartphone-like applications and user
experiences to mass market phones
• LWUIT makes creating and deploying rich and
compelling user interfaces easy
• Mobile Ajax libraries enable you to access and
consume a variety of popular web services easily
• Twitter API ME makes building Twitter clients a snap
• Get started today!
29. Where To Find Out More
Resources
• Full project sources on my blog:
http://terrencebarr.wordpress.com/2011/05/06/beyond-
smartphones-source-code-video-released/
(or search for “Beyond Smartphones”)
• LWUIT article and info:
http://tinyurl.com/2erwc3x
• Mobile Ajax project:
http://meapplicationdevelopers.dev.java.net/mobileajax.html
• Twitter API ME:
http://kenai.com/projects/twitterapime/pages/Home
30. Thank You!
Q&A
PS: Thanks to
• Ernandes Mourão Júnior for Twitter API ME
• Ronan O. Ciosoig for review and input