項目四基于云平臺技術(shù)的智慧工廠管理系統(tǒng)搭建與部署任務(wù)2智慧工廠云平臺數(shù)據(jù)可視化展示目錄CONTENTS任務(wù)描述與要求02職業(yè)目標(biāo)01任務(wù)學(xué)習(xí)與實踐03任務(wù)小結(jié)0401職業(yè)目標(biāo)職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐知識目標(biāo)：

能力目標(biāo)：01能分析Web應(yīng)用程序的架構(gòu)（重點）02理解Web應(yīng)用程序的基本概念（重點）掌握Web應(yīng)用程序的組成結(jié)構(gòu)（重點）了解Web應(yīng)用程序開發(fā)的基本流程能設(shè)計簡單的Web應(yīng)用程序架構(gòu)02任務(wù)描述與要求職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐任務(wù)描述：

任務(wù)要求：我們已在云平臺上實現(xiàn)了對設(shè)備的實時監(jiān)控功能。為了進一步提升用戶體驗，使設(shè)備數(shù)據(jù)的展示與監(jiān)控更加直觀、人性化，我們接下來將專注于智慧工廠監(jiān)測系統(tǒng)中云平臺數(shù)據(jù)可視化展示界面的實現(xiàn)。這一界面將采用先進的可視化技術(shù)，將復(fù)雜的設(shè)備數(shù)據(jù)轉(zhuǎn)化為易于理解和分析的圖形、圖表等形式，使管理者能夠迅速捕捉設(shè)備運行狀態(tài)的關(guān)鍵信息，從而做出更加精準(zhǔn)的決策。0102完成智慧工廠的Web應(yīng)用程序開發(fā)自行繪制一個Web應(yīng)用程序草圖03任務(wù)學(xué)習(xí)與實踐職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐Web應(yīng)用程序簡介Web應(yīng)用程序開發(fā)21職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐1.Web應(yīng)用程序認(rèn)知在物聯(lián)網(wǎng)技術(shù)蓬勃發(fā)展的今天，Web應(yīng)用程序在物聯(lián)網(wǎng)云平臺中占據(jù)著舉足輕重的地位，并發(fā)揮著不可替代的作用。物聯(lián)網(wǎng)云平臺作為連接物理世界與數(shù)字世界的橋梁，其核心功能之一便是通過Web應(yīng)用程序向用戶提供直觀、便捷的交互界面，從而實現(xiàn)對物聯(lián)網(wǎng)設(shè)備的遠(yuǎn)程監(jiān)控、數(shù)據(jù)管理和業(yè)務(wù)邏輯處理。Web應(yīng)用程序是指通過Web瀏覽器進行訪問的應(yīng)用程序。它們可以是靜態(tài)的，如展示公司信息的網(wǎng)站，也可以是動態(tài)的，如在線購物網(wǎng)站或社交網(wǎng)絡(luò)平臺。Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐1.Web應(yīng)用程序認(rèn)知Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐Web應(yīng)用程序的特性

可訪問性用戶可以通過任何具有互聯(lián)網(wǎng)連接的設(shè)備訪問Web應(yīng)用程序，無需在本地計算機上安裝軟件。可伸縮性Web應(yīng)用程序可以輕松地在不同的計算機和操作系統(tǒng)之間進行共享，適應(yīng)不同規(guī)模的用戶群體。易維護性與傳統(tǒng)的本地應(yīng)用程序相比，Web應(yīng)用程序通常更容易維護和升級，因為更新可以集中在服務(wù)器端進行。1.Web應(yīng)用程序認(rèn)知Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐社交媒體允許用戶分享信息、建立聯(lián)系和交流，包括用戶注冊、個人資料、好友關(guān)系、消息發(fā)送等功能。在線購物提供商品展示、購物車、支付、訂單管理等功能。在線學(xué)習(xí)提供在線課程和學(xué)習(xí)資源，包括課程發(fā)布、學(xué)習(xí)管理、作業(yè)提交、成績統(tǒng)計等功能。在線政務(wù)與公共服務(wù)允許用戶在線辦理各項政務(wù)服務(wù)，包括身份認(rèn)證、在線申

