【TG Mini App：臺股走勢小鏈遊】
🌳 Evergreen
前置
先pnpm create vite，cd進資料夾，然後add @vkruglikov/react-telegram-web-app。
因為要讓網頁可以直接在Telegram裡開啟，到index.html加入<script src="https://telegram.org/js/telegram-web-app.js"></script>。
pnpm run dev之後，5713埠就會正確顯示。接著pnpm i thirdweb，在src資料夾新增一個client.ts。
到env裡存api key，並在main.tsx裡引入<ThirdwebProvider>。這可說是使用thirdweb開發的基本動作。
要記得去thirdweb網頁的contracts裡deploy合約喔。
Lightweight
思考這個遊戲要做成什麼樣的時候，剛好打算要實作Lightweight Charts。
它是TradingView圖表套件的開源免費版，資料自然要自己串證交所API。
而根據線型讓使用者做出交易決策的應用，則有Chart Game和Trading Train這樣的先例。
實際操作時有幾段語法比較有印象，簡單列出：
chart.timeScale().fitContent()：可以讓不同時間區段的圖形都符合圖表大小，好用lastValueVisible: false：隱藏最後一個價格的標籤priceLineVisible: false：隱藏最後一個價格的的標示線
子傳父
算是開發途中，比起讀教學更能切身體會到React邏輯的一段插曲。
由於子組件裡showModal的狀態會影響到父組件，遂將const [showModal, setShowModal] = useState(false)移至父組件，再用prop傳下來。類似狀態提升。
Mini App
- 和Telegram機器人BotFather互動
- /start
- /newbot
- 命名你的App
- 命名你的Bot（某某bot，相當於帳號）
- /newapp
- 命名（影響不大）
- 提供描述
- 上傳圖片（640*360px）
- 上傳gif
- BotFather回傳url（t.me/某某bot）
- 路徑子名稱（t.me/某某bot/子名稱）