Building jQuery Mobile Apps With FullContact API
I attended GlueCon Hackathon in May and met Robbie Jack, Developer Evengalist from FullContact. FullContact was one of the hackathon sponsors. Once the vendor presentations were done and attendees presented their app ideas, we started chatting and Robbie told me about FullContact API. On a very high level, you give FullContact an email address (or another piece of information) and it gives you back a lot of rich social information about this user such as name, gender, location, social media profiles, photos and much much more. As we were chatting, I said, let me build an app in Tiggzi app builder that uses FullContact API. Well, Robbie was quite impressed. I built this app in front of him in about 20 minutes.
Getting FullContact API Key
As with most API’s, the first step is to sign up, register an app and get an API key. FullContact is no different, the sign up process is very simple. I signed up for the Free plan and had my API key in a few minutes.
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:
For input, we are going to provide person’s email address.
Now let’s go to Tiggzi build the app that uses FullContact API.
Building a mobile app in Tiggzi
I first built the UI with jQuery Mobile components, then defined a FullContact REST service, and then mapped the service to UI. If you never tried Tiggzi before, sign up for the Free plan.
Building the UI with jQuery Mobile
I started with building the UI with jQuery Mobile components:
- 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
This is how it looks when running the app. Bart Lorang is FullContact’s CEO.
Gelato/Orange mobile theme is used.
Defining FullContact REST API service
Next I defined a service that connects to FullContact API. The service that I used is this:
I already got the API key and email will entered from the page. This shows defining the service URL:
Next I defined request parameters:
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 Populate Response Structure button:
Then switching to Response Paramaters panel, you can see the generated JSON response structure:
This feature makes it very easy to try any REST API very quickly.
Mapping UI to service
Once the service is defined, it’s time to add it to the page and the map it.
Service added to the page:
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 again how the resulting app looks when running in browser:
About Max Katz
Max Katz is a Senior Systems Engineer at Exadel. He has been helping customers jump-start their RIA development as well as providing mentoring, consulting, and training. Max is a recognized subject matter expert in the JSF developer community. He has provided JSF/RichFaces training for the past three years, presented at many conferences, and written several published articles on JSF-related topics. Max also leads Exadel's RIA strategy and writes about RIA technologies in his blog, http://mkblog.exadel.com. He is an author of "Practical RichFaces" book (Apress). Max holds a BS in computer science from the University of California, Davis.More About Max »
November 1 - 3, 2013
Current Topics on the NFJS Tour
- Core Java, JEE
- Dynamic Languages: Groovy, JRuby, Scala, Clojure
- RESTful Web Apps
- Frameworks: Hibernate, Grails, Spring, JSF, GWT, more
- Test Driven Design
- Ajax, Flex, RIA
Why Attend the NFJS Tour?
- » Cutting-Edge Technologies
- » Agile Practices
- » Peer Exchange
- Languages on the JVM: Scala, Groovy, Clojure
- Enterprise Java
- Core Java, Java 7
- Testing: Geb, Spock, Easyb
- NoSQL: MongoDB, Cassandra
- Spring 3
- Automation Tools: Git, Hudson, Sonar
- HTML5, Ajax, jQuery, Usability
- Mobile Applications - iPhone and Android
NFJS, the MagazineMay Issue Now Available
On the road to learningby Raju Gandhi
Refactoring to Modularityby Kirk Knoernschild
RESTful Groovyby Kenneth Kousen
Getting Started with D3.jsby Brian Sletten