源代码/Github

本教程的 源代码 存储于GitHub上。请运行下列命令获取代码：

1. 打开终端程序，改变目录到你希望存储源代码的目录下
2. 输入 git clone git://github.com/dcgrigsby/luckynumbers.git 获取源代码
   

iPhone JSON 库

本教程使用了Stig Brautasetd的JSON library (version 2.2)，它提供了解析和生成JSON的功能。在本教程中没有使用生成JSON的功能。


此JSON库提供两种方法解析JSON：(1) 通过category对NSString进行扩展以实现JSON解析 (2) 较为底层一点的基于目标的解析器。本教程从简单方案开始，即方案(1)；在本教程介绍时将介绍方案(2)。

1. 下载 磁盘映像

在稍后的步骤中我们将介绍磁盘映像的使用。

创建项目

启动Xcode 并创建一个新的 View-Based iPhone 程序，命名为 LuckyNumbers:

1. 在Xcode菜单中使用 File > New Project… 创建一个新项目
2. 在 iPhone OS > Application 中点取View-Based Application，按下Choose…
3. 将此项目命名为 LuckyNumbers 并按下 Save

为此项目增添JSON支持

要使用JSON功能，我们需要将JSON库加入到项目中：

1. 在项目的 Groups & Files 面板上展开 LuckyNumbers 项目。
2. 使用Finder，找到你先前下载的 JSON_2.2.dmg 文件，双击加载磁盘映像。带有此DMG内容的另一个新的Finder窗口将打开
3. 将此DMG内容中的 JSON 目录拖入到Xcode Groups & Files 面板中LuckyNumbers 项目图标下的Classes 文件夹中

为测试JSON库是否正确设置，我们将解析一个JSON字典字符串，并在console中输出其结果NSDictionary。此功能是在viewDidLoad中完成。


在 LuckyNumbersViewController.m 中加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#import "LuckyNumbersViewController.h"

#import "JSON/JSON.h"



@implementation LuckyNumbersViewController



- (void)viewDidLoad {

    [super viewDidLoad];

    NSString *jsonString = [NSString stringWithString:@"{\"foo\": \"bar\"}"];

    NSDictionary *dictionary = [jsonString JSONValue];

    NSLog(@"Dictionary value for \"foo\" is \"%@\"", [dictionary objectForKey:@"foo"]);

}



- (void)dealloc {

    [super dealloc];

}



@end

运行项目。如果 JSON SDK 设置正确的话，你应该将在console中见到如下信息：“ Dictionary value for “foo” is “bar” ”.

简单UI设置

我们最终成品是使用 UILabel 来显示通过HTTP 和 JSON 获取的幸运数字。


在 LuckyNumbersViewController.h 使用如下代码：

1
2
3
4
5
6
7
#import <UIKit/UIKit.h>



@interface LuckyNumbersViewController : UIViewController {

    IBOutlet UILabel *label;

}



@end

IBOutlet 是一个宏，它通知编译器将变量与通过Interface Builder 的WYSIWYG添加的UILabel元件联系起来。下一步我们将添加元件并将这两部分连接起来。


在Interface Builder中编辑 LuckyNumbersViewController.xib 文件：

1. 在Groups & Files中展开LuckyNumbers下的 Resources 文件夹。
2. 双击 LuckyNumbersViewController.xib 文件。

确保 Library, Inspector 和 View 窗口都打开/可见。如果没有的话：

1. 在菜单中使用 Tools > Library 显示 Library 窗口
2. 在菜单中使用 Tools > Inspector 显示 Inspector 窗口
3. 在 LuckyNumbersViewController.xib 窗口中点击 View 图标

添加一个label:

1. 在Library 窗口中找到 Label 元件并拖入view
2. 在 View 窗口中将 label 放大到整个view的一半
3. 在 Inspector 窗口中的 View Attributes下 , 将 label 的行数设为0。

将 label 行数设为0表示lable的尺寸在其指定的边界内动态可变。


连接 Interface Builder 中的 label 到代码 label。 仍然在 Interface Builder 中:

1. Control + 点击LuckyNumbersViewController.xib 窗口中的 File’s Owner 图标
2. 在弹出菜单中，点击并按住Outlets 部分 lable 行右方的圆圈
3. 拖动鼠标到View中的 Label 上。 将出现一条蓝线连接这两个部分。

这两个部分连接后，弹出菜单将如图所示。





如果一切正常的话，保存并关闭Interface Builder。

