订阅移动开发RSS CSDN首页> 移动开发

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

发表于2015-08-17 14:38| 次阅读| 来源appcoda| 0 条评论| 作者Gregory Tareyev

摘要:本文作者以自己做Apple Watch开发的实际经验,展示了如何使用第三方API和WatchKit构建简单的天气应用程序,以及为何在可穿戴设备上进行开发如此重要。

理解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”键。这就是我们要在屏幕上显示的信息。


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

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

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


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


在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”变量中。



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

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

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

-(void)setImageAndTextWithWeather:(NSString* ) weatherName
{
     // 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". 
     
     // Set the weather type to the given weather name
}

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

-(void)setImageAndTextWithWeather:(NSString* ) weatherName
{
        NSString* weatherNameWithoutSpaces = [weatherName stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]]; //delete potential spaces in JSON array
        [_weatherImage setImageNamed:[weatherNameWithoutSpaces stringByAppendingString:@".jpg"]];
    
    NSMutableAttributedString *customString = [[NSMutableAttributedString alloc] initWithString:weatherNameWithoutSpaces];
    [customString addAttribute:NSFontAttributeName
                         value:[UIFont systemFontOfSize:18] 
                  range:NSMakeRange(0, [weatherNameWithoutSpaces length])]; //Making text more readable by creating a custom string
 
    [_weatherType setAttributedText:customString];
}
最后,在updateAction方法的结尾加上这行代码:

[self setImageAndTextWithWeather:currentWeather];

在Asset Catalog中添加图像

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


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

测试应用程序

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


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

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

(翻译/白云鹏 友情审校/张挥戈)

原文链接:appcoda

原文作者:Gregory Tareyev,iOS开发者,Chill联合创始人。

译者简介:白云鹏,移动应用开发者,个人博客:http://baiyunpeng.com/


预告: 2015中国移动开发者大会(MDCC 2015)将于10月15-16日在北京新云南皇冠假日酒店召开。大会特设五大技术专场:平台与技术iOS、平台与技术Android、产品与设计、游戏开发、企业移动化。此外,大会更是首次举办国内极具权威影响力的IoT技术峰会,特设硬件开发技术与虚拟现实两大专场。大会将聚集国内最具实力的产品技术团队,与开发者一道进行最前沿的探讨与交流。


第一时间掌握最新移动开发相关信息和技术,请关注mobilehub公众微信号(ID: mobilehub)。  

0
0
  • CSDN官方微信
  • 扫描二维码,向CSDN吐槽
  • 微信号:CSDNnews
程序员移动端订阅下载

微博关注

相关热门文章