Mobile Zone is brought to you in partnership with:

Max Katz is a Senior Systems Engineer and Developer Advocate at Exadel. Max is a well-known speaker appearing at many conferences, webinars, and JUG meetings. Max leads Exadel’s RIA and mobile strategy. Part of this role is working as developer advocate for Tiggr Mobile Apps Builder (gotiggr.com), a cloud-based application for building mobile Web and native apps for any device. In addition, Max leads Exadel’s open source projects (exadel.org) such as Fiji, Flamingo, and JavaFX Plug-in for Eclipse. Max has been involved with RichFaces since its inception, publishing numerous articles, providing consulting and training, and authoring the book “Practical RichFaces” (Apress, 2008). Max also co-authored the DZone RichFaces 3 Refcard and the DZone RichFaces 4 Refcard. You can find Max’s writings about RIA and mobile technologies on his blog, mkblog.exadel.com, and you can find his thoughts about these topics and others on Twitter at @maxkatz. Max holds a Bachelor of Science in Computer Science from the University of California, Davis and an MBA from Golden Gate University. Max is a DZone MVB and is not an employee of DZone and has posted 64 posts at DZone. You can read more from them at their website. View Full User Profile

We the People API, Creating HTML5 Mobile App Over Lunch

07.22.2013
| 1980 views |
  • submit to reddit

The United States Government is offering 100s of APIs as part of its Next.Data.Gov iteration. As I navigated the site I came across Government APIs page:

2013-07-17_1557

I always love trying new APIs and wanted to see what kind of API “We the People” provides. The API seemed to be pretty straight forward and next I figured let me try and build a mobile app that shows the petitions as well as details for each petition usingAppery.io platform. I literally finished the app within 35 minutes or during my lunch.

Creating the pages

After creating a new app in Appery.io, I designed the Petition page:

2013-07-17_1610Petition list page
  • A List component with a Label inside to display the petition name is used. 

Next is Details page:

detailsPetition details page
  • The Label at the top displays the petition name (only border is shown)
  • The Collapsible Block has three sections:
    • Details – petition texst
    • Signatures – signature threshold, signature cound, and signtaures needed
    • More Info – link to petition page

The last page is Settings (popup):

settingsSettings page
  • Allows to select how many petitions to show

Defining REST API services

Two services are used in this app:

  1. Service to get a list of all petitions
  2. Service to get petition details

The service to get all petitions:

service_petitionsPetitions API

The service has one request parameter to determine how many petitions to load:

service_pettion_requestPetition service request parameters

Service response:

service_responsePetition service response parameters

The other service is to load petition details:

service_detailsPetition details service
  • The {id} is the petition id which was selected

To learn more about We the People API.

Binding services and pages

Once we get all the petitions, we map the data returned to the page:

petition_mapping1Petition service to page mapping

On Details page we show information about a particular petition and thus get the petition id from local storage (it was stored when the petition was selected from the list). Request mapping is shown:

service_mapping_detailsMapping local storage variable to service request

The response mapping for Details page looks like this:

service_mapping2Petition details service mapping to page

Invoking the service

Once the service-page bindings are done, the last step is to invoke the service. For Petitions page, the service is invoked on ‘page load’ event:

petition_invokeInvoking service

For Details page, the service is also invoked on ‘page load’ event.

Testing the app

Testing is as simple as clicking the Test button:

testingTesting the app in browser

It’s as easy to test the app on the device by scanning the QR code.

Publishing the app

Appery.io comes with instance app hosting feature:

hostingHTML5 app hosting

Go ahead and try the app: http://wethepeople.app.appery.io.

An app over lunch?

Yes.

Gone are the days when you had to spend days downloading and configuring dev. tools. Gone are the days when you had to spend days downloading and configure software. With a cloud platform such Appery.io you can quickly build a real HTML5 mobile app, connected to real API, and host the app.

Share on twitterShare on facebookShare on dzoneShare on printShare on emailShare on pdfonlineMore Sharing Services
Published at DZone with permission of Max Katz, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)