DAY1:鐵人賽生存指南：我的「通用 BLE 瀏覽器」專案藍圖

17th鐵人賽

jklu7limj

2025-09-15 20:57:45

22 瀏覽

分享至

前言

身為一個拖延症晚期aka死線超人的我而言，本次的鐵人賽毫不意外的拖到最後一天才開賽，本來預想中的先利用開賽前的時間屯好存稿，開賽後可以穩穩地進行下去的計畫，也在絲之歌的突襲下化為烏有，不過話說回來絲之歌是真的好玩，建議玩過前作的人一定要去試試看，咳....不小心跑題了
本次的主題正如大家標題所見的是Web Bluetooth API 實戰：30 天打造通用 BLE 偵錯工具，之所以選擇這個題目呢，主要是工作上需要學習JavaScript和Web Bluetooth API相關的內容，剛好趁這個機會一起進行了，順便做一下筆記。

內容規劃

由於上述提到的原因，本次鐵人賽基本可以說是在毫無準備的前提下開始了，因此我選擇透過AI來規劃這一個月的學習計畫，同時也趁這個機會來學習如何透過AI來進行新事物的學習與協作，以下是結合AI提出的建議所規畫出來的30天內容大綱，透過這30天的內容，你能夠學習到JavaScript的基礎語法、網頁的基礎(HTML&CSS)、BLE和GATT 協議，以及如何使用Web Bluetooth API來對BLE裝置進行讀取、寫入、訂閱等操作內容。

天數	階段	每日文章主題
第1-10天	第一部分：工具箱的準備
1	I. 基礎建設	鐵人賽生存指南：我的「通用 BLE 瀏覽器」專案藍圖
2	I. 基礎建設	揭開藍芽的神秘面紗：GATT 協議與我們的第一個虛擬裝置
3	I. 基礎建設	JavaScript 啟航：變數、資料型態與語言核心
4	I. 基礎建設	程式的邏輯：運算子與流程控制
5	I. 基礎建設	重複的力量：迴圈與迭代的藝術
6	I. 基礎建設	程式碼的模組化：函式、作用域與閉包
7	I. 基礎建設	萬物皆物件：設計儲存 GATT Profile 的資料結構
8	I. 基礎建設	資料的集合：陣列與常用方法實戰
9	I. 基礎建設	網頁的基石 (HTML)：搭建 BLE 瑞士刀的介面
10	I. 基礎建設	為網頁上妝 (CSS)：設計一個清晰的開發者工具介面
第11-18天	第二部分：賦予工具「變形」的能力
11	II. 前端互動	網頁的骨架 (DOM)：選取核心 UI 區塊
12	II. 前端互動	專案核心 (1)：createElement 動態生成 UI
13	II. 前端互動	專案核心 (2)：根據特徵屬性，打造動態互動面板
14	II. 前端互動	非同步的挑戰：理解探索未知裝置的複雜性
15	II. 前端互動	現代非同步解方 (1)：Promise 的核心概念
16	II. 前端互動	現代非同步解方 (2)：Promise Chaining 串連探索步驟
17	II. 前端互動	語法蜜糖 async：讓非同步程式碼更簡潔
18	II. 前端互動	終極武器 await：用同步思維，駕馭非同步探索流程
第19-28天	第三部分：開始實作
19	III. 連接世界	Web Bluetooth API 導論：安全限制與瀏覽器支援
20	III. 連接世界	萬物皆可連：acceptAllDevices 的力量與責任
21	III. 連接世界	建立連結：連接 GATT 伺服器與日誌記錄
22	III. 連接世界	專案核心 (3)：getPrimaryServices() 動態探索所有服務
23	III. 連接世界	專案核心 (4)：getCharacteristics() 動態探索所有特徵
24	III. 連接世界	整合與渲染：將探索結果動態生成 UI
25	III. 連接世界	綁定事件 (1)：為動態生成的「讀取」按鈕注入靈魂
26	III. 連接世界	綁定事件 (2)：為動態生成的「寫入」按鈕注入靈魂
27	III. 連接世界	綁定事件 (3)：為動態生成的「訂閱」開關注入靈魂
28	III. 連接世界	實戰測試：用我們的工具連接智慧燈泡(暫定)
第29-30天	第四部分：細節修飾
29	IV. 專案潤飾	深入探索與強健性：讀取描述符與斷線處理
30	IV. 專案潤飾	鐵人完賽！總結與發表