《图话本》技术方案

《图话本》是什么?

图话本是一款好玩的网页轻手游,能够根据照片中人物的表情来显示语出惊人的台词。

点击在线玩 http://app.scaperow.com/facemotion/

自己玩了好多遍,都没有腻,随便放出来几张有意思的图片 o_1a5epn49ht781ik08p912aju4v

o_1a5epnoigtec1kem56ap478dq17

o_1a54m0oo81mpv1tsf1v1g1p913nvf

设计原则

  • 精简请求 减少不必要的资源请求,多个操作一次完成

    • 减轻前台 图像处理,逻辑全部在服务端实现,前台只显示结果

    • 快速入门 两个 step 即可开玩

    前台设计

  • zepto.js zepto为精简化的 jquery,大部分语法都相同,虽然没有 jquery 全面,在该应用上使用已经足够。

  • qiniu.js 七牛上传图片组件,使用该组件可直接将本地的图片上传至七牛后台,而不经过自己的后台。

  • underscore.js 工具库,简化数据处理的操作。

    后台设计

  • node+mysql+underscore 快速开发的选择,没有其他理由了

  • qiniu.js 七牛提供了 qiniu.js for node.js 组件,用于该组件来获取上传图片的 token ,供前台使用。

  • color+jimp 使用 jimp 来获取七牛服务器上图片的尺寸,用于计算水印文字的大小,使用 color 来获取图片的明暗色调,如果是亮色调,水印文字为黑色,如果是暗色调,水印文字为白色,动态生成。

  • request 简化 nodejs 的 http 请求的代码,使用 request 向微软的 face emotion sdk 获取图片的情绪值。

    流程图

企业总机组织架构

企业总机组织架构

业务流程

呼入:用户来电 -> 电信/移动/联通(硬件落地)-> 呼叫中心 -> 坐席 -> 终端

呼出:终端 -> 呼叫中心 -> 电信/移动/联通(硬件落地) -> 用户来电

概念

  • 硬件落地 呼出的出口,呼入的入口

  • 呼叫中心 为代码服务器,承载呼叫分流、转接、录音等全部的功能

  • 坐席 为非必要流程,因为可能外部呼入的电话直接到终端,在这里坐席只起到了转接的作用

  • 终端 可分为网络座机、手机端 APP、移动电话、电脑端客户端 ## 角色、模块

  • 用户后台 面向企业、客户,用于查询通话记录、查询录音、管理企业通讯录,IVR 设置等功能

  • 内部后台 面向公司内部用户,用于管理语音资源、IVR 管理、企业管理、用户管理、录音管理等功能

  • 呼叫中心 承载呼叫分流、转接、录音等全部的功能

  • 坐席客户端 面向坐席,用于转接、找人等功能

  • 电脑终端 面向所有角色,实现在电脑上通话功能

  • 手机 APP 面向所有角色,实现在手机上通话功能 ## 相关技术 斜体为技术难点 * sip 网络电话信令协议,用于发起、接受呼叫

  • sipsorcery 开源 sip 框架,需要基于此框架来向上开发

  • 网络座机 与一般座机类似,传统座机连接电话线,网络座机连接网线或无线网络,通过 sip 信令来实现通话, 通过 web 来配置账号,服务器地址等、配置好后便可以通话

  • 录音、混音、语音编解码 不同的终端所采用的语音编码不同,需要做到兼容

  • 硬件落地 需要从零开始了解如何与电信、联通、移动对接 ## 参与人员 * 开发 开发、处理问题

  • 售前/售后 销售业务、处理一般问题 * 坐席 转接、找人、7x24 小时工作

ionic 更新插件

介绍

本文只介绍如何为 ionic 项目做更新的功能,对于 ionic 很陌生的人可以先到官网上了解下。

对于 ionic 很了解的人也许知道,在ionic 1.1中包含的诸多新特性,包括 应用统计、推送集成、部署与更新、等。但是所有的功能都依赖于ionic的后端,国内的网络环境你懂得,可以说这些功能都不能用。本文将简单介绍,怎么改造属于自己的更新功能。 最终实现的效果是,通过前台的 js 来控制更新流程,通过原生代码来下载、应用更新,最重要的一点,不需要将更新包放在ionic后端,而是自己的服务器。

配置

