JavaScript and Apis

Weather App

the brief

This project was part of my development module for my third year at University, which was to explore a project of our own choosing to a prototype level. We were encouraged to try out a number of different methodologies and be creative and experimental with our ideas to any projects. I focused on my idea for a snowsports app entitled “Altitude”. Below shows the coding of of the features of my app using HTML, CSS, JavaScript, and and API.

I also took inspiration to code a weather app from Code Camp’s “Show the Local Weather project”, which involved building an app that displayed the weather wherever the user happened to be. The design of the user interfaces and branding of this project can be found in more detail here.

adapted designs

As part of my Altitude app user interface designs, I created a weather section to give updates and snow reports. I adapted my original design to a realistic design that I would be able to code. This included a background image with a electric blue and cobalt gradient overlay from top to bottom. The design followed the same typography and imagery as the original design; however I kept the features down to the essentials which meant removing the top bar and bottom navigation.

research

Before starting to code my weather app, I researched weather API I could use to source the data. One of the APIs I researched as BloomSky API. BloomSky is a weather probe that users can place in their garden or on their roofs that captures hyperlocal weather conditions data, creating a meteorological network that provides real-time weather monitoring and weather data to users; however, it required me to own my own probe which was not suitable for the purpose of this project. If I was to purchase the probe, I would have accessed the data much like the other weather APIs I found: users can initiate a HTTP GET request to server with their authorisation key and obtain the data returned in JSON format.

php and weather apis

Using OpenWeatherMap.org’s API and my API key, I was able to find the weather of a location by changing the variable q to any place I wished. OpenWeatherMap.org is a global geospatial platform that provides data on the current weather conditions and forecast for over 200,000 cities and any geo location. I chose to user OpenWeatherMap.org’s API because it had a simple and clear API, and I was able to find multiple tutorials on the internet about how to start with the API including their own start up tutorial.

Using my API key, I was then able to extract the data using PHP and output it to my locally hosted website. For example $url is the link to the data and $getweather obtains the data. The echo statements then displayed the temperature and humidity. An early prototype can be found here.

geolocation

The problem with using the first method of finding the current weather at a location using PHP was it required the url to be changed within the code which is not suitable for the purpose of my website. I needed a way for the user’s location to be found automatically which would then affect the weather being displayed. Therefore, I looked into using geolocation to be able to find the co-ordinates for the users current location. I ran a simple test to understand the code required to find the user’s latitude and longitude.

I used the Geolocation.getCurrentPosition() method to get the current position of the user’s device. The structure of the statement is: navigator.geolocation.getCurrentPosition (success, error, [options]). I also included an error alert as part of the fail condition statement that would display an alert to the user saying ’geolocation not available’. This prototype can be found here.

Ajax call

Through looking at other examples that used APIs and geolocation, I realised I would need to have an ajax call to make an HTTP request to get a JSON object that which contained the data. This data would then be returned in the success callback from the HTTP request, and JQuery would be used to display the response object’s data needed to display the current weather to a user.

In the context of my weather app, the event that occurs in the web page is the user loads the page. A XMLHttpRequest object is created using JavaScript which sends a request to OpenWeatherMap’s server which is processed. The server sends a response back to my web page which is read using jQuery and an action is performed which is it fills in the weather data which is attributed to a certain IDs for example ‘temp-text’ or ‘wind-text’.

Current Day

Part of my design required the website to display the current day of the week. Using the syntax Date.getDay(), a number, from 0 to 6, representing the day of the week from Sunday to Saturday was outputted. Outputting a number would not be useful to the user, therefore I needed to translate the number into the correct day of the week. Using the syntax var weekday = new Array(7); I was able to declare a new variable called weekday and makes this new variable refer to a new array object that could hold seven elements. Using arrays, I was able to store the seven names of each weekday as strings under the collective name weekday. So by referring to weekday[3] I would be able to retrieve the string "Thursday". A prototype can be found here.

Condition Statements

An additional feature that was added to my design once I had successfully coded my weather app, was the ability to input what ski related clothing items you own and using the minimum temperature of the day, it would output the suggest items of clothing to take with you. Using checkboxes, users are able to input their items. I then used condition statements and my variable ‘temp’ which uses the data from the element attributed with the ‘mincels’ ID. The value of ‘temp’ is compared against the value of a predetermined figure that refers to the highest temperature at which it is suggested to wear the item of clothing. If the value of ’temp’ is lower than the predetermined figure, the website will suggest to the user to take the item with them by setting the display to block from none. If the value of the ‘temp’ is higher than the predetermined figure, the website will keep the display as none.

final outcome

For my final outcome, I was able to create a working weather web app using the latitude and longitude of a user’s position and provided them with their location, an icon representing the current weather, a description of the current weather, current temperature, the high temperature of the day, the low temperature of the day and the wind speed. I was also able to develop it further so it is able to suggest the most suitable attire depending on the day’s weather and what items of clothing a user owns.

Due to Google deprecating powerful features on insecure origins, I have added the ability to download the code for the weather app here to be able to use geolocation. The live version of the weather app, with geolocation is available, can be found here; however, you must accept the server as being secure and allow the website to run the code.

evaluation and milestones

I’m incredibly proud of my final outcome because not only does it fit to my original designs, I have also gained knowledge and confidence in using APIs and jQuery. I now understand better how to make an ajax call and how to pull out the necessary data from the JSON data using jQuery. I still wish to develop my skills in jQuery further because it can help reduce the length of code needed and hence is quicker to develop compared to JavaScript.

This project was completed over twelve weeks (18th January - 3rd April) during which I set myself personal deadlines when I aimed to be at a milestone in my project. To keep track all my deadlines I used my digital calendar, an online to do list and task manager called Todoist, and a Gantt Chart. All three tools allowed me to finish my projects on time.