\n
Let’s have a bit of fun and let’s build a Visualforce page that is going to call an API via HTTP and to get in return the latitude and longitude of any country plus their cities. We are going to receive their weather conditions as well. We are going to add an option to get the country and\/or a city from that country to narrow the response. All this information will be retrieved in JSON and will be displayed in our Visualforce page. We are going to use “Continuation Class<\/a>” for this example<\/p>\n Let’s take a look at what it is that we need in order to successfully accomplish this tutorial. <\/p>\n 1.<\/strong> We need an API key from https:\/\/www.wunderground.com\/<\/a> 2.<\/strong> Set up the Remote Site<\/a><\/strong> First, navigate to wunderground.com<\/strong> and get your API key. On wunderground’s site, you can find plenty of documentation on how to use their API but we only need to concentrate on one Service URL, this one: Before we look into that we need to prepare our org to allow us to execute callouts to wunderground<\/strong>. For this, we need to set up a Remote Site<\/a>. Just go to Setup<\/strong> –> Administer<\/strong> –> Security Controls<\/strong> –> Remote Site Settings<\/strong>.<\/p>\n Now, all we need to do is to click on New Remote Site. Click Save<\/strong> and we are good to go. <\/p>\n If you want to know more about Remote Site Settings<\/strong> check this page<\/a>. Also consider the “Named Credentials”<\/a> as an option for you callouts. Ok, now we have registered our site in our SFDC org will allow us to make callouts to that external site! <\/p>\n Right now we should have our wunderground API key<\/strong> and the Remote Site should be registered and active. <\/p>\n Our flow should follow these steps that you can see on this screenshot taken from SFDC documentation:<\/p>\n Execution Flow of an Asynchronous Callout<\/strong><\/p>\n Now that we know the flow it is time to deploy our apex class.<\/strong> <\/p>\n [code lang=”php”] public with sharing class WeatherService {<\/p>\n public String requestLabel; private static final String LONG_RUNNING_SERVICE_URL = public WeatherService() \/\/ Action method \/\/ Create callout request \/\/ Add callout request to continuation \/\/ Return the continuation \/\/ Callback method \/\/ Return null to re-render the original Visualforce page [\/code]<\/p>\n On the line where you can see the SERVICE URL<\/strong> you need to insert your wunderground API key<\/strong>:<\/p>\n From this: <\/p>\n [code lang=”php”]’http:\/\/api.wunderground.com\/api\/<YOUR API KEY HERE>\/geolookup\/conditions\/forecast\/q\/’;[\/code]<\/p>\n To something similar to this, the only change is that we have inserted the API key we received from wunderground<\/strong> : <\/p>\n [code lang=”php”]’http:\/\/api.wunderground.com\/api\/68ba9fl743d42102\/geolookup\/conditions\/forecast\/q\/’;[\/code]<\/p>\n When that change is done you can save your class because it is ready. <\/p>\n The last step is to build our Visualforce page with a button that will trigger the call out. It is going to be something really simple and the response will be in JSON. <\/p>\n This is the Visualforce page:<\/p>\n [code lang=”php”]<\/p>\n <apex:page controller="WeatherService" tabStyle="Account" showHeader="true" sidebar="false" docType="html-5.0"> \t<\/apex:pageBlock><\/p>\n \t <apex:pageBlock title="Weather Service Response" id="weatherPanel"> <\/apex:page><\/p>\n [\/code]<\/p>\n Now we are ready to test our page. You can use the country ISO for the countries or the full name. If you click the “Geolocation and Wheater Service”<\/strong> you should receive a JSON response on the body of the page, something similar to this:<\/p>\n On this screenshot, you can only see the very first lines but you will find that there is a lot of information coming from the JSON response. This is and easy way to also demonstrate the “Continuation Class”, so I hope that you enjoyed your coffee and this tutorial.
\nHow do you get an API key? You need to register and apply for a developer API key, it is easy and a fast process.
\nAfter registering and requesting an API key you will receive an email with your API key that we will be needing to call their API through HTPP. <\/p>\n
\n3.<\/strong> Eclipse<\/strong>, MavensMate<\/strong> or any developer environment that you use for coding apex.
\n4. <\/strong> A SFDC org
\n5. <\/strong> Coffee … plenty of coffee<\/p>\n
\n[code lang=”php”]’http:\/\/api.wunderground.com\/api\/<your API KEY HERE>\/geolookup\/conditions\/forecast\/q\/'[\/code]<\/p>\n
\nOn the remote site name enter whatever feels the best for you, the other options need to be equals to those in the screenshot bellow:<\/p>\n![\"\"](\"http:\/\/ccloudonline.nl\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-01-at-9.06.17-PM.png\")
<\/p>\n
\n![\"\"](\"http:\/\/ccloudonline.nl\/wp-content\/uploads\/2017\/05\/asynFlowSFDC.png\")
<\/p>\n
\n
\n\/**************************************************************
\n* @Author : Carlos Naranjo
\n* @Website : http:\/\/ccloudonline.nl – http:\/\/ccloudonline.com
\n*
\n***************************************************************\/<\/p>\n
\n public String result {get;set;}
\n public String countryISO {get;set;}
\n public String city{get;set;}<\/p>\n
\n ‘http:\/\/api.wunderground.com\/api\/<YOUR API KEY HERE>\/geolookup\/conditions\/forecast\/q\/’;<\/p>\n
\n {
\n countryISO =’Spain’;
\n city=’Sevilla’;
\n }<\/p>\n
\n public Object startRequest() {
\n \/\/ Create continuation with a timeout
\n Continuation con = new Continuation(60);
\n \/\/ Set callback method
\n con.continuationMethod=’processResponse’;<\/p>\n
\n HttpRequest req = new HttpRequest();
\n req.setMethod(‘GET’);
\n req.setEndpoint(LONG_RUNNING_SERVICE_URL+countryISO+’\/’+city+’.json’);<\/p>\n
\n this.requestLabel = con.addHttpRequest(req);<\/p>\n
\n return con;
\n }<\/p>\n
\n public Object processResponse() {
\n \/\/ Get the response by using the unique label
\n HttpResponse response = Continuation.getResponse(this.requestLabel);
\n \/\/ Set the result variable that is displayed on the Visualforce page
\n this.result = response.getBody();<\/p>\n
\n return null;
\n }
\n}<\/p>\n
\n <apex:form>
\n \t<apex:pageBlock title="Your Geolocation and Weather Service">
\n \t\tCountry:
\n \t\t<apex:input label="Country" value="{!countryISO}"\/>
\n \t\tCity:
\n \t\t<apex:input label="City" value="{!city}"\/>
\n \t\t<apex:commandButton action="{!startRequest}" value="Geolocation and Weather Service" reRender="weatherPanel"\/><\/p>\n
\n \t <pre>{!result}<\/pre>
\n \t <\/apex:pageBlock>
\n <\/apex:form><\/p>\n
\nIt is possible to search only for the country and leave the city field empty. This is a simple page and there is not error handling or any other fancy UI behavior, but I hope that it helps you to understand a bit better how to get JSON response on a Visualforce page. <\/p>\n![\"\"](\"http:\/\/ccloudonline.nl\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-01-at-9.56.37-PM.png\")
<\/p>\n![\"\"](\"http:\/\/ccloudonline.nl\/wp-content\/uploads\/2017\/05\/Screen-Shot-2017-05-01-at-9.57.11-PM.png\")
<\/p>\n
\nQuestions? issues? leave a comment bellow and I will do my best to answer ASAP. <\/p>\n