🔴 Let's Build Twitter with SwiftUI (iOS 15, Xcode 13, Firebase, SwiftUI 3.0)

TwitterClone: Upload Tweets

구현 목표

• 트위터 업로드 및 데이터 패치

구현 태스크

• 트위터 작성 뷰를 통한 파이어스토어 데이터 작성
• 트위터 패치 함수를 통한 데이터 디코딩
• 데이터 퍼블리셔 구독을 통한 UI 패치
• 리프레시를 통한 데이터 패치

핵심 코드

import Foundation

class UploadTweetViewModel: ObservableObject {
    let service = TweetService()
    @Published var caption: String = ""
    @Published var didUploadTweet: Bool = false
    func uploadTweet() {
        service.uploadTweet(caption: caption) { [weak self] success in
            self?.didUploadTweet = success
        }
    }
}

• 트위터 작성 및 패치 관련 데이터 서비스 클래스를 사용하는 뷰 모델
• 트위터 작성 뷰에서 해당 뷰 모델을 사용

import Foundation
import SwiftUI
import FirebaseFirestoreSwift
import Firebase

struct TweetModel: Codable, Identifiable {
    @DocumentID var id: String?
    let uid: String
    let caption: String
    let likes: Int
    let timestamp: Timestamp
    var user: UserModel?
}

• 작성되는 트위터는 해당 데이터 양식으로 작성
• 파이어스토어의 다큐먼트 ID를 @DocumentID 프로토콜을 따름으로써 자동으로 디코딩 시 부여받음

struct TweetService {
    func uploadTweet(caption: String, completion: @escaping(Bool) -> Void) {
        guard let uid = Auth.auth().currentUser?.uid else { return }
        let data = [
            "uid": uid,
            "caption": caption,
            "likes": 0,
            "timestamp": Timestamp(date: Date())
        ] as [String: Any]
        Firestore.firestore().collection("tweets").document()
            .setData(data) { error in
                if let error = error {
                    print(error.localizedDescription)
                    completion(false)
                } else {
                    print("Upload Tweet Did Succeed")
                    completion(true)
                }
            }
    }
    
    func fetchTweets(completion: @escaping(Result<[TweetModel], Error>) -> Void) {
        Firestore.firestore().collection("tweets")
            .order(by: "timestamp", descending: true)
            .getDocuments { snapshot, error in
            guard
                let documents = snapshot?.documents,
                error == nil else {
                if let error = error {
                    completion(.failure(error))
                } else {
                    completion(.failure(URLError(.badURL)))
                }
                return
            }
            let tweets = documents.compactMap({try? $0.data(as: TweetModel.self)})
            completion(.success(tweets))
        }
    }
    
    func fetchTweets(for uid: String, completion: @escaping(Result<[TweetModel], Error>) -> Void) {
        Firestore.firestore().collection("tweets")
            .whereField("uid", isEqualTo: uid)
            .getDocuments { snapshot, error in
                guard
                    let documents = snapshot?.documents,
                    error == nil else {
                    if let error = error {
                        print(error.localizedDescription)
                        completion(.failure(error))
                    } else {
                        completion(.failure(URLError(.badURL)))
                    }
                    return
                }
                let tweets = documents.compactMap({ try? $0.data(as: TweetModel.self)}).sorted(by: { $0.timestamp.dateValue() > $1.timestamp.dateValue() })
                completion(.success(tweets))
            }
    }
}

• 트위터를 업로드하는 함수, 성공 여부를 핸들러로 리턴
• 업로드된 트위터를 전체 또는 유저 아이디를 통해 가져온 뒤 리턴하는 함수

import Foundation

class FeedViewModel: ObservableObject {
    @Published var tweets: [TweetModel] = []
    private let service = TweetService()
    private let userService = UserService()
    
    init() {
        fetchTweets()
    }
    
    func fetchTweets() {
        service.fetchTweets { [weak self] result in
            switch result {
            case .success(let tweets):
                self?.tweets = tweets
                for idx in 0..<tweets.count {
                    let uid = tweets[idx].uid
                    
                    self?.userService.fetchUser(with: uid, completion: { result in
                        switch result {
                        case .failure(let error): print(error.localizedDescription)
                        case .success(let user): self?.tweets[idx].user = user
                        }
                    })
                }
            case .failure(let error): print(error.localizedDescription)
            }
        }
    }
}

• 전체 피드를 보여주는 피드 뷰가 사용하는 뷰 모델

 ScrollView {
                LazyVStack {
                    ForEach(viewModel.tweets) { tweet in
                        TweetRowView(tweet: tweet)
                            .padding()
                    }
                }
            }
            .refreshable {
                viewModel.fetchTweets()
            }

• 피드를 보여주는 스크롤 뷰에 refreshable을 통해 pullToRefresh를 할 때마다 자동으로 뷰 모델의 함수를 사용하도록 선언

@ObservedObject private var viewModel: TweetRowViewModel
    
    init(tweet: TweetModel) {
        _viewModel = ObservedObject(wrappedValue: TweetRowViewModel(tweet: tweet))
    }

• 각 트위터 피드에 해당하는 로우 뷰를 이니셜라이즈하는 수단
• 트위터 모델을 파라미터로 받은 뒤 ObserableObject를 이니셜라이즈하기 위해 사용

import Foundation
import SwiftUI

class TweetRowViewModel: ObservableObject {
    let tweet: TweetModel
    @Published var profileImage: UIImage?
    
    init(tweet: TweetModel) {
        self.tweet = tweet
        if let urlString = tweet.user?.profileImageURL {
            downloadProfileImage(with: urlString)
        }
    }
    
    private func downloadProfileImage(with urlString: String) {
        guard let url = URL(string: urlString) else { return }
        URLSession.shared.dataTask(with: url) { [weak self] data, response, error in
            guard
                let response = response as? HTTPURLResponse,
                response.statusCode >= 200,
                response.statusCode < 400,
                error == nil,
                let data = data,
                let image = UIImage(data: data) else { return }
            DispatchQueue.main.async { [weak self] in
                self?.profileImage = image
            }
        }
        .resume()
    }
    
}

• 해당 트위터 데이터를 통해 뷰 모델은 해당 데이터를 상수로 가지고 있음과 동시에 주어진 유저 프로필 이미지 URL을 통해 이미지를 다운로드 및 패치
• @Published로 받고 있는 까닭에 해당 뷰에서 이미지 패치 여부에 따라 이미지를 새롭게 렌더링 가능

구현 화면