11436 SSO

Building a Native iOS App using Trigger.io and Apigee

Amir Nathoo
Oct 09, 2012

Amir Nathoo is co-founder and CEO of Trigger.io. Having spent years developing apps himself and middleware software at IBM before that, he founded Trigger.io to create the best platform for mobile app development. He is passionate about helping developers and enterprises navigate the shift to mobile. We thank Amir for giving Apigee App Services a try and for sharing his experiences in this guest blog post.

The shift to mobile makes it necessary for enterprises to change the way they engage their customers – we see this all the time with new consumer services such as Uber and Exec disrupting older models. So the imperative and opportunity is to enable enterprises to reach their customers through new types of mobile apps.

Trigger.io allows enterprises to reuse their existing web skills and investments to create native mobile apps while Apigee provides a Backend as a Service (BaaS) solution to make app-building faster and easier and allow 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 backend in just a few minutes using Trigger.io with Apigee. We recently created just such an app - a native iOS app with a remote data store without ever provisioning a server or writing a line of Objective-C!

This post summarizes the steps we took. You can find the Source Code for our Messagee app on Github, and the Tutorial, which describes how to:

  • Get started with Trigger.io and Apigee App Services
  • Create 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 - in this case a native top bar
  • Adding native mobile features like contacts access and SMS

What we built

We created an example app called Messagee with Trigger.io. It's a simple HTML5 Twitter clone that uses Apigee’s HTML example code. We tested our app in the iOS emulator. We also added native mobile UI components and other native mobile features.


Getting started

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

By clicking ‘Create’ in the Trigger.io Toolkit, entering ‘Messagee’ as the app name and selecting the default location, we quickly created our simple HTML5 Twitter clone app.

To get the example code running with Trigger.io, we copied the Messagee HTML code (available on github) into the app’s ‘src’ subdirectory. Then a few small code changes, and in just a few minutes we had the app running in the iOS emulator. At this point we could create an account in the app, compose a new message for our stream and try it out!

API Design - Third Edition

Apigee makes remote data storage simple

At this point, we’ve created a remote data store using Apigee without provisioning a server of our own; we’ve created a native iOS app that’s now running in the emulator using HTML/CSS /JavaScript; and we haven’t written a line of Objective-C!

The app uses jQuery Mobile to handle various UI elements and navigation and uses the Apigee JavaScript SDK to make accessing a remote data store simple. (The SDK is a collection of classes designed to make working with the Apigee App Services API as easy as possible.) Using the JavaScript SDK, setting up your data objects takes just a few lines of code and no server-side configuration.

//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"});

Adding native mobile UI components - a native top bar

With the basic HTML5 example app running with Trigger.io, we quickly added native mobile UI components. In this case, with a few configurations and calls to the Trigger.io’s Forge platform APIs, we replaced the jQuery mobile title bar with a genuine native top bar element.

Adding native mobile features - select a contact and SMS

Using the Trigger.io Forge, and with a few lines of JavaScript code, we can quickly add and enable powerful native features. In this case, we enabled a new ‘Post & SMS’ button - 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 it!

In just a few short steps, using our existing Web skills, no server-side code, (in fact, with not too many lines of code at all), we’ve built an enterprise mobile app  with a remote data store!

Find the full source code for the project on github and a full tutorial here.

This blog post is part of a series about Apigee’s new App Services.
Sign up for App Services today and join our community! We look forward to seeing what you build with Apigee.

API Management Decision-Making Kit

Next Steps


Resources Gallery