SwiftUI×Exyte×Firestoreでチャットアプリを作ろう

# はじめに
チャットは非常に需要の高い機能ですが、実際機能面ではやることが多すぎて開発が難しいです。
そこで今回は、`exyte`というライブラリのデモを用いてチャットアプリを動かしてみましょう！

![Simulator Screenshot - iPhone 16 Pro - 2024-12-12 at 23.21.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/62d69dbe-e5b3-6800-c670-aea0c85faa04.png)

# Step1. Exyteのデモプロジェクトをダウンロードしよう

このサイトからダウンロードします。

https://github.com/exyte/Chat

`git clone`を行うか、`Download ZIP`を行いましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/ff94cee8-7783-f211-e8e1-6073b9d82929.png)

ダウンロードされたら解凍し、`ChatFirestoreExample`というフォルダからXcodeプロジェクトを開きましょう。

![スクリーンショット 2024-12-12 22.59.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/dd8c7648-0aec-42e6-c8c0-2037350386f4.png)

`Signing&Capability`を開き、`Automatically manage signing`にチェックを入れましょう。

![スクリーンショット 2024-12-12 23.05.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/109c8ede-39d0-12a5-cb3c-5a921d2f978c.png)

![スクリーンショット 2024-12-12 23.05.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/a9697ecd-40b3-566a-6f4d-d7b474bdb15a.png)

赤い文字が消えたら成功です！

![スクリーンショット 2024-12-12 23.05.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/fa8ea334-b100-c0ed-5b72-172b9562ba4d.png)


# Step2. Firebaseプロジェクトを作成しよう

Firebaseを開きます。

https://console.firebase.google.com/u/0/?hl=ja

プロジェクトを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/3b46c482-ad53-9e72-68d5-989763af81c1.png)

プロジェクトに名前をつけましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/8b0aae4e-f959-77d1-6349-c275f1239bdc.png)

今回は`Analytics`は必要ありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/31828f9b-a838-1f4f-5062-d0b922e270f2.png)

プロジェクトが作成できたら、iOSアプリを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/742f7826-2dbd-c05e-993b-e952cd9a84ce.png)

バンドルIDに`bundle identifier`をコピペしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/ce9554ad-e9a2-0e34-ce90-03b95c370fab.png)

`GoogleServiceInfo.plist`をダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/2e88dffe-515a-5bda-69cd-7d3e5c7373f6.png)

ここまできたら一挙にコンソールまで進みましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/ea9dd4a4-fa57-8eba-b478-195ff528bee2.png)

Cloud Firestoreを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/f065b0b7-f75c-f0be-eceb-5061e9a251e2.png)

データベースを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/abbe8be4-63eb-173c-7df2-f1c43927130a.png)

RegionをTokyoにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/67445137-c264-39e6-dfff-bfc7bcc0b4e8.png)

テストモードで開始します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/5fb8d417-74d3-5c3d-d3d8-451e8a65a57d.png)

次にStorageを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/0bdf250a-02d1-5b0a-3aa6-e740d363b732.png)

最近Storageは課金プランでしか使えなくなったので、支払い情報を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/6659a258-dd3b-5028-737b-5a4579dba8ea.png)

支払いアカウントを追加すると、以下のような画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/7fd8aaf8-277d-f979-731b-63abac48af08.png)

始めるをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/588c6d4c-f1be-055c-68d6-7d64501f50e2.png)

料金不要の`US-CENTRAL1`か、料金がかかってもよければ下を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/d6922407-0dab-1777-7bb5-641892442bc8.png)

- 東京：`ASIA-NORTHEAST1`
- 大阪：`ASIA-NORTHEAST2`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/b2c367c6-6d69-1b14-36d2-e05deb8ac197.png)

テストモードで開始します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/1459347d-1dd5-1bcf-9dd8-973dba7e16d9.png)

# Step3. GoogleInfo.plistをプロジェクトに追加しよう

Xcodeに、先ほどダウンロードした`GoogleService-Info.plist`をドラッグ&ドロップで追加します。

![スクリーンショット 2024-12-12 23.14.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/4ea3b865-8f4d-145c-08b0-e4e8de92969c.png)

![スクリーンショット 2024-12-12 23.14.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/e614c579-63ef-0edd-9411-c6a5a5ae78f9.png)

実行することでチャットアプリを動かすことができます！

![Simulator Screenshot - iPhone 16 Pro - 2024-12-12 at 23.17.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/c8644339-9b13-bc72-bbdf-2db04af6c30d.png)

![Simulator Screenshot - iPhone 16 Pro - 2024-12-12 at 23.21.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823873/876b0703-a80a-22c2-e4ef-a94b4bf9240c.png)

# まとめ
exyte、まじですごいのでみんな使いましょう！