사용자 정보를 편집(데이터 업데이트)하자!
지금까지는 데이터의 송신·읽기에 대해 배웠습니다만, 이번은 데이터의 갱신에 대해 배울 수 있습니다!
아래 준비
이번에는 이전에 만든 사용자 정보를 편집하여 데이터 업데이트에 대해 배웁니다! 이를 위해 먼저 사용자 프로필 화면을 만드세요! 👇 새로 ViewContoroller를 배치하고 TabBarController에 연결!
스크린샷 2021-06-09 14.47.01.png
데이터를 읽으십시오!
사용자 프로필을 만들기 위해서는 먼저 사용자 정보를 읽고 그것 프로필 화면에 넣어주어야 합니다.
여기는 이미 지금까지의 술입니다! 이런 식으로 프로필 화면에 코드를 써 갑시다!
ProfileViewControllerimport 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) {
}
}
그럼, 갱신 버튼을 누르면, 기입한 것이 갱신되는 코드를 써 갑니다! 코드는 다음과 같습니다 👇
보시면 알 수 있듯이 거의 투고 화면과 함께입니다! 웃음
다른 포인트는 여기입니다! 👇
EditUserProfilefunc 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를 업데이트하는 코드입니다!
그럼 실제로 데이터를 업데이트합시다!
지금의 화면은 이쪽.
편집 화면에서 편집하고 가서 업데이트 버튼을 눌러 프로필 화면을 보자!
네! 제대로 데이터가 업데이트되어 프로필에 반영되어 있군요! 이런 식으로, 데이터의 갱신은 순식간에 할 수 버렸습니다!
여러분은, 이전에 데이터의 송신·읽기를 해 왔으므로, 바뀌는 곳은 별로 없었군요!
수고하셨습니다!
이번에는 데이터 업데이트에 대해 배웠습니다!
다음 번에는 좋아하는 기능을 구현하고 싶습니다!
Reference
이 문제에 관하여(사용자 정보를 편집(데이터 업데이트)하자!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rocky214/items/7b75f4943f5849b08b46
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
사용자 프로필을 만들기 위해서는 먼저 사용자 정보를 읽고 그것 프로필 화면에 넣어주어야 합니다.
여기는 이미 지금까지의 술입니다! 이런 식으로 프로필 화면에 코드를 써 갑시다!
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를 업데이트하는 코드입니다!
그럼 실제로 데이터를 업데이트합시다!
지금의 화면은 이쪽.
편집 화면에서 편집하고 가서 업데이트 버튼을 눌러 프로필 화면을 보자!
네! 제대로 데이터가 업데이트되어 프로필에 반영되어 있군요! 이런 식으로, 데이터의 갱신은 순식간에 할 수 버렸습니다!
여러분은, 이전에 데이터의 송신·읽기를 해 왔으므로, 바뀌는 곳은 별로 없었군요!
수고하셨습니다!
이번에는 데이터 업데이트에 대해 배웠습니다!
다음 번에는 좋아하는 기능을 구현하고 싶습니다!
Reference
이 문제에 관하여(사용자 정보를 편집(데이터 업데이트)하자!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rocky214/items/7b75f4943f5849b08b46
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(사용자 정보를 편집(데이터 업데이트)하자!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rocky214/items/7b75f4943f5849b08b46텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)