0
Help us understand the problem. What are the problem?

posted at

NCMB Kotlin SDKを使ってTodoアプリを作る(その3 タスクデータの表示)

NCMBでは公式SDKとしてSwift/Objective-C/Kotlin/Java/Unity/JavaScript SDKを用意しています。また、それ以外にもコミュニティSDKとして、非公式ながらFlutter/React Native/Google Apps Script/C#/Ruby/Python/PHPなど幅広い言語向けにSDKが開発されています。

今回は公式SDKの一つ、Kotlin SDKを使ってTodoアプリを作ってみます。前回はタスクデータの保存について解説しましたので、今回は保存したデータの取得と表示、そしてデータ削除を解説します。

完成版のコード

作成したデモアプリのコードはNCMBMania/Kotlin_Todo: Kotlin SDKを使ったTodoアプリですにアップロードしてあります。

タスクデータの取得

データストアに保存したタスクデータを取得、表示するのは ListScreen になります。取得したデータは ary の中に入ります。後は aryLazyColumn で一覧表示します。

@Composable
fun ListScreen(navController: NavController) {
    var ary = remember { mutableStateOf<List<NCMBObject>>(emptyList()) }
		// データ取得(後述)
    
		// 画面構築
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text("タスク一覧")
                },
                actions = {
                    IconButton(
                        onClick = {
                            navController.navigate("form")
                        }
                    ){
                        Icon(Icons.Filled.Add, contentDescription = "タスクの作成")
                    }
                }
            )
        },
        content = {
            Column {
                LazyColumn {
                    items(ary.value) { obj ->
                        TaskRow(obj, navController = navController)
                    }
                }
            }
        }
    )
}

Screenshot_20220414_155935.png

データの取得

データを取得する際には NCMBQuery を使います。そして取得したデータはAny型なので、 List<NCMBObject> にキャストします。

val query = NCMBQuery.forObject("Task")
query.findInBackground(NCMBCallback { e, results ->
		if (e == null) {
				ary.value = results as List<NCMBObject>
		}
})

データの表示

リストデータの一行あたりのデータは TaskRow で表示しています。ここではデータをタップした際に、 moveDetail 関数にて詳細画面へ遷移しています。ここではNCMBObjectの文字列化をした上で画面遷移しています。

@Composable
fun TaskRow(obj: NCMBObject, navController: NavController) {
    val moveDetail = {
        val json = JSONObject()
        obj.keys.forEach {key ->
            json.put(key, obj.get(key)!!)
        }
        navController.navigate("detail/task=${json.toString()}")
    }
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)
            .background(Color.White, RoundedCornerShape(5.dp))
            .clickable {
                moveDetail()
            }
    ) {
        Text(obj.getString("title")!!, fontSize = 25.sp)
    }
}

詳細画面の表示

詳細画面では送られてきたNCMBObjectを表示しています。なお、削除ボタンをタップした際には該当データの delete メソッドでデータ削除の上、一覧画面へ遷移しています。編集ボタンをタップした際には、画面遷移した時と同じくNCMBObjectを文字列化した上で編集画面に遷移しています。

NCMBObjectはgetStringで文字列としてデータをとれますが、Nullableなので注意してください。

@Composable
fun DetailScreen(navController: NavController, obj: NCMBObject) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text("タスク")
                },
                actions = {
                    IconButton(
                        onClick = {
                            val json = JSONObject()
                            obj.keys.forEach {key ->
                                json.put(key, obj.get(key)!!)
                            }
                            navController.navigate("edit/task=${json.toString()}")
                        }
                    ){
                        Icon(Icons.Filled.Edit, contentDescription = "Edit")
                    }
                    IconButton(
                        onClick = {
                            obj.delete()
                            navController.navigate("list")
                        }
                    ){
                        Icon(Icons.Filled.Delete, contentDescription = "Delete")
                    }
                }
            )
        },
        content = {
            Column {
                Text(text = obj.getString("title")!!,
                    fontSize = 35.sp,
                    modifier = Modifier.padding(5.dp)
                )
                Text(text = obj.getString("body")!!,
                    fontSize = 30.sp,
                    modifier = Modifier.padding(5.dp)
                )
            }
        }
    )
}

Screenshot_20220414_155946.png

まとめ

今回のTodoアプリではデータ保存、データ取得そしてデータ削除を実装しました。いずれもアプリ開発ではよく使う機能なので、ぜひ使い方を覚えてあなたのアプリ開発に役立ててください。

mBaaSでサーバー開発不要! | ニフクラ mobile backend

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?