LoginSignup
1
2

More than 1 year has passed since last update.

Firebaseにデータを送信しよう!

Posted at

こんにちわ!🐶

前回はログイン・新規会員登録まで行きました!今回はデータの送信を実装しましょう!
本当に簡単にできるのでご心配なさらずに!👍

コレクションとドキュメントについて知ろう!

データの送信をする前にFirstoreでデータを送る際に使うコレクションとドキュメンとについて知りましょう!

まず、データを送る際にには👇のような構造でFirestoreに保存されます。

https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_694910_43963ead-145a-5584-1e30-eb286d372386.png

まずコレクションというフォルダがあり、その中にドキュメントがあり、ドキュメントの中にデータが入っているという感じですね。

例えば、投稿情報を送る時は、まず投稿用のコレクションを作ります。そのコレクションの中にどんどん投稿情報を送っていきます。

言葉だけではあまりわからないと思うので、実際にデータを送る投稿機能を作ってみましょう!

Firestoreにデータを送ろう!

まず、投稿機能を作るために,storybordを作って行きましょう!
これから投稿機能とデータを読み取るタイムライン機能を作るので2つ画面を作って行きます!

まず、以前作ったホーム画面にtabbarをつけましょう!
tabbarの付け方は、ホーム画面を選択した状態で、[Editor] -> [Embed in] -> [Tab Bar Controller] の順に選択してください。
そうするとこんな感じでtabbarがつきました!
スクリーンショット 2021-06-02 19.15.59.png

もう一つ画面を作りたいので、新しくViewContorollerを配置し、TabBarControllerを選択した状態で、[control] keyを押したまま新しく配置したViewControllerに伸ばしてください。 そうしたらいくつかの選択肢が出てくるのでRelationship Segue の中のView controllersを選択してください!
そうすると2つ目も繋がりました!!8888
スクリーンショット 2021-06-02 19.19.33.png

そして、最初の画面のtabbarのitemの名前を投稿、2つ目の画面のtabbarのitemの名前をタイムラインとしてください!tabbarのitemの名前の変え方は、tabbaを選択して、BarItemのtitleの名前を変えてください!👇
スクリーンショット 2021-06-02 19.26.53.png

それでは、まずは投稿機能を画面を作って行きましょう!投稿画面はこんな感じで、投稿内容というLabelを配置し、その下に投稿内容を入力するTextView、そして最後に投稿Buttonを配置してます!
スクリーンショット 2021-06-02 19.32.47.png

さあ書こう!

見た目が作れたところで、次はコードを書いて行きましょう!
まず、投稿用のファイルを作り、最初に、投稿内容textViewの@IBOutletと投稿butonの@IBActionと、投稿内容を保存するfunc savePost()準備しましょう!👇

PostViewContoroller
import UIKit

class PostViewController: UIViewController {

    @IBOutlet weak var postTextVew: UITextView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
    //投稿ボタン
    @IBAction func Post(_ sender: Any) {

    }
    //投稿内容を保存する関数
   func savePost() {

   }

}

はい!それでは、まず、FirebaseAuthをimportしましょう!そしてfiewstreのデータベースを使いたいので、データベースを表す変数を作ってあげます!👇

PostViewController
import UIKit
import Firebase
import FirebaseAuth

class PostViewController: UIViewController {

    @IBOutlet weak var postTextVew: UITextView!
    @IBOutlet weak var postButton: UIButton!

     //Fierestoreのデータベース
    let db = Firestore.firestore()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    @IBAction func Post(_ sender: Any) {

    }
   //投稿内容を保存する関数
   func savePost() {

   }


}

はい。そして、Postの@IBActionの中にデータを送るコードを書いていきましょう!
先に投稿した時のデータベースだけ見せちゃいますね!(後で説明するときに使うので!)

スクリーンショット 2021-06-08 14.02.07.png

それでは説明していきマッスル💪
最初に申した通り、何かデータを送る時は、どのコレクションに送るのかを指定してあげなければなりません。
ここでは、Postというコレクションの中に、データを送りたいのでdb.collection("Post")と書きます。👇

PostViewController
  func savePost() {
       //もしpostTextViewにテキストが記入されていたら
       if let message = postTextView.text {
       //コレクションを指定
            db.collection("Post")
    }

送りたいコレクションが決まり、データを送信するにはaddDocumentと書きます。予測変換で以下のようになるので、2つ目のものを選びましょう!

スクリーンショット 2021-06-08 13.46.09.png

そうすると、以下のようなコードが出てくると思います。

PostViewController
  func savePost() {
        //postTextViewにテキストが入っていたら
        if let message = postTextView.text {
       if let message = postTextView.text {
            db.collection("Post").addDocument(data: [String : Any], completion: ((Error?) -> Void)?)
    }

        }
    }

data: [String : Any]はテータの中のどのフィールドに何を入れるかを設定できます。フィールドというのは、ここのことです。
スクリーンショット 2021-06-08 13.54.10.png

今回は、テキストと日付を入れたいので、"text"と"date"というフィールドを作ります👇

PostViewController
  func savePost() {
       //postTextViewにテキストが入っていたら
        guard let text = postTextView.text else {return}
        db.collection("Post").addDocument(data: ["text" : text,"date":Date().timeIntervalSince1970]) { (error) in
            if error != nil {
                print("送信失敗")
            } else {
                print("送信成功")
                //postTextViewを空にする
                self.postTextView.text = ""
            }
        }

    }

textのフィールドにはテキスト情報を入れ、dateのフィールドには日付情報を入れています。
そして、Errorのところは、Enterキーを押し、errorと記入しましょう。そして、下にerrorがあった時、なかった時のコードをif文で書いています。

PostViewController
    func savePost() {
        //postTextViewにテキストが入っていたら
        guard let text = postTextView.text else {return}
        db.collection("Post").addDocument(data: ["text" : text,"date":Date().timeIntervalSince1970]) { (error) in
            if error != nil {
                print("送信失敗")
            } else {
                print("送信成功")
                //postTextViewを空にする
                self.postTextView.text = ""
            }
        }
    }

そしてこのfunc savePostを投稿ボタンを押したタイミングで呼び出したいので、

PostViewController
import UIKit
import Firebase
import FirebaseAuth

class PostViewController: UIViewController {

    @IBOutlet weak var postTextVew: UITextView!
    @IBOutlet weak var postButton: UIButton!

     //Fierestoreのデータベース
    let db = Firestore.firestore()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    @IBAction func Post(_ sender: Any) {
      //呼び出す
      savePost()
    }
     func savePost(postImageUrl:String){
        //postTextViewにテキストが入っていたら
        guard let text = postTextView.text else {return}
        db.collection("Post").addDocument(data: ["text" : text,"date":Date().timeIntervalSince1970,"image":postImageUrl]) { (error) in
            if error != nil {
                print("送信失敗")
            } else {
                print("送信成功")
                //postTextViewを空にする
                self.postTextView.text = ""
            }
        }
}

はい!こうすることで,Firestoreにデータを送ることができました!!👇

お疲れ様でした!

今回はデータの送信について学習しました!こんなに少ないコーできるのは驚きですよね!
次回は、画像の送信について学んでいきたいと思いマッスル!💪

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2