描述

在本教程中，我們將學(xué)習(xí)如何使用 TTGO ESP32 和 Visuino 從互聯(lián)網(wǎng)獲取股票數(shù)據(jù)。

觀看視頻！

第 1 步：您需要什么

• TTGO ESP32
• 無線網(wǎng)絡(luò)連接
• 免費(fèi) API 帳戶（也在下一步中解釋）
• Visuino 程序：下載 Visuino

第 2 步：Alphavantage API

?

轉(zhuǎn)到并創(chuàng)建一個(gè)帳戶，然后導(dǎo)航到 API 頁面以復(fù)制 API 密鑰

您可以在此鏈接上找到有關(guān) API 的更多文檔

第 3 步：?jiǎn)?dòng) Visuino，并選擇 Arduino TTGO T-Display ESP32 Board Type

?

?

?

?

1 / 2

?

Visuino：也需要安裝。下載免費(fèi)版本或注冊(cè)免費(fèi)試用。

啟動(dòng)Visuino，如第一圖所示點(diǎn)擊Visuino中Arduino組件（圖1）上的“工具”按鈕出現(xiàn)對(duì)話框時(shí)，選擇“TTGO T-Display ESP32”，如圖2所示

第 4 步：為您的 ESP 獲取服務(wù)器 SSL 證書

?

?

?

?

1 / 3

?

• 轉(zhuǎn)到粘貼到編輯框中，然后單擊“獲取證書”按鈕（圖 1）
• 點(diǎn)擊“Cloudflare Inc ECC CA-3”圖片（圖片2）
• （圖3）在下表“cert:”中選擇證書字段并復(fù)制到剪貼板（下一步需要）

第 5 步：在 Visuino 中設(shè)置 WiFi

?

?

?

?

1 / 6

?

• 選擇 TTGO T-Display ESP32 board 并在屬性窗口中展開“ Modules>WiFi>Connect To Access Points
• 單擊連接到接入點(diǎn)3 點(diǎn)
• 在 AccessPoints 窗口中，將“ WiFi Access Point ”拖到左側(cè)
• 在屬性窗口中設(shè)置SSID（您的 WiFi 熱點(diǎn)或路由器的名稱）
• 在屬性窗口中設(shè)置密碼（您的 WiFi 熱點(diǎn)或路由器的密碼）
• 關(guān)閉接入點(diǎn)窗口
• 選擇 TTGO T-Display ESP32 board 并在屬性窗口中展開“ Modules>WiFi>Sockets
• 點(diǎn)擊 Sockets 3 Dots
• 在“套接字窗口”中，將TCP/IP 安全客戶端 (SSL)拖到左側(cè)
• 在屬性窗口中將主機(jī)設(shè)置為：alphavantage.co
• 選擇“ CACert ”并單擊 3 個(gè)點(diǎn)按鈕，然后在“ CACert 窗口”中粘貼您在上一步中獲得的證書
• 關(guān)閉“套接字窗口”

第 6 步：在 Visuino 設(shè)置顯示中

?

?

?

?

1 / 18

?

選擇TTGO T-Display ESP32板并在屬性窗口中展開“模塊>顯示>方向

將方向設(shè)置為：goRight

選擇TTGO T-Display ESP32 board 并在屬性窗口中展開“ Modules > Display > Elements

單擊元素3 點(diǎn)

• 在Elements 窗口中向左拖動(dòng)Draw Bitmap在屬性窗口中：
• 在位圖編輯器中單擊位圖 3 個(gè)點(diǎn) 加載庫存位圖（圖 6）并關(guān)閉位圖編輯器

您可以在https://iconarchive.com/search?q=stock找到其他位圖

• 在屬性窗口中將 Set Y設(shè)置為 20
• 在Elements 窗口中將Draw Text拖到左側(cè)，在屬性窗口中將Text設(shè)置為 TSLA，Size設(shè)置為 3，X設(shè)置為 80，Y設(shè)置為 20
• 在Elements 窗口中向左拖動(dòng)Text Field在屬性窗口中，在屬性窗口中將Size設(shè)置為 3，X設(shè)置為 80，Y設(shè)置為 50

關(guān)閉元素窗口

第 7 步：在 Visuino 中添加組件

?

?

?

?

1 / 9

?

