CocoaPods.org上的BlipCards - CocoaPods 中文

一个简单的SDK，便于在iOS应用程序中添加BLiP Cards。

要使用Blip Cards for iOS，必须针对iOS 8或更高版本。

通过CocoaPods将Blip Cards for iOS导入到您的项目中

如果您还没有安装CocoaPods，请通过运行以下命令进行安装
```
 $ [sudo] gem install cocoapods
 $ pod setup
```
在项目目录中创建一个名为Podfile（不带任何文件扩展名）的纯文本文件。将以下行添加到文件中，并用您的实际目标名称替换YourTarget
```
 target 'YourTarget' do
   use_frameworks!
   pod "BlipCards"
 end
```
运行以下命令。
```
 $ pod install
```
使用Xcode打开*.xcworkspace并开始使用项目。

注意：请不要使用*.xcodeproj。如果您这样做，您会收到一个错误，表明无法获取pod项目。

所有消息类型都基于JSON进行卡片配置。有关详细信息，请参阅Lime Protocol内容类型。

要创建任何类型的卡片，您需要一个准备好的UIView来显示它。完成此操作后，您可以使用类BlipCards来返回卡片的构建器。

使用BlipCard对象，您需要使用left、right和withoutSide方法指定卡片应显示的侧面，并传递容器视图。例如：

Builder *b = [[[BlipCard alloc] init] left: myConteiner]

一旦设置了Builder对象，现在您必须使用setDocument: myDictionary设置消息文档。

之后，在构建您的卡片之前可以做一些自定义设置，例如使用setChatName:@"Sender"]添加发件人名称，或者为菜单选择定义委托builder.menuDelegate = self;。

将所有内容组合起来，构建卡片的基礎步骤是：

Builder *b = [[[[BlipCard alloc] init] left:_content] setDocument:json];
UIView *v = [b build];

示例

聊天状态

添加聊天状态

Objective-C

NSString *message = @"{\"to\":\"[email protected]\",\"type\":\"application/vnd.lime.chatstate+json\",\"content\": {\"state\": \"composing\"}}";

// Get a NSDictionary from the JSON
NSError *jsonError;
NSData *objectData = [message dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:objectData
			options:NSJSONReadingMutableContainers													error:&jsonError];

// Build the card from the NSDictionary
Builder *b = [[[[BlipCard alloc] init] left:_content] setDocument:json];

// Add item to view
[self addItem: [b build]];

结果如下：

文本卡片

添加收到的文本卡片，带有发件人名称和消息时间

Objective-C

NSString *message = @"{\"id\":\"1\",\"to\":\"[email protected]\",\"type\":\"text/plain\",\"content\":\"My Text\"}";

// Get a NSDictionary from the JSON
NSError *jsonError;
NSData *objectData = [message dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:objectData
                        options:NSJSONReadingMutableContainers
                        error:&jsonError];

// Build the card from the NSDictionary
Builder *b = [[[[[[BlipCard alloc] init] left:_content] setChatName:@"Text Card"] setChatDateTime:@"15:30"] setDocument:json];

// Add item to view
[self addItem: [b build]];

结果如下：

媒体卡片（音频）

添加收到的音频卡片，带有发件人名称和消息时间

Objective-C

 NSString *message = @"{\"id\": \"2\",\"to\": \"[email protected]\",\"type\": \"application/vnd.lime.media-link+json\",\"content\": {\"type\": \"audio/mp3\",\"uri\": \"http://blaamandagjazzband.dk/jazz/mp3/basin_street_blues.mp3\",\"size\": 3124123}}";

// Get a NSDictionary from the JSON
NSError *jsonError;
NSData *objectData = [message dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:objectData												options:NSJSONReadingMutableContainers													error:&jsonError];

// Build the card from the NSDictionary
Builder *b = [[[[[[BlipCard alloc] init]
					left:_content] setChatName:@"Blip Teste"] setChatDateTime:@"15:30"]
				setDocument:json];

// Add item to view
[self addItem: [b build]];

结果如下：

媒体卡片（视频）

添加收到的视频卡片，带有发件人名称和消息时间

