Case Study: API Weather App
#Project-Goals
Enhance my knowledge of fetch APIs, call back functions, and Asynchronous JavaScript by utilizing AccuWeather's API to get weather information on a city that the user types in. #Intro
Asynchronous JavaScript is a fairly difficult concept to fully grasp, especially for someone as new to JS as I am. I understand that it allows your program to continue running while waiting for certain tasks and not having to wait on them.
Application Programming Interface (API) is another topic that will take some time for me to fully comprehend and get comfortable with. I can see the benefits of APIs however and the power it holds in allowing programmers to “fetch” large amounts of information they need so they can filter through them and grab what they need and dynamically add those data to the DOM. Mind blown.
With what I know, or think I know, a Weather App seemed like a good first API project to do. So without further ado, here we go.
#APIs
No, it is not a type of alcoholic beverage (like you haven’t heard that one before…). The challenge for this weather app is using the Fetch API method to request specific information from the AccuWeather API.
First things first was to set up an account on AccuWeather and create an “app” with them so I can get an API key.
Side Challenge: during this project I kept running into fetch issues and could not get data from the AccuWeather API. At first I was baffled because everything was working just find prior and I was able to request data and receive a response.After taking a look in the Network tab I saw my url request has a status code of 401 which according to MDN meant “response status code indicates that the client request has not been completed because it lacks valid authentication credentials for the requested resource.”
After a while of researching, Googleing, Stack Overflow-ing, and Reddit-ing, I learned that AccuWeather give you only 50 request per “app” so I had to delete and recreate “apps” to get new API keys. I had to replicate this process whenever I used up my 50 request per key.After perusing through the AccuWeather API reference I found a Locations API where it allowed me to use a city text search that returns information for an array of cities that match the search text. It required the resource URL, API key, and query.
##API-testing-hard-coding
I first tested this API endpoint request by manually inputting the URL request, apikey, and the value of “Houston” into Postman and seeing what results I would get.
The image above does not capture the entire JSON response but the request was successful and the response was an array of all “Houston” cities in the world. While doing this project I learned that there is a Houston, B.C. Who knew?!
Now that I know the URL request and endpoints work via Postman, I need to test it out on my project.
##API-testing-soft-coding
This time I tested the results on the Mozilla Firefox Developer Edition Browser’s console (what a mouth full).
And it works! We get an array of cities and they include data such as city name, state, a unique key, etc.
I do not need the entire array and just need the 0 index since that is the most common city and the rest are just small towns no one has heard of. I will go back to line 10 above and return data[0]. Also if the user did want the weather information for Houston, B.C, they can just type that in to get the results for that city.
#Tie-it-all-together
So now that we have a rough idea of how fetch API request and response works and was successfully able to an async function to make a request to the AccuWeather API and get some information and turn it into JSON, we just need to finish the rest of the application with what we already know how to do. And if things go wrong, we do more testing and find solutions!
Above we add an event listener to the input and once the user submits, the getCity function from above will be called and the value/city will be passed into it. getCity will the zero index from that array of cities (as mentioned above).
Next, we will call a new function called getWeather (that is extremely similar to getCity) except we will use it to get the weather forecast. Essentially the same steps occur as in getCity and weather conditions for the city are returned.
When we run this we get the weather conditions for the input.
Finally, we can sift through the returned JSON file and update the DOM with whatever information we want from it.
I decided to grab:
City Name and State
Day of the Week
Current Temperature in Fahrenheit
Highs and Lows for the day
Weather Condition
Condition Icon
Put them all together, add a little pixie dust and vanilla Javascript with DOM manipulation and CSS Styles and I was able to get this:
With the main challenge solved, all that is left is seeing if there are any other information I would want to be shown on the browser and some finishing touches to styling and making sure the project is fully responsive.
Side Challenge #2 - I came across some issues with the fetch api request after deploying this project on my portfolio site. The error was thrown every time I tried to search a city. Initially I thought I just needed a new API key but after some further digging in the Network tab and console I discovered the error was with the url request link provided by AccuWeather.
The URL request given by AccuWeather was not a secure and because of that I was unable to make a proper request. I went back to the URL request in my project and added an ‘s’ to the ‘http’ request and that seemed to have done the trick. #Conclusion
This project was extremely challenging but a lot of fun and provided me with an immeasurable amount of experience and knowledge regarding fetch APIs, call-back functions, asynchronous JavaScript, and so much more.