Pokemon Gym

What is this?

• Pokemon Gym 是一款基於 Pokemon GO 手機遊戲開發的輔助網頁

What is Pokemon GO?

• 是一款由 Niantic 開發營運的 AR 手機遊戲，有 AR 體驗、捕捉、道館戰鬥等等機制。而道館戰鬥會以藍、紅、黃分隊伍陣營，讓各陣營玩家可以將自己的 Pokemon 分配到附近的道館中，並且攻擊不同陣營的玩家達到佔領的目的。
• 而每個 Pokemon 都有自己的屬性，不同屬性的角色會有不同的傷害倍率。例如，火屬性攻擊草屬性的有優勢，但對水屬性有劣勢。因此如何選擇最佳屬性更為重要!

Project Intro

Situation

• 每次在遊戲中打道館時，因為不清楚對方角色的屬性，需要上網花時間查詢，往往查完時網頁就花去 10 幾分鐘，如果透過簡單選取完，就能直接出現最佳推薦，就能省下不少時間。

Environment

• React(v18.2.15) & Vite(v4.4.5)

Tools

• Bootstrap(v5.3.2)
• Firebase

Instructions

1. 在左側方框中點擊神奇寶貝
2. 在中間方框，會自動帶出你目前選擇的
3. 在右側方框，會自動帶出推薦相剋的神奇寶貝及屬性
4. 取消選中的神奇寶貝，可以透過左側及中間方框再次進行點擊，即可取消選擇
5. 每個標題旁有設定，提供不同的顯示方式，名稱、屬性、塞選等功能
6. 如果目前沒有你想要的神奇寶貝，可以利用搜尋欄位來操作

Skills

• RWD 響應式設計
• 串接第三方 APIPokeAPIs
• 利用 Firebase 提供的 Firestore 進行資料存取
• 使用 Bootstrap 並進行客製化設定

Project Demo

• Pokemon Gym

More about the process

Task

• 最大挑戰是使用正在學習新的框架-React 開發，並以此作為未來工作目標
• 還有規劃版面格式、主要功能，在 Side Project 中練習規劃及日程得的挑戰

Action

• 在專案中擔任個人開發，面臨許多挑戰「主題發想」、「在生活上能夠解決的事情」、「技術選擇」、「相關資料查詢」等等，在這些過程中採取 Notion 紀錄的方式，進行過程、發想、計畫的行動，訓練獨立解決問題的能力

Result

• 在自學的這段期間，找資料、解決問題的能力是必備的，遇到撞牆期時勇敢的問人，更是跨出心中障礙的一件值得鼓勵的事。
• 在作品即將進入完成階段後，更是可以繼續規劃更多完整的功能，例如語系、Readme 的修改、使用者回饋、程式碼優化等等。作品的完成不是結束，而是往上一層更好的實踐，也反映了自己在職崖中的目標。