Building a Weather App [Project]

Last week's project involved building an app to show the local weather of any location.

The following user stories were to be implemented:

  • User can view the weather in his/her current location.
  • User can toggle the temperature unit (Celsius or Fahrenheit).
  • Weather icon or background image will change depending on weather conditions.

I decided to take a picture of demo weather app to create simiarly to their UX design. demo weather

Design

I had a bunch of ideas for the design of this app and I did look at a few completed projects (without checking the code of course) from the community to see what other folks were displaying in their app and how it looked.

Coming up with a final layout was a bit tricky but I found it helpful to decide the elements I wanted to display for the user and build from there.

Keeping things simple was the aim here. I decided to show only the temperature and weather description in addition to the local time.

I also liked the animated weather icon in the example project and felt that was a better representation of the current weather than a background image so I wanted to implement that into my app.

Setting everything up was pretty straight forward except finding a suitable animated icon set. I had to search a bit before I found Skycons which is what I ended up using.

The other thing I struggled with was finding a good colour scheme for the app, and this is something I almost always struggle with. I experimented with different combinations before landing the final product.

Logic

After looking at an example API response from Open Weather, I figured I'll need to get the longitude and latitude of the user to be able to serve weather information on page load. Another an example API from ipinfo.io However, I rather using ipinfo.io because it does not have to annoying you to approve the geolocation, so I decided to find your IP address right away. It can find your location suddenly.

I am using jQuery JSON API from their command line.
function getLocation(){
$.get("http://ipinfo.io", function(json){
// console.log(json);

$('.city').append(json.city, ",");
$('.region').append(json.region);

var units = getUnits(json.country);
	getWeather(json.loc, units);
}, "jsonp");
}

I stored the returned values in already declared variables and used them to make the AJAX request.

The Open Weather API gave me a way to update the location, temperature and weather description. if you have not sign up api.openweathermap you will get an error as invalid API key (http://openweathermap.org/faq#error401). They starting from Oct 9 2015 to use their API requires a valid APPID for access. you can take a minute to register a free account to receive a key. Once you sign up, you will receive an API keys. My key is 27c8de069be4d25f07aeb818308889b8. It required to put &appid={{API_key}} in URL

Examples of API calls: Examples of API calls
http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=27c8de069be4d25f07aeb818308889b8

The last thing I did was to update the weather icon on the conditions in the user's location or city of interest. I decided a good way to do this was to check the weather description and change the icon based on that.

imperial (f) or metric (c)

How do you find the temp for imperial or metric in javascript? You will have to use an Kelvin Wiki . Converting Kelvin to celsius is easy, just subtract 273.15. units = imperial

see as main.temp JSON

Now, Removed &units=imperial without units = imperial or metric

See as main.temp JSON, noticed the temp is over hundreds number

You will have to use Kelvin, if you have 93 from main.temp JSON from units = imperial.
var metric = ((93 + 273.15)-30 * 1.8).toFixed(0); // 312.15
var temp = [ ( metric - 273.15).toFixed(0) + "°C", (93).toFixed(0) + "F"];
console.log(temp[0]); // metric
console.log(temp[1]); // imperial

// noticed only five countries imperial which are 

function getUnits(country){
	var imperialCountries =  ['US', 'BS', 'BZ', 'KY', 'PW'];
	if(imperialCountries.indexOf(country) === -1){
	var units = "metric";
	}else{
	var units ='imperial';
	}
	// console.log(country, units);
	return units
}

How do you display javascript datetime in 12 hours AM/PM format?

function clock(){
	var date = new Date();
	var hours = date.getHours();
	var minutes = date.getMinutes();
	var ampm = hours >= 12 ? 'pm' : 'am';
	hours = hours % 12;
	// console.log(hours);
	hours = hours ? hours : 12;
	// console.log(hours);
	minutes = minutes < 10 ? '0'+minutes : minutes;
	var strTime = hours + ':' + minutes + ' ' + ampm;
	// console.log(strTime);
	// return strTime;
}

So I considered a few possible scenarios such as clear sky, cloud, snow, sunny, rain e.t.c and wrote a bunch of conditional statements to check if the weather description contained one of keywords and then update the weather icon.
//Update Weather animation based on the returned weather description

var weather = json.weather[0].description;

if(weather.indexOf("rain") >= 0) {
	skycons.set("animated-icon", Skycons.RAIN);
}

else if (weather.indexOf("sunny") >= 0) {
skycons.set("animated-icon", Skycons.CLEAR_DAY);
}

I have discovered, through various tests, that this method is not 100% foolproof but it worked well enough for me to stick with it.

Key takeaway

My major takeaway from this project is that I learnt how to access each part of the returned JSON data from the API response and use it in different ways. Although my methodology needs some refining, it's bound to get better with more practice.

What's next...

The next project for me is the Wikipedia Viewer app. I'm halfway through already as I write this article so it should be completed by Thursday at the latest.

If you want to reach out or connect with me, you can find me on Twitter or email me.

Thanks for reading.


Google Ads