報、智能問答、實時交互等功能。新聞/媒體網(wǎng)站發(fā)布新聞和媒體內(nèi)容，包括文章發(fā)布、新聞分類、標(biāo)簽、評論等功能。功能和用途1.Web應(yīng)用程序認(rèn)知Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐鑒于Web應(yīng)用程序及其API常成為惡意攻擊的主要目標(biāo)，安全性應(yīng)作為系統(tǒng)開發(fā)全生命周期的核心要素予以重點考量。為了保護Web應(yīng)用程序免受潛在的安全威脅和漏洞，開發(fā)人員需要采取多種安全技術(shù)和策略，如Web應(yīng)用防火墻、API保護、Bot防護和DDoS(DistributedDenialofService,分布式拒絕服務(wù))攻擊防護等。這些技術(shù)和策略的結(jié)合可以提供全面的安全防護，確保Web應(yīng)用程序的穩(wěn)定性和用戶數(shù)據(jù)的安全性。隨著Web技術(shù)的不斷發(fā)展，Web應(yīng)用程序的功能和用途也在不斷擴展和完善。同

時，為了確保Web應(yīng)用程序的安全性和穩(wěn)定性，開發(fā)人員需要時刻關(guān)注最新的安全威

脅和漏洞，并采取相應(yīng)的防護措施來保護用戶數(shù)據(jù)的安全。2.Web應(yīng)用程序組成結(jié)構(gòu)Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐（1）設(shè)計界面組成結(jié)構(gòu)Web應(yīng)用程序設(shè)計界面一般由設(shè)計區(qū)和組件庫組成，如圖所示。2.Web應(yīng)用程序組成結(jié)構(gòu)Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐（2）組件庫組成結(jié)構(gòu)組件庫是一組預(yù)制的、可復(fù)用的UI元素集合，這些元素可以被開發(fā)人員直接引入到項目中，用于構(gòu)建Web應(yīng)用的界面。組件庫的出現(xiàn)極大地簡化了前端開發(fā)流程，使得開發(fā)人員能夠快速搭建出高質(zhì)量的界面，同時保持界面的一致性和可維護性。在組件庫中，將UI元素分為三類，分別是基礎(chǔ)元素、圖表元素和設(shè)備元素，這些UI元素都可以直接拖拽到設(shè)計區(qū)。其中設(shè)備元素必須在云平臺項目配置完成，能夠在云平臺上正常進行數(shù)據(jù)監(jiān)測和操縱后才會出現(xiàn)。如果在設(shè)計時沒有出現(xiàn)物聯(lián)網(wǎng)網(wǎng)關(guān)等設(shè)計元素，則需要檢查云平臺項目配置。此外，為了界面的美觀和多元化，往往在組件庫中會加入特定場景中常見的一些圖片標(biāo)識。例如本次項目類型選擇為工業(yè)物聯(lián)，則在組件庫中可以選擇工業(yè)圖庫，就可以使用一些常見的工業(yè)設(shè)備圖標(biāo)。2.Web應(yīng)用程序組成結(jié)構(gòu)Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐（3）設(shè)計區(qū)組成結(jié)構(gòu)設(shè)計區(qū)通常指的是在Web前端開發(fā)工具中用于設(shè)計UI界面的區(qū)域。在這個區(qū)域中，開發(fā)者可以使用各種設(shè)計工具（如畫布、組件庫等）來構(gòu)建和預(yù)覽UI界面。設(shè)計區(qū)的作用是為開發(fā)者提供一個直觀、便捷的設(shè)計環(huán)境，使得開發(fā)人員能夠快速地設(shè)計出符合需求的界面。如圖所示。設(shè)計區(qū)支持可視化設(shè)計，即開發(fā)人員可以通過拖放組件、調(diào)整樣式等方式來構(gòu)建界面，而無需編寫大量的代碼。開發(fā)人員在設(shè)計界面的同時可以看到界面的實際效果，從而及時調(diào)整和優(yōu)化設(shè)計。同時設(shè)計區(qū)支持對組件的管理，包括添加、刪除、修改組件等操作。這有助于開發(fā)者更好地組織和管理界面元素。3.Web應(yīng)用程序草圖繪制Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐步驟一：首先，我們在完成任務(wù)1的基礎(chǔ)上新建一個應(yīng)用，點擊“生成應(yīng)用”跳轉(zhuǎn)至項目生成器的新增界面，在彈出的頁面點擊“馬上創(chuàng)建一個應(yīng)用”，如右圖所示。3.Web應(yīng)用程序草圖繪制Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐步驟二：創(chuàng)建后需要填寫應(yīng)用信息，其中應(yīng)用模板選擇“項目生成器”，如右圖所示。步驟三：正確填寫應(yīng)用信息以后，可以進入應(yīng)用設(shè)計視圖，開始web應(yīng)用程序開發(fā)，如右圖所示。3.Web應(yīng)用程序草圖繪制Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐步驟四：隨后我們將項目中的傳感器和執(zhí)行器設(shè)備控件從組件庫中拖出到設(shè)計區(qū)，即可實現(xiàn)一個簡單的Web應(yīng)用程序，如下圖所示。1.Web應(yīng)用程序的主要開發(fā)方法Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐添加標(biāo)題敏捷開發(fā)和DevOps3傳統(tǒng)手工編碼1項標(biāo)框架和庫的使用題2人工智能和自動化54低代碼開發(fā)傳統(tǒng)的手工編碼方法是Web應(yīng)用程序開發(fā)的基石。在這種方法中，開發(fā)人員使用編程語言（如HTML、CSS、JavaScript、Java、Python等）直接編寫代碼來構(gòu)建應(yīng)用程序。這種方法對開發(fā)人員的編程技能要求較高，需要深入理解Web開發(fā)的相關(guān)技術(shù)和標(biāo)準(zhǔn)。盡管它提供了最大的靈活性和控制能力，但開發(fā)周期長、成本高，且容易出錯。1.Web應(yīng)用程序的主要開發(fā)方法Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐添加標(biāo)題3傳統(tǒng)手工編碼1項標(biāo)框架和庫的使用題2人工智能和自動化54低代碼開發(fā)為了減輕傳統(tǒng)手工編碼的負(fù)擔(dān)，開發(fā)人員開始使用各種框架和庫來加速開發(fā)過程。這些框架和庫提供了一套預(yù)定義的工具、組件和API，使得開發(fā)人員能夠更快地構(gòu)建應(yīng)用程序。例如，React、Vue.js和Angular等前端框架簡化了前端開發(fā)，而SpringBoot、Django和Express等后端框架則簡化了后端邏輯的實現(xiàn)。使用框架和庫可以顯著提高開發(fā)效率，同時保持代碼的可讀性和可維護性。敏捷開發(fā)和DevOps1.Web應(yīng)用程序的主要開發(fā)方法Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐添加標(biāo)題3傳統(tǒng)手工編碼1項標(biāo)框架和庫的使用題2人工智能和自動化54低代碼開發(fā)隨著軟件開發(fā)方法的不斷演進，敏捷開發(fā)和DevOps成為了主流的開發(fā)模式。敏捷開發(fā)強調(diào)快速迭代和響應(yīng)變化，通過短周期的開發(fā)和反饋循環(huán)來持續(xù)交付價值。DevOps則強調(diào)開發(fā)（Dev）和運維（Ops）之間的緊密合作，通過自動化工具和流程來加速軟件交付并提高軟件質(zhì)量。這兩種模式都極大地提升了Web應(yīng)用程序的開發(fā)效率和穩(wěn)定性。敏捷開發(fā)和DevOps1.Web應(yīng)用程序的主要開發(fā)方法Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐添加標(biāo)題3傳統(tǒng)手工編碼1項標(biāo)框架和庫的使用題2人工智能和自動化54低代碼開發(fā)低代碼開發(fā)（Low-CodeDevelopment）是近年來興起的一種革命性的開發(fā)方法。它允許開發(fā)人員通過圖形界面和配置方式快速構(gòu)建應(yīng)用程序，而無需深入編寫大量的代碼。低代碼平臺通常提供了一套豐富的預(yù)構(gòu)建組件、模板和自動化工具，使得開發(fā)人員可以通過拖放、配置和連接組件來構(gòu)建復(fù)雜的應(yīng)用程序。這種方法極大地降低了技術(shù)門檻，使得非專業(yè)開發(fā)人員也能參與到應(yīng)用程序的開發(fā)中來。同時，它也提高了開發(fā)效率，縮短了開發(fā)周期，并降低了開發(fā)成本。敏捷開發(fā)和DevOps1.Web應(yīng)用程序的主要開發(fā)方法Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐添加標(biāo)題3傳統(tǒng)手工編碼1項標(biāo)框架和庫的使用題2人工智能和自動化54低代碼開發(fā)隨著人工智能技術(shù)的不斷發(fā)展，越來越多的Web應(yīng)用程序開發(fā)方法開始融入人工智能技術(shù)。例如，自動化測試、代碼審查、性能優(yōu)化等方面都可以借助人工智能技術(shù)來提高效率和準(zhǔn)確性。此外，一些低代碼平臺也開始引入人工智能助手，為開發(fā)人員提供更加智能化的輔助和支持。敏捷開發(fā)和DevOps2.Web應(yīng)用程序開發(fā)操作Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐（1）界面開發(fā)1）頁面page的背景設(shè)置：點擊主頁面，再右側(cè)應(yīng)用配置中，選擇一張背景圖片上傳即可。2.Web應(yīng)用程序開發(fā)操作Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐（1）界面開發(fā)2）標(biāo)題設(shè)置：點擊左側(cè)組件庫中的文本，將其拖放到你需要放置的位置，按下列方式進行設(shè)置?！駱邮皆O(shè)置：字號為24，顏色為rgba(255,255,255,1)，樣式為加粗；●數(shù)據(jù)類型設(shè)置：靜態(tài)數(shù)據(jù)，內(nèi)容為智慧工廠管理平臺。2.Web應(yīng)用程序開發(fā)操作Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐（1）界面開發(fā)3）傳感器設(shè)置：分別點擊左側(cè)組件庫中的光照傳感器、接近開關(guān)、溫度傳感器、濕度傳感器，將其拖放到你需要放置的位置，按下列方式進行設(shè)置?！?/p>

