There can be multiple reasons behind this tricky behaviour but an obvious one is not able to calculate the load time of an SDK. It can vary from app to app and even from page to page. Therefore, loading multiple SDKs and parallel consumption of their associated APIs, can lead to unexpected responses. For Facebook Graph API, most common examples are early call warnings for FB methods.
USA Outdoors Adventure app recognises its users by using Facebook Graph API and then loads their up-to-date status by consuming Graph, Google Maps and its own Outdoors Adventure(OA) API. The process flow is as following:
- Check user status (Graph API)
- Confirm user registration (OA API)
- Check user status and get user data (OA API)
- Load user status (Google Maps API)
To stick with this cascading flow, API calls need to be chained accordingly to avoid errors, unexpected results or early call warnings. So APIs call flow goes as following:
- Call Graph API
- Call OA API as a callback to Graph API
- Call Google Maps API as a callback to OA API
- Setup front-end using final data in hand
Here I will go through all these steps explaining how it works best by chaining calls for multiple APIs. 1
Facebook Graph API
Passing a custom function
FB.getLoginStatus(...), will have a deferred execution and will be served as callback.
Now depending on personal choice, that may or may not be an optimal workflow – so here is a better workflow by using Socialmedia.js. Making an exact similar call with
Socialmedia.js could not be anymore simpler.
Outdoors Adventure (OA) API
Now that we have Facebook SDK ready to use as well as user status from Graph API. We can use user status to determine if user is connected to the app as yet so we can make use of OA API or ask user to connect otherwise.
jQuery.getJSON call grabs user data from OA API. But first, we want user to authenticate the app by giving appropriate permissions so that we know who this user is. Here is the breakdown of complete scenario:
Google Maps API
Now that we have the user identity, status and progress data in JSON format, we can utilize this information for a personalised Google Maps layout. Here is the breakdown to load Google Maps functions.
Google Maps is loaded now and ready to use. It is time to load user data to display on map. Here we go:
This process may go on as we add more and more interactivity into this. We can also display a loading status or animated progress cricle between calls so to provide a better user experience and so on.
So go ahead and try2 the USA Outdoors Adventure app. Your feedback or any questions are always welcome!