23 9月

使用JSON和WatchKit构建简单的天气应用程序

文 / Gregory Tareyev:iOS开发者,http://iamchill.com联合创始人。

原文链接:http://www.appcoda.com/weather-watchkit-app/

编辑注:这是论坛游客Gregory Tareyev发的帖,他是iOS开发人员和Chill(iamchill.co)的联合创始人。开发的首个可穿戴通信工具让你和朋友们动动指尖就能互动。在本文中,Gregory将分享自己做Apple Watch开发的经验,向你展示如何使用第三方API和WatchKit构建简单的天气应用程序。我们已经写了两篇与WatchKit有关的文章,都是使用Swift语言完成的。一些读者提到是否能有一篇使用Objective-C的文章,这篇便是。

Gregory的文章从这里开始……

大家好,我是Gregory Tareyev(可以来tareyev.ru联系我),是iOS开发人员和Chill(iamchill.co)的联合创始人。第一款可穿戴的通信工具终于搞定了。最近我们在Product Hunt上展示的产品有着不俗的表现,使我们在社区内获得了广泛的影响力并吸引了主要的技术博客报道这次发布。我们也在讨论使用加速器的问题,并考虑使用最好的那种。为构建应用程序而着实努力着,我相信你们每个人都可以为此而努力。

55d1486e117dc_middle

在这里想要与你分享我的Apple Watch开发经验。很有趣,也不难。

为了调动你的兴趣,我要解释在可穿戴设备上进行开发为何如此重要。

  1. 市场仍然不太大,这等同于作为先行者,你可以获得更大的市场份额。
  2. 市场将会获得极大增长,这等同于相关产品规模会随着市场同步增长。

55d14acdba958_middle

来源:图表由Business Insider提供。

在本文中,构建一个简单的Apple Watch天气应用程序,要完成两件事:

  • 如何在使用WatchKit在应用程序中解析JSON数据
  • 如何使用OpenWeatherMap的API(一旦明白其中的道理,你应该能够选择任何基于JSON的API来使用)

我们开始吧!

应用程序示例

示例程序是一款非常简单的天气应用程序,会使用OpenWeatherMap的API得到特定城市(例如:伦敦)的天气信息。这是应用程序最终样例的截图。

55d14b794590b

创建Xcode工程

首先,创建一个Single View Application,并按照如下截图设置项目信息。没错儿,我们使用Objective-C来做,我觉得Objective-C仍然很重要,还是要继续使用的。

55d14bcd1445f_middle

创建一个Watch应用程序,到Xcode顶部菜单栏选取File > New > Target…,选择Apple Watch > WatchKit App。由于使用WatchKit App模版,所以会生成构建Watch应用程序所需要的一切。

55d14ccb2a8f8_middle

取消选择“Include Notification Scene”,其余项保留,点击Finish。

simple-weather-watch-app

你会得到一条警告信息问是否要激活,点击Activate就是了。然后就会看到两个新文件夹:WatchKit Extension和WatchKit App。

simple-weather-watch-scheme

设计应用程序的用户接口

接下来,我们要着手设计应用程序的用户接口。为此,点击“SimpleWeather WatchKit App”下的Interface.Storyboard文件。

首先,从对象库(Object Library)拖拽一个Lable控件,名称设置为“Weather in London”。控件上字体大小可能需要调整一下。然后拖拽一个Image控件。接着再来一个Button控件。你会发现图像和按钮都会自动布局,垂直堆放。把按钮的Title改为“Update”,颜色调为绿色并调整图像的尺寸。

simple-weather-watch-ui

标签用来显示气象类型,而图像显示气象类型的插图。Update按钮是与用户交互的唯一元素,用来更新天气信息。

Interface Builder可以让你看到Apple Watch不同版本的视图。默认情况下,Interface Controller被设置成Any Screen Size。可以点击Interface Builder下方的“Any Screen Size”按钮,在Apple Watch 38/42mm这两种尺寸间切换。如果切换到Apple Watch 42mm,就会发现图像不完全合适,要调整图像大小,把所有控件布局弄好为止。因为更改图像大小时,Xcode会自动添加对布局做特殊处理。这种情况只在选择Apple Watch 42mm的才出现。

simple-weather-watch-ui-42

理解JSON和OpenWeatherMap的API

