ユーザー情報を編集（データの更新）をしよう！

18794 ワード
Firebase Firestore Firebase テキストリンク

こんにちは！🐶

今まではデータの送信・読み取りについて学んできましたが、今回はデータの更新について学んできます！

下準備

今回は前回作ったユーザー情報の編集をすることでデータの更新について学んでいきます！そのために、まずユーザープロフィール画面を作りましょう！👇新しくViewContorollerを配置し、TabBarControllerにつないでください！
スクリーンショット 2021-06-09 14.47.01.png

データを読み取ろう!

ユーザープロフィールを作る為に、まず、ユーザー情報を読み取りそれプロフィール画面に入れてあげなければなりません。
ここは、もう今までのおさらいですね！こんな感じでプロフィール画面にコードを書いていきましょう！

ProfileViewController
import UIKit
import Firebase
import FirebaseAuth
import Nuke

class ProfileViewController: UIViewController {


    @IBOutlet weak var userImageView: UIImageView!
    @IBOutlet weak var userNameLabel: UILabel!
    @IBOutlet weak var introductionTextView: UITextView!

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

    override func viewDidLoad() {
        super.viewDidLoad()
        loadUser()
    }

    //ユーザー情報読み取り
    func loadUser() {
        //Userコレクションから自分のユーザーIDと一致するドキュメントを持ってくる
        db.collection("Users").document(Auth.auth().currentUser!.uid).getDocument { (result, error) in
            if error != nil {
                print("ユーザー情報取得失敗")
            }
            print("ユーザー情報取得成功")
            let data = result?.data()
            let user = User(userName: data!["userName"] as! String, profileImage: data!["profileImage"]  as! String, introduction: data!["introduction"] as! String)
            //ユーザーネーム設定
            self.userNameLabel.text = user.userName
            //自己紹介文があったら、introductionTextViewにテキストを入れる
            if user.introduction != "" {
                self.introductionTextView.text = user.introduction
            }
            //ユーザー画像が設定されていたらNukeを使って、ユーザー画像を入れる
            if user.profileImage != "" {
                Nuke.loadImage(with: user.profileImage as! ImageRequestConvertible, into: self.userImageView)
            }
        }
    }

}

はい！まだ自己紹介分とユーザー画像は設定していないので、出ないですが、ユーザーネームは読み取れていますね！

では、このユーザー画像も設定できるように、データを更新していきましょう！

＃データを更新しよう！
ではユーザー情報を編集できる画面を作りましょう。
ユーザープロフィールの編集ボタンから編集画面に繋げてください！

ではユーザープロフィール編集のクラスを作り、これも今までと一緒でまず、データを読み取るコードを書いてあげましょう！

EditProfileViewController

import UIKit
import Firebase
import FirebaseAuth
import Nuke

class EditProfileViewController: UIViewController {

    @IBOutlet weak var userImageView: UIImageView!
    @IBOutlet weak var userNameTextField: UITextField!

    @IBOutlet weak var introductionTextView: UITextView!

    let db = Firestore.firestore()

    override func viewDidLoad() {
        super.viewDidLoad()
        loadUser()
    }

    //ユーザー情報読み取り
    func loadUser() {
        //Userコレクションから自分のユーザーIDと一致するドキュメントを持ってくる
        db.collection("Users").document(Auth.auth().currentUser!.uid).getDocument { (result, error) in
            if error != nil {
                print("ユーザー情報取得失敗")
            }
            print("ユーザー情報取得成功")
            let data = result?.data()
            let user = User(userName: data!["userName"] as! String, profileImage: data!["profileImage"]  as! String, introduction: data!["introduction"] as! String)
            //ユーザーネーム設定
            self.userNameTextField.text = user.userName
              //自己紹介文があったら、introductionTextViewにテキストを入れる
            if user.introduction != "" {
                self.introductionTextView.text = user.introduction
            }
            //ユーザー画像が設定されていたらNukeを使って、ユーザー画像を入れる
           if user.profileImage != "" {
                let userImageUrl = URL(string:user.profileImage)
                Nuke.loadImage(with: userImageUrl as! ImageRequestConvertible, into: self.userImageView)
            }
        }
    }

   //編集ボタン
   @IBAction func EditButton(_ sender: Any) {
    }

}

では、更新ボタンを押すと、記入したものが更新されるコードを書いていきます！コードは以下になります👇

見てもらったらわかるとおり、ほとんど投稿画面と一緒です！笑
違うポイントはここですね！👇

EditUserProfile
func saveUserProfile(profileImageUrl:String){
        //userNameTextFieldにテキストが入っていたら
        guard let text = userNameTextField.text else {return}
        db.collection("Users").document(Auth.auth().currentUser!.uid).updateData(["userName" :userNameTextField.text,"profileImage":profileImageUrl,"introduction":introductionTextView.text]) { (error) in
                   if error != nil {
                       print("ユーザー情報更新失敗")
                   } else {
                        print("ユーザー情報更新成功")
                       self.dismiss(animated: true, completion: nil)
                   }
               } }

普通にデータを送信するときは、db.collection("Users").document(Auth.auth().currentUser!.uid).addDataになりますが、このaddDateのところが、updeteDataになっています！
このupdeteDataがFirestoreの更新するコードになります！

では実際に、データを更新してみましょう！
今の画面はこちら。

編集画面で、編集していき、更新ボタンを押して、プロフィール画面を見てみましょう！

はい！しっかりデータが更新されプロフィールに反映されてますね！こんな感じで、データの更新はあっという間に出来ちゃいました！
皆さんは、以前にデータの送信・読み取りをやってきたので、変わるところはほどんどなかったですね！

お疲れ様でした！

今回は、データの更新について学んできました！
次回は、いいね機能を実装していきたいと思います！