Objective-C

 NSString *message = @"{\"id\": \"2\",\"to\": \"[email protected]\",\"type\": \"application/vnd.lime.media-link+json\",\"content\": {\"type\": \"video/mp4\",\"uri\": \"http://www.onirikal.com/videos/mp4/nestlegold.mp4\",\"size\": 3124123,\"previewUri\": \"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS8qkelB28RstsNxLi7gbrwCLsBVmobPjb5IrwKJSuqSnGX4IzX\",\"previewType\": \"image/jpeg\"}}";

// Get a NSDictionary from the JSON
NSError *jsonError;
NSData *objectData = [message dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:objectData												options:NSJSONReadingMutableContainers
			error:&jsonError];

// Build the card from the NSDictionary
Builder *b = [[[[[[BlipCard alloc] init]
					left:_content] setChatName:@"Blip Teste"] setChatDateTime:@"15:30"]
				setDocument:json];

// Add item to view
[self addItem: [b build]];

结果如下：

媒体卡片（图片）

添加收到的图片卡片，带有发件人名称和消息时间

Objective-C

 NSString *message = @"{\"id\": \"1\",\"to\": \"[email protected]\",\"type\": \"application/vnd.lime.media-link+json\",\"content\": {\"title\": \"Cat\",\"text\": \"Here is a cat image for you!\",\"type\": \"image/jpeg\",\"uri\": \"http://2.bp.blogspot.com/-pATX0YgNSFs/VP-82AQKcuI/AAAAAAAALSU/Vet9e7Qsjjw/s1600/Cat-hd-wallpapers.jpg\",\"aspectRatio\": \"1:1\",\"size\": 227791,\"previewUri\": \"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS8qkelB28RstsNxLi7gbrwCLsBVmobPjb5IrwKJSuqSnGX4IzX\",\"previewType\": \"image/jpeg\"}}";

// Get a NSDictionary from the JSON
NSError *jsonError;
NSData *objectData = [message dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:objectData
			options:NSJSONReadingMutableContainers
			error:&jsonError];

// Build the card from the NSDictionary
Builder *b = [[[[[[BlipCard alloc] init]
					left:_content] setChatName:@"Blip Teste"] setChatDateTime:@"15:30"]
				setDocument:json];

// Add item to view
[self addItem: [b build]];

结果如下：

媒体卡片（文档）

添加接收到的文档卡片，包含发件人名称和消息时间

Objective-C

 NSString *message = @"{\"id\": \"2\",\"to\": \"[email protected]\",\"type\": \"application/vnd.lime.media-link+json\",\"content\": {\"type\": \"application/pdf\",\"uri\": \"https://s3-sa-east-1.amazonaws.com/i.imgtake.takenet.com.br/d6ztq/d6ztq.pdf\",\"size\": 3124123,\"text\": \"Document PDF\"}}";

// Get a NSDictionary from the JSON
NSError *jsonError;
NSData *objectData = [message dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:objectData
			options:NSJSONReadingMutableContainers
			error:&jsonError];

// Build the card from the NSDictionary
Builder *b = [[[[[[BlipCard alloc] init]
					left:_content] setChatName:@"Blip Teste"] setChatDateTime:@"15:30"]
				setDocument:json];

// Add item to view
[self addItem: [b build]];

结果如下：

位置卡片

添加接收到的位置卡片，包含发件人名称和消息时间

Objective-C

 NSString *message = @"{\"id\": \"1\",\"to\": \"[email protected]\",\"type\": \"application/vnd.lime.location+json\",\"content\": {\"latitude\": -19.918899,\"longitude\": -43.959275,\"altitude\": 853,\"text\": \"Take's place\"}}";

// Get a NSDictionary from the JSON
NSError *jsonError;
NSData *objectData = [message dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:objectData
			options:NSJSONReadingMutableContainers
			error:&jsonError];

// Build the card from the NSDictionary
Builder *b = [[[[[[BlipCard alloc] init]
					left:_content] setChatName:@"Blip Teste"] setChatDateTime:@"15:30"]
				setDocument:json];

