アプリでの機能開発

開発のガイド

ウズでの一般的な機能開発の方法を書きます。

一般的な機能開発とは？

ユーザーが永続的な Read / Write するような機能です。例えば以下のような機能が該当します。

• レビューを削除できる機能
• 奢り機能

開発の流れ

まずデータ取得を先にやってからデータの更新をやることがおすすめの流れです。

1-5: データ取得
7-9: データ更新

1. Schema を変更して DB に値を入れる
2. GraphQL の Query Schema を変更する
3. 必要があれば、Resolver を変更する
4. Seed の変更 / TablePlus 直いじりで Debug 用のデータを入れる
5. mobile 側で Query を変更、データを取得できるようにする
6. デザインを整える
7. GraphQL の Mutation Schema を変更する
8. backend 側で Resolver を実装する
9. mobile 側で mutation を実装する
10. テストコードを書く

それぞれの詳細

1. Schema を変更して DB に値を入れる

backend/internal/ent/schema から 目的の Table の Schema を変更する（新たにTableを作成する場合は、collect_path.yamlの加筆もする）。その後、go generate ./... を実行して Go のコード生成を走らせる。サーバーが起動していたら、 local の DB に自動で適用される

より詳しくは ent のドキュメントを参照。
https://entgo.io/docs/schema-def/

2. GraphQL の Query Schema を変更する

backend/internal/adapters/graph/schema から目的の Schema を変更する。その後、go generate ./... を実行して Go のコード生成を走らせる。以下より apollographql の sandbox を開いて、 Schema に追加されていたら成功。

https://studio.apollographql.com/sandbox/schema/reference?endpoint=http%3A%2F%2Flocalhost%3A5001%2Fgraphql

backend/internal/adapters/graph/schema に書かれているのは分割された、GraphQL ファイルなので、一般的な GraphQL Schema にのっとって記述してください。

3. 必要があれば、Resolver を変更する

Schema を定義すれば、gqlgen によって自動で Resolver のコードが backend/internal/adapters/graph に出現する。初期状態では Unimplemented Error になっているので、適宜実装を行う。

ただし、ent の field を expose するだけといった変更の場合は、自動で gqlgen によって型マッピングされるので、実装を行う必要はなくなる。

詳しくは gqlgen のドキュメントを参照。
https://gqlgen.com/

4. Seed の変更 / TablePlus 直いじりで Debug 用のデータを入れる

動作確認するために、変更した DB の Schema に対応するデータを用意する必要がある。最も手軽なのは、TablePlusから直接データをいじる方法。また、将来的に開発しやすくするために、seeds/main.goを変更する方がベター。

5. mobile 側で Query を変更、データを取得できるようにする

まずは、schema を mobile 側に反映させる。

$ cd dart/apps/mobile
$ npm i
$ npm run gen # PR の Github Actions 上で自動で行われる
$ dart run build_runner build --delete-conflicting-outputs

詳しくは以下を参考。
https://pub.dev/packages/graphql_flutter
https://pub.dev/packages/graphql_codegen

6. デザインを整える

flutter を用いて、表示の UI を整えたりボタンを設置したりする。要件により千差万別。デザインの修正が伴う場合は figma 等で先に合意形成する方が良い。

7. GraphQL の Mutation Schema を変更する

2 と同じ要領で、Mutation を定義する。Resolver がコード自動生成される。

8. backend 側で Resolver を実装する

自動生成されたコードの内部を書いていく。
Query側と違って、自動でマッピング等はされないので、自分でDBに格納する処理を書く必要がある。

9. mobile 側で mutation を実装する

5 と同じ要領で実装をする。

10. テストコードを書く

Query は単純な場合は書かなくてもいいですが、Mutation についてはバグが発生しやすいので書いてください。