Flutter - 코딩마스터하기|사진 업로드,게시하기3 , storage에 저장한 Post의 데이터를 database에 저장하기
create post model
post도 모델을 생성하기 위해서 models - firestore 에 post_model.dart를 생성해준다. 그리고 user_model을 복사해와서 똑같이 만들어 주고 class 명을 PostModel로 바꿔준다. 그리고 상단에 상수들을 선언해 준다.
final String postKey;
final String userKey;
final String username;
final String postImg;
final List<dynamic> numOfLikes;
final String caption;
final String lastCommentor;
final String lastComment;
final DateTime lastCommentTime;
final int numOfComments;
final DateTime postTime;
final DocumentReference reference;중간에 fromMap은 다음과 같이 변경 해준다.
PostModel.fromMap(Map<String, dynamic> map, this.postKey,
{this.reference}) //fromMap은 Dart 내장 함수
: userKey = map[KEY_USERSKEY],
username = map[KEY_USERNAME],
postImg = map[KEY_POSTIMG],
numOfLikes = map[KEY_NUMOFLIKES],
caption = map[KEY_CAPTION],
lastCommentor = map[KEY_LASTCOMMENTOR],
lastComment = map[KEY_LASTCOMMENT],
lastCommentTime = map[KEY_LASTCOMMENTTIME]==null? DateTime.now().toUtc():(map[KEY_LASTCOMMENTTIME] as Timestamp).toDate(),
numOfComments = map[KEY_NUMOFCOMMENTS],
postTime = map[KEY_POSTTIME]==null? DateTime.now().toUtc():(map[KEY_POSTTIME] as Timestamp).toDate();여기서 DateTime 부분에서는 시간을 가져올때 null을 해서 에러가 날 수 있으므로 위와같이 처리해 주면 된다.,
fromSnapshot부분은 똑같이 해주면 된다. 그리고 getMapForCreatePost는 다음과 같이 해주면 된다.
static Map<String, dynamic> getMapForCreatePost({String userKey, String username, String caption}) {
Map<String, dynamic> map = Map();
map[KEY_USERSKEY] = userKey;
map[KEY_USERNAME] = username;
map[KEY_POSTIMG] = "";
map[KEY_NUMOFLIKES] = [];
map[KEY_CAPTION] = caption;
map[KEY_LASTCOMMENTOR] = "";
map[KEY_LASTCOMMENT] = "";
map[KEY_LASTCOMMENTTIME] = DateTime.now().toUtc();
map[KEY_NUMOFCOMMENTS] = 0;
map[KEY_POSTTIME] = DateTime.now().toUtc();
return map;
}create transaction to upload post data
우선 repo 폴더에 post_network_repository.dart 를 만들어 준다. 그리고 메소드를 만들어 주는데 우선 Futuer<void> createNewPost를 만들어 준다. 그리고 DocumentReference postRef, DocumnetReference userRef를 해주고 포스트와 유저의 레퍼런스를 가져와준다. post는 Firestore.instance.collection(COLLECTION_POSTS).document(postKey);로 해주지만 userRef는 COLLECTION_USERS를 넣어주고 userKey는 postDate에서[KEY_USERKEY]로 알 수 있으므로 이 방식으로 가져와 준다. 그리고 postSnapahot을 가져온다. DocumentSnapshot postSnapshot = await postRef.get(); 으로 레퍼런스를 통해서 가져올 수 있다. 이제 트랜섹션을 해주면 된다. Firestore.instance에서 .runTransaction을 해주면 된다. 그리고 ()안에 (Transaction tx) async {}를 넣어 주낟. 그리고 if 문에 !post.Snapshot.exists를 해줘서 스냅샷에 대한 정보가 없으면 포스트를 만들어 주고 User에서 my_post에 대한 정보를 업데이트 해주면 된다. await tx.set(postRef,postData);로 포스트 정보를 만들어 주고 await tx.update(userRef,{KEY_MYPOSTS: FieldValue.arrayUnion([postKey])})로 업데이트 해줄 수 있다. 이부분은 그냥 외워야 한다. 우리는 하나만 업데이트 하기때문에 이렇게 썼지만 2개이상일때는 다른 방법을 사용한다. postData가 아닌 {KEY_MYPOSTS: FieldValue.arrayUnion([postKey])}으로 원하는 부분을 업데이트를 하는것을 기억해두자. 여기서 if안에 update에서 실패하면 set부분도 안되고 돌아가게 된다. 충돌이 막아진다.
class PostNetworkRepository {
Future<Map<String, dynamic>> createNewPost(
String postKey, Map<String, dynamic> postData) async {
final DocumentReference postRef =
Firestore.instance.collection(COLLECTION_POSTS).document(postKey);
final DocumentSnapshot postSnapshot = await postRef.get();
final DocumentReference userRef = Firestore.instance
.collection(COLLECTION_USERS)
.document(postData[KEY_USERSKEY]);
return Firestore.instance.runTransaction((Transaction tx) async {
if (!postSnapshot.exists) {
await tx.set(postRef, postData);
await tx.update(userRef, {
KEY_MYPOSTS: FieldValue.arrayUnion([postKey])
});
}
});
}
}
PostNetworkRepository userNetworkRepository = PostNetworkRepository();use create new post
이미지를 올릴때 포스트가 올라가고 데이터가 올라가는데 이것을 image_network_repository 에서 하는것보다는 share_post_screen에서 하는게 더 나을꺼 같다는 강의에 따라 await imageNetworkRepository.uploadImage(imageFile,postKey: postKey); 아래에 만들어 주자. 우선 uploadImageNCreateNewPost를 rename으로 uploadImage로 바꿔주고, share_post_screen에서 await postNetworkRepository.createNewPost() 를 생성 해준다. 여기에 postKey와 postData에 따라 usermodel이 필요하므로 우선 그 위에 userKey나 username을 불러 올 수 있도록 UserModel userModel = Provider.of<UserModel>(context,listen: false);로 생성 해준다. 그리고 createNewPost()안에 postKey, PostModel.getMapForCreatePost(userKey: userModel.userKey,username: userModel.username,caption: "") 를 넣어준다. caption은 하단에 caption 작성부분에서 가져와야 되는데 이 부분은 다음시간에 해보자.
onPressed: () async {
showModalBottomSheet(
context: context,
builder: (_) => MyProgressIndicator(),
//원래 빌더에 ()안에 context가 와야하는데 context를 사용 안하므로 _ 로 해준다
isDismissible: false,
//이 창의 바깥 눌렀을때 끝나게 해줄것이냐
enableDrag: false, //드래그를 하게 해줄 것이냐.
);
await imageNetworkRepository.uploadImage(imageFile,postKey: postKey);
UserModel userModel = Provider.of<UserModel>(context,listen: false);
await postNetworkRepository.createNewPost(postKey, PostModel.getMapForCreatePost(userKey: userModel.userKey,username: userModel.username,caption: ""));
Navigator.of(context).pop(); //await 되고 나면 pop으로 꺼짐짐
},use textfield to get caption
캡션을 넣어줘 보자. 우선 statelessWidget를 statefulWidget로 변경 해주자. 그리고 caption부분이 textField므로 state class 상단에 TextEditingController _textEditingController = TextEditingController();을 생성해준다. 그리고 dispose()도 생성해줘서 창이 꺼질때 dispose 하게 해준다. TextField로 가서 controller: _textEditingController,을 넣어주고 바로 캡션을 쓸수 있도록 autoFocus: true, 로 해준다. 그리고 아까 비워뒀던 caption에 await postNetworkRepository.createNewPost(widget.postKey, PostModel.getMapForCreatePost(userKey: userModel.userKey,username: userModel.username,caption: _textEditingController.text)); 이렇게 추가해주면 된다. 여기서 하단에 pop를 통해 모달을 껐는데 중복으로 사진을 올리는것을 막기 위해 똑같이 Navigator.of(context).pop(); 을 한번더 해준다.
title: TextField(
controller: _textEditingController,
autofocus: true,
decoration: InputDecoration(
hintText: 'Write a caption....', border: InputBorder.none),
),TextEditingController _textEditingController = TextEditingController();
@override
void dispose() {
_textEditingController.dispose();
super.dispose();
}
onPressed: () async {
showModalBottomSheet(
context: context,
builder: (_) => MyProgressIndicator(),
//원래 빌더에 ()안에 context가 와야하는데 context를 사용 안하므로 _ 로 해준다
isDismissible: false,
//이 창의 바깥 눌렀을때 끝나게 해줄것이냐
enableDrag: false, //드래그를 하게 해줄 것이냐.
);
await imageNetworkRepository.uploadImage(widget.imageFile,postKey: widget.postKey);
UserModel userModel = Provider.of<UserModel>(context,listen: false);
await postNetworkRepository.createNewPost(widget.postKey, PostModel.getMapForCreatePost(userKey: userModel.userKey,username: userModel.username,caption: _textEditingController.text));
Navigator.of(context).pop(); //await 되고 나면 모달창이 pop으로 꺼짐
Navigator.of(context).pop(); // sharePost 창이 꺼짐
},finish share post
이미지를 firestore에 올린 후 그 이미지의 url을 받아서 post 데이터베이스를 업데이트 시켜줘보자. 우선 데이터에 업데이트 해주는 부분을 만들어 주자. post_network_repository에 와서 하단에 Future<void> updatePostImageUrl({String postImg, String postKey})를 만들어 주자. Future이기 때문에 async를 해주고 postRef와 postSnapshot 부분을 그대로 가져오자. 그리고 if(postSnapshot.exists)로 스냅샷이 존재할때 업데이트 시켜주면 된다. await post.updateDate({KEY_POSTIMG: postImg})로 post img 경로가 지정되는 부분만 메소드를 쓰는 곳에서 받아오는 경로로 업데이트 시켜주면 된다. 이제 이 부분을 pop으로 닫히는 부분 위에 String postImgLink = await imageNetworkRepository.getPostImageUrl(widget.postKey); 와 await postNetworkRepository.updatePostImageUrl( postKey: widget.postKey, postImg: postImgLink);와 같이 링크를 받아오고 그 링크와 postKey를 넘겨주면 된다. 실행해보면 정상적으로 다운로드 주소가 올라간것이 보이고, 주소를 실행하면 해당 이미지를 볼 수 있다. 그리고 이 onPressed 부분이 너무 복잡하고 길어서 하단에 메소드로 빼주면 된다.
post_network_repository.dart
Future<void> updatePostImageUrl({String postImg, String postKey}) async {
final DocumentReference postRef =
Firestore.instance.collection(COLLECTION_POSTS).document(postKey);
final DocumentSnapshot postSnapshot = await postRef.get();
if (postSnapshot.exists) {
await postRef.updateData({
KEY_POSTIMG: postImg,
});
}
}share_post_screen.dart
void sharPostProcedure() async {
showModalBottomSheet(
context: context,
builder: (_) => MyProgressIndicator(),
//원래 빌더에 ()안에 context가 와야하는데 context를 사용 안하므로 _ 로 해준다
isDismissible: false,
//이 창의 바깥 눌렀을때 끝나게 해줄것이냐
enableDrag: false, //드래그를 하게 해줄 것이냐.
);
await imageNetworkRepository.uploadImage(widget.imageFile,
postKey: widget.postKey);
UserModel userModel =
Provider.of<UserModelState>(context, listen: false).userModel;
await postNetworkRepository.createNewPost(
widget.postKey,
PostModel.getMapForCreatePost(
userKey: userModel.userKey,
username: userModel.username,
caption: _textEditingController.text));
String postImgLink =
await imageNetworkRepository.getPostImageUrl(widget.postKey);
await postNetworkRepository.updatePostImageUrl(
postKey: widget.postKey, postImg: postImgLink);
Navigator.of(context).pop(); //await 되고 나면 모달창이 pop으로 꺼짐
Navigator.of(context).pop(); // sharePost 창이 꺼짐
}