HackMD
🛠️ 【軟體】前端網頁 🛠️
前端概念淺談
不了解前端、後端是啥可以先看看 前端、後端、資料庫是什麼？。
在機器人領域裡面，前端就是人機交互介面。
像是點擊 UI 按鈕可以控制車速、透過設定頁面調整參數等等。
可以簡單用 Python 的 tkinter 等做出簡單的介面。
但要做出商業化、易擴展、優美動畫的版面，還是得學習網頁設計的。
也就是 HTML、CSS、JavaScript 三大基礎網頁程式語言。
這裡再提一下機器人領域中的後端。
其實所有軟體計算，包含 ROS、相機運算、導航定位感測整合等，都是後端範疇。
和傳統的後端，例如 Database 的資料操作、大數據處理，在工作內容上就不太一樣。
前端的重要性
開發機器人的前端不外乎就是為了 user-friendly。
你不會請對方每次要啟動機器時，要先 SSH、開 container、跑腳本、改 launch 參數吧 ?
一方面這超躁的XD，一方面也可能毀了程式。
你可以透過 App 去自定義掃地機器人，但你沒辦法真正去「修改」軟體。
所以前端的最大重要性處是提高操作方便性，同時也是保護代碼。
學習順序
後端開發 -> 後端封裝 -> 前端 -> 全端對接。
這裡就簡單說說前端的學習。
雖然前端程式框架演變很快，但都離不開前端三大程式語言。
熟悉 HTML、CSS、JavaScript 後，接著就是搭配各種框架應用套件。
像是 JavaScript UI 組件庫 react、高靈活度 Tailwind CSS、react 開發框架 Next.js 等等。
但這些框架和庫數量真的五花八門，我會建議直接跟著 youtube 專案邊抄邊學。
後端指令封裝
前端的 UI 點擊事件發生後，會觸發對應的後端指令腳本。
例如「開始建圖」按鈕對應後端的 mapping.sh，裡面包含導航、定位、通訊節點的啟動。
弄前端前，必須先將後端程序的各種指令封裝成單一腳本。
但指令封裝，實際上可能比你想像中的麻煩。
- 像是關閉節點，就不是在終端機 Ctrl+C 那麼簡單，而可能要調閱 pid 進程來終止節點。
- 運行中修改設定，會不會讓程序崩潰 ? 有辦法動態更新嗎 ?
- 像是前端設定頁面如何連動到後端 launch 參數 ?
當我們在撰寫後端時，就應該思考這些問題。
這些都和程式碼檔案結構、外部參數引用、節點崩潰處理等有直接的關係。
所以對我來說，機器人前端其實是在考驗後端的穩定性和成熟度。
