Membuat Aplikasi Pencatatan untuk Android Dengan MongoDB Stitch

Jika Anda mencari platform tanpa server yang aman yang kaya fitur dan hemat biaya, Anda mungkin ingin mencoba MongoDB Stitch. Selain menawarkan fitur-fitur sisi server yang berguna seperti fungsi, layanan webhooks, dan otentikasi pengguna, ini juga terintegrasi dengan MongoDB Atlas, solusi penyimpanan data berbasis cloud yang kuat dan matang.

Dalam tutorial ini, saya akan menunjukkan cara menggunakan MongoDB Stitch dan cluster MongoDB Atlas untuk membuat aplikasi pencatatan untuk Android dari awal. Saya juga akan memandu Anda bagaimana mengintegrasikan Google Sign-In, penyedia otentikasi yang didukung oleh Stitch, ke dalam aplikasi.

Prasyarat

Untuk memaksimalkan tutorial ini, Anda membutuhkan:

• Android Studio 3.1 atau lebih tinggi
• akun MongoDB Atlas
• perangkat atau emulator yang menjalankan Android 5.0 atau lebih tinggi

Jika Anda belum melakukannya, saya juga menyarankan Anda mmengecek tutorial sebelumnya tentang cara menggunakan Stitch di aplikasi Android Anda terlebih dahulu.

1. Membuat Aplikasi Stitch

Anda membutuhkan aplikasi Stitch untuk dapat menggunakan layanan yang ditawarkan oleh platform Stitch di proyek Android Anda. Jadi masuk ke akun MongoDB Atlas Anda dan navigasikan ke bagian Stitch Apps.

Tekan tombol Create New Application. Dalam dialog yang muncul, berikan nama yang bermakna untuk aplikasi tersebut, pilih salah satu cluster MongoDB Atlas Anda dari daftar dropdown, dan tekan tombol Create.

Jika saat ini Anda tidak memiliki cluster, Anda dapat mempelajari cara membuat dan mengonfigurasinya di sini:

• MongoDB
  Membuat Cluster Database di Cloud Dengan MongoDB Atlas
  Ashraff Hathibelagal

Setelah aplikasi siap, buka bagian Clients dan beralih ke tab Java (Android) untuk menentukan apa ID aplikasi-nya. Anda akan memerlukan ID nanti di tutorial ini.

2. Mengatur Otentikasi

Anda akan menggunakan Google sebagai penyedia otentikasi untuk aplikasi yang akan Anda buat hari ini. Dengan kata lain, Anda akan mengizinkan pengguna akhir untuk masuk ke aplikasi menggunakan akun Google mereka.

Dari konsol admin Stitch, mengatur penyedia otentikasi apa pun hanya membutuhkan waktu sebentar. Sebelum Anda bisa melakukannya, Anda harus mendapatkan beberapa detail penting dari penyedia otentikasi. Untuk mendapatkan detail dari Google, buka tab baru di browser Anda, masuk ke akun Google Anda, dan buka Dashboard API Google Cloud Platform.

Tekan tombol Create Project untuk membuat proyek Google Cloud baru. Setelah Anda memberi nama untuk proyek tersebut, tekan tombol Create.

Setelah proyek siap, buka bagian Credentials dan buka tab OAuth consent screen. Di sini, untuk saat ini, Anda hanya dapat mengisi bidang Application name dan menekan tombol Save.

Lalu, tekan tombol Create credentials, pilih opsi OAuth client ID, dan pilih Android sebagai jenis aplikasi.

Anda sekarang akan diminta untuk memasukkan nama paket yang ingin Anda gunakan untuk aplikasi Android dan sidik jari SHA-1. Untuk tutorial ini, saya sarankan Anda menggunakan sidik jari sertifikat debug Anda. Untuk mendapatkannya, buka terminal dan jalankan perintah berikut:

keytool -exportcert -alias androiddebugkey \
-keystore ~/.android/debug.keystore \
-list

Setelah Anda menyalin sidik jari dan menempelkannya ke dalam formulir, tekan tombol Create.

Pada tahap ini, aplikasi Android Anda akan dapat menggunakan Google Sign-In. Namun, Anda harus mengizinkan aplikasi Stitch Anda untuk menggunakannya juga. Karenanya, tekan kembali tombol Create credentials. Kali ini, pilih Web application sebagai jenis aplikasi.

