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

歡迎關注 『Python小白的項目實戰』 系列，持續更新
2021愛智先行者—（1）開箱點評
2021愛智先行者—（2）零基礎APP開發實例

1. 前言

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

我指導一位大二學生在閱讀相關資料的基礎上進行開發環境搭建，基于模板創建和部署 Demo 應用。這個練習比較簡單，但其中仍然遇到了不少小問題。

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

有鑒于此，本文以未安裝工具軟件的計算機、未激活的愛智設備為例，實戰解說零基礎小白的愛智開發過程。Step by step，不漏過一個細節，你也能實現零基礎輕松上手愛智開發。

本文參考了：

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

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

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

2. 準備工作

2.1 硬件準備

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

2.2 愛智設備連接和激活

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

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

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

（2）下載愛智 APP：

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

（3）激活愛智設備：

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

注意事項：

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

2.3 計算機安裝開發軟件

2.3.1 安裝 Node.js

JavaScript 是一門編程語言，Node.js 就是運行在服務端的 JavaScript。

Node.js 可以從中文官網（http://nodejs.cn/ ）下載。注意最新版本的 Node.js 并不支持 Win7 操作系統，可以選擇 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 進入控制臺，在控制臺執行：

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

（4）設置環境變量：

選擇：計算機>>屬性>>高級系統設置>>環境變量，編輯修改環境變量：

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

（5）安裝 express 插件：

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

npm install express -g

（6）安裝測試

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

d:
cd nodejs
node

進入 node 工具的控制臺，執行：

require(‘express’)

沒有報錯，輸出 express 的相關信息，表明 node.js 已經安裝配置成功。

2.3.2 安裝 VSCode

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

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

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

（3）安裝中文插件包。

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

2.4 開發工具配置

在 VSCode 安裝 EdgerOS 擴展插件。
EdgerOS 擴展插件可供開發者在愛智設備上打包，上傳，安裝和更新愛智應用，并向開發者提供愛智應用開發模板。

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

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

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

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

（3）登錄 EdgerOS 系統

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

注意事項：

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

3. 創建應用

3.1 加載項目模板庫

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

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

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

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

3.2 使用模板創建項目

（1）選擇項目模板 Simple，這是最小實現的 EdgerOS APP 應用模板，只包含必需組件。

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

（3）填寫模板參數，填寫完成后點擊 “立即創建” 按鍵即可創建項目。

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

注意事項：

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

3.3 修改項目文件

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

文件夾中已經包含了項目配置文件與示例頁面的初始代碼，項目根目錄主要結構如下：

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

其中 package.json 中的內容，就是我們剛才填寫的模板參數。

即使對項目模板不做任何修改，也可以部署和發布應用。

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

  Hello EdgerOS!  
  Tested by youcans@xupt

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

4. 部署應用

（1）開啟開發模式：

• 計算機連接愛智設備的無線網絡 “EOS-000xxx”。
• PC 端在瀏覽器打開 https://192.168.128.1 ，使用開發者 ID 密碼登錄 EdgerOS 系統。
• 開啟開發模式，獲取開發密碼：點擊 設置>開發模式，打開開發模式開關，復制開發密碼。

（2）添加設備：

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

（3）部署應用：

• 在 VS Code 左側菜單中 EDGEROS>設備管理>（設備名稱） 后面有兩個小圖標按鈕，如下圖所示。
  
  

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

5. 訪問應用

• 在 PC 端的設備桌面點擊愛智應用 “test”，可以訪問應用。

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

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

6. 總結

至此，我們就完成了愛智應用的開發環境搭建和測試例程的創建和部署。

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

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

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

什么，還是有問題？

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

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

【本節完】

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

Copyright 2021 youcans, XUPT

Crated：2021-11-20

歡迎關注 『Python小白的項目實戰』 系列，持續更新
2021愛智先行者—（1）開箱點評
2021愛智先行者—（2）零基礎APP開發實例