Hi All,
I’m probably overthinking this, but I’m stumped: I have an API feed (HTLM with address, account data, etc.), which works when I run the URL in my browser. However, how do I integrate that into RW Classic?
Specifically, I’m building a site for my local motorbiking club and have an API from Weatherstack. Like I said, it works … but I can’t for the life of me figure out how to translate the data it returns into a stack in RW.
Any and all help is appreciated! Thank you!
What kind of API is it? Usually, a browser can’t simply handle an API without some kind of code that polls it, unless you manipulate the URL in the address bar. The data you’ll get back will be in some kind of structured form, like XML or JSON.
Are you sure you’re not confusing an API with an applet?
If it’s a true API, there are a few ways to integrate it into a RapidWeaver project. Usually, you can get specs of the API from the vendor. With those specs in hand, you can custom build a section of your site that polls the API and then displays the returned data. This is usually done by inserting PHP and javascript code on the page in question. The page will generally be in PHP, which RapidWeaver supports.
If you use the Stacks plugin, there are a number of stacks out there that you can use to integrate APIs into your project. If the API uses an industry standard, such a stack might be the way to go. If it doesn’t, you can always build something yourself (or have it built) using the APIs documentation.
If it’s an applet, the world is much simpler. You’ll need to insert the applet code into the project, or use the prebuilt site inside an iFrame.
Cheers,
Erwin
Hi Erwin,
Many thanks for your response. It is indeed an API, although I’m not sure what kind. Weatherstack.com gives a bunch of templates, which seem to work and return some code (have to assume JSON) when run in my bowser, but as you say, that won’t help.
I’m therefore assuming I need to tell the API were to store the data, so that the stack can pick it up and “do something with it”. Is that right? Can you suggest a stack that might be a good choice for this?
I’ve searched high and low, but am still trying to get my head around APIs and such.
Thanks!
Roger
Looking briefly at the Weatherstack website, it appears they return data in JSON format. Which is quite common for this type of thing.
My own approach would be to use asynchronous Javascript and something called promises. First a fetch request is made to confirm the API exists. Then a second request to pull the JSON file from the server. This data becomes available as a Javascript object, making it feasible to extract just the bits of data we need. Using template literals in Javascript, it becomes possible to output this data on your website, in any number of possible ways. I normally include a catch statement too, so if something fails (like the API is down) it will fail more elegantly. As you can perhaps tell, I do a lot of work with APIs in my day job.
I don’t know of any “off the shelf” stacks that can do all this for you with a pretty user interface. The trouble is, every API is unique, so unfortunately a degree of coding is needed to get this working.
I have seen articles about this type of same thing on FreeCodeCamp, so if you have the time and patience to roll something yourself, that could be one possibility. If not, you may either have to consider hiring help from someone like me or see if there is something easier available in “widget form” that is ready to add straight to your website.
Ah, weatherstack.com appears to have been so kind as to include a few code examples, so you can have a look on how to integrate it. There’s a PHP one too, which looks like this:
$location = 'New York';
$queryString = http_build_query([
'access_key' => 'YOUR_ACCESS_KEY',
'query' => $location,
]);
$ch = curl_init(sprintf('%s?%s', 'https://api.weatherstack.com/current', $queryString));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$json = curl_exec($ch);
curl_close($ch);
$api_result = json_decode($json, true);
echo "Current temperature in $location is {$api_result['current']['temperature']}℃", PHP_EOL;
…where YOUR_ACCESS_KEY is handed to you when you sign up.
This code could be inserted into any PHP page in your RapidWeaver project and the current temperature for New York would be shown in Celsius to your visitors.
The bit that contains $ch = curl_init is where the magic happens - this reads out the variables created just above it ($location and $querystring) and builds the URL that fetches the weatherdata from the location you specified with your subs’ credentials, and puts it into a new variable called $ch.
The weatherdata returned ends up in a variable called in $api_result, which is then put in a string that formats it into a nice English sentence in echo.
You could build yourself a new string, or include the {$api_result[‘current’][‘temperature’]} in pretty much any stack that allows text input, as long as your page is in PHP.
You can look up other data then temperature too, including one that returns a PNG icon:
current > observation_time Returns the UTC time for when the returned whether data was collected.
current > temperature Returns the temperature in the selected unit. (Default: Celsius)
current > weather_code Returns the universal weather condition code associated with the current weather condition. You can download all available weather codes using this link: Download Weather Codes (ZIP file)
current > weather_icons Returns one or more PNG weather icons associated with the current weather condition.
current > weather_descriptions Returns one or more weather description texts associated with the current weather condition.
current > wind_speed Returns the wind speed in the selected unit. (Default: kilometers/hour)
current > wind_degree Returns the wind degree.
current > wind_dir Returns the wind direction.
current > pressure Returns the air pressure in the selected unit. (Default: MB - millibar)
current > precip Returns the precipitation level in the selected unit. (Default: MM - millimeters)
current > humidity Returns the air humidity level in percentage.
current > cloudcover Returns the cloud cover level in percentage.
current > feelslike Returns the "Feels Like" temperature in the selected unit. (Default: Celsius)
current > uv_index Returns the UV index associated with the current weather condition.
current > visibility Returns the visibility level in the selected unit. (Default: kilometers)
Keep in mind that the free tier will only allow 250 polls per month, after which some kind of message probably appears instead of the temperature (in this example). Depending on how many visitors (including crawlers and whatnots) you expect, this may result in ugly errors quite quickly. The cheapest paid plan allows for 50,000 polls, which sounds about realistic.
Cheers,
Erwin
Wow, you guys are amazing. Yes, Will, I had figured that pulling the data to the server and then querying that data would be the way to go, but of course I have no clue on how to go about this. It’s curious to me that such a question hasn’t been raised before (or maybe it has).
As for the 200 calls per month on the free plan, yes I’m aware. That said, we’re a very small club and for the moment I doubt we’d even get near that number in normal operations.
I’ll study your replies in more detail later, but in the meantime: thank you both!!
Cheers,
Roger