【本文正在參與"2021愛智先行者-征文大賽"活動(dòng)】，活動(dòng)鏈接：https://bbs.csdn.net/topics/602601454

歡迎關(guān)注 『Python小白的項(xiàng)目實(shí)戰(zhàn)』 系列，持續(xù)更新
2021愛智先行者—（1）開箱點(diǎn)評(píng)
2021愛智先行者—（2）零基礎(chǔ)APP開發(fā)實(shí)例

1. 前言

愛智系統(tǒng)（EdgerOS）和愛智設(shè)備 Spirit 1（“精靈一號(hào)” 邊緣計(jì)算機(jī)）的使用和開發(fā)非常方便，目前文檔、模板、教程、視頻也已經(jīng)比較豐富和詳細(xì)了。

我指導(dǎo)一位大二學(xué)生在閱讀相關(guān)資料的基礎(chǔ)上進(jìn)行開發(fā)環(huán)境搭建，基于模板創(chuàng)建和部署 Demo 應(yīng)用。這個(gè)練習(xí)比較簡(jiǎn)單，但其中仍然遇到了不少小問題。

問題出在，這些文檔、教程由于按照某個(gè)主題編寫，往往會(huì)略過了相關(guān)的必需步驟。雖然這些必需步驟可能是本領(lǐng)域的基礎(chǔ)知識(shí)，而且在其它文檔中也有說明，但對(duì)于小白來說，這就已經(jīng)是邁不過去的坎了。曾經(jīng)滄海難為水，大神不識(shí)小白苦。

有鑒于此，本文以未安裝工具軟件的計(jì)算機(jī)、未激活的愛智設(shè)備為例，實(shí)戰(zhàn)解說零基礎(chǔ)小白的愛智開發(fā)過程。Step by step，不漏過一個(gè)細(xì)節(jié)，你也能實(shí)現(xiàn)零基礎(chǔ)輕松上手愛智開發(fā)。

本文參考了：

