Looking Up Social Datan with FullContact API

What are we going to build?

We are going to build an app that uses FullContact API to retrieve user information based on email entered. The app looks like this:

Before you start

Tutorial level: intermediate

Signing up for FullContact API

FullContact provides a number of pricing plans, including a free plan. Click to sign up.

Next you create an app (mine is called Tiggzi) and you will get an API key:

That’s it and pretty simple.

The API that we are going to use is right here and looks like this:

https://api.fullcontact.com/v2/[email protected]&apiKey=xxxx

For input, we are going to provide person’s email address.

Now let’s go to Tiggzi build the app that uses FullContact API.

Creating New Project

1. To start, we are going to create a new app. Enter FullContact for app name and click Create.
2. Create next UI:
   

• There is an input field at the top to enter person’s email
• Get It button will invoke a service that calls FullContact API
• The rest is for displaying the result we get from FullContact
  • Name and person’s location are displayed
  • Photos collapsible block displays photos and 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

Next I defined a service that connects to FullContact API. The service that I used is this:

https://api.fullcontact.com/v2/[email protected]&apiKey=xxxx

I already got the API key and email will entered from the page. This shows defining the service URL:

Next I defined request parameters:

Go to Test tab, enter [email protected] as value for “email” parameter, click Test button. Now you can see the generated JSON response structure:

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

Next I had to define service’s JSON response structure. Tiggzi app builder comes with a very nice features that allows creating the JSON structure automatically. When we test the service to make sure it returns valid JSON, there is an option to define the service’s response structure by clicking Automatically Create Service Responce button:

Mapping UI to service

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

Go back to startScreen > Data tab > from list select Service > GetPerson > click Add button > rename datasource to get_person:

Mapping UI to service:

Then mapping service to UI for displaying the result:

Once I was done with the mappings, the very last thing to do was to invoke the service on button click:

Once you are done with the app, you can export it as mobile web, Android, iOS, or Windows Phone:

Here is how the resulting app looks when running in browser:

It’s incredibly simple to build this app, you can build it under 30 minutes. Sign up for FullContact, Tiggzi app builder and have fun!