Saat diminta untuk memasukkan URI pengalihan resmi, gunakan URL panggilan balik Stitch: https://stitch.mongodb.com/api/client/v2.0/auth/callback

Saat menekan tombol Create button now, Anda akan melihat pop-up yang berisi dua string: ID klien dan rahasia klien. Catat keduanya dan kembali ke konsol admin Stitch.

Di bagian Users konsol, beralih ke tab Providers dan pilih Google. Setelah Anda mengaktifkannya, ketikkan ID klien dan rahasia klien, dan tekan tombol Save.

3. Menambahkan Aturan

Pengguna aplikasi Anda tidak boleh dapat melihat catatan satu sama lain. Mereka hanya boleh diizinkan melihat catatan yang mereka buat sendiri. Untuk menegakkan aturan ini, buka bagian Rules dan tekan tombol Add Collection.

Anda sekarang dapat memberikan nama ke database MongoDB Anda dan menentukan nama koleksi tempat Anda menyimpan semua catatan. Biarkan nama database menjadi notes_db dan bahwa koleksi menjadi notes.

Selanjutnya, pilih template aturan Users can only read and write their own data, yang cocok dengan persyaratan aplikasi Anda, dan menyatakan bahwa nama bidang tempat Anda menyimpan ID autentikasi pengguna adalah user_id.

Terakhir, tekan tombol Add Collection.

Jika Anda ingin melihat lebih dekat pada aturan yang baru saja Anda buat, silakan tekan tombol Advanced Mode, yang menunjukkan kepada Anda JSON yang setara dengan aturan tersebut.

4. Melakukan KonfigurasiProyek Android

Sekarang setelah aplikasi Stitch siap, Anda dapat mulai membangun aplikasi Android Anda. Jadi buat proyek Android Studio baru dengan activity kosong, pastikan nama paketnya cocok dengan yang Anda ketikkan sebelumnya.

Agar dapat menggunakan Stitch SDK dalam proyek, tambahkan dependensi implementation berikut dalam file aplikasi bertingkat build.gradle:

implementation 'org.mongodb:stitch-android-sdk:4.0.5'

Untuk mendukung Google Sign-In, tambahkan juga dependensi untuk layanan Google Play.

implementation 'com.google.android.gms:play-services-auth:15.0.1'

Anda akan membutuhkan beberapa widget Material Design, seperti kartu dan tombol aksi mengambang, di aplikasi. Jadi tambahkan dependensi berikut juga:

implementation 'com.android.support:design:27.1.1'
implementation 'com.android.support:cardview-v7:27.1.1'
implementation 'com.afollestad.material-dialogs:core:0.9.6.0'

Terakhir, tambahkan ID aplikasi Stitch Anda dan ID klien yang Anda sebutkan di konsol admin Stitch sebagai item dalam file strings.xml.

<string name="stitch_client_app_id">YOUR_APP_ID</string>
<string name="google_client_id">YOUR_CLIENT_ID</string>

5. Membuat Tata Letak

Pengguna hanya dapat menggunakan aplikasi pencatatan jika sudah masuk. Oleh karena itu, segera setelah aplikasi dibuka, Anda harus menunjukkan kepada mereka tombol masuk. Cara tercepat untuk melakukannya adalah dengan menggunakan widget SignInButton di layout main activity:

<com.google.android.gms.common.SignInButton
        android:id="@+id/sign_in_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

Setelah berhasil masuk, Anda akan mengarahkan pengguna ke activity lain yang berisi widget ListView, yang akan menampilkan catatan pengguna, dan widget FloatingActionButton, yang dapat ditekan pengguna untuk membuat catatan baru. Jadi buat activity kosong lain dan tambahkan kode berikut ke file XML layout-nya:

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/notes_container"
        android:dividerHeight="16dp"
        android:divider="@android:color/transparent"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_add_black_24dp"
        android:id="@+id/add_note_button"
        android:tint="@android:color/white"/>

</RelativeLayout>

Setiap item widget ListView akan menjadi catatan. Untuk mempermudah, misalkan tata letak catatan hanya memiliki widget CardView yang berisi widget TextView. Jadi buat layout XML file baru bernama layout_note.xml dan tambahkan kode berikut:

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/note_text"
        style="@style/TextAppearance.AppCompat.Body1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp" />

</android.support.v7.widget.CardView>

6. Menerapkan Google Sign-In

Saat pengguna menekan tombol masuk, Anda harus memulai alur kerja masuk Google. Jadi, di dalam activity pertama, tambahkan event handler on-klik ke tombol.

