【云駐共創】一文入門物聯網應用開發

一.能得到什么

通過本文你能獲取以下內容：

了解概念與知識點，如HTML、CSS、JavaScript等。

以華為IoT為例，帶你了解什么是物聯網平臺，并簡要介紹API接口的調用方式與使用場景。

通過智慧停車、智慧公廁等項目，帶你近距離領略物聯網的魅力。

不上代碼都是耍流氓，智慧路燈項目的偽代碼展示，讓你入門不在困難。

廢話不多說，卷起來哇。

二.應用開發基礎知識介紹

2.1 應用服務架構類型

2.1.1 C/S結構

服務器一客戶機，即 Ctient-Server (C/S）結構。C/S結構通常采取兩層結構。服務器負責數據的管理，客戶機負責完成與用戶的交互任務。

C/S模式的發展經歷了從兩層結構到三層結構，三層結構伴隨著中間件技術的成熟而興起，其核心概念是利用中間件將應用分為表示層、業務邏輯層和數據存儲層三個不同的處理層次。

2.1.2 B/S結構

B/S結構（Browser/Server ，瀏覽器／服務器模式），是 WEB 興起后的一種網絡結構模式， WEB 瀏覽器是客戶端最主要的應用軟件，采取瀏覽器請求，服務器響應的工作模式。 ·

它是C/S架構的一種改進，可以說屬于三層 C/S架構。主要是利用了不斷成熟的 WWW 瀏覽器技術，用通用瀏覽器就實現了原來需要復雜專用軟件才能實現的強大功能，并節約了開發成本，是一種全新的軟件系統構造技術。

2.2架構特點

2.2.1 C/S結構

C/S結構的優點是能充分發揮客戶端 PC 的處理能力，很多工作可以在客戶端處理后再提交給服務器。對應的優點就是客戶端響應速度快。

客戶端需要安裝專用的客戶端軟件，對安裝環境有要求，開發維護成本高。

2.2.2 B/S結構

B/S架構最大的優點是總休擁有成本低、維護方便、分布性強、開發簡單，可以不用安裝任何專門的軟件就能實現在任何地方進行操作，客戶端零維護，系統的擴展非常容易，只要有一臺能上網的電腦就能使用。

最大的缺點就是通信開銷大、系統和數據的安全性較難保障。

2.2.3 Web開發

Web開發主要分為前端開發和后端開發兩部分，前端更側重于頁面的展示與用戶的交互，后端更側重于數據的處理與服務的訪問。

前端指的是直接與用戶接觸的網頁，網頁上通常有HTML、 Css 、 JavaScrirt 等內容。前端開發跟隨移動互聯網發展帶來了大量高性能的移動終端設備應用。日 HTML5 , Node.js 的廣泛應用，各類 Ul 框架， JS 類庫層出不窮，開發難度也在逐步提升。

后端指的是程序、數據庫和服務器層面的開發。在大多數應用中，非用戶接口代碼比用戶接口代碼多得多。存儲和檢索數據，遵循業務邏輯和規則，并且需要對結果進行預測，所有這一切都發生在幕后。

2.2.4 Web標準

Web 應用開發需要遵循的標準就叫Web標準，這里的Web標準是一系列標準的集合。網頁主要有三部分組成：結構標準（XML 、HTML和XHTML），表現標準（CSS )，行為標準（DOM，JavaScrirt ）。

2.3 初識HTML

白話講，HTML就是用于編寫頁面，交付給用戶觀看也使用。

2.3.1 什么是HTML

HTML又叫做超文本標記語言（ HyperText Markup Language) ，是用來構建網頁的一種標記語言。

2.3.2 HTML與XHTML的關系

XHTML是可擴展超文本標記語言，是一種更嚴格、更純凈的HTML語言。

HTML元素必須被正確地嵌套

HTML元素必須被關閉

標簽名必須用小寫字母

HTML文檔必須擁有根元素

2.3.3 HTML的語義化

HTML中新增了很多語義化標簽，不同的 HTML 標簽代碼了不同的網頁內容。

2.3.4 HTML標簽

HTML是由一系列標簽組成的，每個標簽是以< 和＞，包裹的單詞，通常稱之為元素。

例如：

單標簽：只有一個標簽就能表達完整的含義，例如： 、＜img/>

雙標簽：由開始標簽和結束標簽一起組成，例如：

2.3.5 HTML文檔

HTML文件的基本結構由一個內包含一個文件頭標簽 和一個文檔主體標簽組成，在最前頭還需要加上文檔聲明標簽。

例如：

2.4 初識CSS

