微分享回放 | 矽谷技術專家教你做「聲控」APP

編者：本文為攜程機票研發部技術專家祁一鳴在攜程技術微分享中的分享內容。

【攜程技術微分享】是攜程技術中心推出的線上公開分享課程，每月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是一款專為產品和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/public/Help/DragonMobileSDKReference_iOS/Overview.html 中找到。在這個Xcode project中， 我們會用 CocoaPods 來維護工程依賴。在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/search?term=牛仔很忙

假設我對著APP說出了一首周杰倫的歌 「牛仔很忙」， 那麼通過HTTP調用以上的url的發一個GET請求， 蘋果就會通過搜索iTunes音樂庫里返回所有的與「牛仔很忙」相關的所有音樂數據。

為了使demo的邏輯盡量簡單， 我在之前的url里加上一個參數， 把返回的結果數量控制在一。

https://itunes.apple.com/search?term=牛仔很忙&limit=1

這樣一來，我從僅返回的一首歌的數據里獲取關於這首「牛仔很忙」歌曲的專輯圖片地址以及試聽歌曲地址， 再把這些數據拼湊起來，組成一張頁面， 就有了我們在設計稿中看到的第三頁。

至於每個頁面中的動畫交互，則是由基本的CABasicAnimation 來完成。例如， 麥克風圖標的旋轉動畫的代碼如下。

綜合涉及的各個點，我們就開發完成了一款智能聲控的音樂APP。兩張Sketch設計稿， 三張Principle交互頁面， 便有了這樣一款娛樂的APP。 更多細節內容， 請大家移步觀看視頻（從設計到開發，矽谷技術專家教你做「聲控」APP）。