openstf二次开发

前阵子公司打算做安卓手机的多机同步，所以决定从二次开发openstf入手。stf是一个很厉害的项目，开发了一大批周边插件。今年有幸见过simo一次，真是又高又帅又白又是大长腿（误！）。

stf项目的介绍

github地址: https://github.com/openstf/stf.
这个项目是B/S架构，浏览器端使用的是pug模版引擎，前端使用的是angular1，服务器使用的是nodejs，数据库使用的是对象型数据库rethinkdb，构建工具使用的是webpack+gulp。如果改动了前端，直接保存运行就好。如果改动的是lib下面的后端代码，需要先gulp clean一下。

stf目录介绍

/lib 后端代码
/res 前端web的代码
/bin 启动文件，其实是链接到lib/cli.js
/node_modules npm相关的组件
/rethinkdb_data rethinkdb的数据库文件，建议在stf目录下执行rethinkdb
Package.json npm所需要安装的组件集，以json格式保存

启动stf

先启动rethinkdb，然后再使用stf local启动平台。

前端代码

涉及的前端知识

webpack
gulp
angularjs
bower
angularjs
Promise
websocket
protobuf

对于一个非专业前端开发人员来说，这块需要全部了解的话，还是需要花费不少时间的。我们就从简单的来说。前端入口js是res/app/app.js。

// An highlighted block
angular.module('app', [
    'ngRoute',
    'ngTouch',
    require('gettext').name,
    require('angular-hotkeys').name,
    require('./layout').name,
    require('./device-list').name,
    require('./control-panes').name,
    require('./menu').name,
    require('./settings').name,
    require('./docs').name,
    require('./user').name,
    require('./../common/lang').name,
    require('stf/standalone').name,
    require('./display').name,
    require('stf/display').name
  ])

我们看到/res/app下面是各个模块的前端代码。每个模块基本上都是由一个index.js、对应的controller.js、对应的pug、对应的css组成，这些模块组合在一起，就组合成了我们的看到的前端页面。如果需要增加自己开发的前端页面，需要将你的模板加入到其中去。
每一个模块的入口是他们各自的index.js。例如settings里面的index.js里面有这么一段。

  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/settings', {
      template: require('./settings.pug')
    })
  }])
  .controller('SettingsCtrl', require('./settings-controller'))

在对应的index.js里面里面，定义了某个路由对应的pug模板以及controller。对应的pug模板就是前端要展示的页面，controller通过和后端通信，给pug提供展示的数据。比如control-panes-controller.js中，开头有段代码

 function ControlPanesController($scope, $http, gettext, $routeParams,
    $timeout, $location, DeviceService, GroupService, ControlService,
    StorageService, FatalMessageService, SettingsService)

这块引用了很多/res/app/components/stf/下面对应的service。service会用到Websocket与服务端进行通信。
所以综上，如果要增加一个页面，需要在app.js,增加require(‘./xx’).name，需要增加xx目录下的index.js，xx-controller.js，xx.pug，以及在/res/app/components/stf目录下增加xx-service.js。

后端代码

后端代码刚刚有提到，都在stf/lib目录下，一般启动stf服务器用的是node bin/stf local，顺着bin/stf文件很轻易找到cli.js。这个js使用command.js定义了大量的node命令，这些命令又调用util/procutil.js创建大量进程。具体进程可以看下官方给出的这张图。
在这里插入图片描述
服务端处理信息流转有三个文件，websocket/index.js、triproxy/index.js、
processor/index.js 。
db是数据操作文件，STF使用的数据库是rethinkdb，rethinkdb是以json方式存储数据的。分为api.js,index.js,setup.js,tables.js。
db的操作只需要修改tables.js与api.js即可，其它两个文件可以不用修改。
api.js主要用于数据库增删查操作。
units是核心代码，根据其命名可得知其作用。需要增加什么功能就直接新建文件夹，当然代码肯定要自己写。

目前主要修改了前端代码，后端这块还没有细细研究，所以这块不在赘述了。
可以关注来点儿干货呀公众号~