从设计到开发，硅谷技术专家教你作“声控”APP

编者：本文为携程机票研发部技术专家祁一鸣在携程技术微分享中的分享内容，关注携程技术中心微信公号ctriptech，获知更多一手干货。

【携程技术微分享】是携程技术中心推出的线上公开分享课程，每个月1-2期，采用目前最火热的直播形式，邀请携程技术人，面向广大程序猿和技术爱好者，一块儿探讨最新的技术热点，分享一线实战经验，畅谈精彩技术人生，搭建一个线上的技术分享社区。

祁一鸣，2016年4月加入携程， 任机票研发部技术专家。毕业于美国常春藤名校Dartmouth College本科，曾前后在硅谷的Oracle, Yahoo!和Salesforce总部效力过。从scratch到delivery完成过的最成功的产品是年销售额超1亿美金的商业社区网站模板。平时喜欢吃冰激凌和甜甜圈， 也蛮喜欢上海野兽派的花。

---

在6月中刚刚结束的2016苹果全球开发者大会上, 人工智能助手Siri又一次成为焦点。Siri Intelligence不只已被加入到快速输入功能和照片应用中，苹果还将在iOS 10版本中第一次开放Siri SDK给广大开发者们，使用户经过本身的声音与各类iOS APP互动成为可能。

这次让咱们在携程技术微分享中先睹为快，看看如何模拟Siri智能来设计并开发一款搜索和试听iTunes音乐的手机App。

分享内容分为上下两部分。上半部分以设计为主，咱们将一块儿了解Siri SDK在iOS10中给用户带来的新功能，回顾了人工智能的发展史，并一块儿用Sketch和Principle两款工具设计声控音乐APP的页面和交互。

下半部分以开发为主，用Xcode和Objective-C来实现APP页面开发。同时将用一款全新的移动端软件开发工具包资源来作语音识别，将咱们想听歌曲的名字从声音转化成文字。以后，经过苹果iTtunes搜索API接口来获取歌名的专辑图片和歌曲试听资源。最后，将这些资源整合在一块儿，用精细的UI动画效果来开发完成这款声控音乐APP。

一块儿来体验下本身完整作件产品的快乐吧~

设计部分

将用到的设计工具包括Sketch和Principle。

Sketch (http://sketchapp.com/)是一款专为产品和UI设计师量身定作的设计工具， 它在2015在设计工具中被评为APP of the Year. 比起传统型的photoshop设计工具， Sketch更加轻量灵活，且价格便宜 。

咱们先用Sketch绘制声控APP的第一个页面和第二个页面的prototype。 包括用Sketch自带的iOS UI Design 模板添加status bar, 用Sketch自带的绘图工具添加文字Label, 背景形状图案，图片。

以后， 咱们在Principle里导入 用Sketch设计的两张页面。 Principle是一款实现每一个设计页面之间动画衔接的工具。它能够直接import Sketch设计稿，在设计稿页面之上添加丰富的动画。 做为一款业界有名的设计动画工具， Principle在硅谷也是被设计师们普遍使用的。

首先咱们在Principle里复制一张和设计稿第一页显示如出一辙的 Artboard放在第一页以后。 当用户点击第一页中的麦克风图标以后，Principle将自动跳转到第二页， 咱们对相应的提示文案作修改， 并实现一个新的动画：在第一页点击麦克风后，第二页的麦克风将围绕着图标中心旋转， 以此做为APP正在倾听用户声音的提示。 最后，当麦克风旋转的动画结束后，再添加一个自动跳转到第三页的动画，让用户看到搜索到音乐。三个页面的衔接以下图。

实现的动画能够从如下的gif中看到。

至此， 咱们用Sketch和 Principle完成了一款“声控”APP的原型prototype以及页面交互设计。 主流程是， 用户用手tap麦克风， 麦克风旋转加上页面文案提示 告知用户APP正在倾听用户声音， 当APP解析到用户声音并找到相关的歌曲之后， 将跳转到下一页显示歌曲的专辑图片以及播放一段音乐的节选。

开发部分

完成设计以后，咱们将更换装备，用Xcode和Objective-C来开发这款 智能音乐APP 。咱们将使用一款全新的移动端软件开发工具包资源来作语音识别，将咱们想听歌曲的名字从声音转化成文字。以后，经过苹果的音乐搜索API接口来获取歌名的专辑图片和歌曲试听资源。

开发完成之后的project结构以下：

首先来介绍 在APP中如何实现 智能识别用户语音的功能。 语音识别是人工智能应用普遍的一个领域。在众多已有科技中， 我选择了使用Nuance Speech Kit 2 的iOS SDK来实现APP中的功能。SpeechKit的具体使用指南能够在 https://developer.nuance.com/... 中找到。在这个Xcode project中， 咱们会用 CocoaPods （https://cocoapods.org/）来维护工程依赖。在Project的目录下， 新建一个名为 Podfile 文件， 而后在Podfile里添加一行

pod ‘SpeechKit’

保存文件后， 在本地App目录下， 执行命令

pod install

安装成功后，打开 .xcworkspace 工程 能够直接经过如下的import语句来使用SpeechKit

import <SpeechKit/SpeechKit.h>

安装成功后， 还须要在Nuance 的官网上注册一个开发者帐号， 获得访问服务器的URL地址以及一个APP KEY，在以后调用云端的语音识别服务时会用到。

在下面的代码中， 将SKSServerUrl和SKSAppKey 替换成你帐号里显示的数值。 这段代码起到的做用就是创建一个语音识别的session， 而后开始一个transaction去作automatic speech recognition识别手机设备听到的语音：

Transaction成功之后的delegate回调方法里，咱们只需获取recognition 参数里的最佳text推荐， 它即是对语音识别出最好的文字。

识别了语音以后， 咱们接下来要作的即是去获取与识别文字相关的音乐了。 苹果本身就有这样的公共接口可让咱们使用。

https://itunes.apple.com/sear...牛仔很忙

假设我对着APP说出了一首周杰伦的歌 “牛仔很忙”， 那么经过HTTP调用以上的url的发一个GET请求， 苹果就会经过搜索iTunes音乐库里返回全部的与“牛仔很忙”相关的全部音乐数据。

为了使demo的逻辑尽可能简单， 我在以前的url里加上一个参数， 把返回的结果数量控制在一。

https://itunes.apple.com/sear...牛仔很忙&limit=1

这样一来，我从仅返回的一首歌的数据里获取关于这首“牛仔很忙”歌曲的专辑图片地址以及试听歌曲地址， 再把这些数据拼凑起来，组成一张页面， 就有了咱们在设计稿中看到的第三页。

至于每一个页面中的动画交互，则是由基本的CABasicAnimation 来完成。例如， 麦克风图标的旋转动画的代码以下。

综合涉及的各个点，咱们就开发完成了一款智能声控的音乐APP。两张Sketch设计稿， 三张Principle交互页面， 便有了这样一款娱乐的APP。 更多细节内容， 请你们移步观看视频。