Rapid Mobile App to API Integration

This article originally posted on SOA Software blog by Ryan Bagnulo

Register to attend the web lecture on this topic at 1 PM ET on August 26, 2014.

Wireframes for user interface design are still a good idea when communicating requirements to others, however lately I would rather create them as a HTML5 prototype that is usable across heterogeneous devices with various screen sizes and resolutions. One such tool that I prefer is from Appery.io, which is a browser based jQuery and PhoneGap powered mobile application development studio. Appery.io offers a faster path to publish an application in an App Store because once the HTML5 prototyping, user acceptance testing and usability work is complete, it can also generate the Android apk and IOS binaries without the need to port to Objective C manually. This feature alone is a major time saver, and so is the drag and drop JSON API response test message to UI component designer that creates a wireframe that will also generate the runtime code.

Let’s say you have your APIs ready to consume and you know what data elements need to be displayed to the user. Perhaps some of the APIs are SOAP/XML and others are REST/JSON and they are secured with different authentication protocols.

To simplify the user interface design process, let’s agree to transform the SOAP services to REST APIs using an API Gateway to also transform the XML to/from JSON. Then configure the API gateway to mediate the authentication on the client app side from OpenID & OAuth to the various different security protocols required for the downstream APIs being consumed. This avoids the need to require different credentials for each API in the client application code, and improves the security of the system by limiting the connections to the APIs to only the API gateways, greatly reducing the attack vector and lowering the risk of system outages and malformed requests that reach the application/data tier.

Now that security and API transformation is in place, we are ready to begin mobile application client development. First the developer will request an application ID and secret from the API developer portal that is linked to the API gateway cluster’s policy decision point. The app id will be used in an Authorization header by the client app in order to begin the OAuth process to authenticate the user and receive a token, thus avoiding the need to send user credentials with each API call and simplifying the authorization process to restrict which API operations can be used based on the “scope” of the token. The user will only be prompted to authenticate when the token has expired and there is no valid refresh token.

When creating the HTML5 client application using Appery.io the process is to first configure a GET API request for an authorization code from the OAuth server then to submit a POST request for the access and refresh tokens. These values will be parsed and stored into variables that can later be accessed using JavaScript to insert the tokens into the Authorization header for each subsequent API call that the application will make.

Next add the APIs that will be used by the application to retrieve the data requested by the user of the mobile app and save the response of each test call. After placing the fields on the canvas that will display the data returned, the data tab of the UI designer is used to visually wire (drag and link) the field in the JSON response payload to the field on the user interface that will display that string of text. Once all of the input and output fields are mapped, test the app to view the HTML5 version in your browser using the QR code that links to the app sandbox URL. In under an hour you’ve now got alpha wireframes and a secured prototype that is ready to share.

Experiment with portrait vs landscape given that not all users share the same perspective and adjust for inconsistencies across device type. Begin the UAT process and iterate iterate iterate.

Appery.io and SOA Software are partnering because SOA makes it easy to configure the API security properly and the SOA policy manager and API gateway make it easy to debug the API requests, and the Community Manager API portal is a turnkey solution that will generate client application IDs that are linked to SLA Quality of Service policies with reports to track how the mobile apps are consuming the various APIs.

Register for Appery.io/SOA Software joint webinar 

Accelerating Digital Transformation with Integrated APIs and Rapid Mobile Development

Tuesday, August 26th, 2014 – 10 AM Pacific Time/1PM Eastern

Register now

Webinar: Accelerating Digital Transformation with Integrated APIs and Rapid Mobile Development

What

Join Ryan Bagnulo from SOA Software and Max Katz from Appery.io to learn more about the integrated mobile development and API management offering.

As digital transformation initiatives are gaining momentum within enterprises, both business and technical stakeholders seem to be pulled in different directions on whether to adopt a “mobile first” strategy or an “API first” strategy. Today, the processes for managing APIs and building the apps that consume them are disjointed and siloed, introducing complexity and slowing innovation. SOA Software and Appery.io have joined hands to offer an end-to-end solution that provides an integrated experience that goes from exposing and managing APIs to building cross-platform mobile apps. The integrated platform delivers faster time-to-market and results in increased developer adoption.

You will learn

  • The real world challenges in getting started with an API journey in the enterprise
  • The obstacles in developing cross-platform Mobile Apps
  • The value of having an integrated API Management and Mobile development environment

When

Tuesday, August 26th, 2014 – 10 AM Pacific Time/1PM Eastern

Attend

Register now

Video: Using PhoneGap APIs in Appery.io App

The video shows how to use PhoneGap API when building a mobile app in Appery.io. The video demonstrates the following APIs:

  • Beep (sound)
  • Notification
  • Geolocation
  • Barcode scanner
  • Camera
  • Accelerometer

Learn How to Debug Appery.io Mobile Apps [Video]

This video shows how to debug a mobile app created in Appery.io using Chrome browser Dev. Tools:

  • Using the Console tab for JavaScript errors, output messages and running simple JavaScript commands
  • Using the Network tab for service invocation
  • Inspecting local storage
  • Inspecting app code
  • Using built-in JavaScript debugger
  • Using Weinre remote debugger – to debug a native app installed on the device

Webinar: Learn How To Debug Mobile Apps Created in Appery.io

What
Debugging Best Practices with Appery.io

When
Wednesday, June 25, 11am Pacific Time

What you will learn
Learn How To Debug Mobile Apps Created in Appery.io

Register
Register for this webinar

Using Appery.io Backend Services to Build a To-do Mobile App [Webinar recording]

This video shows:

  • Using Appery.io visual UI builder to create app UI with HTML5/jQuery Mobile:
    • Page template with sliding Panel component
    • Tasks list page
    • New task page
    • Details task page
  • Creating cloud database for storing To-do items
  • Connecting pages to database via REST API services
  • Testing the app in the browser
  • Publishing the app to a custom URL
  • Packaging the app for Android