[4]_2_1. (Firebase) RealTime Database 데이터 받아오기

 

 

 

 

 

 

Firebase 집사님 사용 2탄 - database 사용하기

 

Firebase에서 제공하는 database는 2가지인 듯 하다.

 

하나는 Firestore Database, 또 하나는 지금 사용할 Realtime Database

 

아직 Firestore는 안 배워서 그 차이는 Firestore를 해보면서 알아보기로 한다.

 

 

 

 

 

---

Step1. 준비 작업

상기시킬겸 준비작업을 다시 한 번 되뇌어본다.

 

(1) Firebase 사이트에서 프로젝트 생성

 

(2) 프로젝트에 iOS 어플 추가 (어플의 번들id 입력)

 

(3) GoogleService-info.plist 다운로드 --> X-code 프로젝트 navigator에 삽입

 

(4) X-code의 해당 폴더에서 터미널 열기 --> pod init  (실행 후 닫지 않고 대기)

 

(5) 폴더에서 Podfile을 실행하여 pod 'FirebaseDatabase' [Command + S(저장) --> Command + Q(닫기)]

 

(6) 대기시켜두었던 터미널에 pod install 실행  -->  설치 완료 확인 후 터미널 종료

 

(7) xcworkspace 파일로 작업 시작

 

(8) AppDelegate 파일에서 firebase 초기화

import UIKit
import FirebaseCore

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        FirebaseApp.configure()
        
        return true
    }

 

 

 

 

 

---

Step2. Firebase 사이트에서 Database 만들기

 

(1) 사이트 카테고리의 빌드 항목 중에 'Realtime Database'를 선택하고, 오른쪽 화면이 나타나면 "데이터베이스 만들기"를 누른다.

 

 

 

(2) 데이터 베이스 위치를 선택한다. (나는 임의로 미국 선택)

 

      데이터 베이스의 위치가 물리적으로 가까울수록 빠르다고 하는데 다른 선택 요소가 있는지 아직은 모르겠다.

 

 

 

(3) 모드 선택은 생략 (임의로 테스트 모드 선택)

     

      여기까지 일단 Database 저장소 생성은 완료. 이제 Database에 Data 만들기

 

 

 

 

(4) 데이터 만들기

위 하얀 메모장 같은 것이 데이터들이 있는, 또 있을 곳이다.

 

첫번째 줄에 있는 주소가 내 데이터 베이스의 가장 상위 폴더라고 생각하면 되고, 그 아래로 데이터들이 카테고리 형식으로 나열된다.

 

여기서 "+" 버튼을 눌러 저장될 데이터의 key와 value를 직접 타이핑으로 입력할 수도 있고

창의 오른쪽 끝에 있는 '점3개행' 버튼을 눌러 JSON 파일을 넣을 수도 있다.

 

 

 

 

"JSON 가져오기" 버튼을 누르면 탐색기에서 개인의 컴퓨터에 있는 JSON 파일을 가져오면 된다.

나는 수업에서 제공해주는 JSON 파일을 불러왔다.

 

가장 상위에 item# 구조체가 있고, 그 아래 key와 value 값들이 있다.

 

 

 

 

 

Coding 시작

---

Step3.  X-code의 객체에 데이터 받기

 

위 사이트의 데이터를 쓸 것이므로

 

우선, swift 파일을 하나 생성해주고, 위 코드를 그대로 옯겨 struct을 만든다. 

 

JSON 파일을 읽고 또 쓰기도 할 것이니 encode, decod 모두 가능한 Codable 타입으로 선언한다.

struct CreditCard: Codable {
    let cardImageURL: String
    let id: Int
    let name: String
    let rank: Int
    let promotionDetail: PromotionDetail
}

struct PromotionDetail: Codable {
    let amount: Int
    let benefitCondition: String
    let benefitDate: String
    let benefitDetail: String
    let companyName: String
    let condition: String
    let period: String
}

중요 Point는 

 

하나. key의 텍스트가 쪼오~~~~끔이라 틀리면 나중에 고생하므로 차근차근 만들자....

 

