The weather app. Everyone has one on their phone. It lets us know the temperature, if it’s sunny or raining outside and what the high and low temperatures will be throughout the day. In fact, it was the first app I really enjoyed using on my iPhone 3G back in the day when I first bought my first smartphone.
To build a weather app, you’re going to need to get the weather info from somewhere. Obviously I do not own any weather instruments to check for all these things. I might have a thermometer somewhere but that’s about it. It’s not going to help me figure out the weather conditions in San Francisco, Los Angeles or Alaska since I’m here in New York City.
The solution? Use an API.
What’s an API?
API stands for Application Programming Interface. It’s just fancy wording for a collection of dynamic data that can be plugged right into your project. For some API’s, this could just be a collection of available movie reviews or a bus schedule. The API can contain a lot of useful data to build great applications, but it’s entirely up to you as to how you want to implement it into your project.
Some APIs require the use of an API key. An API key is a unique signature that a developer needs to access the data. This same key also provides the company providing the API some method to track who is using their data and for what purposes. It’s important that if you’re using an API key; that you do NOT keep this API key in your immediate accessible source code. If you must hide the API key, you may need to look into how to provide this through your own server in the back end.
There are lots of awesome API resources out there, but my favorite site to go to for APIs is Programmable Web.
They have literally thousands of APIs, including a weather API. If you ever needed some data to use in your projects, I highly recommend checking them out.
Getting Started with an API
To use an API, you need to call the API. Just like calling someone on the telephone, you need some sort of “phone number” to reach the person before they can answer. This “phone number” is actually a URL provided by the API’s documentation. The URL may need to be modified a bit depending on what the API is for and what purpose it is serving.
For the weather application, I needed to use an API that could get the coordinates of a user based on their browser’s location.
While I could have tried other ways such as location based on zip code or city name, I felt that having the coordinates of the user’s current location would provide the most accurate and up to date weather information.
Plus, it works great on mobile devices!
Once the coordinates are available, I plugged them straight into the API call, also a $.getJSON call. This call will look up the available data on the weather conditions at those exact coordinates.
The coordinates are declared as two variables, which are concatenated within the second API call. The API URL for the actual weather data is defined within the var api.
By concatenating the coordinates directly into the API URL, it will continue to dynamically change based on a user’s location and we won’t have to hard code a set of coordinates.
Get Your Weather — Now!
When the API call is successful, the data will be sent back in a JSON format. Each piece of data is nested according to a category or name that branches out. To access each item, I used dot notation to grab the data and populate it into my application via jQuery.
Alongside with the data, I included all necessary conversion formulas to each weather item. This would ensure that the final value of the variable is already converted before it is displayed to the end-user. For example, the temperature is provided in celsius rather than fahrenheit. Speaking of which…
Since I did not want to isolate this app to just users who use fahrenheit as their main unit of measurement, I added a button to switch back and forth between the two weather units.
The button for the switch between the two units of measurement is done via a toggle. It switches back and forth based on a boolean value declared as tempToggle. When clicked, the button will assign the boolean a true or false value and based on this boolean value, the temperature’s units will switch between celsius and fahrenheit. I also included a switch between both the high and low temperatures as well.
Last minute details…
One final stylistic touch was to add some CSS to the background of the application. Some users, like myself, are visual and prefer to see images that can quickly identify the gist of the information presented.
I also added a display to the app to show the current date. It wasn’t necessary but I figured why not?
There is a section dedicated to showing the weather icons provided by the API, but not all weather data from every location has an icon available. I simply added it on as another if/else statement to provide the icon image if available.
That pretty much wraps up this project. I might consider re-doing this project in a few months and create one that shows you what to wear as opposed to just the weather. We only check the weather so we know whether or not to bring a jacket or umbrella, right?