Day16. Swift一定要會の留言板實作篇 (1)

實作畫面

今天要來帶大家做留言板 message board 的實作！
先給大家看成品圖！

RealmSwift

我們昨天帶各位完成了簡單的畫面實作，今天要帶大家嘗試加上資料庫的實作喔！
我們這次教各位用 RealmSwift 來建置 SDK

RealmSwift 建置教學

在 RealmSwift 套件建置完後，我們需要自己寫一個資料庫

import Foundation 
import RealmSwift //RealmSwift 資料庫 

class MessageBoard: Object {
    @Persisted(primaryKey: true) var _id: ObjectId
    @Persisted var name: String = "" // 使用者名稱
    @Persisted var content: String = "" // 留言內容
    @Persisted var currentTime: String = "" // 留言的時間

    // 先在裡面寫一個 convenience 初始化器
    // 讓我們可以在別的頁面呼叫資料庫裡宣告的變數
    convenience init(name: String, 
                     content: String, 
                     currentTime: String) {
        
        self.init()
        self.name = name
        self.content = content
        self.currentTime = currentTime
        
   }
}

MainView

import

導入剛剛設定好的 RealmSwift 套件

import RealmSwift

IBOutlet

我們在畫面上需要用到的元件有

• 2 個 label 分別做標記使用者和留言區塊
• 1 個 textField 讓使用者輸入使用者名稱
• 1 個 textView 讓使用者輸入留言內容
• 2 個 button 分別做不同的功能：
  • 將資料送出儲存進資料庫
  • 按照時間排序(新到舊/舊到新)
• 1 個 tableView 把目前資料庫的內容顯示出來

我們一樣在 xib 拉好元件後，將元件設定好 IBOutlet

    //MARK: - IBOutlet

    @IBOutlet weak var lbUser: UILabel!
    @IBOutlet weak var lbComments: UILabel!
    @IBOutlet weak var txfUser: UITextField!
    @IBOutlet weak var txvContent: UITextView!
    @IBOutlet weak var btnSent: UIButton!
    @IBOutlet weak var btnSort: UIButton!
    @IBOutlet weak var tbvTest: UITableView!

變數

設定好元件後，我們需要宣告陣列來儲存 MessageBoard 的資料
以及宣告排序功能，預設為降序也就是 false

    // MARK: - Proprtty
    
    var messageArray: [MessageBoard] = []
    var isAscending = false

setUi

我們首先要先來讓資料庫可以在 MainViewController 中運用所以要先寫一個 func

    func dataBase() {
        let realm = try! Realm()
        let messageBoards = realm.objects(MessageBoard.self)
        messageArray = Array(messageBoards)
        sortMessages() //排序功能後面會介紹
        tbvTest.reloadData()
        print("file :a \(realm.configuration.fileURL!)")
    }

在我們要設定 tableView 之前我們需要新增一個 tableViewCell 並命名！

操作和之前介紹的新增 ViewController 一樣，不過要記得把範本切換為 tableViewCell！

首先我們先宣告一個 func 去設定 tableView
註冊我們的 tableViewCell 為 MainTableViewCell
接著我們要來設定 tableView 的 delegate 和 dataSource

[!Important]當我們要運用到 tableView 時每次都要記得宣告喔！

    func tableSet() {
        
        tbvTest?.register(UINib(nibName: "MainTableViewCell", 
                                bundle: nil), 
                          forCellReuseIdentifier: "MainTableViewCell")
        
        tbvTest.dataSource = self
        tbvTest.delegate = self
    }

最後我們來設定func setUi 並包進去 viewDidLoad

    // MARK: - LifeCycle
    override func viewDidLoad() {
        super.viewDidLoad()
        setUi()
    }

   // MARK: - UI Setting
    func setUi() {
        tableSet()
        dataBase()
        btnSent.setTitle("送出", for: .normal) //設定按鈕的 title
    }

extension

今天最後要讓 tableView 顯示出資料，要寫在 extension 裡！

[!Important]當我們要顯示 tableView 時每次都要記得設定喔！

// MARK: - Extensions
extension MainViewController: UITableViewDelegate, UITableViewDataSource {
    
    // numberOfRowsInSection 設定 tableView 顯示行數
    func tableView(_ tableView: UITableView, 
                   umberOfRowsInSection section: Int) -> Int {
        
        // 利用新增的留言數量去控制要顯示有幾行
        return messageArray.count
    }
    
    // cellForRowAt 設定 tableView 顯示的內容
    func tableView(_ tableView: UITableView, 
                   cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // 把要用到的tableViewCell命名為一個cell常數
        guard let cell = tbvTest.dequeueReusableCell(withIdentifier: "MainTableViewCell", 
                                                     for: indexPath) as? MainTableViewCell 
        else {
            return MainTableViewCell()
        }
        
        // 將 messageArray 陣列中儲存的每筆資料變為一個常數並呼叫，讓tableView顯示
        let message = messageArray[indexPath.row]
        cell.lbTest.text = "\(message.name): \(message.content)\n時間: \(message.currentTime)"
        return cell
    }
}