---
title: 【其他】實用產品清單
tags: TTennis Pickup Robot
disqus: hackmd
---

<h1 style="text-align: center; color: orange;">
🛠️ 【軟體】前端網頁 🛠️
</h1>

<h2 style="text-align: center; color: skyblue;"> 前端概念淺談 </h2>

<center>

> 不了解前端、後端是啥可以先看看 [前端、後端、資料庫是什麼？](https://www.youtube.com/watch?v=G-Ks1XYGyaY)。

在機器人領域裡面，前端就是人機交互介面。
像是點擊 UI 按鈕可以控制車速、透過設定頁面調整參數等等。

可以簡單用 Python 的 [tkinter](https://docs.python.org/3/library/tkinter.html) 等做出簡單的介面。
但要做出商業化、易擴展、優美動畫的版面，還是得學習網頁設計的。
也就是 <font color="yellow">HTML、CSS、JavaScript</font> 三大基礎網頁程式語言。

這裡再提一下機器人領域中的後端。
其實所有軟體計算，包含 ROS、相機運算、導航定位感測整合等，都是後端範疇。
和傳統的後端，例如 Database 的資料操作、大數據處理，在工作內容上就不太一樣。
</center>

</br>
<h2 style="text-align: center;"> <font color="magenza">前端的重要性 </font></h2>

<center>

開發機器人的前端不外乎就是為了<font color="yellow"> user-friendly</font>。
你不會請對方每次要啟動機器時，要先 SSH、開 container、跑腳本、改 launch 參數吧 ?

一方面這超躁的XD，一方面也可能毀了程式。

你可以透過 App 去自定義掃地機器人，但你沒辦法真正去「修改」軟體。
所以前端的最大重要性處是提高<font color="yellow">操作方便性</font>，同時也是<font color="yellow">保護代碼</font>。
</center>

</br>

<h2 style="text-align: center; color: skyblue;"> <font color="magenza">學習順序 </font></h2>

<center>

:::success
**後端開發 -> 後端封裝 -> 前端 -> 全端對接。**
:::

這裡就簡單說說前端的學習。

雖然前端程式框架演變很快，但都離不開前端三大程式語言。
熟悉 HTML、CSS、JavaScript 後，接著就是搭配各種框架應用套件。

像是 JavaScript UI 組件庫 react、高靈活度 Tailwind CSS、react 開發框架 Next.js 等等。
但這些框架和庫數量真的五花八門，我會建議直接<font color="yellow">跟著 youtube 專案邊抄邊學</font>。
</center>

</br>

<h2 style="text-align: center; color: skyblue;"> <font color="magenza">後端指令封裝 </font></h2>

<center>

前端的 UI 點擊事件發生後，會觸發對應的後端指令腳本。
例如「開始建圖」按鈕對應後端的 `mapping.sh`，裡面包含導航、定位、通訊節點的啟動。

<font color="yellow">弄前端前，必須先將後端程序的各種指令封裝成單一腳本。</font>
但指令封裝，實際上可能比你想像中的麻煩。

* 像是關閉節點，就不是在終端機 Ctrl+C 那麼簡單，而可能要調閱 pid 進程來終止節點。
* 運行中修改設定，會不會讓程序崩潰 ? 有辦法動態更新嗎 ?
* 像是前端設定頁面如何連動到後端 launch 參數 ?

當我們在撰寫後端時，就應該思考這些問題。
這些都和程式碼檔案結構、外部參數引用、節點崩潰處理等有直接的關係。

所以對我來說，機器人前端其實是在考驗後端的穩定性和成熟度。

</center>

</br>