CSS白話講，就是修飾和渲染頁面的樣式。

2.4.1 什么是CSS

Css 的英文全稱是Cascading Style Sheets，中文名為級聯樣式單，一般也稱為層疊樣式表單。

2.4.2 CSS 的功能

CSS 是一種樣式表現語言，它是對網頁結構語言（HTML）的補充。主要用于對網頁樣式的定義，例如布局、顏色、文本等的設計。

2.4.3 CSS 的作用

精確控制頁面中的各個元素 。

2.4.4 CSS的特性層

疊特性＆繼承性。

2.4.5 CSS的引入

將CSS樣式直接寫到HTML元素的style屬性中。

將CSS樣式寫到標簽中 。

精確通過元素引入外部的一個CSS文件。

通過在元素中，使用＠import 導入一個外部的CSS文件 。

2.4.6 CSS的基本語法

CSS的語法格式

選擇器指向您需要設置樣式的HTML元素。

聲明塊包含一條或多條用分號分隔的聲明。

每條聲明都包含一個 CSS 屬性名稱和一個值，以冒號分隔。

多條 CSS 聲明用分號分隔，聲明塊用花括號括起來。

2.5 初識JavaScript

白話講，JavaScript就是編寫頁面的邏輯使用的方法。

2.5.1 什么是JavaScript

JavaScript （通常簡寫為JS）是一種輕量的、解釋性的、面向對象的頭等函數語言，其最廣為人知的應用是作為網頁的腳本語言，但同時它也在很多非瀏覽器環境下使用。JS是一種動態的基于原型和多范式的腳本語言，支持面向對象、命令式和函數式的編程風格。

2.5.2 JS語法

JavaScript 的語法和 Java 語言類似，每個語句以；結束，語句塊用｛… }。但是，JS 并不強制要求在每個語句的結尾加；，瀏覽器引擎會自動在每個語句的結尾補上；。

2.5.3 JS 的作用

在 Web 世界里，只有JavaScript能跨平臺、跨瀏覽器驅動網頁，與用戶交互。

2.5.4 JS主流框架

2.6 AJAX

2.6.1 什么是AJAX

AJAX（Asynchronous JavaScript And XML ）是一種與服務器交換數據的技術，可以在不重新載入整個頁面的情況下更新網頁的一部分。一般用于網絡請求。

2.6.2 優勢

大幅提升用戶體驗，減輕服務器端的壓力。

異步加載，局部更新。

前端通過月 AX 技術從后端服務器中獲取數據。

2.7 XMLHttpRequest

XMLHttpRequest（XHR）對象用于與服務器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請求特定 URL，獲取數據。這允許網頁在不影響用戶操作的情況下，更新頁面的局部內容。XMLHttpRequest 在 AJAX 編程中被大量使用。

2.7.1 簡稱

XHR

2.7.2 方法

open 初始化

Send 發送

setRequestHeader Content 一 type

2.7.3 屬性

onreadystatechange

readyState

Status

responseText

2.8 跨域請求

瀏覽器從一個域名的網頁去請求另一個域名的資源時，域名、端口、協議任一不同，都是跨域請求。

2.8.1 同源策略

如果兩個頁面（接口）的協議、域名、端口號都相同，我們認為他們具有相同的源。

瀏覽器的安全策略

協議名＋主機名＋端口號

2.8.2 舉例

解決跨域的方法： JSONP 、 Proxy、 iframe 、 CORS

天然可以跨域的標簽： script ( img 、link )

2.8.3 跨域資源共享CORS

