NCMBのSwift SDKとDeepL APIを使って翻訳アプリを作る（その3：翻訳履歴の取得と表示）

NCMBのSwift SDKを使ってデモアプリを作ってみます。今回はDeepL APIを使った翻訳アプリです。翻訳結果をNCMBのデータストアに保存し、後で確認できるようにします。データストアにデータを保存したり、逆に取り出すのはよくあるケースなので、様々な場面で応用できるはずです。

前回は翻訳処理とデータ保存について解説しました。今回は保存したデータの取得と表示について解説します。

コードについて

今回のコードはNCMBMania/Swift_DeepL_App: Swift NCMB SDKとDeepL APIを組み合わせた翻訳アプリのデモですにアップロードしてあります。実装時の参考にしてください。

履歴画面について

再掲になりますが、履歴画面は次のようなコードになります。

import NCMB

// 履歴画面用
struct HistoryView: View {
    // 履歴が入る配列
    @ObservedObject var History = Histories()
    // NCBMから履歴を取得する処理
    func getHistories() {
    }
    // 画面表示
    var body: some View {
        NavigationView{
            VStack(spacing:0){
                ZStack{
                    List {
                        ForEach(self.History.items, id: \.objectId) { translate in
                            // translateはNCMBObjectです
                            // タスク文字列をタップしたらDetailViewを呼び出します
                            NavigationLink(destination: DetailView(translate: translate)) {
                                Text((translate["original"] ?? "") as String)
                            }
                        }
                    }
                }
            }
            .navigationBarTitle("履歴", displayMode: .inline)
            .onAppear {
                // 画面表示したら履歴を取得する処理を呼び出す
                getHistories()
            }
        }
    }
}

ObservableObjectの用意

検索結果を取得した時に画面に反映できるようにObservableObjectを用意します。

// NCMBから取得した結果が入るObservableObject
class Histories: ObservableObject {
    @Published var items: [NCMBObject] = []
}

データストアを検索する

データストアの検索処理 getHistories 関数は次のようになります。データストアを検索する際にはNCMBQueryを使います。検索がうまくいくと、 .success になり、結果が配列で取得できます。それを先ほどのObservableObjectに適用します。

// NCBMから履歴を取得する処理
func getHistories() {
		let query : NCMBQuery<NCMBObject> = NCMBQuery.getQuery(className: "Translate")
		// 検索処理を実行します。処理は非同期です        //
		query.findInBackground(callback: { result in
				// 取得できた場合
				if case let .success(array)  = result {
						// メインスレッドなので main.async を使います
						DispatchQueue.main.async {
								// 結果を適用します
								History.items = array
						}
				} else {
						print("取得に失敗しました")
				}
		})
}

検索がうまくいけば、画面にこれまでの翻訳履歴が一覧表示されます。

一覧をタップした際の処理

一覧をタップした際にはNavigationLinkを使ってDetailViewに遷移します。これは単純に一覧画面で受け取ったNCMBObjectを表示するだけです。

import NCMB

// 詳細表示画面
struct DetailView: View {
    @Environment(\.presentationMode) var presentation
    // 一覧画面からNCMBObjectを受け取る
    @State var translate: NCMBObject
    
    // 画面表示
    var body: some View {
        NavigationView{
            VStack(spacing:0){
                Text((translate["original"] ?? "") as String)
                Spacer()
                Text((translate["translate"] ?? "") as String)
                Spacer()
            }
        }
    }
}

これで翻訳アプリの完成です。

まとめ

今回はデータストアへのデータ保存と、検索処理を利用しました。検索と言っても条件は特に指定していません。データストアは文字列検索や以上以下検索など様々な条件を指定して検索できますので、ぜひお試しください。

また、NCMBにはデータストアだけでなくファイルストアや認証、プッシュ通知機能があります。ぜひそれらを使って、あなたのアプリ開発に活かしてください。