ionic 的更新功能依赖于三者:

  1. 插件
    2.更新服务
    3.核心服务

三者已寄存在 git 上,建议将这三个仓库都 fork 到自己仓库中,以后好做维护。

插件地址:

https://github.com/driftyco/ionic-plugins-deploy 更新服务地址:

https://github.com/driftyco/ionic-service-deploy 核心服务地址:

https://github.com/driftyco/ionic-service-core

将 cli 定位到你的 ionic 工程下,使用以下命令来安装插件、更新服务、核心服务

ionic add ionic-service-core

ionic add ionic-service-deploy

ionic plugin add ionic-plugin-deploy

改造

由于要修改的地方较多,本文就不一一列举,我已将代码托管到 git 上,供读者参考,这里只说我改造逻辑。

  1. 打开 platforms 下的原生代码,找到向服务器发送更新请求的代码。

  2. 发现服务器的路径被硬编码,将路径指到一个变量上,并修改请求的路径结构。之前的路径太长了,不利于测试

  1. 修改 js 代码,扩展相应的方法,使其支持路径参数,并能够正常的传入到原生代码中。

  2. 更新端与服务器交互的数据如下

  • 检查更新的请求代码 update/check/{appid} > appid 是你的应用标示,可以在 www/app.js中指定。

  • 服务器返回数据结构

    1
    { 'compatible_binary': true, 'update_available': true, 'update: { 'uuid': "2.0.1" 'url': "/eoapp/www.zip" } } 

    compatible_binary 代表是否兼容

    update_available 是否有更新

    uuid 最新版本

    url 更新包的下载地址

    1. 准备一个更新包,将 ionic 项目下的 www 目录直接压缩,命名为 www.zip。这就是一个更新包。

    2. 搭建 nodejs 服务器环境,为检查更新的POST请求 update/check/:appid 定义路由器,请求参数,编写逻辑代码。上传更新包进行测试。

    为了方便读者参考,列出修改过的文件

platforms/ios/{你的ios项目名字}/Plugins/ionic-plugin-deploy/IonicDeploy.m
platforms/android/src/com/ionic/deploy/IonicDeploy.java
plugins/ionic-plugin-deploy/www/ionicdeploy.js
www/lib/ionic-service-deploy/ionic-deploy.js

代码地址

测试app
https://github.com/scaperow/ionic-deploy-starter

测试 server
https://github.com/scaperow/ionic-deploy-server

改造后的插件代码

https://github.com/scaperow/scaperow-plugins-deploy

改造后的更新服务代码 https://github.com/scaperow/scaperow-service-deploy

改造后的核心服务代码 https://github.com/scaperow/scaperow-service-core

android sdk manager 无法链接的解决方案

由于 gfw 的存在,使得国内开发人员苦不堪言,在此推荐一个映像服务器,可以解决大部分开源项目的下载问题,我的 android sdk 就是在这上面下载的,赞一个

http://mirrors.neusoft.edu.cn/

如果要下载 android sdk,可以进入到 android 类别中按需下载,也可以使用 android sdk manager 下载,方法如下

1. 启动 Android SDK Manager ,打开主界面,依次选择「Tools」「Options…」,弹出『Android SDK Manager - Settings』窗口;

2. 在『Android SDK Manager - Settings』窗口中,在「HTTP Proxy Server」「HTTP Proxy Port」输入框内填入mirrors.neusoft.edu.cn80,并且选中「Force https://… sources to be fetched using http://…」复选框。设置完成后单击「Close」按钮关闭『Android SDK Manager - Settings』窗口返回到主界面;

3. 依次选择「Packages」「Reload」

cnpm 是什么?可以加速 npm 吗?

cnpm 是用于企业建立私有的 npm 仓库的服务,同时与 npm 基本是实时同步的,目前的同步时间是10分钟一次。对于大企业或其他组织来说,非常有用。

-cnpm-npm-relation

同时,因为 cnpm 与 npm 的仓库是同步的,一些国内开发者也可以使用 cnpm 替换 npm 来加快包的安装。

安装 cnpm 及使用方法:

npm install cnpm -g

通过 npm 来安装 cnpm,如果因为网络问题无法安装的,可以使用下面的命令行 npm install -g cnpm --registry=http://registry.npm.taobao.org