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を使って日報アプリを作ってみます。前回はログインとデータの保存について解説しましたので、今回は保存したデータの取得と一覧表示について解説します。
完成版のコード
作成したデモアプリのコードはNCMBMania/Kotlin_DailyReportにアップロードしてあります。
日報データの取得
日報データの表示は ListScreen にて行います。日報データは ary に入る形になります。入ったデータは LazyColumn を使って一覧表示します。
@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 ->
ListRow(obj, navController = navController)
}
}
}
}
)
}
データの取得
データを取得する際には NCMBQuery を使います。今回は条件を指定していませんが、文字列の検索や以上以下などの条件が使えます。検索結果はAny型なので、 List<NCMBObject> にキャストします。
val query = NCMBQuery.forObject("DailyReport")
query.findInBackground(NCMBCallback { e, results ->
if (e == null) {
ary.value = results as List<NCMBObject>
}
})
表示
データの表示を行っているのは ListRow になります。ここでは一覧画面から受け取ったNCMBObjectを表示しています。文字列の場合は getString(key) で取得できますが、Nullableなので注意してください。
@Composable
fun ListRow(obj: NCMBObject, navController: NavController) {
// 詳細画面への遷移
val moveDetail = {
// 後述
}
// 画面構築
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)
}
}
詳細画面への遷移
詳細画面に遷移する際には、対象データを文字列として渡す必要があります。そこでJSONObjectを使ってデータを文字列に変換しています。
val moveDetail = {
val json = JSONObject()
obj.keys.forEach {key ->
json.put(key, obj.get(key)!!)
}
navController.navigate("detail/obj=${json.toString()}")
}
このデータをNCMBObjectとして復元する処理についてはKotlinのNavigation コンポーネントを使ってNCMBObjectを別画面に渡す - QiitaのstrToNCMBObjectを参照してください。
日報詳細表示について
日報の詳細表示は、ナビゲーションで復元したNCMBObjectを受け取ります。
composable(
route = "detail/obj={obj}",
arguments = listOf(navArgument("obj") { type = NavType.StringType })
) { backStackEntry ->
val obj = strToNCMBObject(backStackEntry.arguments!!.getString("obj")!!, "DailyReport")
DetailScreen(navController, obj)
}
DetailScreenは単純にデータを表示しているだけです。こちらでもまた、 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/obj=${json.toString()}")
}
){
Icon(Icons.Filled.Edit, contentDescription = "Edit")
}
}
)
},
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)
)
}
}
)
}
まとめ
今回の日報アプリでは認証、データ保存、データ取得を実装しました。いずれもアプリ開発ではよく使う機能なので、ぜひ使い方を覚えてあなたのアプリ開発に役立ててください。