尺寸設(shè)置：寬度180，高度130；●

標(biāo)題設(shè)置：字號18，顏色為rgba(125,200,227,255)，居中對齊；●

內(nèi)容設(shè)置：字號18，顏色為rgba(250,240,180,255)，背景顏色為rgba(37,70,152,255)2.Web應(yīng)用程序開發(fā)操作Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐（1）界面開發(fā)4）三色燈設(shè)置：分別點擊左側(cè)組件庫中的三色燈紅燈、三色燈黃燈、三色燈綠燈，將其拖放到你需要放置的位置，按下列方式進行設(shè)置?！?/p>

尺寸設(shè)置：寬度250，高度80；●

風(fēng)格設(shè)置：精簡；●

標(biāo)題設(shè)置：字號18，顏色為rgba(125,200,227,255)，樣式為加粗；●

內(nèi)容設(shè)置：背景顏色為rgba(37,70,152,255)。2.Web應(yīng)用程序開發(fā)操作Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐（1）界面開發(fā)5）推桿前后設(shè)置：點擊左側(cè)組件庫中的電動推桿，將其拖放到你需要放置的位置，按下列方式進行設(shè)置?！?/p>

尺寸設(shè)置：寬度180，高度280；●

標(biāo)題設(shè)置：字號18，顏色為rgba(125,200,227,255)，居中對齊，樣式為加粗；●