Di dalam handler, Anda dapat melanjutkan dan membuat objek GoogleSignInOptions yang dikonfigurasi untuk menggunakan opsi masuk standar. Karena aplikasi Stitch Anda, yang dapat dianggap sebagai server back-end Anda, juga harus menjadi bagian dari proses masuk, pastikan Anda memanggil method requestServerAuthCode() dan meneruskan ID klien Anda ke sana. Kode berikut menunjukkan caranya:

val signInOptions =
    GoogleSignInOptions.Builder(
        GoogleSignInOptions.DEFAULT_SIGN_IN
    ).requestServerAuthCode(
        getString(R.string.google_client_id)
    ).build()

Anda sekarang dapat membuat klien GoogleSignIndengan memanggil method getClient() dan meneruskan objek GoogleSignInOptions kepadanya sebagai argumen. Menggunakan klien, Anda bisa dengan mudah memulai alur kerja masuk dengan mendapatkan intent sign-in dari itu dan meneruskannya ke method activity startActivityForResult(). Begini caranya:

val signInClient = GoogleSignIn.getClient(
        this@MainActivity, signInOptions
)

startActivityForResult(
        signInClient.signInIntent,
        1 // request code
)

Untuk menerima hasil dari activity yang baru saja Anda lepaskan, Anda harus mengganti method onActivityResult(). Di dalamnya, Anda akan memiliki akses ke objek Intent baru, yang dapat Anda sampaikan ke method getSignedInAccountFromIntent() untuk mengidentifikasi pengguna Anda.

override fun onActivityResult(requestCode: Int, 
                              resultCode: Int, 
                              data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)

    val signedInAccount = 
            GoogleSignIn.getSignedInAccountFromIntent(data)

    // More code here
}

Jika pengguna gagal atau menolak untuk masuk, Anda akan memiliki pengecualian sekarang. Tangani dengan menampilkan pesan Toast informatif dan menutup aplikasinya.

if(signedInAccount.exception != null) {
    Toast.makeText(this,
            "You must sign in first", Toast.LENGTH_LONG).show()
    finish()
    return
}

Namun, jika berhasil masuk, Anda akan memiliki akses ke kode otentikasi server yang dapat Anda gunakan untuk membuat objek GoogleCredential. Dengan melewati objek dengan method loginWithCredential() default Stitch klien proyek Anda, Anda dapat mendaftar dan memasukkan pengguna ke aplikasi Anda.

Setelah method selesai dengan sukses, aplikasi harus beralih ke activity kedua, yang memiliki elemen antarmuka pengguna untuk menampilkan catatan dan menambahkan catatan baru. Kode berikut menunjukkan kepada Anda bagaimana melakukannya dengan ringkas:

Stitch.getDefaultAppClient().auth
    .loginWithCredential(
        GoogleCredential(signedInAccount.result.serverAuthCode)
    )
    .addOnSuccessListener {
        // Open activity that shows the notes
        startActivity(
            Intent(this@MainActivity,
                    NotesActivity::class.java
            )
        )
    }

Jika Anda membangun dan menjalankan aplikasinya sekarang, Anda harus dapat menggunakan salah satu akun Google Anda untuk masuk.

7. Menambahkan Catatan

Dalam activity kedua, Anda akan membutuhkan klien Stitch dan klien MongoDB Atlas. Anda akan membutuhkan yang pertama untuk mendapatkan ID otentikasi pengguna, dan yang kedua untuk melakukan operasi baca dan tulis pada cluster MongoDB Atlas Anda. Jadi, tambahkan keduanya sebagai bidang pribadi dari activity.

private val stitchClient = Stitch.getDefaultAppClient()

private val atlasClient  = stitchClient.getServiceClient(
                                RemoteMongoClient.factory,
                                "mongodb-atlas"
                          )

Saat pengguna menekan tombol floating action, Anda harus menampilkan dialog yang meminta mereka untuk mengetikkan catatan mereka. Dengan perpustakaan Material Dialogs, yang Anda tambahkan sebagai dependensi sebelumnya, melakukannya sangat intuitif.

Kode berikut ini menunjukkan kepada Anda cara menambahkan on-click listener pada tombol dan membuat dialog input dasar:

add_note_button.setOnClickListener {
    val dialog = MaterialDialog.Builder(this@NotesActivity)
            .title("New Note")
            .input("Type something", null, false,
                { _, note ->

                    // More code here

                }
            ).build()
    dialog.show()
}

