Rainbow Android Apps – Membuat Halaman Login dan Update User Info

Membuat Halaman Login dan Update User Info Rainbow Android Apps Pada tutorial sebelumnya kita sudah belajar bagaimana cara mengintegrasikan Rainbow API pada Android Apps. Nah kali ini saatnya kita belajar cara membuat halaman login dan mengupdate user info Rainbow pada Android.

Bedanya, kali ini kita tidak menggunakan Android SDK melainkan Rainbow Rest API. Lhoo ? Rainbow Rest API merupakan API berbasis metode HTTP. Kelebihannya, ia dapat membantu mengembangkan Aplikasi agar terhubung dengan layanan yang tersedia menggunakan berbagai bahasa pemrograman.

Apa yang ditawarkan Rainbow Rest APIs ?

Platform Rainbow menawarkan sebuah API untuk membantu perusahaan yang ingin terintegrasi dengan layanan yang disediakan Rainbow. Dalam hal ini mengintegrasikan dengan SDK sedikit sulit jika ingin menggunakan API secara langsung.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Di sinilah Rainbow Rest API berfungsi. Ia memungkinkan sebuah perusahaan, Integrator, TI, Mitra Bisnis & Administrator untuk dapat menghubungkan layanan yang dimiliki Rainbow ke server back-end mereka (Integrasi B2B). Tujuannya adalah untuk mengotomatisasi tugas seperti pembuatan akun dan menerapkan sistem PBX kealaman situs.

Bagaimana cara mengakses Rainbow Rest API ?

Dalam mengakses Rainbow Rest API terdapat dua cara, yaitu :

Menggunakan Rest API pada Rainbow Developer Sandboxed

Terdapat beberapa batasan penggunaan Rest API yang terhubung pada Rainbow Developer Sandboxed seperti berikut :

  • Subscriptions API
  • Offers API
  • Quotations API
  • Invoices API
  • Payments API

Semua API kecuali yang sudah disebutkan, bisa digunakan tergantung hak akses pengguna yang ingin request (meminta) akses Rest API. Di sini pembatasan akses pengguna bisa berlaku. Contoh : pengguna tidak dapat mengaitkan sebuah perusahaan dengan suatu organisasi jika pengguna bukan admin dari organisasi tersebut.

Menggunakan Rest API pada Rainbow Official Platform

Tidak ada batasan akses Rest API pada Rainbow Official Platform. Semua API dapat digunakan tergantung hak akses pengguna yang ingin request (meminta) akses Rest API. Dalam hal ini, pembatasan akses pengguna bisa berlaku. Contohnya pengguna tidak dapat mengaitkan sebuah perusahaan dengan suatu organisasi jika pengguna bukan admin dari organisasi tersebut.

Pembuatan Project

Pada project kali ini kita menggunakan Retrofit sebagai Rest API client. Why Retrofit ? Karena Retrofit memiliki performa yang cukup mumpuni dalam hal urusan Networking.

Setelah project baru selesai dibuat, buka berkas (file) build.gradle dan tambahkan dependensi Retrofit seperti berikut :


Setelah menambahkan dependensi Retrofit, lakukan sinkronisasi project dengan menekan tombol Sync Now. Setelah selesai jangan lupa menambahkan internet permission pada berkas (file) AndroidManifest.xml seperti berikut :


Struktur kelas dan package dari project kali ini adalah seperti berikut :

Struktur kelas rainbow android apps

Komponen Model

Yang pertama kita buat adalah komponen model di mana terdapat beberapa kelas yang akan digunakan untuk menampung respon dari Rest API Rainbow. Pembuatan kelas model sendiri cukup mudah loh. Gunakan bantuan plugin yang bernama RoboPojoGenerator.

komponen model untuk belajar rainbow android

Nah, berikut daftar beberapa model kelas yang akan digunakan untuk menampung respon dari Rest API Rainbow

AuthorizationResponse.java

LoggedInUser.java

User.java

UserResponse.java

Komponen Networking

Setelah selesai dengan komponen model, selanjutnya kita akan membuat kelas untuk komponen Networking, komponen yang digunakan untuk menghubungkan aplikasi dengan Rest API. Pada komponen networking terdapat dua kelas yang akan dibuat yaitu kelas ServiceClient seperti berikut :


Kelas ServiceClient digunakan untuk konfigurasi Retrofit agar bisa digunakan.
Sementara kelas ServiceRepository seperti berikut :


Pada kelas ServiceRepository terdapat beberapa fungsi seperti login, logout, get user, update user info dengan detail endpoint dan parameter sebagai berikut :

Login
GET : /api/rainbow/authentication/v1.0/login

Header Parameter

Login rainbow android

* Jika terhubung ke Rainbow Developer Sandboxed Platform bisa tanpa dengan parameter “x-rainbow-app-auth”

Logout
GET : /api/rainbow/authentication/v1.0/logout

Header Parameter

Logout rainbow android

Get User
GET/api/rainbow/admin/v1.0/users/{userId}

Header Parameter

Get user rainbow android

Path Parameter

Path parameter rainbow android

Query Parameter

Query parameter rainbow android

Update User Info
PUT : /api/rainbow/admin/v1.0/users/{userId}

Header Parameter

Update user info rainbow android

Path Parameter

