Swift Practice # 150 Firestore 資料存取

Dogpa Chen
May 4, 2022

--

上一篇研究了SwiftUI取得網路API資料的方法,慢慢理解之前在UIKit的畫面在SwiftUI該如何顯示。

這篇則要練習SwiftUI與Firestore,因為下一個side project預計會透過Firestore當作資料庫,所以順帶重新理解一下該如何實現。

這篇將透過Firebase進行資料的新增/刪除/修改/讀取,

前置:

如何透過Cocoapods安裝套件與Firebase互動並取得plist,可以參照我之前的文章,看到Auth功能前就好。另外也可以透過SPM快速安裝套件。

Firestore建立第一筆資料:

點選左側Firestore Database後點選Create database。

透過test mode建立資料後按下Next。

資料儲存位址我選擇asia-east1,也就是Google彰濱,這個選好後不能再更動,所以我選擇最近的位置,接著按下右下角Enable。

接著點選Start collection。

輸入collection ID (Mission)後按下Next。

點擊Auto ID讓系統自動產出ID。

Field輸入預設的命名(跟後續JSON有關),Value則填入想填的資料。

建立好後可以看到目前的資料已經產生出一筆。

接下來就準備透過程式碼來完成讀取/新增/修改/刪除/更新

1.Firestore Model:

透過這個Model來對應Firestore內的資料結構。

2.FirestoreViewModel:

將Firestore讀取到的資料以及讀取/新增/刪除/更新的function集中在FirestoreViewModel內。

3.NewMissionView:

在此View將TextField的內容上傳到Firestore,上傳後返回到讀取資料的View。

4.EditView:

點選編輯後出現的View,將原本的Mission字串透過Binding傳給TextField直接顯示,送出編輯後返回讀取資料的View。

5.ContentView:

顯示讀取後的Firestore data,透過Navigation Item Bar 製造Button跳到建立新Mission的View,List內可透過左滑出現編輯或是刪除的Button,編輯會跳到編輯的View,刪除則直接刪除該Mission。

6

6. 專案名稱APP.siwft加入Firebase.cinfigure使用Firebase的功能。

畫面測試:

讀取Mission:

新增Mission:

編輯Mission:

刪除Mission:

大致上透過SwiftUI與Firestore來完成資料的存取,在自己的side project應該不會全部使用,但還是當作一個練習做出基本的功能。也算是讓自己多學習一些東西。持續加油!!

學習資源:

--

--