（1）愛智官網(wǎng)相關(guān)文檔，主要是：愛智官網(wǎng)—應(yīng)用開發(fā)—指南—起步(https://www.edgeros.com/edgeros/guide/start/overview.html)

（2）愛智官方視頻，主要是：

• 《2021愛智先行者系列課第一講—初識(shí)愛智》(https://www.bilibili.com/video/BV1aq4y1G7xG)
• 《EdgerOS 應(yīng)用程序開發(fā)-第一課：應(yīng)用開發(fā)快速入門》(https://www.bilibili.com/video/BV1aq4y1G7xG)

2. 準(zhǔn)備工作

2.1 硬件準(zhǔn)備

• 計(jì)算機(jī)：筆記本電腦，Win7 操作系統(tǒng)，尚未安裝工具軟件；
• 手機(jī)，安卓系統(tǒng)手機(jī)，華為 Mate10；
• 愛智設(shè)備，邊緣計(jì)算機(jī) Spirit 1，尚未激活。
• 路由器，華為 A2 路由器，已連接寬帶網(wǎng)絡(luò)

2.2 愛智設(shè)備連接和激活

智能邊緣計(jì)算機(jī) Spirit 1 搭載了愛智操作系統(tǒng) EdgerOS，是 EdgerOS 的載體。

按照 智能邊緣計(jì)算機(jī) Spirit 1《安裝指南》進(jìn)行設(shè)備安裝和激活。安裝指南寫的很詳細(xì)，

（1）愛智設(shè)備連接：
可以通過網(wǎng)線連接愛智設(shè)備與現(xiàn)有路由器，將愛智設(shè)備作為路由器的擴(kuò)展網(wǎng)絡(luò)設(shè)備；也可以將設(shè)備直接與入戶寬帶網(wǎng)口連接，將愛智設(shè)備作為路由器使用。
對(duì)于零基礎(chǔ)小白，推薦將愛智設(shè)備連接路由器。搞不定了，或者練習(xí)完成后，關(guān)掉愛智設(shè)備，拔出連接網(wǎng)線，不會(huì)影響原有網(wǎng)絡(luò)設(shè)置。

（2）下載愛智 APP：

• 對(duì)于安卓系統(tǒng)手機(jī)，直接從應(yīng)用商店搜索“愛智”，下載和安裝 “愛智APP” 即可。
• 對(duì)于 iOS 系統(tǒng)手機(jī)，下載和安裝 “愛智 APP” 后，還要安裝 EdgerOS 安全證書，詳見《安裝指南》。

（3）激活愛智設(shè)備：

• 打開手機(jī) Wifi 開關(guān)，發(fā)現(xiàn)并連接到愛智設(shè)備的 Wifi 網(wǎng)絡(luò) “EOS-000xxx”。
• 打開 “愛智APP” ，按照《安裝指南》操作，發(fā)現(xiàn)設(shè)備，進(jìn)行網(wǎng)絡(luò)設(shè)置、注冊(cè)設(shè)備、注冊(cè)登錄、設(shè)置設(shè)備密碼，就可以完成愛智設(shè)備 Spirit 1 的激活。
• 已激活的設(shè)備通過激活時(shí)設(shè)置的密碼即可進(jìn)入愛智頁面。

注意事項(xiàng)：

• 愛智設(shè)備 Spirit 1 使用中，需要始終連接寬帶網(wǎng)口或路由器以接入網(wǎng)絡(luò)，不能斷開互聯(lián)網(wǎng)網(wǎng)絡(luò)連接。（愛智設(shè)備斷開互聯(lián)網(wǎng)也可以運(yùn)行，但本文中的 APP 開發(fā)部署等功能無法操作。）
• 在 APP 開發(fā)部署過程中，往往需要手機(jī)、計(jì)算機(jī)連接到愛智設(shè)備 Wifi 網(wǎng)絡(luò) “EOS-000xxx”，而不是原有路由器的 Wifi 網(wǎng)絡(luò)。
• 手機(jī) 安裝 “愛智APP” 時(shí)，遇到開通會(huì)員和交會(huì)員費(fèi)的步驟，可以免費(fèi)試用一個(gè)月。按照系統(tǒng)說明，開通會(huì)員才能支持遠(yuǎn)程連接。

2.3 計(jì)算機(jī)安裝開發(fā)軟件

2.3.1 安裝 Node.js

JavaScript 是一門編程語言，Node.js 就是運(yùn)行在服務(wù)端的 JavaScript。

Node.js 可以從中文官網(wǎng)（http://nodejs.cn/ ）下載。注意最新版本的 Node.js 并不支持 Win7 操作系統(tǒng)，可以選擇 node-v12.18.0-x64 及以前的版本。

（1）下載 node-v12.18.0-x64 并安裝。

（2） 推薦修改安裝路徑到 D: 盤，如安裝到 D:/nodejs 目錄。

（3） 驗(yàn)證安裝是否成功：

• Win + “R” 喚出“快速打開”運(yùn)行框，輸入 cmd 進(jìn)入控制臺(tái)；
• 輸入 node –v，輸出 node.js 版本信息；
• 輸入 npm –v，輸出 npm 版本信息；

如圖所示，正常輸出 node.js、npm 版本信息，說明 node.js 安裝成功。

（3） 修改全局依賴包下載路徑：

• 在 D:/nodejs 新建目錄 “D:/nodejs/node_global”（全局包下載目錄），“D:/nodejs/node_cache”（緩存目錄）
• 輸入 cmd 進(jìn)入控制臺(tái)，在控制臺(tái)執(zhí)行：

npm config set prefix “D:/nodejs/node_global”
npm config set cache “D:/nodejs/node_cache”

（4）設(shè)置環(huán)境變量：

選擇：計(jì)算機(jī)>>屬性>>高級(jí)系統(tǒng)設(shè)置>>環(huán)境變量，編輯修改環(huán)境變量：

• 在用戶變量 PATH 中增加 npm 全局安裝插件路徑。將默認(rèn)路徑 “C:/Users/xxx/AppData/Roaming/npm” 修改為 “D:/nodejs/node_global/”。
• 在系統(tǒng)變量中新建 [NODE_PATH]。變量名：NODE_PATH，變量值：D:/nodejs/node_global/node_modules。
• 關(guān)機(jī)后重新開機(jī)啟動(dòng)。

（5）安裝 express 插件：

快速運(yùn)行框輸入 cmd 進(jìn)入控制臺(tái)，在控制臺(tái)執(zhí)行：

npm install express -g

（6）安裝測(cè)試

快速運(yùn)行框輸入 cmd 進(jìn)入控制臺(tái)，切換到 nodejs 安裝目錄后執(zhí)行 node：

d:
cd nodejs
node

進(jìn)入 node 工具的控制臺(tái)，執(zhí)行：

require(‘express’)

沒有報(bào)錯(cuò)，輸出 express 的相關(guān)信息，表明 node.js 已經(jīng)安裝配置成功。

2.3.2 安裝 VSCode

VSCode（Visual Studio Code）是免費(fèi)開源的現(xiàn)代化輕量級(jí)代碼編輯器，支持幾乎所有主流的開發(fā)語言，內(nèi)置命令行工具和 Git 版本控制系統(tǒng)，支持插件擴(kuò)展，并針對(duì)網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化，是優(yōu)秀的遠(yuǎn)程開發(fā)工具。
VSCode 跨平臺(tái)支持 Win、Mac 以及 Linux，支持調(diào)試 Node.js 程序。

（1）下載 VSCodeUserSetup-x64-1.62.2 并安裝。

（2）推薦修改安裝路徑到 D: 盤，如安裝到 D:/VSCode 目錄。

（3）安裝中文插件包。

• 啟動(dòng) VSCode，按 Ctrl + Shift + P 打開命令調(diào)試板，輸入“Configure Display Language”，將語言配置選項(xiàng)修改為"zh-cn"。
• 點(diǎn)擊 “擴(kuò)展” 按鈕進(jìn)入 VSCode 應(yīng)用商店，搜索并安裝中文插件包，在搜索框中輸入“Language Packs”，選擇中文（簡(jiǎn)體）安裝。
• 重啟 VSCode，推薦關(guān)機(jī)后重新開機(jī)啟動(dòng)。

2.4 開發(fā)工具配置

在 VSCode 安裝 EdgerOS 擴(kuò)展插件。
EdgerOS 擴(kuò)展插件可供開發(fā)者在愛智設(shè)備上打包，上傳，安裝和更新愛智應(yīng)用，并向開發(fā)者提供愛智應(yīng)用開發(fā)模板。

（1）啟動(dòng) VSCode，點(diǎn)擊 “擴(kuò)展” 按鈕進(jìn)入 VSCode 應(yīng)用商店，下載并安裝 EdgerOS 擴(kuò)展插件，插件 ID 為 edgeros.edgeros。

（2）PC 端安裝 EdgerOS 安全證書，詳見：EdgerOS官網(wǎng)：PC 端安裝 EdgerOS 安全證書。注意該網(wǎng)頁包括 MacOS 系統(tǒng)和 Windows 系統(tǒng)的安裝指南，請(qǐng)根據(jù)自己的系統(tǒng)選擇相應(yīng)部分操作。

• 下載根證書（https://cacerts.edgeros.com/edgeros_root.crt）
• 導(dǎo)入根證書，證書存儲(chǔ)時(shí)選擇 “將所有的證書放入下列存儲(chǔ)”，瀏覽，選擇 “受信任的根證書頒發(fā)機(jī)構(gòu)”

• 驗(yàn)證根證書：計(jì)算機(jī)連接愛智設(shè)備的無線網(wǎng)絡(luò) “EOS-000xxx”，使用瀏覽器打開 https://192.168.128.1 可以進(jìn)入 EdgerOS 登錄頁面并查看安全證書。

（3）登錄 EdgerOS 系統(tǒng)

• 使用瀏覽器打開 https://192.168.128.1，進(jìn)入 EdgerOS 登錄頁面。
• 輸入手機(jī)號(hào)碼，獲取驗(yàn)證碼，登錄 EdgerOS 系統(tǒng)，PC 端登錄后頁面如下：

注意事項(xiàng)：

• PC 端登錄的頁面雖然與手機(jī) APP 登錄界面的風(fēng)格類似，但其功能和權(quán)限是不同的。
• PC 端面向開發(fā)者，具有啟動(dòng)設(shè)置、隱私設(shè)置、用戶設(shè)置等系統(tǒng)設(shè)置權(quán)限。

3. 創(chuàng)建應(yīng)用

3.1 加載項(xiàng)目模板庫

（1）啟動(dòng) VSCode，從資源管理器選擇 EdgerOS，點(diǎn)擊按鍵 ”創(chuàng)建項(xiàng)目”。

（2）進(jìn)入項(xiàng)目模板庫，選擇刷新模板信息。這時(shí)可能找不到項(xiàng)目模板，或者找到的項(xiàng)目模板很少，不要著急，請(qǐng)往下看。

（3）修改模板源，打開 VSCode 左下方的管理按鈕，點(diǎn)擊：設(shè)置>用戶>擴(kuò)展> EdgerOS > Template Source，將模板源從 Github 切換為 Gitee。

（4）再次刷新模板信息，自動(dòng)加載項(xiàng)目模板，現(xiàn)在就找出了很多項(xiàng)目模板。

3.2 使用模板創(chuàng)建項(xiàng)目

（1）選擇項(xiàng)目模板 Simple，這是最小實(shí)現(xiàn)的 EdgerOS APP 應(yīng)用模板，只包含必需組件。

（2）點(diǎn)擊 ”立即應(yīng)用”，打開項(xiàng)目描述菜單。

（3）填寫模板參數(shù)，填寫完成后點(diǎn)擊 “立即創(chuàng)建” 按鍵即可創(chuàng)建項(xiàng)目。

• 項(xiàng)目名稱：項(xiàng)目的工程文件名稱，例如：test
• 包名：軟件包名稱，例如：com.example.myapp
• 項(xiàng)目描述：簡(jiǎn)要說明項(xiàng)目用途，例如：test project
• 保存路徑：項(xiàng)目在本地保存路徑，默認(rèn)路徑，可以自行修改
• 版本號(hào)：應(yīng)用的版本號(hào)，0.0.1，不需要修改
• 提供商 ID：開發(fā)者 ID（本地開發(fā)可以填寫 00000）
• 提供商名稱：開發(fā)者 ID 對(duì)應(yīng)的用戶名，填寫開發(fā)者注冊(cè)的用戶名
• 提供商郵箱：開發(fā)者的郵箱，必須填寫
• 提供商手機(jī)：開發(fā)者的手機(jī)號(hào)，可以不填
• 其他項(xiàng)：在新窗口打開項(xiàng)目，是否在新的 VScode 窗口打開項(xiàng)目

注意事項(xiàng)：

• 開發(fā)者 ID 需要從開發(fā)者網(wǎng)站的個(gè)人信息查詢獲?。ū镜亻_發(fā)可以填寫 00000）。

3.3 修改項(xiàng)目文件

創(chuàng)建項(xiàng)目后會(huì)在項(xiàng)目目錄下生成一個(gè)文件夾（文件夾名稱為項(xiàng)目名稱），作為項(xiàng)目根目錄。

文件夾中已經(jīng)包含了項(xiàng)目配置文件與示例頁面的初始代碼，項(xiàng)目根目錄主要結(jié)構(gòu)如下：

├── assets          資源文件夾                   ├── routers         路由信息 ├── public          靜態(tài)頁面文件├── views           模板頁面├── eslintrc.json   eslint 配置文件├── edgeros.json    edgeros 應(yīng)用配置文件├── main.js         程序入口├── jsconfig.json   代碼補(bǔ)全配置文件└── package.json    依賴包的管理

其中 package.json 中的內(nèi)容，就是我們剛才填寫的模板參數(shù)。

即使對(duì)項(xiàng)目模板不做任何修改，也可以部署和發(fā)布應(yīng)用。

本案例對(duì) public 目錄下的 index.html 進(jìn)行 “最小實(shí)現(xiàn)” 的修改，以示區(qū)別，以供測(cè)試：

  Hello EdgerOS!  
  Tested by youcans@xupt

修改文件后，不要忘了保存。。。

4. 部署應(yīng)用

（1）開啟開發(fā)模式：

• 計(jì)算機(jī)連接愛智設(shè)備的無線網(wǎng)絡(luò) “EOS-000xxx”。
• PC 端在瀏覽器打開 https://192.168.128.1 ，使用開發(fā)者 ID 密碼登錄 EdgerOS 系統(tǒng)。
• 開啟開發(fā)模式，獲取開發(fā)密碼：點(diǎn)擊 設(shè)置>開發(fā)模式，打開開發(fā)模式開關(guān)，復(fù)制開發(fā)密碼。

（2）添加設(shè)備：

• 在 VS Code 左側(cè)菜單中單擊 EDGEROS，選擇：設(shè)備管理>添加設(shè)備。
• 在添加設(shè)備窗口窗口填寫添加設(shè)備信息：
  • 設(shè)備IP：192.168.128.1
  • 設(shè)備名稱：EdgerEOS（自行定義）
  • 開發(fā)密碼：xxxxxx（上段打開開發(fā)模式所復(fù)制的開發(fā)密碼）

（3）部署應(yīng)用：

• 在 VS Code 左側(cè)菜單中 EDGEROS>設(shè)備管理>（設(shè)備名稱） 后面有兩個(gè)小圖標(biāo)按鈕，如下圖所示。
  
  

• 點(diǎn)擊第一個(gè)圖標(biāo)按鈕 “安裝 EdgerOS APP”，應(yīng)用自動(dòng)打包發(fā)布至設(shè)備桌面，在設(shè)備桌面可以看到愛智應(yīng)用的桌面圖標(biāo)和應(yīng)用名稱 “test”。
  

5. 訪問應(yīng)用

• 在 PC 端的設(shè)備桌面點(diǎn)擊愛智應(yīng)用 “test”，可以訪問應(yīng)用。

• 在手機(jī)端的愛智APP首頁，點(diǎn)擊愛智應(yīng)用 “test”，也可以訪問應(yīng)用愛智應(yīng)用 “test”。
  
  
  

test 運(yùn)行結(jié)果如上圖所示，顯示兩行字符： “Hello EdgerOS! Tested by youcans@xupt”，這就是我們修改 index.html 的結(jié)果。

6. 總結(jié)

至此，我們就完成了愛智應(yīng)用的開發(fā)環(huán)境搭建和測(cè)試?yán)痰膭?chuàng)建和部署。

• 雖然準(zhǔn)備工作比較繁瑣，但創(chuàng)建應(yīng)用和部署、發(fā)布其實(shí)很簡(jiǎn)單，雖然只是一個(gè)測(cè)試?yán)獭?/p>

• 小白在創(chuàng)建應(yīng)用時(shí)遇到各種問題，其實(shí)很多都是準(zhǔn)備工作中的問題。在創(chuàng)建應(yīng)用時(shí)報(bào)錯(cuò)，一下子很難搞清問題出在哪里。即便向熟手請(qǐng)教，對(duì)方也不容易想到小白在準(zhǔn)備階段中會(huì)搞出什么樣的問題。

• 本文對(duì)準(zhǔn)備工作和例程創(chuàng)建部署的步驟都寫的很詳細(xì)，小白同學(xué)只要一步步細(xì)心地做下來，就可以順利完成這個(gè)練習(xí)和測(cè)試。

什么，還是有問題？

• 請(qǐng)檢查 PC 和手機(jī)的 Wifi 網(wǎng)絡(luò)是否連接到愛智設(shè)備的無線網(wǎng)絡(luò) “EOS-000xxx”。由于原有路由器仍然在工作中，PC 和手機(jī)的 Wifi 網(wǎng)絡(luò)可能自動(dòng)連接到原有路由器，斷開了與愛智設(shè)備的無線網(wǎng)絡(luò)的連接。
• 如果修改項(xiàng)目文件，對(duì)應(yīng)用重新進(jìn)行部署，需要再次開啟開發(fā)模式以獲取開發(fā)密碼，才能重新對(duì)應(yīng)用進(jìn)行打包發(fā)布。沒有重新獲取開發(fā)密碼直接打包發(fā)布，系統(tǒng)將會(huì)報(bào)錯(cuò)。

這個(gè)測(cè)試項(xiàng)目很簡(jiǎn)單啊，愛智設(shè)備和應(yīng)用到底都能干什么呢？我們下周接著再聊這個(gè)話題。

【本節(jié)完】

【本文正在參與"2021愛智先行者-征文大賽"活動(dòng)】，活動(dòng)鏈接：https://bbs.csdn.net/topics/602601454

Copyright 2021 youcans, XUPT

Crated：2021-11-20

歡迎關(guān)注 『Python小白的項(xiàng)目實(shí)戰(zhàn)』 系列，持續(xù)更新
2021愛智先行者—（1）開箱點(diǎn)評(píng)
2021愛智先行者—（2）零基礎(chǔ)APP開發(fā)實(shí)例