Tutorial

Building a Simple Weather App using JSON and WatchKit


Editor’s note: This is a guest post by Gregory Tareyev, a co-founder and iOS developer of Chill (iamchill.co), the first wearable communication tool that lets you interact with your friends with a tap. In this tutorial, Gregory will share his experience on Apple Watch development and show you how to build a simple weather app using a third-party API and WatchKit. We have written a couple of tutorials about WatchKit. All of them are in Swift. Some readers mentioned if we can provide a tutorial in Objective-C. So here it is.

Enter Gregory’s tutorial.

Hello everybody! My name is Gregory Tareyev (tareyev.ru for any contacts). I am a co-founder and iOS developer of Chill (iamchill.co), the first wearable communication tool that finally makes sense. Recently we had a great experience on launching Chill on Product Hunt which gave us a lot of visibility in the community and attracted major tech blogs to cover the release. We are also discussing our involvement with a few accelerators and considering the best one. We worked really hard to build the app, but I assure you that everybody can do something like that.

Here, I want to share some experience on the app development for Apple Watch. It’ll be easy and fun.

To warm up your interest, I want to explain why it is so important to learn how to develop on wearable devices:

  1. The market is still small = you can get a bigger market share as a first-time mover
  2. The market is going to grow tremendously = the product will grow along with the market
global-wearable-device-shipment
Credit: The chart is provided by Business Insider.

In this tutorial, we will build a simple weather app for Apple Watch. We will go through a couple of things:

  • How to parse JSON in WatchKit app
  • How to use OpenWeatherMap API (once you understand it, you should be able to use any JSON-based APIs)

So, let’s get started!

The Demo App

The demo app is a very simple weather app. We’re going to use OpenWeatherMap’s API to get the weather information for a particular city (e.g. London). Here is the sample screen of the final app:

weather-app

Creating the Xcode Project

First, create a Single View Application and configure the project option like below. Yes, we’re going to write in Objective-C. I think it’s still important, so let’s not forget this wonderful language.

Simple weather watch app

To create a Watch app, go up to the Xcode menu and select Editor > Add Target. Choose Apple Watch > WatchKit App. By using the WatchKit App template, it will generate everything you need to build a Watch app.

simple-weather-add-target

Deselect “Include Notification Scene” and leave other details as they are and then press finish.

simple-weather-watch-app

Now you will get a warning to ask if you want to activate the new scheme. Just accept it. You’ll then see two new folders: WatchKit Extension and WatchKit App.

simple-weather-watch-scheme

Designing the UI

Next, we will start to design the user interface of the Watch app. To do that, you have to navigate to “SimpleWeather WatchKit App” and select the Interface.Storyboard File.

First, drag a label from the Object library into the Interface Controller. Name it “Weather in London”. You may need to decrease the font size. Then drag an image, followed by a button into the Interface Controller. You will see that the image and button are layout automatically and stacked vertically. Change the title of the button to “Update” and color to green. Resize the image so that it looks like the screen below:

simple-weather-watch-ui

The label is used to show the weather type, while the image shows an illustration of the weather type. The Update button is the only element that interacts with the user, and is used for updating the weather information.

Interface Builder lets you view the design on different version of Apple Watch. By default, the Interface Controller is set to Any Screen Size. You can click the “Any Screen Size” button at the bottom of the Interface Builder and switch to Apple Watch 38/42mm. If you switch to Apple Watch 42mm, you will find that the image is not perfectly fit. Just resize the image and make sure everything is layout correctly. As you change the size of the image, Xcode automatically adds layout specialisation, just for Apple Watch 42mm.

simple-weather-watch-ui-42

Understanding JSON and OpenWeatherMap’s API

As mentioned, we use OpenWeatherMap’s API to get the weather data. To understand how it works, open this link: http://api.openweathermap.org/data/2.5/weather?q=London,uk. Copy the resulting text and paste it into http://json.parser.online.fr. You’ll see the JSON data, presented in a structured way. Here, what we are interested in is the weather type, i.e in the “main” key of the “weather” dictionary. This is the information we’ll display it on screen.

openweather-api-json
For reference, you can refer to the API’s documentation at http://openweathermap.org/api.

Now let’s see how we can parse the JSON data and present the weather information in the app.

To begin, open the Assistant editor. Control-drag from the label to your code in InterfaceController.h file. Name the outlet “weatherType” like this:

add-label-outlet

Repeat the same step for the image. Name the outlet “weatherImage” instead. When connecting the update button, instead of selecting Outlet, select Action and name it “updateAction”.

add-update-action

Let’s add logic in the updateAction method of the InterfaceController.m file:

In this method, we use NSURLConnection to make a synchronous request to the OpenWeatherMap API. You can use NSJSONSerialization to convert JSON to Foundation objects (e.g. NSDictionary). We parse the data and save the weather type in the “currentWeather” variable.

Next, we need to update the label and image. We can write something like this:

weather-image-if

The code is not very pretty, isn’t it?

Instead of hardcoding the weather type, create a method like below, it’ll make your code more flexible.

Awesome! Now let’s turn the method into real code:

Finally, add this line to the end of the updateAction method:

Adding Images to the Asset Catalog

One last thing before running the app. Download this image pack, unzip it and add all the images to Images.xcassets under the SimpleWeather WatchKit App folder.

simple-weather-images

You are free to add more images with appropriate weather names. The app will work properly without any code changes.

Test the App

That’s it! Now You can build and run the app in the Apple Watch simulator. To run the app, select the “WatchKitDemo WatchKit App” scheme and choose your preferable device. Then click the run button to test the Watch app. Optionally, you can change the display size of the watch simulator by selecting Hardware > External Displays > Apple Watch – 38mm.

simple-weather-simulator

Great! You’ve built a weather app for Apple Watch. What do you think about tutorial? Leave me comment and share your thought. I love to hear your feedback.

For your reference, you can download the final project here.

This is a guest post by Gregory Tareyev, a co-founder and iOS developer of Chill (iamchill.co).

iOS
How to Integrate Google Sign In into Your iOS Apps
iOS
iOS Programming 101: How To Customize Tab Bar Background and Appearance
iOS
Swift Tutorial: Building an iOS Chat App Using Socket.IO
Shares