Before I begin, a quick reminder that I am still way new to Angular 2 and Ionic 2. I’m trying to learn, but you should treat what follows as the ramblings of a semi-intelligent monkey doing his best to learn something new. So with that disclaimer out of the way, I’d love to share an application I built this week – Ionic Weather.

Ionic Weather is heavily influenced by the excellent Yahoo Weather mobile app (available on both iOS and Android, the previous link is just for the iOS version). I was motivated to build this app by the NativeScript Weather App challenge , and while obviously this isn’t NativeScript, I figured I’d try it first in Ionic 2 and then see if I could build something similar in NativeScript.

Ionic Weather has a simple interface. When you start up, you are prompted to select your first city.

Clicking Add Location (or the + in the UI) opens up a prompt:

Enter a location and then it will be added to your list of cities. I then render a picture based on the weather and report on it in text.

The text here was arbitrary. I initially went with a tabular interface, but I thought a descriptive text version would be kind of cool. The storm thing is kind of personal. I love storms, but I’ve got an incredible phobia of them as well. Not sure if that makes sense, but when I found that the API I was using supported the feature, I had to include it.

When more cities are added, you use a swipe interface to switch between them. I don’t yet support a way of deleting cities, but I’ll add that sometime in the future. (Maybe. I tend to say stuff like that and never actually get around to doing it.)

The top portion of the template is the simple header. You can see the button used to add locations as well.

Next, I’ve got two <ion-content> blocks. This is how I handle that initial view when you have no locations. When there are locations, I loop over them and display weather data for each. You’ll notice I’m using a second array, weatherData , for probably what will end up being a dumb reason, but let’s worry about that later.

That’s the view, now let’s discuss the services I use. When you enter an address, I use Google’s Geocoding API to reverse geocode the address to a longitude and latitude value. Here’s that code.

All I do is call their API with the address and massage the result a bit to make it simpler for the caller.

The Weather service is provided by Forecast.io . They have a great API, and I thought the storm info was neat. My only real concern is their support. I’m not a paying customer, but I reached out to them two days ago with a question and never heard back from them. (For folks curious about my question, the storm info they provide includes a distance and a bearing, but not a location. So you know how far away a storm is and the direction it is heading, but not the exact location of the storm. So basically you can’t tell if the storm is approaching you.) Here is the code for that service.

In this service, I don’t change the result at all so it is much simpler.

So – all that leaves then is the logic for the home page itself. It is… a bit messy. I want to talk about what I did before I just dump a bit page of code down so that it will – hopefully – make a bit more sense.

In general, my logic begins with a check to see if you have locations. I use LocalStorage to store an array of location objects. I kept this code within the home logic and didn’t abstract it out to a service itself, but obviously that’s something I could do too. When I store a location, it is only after the Google Geocode call, so I have a place name and longitude/latitude pair.

Here comes the fun part. When I render out the location, I do an async call to fetch the weather for the location. I ran into issues when I added new locations and they didn’t have their weather yet. This led me to working with 2 different arrays, locations and weatherData . I keep them in sync so that index N of locations matches index N of weatherData.

I want to stress that I don’t necessarily think this makes sense… but it worked. The last bit I added was the background image. That ended up being a royal pain in the rear because… well… CSS. The Yahoo Weather app does some cool Flickr integration where they’ll show a picture relevant to your location. I decided to go much simpler and pick hard coded images based on the weather type. Here is what my CSS is now:

So my code checks the weather and then applies the appropriate class. I’ve only done two so far (and Forecast.io doesn’t actually give you all the possible condition values) but obviously it wouldn’t be hard to add more in.