zuumi
commented
4 months ago 苦労した点
PokeAPIを使って検索をかけられるようにしていたが、Keyに英語のポケモン名が使用されているKey-Value形式でステータスを保持するJSONデータだったため、日本語での検索に工夫が必要だった。最初は日本語と英語のJSONデータを作成してローカルに配置していた。が、更新が必要な状態になってしまうためイけていない状態だったため、ひとまずPokemonGO専用のAPIを発見し、そちらを使用することにした。
https://pokemon-go-api.github.io/pokemon-go-api/api/pokedex.json
✅ PokeAPIからポケモンのデータを取得
pages/api/pokemon.jsを作成し、PokeAPIからポケモンのデータを取得するエンドポイントを作成します。
axiosを使用してPokeAPIにリクエストを送り、ポケモンのリストを取得します。
✅ ドラッグアンドドロップ機能の実装
react-dndを使用して、ポケモンの画像をドラッグアンドドロップできるようにします。
ポケモンの画像を中央部分にドロップした際に、そのポケモンのデータを表示するようにします。
⚠️リージョンポケモンが別のポケモンになってしまうバグがある。
✅ ポケモンアイテムの検索を有効にする
「苦労ポイント」PokeAPIにメインの図鑑データに英語の名前しかなかった。 日本語と英語とNoが紐づいた辞書データを用意して、それを元に検索をかけるように工夫する。 Vueで構築したサイトはパペティアでスクレイピングしてJSON辞書データを作成していたが今回はもそうする？どうする？という感じ。
2024/05/04 zuumi 当初、PokeAPIとPokemonGOAPIを併用して、画面を構築する予定だったが，データの整合性都合でPokemonGO APIに統語することにした。
✅ 技のセットと威力値の表示
ドロップされたポケモンの技を選択するためのドロップダウンメニューを作成します。
選択された技の威力値を表示します。
▶️ パーティーの保存機能
「CREATE」ボタンを押した際に、現在のパーティー構成を保存する機能を実装します。
保存はローカルストレージ、またはバックエンドのデータベースに行うことができます。
→Reduxで一旦保持できそうだったの後で。
✅ 相性評価とアドバイスの表示
GPT-4 APIを使用して、セットされたポケモンの相性評価とアドバイスを生成します。
相性評価とアドバイスを中央部の下部に表示します。
⏺️ 色違いボタン
⏺️ 英語バージョンに対応
右上にオン／オフボタンを設置して画面を切り替えられるようにする。
⏺️ GPT機能をログイン必須にする
⏺️ 課金の対象として扱う
⏺️ テストとデバッグ
サイトの各機能をテストし、バグを修正します。
レスポンシブデザインを確認し、異なるデバイスでの表示をテストします。
✅ デプロイ
プロジェクトをVercelのプラットフォームにデプロイします。