通过HTTP获取 JSON 数据

我们将使用 Cocoa 中的 NSURLConnection 来发送一个 HTTP 请求从而获取 JSON 数据。


Cocoa 在进行HTTP请求时有两种选项：同步和异步。同步请求中程序的主runloop中运行，使得在请求的过程中，程序停止运行。而异步请求使用回调来避免程序锁住而且简单易用。因此我们使用异步请求。


首先我们需要修改视图控制器接口，创建一个NSMutableData变量来保存响应数据。我们在接口（.h）中而不是在方法中定义此变量是因为响应数据是逐步的而不是一次性返回的，我们需要将所有数据组合在一起。


修改 LuckNumbersViewController.h。改变如下黑体所示：

#import <UIKit/UIKit.h>

@interface LuckyNumbersViewController : UIViewController {
	IBOutlet UILabel *label;
	NSMutableData *responseData;
}

简单起见，我们在 viewDidLoad中进行HTTP请求。


修改 LuckyNumbersViewController.m :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#import "LuckyNumbersViewController.h"

#import "JSON/JSON.h"



@implementation LuckyNumbersViewController



- (void)viewDidLoad {

    [super viewDidLoad];



    responseData = [[NSMutableData data] retain];

    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.unpossible.com/misc/lucky_numbers.json"]];

    [[NSURLConnection alloc] initWithRequest:request delegate:self];

}



- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response {

    [responseData setLength:0];

}



- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data {

    [responseData appendData:data];

}



- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error {

    label.text = [NSString stringWithFormat:@"Connection failed: %@", [error description]];

}



- (void)connectionDidFinishLoading:(NSURLConnection *)connection {

    [connection release];

}



- (void)dealloc {

    [super dealloc];

}



@end

responseData 变量用来存放数据，然后在 viewDidload中进行HTTP连接;  didReceiveData用来收集返回的数据; 空白的 connectionDidFinishLoading 表示数据响应结束。

使用 JSON 数据

下面我们将展示怎样在 connectionDidFinishLoading 中对获取的 JSON 数据的进行处理。


修改LuckyNumbersViewController.m中的 connectionDidFinishLoading 方法。使用下面代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (void)connectionDidFinishLoading:(NSURLConnection *)connection {

    [connection release];



    NSString *responseString = [[NSString alloc] initWithData:responseData encoding:NSUTF8StringEncoding];

    [responseData release];



    NSArray *luckyNumbers = [responseString JSONValue];



    NSMutableString *text = [NSMutableString stringWithString:@"Lucky numbers:\n"];



    for (int i = 0; i < [luckyNumbers count]; i++)

        [text appendFormat:@"%@\n", [luckyNumbers objectAtIndex:i]];



    label.text =  text;

}

本文最开始的示例代码中使用了 NSDictionary。而现在我们使用 NSArray。 解析器非常灵活，其返回对象 – 包括嵌套对象 – 将 JSON数据类型与Objective-C的数据类型很好地匹配起来。

更好的错误处理

至此我们使用了NSString扩展的方法对JSON数据进行了解析。这样做是非常简单的。


但不幸的是，使用此方法是错误处理变得很困难。如果JSON解析器因为某种原因失败的话，它仅仅返回一个nil值。但是如果错误发生时你观察console，你就会发现一些信息描述了引擎解析器失败的原因。


如果我们能将详细错误信息传递给用户，那将更加用户友好。要达到这个目的，我们将切换到JSON SDK支持的第二种面向对象的方法。


修改LuckyNumbersViewController.m中connectionDidFinishLoading 方法。使用下面代码：

使用此方法可以帮助我们在JSON解析器发生错误时指出错误所在以便进行更好的错误处理。

结论

JSON SDK 和 Cocoa 固有的 HTTP功能使得在iPhone应用程序中运用JSON web service变得非常容易。


原文见：Tutorial: JSON Over HTTP On The iPhone

• 可以运行在任何平台上 （当然要考虑浏览器的兼容性和屏幕大小问题）
• 不需要学习iPhone编程语言
• 最大的好处是不需要经过App Store批准

随着Internet技术的迅速发展，使得Web App越来越强大，从简单的应用甚至到游戏，都可能通过Web App实现。但是，它要求随时连接到Internet，大大降低了Web App的实用性。随着Safari对HTML 5的支持，使得Web App的离线运行成为可能。这意味着你可以在没有Internet连接的情况下运行你的应用程序。

