Guest post: Building mobile apps with Tiggzi Platform

Max Katz, head of Tiggzi's Developer Relations shows us how to build a jQuery mobile app using a cloud-based mobile app builder.

Introduction to Tiggzi Platform

Tiggzi is a powerful cloud-based mobile app platform that provides the following:

100% Cloud

Tiggzi is a cloud-based service. There is nothing to download, install or update which makes it very fast and easy for developers to start building mobile apps entirely in the browser.

HTML5, hybrid apps, and Windows 8

Tiggzi uses HTML5, JavaScript, CSS and JavaScript to build mobile apps. To help create hybrid apps, Tiggzi includes the popular Apache Cordova tool set.

Visual app builder

Tiggzi comes with a powerful visual app builder for building HTML5, jQuery Mobile and Windows 8 apps.  Developers get the simplicity of a visual development environment and the power of JavaScript to develop more complex apps.

APIs

Quickly and easily add any 3rd party API to your app. Tiggzi’s powerful mapping editor makes it very easy to bind APIs to pages.

Integrated Backend Services

With Tiggzi Backend Services, developers can instantly create a mobile backend for your app, save data into a cloud database, or add Push Notifications. The best thing about this is that the Backend Services are integrated into the app builder.

Apache Cordova (PhoneGap)

Apache Cordova is included in Tiggzi Platform to make it fast and easy to build hybrid apps with access to native APIs and features.

Instant app testing

Developers can instantly test their apps in browser or on the device. Simply share the app link to get feedback.

Cloud Build

Tiggzi comes with a binary build service for Android and iOS apps. Or, export your app as mobile web.

Plug-ins

Plug-ins are prepackaged API services, pages and data binding that add powerful functionality to your app instantly. Instantly add features that you need in your app, like SMS capability from AT&T, email from SendGrid, news from ESPN and much more. Developers can also create their own plug-ins.

Creating a mobile app in Tiggzi

We are going to build a Words Definition app powered by Wordnik API. The app will hopefully look like this:

What is Wordnik?

Wordnik is a new way to discover meaning. This page will give you a quick overview of what you can do, learn, and share with Wordnik.

Before you start

Tiggzi has a Free Plan but to give you even more flexibility, JAXenter is offering you a 3-month free Standard plan. The Standard plan allows to build three apps with any number of pages. Sign up for this plan here.

Signing up for Wordnik API

In order to use Wordnik API, we need to get an API key.

1. First go to http://www.wordnik.com/ and sign up for an account
2. Once you have a Username, go to http://developer.wordnik.com/, fill out the form (shown below) to request an API key. You will get the API key via email. 

Creating new app

From the App pages, enter your app name and click Create:

When the project loads in the builder, you see see this start page: 

On the Start page (can always be re-opened from Help menu) you will find links to tutorials, documentation and support. 

Creating the mobile UI

First, Open Pages/startScreen. Then Update the Caption to: Words App Drag and drop the Input component. In Properties, set its label to: Enter word and mark it as Placeholder. The result will look like this: 

Next, drag and drop the Select component. In Properties, click Change... and set the following labels/values:

• a)[blank]/Select Dictionary...
• b)all/all
• c)century/century
• d)wiktionary/wiktionary
• e)webster/webster

The result will look like this:

And the page will look like this:

Drag and drop the Button component and set its label to: Get Definition

The last component is the Grid. Drag and drop it into the page. In Properties, change to 2 rows and 1 column.

In both cells are there is a Label component 

• The first label has italics turned off
• The second label is set to size 12

The final UI looks like this:

 

Testing the app

One of the really nice features in Tiggzi is the ability to test the app instantly in the browser. Simply click the Test button (upper right corner) to launch the app in the browser. If you open the Test menu, you will see there is an option to launch the app without the mobile frame:

To test the app on your phone, check Public. Then, scan the QR code shown or simply email the app link to your phone.

Changing the Theme

If you would like to change the theme, you can do it in Project > App settings. The theme used in this tutorial is: dendriate/A (set in Project > App settings).

Adding Wordnik Words Definition API

We are going to use word definitions API - returns definition for user entered word. You can learn more about the API here: http://developer.wordnik.com/docs#!/word/get_definitions

The actual API URL looks like this:
http://api.wordnik.com/v4/word.{format}/{word}/definitions

As we know the type of response we would like, we are going to set {format} to json. So the URL now looks like this:
http://api.wordnik.com/v4/word.json/{word}/definitions

{word} will be set to user input when the app is running. Let's create the service in Tiggzi.

In Tiggzi:

• Project > Create New > Service
• With REST option selected, click Create Service. The service editor will open.
• For service name, enter WordnikWordDefinition
• For service URL enter: http://api.wordnik.com/v4/word.json/{word}/definitions

• Let's now define the request parameters. Open Request tab
• Create three parameters: api_key -- set it to the API key you received from Wordnik, words -- this will be entered by the user and inserted into the URL, sourceDictionaries

The result should look like this:

• Open Test tab. Here we can test the service and also automatically create the service response
• Enter any value for word and leave sourceDictionaries blank:

• Once you see the result (JSON) returned from the service, click Automatically Create Service Response button. This will automatically create the service response.
• Open Response tab to see response structure.

We are done here. Next we are going to add the service to the page.

Adding and binding the service to the page

• Go back to startScreen and switch to Data tab
• For datasource, select Service > WordnickDefinitionService > Add
• A service instance will be added to the page. Rename the service instance to: get_ definitions:

• This adds the service to the page. Click Edit Mapping to bind the service to the page.
• Request mapping will be opened first. Create the following mapping:

Open Response tab to define response mapping
Create the following mappings:

1. $ -- is the collection of all definitions. It is mapped to the grid so that we can an automatic looping feature.
2. text -- is the word definition
3. attributionText -- is the dictionary name.
4. Save.

Invoking the service

 

1. Go back to Design view
2. Select the button and open Events tab
3. On click, add Invoke service -->  get_definitions action
4. Click Add Event.

Testing the app

Click the Test button to launch the app in browser. For example, entering the word: soccer:

Getting help

If you have questions about Tiggzi or this app, please don’t hesitate to contact us on Twitter, forum or via email.

Author Bio: Max Katz is Head of Community and Developer Relations for Tiggzi (http://tiggzi.com), a cloud-based mobile platform based on jQuery Mobile. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books on “Practical RichFaces” (Apress 2008, 2011) and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: mkblog.exadel.com and Twitter: @maxkatz.

Guest post: Building mobile apps with Tiggzi Platform