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.
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 University of Winchester
Development Focus Module
January 2018 - April 2018
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.
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.
Instead I decided to use OpenWeatherMap.org’s API. I was able to gain access to current weather data for any location and the data was frequently updated. The data was available in JSON, XML, or HTML format and was available for free.
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, and like I said above, it was free for me to use! 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.
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.
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.
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 I would be able to retrieve the string "Thursday". A prototype can be found here.
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.
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.
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.