下面的例子改编自How to Make an HTML5 iPhone App，它介绍了创建一个离线“积木”游戏的全过程，我加上了创建用户自定义的桌面图标和启动画面的方法，使它看上去完全像一个真正的iPhone应用程序，而这是完全不需要通过Apple的App Store批准的。

基本要求

网页编程技术：HTML(5)， CSS 以及 JavaScript。

准备工作

由于我们要利用HTML5的离线缓存技术，我们需要访问网页服务器以便对文件的HTTP Headers进行修改（稍后我们会详细讨论）。

Apache服务器很容易通过修改 .htaccess 文件完成你需要的工作。这里是一篇教程关于 m使用htaccess修改HTTP header。

然后你需要打开Safari浏览器的调试窗以帮助你进行调试。在Settings > Safari > Developer中打开调试终端，它能够帮助你发现一些潜在的Javascript错误。记住在完成调试后，关闭调试窗。

应用程序缓存

HTML5 有关离线的标准参考这里。

应用程序缓存允许浏览器预先确定网页所需的所有文件，然后它将保存这些文件。格式是绝对地址如http://yourwebserver.com/picture.png 或者相对地址(/picture.png)，浏览器将离线保存这些文件。

你还可以列出不需要缓存的URL。最主要的部分是清单文件（需要离线缓存文件的清单）在Http Header中的filetype必须设置为text/manifest。

屏幕尺寸

在设计iPhone Web App时必须注意，当处于app模式时，屏幕尺寸为 320px X 460px，而在web模式时为 320px X 356px。这也许会影响你的用户界面设计。

代码

中的 manifest=”cache.manifest” 属性将告诉浏览器我们可能需要对文件进行离线缓存。

下面是Apple专用的HTML 5属性：

• 1	apple-mobile-web-app-capable

  : 设置为离线模式

• 1	apple-mobile-web-app-status-bar-style

  : 当处于离线时隐藏状态条，导航条

• 1	apple-touch-icon

  :指向作为图标的图像

• 1	apple-touch-startup-image

  : 指向作为启动图像的url

CSS

这几乎与普通网页完全一样。还有一些webkit专用的CSS能实现一些特殊效果如动画等。

我们使用的CSS如下：

body {
    overflow:hidden;
    background: #d7d7d7;
    margin:0;
    padding:0;
}
#tetris {
    width: 320px;
    height: 460px;
    background:#000;
}

JavaScript

我使用的是 Dalton Ridenhour 的Javascript，源代码在 Github。原JS是为普通网页设计的，我们仅需要修改一下拿掉对键盘的支持。

通常JS在iPhone上完全能正常工作，当然有一些例外。请参阅 events on the iPhone 。

下面是完成的网页，你可以进行测试，看看它是怎样离线运行的：

http://tetris.alexkessinger.net

设定图标和启动画面

使用iPhone Safari浏览器，很容易将应用程序的图标添加到你iPhone上的Home Screen。

• 首先，创建一个57×57的png图标。将其放在网站的文档根目录下（注意不是服务器的文档根目录）

• 在html中加入（见上面HTML代码部分） ，指向图标文件。
• 在html中加入（见上面HTML代码部分） ，指向启动画面图像文件。
• 打开浏览器，在地址栏输入你Web App的URL，按下浏览器下方的加号，选择“Add To Home Screen”,然后输入Web App的名称，比如Tetris。

这样一个积木游戏的图标就添加到了你的iPhone屏幕上，启动后即使你的iPhone没有在线，也可以正常运行。

我的设想

这样的Web App看上去与普通程序没什么大区别，不过却需要用户自己添加图标，这虽然不是什么大问题，但还不是很完美。我想要是在你的网页上添加一项“安装到iPhone/iPod Touch/iPad”，在按下后可以自动添加图标，那么一切就完美了。我现在还没有解决方法，大家有什么建议吗？

Quick SMTP client code for the iPhone

HTTP连接的头信息包括在NSHTPURLResponse类中。如果你拥有一个NSHTTPURLResponse变量，你可以通过发送allHeaderFields信息，轻而易举地获取以NSDictionary形式保存的头信息。

对于一个同步请求 – 由于会引发阻塞所以不推荐使用 – 是很容易初始化一个NSHTTPURLResponse的：

而对于异步请求，你必须多做点工作。当回调connection:didReceiveResponse:被调用时，NSURLResponse会被作为第二个参数传递。你就可以象下面代码那样将其转化为NSHTTPURLResponse: