NCMB의 Swift SDK를 사용하여 일보 앱 만들기(2부:일보 데이터 저장)

NCMB의 Swift SDK를 사용하여 데모 앱을 만들어 봅니다. 이번은 업무계에서 자주 있는 니즈의 일보 어플을 만들어 보겠습니다. 실제로는 데이터스토어나 파일스토어를 사용하므로, 응용하면 범용적으로 사용할 수 있을 것입니다.

지난번에는 화면 설명과 SDK 도입까지 했으므로, 이번에는 일보 데이터의 보존 처리를 작성합니다.

코드 정보

이 코드는 NCMBMania/swift_daily_report에 업로드되었습니다. 실장시의 참고로 해 주세요.

InputView 정보

일보의 입력과 보존은 InputView에서 실시합니다. 화면은 일보의 날짜, 내용, 사진 선택 등의 양식을 표시하고 있을 뿐입니다.

import SwiftUI
import NCMB

struct InputView: View {
    @State private var date = Date()     // 日報の日付
    @State private var text = ""         // 日報の本文
    @State private var showAlert = false // アラート表示用のフラグ
    @State private var message = ""      // アラートのメッセージ

    @State var imageData : Data = .init(capacity:0) // // 選択された写真データ
    @State var source:UIImagePickerController.SourceType = .photoLibrary // カメラまたはフォトライブラリ
    @State var isImagePicker = false // 写真ピッカーを表示する際のフラグ

    var body: some View {
        NavigationView {
            VStack(spacing: 10) {
                // 画像モーダルへの遷移用
                NavigationLink(
                    destination: Imagepicker(
                        show: $isImagePicker,
                        image: $imageData,
                        sourceType: source
                    ),
                    isActive:$isImagePicker,
                    label: {
                        Text("")
                    })
                // 日報の日付を選択
                DatePicker("日付",
                    selection: $date,
                    displayedComponents: .date
                )
                // 日報の内容を記述するTextEditor
                TextEditor(text: $text)
                    .frame(width: UIScreen.main.bounds.width * 0.8, height: 200)
                    .overlay(
                        RoundedRectangle(cornerRadius: 5)
                            .stroke(Color.blue, lineWidth: 2)
                    )
                // 画像が指定されれば、サムネイル表示
                if imageData.count != 0 {
                    Image(uiImage: UIImage(data: self.imageData)!)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(height: 100)
                        .cornerRadius(15)
                        .padding()
                }
                // 写真選択モーダルの表示
                Button(action: {
                    self.source = .photoLibrary
                    self.isImagePicker.toggle()
                }, label: {
                    Text("写真を選択")
                })
            }
            .navigationBarTitle("日報入力", displayMode: .inline)
            .toolbar {
                // 右上のアイコンで保存しょりを実行
                ToolbarItem(placement: .navigationBarTrailing){
                    Button(action: {
                        save()
                    }) {
                        Image(systemName: "icloud.and.arrow.up")
                    }
                }
            }
        }
        .alert(isPresented: $showAlert) {
            Alert(title: Text(self.message))
        }
    }

    // 日報を保存する処理
    func save() {
    }
}

보존 처리에 대해서

데이터의 저장은 save 함수로 실시합니다. 여기에서는 save 함수의 내용에 대해 설명합니다. 우선 NCMBObject(DB에서 말하는 행 상당)를 준비합니다. 클래스명이라고 하는 것은, DB로 말하는 테이블명 상당입니다.

// DailyReportクラス（DBでいうテーブル相当）のインスタンス（DBでいう行相当）を準備
let obj = NCMBObject(className: "DailyReport")

이 obj 에 키를 지정해, text(일보의 본문)와 date(일보의 일자)를 지정합니다. 이것은 DB에서 말하는 컬럼 상당합니다.

// 指定されている値をセット
obj["text"] = self.text
obj["date"] = self.date

다음에 이미지가 지정되어 있는지 어떤지를 판정합니다. 이미지가 지정되면 해당 데이터를 파일 저장소에 저장합니다. 파일 이름은 UUID를 사용하여 고유합니다.

save 메소드는 동기적으로 파일을 저장합니다. 비동기 처리가 좋은 경우에는 saveInBackground 도 준비하고 있습니다. 필요에 따라 구분하십시오. 사진을 저장하는 작업이 성공하면 파일 이름을 obj의 fileName 키에 연결합니다.

// 画像があるか判断
if self.imageData.count > 0 {
    // 画像があれば、ファイルストアへ保存する
    // ファイル名はUUIDで生成
    let fileName = "\(UUID()).jpg"
    // ファイルストアのインスタンスを準備
    let file = NCMBFile(fileName: fileName)
    // 保存（ファイルストアへのアップロード）
    _ = file.save(data: self.imageData)
    // ファイル名をDailyReportクラスのインスタンスに紐付ける
    obj["fileName"] = fileName
}

그리고 obj도 저장합니다.

// データを保存（データストアにアップロード）
let result = obj.save()

이쪽은 처리 판정을 실시하고 있습니다. result가 .success(처리 성공) 또는 .failure(처리 실패)에 의해 처리 내용을 바꾸고 있습니다. 결국 경고를 내고 처리 완료입니다.

// 結果を判定
switch result {
case .success(): // 保存がうまくいったら、入力内容をリセット
    self.text = ""
    self.imageData.count = 0
    self.date = Date()
    // メッセージを設定
    self.message = "保存しました"
    break
case let .failure(err): // エラーの場合はエラーメッセージをセット
    self.message = err.localizedDescription
    break
}
// アラートを表示
self.showAlert = true

여기까지 일보 데이터의 보존 처리가 완성됩니다.

요약

이번에는 일보 앱에서 일보 데이터의 보존 처리를 해설했습니다. 다음은 일보 데이터의 검색과 일람 표시 주위를 해설합니다.