Note: we won’t be going into the minutiae of the build process, but you’ll have enough information from this overview to go and build something yourself.
Tip: to find out more about APIs and the web, take a look at The Increasing Importance of APIs in Web Development.
What We’ll be Building
Take a look at the demo. The version online is as-yet non-functional as you will need to add API keys to it. Download the source files and have a go!
The API provides access to hourly and daily forecasts for the coming week, minute-by-minute “hyperlocal” rain forecasts, governmental severe weather alerts, observations going back decades, dozens of languages, measurement units and easy to understand documentation. There’s a pay-as-you-go pricing model, but the first 1,000 forecasts per day are free. That part is important, especially if you want to experiment for purely demo purposes. After the first 1,000 requests it becomes a paid service at $0.0001 per forecast.
Once you’ve obtained your personal DarkSky API key we’re off to the races, but before leaving the gate we need a form, so let’s create that markup first.
The markup is nothing more than a form element with some list items and inputs inside. This will be the basis for our creation ahead.
Here’s the result of our markup with some bare-bones CSS styling to float the inputs and add a background color just so we can see the rendered markup.
We can go further than just two inputs for latitude and longitude. What if someone doesn’t know these coordinates off the top of their head? To solve this issue we’ll add another input to let users enter and retrieve the requested forecast by city name–this will in turn autofill the coordinate fields magically!
This markup alone won’t get us towards the goal of autofilling the coordinates by city search; for this we need to dip into the Google Maps API. Just as we need an API key for DarkSky, we also need an API key for Google Maps. A personal Google Maps API key can be obtained here and isn’t provided for this tutorial.
Google Maps API Request
For this portion of the app we need to include the Google API script that contains your personal API key in the URL.
This script is the call to load the Google Maps API, but there’s a bit more to explain.
The url includes the parameters
To display city searches as a user types we’ll use what’s called a Places Search Box.
SearchBox() argument will be passed to the search input we created earlier.
places_changed is an event fired when a
We’re in a really good place at this point so let’s create some logic to go inside the search box event listener function.
With a variable defined called
locale to store our location you might notice the value passed
searchBox.getPlaces() . This method is the magic that will help to autofill the coordinates based on the city selected (the first one) or in other words returns the query selected by the user.
The final piece is to autofill the coordinates based on the city selected and to place it under our
localevariable within the event listener function we just authored.
These two lines set the “value” of our coordinate inputs and use the
location property provided by
If you’d like, there is even a way via provided CSS classes to style the autocomplete and search box widget.
In order to interact with DarkSky you’ll need to sign up for an account to obtain an API key.
The forecast request URL is very readable for developers. Plug in your key, pass in the coordinates, and you’re ready to pull in data.
In the code above I’m using jQuery for the sake of simplicity. The
forecast argument will be the representation of the returned results.
console.log will report the object representing DarkSky’s API data. As you can see there are quite a few options in terms of information one can retrieve.
This method for your Skycons must be placed inside the getJSON request we wrote prior. The function will render and attach our animated icons for dynamically created forecasts; a detail undocumented by Skycons.
I strongly urge you to peruse the demo project provided. Each line has been fully commented to help you to understand the intentions for each line of code. I hope the comments and combined efforts to create this demo help to broaden your skillset and inspire you to make your own practice demo with whatever API you choose.
Maybe you’ll choose to build a Dribbble App, an Envato app, or even a CodePen app. Whatever it is, take the time to create something of your own and remember to practice, practice, practice!
Source : webdesign.tutsplus.com