本教程将向您展示如何在30分钟内构建一个正常运行的iOS应用程序,让用户可以与支持代理聊天。它使用Zendesk聊天亚博SDK的iOS,一个共享代码库,让你可以轻松地合并亚博Zendesk聊天在iOS应用中。

亚博Zendesk为您提供移动应用程序客户支持的其他选项:

  • 您可以使用支持SDK将其他Zendesk客户支持功能整合到iOS应用程序中。亚博要学习如何,请看快速入门-支持iOS SDK

  • 您可以使用统一SDK将回答机器人与聊天和支持结合起来,以创建一个统一消息体验.但是,由于Answer Bot只能作为Zendesk Suite Professional计划及以上版本的附加组件使用,因此本教程中不使亚博用统一SDK。

你需要macOS和Xcode来构建iOS应用程序。你可以从苹果开发者网站或者从Mac App Store

你还需要一个Zendesk聊天帐户。亚博有一个免费试用帐户。看到亚博Zendesk聊天网站

虽然这个快速入门指南提供了构建一个简单应用程序的一步一步的指导,但它不是一个iOS应用程序教程。如果你是iOS开发的新手,我强烈建议你学习开始开发iOS应用程序在苹果网站上。

本指南将引导您完成以下基本步骤,为iOS应用程序添加聊天功能:

  1. 创建示例项目
  2. 使用CocoaPods添加聊天SDK
  3. 初始化Chat SDK
  4. 创建聊天界面的导航控制器
  5. 添加一个按钮开始聊天
  6. 连接按钮
  7. 将聊天视图推到当前视图的顶部
  8. 开始聊天
  9. 下一个步骤

本教程使用Chat SDK的2.12版本。它在Xcode的13.4.1版本中进行了测试。

免责声明:亚博Zendesk提供本文仅用于教学目的。亚博Zendesk不支持Swift、iOS和Xcode等第三方技术。如有问题,请在亚博Zendesk sdk社区,或在网上寻找解决方案。

创建示例项目

