If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

In this tutorial, we’ll learn how to build a dictionary-style app, powered by the Wordnik API.

The app will look like:
FinalStart

What is Wordnik?

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

“Wordnik is a new way to discover meaning . . . Wordnik shows definitions from multiple sources, so you can see as many different takes on a word’s meaning as possible.”

Before you begin

Tutorial level: intermediate.

Signing up for Wordnik API

To use the Wordnik API, you need to get an API key.

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

Wordnik

Create a new app

Create a new app in the app builder. From the Apps page, enter an app name (use any name) and click “Create.”

Create the mobile UI

Open startScreen and create the following UI (see notes below for details):
StartPage

1. At the top, there’s an Input component to enter the words to be defined. Enter word is set as the placeholder in PROPERTIES.

2. The component with “Select Dictionary…”  is a Select component. From it, you can choose in which dictionary to search for the word. In properties, under Custom, click “Change,” to the right of Options. A popup will open.

3. Set the menu with the following label/value options (you’ll need to add a few more inputs, do this by clicking the green “Add” button):

  • Select Dictionary…/[blank]
  • all/all
  • ahd/ahd
  • century/century
  • wiktionary/wiktionary
  • webster/webster

SelecComponent

4. Next is a Button component.

5. The last component is a Grid, with 1 column and 2 rows. The grid will be used to display the results.

  • In both cells, 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: dendrite/A (set in Project > App settings).

Add the Wordnik API

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

The API URL looks like:

Since you know the type of response you’d like, set {format} to json. So now, the URL will look like:

When the app is running, {word} will be set to user input.

In Appery.io:

1. Project > CREATE NEW > Service.

2. With the “REST” option selected, click “Create Service.” The service editor will open.

3. For the service name, enter WordnikWordDefinition.

4. For the service URL enter:

5. Define the request parameters. Open the 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:RequestTab

7. Open the Test tab. We can test the service and automatically create the service response.

8. Enter any value for word, and leave sourceDictionaries blank:TestTab

9. Once you see the result (JSON) returned from the service, click “Import as Response,” to automatically create response.

10. Open the Response tab to see the response structure.

Now we need to add the service to the page.

Add & bind the service to the page

1. Go back to startScreen and switch to the DATA tab.

2. For datasource, select Service > WordnikWordDefinition > Add.

3. A service instance will be added to the page. Rename the service instance to get_ definitions:WordnikDefinitionService

4. Now you need to map the UI to the service. Create the following mapping for the Before Send event instance first and save:Mapping1

5. Click “Mapping” for  Success event and create the following mapping:SuccessMapping

Where:

$ – is the collection of all definitions. It is mapped to the grid so that we can create an automatic looping feature.
text – is the word definition
attributionText – is the dictionary name.

6. Click “Save and return”.

Invoking the service

  1. Go back to DESIGN view.
  2. Select the button, and open the EVENTS tab.
  3. On click, add Invoke service –> get_definitions.
  4. Click “Save”.

Testing the app

Click “Test” to launch the app in the browser.

For an example, enter the word “soccer”:
Final