Trigger.io and Apigee enable fast mobile app development for the enterprise

The shift to mobile makes it necessary for enterprises to change the way they engage their customers – we see the opportunity all the time with new consumer services such as Uber and Exec disrupting older models. To keep up, enterprises need to find ways to reach their customers through new types of applications.

Trigger.io allows enterprises to reuse their existing web skills and investments to create native mobile apps while Apigee enables “business-as-service” – allowing an enterprise’s business value to be consumed by their customers in new ways through APIs.

You can create a native mobile app for iOS, Android or Windows Phone using an enterprise-ready back-end in just a few minutes using Trigger.io with Apigee.   

We recently created such an app. This blog post summarizes the steps we took. We’ll cover:

  • Getting started with Trigger.io and Apigee’s App Services data store
  • Creating a simple mobile app using Apigee’s HTML5 example code with Trigger.io and testing it in the iOS emulator
  • Adding native mobile UI components such as a topbar
  • Adding native mobile features like contacts access and SMS

Let’s get started…

Setting up Trigger.io with Apigee

Getting started is as simple as signing-up for both Trigger.io and Apigee’s App Services service for free.  Then download and start the lightweight Trigger Toolkit.

We’ll create an example app called Messagee – a simple HTML5 Twitter clone. We’ll get it running as a native mobile app that can be submitted to the App Store or Google Play. To do this you need to:

  1. Click ‘Create’ in the Trigger.io Toolkit, entering ‘Messagee’ as the app name and selecting the default location.

     You’ll now be able to see the app in the homepage of the Toolkit with the path to the code location.

  2. To get the example code running with Trigger.io you need to copy the code into your app’s ‘src’ subdirectory while keeping the ‘src/config.json’ and ‘src/identity.json’ files that were automatically created.

    To do this, open up a terminal navigate to the app directory and run the following commands:

    cd src
    mv identity.json ..
    mv config.json ..
    rm -rf *
    git clone https://github.com/apigee/usergrid-sample-html5-messagee .
    mv ../identity.json .
    mv ../config.json .
  3. Make one code change to the index.html file that you cloned from the GitHub repos to customize it for your account. That file should now be in ‘src/index.html’ and you need to change one line to reference your Usergrid app. For example:
    Usergrid.ApiClient.init('amirnathoo', 'sandbox');

  4. Build the app and see it in the emulator. 

    With a Mac, all you have to do is click on the app name in the toolkit and the click on the ‘iOS’ link to kick off the Trigger.io build and run the app in the emulator which takes just a few seconds. But even on Windows, you can still build / test on an iOS device with a little more setup. 

    After just a few minutes we already can see the app running in the iOS emulator:

Create an account in the app, compose a new message for your stream and try it out!

Apigee makes remote data storage simple

Ok now we have the app up and running in the emulator let’s take a look at the code.

The app using jQuery Mobile to handle various UI elements and navigation and Apigee’s JavaScript SDK to make accessing a remote data store simple.

You can see the JavaScript SDK in the usergrid.appSDK.js file. This makes it super simple to store and retrieve data from the Apigee backend. For example, in app.js, setting up your data objects takes just a few lines and no server-side configuration using Apigee’s JavaScript SDK:

//a new user object
var appUser = new Usergrid.Entity('user');
//a new Collection object that will be used to hold the full feed list
var fullActivityFeed = new Usergrid.Collection("activities");
//make sure messages are pulled back in order
fullActivityFeed.setQueryParams({"ql":"order by created desc"});
//default to full feed view
var fullFeedView = true;
//a new Collection object that will be used to hold the user's feed
var userFeed = new Usergrid.Collection('users/me/feed');
//make sure messages are pulled back in order
userFeed.setQueryParams({"ql":"order by created desc"});

Then later in the code we can see it reading from the user’s feed and using the data to render the HTML:

//get the users feed
userFeed.get(
	function(){
		drawMessages(userFeed);
		if (userFeed.hasPreviousPage()) {
			$("#previous-btn-container").show();
		} else {
			$("#previous-btn-container").hide();
		}
		if (userFeed.hasNextPage()) {
			$("#next-btn-container").show();
		} else {
			$("#next-btn-container").hide();
		}
	},
	function(){
		$("#messages-list").html("There was an error getting the messages!");
	}
);

function drawMessages(feed) {
  var html = "";
  var usersToBind = [];
  feed.resetEntityPointer();
  while(feed.hasNextEntity()) {
    var message = feed.getNextEntity(),
      created = message.get('created'),
      content = message.get('content'),

...

Let’s reiterate: you have created a remote data store using Apigee without ever needing to provision a server of your own, and you’ve created a native iOS app that’s now running in the emulator using HTML / CSS / JavaScript and not a hint of Objective-C in sight!

Pretty cool…

Adding Native Mobile Features

It gets even better – now that you have the basic HTML5 example app running with Trigger.io you can add native mobile features to it.

For example, you may want to replace the jQuery mobile titlebar with a genuine native topbar element. Here’s how to do this with Trigger.io’s Forge platform:

  1. Firstly, let’s enable the native modules we need in src/config.json. We’ll add the topbar, contact and sms modules. You can do that easily by checking the right boxes in your app’s App Config tab in the Trigger.io Toolkit:
  2. Now let’s remove the existing jQuery Mobile header – that isn’t really native, just HTML and CSS faked to look close to native. So let’s remove all div elements with data-role=”header” in index.html, like this one:
  3. <div data-role="header" data-theme="b">
    	<h1>Messagee</h1>
    	<a href="#login" id="btn-logout" data-role="button">Logout</a>
    	<a href="#page-update-account" id="btn-show-page-update-account" data-role="button" data-icon="gear" data-rel="dialog" data-transition="fade">Settings</a>
    </div>
    
  4. Then we can add controls for the native header in our JavaScript at the bottom of app.js.

    Notice how we add buttons to the native topbar using the Trigger.io Forge JavaScript API and can set the styling and callback functions:

    function addTopbarButtons() {
    	forge.topbar.addButton({
    		text: "Logout",
    		position: "left"
    	}, function (button) {
    		logout();
    	});
    	forge.topbar.addButton({
    		text: "Settings",
    		position: "right"
    	}, function () {
    		window.location = "#page-update-account";
    		forge.topbar.removeButtons();
    	});
    }
    
    forge.topbar.setTitle('Messagee');
    forge.topbar.setTint([57, 107, 158, 1]);
  5. Finally we need to add and remove the buttons according to navigation within the app. Search app.js for places where we set window.location and use the Trigger.io Forge API to remove the buttons where we navigate away from the main feed page and add them back when we navigate to it e.g.
    window.location = "#page-login";
    forge.topbar.removeButtons();
    
    window.location = "#page-messages-list";
    addTopbarButtons();

Great! You’re ready to test the app again – if you run the app in the iOS emulator by clicking the iOS link in the Trigger.io Toolkit and logging in, you’ll see the native topbar with buttons like in the screenshot at the top of this post.

Adding contact selection and SMS features

Now let’s add an option so that when a user posts a new message to their feed they can also send the same message by SMS to one of their contacts.

That’s super simple with Trigger.io Forge – we’ve already enabled the contact and SMS modules in the App config tab in the Toolkit. So all we need to do is:

  1. Add a new ‘Post & SMS’ button to the create new message view by modifying index.html:
    <div data-role="page" data-theme="b" id="page-new-message">
    	<div data-role="content">
    		<form name="login" id="login-form">
    			<label for="content">Message (150 Chars max)</label>
    			<textarea id="content" class="input-xlarge" rows="3" style="margin: 0px; width: 100%; height: 125px; "></textarea>
    		</form>
    		<div style="width: 100%;">
    			<button id="post-sms-message">Post &amp; SMS</button>
    		</div>
    		<div style="width: 50%; float: right">
    			<button id="post-message">Post</button>
    		</div>
    		<div style="width: 50%; float: right">
    			<a href="#page-messages-list" id="btn-close-new-message" data-role="button">Cancel</a>
    		</div>
    	</div>
    </div>
    
  2. Then let’s add the JavaScript needed to enable that button – these are powerful native features we’re adding but look how few lines of code it takes:
    function postSMSMessage() {
    	forge.contact.select(function(contact) {
    		forge.sms.send({
    			body: $("#content").val(),
    			to: contact.phoneNumbers[0].value
    		}, function () {
    			alert("Message sent");
    			postMessage();
    		});
    	}, function() {
    		postMessage();
    	});
    }
    
    $('#post-sms-message').bind('click', postSMSMessage);

That’s it

In just a few short steps we’ve built an enterprise mobile app using Trigger.io and Apigee!

You can get started now by signing up for free.

The final code for the Messagee app with the native features described here is available on Github.

What’s next?

If you like what you’ve read and would like to keep going, here are a few things to try:

  • How about replacing the jQuery Mobile buttons to navigate between the feeds and settings view with a native tabbar component.
  • Try testing the app on an actual iOS device rather than just the emulator to see the phone contacts and SMS access live. That’ll require you to setup an Apple developer account and configure your provisioning profile and certificate in the Local config tab in the Trigger.io Toolkit

Any problems at any point? Check out the Trigger.io tutorials, the Catalyst debug tool or contact support@trigger.io for fast help.