Max Katz

DevRel & No-Code

May 21, 2012

jQuery Mobile App In Tiggzi Connected to Kinvey Backend

Kinvey is one of those services that makes building mobile backend way too simple. If you combine Kinvey with a cloud-based app builder Tiggzi, you get everything you need to build an awesome mobile app using cloud services. Let me show you what I mean.

To start, sign up for Kinvey, it’s free and then create your first app backend. We re going to create a backend for beers(!).

Next, create a new collection where we are going to store names of beer we like:

Open the collection. When you open it for the first time it will be empty so we need to define at least one column and enter some data. Click on +Col, and add Name column. Then add a few sample entries by clicking +Row. You can simply double click in Name column to enter values (you don’t need to enter anything for _id or _acl).

That’s pretty much all you need to do. Simple, right?

Let’s now go to Tiggzi app builder and create a jQuery Mobile app.

We will first build the UI with jQuery Mobile:

Next, we are going to add two REST services. Once service for getting all the beers (BeerGet), and one service for creating a new beer (BeerPost).

This is BeerGet service URL:

For Kinvey to know who we are, we need to add Authorization header parameter:

Note you can also calculate the Authorization value in run time.

We can test the service to make sure it works:

Right from the Test window, we can automatically define service’s JSON output structure by clicking on Populate Response Structure button:

For BeerPost service, the service URL is the same but instead of GET we now do POST. As we also need to send the new beer name, we have to add Name request parameter:

Adding both services to the page:

Two more things we are left to do. First is to map services to UI, and second invoke the services. Let’s do the mapping.

When the page loads, we want to get the list of all current beers so we are mapping BeerGet first.

There is nothing we need to map on input (Authorization header is already set). Output mapping looks like this:

Before we can test the app, we need to invoke the service on page load.

We can test in the browser or on the actual mobile device:

Here is how it looks:

Let’s now work on adding a new beer.

Mapping BeerPost to the UI. We are getting the new beer name and mapping it to service’s input.

We don’t need to worry about mapping the response (in this example). You do get back JSON that contains the object id that was created.

Next, we need to invoke the service on button click:

The last thing we need to do is show the updated list once a beer was added. To do that, we want to invoke BeerGet service once BeerPost finished successfully. We are going to use BeerGet success event to invoke BeerGet: