最課程階段大作業06：U度節能平臺控制系統

阿新 • • 發佈：2019-01-13

除了網際網路專案，當今社會還有一個概念非常流行，那就是：物聯網。什麼是物聯網？物聯網是通過感測裝置，按約定的協議，把任意物品與網際網路相連線，進行資訊交換和通訊，以實現智慧化識別、定位、跟蹤、監控和管理的一種網路概念。物聯網是網際網路的一種延伸，將原本使用者與使用者的互動，延伸和擴充套件到物品與物品之間。

有同學說：老師，我要開發網際網路。我說：滾！物聯網就是網際網路。大家都知道我是一個米粉。小米是基於物聯網做著網際網路的事。未來，統計地球的事情就交給雷布斯去做了。

回過頭去看我們的上一個專案：汙水處理系統，是不是一個物聯網專案呢？它讀取感測器資料顯示出來，同時反過來它傳送指令給控制器控制節氣泵和曝氣機的開關等。最課程（zuikc.com）還有不少這樣的專案，比如今天的“U度節能平臺系統”。

U度是一家在美國上市的節能公司開發的一款針對全球市場的節能控制系統。U度配合智慧電錶等裝置，可以做到這些事情：

1：遠端控制電力系統的開與關；

2：設定策略控制電力系統的開與關；

3：功能強大的許可權分配系統，允許各個部分制定子許可權；

4：詳盡的報表與大資料分析，智慧分配電力等能源在各個部分的輸出；

U度除了PC端，還有APP段，以後的物聯網裝置將會越來越支援各種型別的終端平臺的接入，開發人員的工作量將會變得越來越多，直到50年後AI代替你coding。

一：體系架構

這次，讓我們略過“專案概述”和“平臺設計原則”，直接進入體系架構。

有同學問我，體系架構圖到底該怎麼畫？其實有標準的UML畫法。但我們一般都不那麼畫。因為體系結構往往要解釋給客戶聽，所以，太過抽象的UML架構圖漸漸成了陽春白雪，漸無人用，除非你要去考那個毫無用處的某部的：系統架構師~~。我這麼說是不公平的。某部的考試對於技術開發無大用，但是這個證書還是很吃香的。為什麼吶，因為國內很多事業單位招投標的時候，都會要求投標公司有多少持有高階證書的人員，這個時候如果你有這個證書，你會很吃香的，所以~~

汙水處理系統我們整了一個體系架構圖，這次，我們換一種風格整一個，如下：

注意，上圖中的紅框是我加的，這也是本次作業我們要涉及的部分。這個我們一會說。

有同學可能會好氣，剩餘的其它部分是什麼東西呢？怎麼開發呢？雖然本次不涉及，但是我覺得跟大家解釋一下，對各位同學對於軟體開發有很好的幫助。

裝置，一般指的硬體產商給我們生產好的一個感測器或者控制器或者集成了感測器和控制器的綜合裝置。對我們軟體開發人員來說，你可以把它想象成為一個簡陋的電腦，它可通過介面（比如網線口）跟其它裝置或者伺服器等傳輸資料。這些資料一方面是它收集來讓你知道它的工作狀態的，反過來你也可以給它傳送資料，控制它的行為。

前置機，名字聽上去很恐怖，說人話就是：位置放在前面的一臺電腦（或者裝置，同上）。在前置機上部署的軟體一般來說就是我們開發人員要進行開發的了。如果你未來的公司接了一個類似這樣的專案，那麼你就會發現負責該部分軟體開發的人員，都會是你們公司的大佬。為什麼吶？因為這部分軟體的要求都會有：效率高、容錯性高、能處理高併發，還要讀硬體產商的各種奇奇怪怪的文件。小夥子，我看你骨骼清奇，將來一定也會成為大佬。

好了，說前置機的一臺電腦，於是你會想到什麼？沒錯，我們在這個專案中的測試階段，所謂前置機和紅框內的伺服器就是一臺電腦……

解釋完畢前置機，好像別的我也就不需要介紹了。

這個體系架構圖是當時我們畫的。這個客戶本身還是有技術團隊的，以下是原始需求中他們畫的體系架構圖：

所以，體系架構圖沒有所謂的標準，只要你畫的開心、別人能看懂就好。

二：需求調研過程

很多剛入行的同學可能存在一個誤解。開發人員難道不應該是開發的嗎，需求調研幹我P事。相信我，你不是那個0.1%的幸運開發，你也不是在開發界的食物鏈頂端。99.9%的研發人員都會有這個需求調研的過程。

即便不要你直接面對客戶，你公司的產品經理可能也會丟給你一個這樣的需求：

下圖是我們的開發去現場跟人講解需求的時候畫的。

漸漸的，我們的需求演變成這樣：

以及這樣：

漸漸的，我們的需求又變成了這樣：

和這樣：

到了這個時候，才開始進入真正的開發階段。關門……

專案經理（也許是有技術底蘊的產品，也許是開發升上去的經理）：把原始需求寫成開發能看懂的需求文件；

前端開發：頁面靜態化吧，即HTML+CSS。不幸的是，你公司很大可能不會給你派一個專門的前端開發哦；

架構師：負責整體把握專案打架，以及資料庫字典也許是具體開發去設計的，但是架構師也得通過；

開發：壘磚吧，跟測試、跟產品打架；

測試：找茬吧，與產品一起跟開發打架；

對了，我上面說關門是不對的，因為需求是時長會變的~~。

還有，在不少中小公司或者不少大公司的各個專案組裡，專案經理、架構師、前端、開發、測試可能角色是同一個人哦。

三：需求

讓我們看看本次開發要做哪些功能吧。

1.登入模組

2.登入後首頁

3.部門新增

四：資料字典

所謂資料字典，就是資料庫表的設計。本次給出一個樣例，不作為你本次設計的依據，僅作為參考樣式。如下：

要完成作業的資料庫表，由你自己設計。

五：圖表

在U度的開發中，還有一個知識點可能同學們覺得比較神祕，那就是圖表的開發。初學者往往會覺得圖表開發很神祕。沒錯，它的底層實現還是很有技術含量的，但是對於我們來說，我們只需要呼叫第三方的圖表框架去實現想要的圖表就行。

在Java的歷史上，最著名、以及歷史最悠久的是JFreeChart。JFreeChart的特點就是它偏向於更底層，我們可以自己獲取資料，然後用資料本身去生成一張真的圖片或者圖片流，然後在CS或者BS系統中呈現出來。但是這也導致JFreeChart的開發略顯臃腫。

以前的我們，沒得用，只能用國外各種框架和外掛，好在如今，BAT的大名如雷貫耳，在開源屆也貢獻了不少東西，即便在國外，也逐漸流行開來。我們今天，就是要用這樣一款國內的框架，百度的ECharts（http://www.echartsjs.com）。

很簡單，在web頁面我們要怎麼用ECharts呢？當然是引入js啦。如下是一個最簡單的折線圖：

<html>
<head>
<script src="http://www.echartsjs.com/examples/vendors/jquery/jquery.js"></script>
<script src="http://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1539619299314"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
</script>
</body>
</html>

效果如下：

既然折線圖已經出來，那麼曲線圖和餅圖還會遠嗎？自己查資料實現唄。

除了一些基礎圖示，ECharts還有一些近年來比較騷的高階圖表，比如像雷達圖。那什麼是雷達圖，如下：

是不是感覺有點那麼的熟悉，在哪裡見過？那就是在我們的購物平臺上用來評價快遞員的那個雷達圖。要實現這樣一個雷達圖，在Echarts中也是非常的簡單，你只要把上面程式碼中的options換成如下就可以了：

option = {
    title: {
        text: '基礎雷達圖'
    },
    tooltip: {},
    legend: {
        data: ['預算分配（Allocated Budget）', '實際開銷（Actual Spending）']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
           }
        },
        indicator: [
           { name: '銷售（sales）', max: 6500},
           { name: '管理（Administration）', max: 16000},
           { name: '資訊科技（Information Techology）', max: 30000},
           { name: '客服（Customer Support）', max: 38000},
           { name: '研發（Development）', max: 52000},
           { name: '市場（Marketing）', max: 25000}
        ]
    },
    series: [{
        name: '預算 vs 開銷（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data : [
            {
                value : [4300, 10000, 28000, 35000, 50000, 19000],
                name : '預算分配（Allocated Budget）'
            },
             {
                value : [5000, 14000, 28000, 31000, 42000, 21000],
                name : '實際開銷（Actual Spending）'
            }
        ]
    }]
};

祝大家愉快的享受開發的過程吧~~

六：作業要求

華麗分割線

===========================================================

最課程JavaEE+網際網路分散式新技術開班進行中，來http://www.zuikc.com看看吧。你想參加不一樣的培訓班，並且一畢業就NB，那就來加入我們吧；

更多技術文章和開班資訊請加入，

QQ群：

最課程階段大作業06：U度節能平臺控制系統

最課程階段大作業06：U度節能平臺控制系統

最課程階段大作業04：毫無用處的學生管理系統

最課程階段大作業03：用半天實現淘寶首頁？

最課程階段大作業02：實現自己的利息計算器

最課程階段大作業05：汙水處理系統以及百度地圖

最課程階段大作業之01：使用SVN實現版本控制

作業二：分布式版本控制系統Git的安裝與使用

第二次作業：分布式版本控制系統Git的安裝與使用

作業系統課程設計（一）：linux核心編譯及新增系統呼叫

SVN：一個簡單的版本控制系統

51nod 1270 數組的最大代價思路：簡單動態規劃

軟件工程網絡課程作業二：命令行菜單小程序

課程作業01：模仿JavaAppArguments.java示例，編寫一個程序，此程序從命令行接收多個數字，求和之後輸出結果。

課程作業02：將課程中的所有動手動腦的問題以及課後實驗性的問題，整理成一篇文檔。

課程作業01：模仿JavaAppArguments.java示例，編寫一個程序，此程序從命令行接收多個數字，求和之後輸出結果。

課程作業03：用遞歸方法計算組合數、解決漢諾塔問題、判斷某個字符串是否回文

團隊大作業第一階段總結

一個完整的大作業：淘寶口紅銷量top10的銷量和評價

課程作業06-匯總整理

課程作業09：繼承與多態課件中動手動腦的相關問題。

最課程階段大作業06：U度節能平臺控制系統

相關推薦