둘. 상수(혹은 변수)의 타입이 틀리면 마찬가지로 값을 가져올 수 없으므로 잘 파악하여 입력하자

 

      강사가 말하길, FirebaseDatabase의 타입은 4가지라고 한다.

 

      문자(String) / 수(Int, Double, Float 등) / Array / Dictionary

 

      그럼.... 4개면 되겠지 뭐 하고 넘어가자.

 

 

 

 

 

---

Step4. 데이터 불러오기

 

나는 Database의 가장 상위 item을 struct에서 정의한 CreditCard로 가져와 cardList 배열에 하나씩 넣어줄 것이다.

 

그러기 위해 아래와 같은 배열 상수를 선언한다.

  var cardList: [CreditCard] = []

 

 

 

 

이제부터가 Database의 데이터를 본격적으로 불러오는 작업이다.

 

step을 잘게 쪼개서 정리해보자.

 

 

 

---

step 4-1. Data를 받아올 변수 선언

우선 FirebaseDatabase를 import하여 그 안에 있는 DatabaseReference 타입의 상수를 선언한다.

 

DatabaseReference는 내 Firebase의 Database의 내용을 읽고 쓸 수 있게 해 주는 타입이다.

import UIKit
import FirebaseDatabase

class TableViewController: UITableViewController {
	
    var cardList: [CreditCard] = []
    var ref: DatabaseReference!

 

이 ref 변수에 Databse의 내용을 담아 주무르고 다듬어서 cardList 배열에 넣으면 된다.

 

 

step 4-2. Database의 Root에 접근하기

내 Database에 접근하기 위한 key로 Database.databse()를 사용하고, reference를 사용하여 내 Database의 Root를 가져온다.

 

실제로 print(ref)를 해보면 위 Database 화면의 Root 주소가 나왔다.

 override func viewDidLoad() {
        super.viewDidLoad()
        
        ref = Database.database().reference()

참고로, 작성은 따로 함수를 만들어 구성해도 되고, 위처럼 viewDidLoad에서 해도 된다.

 

 

 

 

step 4-3. Database의 현재 데이터(snapshot) 가져오기

우선 작성할 코드를 보면 다음과 같다.

	ref = Database.database().reference()
        ref.observe(.value) { snapshot in
                
            }

ref에 있는 value(값)을 observe해서 snapshot으로 가져올 건데...

 

여기까지 작성하고 내용을 정리하자면,

 

snapshot이라 함은 변하는 객체의 순간 고정된 값을 가져온다는 얘기인데,

 

그걸 지금 가져온다는 것은 ref에는 database의 data들이 담긴 것이 아니라 database 접근만을 위한 키일 뿐인 것이고,

 

observe(.value)를 통해 그 database의 현재 snapshot을 가져오는 것 같다.

 

 

 

 

 

step 4-4. 가져온 Data를 배열로 만들기

 

이제 가져온 snapshot을 내가 선언한 cardList 배열에 넣기 위한 디코딩 작업을 해야 한다.

 

작업 순서는

(1) Data(snapshot.value)를 내 구조체의 순서/타입,그룹과 맞는 배열로 1차 바꿔주고

(2) 그걸 JSON 형식으로 바꾼 뒤 

(3) JSON 디코더로 원하는 객체를 얻어낸다.

        ref = Database.database().reference()

        ref.observe(.value) { snapshot in
            guard let value = snapshot.value as? [String: [String: Any]] else { return }
            do {
                let jsonData = try JSONSerialization.data(withJSONObject: value)
                let cardData = try JSONDecoder().decode([String: CreditCard].self, from: jsonData)
                let cardList = Array(cardData.values)
                self.cardList = cardList.sorted { $0.rank < $1.rank }
             }
              catch let error {
                    print("ERROR JSON PARSSING \(error.localizedDescription)")
             }
         }

 

공부할 이슈 : JSONSerialization은 컨버터로서, JSon <---> equivalent Foundation object인데, 흠....

                     그렇담 database로부터 data를 json 형식으로 바꿨다는 것인지

                     JSONSerialization.data(withJSONObject: value)에서 withJSONObject를 보면 value가 json object라는 건데...

 

 

 

 

 

데이터를 불러와 배열만 만들면 표시하는 건 자유!

 

일단 데이터 불러오기 끝