創建于2017/7/23 最后更新于2017/7/25

關鍵詞：大數據，監控大屏，實時大屏，大屏，數屏，React，Redux，

提綱：

1. 自助式報表、魔盒和數屏的產生邏輯

2. 共享能力

3. 數屏的技術棧

4. 數屏的能力

   數屏（DataB） 是數據中心吳佰清組推出的高逼格數據應用，它的目標是通過圖形化界面快速搭建可視化監控大屏，數屏可以提供豐富的可視化數據組件，滿足業務監控、會議展覽、投資咨詢等多種業務的展示需求，尤其要滿足PC瀏覽器或者手機瀏覽器訪問下的自適應布局。

圖1 數屏默認首頁

   感謝前臺的吳佰清，董建昌，劉永飛，趙亮，孫錚，后臺的趙興申，袁丙澤，李少杰，呂中舟，高川川。

   數據中心2016年提供了實時監控大屏，云縱總部門口電視上投放的就是當面付和縱橫客的大屏。它的運行原理是，數據庫變更訂閱中心（背后是canal）-->Kafka-->HBase/Redis/MySQL-->workman--websocket-->大屏。它的問題是每次都得開發，雙十二時的多張監控大屏就是如此。所以自然而然產生一個想法：大屏能不能所見即所得，不用或減少開發？

0x00，自助式報表、魔盒和數屏為什么誕生？

   2014年時我提出所謂商業智能平臺無非這么幾個 feature：

• 自助式報表；

• 即席查詢；

• 數據可視化（在自助式報表基礎上）；

• 數據融合；

• 數據倉庫。

   那時候自助式報表的目標是，可視化自定義報表，并將報表和圖表組裝成儀表盤。這樣可以節省數據中心的開發人力，不用陷入到每張報表都必須開發的泥潭，專注做好數據倉庫即可。

   2014年12月12日，少明主持開發的自助式報表一期上線發布，我們認為初期不需要對外提供自助定義報表的能力，能讓內部開發人員可視化自定義報表（含圖表）、授予其他部門訪問權限即可。

圖2 自助式報表平臺-配置報表的向導界面

   后來又看到了美團的自助ETL規劃，即開放數據的存儲和計算環境，讓ETL流程的編寫和部署Web化，讓其他組織里有能力的研發人員，可以自己在數據倉庫上部署計算流程，計算自己需要的數據。

   數據中心沿著這兩個思路一路走來，現如今都有了對應的解決方案：

1. 自助式報表，有了；

2. 即席查詢，實際上被數據開放實驗室（OpenDataLab）間接又實現了一遍；

3. 數據可視化，對應于數屏（DataB）；

4. 自助ETL，對應于魔盒（DataCube）。

這些解決方案的目的都是一個：

共享數據，共享計算資源，共享能力。

0x01，共享能力

   我們的研發哲學講求，凡是被不斷重復的（coding）過程，就要將其工具化，綁定到自動化流程之中，目的是解放生產力，提高生產效率，為的是讓大家不陷入日復一日年復一年的重復性工作里。

   自助式報表對外提供了報表的圖形化設計界面。

   數屏對外提供了監控大屏的圖形化設計界面。

   魔盒對外提供了 Spark/SparkSQL 等離線計算的圖形化操作界面。

   數據開放實驗室對外提供了對授權數據的查詢、發布和下載的圖形化操作界面。

   這樣，數據、資源、能力都共享之后，同一個集群，不同研發團隊，可以心無旁騖地做更多的事情。

0x02，數屏的技術棧

前端：

React+Redux+D3.js+Three.js等。

后端：

Java+HBase。

前端所使用的包清單為：

為什么使用Redux？

   大型應用中不同組件共享同一個數據源的情況是常見的，如果都讓組件自身來維護一份的數據，很容易造成數據混亂。組件內部也由于夾帶著處理數據的邏輯，從而和數據耦合到一起了。

   Redux 框架解決了這個問題，簡單來說，它將 React 由父級傳遞數據，變為了由一個統一的數據源 store 單向地向各個組件傳遞數據。

   我們通過使用 Redux 能夠將數據集中統一管理起來放到組件的最頂層，然后分發給所有組件，每個組件只管渲染，不處理數據邏輯。

0x03，數屏的能力

   登錄系統之后，點擊“新建可視化”大按鈕，進入編輯向導。

   第一步需要先選擇模板。目前只有兩個模板。點擊創建大屏即可。

圖3 新建可視化-選擇模板

第二步，在大屏編輯界面上，我們可以看到很多組件，如柱狀圖，餅圖，數字翻牌器，折線圖，漏斗圖，地圖，標題，時間器，等等，往大屏上拖拽即可，如下圖所示：

圖4 新建可視化-拖拽組件

第三步，選中組件，設置樣式。如下圖所示，我選中了一個折線圖：

第四步，選中組件，設置數據源，如下圖所示：

圖6 新建可視化-編輯組件數據源

目前，數據源類型有三種：

1. 靜態數據：即按規定格式，寫在 JSON 靜態數據里，不可變；

2. API：即自己在遠端提供一個返回規定格式 JSON 數據的 Web Service；

3. 數據庫：如下圖所示，選好數據庫，寫標準SQL了：

圖7 新建可視化-組件數據源-數據庫

   通過右上角的預覽功能，測試通過之后，就可以點擊“發布”了。發布的時候需要設定這張大屏的驗證密碼。

   至此，這張監控大屏就配好了。

-EOF-

贈圖四枚

語錄若干：

Facebook 終于讓步了，React 許可又改為標準的 MIT 協議。

但以后 FB 再開源別的什么神器，還有人敢用嗎？

信用經不起折騰啊。

/*

React 是 2013 年 5 月開源的。

隨著 React 用戶的增多，Facebook 在 2016 年7月修改了開源許可協議中的附加專利條款 Additional patent grant。

今年7月16號，Apache 基金會把 Facebook BSD + Patents 加入了黑名單，并從開源項目中移除。

8月份，Facebook 發表了一篇名為《關于React使用許可協議的官方聲明》的申明，任何人不能將 React 用于與 Facebook 及其合作公司有直接或間接競爭關系的項目中，否則 Facebook 公司將自動取消其使用許可。

*/

騙中騙，局中局，中國互聯網生態：《百合網紅娘直言好多用戶是假的：天天都有投訴》，前有校園貸、裸條，再有招聘網站淪為傳銷圍獵場，而隱藏在水下的是相親網站上多年來融合了茶托、酒托、業務推銷、網店、微商、借錢、傳銷等經典騙局。

無極說如果只談修身治國平天下那是錯的，因為這只是后半句話，前面還有半句呢：“物格而后知至。知至而后意誠。意誠而后心正。心正而后身修。身修而后家齊。家齊而后國治。”修身得從最開始的格物致知做起，否則單純修身也沒有意義（悶在小黑屋里修什么身吟詩做賦?）。什么是格物致知？那就是先要了解業務，真刀真槍干起來，看清楚事物的規律，借事修人，借人成事，修身才有意義。

-END-