• 添加“ HTTP Client ”組件
• 選擇“ HTTPClient1 ”并在屬性窗口中將 Host 設(shè)置為 www.alphavantage.co
• 單擊?請(qǐng)求?3 點(diǎn)
• 在“請(qǐng)求窗口”中將“GET”拖到左側(cè)
• 在屬性窗口中將?URL?設(shè)置為：/query?function=GLOBAL_QUOTE&symbol=TSLA&apikey=123456
• 重要?。涸?URL 中，最后用您的 API 密鑰替換 123456
• 同時(shí)?將?“柏林”替換為您所在城市的名稱
• 關(guān)閉?請(qǐng)求窗口
• 添加“ Char To Text ”組件
• 選擇“ CharToText1 ”并在屬性窗口中將 Max Length 設(shè)置為 2000
• 添加“開始”組件
• 添加“時(shí)鐘發(fā)生器”組件
• 選擇“ ClockGenerator1 ”并在屬性窗口中將頻率設(shè)置為 0.0016
• 這大約是 10 分鐘，因此數(shù)據(jù)將每 10 分鐘刷新一次，您可以根據(jù)需要更改頻率
• 添加“延遲”組件并在屬性窗口中將“間隔（uS）”設(shè)置為 2000000
• 添加“ Split JSON Object ”組件

第 8 步：在 Visuino 中解析 JSON

?

?

?

?

1 / 2

?

用鼠標(biāo)右鍵單擊“SplitJSON1”并在菜單中單擊“Parse JSON Object..”

在“JSON 對(duì)象”窗口中粘貼此示例代碼（可在 https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=TSLA&apikey= YOURAPIKEY

將 YOURAPIKEY 替換為您在帳戶中獲得的 API 密鑰

或復(fù)制粘貼以下內(nèi)容：

{
    "Global Quote": {
        "01. symbol": "TSLA",
        "02. open": "745.8900",
        "03. high": "774.8000",
        "04. low": "744.5600",
        "05. price": "774.3900",
        "06. volume": "21373022",
        "07. latest trading day": "2021-09-24",
        "08. previous close": "753.6400",
        "09. change": "20.7500",
        "10. change percent": "2.7533%"
    }
}

關(guān)閉“ JSON 對(duì)象”窗口

“ SplitJSON1 ”組件現(xiàn)在將創(chuàng)建新引腳

第 9 步：在 Visuino 中連接組件

?

?

?

?

1 / 4

?

• 將“ ClockGenerator1 ”引腳輸出連接到“ HTTPClient1 ”引腳時(shí)鐘
• 將“ TTGO T-Display ESP32 ”引腳 [Connected] 連接到“Delay1”引腳開始
• 將“ TTGO T-Display ESP32 ”引腳[Remote Connected]連接到“ HTTPClient1 ”引腳時(shí)鐘
• ?

• 將“ HTTPClient1 ”引腳內(nèi)容連接到“ CharToText1 ”引腳輸入
• 將“ HTTPClient1 ”引腳連接到?TTGO T-Display ESP32 ?> WiFi>TCP Secure Client1 pin In
• 將“ Delay1 ”引腳輸出連接到“ CharToText1 ”引腳時(shí)鐘和?TTGO T-Display ESP32 ?> WiFi>TCP Secure Client1 引腳斷開連接
• 將“ CharToText1 ”引腳輸出連接到“ SplitJSON1 ”引腳輸入
• 將“ SplitJSON1 >? price連接到?TTGO T-Display ESP32 >Text Field1 pin In

注意：您也可以使用“SplitJSON1”組件中的其他引腳

第 10 步：生成、編譯和上傳代碼

?

在 Visuino 中，在底部單擊“構(gòu)建”選項(xiàng)卡，確保選擇了正確的端口，然后單擊“編譯/構(gòu)建和上傳”按鈕。

第 11 步：播放

?

如果您為 TTGO ESP32 模塊供電，它將連接到網(wǎng)絡(luò)并顯示當(dāng)前庫存數(shù)據(jù)。

恭喜！您已經(jīng)使用 Visuino 完成了您的項(xiàng)目。還附上了我為本教程創(chuàng)建的 Visuino 項(xiàng)目，

注意：在文件項(xiàng)目中，當(dāng)您在 Visuino 中打開它時(shí)，?將 WiFi 設(shè)置?（接入點(diǎn)和密碼）更改為您的設(shè)置并?在 URL 末尾添加 API KEY