사용자 정보를 편집(데이터 업데이트)하자!

18589 단어 FirebaseFirestore
안녕하세요! 🐶

지금까지는 데이터의 송신·읽기에 대해 배웠습니다만, 이번은 데이터의 갱신에 대해 배울 수 있습니다!

아래 준비



이번에는 이전에 만든 사용자 정보를 편집하여 데이터 업데이트에 대해 배웁니다! 이를 위해 먼저 사용자 프로필 화면을 만드세요! 👇 새로 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를 업데이트하는 코드입니다!

그럼 실제로 데이터를 업데이트합시다!
지금의 화면은 이쪽.


편집 화면에서 편집하고 가서 업데이트 버튼을 눌러 프로필 화면을 보자!


네! 제대로 데이터가 업데이트되어 프로필에 반영되어 있군요! 이런 식으로, 데이터의 갱신은 순식간에 할 수 버렸습니다!
여러분은, 이전에 데이터의 송신·읽기를 해 왔으므로, 바뀌는 곳은 별로 없었군요!

수고하셨습니다!



이번에는 데이터 업데이트에 대해 배웠습니다!
다음 번에는 좋아하는 기능을 구현하고 싶습니다!

좋은 웹페이지 즐겨찾기