Tutorial

Guest post: Building mobile apps with Tiggzi Platform

Max Katz
tiggzi-logo

Max Katz, head of Tiggzi’s Developer Relations shows us how to build a jQuery Mobile app connected to REST API.

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.

Author
Max Katz
Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces”, and is a frequent speaker at developer conferences.
Comments
comments powered by Disqus