CORS 是一個 W3C 標準，全稱是”跨域資源共享” ( Cross-origin resource sharing）。它允許瀏覽器向跨源服務器，發出 XMLHttpRequest 請求，從而克服了AJAX只能同源使用的限制。

三.物聯網平臺應用側API介紹

3.1 API：應用程序接口

API是Application programming interface的縮寫，中文一般翻譯為應用程序接口。

API是軟件系統中不同組件進行通信的接口，每個組件通過提供 API 定義自己能提供的能力和提供能力的方法，其他組件通過調用 API 來調用該能力。

通過 API ，開發者可以快速將他人提供的能力集成進自己的軟件系統中，而無需關注他人如何實現這個能力，快速開發大型軟件系統。

3.2 RESTful API

RESTful API是指基于REST風格設計的API 。

REST 風格基于HTTP協議，基本設計思想如下：

用URI指定資源（操作對象）

用 HTTP method指定操作方法

用攜帶參數指定操作細節

3.3 整體方案及應用定位

3.4 物聯網平臺與應用架構演進

3.5 物聯網應用典型架構

3.6 設備管理

定制開發設備管理能力，與業務邏輯打通，保障用戶體驗連貫性。設備管理能力由物聯網平臺提供，廠商通過二次開發調用。

3.7 業務處理

應用的核心業務邏輯，主要是對物聯網設備上報數據的分析處理和對物聯網設備行為的控制。

數據獲取和命令下發的功能由物聯網平臺提供，其他業務邏輯需廠家自行實現。

3.8 用戶管理

若物聯網應用需要供多個用戶使用，則建議力口入用戶管理功能，實現權限控制，分組管理。

用戶管理能力由廠商根據自己的需求自行設計實現。

3.9 API集成平臺

當前華為云IoT平臺對外提供了如下幾類開放API：

API列表：http://support.huaweicloud.com/api-iothub/iot_06_v5_0003.html

3.10 API介紹

3.10.1 創建產品

API功能：在物聯網平臺上創建產品，定義服務能力列表。

請求方法：POST

URI ：/vs/iot/{project_id}/products

關鍵參數 :

name：用于指定產品名稱

device_type：用升旨定設備類型

protocol_type：用于指定設備使用的協議類型

data_format：用于指定設備上報數據的格式 - service_capabilities：用于指定設備的服務能力列表

注：如果需要對數據進行解編碼，還需要在平臺開發和安裝插件。

3.10.2 創建設備

API功能：在物聯網平臺上注冊一個設備，用于設備接入。

請求方法：POST

URI：/vs/iot/{project_id}/devices

關健參數：

product_id ：用于指定設備牙屬產品的ID 。

node_id：二用于指定設備標識碼。

3.10.3 下發設備命令

API功能：通過平臺給設備下發命令，控制設備行為。

請求方法：POST

URI：/vs/iot/{project_id}/devices/{device_id}/commands

關鍵參數

device_id：用于指定要下發命令的設備。

paras：用于指定下發命令的內容。

3.10.4 下發異步設備命令

API功能：通過平臺給設備下發命令，控制設備行為。

請求方法：POST

URI：/vs/iot/{project_id}/devices/{device_id}/async_commands

關鍵參數

device_id：用于指定要下發命令的設備。

paras：用于指定下發命令的內容。

send_strategy：用于指定下發策略，默認緩存下發。

3.10.5 查詢設備屬性

API功能：通過平臺查詢設備某個服務的屬性，獲取當前值。

請求方法：GET

URI：/vs/iot/{project_id}/devices/{device_id}/Properties

關鍵參數：

device_id ：用于指定要查詢屬性的設備 。

service_id ：用于指定要查詢屬性的服務。

3.10.6 查詢設備影子數據

API功能：調用此接口查誰時旨定設備的設備影子信息，包括對設備的期望屬性信息（desired 區）和設備最新上報的屬性信息 ( reported 區）。

請求方法：GET

URI：/vs/iot/{project_id}/devices/{device_id}/shadow

關鍵參數：

device_id ：用于指定要查詢屬性的設備 。

四.案例

4.1 智慧停車

4.1.1 場景描述

通過‘’地磁、車檢器＋ IoT平臺”的模式實現車位數據采集、狀態監控、車位查找、在線繳費、收費管理、執法監管等功能。解決了傳統停車方式車位周轉率低、人工收費亂等核心問題，助力行業大幅提升收益。

4.1.2 面臨問題

停車難：停車位供給總量不足；停車資源供給嚴重失衡二時間和空間上分布不均。

信息化管理落后：停車信息化建設落后；管理落后，技術落后；孤島現象顯著，現有停車資源利用效率低下。

無法互聯互通：停車場歸屬及信息化、智慧化程度不一、標準不一無法實現一賬通行，園區 Z 城市監管難，公眾體驗差。

4.1.3 解決方案

通過物聯網，實現應用-平臺-網絡-終端設備的一體化管理。

4.1.4 實際效果

實現支付快捷，提升車輛同行效率；采用分布式互聯網架構并行處理訂單，提升車輛進出停車場效率，有效避免車輛滯留。

系統管理云平臺，管控全部停車場實現秒級實時監控，同步停車場的泊位變化情況，便于管理人員隨時了解車場運作情況，及時調用分配資源。使用大數據計算服務統計分析停泊營收狀況，準確把握車場整體泊位水平。

4.1.5 交付案例

伙伴：鄭大、凱達爾、停哪兒等。

客戶：商業寫字樓、商場、住宅的物業公司、景區；城市級停車：易停車。目前有鄭州錦榮國際輕紡城、周口港綜合物流園等。

4.2 智慧大棚

4.2.1 場景描述

采用物聯網、大數據、人工智能等技術，對農產品種植、加工、流通等環節的各項數據（生長環境、農事記錄、投入品管理、病蟲害預警防治、墑情追蹤記錄、產品生產及物流等）進行全程記錄，形成對農產品的質量安全全楷朔源的能力。

4.2.2 面臨問題

農業技術：經驗種植、單一種植；經驗主導的種植模式；

勞動力：農村人口老齡化、人口向城鎮轉移；吸引投資難。

消耗污染：農藥過度使用，利用率 36 . 6 % , 造成土地嚴重污染；

生產服務：服務零散，不成體系；

信息分散：消息傳遞緩慢、信息傳達不及時 ；

安全監管：消費者食品安全無法保障、食品安全事故頻發；

4.2.3 解決方案

4.2.4 實際效果

數據自動采集。通過物聯網設備自動采集環境數據，通過物聯網平臺便捷進行農事記錄。

種植過程可視。實時數據記錄、實時視頻監控，農資投入品均做采集、催班里、展示。

產品檔案豐富。環境數據、農事記錄、生長過程圖片，采摘管理、倉儲/物流配送跟蹤。

農場管理便捷。人員管理、基地管理、投入品管理實時數據管理、種植過程管理。

一物一碼可追溯。掃碼可見農產品的生長全過程，增加消費者的生態信任，提高產品附加值。

4.2.5 交付案例

伙伴：物聯芯語等

客戶：江蘇靖江市農業園

4.3 智慧公廁

4.3.1 場景描述

利用物聯網傳感技術，打造廁所實時感知平臺，幫助景區內、園區內人員可以根據廁所實時信息選擇最適合的廁所，提高管理服務水平。機場室內導航廁所位置廁所擁堵提示，李高機場服務質量。車站緩解廁所擁堵，動態調整移動廁所數量，提高旅客在出行高峰期間體驗 ·

4.3.2 面臨問題

當前公司采用的是傳統架構，即終端設備直接接服務器，存在如下問題：

接入兼容性差：不同廠家生產的設備（比如紅外人體感應器、蹲位檢測器、智能門鎖設備等）接入存在兼容性問題，不同協議適配開發工作量大。

性能和穩定性問題突出：業務擴大，海量廁所智能設備接入，服務器無法承受高峰期的爆發，導致系統卡頓甚至崩潰。

設備維護升級困難：廁所的智能設備部署范圍廣，設備之間距離間隔遠、分布離散，針對設備側軟件的后期升級維護耗費大量的人力。

4.3.3 解決方案

4.3.4 實際效果

通過公共衛生間的廁所引導大屏系統，隨時隨地查看廁位占用信息，廁內環境，數據可分享，讓客戶直觀地通過app看到園區內廁所的位置、廁所的情況、廁所繁忙程度等。

管理人員通過智能廁所大屏對整個園區內的公廁設備進行實時遠程監測、控制和軟固件升級等，提高運維和巡檢效率，提升服務質量。

4.3.5 交付案例

伙伴：格物致新等

客戶：景區、高速路、城市公廁；深圳寶安機場、連江高速服務區、北京西站等華為云服務

五.代碼實踐分享

5.1 API調用案例

如果使用華為IoT，接口的樣例可以參考下文。

5.2 華為智慧路燈案例講解

下文為簡單的物聯網樣例，功能為注冊設備與獲取硬件設備。

5.2.1 路燈注冊頁面

該頁面為HTML、Css、JavaScript實現，負責與用戶交互。

5.2.2 前端代碼

負責頁面顯示。

負責業務邏輯。

5.2.3 后端接口

負責提供給硬件接口。供前端頁面調用，并實現了功能邏輯。

六.總結

通過本篇文章，大家應該了解物聯網、物聯網相關的技術與物聯網相關的使用場景。我們通過場景可以看到，在現有的市場環境和需求中，僅僅提供平臺，軟件已經不能夠完全解決用戶的需求了。同時也面臨著方案繁瑣的情況，所以軟件+平臺+硬件的模型已經越來越普及。便隨而來的我們更應該了解物聯網。如果您想了解，華為IoT平臺提供了一大波案例與解決方案，可以幫助您更加的方便入門和理解。如有興趣可以查看https://activity.huaweicloud.com/iot_gsl2020.html詳細了解。

本文整理自華為云社區【內容共創系列】活動。

查看活動詳情：https://bbs.huaweicloud.com/blogs/314887

相關任務詳情：一節課入門物聯網應用開發

HTML IoT

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。