< Go Back

Weather App

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” from my Enterprise module. Below shows the coding of of the features of my app using HTML, CSS, JavaScript, and an 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.

Company

The University of Winchester

Development Focus Module

Timescale

January 2018 - April 2018

Skills Required

Visual Design
HTML & CSS
JavaScript
PHP & APIs


Visual Design

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.

Sketching the adapted design

Adapted design in mobile formatt

Adapted design in mobile formatt

Adapted design in desktop formatt

Adapted design in desktop formatt


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.

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.

BloomSky weather probe

BloomSky weather probe

Meteorological network

Meteorological network


PHP & 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, 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 free API key from OpenWeatherMap.org
Using my free API key from OpenWeatherMap.org

Using my free API key from OpenWeatherMap.org


Extracting the Data

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.

Output before using API key and PHP.

Output before using API key and PHP.

Output after using API key and PHP.

Output after using API key and PHP.


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.

Code needed for geoloctaion.

Geolocation Test

Geolocation Test

Geolocation Test

Geolocation Test


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’.

Data from successful Ajax call.

Data from successful Ajax call.

Using jQuery to be used to display the response object’s data.

Using jQuery to be used to display the response object’s data.


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.

Code needed to output current day data.

Code needed to output current day data.

Output of the current day of the week.

Output of the current day of the week.


Conditional 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.

Conditional statement needed using baselayer as an example.

Conditional statements needed using baselayer as an example.

Output of using conditional statements to suggest clothing depending on the temperature.


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.

Final Outcome: temperature interface

Final Outcome: clothing interface

Challenge:

Google Deprecating Powerful Features

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.


Final Notes

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.

Milestones

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.

Image one caption

Using iCal to manage my time.

Image two caption

Using a Gantt Chart to manage my time.