NCMB Kotlin SDKを使って日報アプリを作る（その1 アプリの仕様とNCMBの初期化）

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を使って日報アプリを作ってみます。まず画面の仕様とSDKの初期化について解説します。

## 完成版のコード

作成したデモアプリのコードは[NCMBMania/Kotlin_DailyReport](https://github.com/NCMBMania/Kotlin_DailyReport)にアップロードしてあります。

## ベースについて

今回はKotlin + Jetpack Composeの組み合わせになっています。プロジェクトを作る際には Empty Compose Activity を選択してください。

![ScreenShot_ 2022-04-12 17.43.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/ee306259-52ec-377e-6541-2bababa595ff.png)


## Composeについて

今回は以下のComposeを用意しています。

- Navigation
- LoginScreen
- FormScreen
- ListScreen
- ListRow
- DetailScreen

### Navigation

各画面への遷移をハンドリングしています。Navigationコンポーネントを利用しています。

### LoginScreen

![Screenshot_20220414_172403.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/03bbbdff-ea1f-002e-fbad-019080c04d5d.png)


ログイン画面です。ユーザーはあらかじめNCMBの管理画面にて作成しています。

### FormScreen

![Screenshot_20220414_172211.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/87b49e29-14fe-b3d1-3955-322346694366.png)


入力フォームです。日報のタイトル、本文を入力します。編集にも利用しています。

### ListScreen

![Screenshot_20220414_172126.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/14e0e916-6ff8-4db7-d6f8-6eaef6f39def.png)


登録されている日報を一覧表示します。実際の行単位の描画はListRowにて行っています。

### ListRow

日報一覧表示時に行単位の表示をします。

### DetailScreen

![Screenshot_20220414_172234.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/8890a081-bae8-d452-3859-4103e7dfe1a3.png)


一覧で選択された日報データの詳細表示を行います。

## NCMB SDKのインストール

NCMB SDKは[Releases · NIFCLOUD-mbaas/ncmb_kotlin](https://github.com/NIFCLOUD-mbaas/ncmb_kotlin/releases)よりダウンロードします。Zipファイルをダウンロードして展開すると、NCMB.jarというファイルが取得できます。このファイルをKotlinプロジェクトの `app/libs` 以下にコピーします。

これでNCMB SDKの利用準備が整います。

## NCMB SDKの初期化

`app/build.gradle` を開いて編集します。そして以下の4つを追加します。一番下のkotlinx-coroutinesを追加すると、保存処理などが同期的に処理できるようになります。

```
dependencies {
	// 省略
    implementation 'com.squareup.okhttp3:okhttp:4.8.1'
	implementation 'com.google.code.gson:gson:2.3.1'
	api files('libs/NCMB.jar')
	implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.9'
}
```

編集したら同期します。

### コードの編集

MainActivity.ktを開いてNCMBの初期化を行います。 `super.onCreate` の下でNCMBを初期化します。 `YOUR_APPLICATION_KEY` と `YOUR_CLIENT_KEY` はそれぞれあなたのものと書き換えてください。

```kotlin
// インポート
import com.nifcloud.mbaas.core.NCMB

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // NCMBの初期化
        NCMB.initialize(
            this.getApplicationContext(),
            "YOUR_APPLICATION_KEY",
            "YOUR_CLIENT_KEY"
        )
        setContent {
						// 省略
        }
    }
}
```

これでNCMBの初期化が終わり、利用準備が整います。

## ログインできるユーザーの作成

今回は日報なので、あらかじめ企業内で従業員のアカウントが作成されるかと思います（アプリ内で新規登録はまずないでしょう）。そこで、NCMBの管理画面にて、会員としてログインできるユーザーを作成しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/8cdef158-6d0e-af4b-baca-a29817382261.png)


## まとめ

今回はComponentの説明と、NCMB SDKの初期化を行いました。次回はログイン処理と、データの保存処理について説明します。

[mBaaSでサーバー開発不要！ | ニフクラ mobile backend](https://mbaas.nifcloud.com/)