HackMD
ESP32 進階使用方法-第六週
tags: NKFW第二届
❓如果使用上有值得思考的問題，就寫在此處
⚠️注意（觀念澄清）
以下 details 裡面有提示，如果同學還是想不到，可以按開 details 裡面有些提示
介紹什麽是 FS (File System)
我們在寫完上次的 code 時，是不是把 html/css/js 寫在main.cpp 這個檔案裡，但當專案變得複雜和需要協作時，就非常難以去做維護，我們又稱為意大利麵程式（spaghetti code），意思就是程式碼跟意大利麵一樣亂，根本無法看清楚
所以這個時候我們就會使用 File System
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
那什麽是 File System 呢？他其實就是一個分類不同檔案的管理系統
當我們去讀一個硬碟的時候，會發現讀出來都是一堆 0101 的二進位數字。對電腦來説，整個硬碟就是一個資料，我們可以透過 FS 來進行有效的分類，而我們會在每一份檔案前面加入一些標識，就像你在 HTML 前會標記 DOCTYPE = HTML 的概念，那大家可以看一下 windows 上面的資料總管，他也是種 FS 的應用和圖像呈現方法
那實際上要怎麽應用到 ESP32 上呢？我們就來看一下吧！
首先來看我們需要包含的函式庫
#include "SPIFFS.h"
而根據我們上週學過的 Arduino 架構：
#include <library.h>
const a;
const b;
void setup(){
functiona.begin();
functionb.begin();
}
void loop(){
//some code
}
今天的實作内容
同時我們來講一下到時候我們要實作的東西！
今天希望這個實作能夠讓你們用這個系統可以寫出一個網頁
那我們來簡單講一下今天的設計邏輯
- 啓動 WIFI
- 建立 WebServer 物件
- 開啓 SPIFFS
- 在 PlatformIO 建立一個 spiffs 專用資料夾
- 新增 HTML 檔案
- 設定連線的 WIFI 網路
- 設定 ESP32 模式
- 設定預設 SPIFFS 路徑
- 設定網頁路徑
- 等待 WIFI 連線
- 開啓伺服器
- 連線後列印 IP
- 持續監控客戶的連線狀況
如何使用SPIFFS
開啓SPIFFS
我們下一步就是要去啓動 SPIFFS 這個動作
那同學可以猜猜看、先不要看 details 這個可以動動腦想想看
SPIFFS.begin(true);
那我們來解釋一下這個啓動函式，畢竟他有給參數
SPIFFS.begin(true);
這個 true 的意思是，當啓動的時候不會格式化原本在 SPIFFS 的檔案和資料
那我們如果啓動失敗的話怎麽辦，難道要讓他執行下去嗎？當然不行，所以要設定一個函數讓 SPIFFS 啓動失敗的時候，告訴我們失敗了
void initSPIFFS(){
if(SPIFFS.begin(true) == false){
Serial.println("spiffs failed");
}
}
在 PlatformIO 建立一個 spiffs 專用資料夾
那我們知道了如何開啓 SPIFFS，那我們要把資料放 PlatformIO 哪裡呢？
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
我們先到左邊的這個欄位裡面
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
然後點選 NKFWtest
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
接著點一下右鍵就會開出這個視窗
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
然後點選 New Folder…
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
就會創建一個新的資料夾，把他命名為 data
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
之後我們點開 data
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
然後右鍵點 data 資料夾，點選 New File…
然後命名新的檔案叫做 index.html
這樣我們就成功建立了一個新的資料結構了！
要注意我們現在建立的是資料結構，而還沒上傳到 ESP32，上傳需要另外處理！
新增HTML檔案
那接下來寫一個簡單的 HTML 檔案，我們就寫在 index.html
請你們以第一二週學到的東西寫出一個 HTML 檔案
待會介紹完之後給大家自己實作一個簡單的網站！會抽查哦！
大家可以先貼第五周做的檔案上去
<!DOCTYPE html>
<html><head><meta charset='utf-8'></head>
<body>hello,esp32
</body></html>
燒錄 FS 到 ESP32 上面
那今天我們要如何上傳這些檔案呢？
以下是操作的步驟
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
首先先選取 PlatformIO
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
然後應該要看到這個畫面
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
點選 build -> Upload & Monitor
然後跑出 SUCCESS 就成功了哦
設定預設 SPIFFS 路徑
那我們要如何把資料從 SPIFFS 呼叫出來呢？還記得上週的函式庫嗎？
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
string html = htmlmodule();
request->send(200, "text/html", html);
});
但我們可以發現現在 html string 不存在了，那怎麽呼叫呢？
request->send(200, "text/html", html);
我們就要先設定 SPIFFS 在哪裡，然後再來呼叫
設定 SPIFFS 的位置如下
server.serveStatic("/", SPIFFS, "/");
那這三個變數代表什麽意思呢？
- URL 路徑：像是蝦皮的網站是
https://shopee.tw，而其他的賣場則需要用在蝦皮底下的資料夾https://shopee.tw/shop/41961292，所以大家看到不同的網頁只是在不同的資料夾地下而已哦！ - 使用的搜索系統，這裏是用 SPIFFS
- ESP32 上面的根目錄，像是我們今天建立的 data 資料夾，就是我們的根目錄
設定網頁路徑
我們終於設定完了 SPIFFS 的資料架構和形態了，我們終於可以去呼叫 SPIFFS 了！那呼叫的方法跟上週的方法有點不一樣哦！
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/index.html", "text/html");
});
這邊我們可以看到變數不一樣了，雖然server.on()一樣的但是request->send()就差了
那我們來解釋一下這三個變數的意思：
第一個是我們使用的系統，SPIFFS，第二個就是我們的 HTML 檔案路徑，那今天 data 那個資料夾相當於我們的根目錄/，所以底下的 index.html 表示就是/index.html，最後就是傳送資料的形態
其實形態蠻多的，可以參考一下這個表格
| 定義 | 程式 |
|---|---|
| HTML格式 | text/html |
| 純文件資料 | text/plain |
| XML格式 | text/xml |
| gif檔案 | image/gif |
| jpg檔案 | image/jpeg |
| png檔案 | image/png |
| xml檔案 | application/xml |
| json檔案 | application/json |
這個表我們待會會回來看怎麽使用哦！
然後最後！我們要在 loop 裡面加入以下的 code：
server.handleClient();
