#研發解決方案#共享能力的數屏

創建於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-

推薦閱讀：