Tiggzi Docs > Tutorials > Build a Words Definition App with Wordnik API

Build a Words Definition App with Wordnik API

What are we going to build

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

What is Wordnik?

From http://www.wordnik.com/about:

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

Tutorial level: Intermediate

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

Create a new app in Tiggzi app builder. From Apps page, enter app name (use any name you want) and click Create.

Creating the mobile UI

Open startScreen and create UI that looks like this (see notes below image for details):

  • At the very top there is an Input component to enter words to be defined. Enter word is set as Placeholder in properties.
  • The component with Select Dictionary… is a Select menu. You can select which dictionary to search for the word in. Set the menu with the following label/value options:
    • [blank]/Select Dictionary…
    • all/all
    • century/century
    • wiktionary/wiktionary
    • webster/webster
  • Next is a Button component
  • The last component is a Grid with 1 column and 2 rows. The grid will be used to display the results.
    • In both cells are there is a Label component
    • The first label has italics turned off
    • The second label is set to size 12

Click Test to view the page browser.

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:

  1. Project > Create New > Service
  2. With REST option selected, click Create Service. The service editor will open.
  3. For service name, enter WordnikWordDefinition
  4. For service URL enter: 
     http://api.wordnik.com/v4/word.json/{word}/definitions
  5. Let’s now define the request parameters. Open Request tab
  6. Create three parameters:
    1. api_key — set it to the API key you received from Wordnik
    2. word — this will be entered by the user and inserted into the URL
    3. sourceDictionaries
      The result should look like this:
  7. Open Test tab. Here we can test the service and also automatically create the service response
  8. Enter any value for word and leave sourceDictionaries blank:
  9. Once you see the result (JSON) returned from the service, click Automatically Create Service Response button. This will automatically create the service response.
  10. 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

  1. Go back to startScreen and switch to Data tab
  2. For datasource, select Service > WordnickDefinitionService > Add
  3. A service instance will be added to the page. Rename the service instance to: get_ definitions:
  4. This adds the service to the page. Click Edit Mapping to bind the service to the page.
  5. Request mapping will be opened first. Create the following mapping:
  6. Open Response tab to define response mapping
  7. Create the following mappings:

    $ — is the collection of all definitions. It is mapped to the grid so that we can an automatic looping feature.
    text — is the word definition
    attributionText — is the dictionary name.
  8. 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: