编者:本文为携程机票研发部技术专家祁一鸣在携程技术微分享中的分享内容,关注携程技术中心微信公号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/public/Help/DragonMobileSDKReference_iOS/Overview.html 中找到。在这个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/search?term=牛仔很忙

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

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

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

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

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

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

从设计到开发,硅谷技术专家教你做“声控”APP的更多相关文章

  1. 手把手教你做个人 app

    我们都知道,开发一个app很大程度依赖服务端:服务端提供接口数据,然后我们展示:另外,开发一个app,还需要美工协助切图.没了接口,没了美工,app似乎只能做成单机版或工具类app,真的是这样的吗?先 ...

  2. 【Android UI设计与开发】第05期:引导界面(五)实现应用程序只启动一次引导界面

    [Android UI设计与开发]第05期:引导界面(五)实现应用程序只启动一次引导界面 jingqing 发表于 2013-7-11 14:42:02 浏览(229501) 这篇文章算是对整个引导界 ...

  3. HealthKit开发快速入门教程之HealthKit开发概述简介

    HealthKit开发快速入门教程之HealthKit开发概述简介 2014年6月2日召开的年度开发者大会上,苹果发布了一款新的移动应用平台,可以收集和分析用户的健康数据.该移动应用平台被命名为“He ...

  4. 王家林的81门一站式云计算分布式大数据&移动互联网解决方案课程第14门课程:Android软硬整合设计与框架揭秘: HAL&Framework &Native Service &App&HTML5架构设计与实战开发

    掌握Android从底层开发到框架整合技术到上层App开发及HTML5的全部技术: 一次彻底的Android架构.思想和实战技术的洗礼: 彻底掌握Andorid HAL.Android Runtime ...

  5. 《Spring_Four》第三次作业——基于Jsoup的大学生考试信息展示系统的原型设计与开发

    <Spring_Four团队>第三次团队项目——基于Jsoup的大学生考试信息展示系统的原型设计与开发 一.实验目的与要求 (1)掌握软件原型开发技术: (2)学习使用软件原型开发工具:本 ...

  6. SharePoint 是哪些人设计、开发的?

    闲下来的时候,我有时候会想:SharePoint 是哪些人设计.开发的? 毕竟,你说一个单选的字段,你从列表里面添加的时候,字段类型选的是 “Yes/No”:而如果你是通过编程把它加入列表的时候,字段 ...

  7. 基于 Angularjs&Node.js 云编辑器架构设计及开发实践

    基于 Angularjs&Node.js 云编辑器架构设计及开发实践 一.产品背景 二.总体架构 1. 前端架构 a.前端层次 b.核心基础模块设计 c.业务模块设计 2. Node.js端设 ...

  8. 会员管理系统的设计和开发(2)-- RDLC报表的设计及动态加载

    在上篇<会员管理系统的设计和开发(1)>介绍了关于会员系统的一些总体设计思路和要点,经过一段时间开发,软件终于完成并发布.在这期间,碰到了不少技术难点,并积累了不少开发心得和经验,本篇继续 ...

  9. HealthKit开发快速入门教程之HealthKit数据的操作

    HealthKit开发快速入门教程之HealthKit数据的操作 数据的表示 在HealthKit中,数据是最核心的元素.通过分析数据,人们可以看到相关的健康信息.例如,通过统计步数数据,人们可以知道 ...

随机推荐

  1. 推荐几款自己写博客使用的Ubuntu软件

    使用Ubuntu桌面有段时间,到现在也写过几篇博客了,期间用到的几款好用的软件推荐给大家.1. 图片简单编辑软件gthumbubuntu默认提供shotwell查看图片,类似与windows的图片查看 ...

  2. Ember.js实现单页面应用程序

    1.1.1 摘要 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序,不会经常 ...

  3. 微软 Build 2016年开发者大会发布多项功能升级

    微软Build 2016开发者大会在美国旧金山的莫斯康展览中心开幕.本次大会对一些重点功能进行了完善.如手写笔支持技术Windows Ink.语音识别Cortana应用集(Cortana Collec ...

  4. 看stackoverflow大牛如何回答何时在ASP.NET中使用异步控制器?

    转载自博客园:http://farb.cnblogs.com/ 今天无意中看到stackoverflow上一个很好的问答,个人觉得很有价值,所以翻译过来和大家共享!希望大家能相互交流. 在ASP.NE ...

  5. Java-继承,多态练习0922-06

    编写一个Shape类,具有属性:周长和面积: 定义其子类三角形和矩形,分别具有求周长的方法. 定义主类E,在其main方法中创建三角形和矩形类的对象, 并赋给Shape类的对象a.b,使用对象a.b来 ...

  6. NodeJS系列~第三个小例子,NodeJs与Redis实现高并发的队列存储

    返回目录 众所周知 redis量个强大的缓存组件,可以部署在win32和linux环境之上,它有五大存储结构,其中有一种为列表list,它可以实现quene和stack的功能,即队列和堆栈的功能. r ...

  7. MVVM架构~knockoutjs系列之正则表达式使规则更灵活

    返回目录 几乎每种验证架构都会有正则表达式的加盟,一般地,一种验证架构首先会提供一些标准的,常用的验证规则,它们通常是数字验证,电话验证,email验证,长度验证,范围验证,日期验证等,而如果使你的验 ...

  8. Atitit 图像处理知识点  知识体系 知识图谱v2

    Atitit 图像处理知识点  知识体系 知识图谱v2 霍夫变换(Hough Transform) 霍夫变换是图像处理中从图像中识别几何形状的基本方法之一,应用很广泛,也有很多改进算法.主要用来从图像 ...

  9. 更新日志 - fir.im「高级统计」功能上线

    距离 2016 年到来只剩 10 个日夜,fir.im 也准备了一些新鲜的东西,比如「高级统计」功能和「跳转应用商店」功能,帮助你更好地管理.优化应用,欢迎大家试用反馈:) 新增高级统计功能 这次更新 ...

  10. MyEclipse在搭建s2sh时 如何 uninstalled facet

    在资源管理器中:找到当前[项目的根目录],在[.setting]目录中, 找到[org.eclipse.wst.common.project.facet.core.xml]文件. 用[文本编辑器工具] ...