Di dalam event handler dialog, Anda akan memiliki akses ke catatan yang diketik pengguna. Untuk menyimpannya di cluster MongoDB Atlas Anda, Anda harus memasukkannya ke dalam dokumen MongoDB baru. Selain itu, untuk memastikan bahwa catatan hanya dapat dilihat oleh pengguna yang membuatnya, dokumen harus menyertakan bidang user_id yang nilainya cocok dengan ID otentikasi pengguna. Kode berikut, yang masuk ke dalam event handler, menunjukkan kepada Anda cara membuat dokumen:

val document = Document()
document["text"] = note.toString()
document["user_id"] = stitchClient.auth.user!!.id

Sekarang setelah dokumen siap, Anda harus memasukkannya ke dalam koleksi notes, yang termasuk dalam basis data notes_db. Inilah cara Anda bisa mendapatkan referensi ke database dan koleksi, dan menggunakan method insertOne() untuk memasukkan dokumen:

val collection = atlasClient.getDatabase("notes_db")
                            .getCollection("notes")

collection.insertOne(document).addOnSuccessListener {
    Toast.makeText(this@NotesActivity,
            "One note saved", Toast.LENGTH_LONG).show()
}

Jika Anda menjalankan aplikasinya sekarang, Anda harusnya dapat membuat catatan baru dan menyimpannya.

8. Menampilkan Catatan

Agar dapat menampilkan catatan yang telah dibuat pengguna, Anda harus terlebih dahulu mengambil semua dokumen dalam koleksi notes yang menjadi milik pengguna. Anda tidak harus menulis kueri yang rumit untuk melakukannya. Karena aturan yang Anda buat sebelumnya, Stitch secara otomatis memastikan bahwa setiap kueri yang Anda jalankan pada koleksi hanya akan mengembalikan dokumen yang dimiliki pengguna.

Membuat method baru untuk menampilkan catatan.

private fun showNotes() {
    // More code here
}

Di dalam method ini, Anda dapat langsung memanggil method find() pada koleksi notes untuk membuat query yang dapat mengambil catatan pengguna. Untuk menjalankan kueri secara sinkron, Anda harus memanggil method into() dan meneruskan daftar kosong ke sana. Hasil kueri akan tersedia dalam daftar setelah selesai dengan sukses.

val notes = mutableListOf<Document>()

atlasClient.getDatabase("notes_db")
        .getCollection("notes")
        .find()
        .into(notes)
        .addOnSuccessListener {
            
            // More code here

        }

Di dalam on-success listener, Anda sekarang harus membuat turunan dari kelas ArrayAdapter untuk membuat daftar catatan. Namun, Anda tidak bisa meneruskan daftar objek Document langsung ke konstruktor kelas. Anda harus terlebih dahulu mengubahnya menjadi daftar objek String. Kode berikut menunjukkan kepada Anda cara melakukannya menggunakan method map():

val adapter = ArrayAdapter<String>(this@NotesActivity,
        R.layout.layout_note, R.id.note_text,
        notes.map {
            it.getString("text") // Extract only the 'text' field
                                // of each document
        }
)

Setelah adaptor siap, Anda dapat membuatnya bekerja dengan menetapkannya ke properti adapter widget ListView.

notes_container.adapter = adapter

Method showNotes() sekarang siap. Tambahkan panggilan ke dalamnya di dalam method onCreate()sehingga pengguna dapat melihat catatan mereka segera setelah activity dibuka. Selain itu, jika Anda ingin daftar untuk menampilkan catatan baru segera setelah dibuat, saya sarankan Anda juga menambahkan panggilan ke dalam on-success listener yang Anda lampirkan pada method insertOne().

Dengan perubahan di atas, jika Anda menjalankan aplikasi lagi, Anda dapat menambahkan catatan baru dan melihat yang sudah ada.

Kesimpulan

Dalam tutorial ini, Anda melihat betapa mudahnya membuat aplikasi mobile sederhana yang didukung oleh MongoDB Stitch. Anda juga belajar cara menjaga data pengguna akhir Anda tetap aman dan pribadi menggunakan Google sebagai penyedia otentikasi dan aturan akses deklaratif Stitch.

Untuk mempelajari lebih lanjut tentang MongoDB Stitch, silakan merujuk ke dokumentasi resminya.