[ING] - 簡易的メディア型一覧表示サンプル
このサンプルアプリは以下のような機能や画面をSwiftUIで実装している例になります。
- お気に入りの追加・削除機能
- 一覧またはカード状のUIからアイテムを「お気に入り」に登録したり、解除したりするインタラクションを備えています。
- インタラクティブな画面遷移
- SwiftUIのアニメーションやドラッグ操作を利用して、特徴的な画面遷移をする動きを実装しています。
【お気に入り機能】
【引っ張って閉じる画面遷移機能】
こちらは、Dockerがインストールされている前提でのコマンド手順です。
# ① Dockerを起動する
$ docker compose up -d
# ② Dockerコンテナへアクセスをする
$ docker exec -it [①で表示されたコンテナ名] bash
# ③ Dockerコンテナ内のMySQLアクセスをする
# ※ rootパスワード = .envで設定したパスワード
$ mysql -h localhost -P 3306 -u root -p
Enter password:
# ④ MySQL内でDBが作成されているか確認する
# ※ DB = .envで設定したDB名
$ show databases;
# ⑤ もし存在していなければ新たにDBを作成する
$ create database [.envで設定したDB名];
# ⑥ PrismaでSchema更新処理後に作成されたテーブルを確認する
$ show tables from media_reader_example;
# ⑦ Dockerを停止する
$ docker compose stopこのリポジトリをクローンする際は下記コマンドを実行します。
# ① 必要なパッケージをインストールする
$ cd Backend
$ npm installPrismaのセットアップ時については、以下のコマンドを実行しています。
# ① package.jsonを新規作成する
$ npm init -y
# ② Typescriptのインストール
$ npm install typescript ts-node @types/node --save-dev
# ③ Prismaのインストール
$ npm install prisma --save-dev
# ④ Prismaの初期化処理を実施する
# ※ datasource-providerオプションにはMySQLを指定する
$ npx prisma init --datasource-provider mysql
# ⑤ 作成されたschema.prismaを編集し、下記コマンドを実行してMigrationの実行をする
# ※ 今回は一番最初のMigrationとして、データベースの初期化を行うため、名前を「init」にしている。
$ npx prisma migrate dev --name [任意の名前]
# ⑥ GUIでレコードを編集可能なツールを立ち上げる
# （DockerでMySQLが起動している事が前提）Port番号のデフォルトで5555となります。（ポート番号5555で接続できない場合は、ポート番号を変更してください）
$ npx prisma studio --port 5556# ① サーバーを起動する
$ cd Backend
$ npm run start【参考資料】