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, you’ll learn how to build an app that uses the FullContact API to retrieve user information based on an entered email.

The app will look like:

Final1 Final2

Before you begin

Tutorial level: intermediate.

Signing up for the FullContact API

FullContact provides a number of pricing plans, including a free plan. Click to sign up. Once you are signed in you will see the following message:ThankYou

Check your email to get API key or click API PORTAL button at the upper right corner. You will see something like this:Dashboard

The API that you’ll use is here, and looks like:

For input, we’ll provide a person’s email address.

Go to Appery.io to build the app that uses the FullContact API.

Creating a new project

1. To start, create a new app. Enter FullContact for the app name, and click “Create.”

2. Create the following UI:
Final UI

  • At the top, there’s an Input field to enter the person’s email.
  • The “Get It” button will invoke a service that calls the FullContact API.

The rest of the UI is for displaying the results you get from FullContact:

  • Name of, and person’s location are displayed.
  • Photos – collapsible block displays photos, as well as the name of the social network from which the photo was taken.
  • Social Profiles – collapsible block displays names and links to social media sites.

Defining FullContact REST API service

1. Next, we need to define a service that connects to the FullContact API:

2. You must already have the API key and email. Define the service URL:

3. Define request parameters:

4. Go to the Test tab, enter bart@fullcontact.com as the value for the email parameter, and click “Test.” You can see the generated JSON response structure:TestTab

5. This feature makes it easy to try any REST API very quickly.

6. You need to define the service’s JSON response structure. To easily create the JSON structure, click “Import as Response”:

The Response tab, where all response parameters are listed:ResponseTab

Mapping the service

Once the service is defined, add it to the page and map it.

1. Go back to startScreen > DATA tab, and from the list, select Service > GetPerson. Click “Add” and rename the datasource to get_person:GetPerson

2. Map the UI to the service:Mapping1

3. For displaying the results, map the services to the UI:Mapping2

4. Once you’re done with the mapping, invoke the service on button click:ButtonService

Exporting the app

Once you’re done with the app, you can export it as a mobile web, Android or iOS app:

You can build this simple app in under 30 minutes. Sign up for FullContact, and the Appery.io app builder via the links.