從設計到開發，硅谷技術專家教你作「聲控」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。 更多細節內容， 請你們移步觀看視頻。