Path update user info rainbow android

Request Body

Request body update user info rainbow android

Komponen Common

Pada komponen common ada dua kelas yang akan dibuat, yaitu kelas UserPreferences dan kelas Utils. Pada kelas UserPreferences terdapat beberapa fungsi yang digunakan untuk menyimpan dan mengambil informasi yang tersimpan pada penyimpanan lokal menggunakan SharedPreferences seperti berikut :

UserPreferences.java


Kemudian pada kelas Utils terdapat dua fungsi, yaitu fungsi untuk melakukan encode String ke Base64 dan fungsi untuk menyembunyikan softkey seperti berikut :

Halaman Splash Screen

Pada halaman splash screen tambahkan beberapa baris kode pada fungsi onCreate() untuk mengecek apakah sebelumnya pengguna sudah pernah melakukan login atau belum seperti berikut :


Kode yang berada pada fungsi onCreate() bertujuan agar saat pengguna sebelumnya sudah pernah melakukan login, ia akan diarahkan ke halaman UserInfoActivity. Namun jika belum melakukan login, ia akan diarahkan ke halaman MainActivity.

Setelah halaman SplashScreen dibuat jangan lupa untuk merubah berkas (file) AndroidManifest.xml menjadi seperti berikut :

Halaman informasi pengguna

Di halaman informasi pengguna terdapat beberapa widget TextView, satu widget ProgressBar dan tiga widget Button pada layout activity_user_info.xml seperti berikut :


Kemudian pada kelas UserInfoActivity tambahkan fungsi loadUserInfo() untuk memuat informasi pengguna seperti berikut :

Halaman Login

Pada halaman login terdapat dua widget EditText, satu widget ProgressBar dan satu widget Button pada layout activity_login.xml seperti berikut :


Kemudian pada kelas LoginActivity tambahkan fungsi doLogin() seperti berikut :


Jika fungsi login di atas berhasil maka sistem akan menyimpan beberapa informasi pengguna ke dalam penyimpanan lokal. Kemudian pengguna akan diarahkan ke halaman informasi. Tapi jika gagal, pop-up berupa Toast akan muncul dan menampilkan pesan yang sudah ditentukan seperti berikut :

Rainbow rest API

Halaman untuk memperbaharui informasi pengguna

Next, pembuatan halaman untuk memperbaharui informasi pengguna. Sama halnya dengan halaman login, halaman ini memiliki beberapa widget EditText, satu widget Progressbar dan satu widget Button pada layout activity_update_user_info.xml seperti berikut :


Kemudian pada kelas UpdateUserInfoActivity tambahkan fungsi updateuserInfo() untuk memperbaharui informasi pengguna seperti berikut :


Jika informasi pengguna berhasil diperbaharui maka halaman akan secara otomatis tertutup dan mengembalikan nilai RESULT_OK. Namun jika gagal, pop-up berupa Toast akan muncul dan menampilkan pesan yang sudah ditentukan.
Kemudian pada kelas UserInfoActivity, tambahkan fungsi setOnClickListener() pada variable btnUpdateUserInfo seperti berikut :


Di dalam fungsi setOnClickListener() di atas terdapat beberapa baris untuk mengirim dan menampilkan data ke halaman untuk memperbaharui informasi pengguna.
Masih dalam kelas UserInfoActivity, tambahkan fungsi onActivityResult() seperti berikut :


onActivityResult() berfungsi untuk mengecek nilai kembalian dari kelas UpdateUserInfoActivity, jika bernilai RESULT_OK maka secara otomatis informasi pengguna akan dimuat kembali seperti berikut

Rainbow rest API

Menambahkan fungsi Logout

Untuk menambahkan fungsi logout, buka kembali kelas UserInfoActivity. Tambahkan fungsi setOnClickListener() pada variable btnLogout seperti berikut :


Jika fungsi logout berhasil maka halaman akan tertutup dan diarahkan kembali ke halaman login seperti berikut :

Rainbow rest api

Karena project pada tutorial ini terhubung ke Rainbow Developer Sandboxed Platform, pastikan saat mencobanya kamu menggunakan akun Sandboxed Rainbow yang telah aktif seperti berikut :

Rainbow android playground for developers

Demikian tutorial membuat Halaman Login dan Update User Info Rainbow Android Apps.

Semoga artikel ini dapat membantu anda. Jika ada pertanyaan, silakan tinggalkan komentar di halaman blog ini dan kami akan membantu anda.

 

Mau belajar lebih dalam mengenai Android? Daftar ke kelas Menjadi Android Developer Expert di https://www.dicoding.com/academies/14

Simak juga informasi mengenai Rainbow Android berikut:

“Cara Integrasi Rainbow API pada Android Apps” https://www.dicoding.com/blog/cara-integrasi-rainbow-api-pada-android-apps/

“Menampilkan List Kontak Rainbow Pada Android Apps” https://www.dicoding.com/blog/menampilkan-list-kontak-rainbow-pada-android-apps/

“Indonesia Diaspora Connect: Karya Pemenang Dicoding Challenge: ALE Hackathon 2018”  https://www.dicoding.com/blog/indonesia-diaspora-connect-karya-pemenang-dicoding-challenge-ale-hackathon-2018/


Belajar Pemrograman Gratis
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.