內(nèi)容設(shè)置：背景顏色為rgba(37,70,152,255)。2.Web應(yīng)用程序開發(fā)操作Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐（1）界面開發(fā)6）地圖設(shè)置：點擊左側(cè)組件庫中的靜態(tài)地圖，將其拖放到你需要放置的位置，按下列方式進行設(shè)置。●

尺寸設(shè)置：寬度340，高度280；●

顯示標(biāo)題欄設(shè)置：隱藏；●

上傳圖片設(shè)置：選擇一張廠區(qū)地圖的照片即可；●

地圖樣式設(shè)置：拉伸。2.Web應(yīng)用程序開發(fā)操作Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐（1）界面開發(fā)7）監(jiān)控畫面設(shè)置：點擊左側(cè)組件庫中的圖片，將其拖放到你需要放置的位置，按下列方式進行設(shè)置。●

尺寸設(shè)置：寬度280，高度160；●

圖片樣式設(shè)置：拉伸?！?/p>

數(shù)據(jù)類型設(shè)置：由于這里我們沒有攝像頭設(shè)備，因此采用圖片的形式替代，數(shù)據(jù)類型選擇為單張圖片，并選擇一張廠區(qū)圖片即可；2.Web應(yīng)用程序開發(fā)操作Web應(yīng)用程序開發(fā)Web應(yīng)用程序簡介職業(yè)目標(biāo)任務(wù)描述與要求任務(wù)小結(jié)任務(wù)學(xué)習(xí)與實踐（1）界面開發(fā)8）告警設(shè)置：點擊左側(cè)組件庫中的告警記錄，將其拖放到你需要放置的位置，按下列方式進行設(shè)置。在項目生成器中，完成項目應(yīng)用的設(shè)計，設(shè)計結(jié)果參考右圖所示?！?/p>

尺寸設(shè)置：寬度1220，高度160；●

統(tǒng)計范圍設(shè)置：距今時間1周；●

標(biāo)題設(shè)置：字號18，顏色為rgba(125,200,227,255)，對齊為居中，背景顏色為rgba(6,65,155,1)；