#研发解决方案#共享能力的数屏
創建于2017/7/23 最后更新于2017/7/25
關鍵詞：大數據，監控大屏，實時大屏，大屏，數屏，React，Redux，
提綱：
自助式報表、魔盒和數屏的產生邏輯
共享能力
數屏的技術棧
數屏的能力
? ?數屏（DataB）?是數據中心吳佰清組推出的高逼格數據應用，它的目標是通過圖形化界面快速搭建可視化監控大屏，數屏可以提供豐富的可視化數據組件，滿足業務監控、會議展覽、投資咨詢等多種業務的展示需求，尤其要滿足PC瀏覽器或者手機瀏覽器訪問下的自適應布局。
?
圖1 數屏默認首頁
?
? ?感謝前臺的吳佰清，董建昌，劉永飛，趙亮，孫錚，后臺的趙興申，袁丙澤，李少杰，呂中舟，高川川。
? ?數據中心2016年提供了實時監控大屏，云縱總部門口電視上投放的就是當面付和縱橫客的大屏。它的運行原理是，數據庫變更訂閱中心（背后是canal）-->Kafka-->HBase/Redis/MySQL-->workman--websocket-->大屏。它的問題是每次都得開發，雙十二時的多張監控大屏就是如此。所以自然而然產生一個想法：大屏能不能所見即所得，不用或減少開發？
?
0x00，自助式報表、魔盒和數屏為什么誕生？
? ?2014年時我提出所謂商業智能平臺無非這么幾個 feature：
-
自助式報表；
-
即席查詢；
-
數據可視化（在自助式報表基礎上）；
-
數據融合；
-
數據倉庫。
? ?那時候自助式報表的目標是，可視化自定義報表，并將報表和圖表組裝成儀表盤。這樣可以節省數據中心的開發人力，不用陷入到每張報表都必須開發的泥潭，專注做好數據倉庫即可。
? ?2014年12月12日，少明主持開發的自助式報表一期上線發布，我們認為初期不需要對外提供自助定義報表的能力，能讓內部開發人員可視化自定義報表（含圖表）、授予其他部門訪問權限即可。
?
圖2 自助式報表平臺-配置報表的向導界面
?
? ?后來又看到了美團的自助ETL規劃，即開放數據的存儲和計算環境，讓ETL流程的編寫和部署Web化，讓其他組織里有能力的研發人員，可以自己在數據倉庫上部署計算流程，計算自己需要的數據。
? ?數據中心沿著這兩個思路一路走來，現如今都有了對應的解決方案：
自助式報表，有了；
即席查詢，實際上被數據開放實驗室（OpenDataLab）間接又實現了一遍；
數據可視化，對應于數屏（DataB）；
自助ETL，對應于魔盒（DataCube）。
這些解決方案的目的都是一個：
共享數據，共享計算資源，共享能力。
?
0x01，共享能力
? ?我們的研發哲學講求，凡是被不斷重復的（coding）過程，就要將其工具化，綁定到自動化流程之中，目的是解放生產力，提高生產效率，為的是讓大家不陷入日復一日年復一年的重復性工作里。
? ?自助式報表對外提供了報表的圖形化設計界面。
? ?數屏對外提供了監控大屏的圖形化設計界面。
? ?魔盒對外提供了 Spark/SparkSQL 等離線計算的圖形化操作界面。
? ?數據開放實驗室對外提供了對授權數據的查詢、發布和下載的圖形化操作界面。
? ?這樣，數據、資源、能力都共享之后，同一個集群，不同研發團隊，可以心無旁騖地做更多的事情。
?
0x02，數屏的技術棧
前端：
React+Redux+D3.js+Three.js等。
后端：
Java+HBase。
前端所使用的包清單為：
| 包名稱 | 描述 |
| QS | 發起 Ajax 請求時 JSON 串轉換成 form-data |
| D3 | 圖表繪圖工具 |
| Less | CSS 構建工具 |
| Three | 3D 繪圖工具 |
| Axios | AJAX 請求工具，僅支持 CORS 模式 |
| React | React |
| Redux | Redux |
| CountUp | 翻牌器 |
| Immutable | 數據層有 HASH 值，主要判斷組件是否更新 用于加速 React 渲染 |
| Normalize | 去掉 input、body 等默認樣式值（多瀏覽器兼容） |
| Redux-Saga | Redux 流程中的 AJAX 數據請求異步 |
| React-Router | React 路由模塊 |
| History | 管理路由層會話歷史 |
| React-Ace | 在線代碼編輯器 |
| React-Color | 顏色選擇器 |
| React-ID-Swiper | 分屏滾動 |
| SortableContainer | 頁面拖拽 |
| Dom-To-Image | 基于 Canvas 的 DOM 轉換成圖片 |
?
為什么使用Redux？
? ?大型應用中不同組件共享同一個數據源的情況是常見的，如果都讓組件自身來維護一份的數據，很容易造成數據混亂。組件內部也由于夾帶著處理數據的邏輯，從而和數據耦合到一起了。
? ?Redux 框架解決了這個問題，簡單來說，它將 React 由父級傳遞數據，變為了由一個統一的數據源 store 單向地向各個組件傳遞數據。
? ?我們通過使用 Redux 能夠將數據集中統一管理起來放到組件的最頂層，然后分發給所有組件，每個組件只管渲染，不處理數據邏輯。
?
0x03，數屏的能力
? ?登錄系統之后，點擊“新建可視化”大按鈕，進入編輯向導。
? ?第一步需要先選擇模板。目前只有兩個模板。點擊創建大屏即可。
?
圖3 新建可視化-選擇模板
?
第二步，在大屏編輯界面上，我們可以看到很多組件，如柱狀圖，餅圖，數字翻牌器，折線圖，漏斗圖，地圖，標題，時間器，等等，往大屏上拖拽即可，如下圖所示：
?
圖4 新建可視化-拖拽組件
?
第三步，選中組件，設置樣式。如下圖所示，我選中了一個折線圖：
?
第四步，選中組件，設置數據源，如下圖所示：
?
圖6 新建可視化-編輯組件數據源
?
目前，數據源類型有三種：
靜態數據：即按規定格式，寫在 JSON 靜態數據里，不可變；
API：即自己在遠端提供一個返回規定格式 JSON 數據的 Web Service；
數據庫：如下圖所示，選好數據庫，寫標準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-
總結
以上是生活随笔為你收集整理的#研发解决方案#共享能力的数屏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在网络虚拟化之前部署NFV将使运营商网络
- 下一篇： 我的学习JavaEE路线