// Add item to view
[self addItem: [b build]];

结果如下：

网页链接卡片

添加接收到的网页链接卡片，包含发件人名称和消息时间

Objective-C

 NSString *message = @"{\"id\": \"1\",\"to\": \"[email protected]\",\"type\": \"application/vnd.lime.web-link+json\",\"content\": {\"uri\": \"http://www.uol.com.br\",\"target\": \"self\",\"text\": \"Segue documentação do web-link\"}}";

// Get a NSDictionary from the JSON
NSError *jsonError;
NSData *objectData = [message dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:objectData
			options:NSJSONReadingMutableContainers
			error:&jsonError];

// Build the card from the NSDictionary
Builder *b = [[[[[[BlipCard alloc] init]
					left:_content] setChatName:@"Blip Teste"] setChatDateTime:@"15:30"]
				setDocument:json];

// Add item to view
[self addItem: [b build]];

结果如下：

多媒体菜单卡片

添加接收到的多媒体菜单卡片，包含发件人名称和消息时间

Objective-C

 NSString *message = @"{\"id\": \"1\",\"to\": \"[email protected]\",\"type\": \"application/vnd.lime.document-select+json\",\"content\": {\"header\": {\"type\": \"application/vnd.lime.media-link+json\",\"value\": {\"title\": \"Preench. de Proposta\",\"text\": \"Tire dúvidas sobre, proposta, código SMS, modelo do veículo, entre outros. \",\"type\": \"image/jpeg\",\"uri\": \"http://files.lojas.club/blip.png\",\"aspectRatio\": \"1:1\"}},\"options\": [{\"label\": {\"type\": \"text/plain\",\"value\": \"Item 1\"},\"value\": {\"type\": \"application/json\",\"value\": {\"action\": \"show-items\"}}},{\"label\": {\"type\": \"text/plain\",\"value\": \"Item 2\"},\"value\": {\"type\": \"application/json\",\"value\": {\"action\": \"show-items\"}}},{\"label\": {\"type\": \"text/plain\",\"value\": \"Item 3\"},\"value\": {\"type\": \"application/json\",\"value\": {\"action\": \"show-items\"}}}]}}";

// Get a NSDictionary from the JSON
NSError *jsonError;
NSData *objectData = [message dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:objectData
			options:NSJSONReadingMutableContainers
			error:&jsonError];

// Build the card from the NSDictionary
Builder *b = [[[[[[BlipCard alloc] init]
					left:_content] setChatName:@"Blip Teste"] setChatDateTime:@"15:30"]
				setDocument:json];

// Add item to view
[self addItem: [b build]];

结果如下：

快速回复

添加发送的快速回复，包含发件人名称

Objective-C

NSString *message = @"{\"id\":\"311F87C0-F938-4FF3-991A-7C5AEF7771A5\",\"to\":\"[email protected]\",\"type\":\"application/vnd.lime.select+json\",\"content\":{\"text\":\"Escolha uma opção\",\"options\":[{\"text\":\"Primeira opção\"},{\"order\":2,\"text\":\"Segunda opção\"},{\"order\":3,\"text\":\"Terceira opção\",\"type\":\"application/json\",\"value\":{\"key1\":\"value1\",\"key2\":2}}]}}";

// Get a NSDictionary from the JSON
NSError *jsonError;
NSData *objectData = [message dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:objectData
                 	options:NSJSONReadingMutableContainers
                        error:&jsonError];

// Build the card from the NSDictionary
Builder *b = [[[[[BlipCard alloc] init] right:_content] setChatName:@"Quick Reply"] setDocument:json];
NSArray *vs = [b buildItens];

[self addItem:[vs objectAtIndex:0]];

QuickReplyOption *o = [vs objectAtIndex:1];

o.delegate = self;

[self addItem:o];

// Add item to view
[self addItem: [b build]];

结果应如以下卡片所示

滚动条

添加接收到的滚动条，不包含名称和时间

Objective-C

