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.
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 here to attend the web lecture on this topic at 1 PM ET on August 26, 2014.