已经说过了,我们使用OpenWeatherMap的API来得到天气数据。为了理解它是如何工作的,要打开这个链接:http://api.openweathermap.org/data/2.5/weather?q=London,uk。拷贝结果并粘贴到http://json.parser.online.fr。你会看到结构化的JSON数据。在这里,我们感兴趣的是天气类型,也就是dictionary类型数据“weather”下的“main”键。这就是我们要在屏幕上显示的信息。

openweather-api-json

作为参考,可以在http://openweathermap.org/api查看API文档。

现在,一起来看如何解析JSON数据,并把天气信息在应用程序中展现出来。

打开Assistant Editor,按住Control键拖拽Label控件到InterfaceController.h文件的代码中做关联,把outlet命名为“weatherType”。

add-label-outlet

重复上述过程,将Image控件也做好关联,把Outlet命名为“weatherImage”。在给Update按钮做关联时,不要选择Outlet,选择Action类型,并命名为“updateAction”。

add-update-action

在InterfaceController.m文件中为updateAction方法添加逻辑代码:

- (IBAction)updateAction
{
    NSURLRequest* requestForWeatherData = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://api.openweathermap.org/data/2.5/weather?q=London,uk"]];
    NSURLResponse* response = nil;
    NSError* error = nil; //do it always
 
    NSData* data = [NSURLConnection sendSynchronousRequest:requestForWeatherData returningResponse:&response error:&error]; //for saving all of received data in non-serialized view
    
    NSMutableDictionary *allData = [ NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error]; //data in serialized view
    NSString* currentWeather = nil;
    
    NSArray* weather = allData[@"weather"];
    
    for (NSDictionary* weatherDictionary in weather)
    {
        currentWeather = weatherDictionary[@"main"];
    }
}

该方法中,使用了NSURLConnection对OpenWeatherMap同步发出请求。可以使用NSJSONSerialization把JSON数据转换为Foundation基础库类型(例如:NSDictionary)。我们对数据进行解析以后将天气类型存入“currentWeather”变量中。

接下来,要更新标签和图像。

weather-image-if

这样代码看起来不是太美观,对吧?

为了避免对天气类型进行硬编码,可以创建如下方法。这样会使代码更灵活。

  1. -(void)setImageAndTextWithWeather:(NSString* ) weatherName
  2. {
  3.      // Use the weather type as the weather image name. For example, if the weather name is “Rainy”, the image name is set to “rainy.jpg”. 
  4.      // Set the weather type to the given weather name
  5. }

很不错!我们把方法放到真实的代码中:

  1. -(void)setImageAndTextWithWeather:(NSString* ) weatherName
  2. {
  3.         NSString* weatherNameWithoutSpaces = [weatherName stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]]; //delete potential spaces in JSON array
  4.         [_weatherImage setImageNamed:[weatherNameWithoutSpaces stringByAppendingString:@“.jpg”]];
  5.     NSMutableAttributedString *customString = [[NSMutableAttributedString alloc] initWithString:weatherNameWithoutSpaces];
  6.     [customString addAttribute:NSFontAttributeName
  7.                          value:[UIFont systemFontOfSize:18]
  8.                   range:NSMakeRange(0, [weatherNameWithoutSpaces length])]; //Making text more readable by creating a custom string
  9.     [_weatherType setAttributedText:customString];
  10. }

最后,在updateAction方法的结尾加上这行代码:

[self setImageAndTextWithWeather:currentWeather];

在Asset Catalog中添加图像

运行应用程序之前,下载这些图像。解压缩后把这些图像全部添加到SimpleWeather WatchKit App文件夹下的Images.xcassets里。

simple-weather-images

可以随便添加更多带有天气类型名称的图像。应用程序不用更改任何代码就可以运行。

测试应用程序

差不多了!现在可以在Apple Watch模拟器中构建并运行应用程序了。选择“WatchKitDemo WatchKit App”项目,并选择合适的设备,然后点击Run按钮,测试Apple Watch应用程序。另外,还可以修改模拟器显示的尺寸,选择Hardware > External Displays > Apple Watch – 38mm。

55d151607af6f_middle

很棒!你开发完成了一款Apple Watch天气应用程序。

作为参考,可以在这里下载最终的项目

http://www.csdn.net/article/2015-08-17/2825474/2

发表评论

电子邮件地址不会被公开。 必填项已用*标注