0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

NCMBのKotlin SDKを使って地図検索アプリを作る(その1:画面の仕様とSDKの初期化)

Posted at

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-map-searchにアップロードしてあります。

ベースを作成する

今回はKotlinとJetpack composeを使って開発しています。

画面について

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

  • MapBottomNavigation
  • MapScreen
  • ImportScreen

MapBottomNavigation

ナビゲーションバーを表示して、地図画面と設定画面を読み込みます。

Screenshot_20230317_171003のコピー.png

MapScreen

地図画面用のViewです。

Screenshot_20230317_171003.png

ImportScreen

駅情報をインポートするためのスクリーンです。

Screenshot_20230317_171123.png

NCMB SDKのインストール

NCMB SDKは Releases · NIFCLOUD-mbaas/ncmb_kotlin からNCMB.x.x.x.zipをダウンロードします。記事執筆時点での最新版は 1.4.0 です。伸張したファイルをapp/libsに保存します。

そして、app/build.gradleファイルに以下を追加します

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'
}

AndroidManifest.xmlの編集

<application> タグの直前に以下のpermissionを追加します。

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

NCMB SDKの初期化

まずMainActivity.ktにてNCMB SDKをインポートします。

import com.nifcloud.mbaas.core.NCMB

MainActivityのonCreatet関数でSDKを初期化します。アプリケーションキーとクライアントキーはNCMBの管理画面で取得したものと書き換えてください。

class MainActivity : ComponentActivity() {
    @RequiresApi(Build.VERSION_CODES.P)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // NCMBの初期化
        NCMB.initialize(
            this.getApplicationContext(),
            "YOUR_APPLICATION_KEY",
            "YOUR_CLIENT_KEY"
        )
        setContent {
            MapBottomNavigation()
        }
    }
}

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

まとめ

今回は各画面の説明とNCMB SDKの初期化までを行いました。次回は位置情報データのインポートを実装します

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?