本节向你展示如何在Xcode中创建一个快速的示例项目。您将使用该项目来测试Chat SDK。

  1. 在Xcode中,选择文件>>项目

    如果你在Welcome to Xcode窗口,选择第二个任务,创建一个新的Xcode项目

  2. 确保iOS在顶部栏上被选中,选择应用程序,并单击下一个

  3. 为项目设置以下选项:

    • 产品名称——输入我的聊天应用程序示例或者类似的东西
    • 组织标识符—(必填项)输入com.sample
    • 接口——选择故事板(不是默认值SwiftUI
    • 语言——选择斯威夫特

    其余选项保持默认值即可。

  4. 点击下一个,选择保存项目的位置,然后单击创建

Xcode为你的项目创建所有文件和基本设置。您可以在屏幕左侧的Project导航器中查看这些文件。如果看不到文件,单击面板上方的第一个图标(文件夹图标)。

使用CocoaPods添加聊天SDK

CocoaPods是一个依赖管理器,允许您将第三方框架和库添加到项目中。

步骤1 -安装CocoaPods

如果还没有完成,请在终端中运行以下命令安装CocoaPods:

             
$ sudo gem安装cocoapods

如果您在macOS上使用gem安装CocoaPods时遇到问题,请尝试使用gem酿造

             
$ brew安装cocoapods

看到开始CocoaPods网站。

步骤2 -创建一个Podfile

Podfile指定Xcode项目的依赖关系。文件的名称很简单Podfile没有文件扩展名。

创建一个Podfile

  1. 在Terminal中,导航到项目的顶级文件夹(带有xcodeproj文件的文件夹)。

  2. 用下面的命令创建一个Podfile:

    $ pod init

  3. 用下面的命令在Xcode中打开文件:

    $ open -一个Xcode Podfile

    内容应该如下:

                   
    取消注释下一行定义全局平台你的项目#平台ios“9.0”目标“我的聊天应用程序样本”评论下一行如果你不希望使用动态框架use_frameworks豆荚我的样本闲谈,聊天应用程序结束
  4. 添加豆荚的Ze亚博ndeskChatSDK布洛克:

                   
    目标“我的聊天应用程序样本”...圆荚体“亚博ZendeskChatSDK”结束
  5. 保存Podfile。

步骤3 -在项目中添加SDK

  1. 如果您在系统上安装了“ZendeskChat亚博SDK”pod,用于以前版本的ChatSDK v2,请先运行以下命令:

    $ pod更新Zendes亚博kChatSDK

    CocoaPods更新系统上的SDK pod。

    如果您以前从未使用CocoaPods添加过Chat SDK v2,请跳过此步骤。

  2. 执行如下命令:

    $ pod install

    CocoaPods将最新版本的SDK添加到项目中。

  3. 在Xcode中关闭你的项目,然后双击.xcworkspace位于项目根文件夹中的文件。

重要的:因为你的项目现在包含一个由CocoaPods管理的依赖项,从现在开始你必须在Xcode中通过双击.xcworkspace文件。

运行测试构建

在继续之前,请确保您成功地将Chat SDK添加到项目中。一种方法是运行测试构建。应用程序还没有做很多工作,但是如果没有得到任何构建错误,您就知道您已经走上了正确的道路。

你可以使用Xcode中包含的模拟器应用来运行你的应用。顾名思义,模拟器模拟在Mac上运行iOS应用程序。

  1. 确保您通过双击.xcworkspace文件放在项目的根文件夹中(请参阅使用CocoaPods添加聊天SDK).

  2. 在Xcode工具栏的Scheme弹出菜单中,选择iPhone 13 Pro Max

  3. 单击运行按钮(播放图标)在Xcode工具栏的左侧。

    Xcode在工具栏中间显示有关构建过程的消息。

    模拟器在构建完成后自动启动。在macOS的Dock上寻找它。要有耐心。模拟器可能需要一段时间才能开始第一次启动。后续的构建要快得多。

    最终你的应用程序在模拟器中打开:

如果没有得到任何构建错误,则认为测试成功。您可能会得到一些构建警告,但现在可以忽略它们。如果您愿意,可以单击下方的选项卡来测试基本的选项卡界面是否正常工作。

初始化Chat SDK

在用户可以在他们的设备上使用聊天之前,应用程序必须初始化聊天SDK。初始化过程包括设置初始值和执行其他设置任务。

在本节中,您将更新示例应用程序,以初始化Chat SDK依赖项,并使它们可以使用。该任务包括以下步骤:

  1. 获取Zendesk聊天帐亚博户密钥
  2. 向应用程序添加初始化代码

获取Zendesk聊天帐亚博户密钥

您需要访问Zendesk聊天仪表板来获得聊天帐户密钥亚博。如果您没有权限,请有权限的人执行以下步骤。

  1. 在“聊天”仪表板中,单击右上方的个人资料图标,然后选择检查连接

  2. 复制并保存帐户密钥。它应该是清单上的第二项。

将初始化代码添加到应用程序委托

对象中添加初始化代码应用委托.应用程序可以将某些任务委托给另一个名称适当的对象,即应用程序委托。的AppDelegate.swift项目中的文件定义了此委托。它包含一个带有方法的UIApplicationDelegate对象,这些方法用于响应应用程序生命周期中的重要事件。例如,一个方法在应用程序启动时运行。您可以向这些事件处理程序添加自己的代码。

  1. 在Xcode中,选择AppDelegate.swift在Project导航器中。

  2. 的后面添加以下导入语句进口UIKit声明::

                   
    进口ChatSDK进口ChatProvidersSDK
  3. 将以下初始化代码添加到应用程序()方法,该方法具有didFinishLaunchingWithOptions论点。确保将代码段粘贴在return语句之前。

                   
    闲谈,聊天初始化accountKey“your_account_key”

    取代your_account_key占位符值与前面从聊天仪表板检索到的帐户键。

    该方法的初始化代码应该如下所示:

                   
    函数应用程序_应用程序UIApplicationdidFinishLaunchingWithOptions launchOptionsUIApplicationLaunchOptionsKey任何?->保龄球闲谈,聊天初始化accountKey“3 npbqia9qitvdd98qmcyefveswlr4ifc”返回真正的

    应用程序是事件驱动的,因此需要在事件处理程序中初始化框架应用程序()方法。委托方法在应用程序移动到活动状态之前运行。

  4. 保存,然后运行构建以确保不会收到任何错误消息。

创建聊天界面的导航控制器

聊天界面设计用于使用导航控制器.导航控制器管理一堆视图,每个视图都有自己的视图控制器。除此之外,控制器还提供了一个后退按钮,允许用户返回堆栈中的前一个视图。

示例项目由一个选项卡栏控制器、一个导航控制器和一个已连接的控制器组成视图控制器

在本节中,您将把视图控制器嵌入到导航控制器中,以便将聊天视图推到当前视图之上。当前视图将显示一个按钮,客户可以点击该按钮与支持代理聊天。

  1. 在Project导航器中,选择Main.storyboard在Xcode的可视化UI编辑器Interface Builder中打开它。

    故事板显示了应用程序的视图及其关系:

    要获得这个鸟瞰图,右键单击故事板并选择缩放至合适

  2. 放大视图控制器并单击它以使其聚焦。

  3. 选择视图控制器顶部栏上的圆形黄色图标。

    图标代表视图的视图控制器。

  4. 在Xcode菜单中,选择编辑器>嵌入在>导航控制器

  5. 选择导航控制器顶部栏上的圆形黄色图标。

  6. 在Xcode菜单中,选择编辑器>嵌入在>标签栏控制器

    提示:如果你的故事板太拥挤,右键单击并选择缩放级别。

添加一个按钮开始聊天

在本节中,您将向视图控制器添加一个按钮,用户可以点击该按钮与支持代理开始聊天。这不是一个UI设计教程,所以变化仅限于添加一个非常基本的按钮。

  1. 选择Main.storyboard文件在接口生成器中打开它。

  2. 选择视图>显示库打开对象库。

    该库列出了可以添加到故事板以构建用户界面的对象。

  3. 向下滚动列表,直到找到Button对象,然后将一个实例拖到视图控制器。使用指南将按钮定位在视图控制器的水平和垂直中心。

  4. 双击按钮,将文本更改为闲谈,聊天,按“Enter”。

  5. 选择故事板上的按钮,并在侧边栏的Attributes检查器中将字体更改为Helvetica 24。

  6. 按钮仍然选中,单击对齐故事板右下方的按钮:

  7. 在“添加新的对齐约束”对话框中,选择集装箱内水平放置选项,然后单击添加1个约束

  8. 按钮仍然选中,单击添加新的约束故事板右下方的按钮:

  9. 在“添加新约束”对话框中进行以下更改:

    1. 点击连接最上面的邻居的T条,使它变成纯红色。

    2. 点击添加1个约束

  10. 保存,然后运行构建以确保不会收到任何错误消息。

连接按钮

在本节中,您将连接您的闲谈,聊天按钮指向视图控制器中的方法。连接触发方法,或者行动在iOS中,当用户点击闲谈,聊天按钮。稍后将向将聊天视图推到当前视图之上的方法中添加代码。

创建一个动作

  1. 在Project导航器中,选择ViewController.swift

  2. 删除ViewController直到它看起来如下所示:

                   
    ViewControllerui
  3. 将以下动作添加到子类:

                   
    @IBAction函数pushChat发送方AnyObject

    你的代码应该如下所示:

                   
    进口UIKitViewControllerui@IBAction函数pushChat发送方AnyObject

    表达式@IBAction将函数标识为接口构建器(IB)动作。你可以任意调用这个函数。我选择了pushChat

  4. 保存文件。

将按钮连接到操作

  1. 单击Main.storyboard文件切换到故事板。

  2. 选择闲谈,聊天按钮,点击它。

    在故事板(不是项目导航器)左侧的文档大纲中的视图控制器场景中的聊天按钮被突出显示。

  3. 按住Control键或鼠标右键,将聊天按钮从视图控制器场景拖到视图控制器图标()在位于故事板的视图顶部栏上,然后释放键或鼠标按钮以显示菜单。

  4. 在已发送事件下选择新创建的操作(pushChatWithSender这里)。

  5. 保存文件,然后运行构建以确保不会收到任何错误消息。

如果一切正常,您可以初始化Chat SDK并将聊天视图推到当前视图之上。

将聊天视图推到当前视图的顶部

  1. ViewController.swift文件后,添加以下导入语句进口UIKit声明:

                   
    进口ChatSDK进口MessagingSDK
  2. 属性中添加以下语句pushChat ()方法:

                   
    chatEngine试一试ChatEngine引擎viewController试一试消息传递实例buildUI引擎chatEngine配置自我导航控制器?.pushViewControllerviewController动画真正的//处理错误

就是这样。当函数响应用户点击自定义按钮而运行时,它会构建Chat视图控制器并将其推到当前视图控制器之上。

完成的ViewController.swift文件应该如下所示:

             
进口UIKit进口ChatSDK进口MessagingSDKViewControllerui@IBAction函数pushChat发送方AnyObjectchatEngine试一试ChatEngine引擎viewController试一试消息传递实例buildUI引擎chatEngine配置自我导航控制器?.pushViewControllerviewController动画真正的//处理错误

开始聊天

如果一个或多个聊天代理在线,则可以启动测试聊天。如果没有人在线,并且您是Zendesk Chat代理或管理员,您可亚博以通过将状态设置为与自己聊天在线在聊天仪表板中:

在模拟器中构建和运行应用程序。单击自定义聊天按钮查看聊天界面。输入消息,轻按发送箭头发起聊天。

下一个步骤

此时,您应该有一个工作的iOS应用程序,允许用户与支持代理聊天。把你的项目放在git下,创建分支来尝试不同的东西。如果出现问题,您可以随时重置。看到iOS聊天入门有关配置Chat SDK及其依赖项的更多信息。