~~Firestore_for_IOS~~

アプリ概要

今回はアプリからデータを保存するためにFirestoreを使用したいと思い、導入のほうほうについて学びました。

以下がアプリの起動直後の画面となります。

この画面では入力欄に名前、年齢を入力し登録ボタンを押下すると、入力されたデータが連携している Firestoreに保存する処理を行ってくれます。
また、登録されているデータを確認するためには、右上の確認画面ボタンを押下することで、確認画面に遷移し確認することができます。

この画面は、登録内容をコンソールに表示するボタンのみが設置されています。
このボタンを押下すると...

このように登録内容が表示されます。

コード(全体)

以下がコードの全体像になります。

• ContentView
• ConfimationView

ContentView

import SwiftUI
import Firebase

struct ContentView: View {
    @State var name:String = ""
    @State var age:String = ""
    @State private var isShowingAleart:Bool = false
    var saveData:[String:Any] = [:]
    
    var body: some View {
        NavigationView{
            VStack{
                TextField("名前を入力してください", text:$name)
                TextField("年齢を入力してください", text:$age)
                Button(action: {
                    guard let intAge = Int(age) else {
                        isShowingAleart = true
                        return
                    }
                    let saveData:[String:Any] = ["name":name, "age":intAge]
                    Firestore.firestore().collection("parson").document().setData(saveData)
                }){
                    Text("登録")
                }.alert(isPresented: $isShowingAleart){
                    Alert(title: Text("登録失敗"),
                    message: Text("年齢は数字で入力してください"))
                }
            }
            .navigationTitle("登録画面")
                .toolbar{
                    ToolbarItem(placement: .navigationBarTrailing){
                        NavigationLink(destination: ConfimationView()){
                            Text("確認画面")
                        }
                    }
                }
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ConfimationView

import SwiftUI
import Firebase

struct ConfimationView: View {
    let db = Firestore.firestore()
    var body: some View {
        Button(action:{
//            db.collection("parson").getDocuments(){
            db.collection("parson").whereField("name", isEqualTo: "hoge").getDocuments(){ (querySnapshot, error) in
                if let error = error{
                    print("Error getting documents: \(error)")
                } else {
                    for document in querySnapshot!.documents {
                        print("\(document.documentID) => \(document.data())")
                    }
                }
            }
        }){
            Text("取得データ確認")
        }
    }
}

コード解説

今回のプログラムはほとんどFirebaseのドキュメントから引用できたので、 比較的簡単に実現することができました。

ドキュメントの追加

ドキュメントの追加は以下のコードで行います。

// ContentView
Firestore.firestore().collection("コレクション名").document("ドキュメント名").setData(追加するデータ)

この一行でデータの登録を行なってくれます。
また、ドキュメント名の部分に引数を渡さなかった場合には、Firestoreによって自動的に一意のIDが割り振られます。

追加するデータの型は[String : Any]型の辞書となります。
さらに、Firestoreに登録されてあるデータを読み込むには以下のコードを実行します。

// ConfimationView
Firestore.firestore().collection("コレクション名").whereField("ドキュメントのフィールド名", isEqualTo: "欲しい値").getDocuments(){ (querySnapshot, error) in
    if let error = error{
        print("Error getting documents: \(error)")
    } else {
        for document in querySnapshot!.documents {
            print("\(document.documentID) => \(document.data())")
        }
    }
}

これにより、指定したデータを取得することができます。
取得したデータは後ろのクロージャによって処理され、for文によって一件一件読み込まれています。
さらに、上のコードの1行目を以下のコード

// ConfimationView
Firestore.firestore().collection("parson").getDocuments()

とすることで、指定したドキュメントの全てのデータを一覧取得することができます。
とりあえず一覧取得したい場合はこのコードを、絞り込んで取得したい場合は「whereField」を使用すれば よさそうですね。

Firestoreの導入

今回の取り組みの中で一番苦戦したといってもいいのが、Firestoreの導入になります。 初めてFirebaseに触れたので、エラーの対処やパッケージのインストールにかなり時間がかかってしまいました。

ここでは、Firestoreと連携するまでの流れを記述したいと思います。

プロジェクトの作成

まず初めに、Firebaseでプロジェクトを作成しなければなりません。
作成後、プロジェクトの画面にいくと以下のようなトップ画面が表示されます。

アプリの追加

次に作成するアプリをFirebaseと連携させるために、 プロジェクトへアプリの情報を追加しなければなりません。
今回はIOSアプリなので「IOS+」のボタンを押下しましょう。

すると、このような画面に遷移します。ここで入力が必須なのは「AppleバンドルID」です。 そのほかの欄は必要に応じて入力しましょう。

バンドルIDとは?

バンドルIDとは、アプリを識別するためのIDのことです。このIDと連携することで、 アプリ内でFirebaseの機能を使用することができます。

確認方法

確認方法は、まずアプリのプロジェクトファイルを選択します。

すると以下のような画面になるので、そこでTARGETSにあるアプリの名前を押下します。

その中の「Identity」の欄にIDがあるので、そのIDを先ほどの入力欄にコピペしましょう。

設定ファイルのダウンロード

アプリの追加を終えたら、設定ファイルのダウンロードを行います。

このファイルをダウンロードしたら、プロジェクトフォルダの直下に格納しましょう。

Firebase SDKの追加

次に使用するFirebaseのパッケージをアプリに追加します。

このページにあるgithubのリンクをコピーしましょう。
パッケージの追加は、XcodeのFileから行います。

Fileを選択すると「Add Packages...」とあるのでそこを押下しましょう。

押下して出てきた画面の右上の検索欄に、先ほどコピーしたリンクを貼り付けます。
するとFirebaseのパッケージが表示されるので、バージョンを選択します。
バージョンを指定する必要がない場合は、最新のものを選びましょう。

選択したら、右下の「Add Package」を押下し、使用するライブラリを選択します。
今回は「FirebaseAnalytics 」と「FirebaseFirestore」を選択しました。

選択したら、右下の「Add Package」を押下し、インストールを待ちます。

インストールが完了すると、指定したライブラリが使用できるようになります。

まとめ

今回は、アプリにFirestoreを導入する練習として、アプリの制作に取り組みました。 Firestoreの導入で苦戦した、パッケージのインストールでは、上に記述した方法の他に podファイルによる方法も存在します。参考にしていたサイトによって方法が違い、それが 原因で苦戦しました。作成後、podファイルによる方法を試したのですが、手数も少なく 簡単に導入できたので、次回からはpodによる導入を行おうと思います。
また、記述したコード自体は簡単で理解しやすいものだったので、利用するハードルは比較的低いと思いました。

《参考文献》 SwiftUIとFirebaseを使って簡単なチャットアプリを作る
https://qiita.com/From_F/items/85ae490283c11c6f795f

Firebase ドキュメント
https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja