[flutter] #10 firebase - Update Firestore data

#이 포스팅은 플린이의 입장에서 쓰여진 글입니다. 코드 지적은 언제나 환영입니다. 🙆🏻‍♂️

이 프로젝트는 'Youtube The net ninja'의 flutter firebase tutorial 강의를 참고했습니다.

! 포스팅을 진행하기 전에...
현재 포스팅부터 이전 포스팅의 코드와 차이가 있습니다.
거의 대부분은 동일한데, 회원가입을 할 경우 firestore에서 자동으로 coffees collection이 생성됩니다.

생성된 collection의 내부는 user 들의 uid들이 document에 생성되며, 현재는 document 내부의 name, strength, sugars 필드가 기본값으로 생성되도록 '하드코딩'설정되어 있습니다.

이 프로젝트의 최종 목표는 다음과 같습니다.
사용자가 새로 회원가입을 하게되면 coffee list를 보여주는 home screen의 coffee하나가 생성됩니다. user의 계정 하나당 하나의 coffee가 생성됩니다.
아래 이미지는 현재 계정 2개가 등록되어있는 상태입니다.

각 user는 자신의 coffee의 name, sugars, strength 필드 값을 설정(update)할 수 있으며, 당연히 다른 coffee는 설정할 수 없습니다.

이렇게 된 이유는..
강의를 들으면서 저의 나름대로 재해석해서 코딩을 약간 변형하면서 진행을 했지만..
강의를 수강할 수록 맥락이 많이 틀어져버려서.. 😭
이번 포스팅부터 강의를 정석적으로 따라가려고 합니다.
시리즈 포스팅을 보시는 분들께 혼란을 드려 죄송합니다.

---

Update firestore data

home screen의 설정버튼을 누르면 bottom sheet가 나타나며, 설정값을 입력하고 update 버튼을 누르면 firestore 에 설정되어있는 해당 uid document 의 필드값이 변경되도록 해요.

사실 update data method는 이미 코드가 있어요.

DatabaseService class

Future<void> updateUserData(String sugars, String name, int strength) async {
    return await coffeeCollection.doc(uid).set({
      'sugars': sugars,
      'name': name,
      'strength': strength,
    });
  }

위 코드는 새로운 user가 등록될 때 등록된 user의 uid document를 생성하고(document가 없다면요.) 그 안의 필드값을 인자로 받아 세팅해줘요.

위 method를 이용하면 아주아주 간단하게 data update가 가능해요.
그 전에, 사용자 각각의 document들의 필드값들을 Stream data로 가져와서 UserData class로 인스턴스화 해주는 작업을 해줄게요.

이것도 필수는 아니지만.. 나중을 위해!

---

UserData class

models/user.dart

class UserData {
  final String uid;
  final String name;
  final String sugars;
  final int strength;

  UserData({this.uid, this.name, this.sugars, this.strength});
}

class는 위와 같이 생겼어요.
가장 중요한 uid로 현재 user를 구분해요.
user마다 name, sugars, strength 값들이 다르니 필드로 설정해줘요.

DataService class

DataService class

 //userData from snapshot
  UserData _userDataFromSnapshot(DocumentSnapshot snapshot) {
    return UserData(
      uid: uid,
      name: snapshot.data()['name'],
      sugars: snapshot.data()['sugars'],
      strength: snapshot.data()['strength'],
    );
  }

  //get specific user doc stream
  Stream<UserData> get getUserData {
    return coffeeCollection.doc(uid).snapshots().map(_userDataFromSnapshot);
  }

snapshot data(document data)를 UserModel로 인스턴스화 해주는 method를 두 개 만들어줘요.
getUserData로 user마다 세팅된 필드값들을 SettingsForm class에 가져올거에요.

SettingsForm class

SettingsForm class

return StreamBuilder<UserData>(
        stream: DatabaseService(uid: providerUserModel.uid).getUserData,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            UserData _userData = snapshot.data;
            return Form( ...

setting sheet에서 'update'버튼을 클릭하면 설정한 method가 트리거 되도록 할게요.

SettingsForm class는 가장 처음에 StreamBuilder로 감싸져 있어요. 여기서 Stream data(snapshot data)를 불러와요.

참고로 snapshot.data 가 비로소 UserData class가 돼요.
그냥 snapshot은 아래와 같아요!

flutter: AsyncSnapshot<UserData>(ConnectionState.active, Instance of 'UserData', null, null)

이제 _userData로 필드값에 접근이 가능해요.
이제 버튼과 연결만 시키면 돼요.

RaisedButton(
                      color: Colors.pink[400],
                      child: Text(
                        'Update',
                        style: TextStyle(color: Colors.white),
                      ),
                      onPressed: () async {
                        if (_formKey.currentState.validate()) {
                          await DatabaseService(uid: _userData.uid)
                              .updateUserData(
                                  _currentSugars ?? _userData.sugars,
                                  _currentName ?? _userData.name,
                                  _currentStrength ?? _userData.strength);
                        }
                        Navigator.pop(context);
                      });

data update도 끝이 났어요. 😄

여기까지 firebase를 이용한 flutter app만들기가 끝이 났어요.
flutter backend로 가장 인기있는 firebase는 꼭 알아두어야 할 것 같아요.

아직 더 많은 firebase 기능들이 있지만
주로 쓰이는 많은 기능을 배울 수 있는 강의였어요!

firebase 더더 연습해서 마스터하는 그날까지🙌