NSString *message = @"{\"id\":\"5\",\"to\":\"[email protected]\",\"type\":\"application/vnd.lime.collection+json\",\"content\":{\"itemType\":\"application/vnd.lime.document-select+json\",\"items\": [{\"header\":{\"type\":\"application/vnd.lime.media-link+json\",\"value\":{\"title\":\"Preench. de Proposta 1\",\"text\":\"Tire dúvidas sobre, proposta, código SMS, modelo de veículo, entre outros\",\"type\":\"image/jpeg\",\"uri\":\"http://files.lojas.club/blip.png\"}},\"options\": [{\"label\":{\"type\":\"text/plain\",\"value\":\"Opção 1\"},\"value\":{\"type\":\"application/json\",\"value\":{\"key1\":\"value1\",\"key2\": 2}}},{\"label\":{\"type\":\"text/plain\",\"value\":\"Opção 2\"},\"value\":{\"type\":\"application/json\",\"value\":{\"key1\":\"value1\",\"key2\": 2}}}]},{\"header\":{\"type\":\"application/vnd.lime.media-link+json\",\"value\":{\"title\":\"Preench. de Proposta 2\",\"text\":\"Tire dúvidas sobre, proposta, código SMS, modelo de veículo, entre outros\",\"type\":\"image/jpeg\",\"uri\":\"http://files.lojas.club/blip2.png\"}},\"options\": [{\"label\":{\"type\":\"text/plain\",\"value\":\"Opção 1\"},\"value\":{\"type\":\"application/json\",\"value\":{\"key3\":\"value3\",\"key4\": 4}}},{\"label\":{\"type\":\"text/plain\",\"value\":\"Opção 2\"},\"value\":{\"type\":\"application/json\",\"value\":{\"key5\":\"value5\",\"key6\": 6}}}]},{\"header\":{\"type\":\"application/vnd.lime.media-link+json\",\"value\":{\"title\":\"Preench. de Proposta 1\",\"text\":\"Tire dúvidas sobre, proposta, código SMS, modelo de veículo, entre outros\",\"type\":\"image/jpeg\",\"uri\":\"http://files.lojas.club/blip.png\"}},\"options\": [{\"label\":{\"type\":\"text/plain\",\"value\":\"Opção 1\"},\"value\":{\"type\":\"application/json\",\"value\":{\"key1\":\"value1\",\"key2\": 2}}},{\"label\":{\"type\":\"text/plain\",\"value\":\"Opção 2\"},\"value\":{\"type\":\"application/json\",\"value\":{\"key1\":\"value1\",\"key2\": 2}}}]},{\"header\":{\"type\":\"application/vnd.lime.media-link+json\",\"value\":{\"title\":\"Preench. de Proposta 2\",\"text\":\"Tire dúvidas sobre, proposta, código SMS, modelo de veículo, entre outros\",\"type\":\"image/jpeg\",\"uri\":\"http://files.lojas.club/blip2.png\"}},\"options\": [{\"label\":{\"type\":\"text/plain\",\"value\":\"Opção 1\"},\"value\":{\"type\":\"application/json\",\"value\":{\"key3\":\"value3\",\"key4\": 4}}},{\"label\":{\"type\":\"text/plain\",\"value\":\"Opção 2\"},\"value\":{\"type\":\"application/json\",\"value\":{\"key5\":\"value5\",\"key6\": 6}}}]}]}}";;

// Get a NSDictionary from the JSON
NSError *jsonError;
NSData *objectData = [message dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *json = [NSJSONSerialization JSONObjectWithData:objectData
	             	options:NSJSONReadingMutableContainers
                        error:&jsonError];

// Build the card from the NSDictionary
Builder *b = [[[[[BlipCard alloc] init] left:_content] setChatName:@"Carousel"] setDocument:json];

// Add item to view
[self addItem: [b build]];

结果如下：

指南

BLiP Cards Android 中图片的最佳实践。

最佳尺寸以确保良好的用户体验

min-height = 190px min-width = 375px

BlipCards 0.0.2

示例

聊天状态

文本卡片

媒体卡片（音频）

媒体卡片（视频）

媒体卡片（图片）

媒体卡片（文档）

位置卡片

网页链接卡片

多媒体菜单卡片

快速回复

滚动条

指南