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

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

1. 前言

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

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

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

有鑒于此，本文以未安裝工具軟件的計算機、未激活的愛智設(shè)備為例，實戰(zhàn)解說零基礎(chǔ)小白的愛智開發(fā)過程。Step by step，不漏過一個細節(jié)，你也能實現(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愛智先行者系列課第一講—初識愛智》(https://www.bilibili.com/video/BV1aq4y1G7xG)
• 《EdgerOS 應(yīng)用程序開發(fā)-第一課：應(yīng)用開發(fā)快速入門》(https://www.bilibili.com/video/BV1aq4y1G7xG)

2. 準備工作

2.1 硬件準備

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

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

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

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

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

（2）下載愛智 APP：

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

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

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

注意事項：

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

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

2.3.1 安裝 Node.js

JavaScript 是一門編程語言，Node.js 就是運行在服務(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） 驗證安裝是否成功：

• Win + “R” 喚出“快速打開”運行框，輸入 cmd 進入控制臺；
• 輸入 node –v，輸出 node.js 版本信息；
• 輸入 npm –v，輸出 npm 版本信息；

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

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

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

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

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

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

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

（5）安裝 express 插件：

快速運行框輸入 cmd 進入控制臺，在控制臺執(zhí)行：

npm install express -g

（6）安裝測試

快速運行框輸入 cmd 進入控制臺，切換到 nodejs 安裝目錄后執(zhí)行 node：

d:
cd nodejs
node

進入 node 工具的控制臺，執(zhí)行：

require(‘express’)

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

2.3.2 安裝 VSCode

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

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

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

（3）安裝中文插件包。

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

2.4 開發(fā)工具配置

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

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

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

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

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

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

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

注意事項：

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

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

3.1 加載項目模板庫

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

（2）進入項目模板庫，選擇刷新模板信息。這時可能找不到項目模板，或者找到的項目模板很少，不要著急，請往下看。

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

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

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

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

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

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

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

注意事項：

• 開發(fā)者 ID 需要從開發(fā)者網(wǎng)站的個人信息查詢獲取（本地開發(fā)可以填寫 00000）。

3.3 修改項目文件

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

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

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

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

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

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

  Hello EdgerOS!  
  Tested by youcans@xupt

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

4. 部署應(yīng)用

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

• 計算機連接愛智設(shè)備的無線網(wǎng)絡(luò) “EOS-000xxx”。
• PC 端在瀏覽器打開 https://192.168.128.1 ，使用開發(fā)者 ID 密碼登錄 EdgerOS 系統(tǒng)。
• 開啟開發(fā)模式，獲取開發(fā)密碼：點擊 設(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è)備名稱） 后面有兩個小圖標按鈕，如下圖所示。
  
  

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

5. 訪問應(yīng)用

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

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

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

6. 總結(jié)

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

• 雖然準備工作比較繁瑣，但創(chuàng)建應(yīng)用和部署、發(fā)布其實很簡單，雖然只是一個測試例程。

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

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

什么，還是有問題？

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

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

【本節(jié)完】

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

Copyright 2021 youcans, XUPT

Crated：2021-11-20

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