Azure Mobile App merupakan layanan mobile backend-as-a-service (MbaaS) yang memudahkan pengembang aplikasi mobile membuat sebuah aplikasi yang memiliki kemampuan penyimpanan data dan otentikasi tanpa membutuhkan proses coding disisi backend. Azure Mobile App dapat digunakan mulai untuk kebutuhan prototyping hingga pengembangan aplikasi level production karena Azure Mobile App merupakan salah satu produk di atas layanan Azure, yang memiliki availability dan reliability yang tinggi.

Pada artikel ini ini, kita akan membahas mengenai bagaimana memanfaatkan Azure Mobile App untuk membuat aplikasi Android. Fitur yang akan kita gunakan adalah Easy Table, Offline dan Authentication.

Hal yang Perlu Dipersiapkan

Software yang diperlukan untuk

💻 Mulai Belajar Pemrograman

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

Daftar Sekarang

Azure Mobile Android SDK
Akun Azure yang aktif
Android Studio

Langkah 1 – Membuat Azure Mobile App Backend

Masuk ke halaman Azure portal : http://portal.azure.com
Pilih Create a resource
Pada search box, ketikkan Mobile Apps
Pada halaman pencarian, pilih Mobile Apps Quickstart dan pilih Create
Pada menu Resource Group, pilih Create a new one (buat resource Mobile Apps dengan nama yang sama dengan nama Aplikasi).Notes : App name tidak boleh memiliki nama yang sama. Gunakan nama yang cukup unik, beri nama Resource Group dengan nama yang sama (centang opsi Create new). Jika Anda belum memiliki App Service plan, buat dengan nama yang sama dengan nama App.
Pilh Create.

Langkah 2- Konfigurasi Backend

Pada tahap ini kita akan melakukan konfigurasi Backend. Disebut konfigurasi, karena kita tidak akan melakukan proses coding melainkan melakukan perubahan metadata dari Azure Mobile App yang sudah dibuat.
Pilih Azure Mobile App dengan mengklik tombol App Service yang sudah dibuat pada langkah sebelumnya
Pilih Quickstart dan pilih platform yang dinginkan untuk pengembangan, dalam hal ini adalah Android.
Secara default, sebuah database SQLite sudah tersedia sehingga bisa langsung digunakan dan sebuah tabel dengan nama TodoItem secara otomatis dibuat oleh sistem.
Pilih Create a New App dan pilih Download.

Langkah 3 – Membuka Aplikasi Android pada Android Studio

Unzip Project yang sudah di download dan buka project menggunakan Android Studio.
Pilih Run “app” untuk mengkompilasi dan menjalankan aplikasi di Android simulator/device
Pada aplikasi, masukkan informasi todo seperti “Puasa ramadhan”, “Membuat artikel” lalu pilih tombol Add. Aplikasi akan mengirimkan sebuah POST request ke Azure Mobile App yang sudah di deploy sebelumnya. Azure Mobiel App akan melakukan proses entry data ke tabe TodoItem dan mengembalikan informasi data yang sudah tersimpan ke aplikasi mobile. Dan aplikasi akan menampilkan data ini pada sebuah list.

Langkah 4 – Mempelajari Skema Pada Azure Mobile App

Buka kembali Portal Azure, pilih Azure Mobile App yang sudah dibuat dan klik Easy tables pada bagian mobile.
Perhatikan terdapat sebuah tabel dengan nama todoitem. Klik todoitem dan lihat skema tabel yang dimiliki.
Saat ini belum terdapat data. Untuk melihat skema tabel, klik Manage schema pada bar bagian atas.
Terlihat komposisi dari tabel, berisikan nama, tipe dan apakah kolom tersebut digunakan sebagai index. Tabel ini dibuat dengan GUI yang dimiliki Azure portal. Ketika tabel sudah berhasil dibuat,secara otomatis, REST API untuk membuat aplikasi mobile terbuat.

Langkah 5 – Menggunakan Fitur Offline

Pada bagian ini, kita akan menambahkan fitur sinkronisasi offline pada aplikasi Android. Fitur sinkronisasi secara otomatis akan menyimpan data di device pada saat internet tidak tersedia dan melakukan pengiriman data ketika internet sudah tersedia.

Buka kembali Portal Azure, pilih Azure Mobile App yang sudah dibuat dan klik Easy tables pada bagian mobile.
Buka java dan hilangkan komentar pada definisi mTodoTabel sehingga fungsi sinkronisasi dapat digunakan.
Pada fungsi onCreate, hilangkan komentar pada inisialisasi fungsi mTodoTabel.

Menjadi
Pada fungsi refreshItemsFromTable hilangkan komentar pada fungsi results.

Menjadi
Berikan komentar pada fungsi refreshItemsFrommobileServiceTable
Hilangkan komentar pada fungsi refreshItemsFromMobileServiceTableSyncTable

Menjadi
Hilangkan komentar pada fungsi sync

Menjadi
Penambahan fitur sinkronisasi selesai.

Langkah 6 – Menguji Fitur Sinkronisasi

Aktifkan mode Airpland, untuk membuat skenario offline berjalan
Tambahkan beberapa item Todo dan cek beberapa hingga menjadi komplit. Matikan aplikasi untuk memastikan data telah tersimpan. Data ini baru tersimpan di perangkat lokal saja.
Lihat isi dari tabel TodoItem di Azure Mobile App kita pada portal Azure. Seharusnya isi tabel sama dengan data pada device/simulator sebelum menambahkan todo baru untuk menguji fitur sinkronisasi.
Nyalakan wifi/internet pada device/simulator. Lalu klik tombol Refresh.
Buka kembali tabel TodoItem di Azure Portal. Perhatikan data sudah bertambah karena fitur sinkronisasi mendorong data dari device ke Azure Mobile app.

Azure Mobile App dapat dilengkapi dengan fitur social login, dimana pengguna hanya membutuhkan login menggunakan aplikasi autentikasi yang sudah populer seperti Facebook, Google, Twitter dan Microsoft. Dengan keunggulan ini, pengembang tidak perlu membuat sistem autentikasi khusus pada saat mengembangkan aplikasi.

Langkah 7 – Registrasi Aplikasi di Twitter

Pada artikel ini kita akan menggunakan Twitter Login. Untuk membuat integrasi ini, kita harus memiliki aplikasi pada website Twitter Developer https://apps.twitter.com/.
Buat sebuah aplikasi baru dengan mengklik tombol Create New App.
Masukkan Nama dan Deskripsi dari aplikasi. Untuk isian Website gunakan URL dari Azure Mobile App yang ada pada portal Azure. Untuk melihat URL Azure Mobile App, klik menu Ambil nilai pada kolom URL.
Pada Isian Callbak URLs, gunakan nilai URL dan beri akhiran : .auth/login/twitter/callback. Pada contoh artikel ini isian Callback URLs bernilai : https://dicodingazure.azurewebsites.net/.auth/login/twitter/callback. Pastikan menggunakan skema https.
Klik tab Settings dan cek Allow this application to besed to sign in with Twitter, lalu pilih Update Settings.
Pilih tab Keys and Access Token. Catat nilai Consumer Key (API Key) dan Consumer Secret (API Secret).

Langkah 8 – Tambahkan Informasi Twitter pada Azure Mobile App

Buka Azure Portal dan pilih Settings dan Authentication/Authorization
Jika fitur tersebut mati, nyalakan dengan mengklik toggle menjadi On.
Pilih Twitter, dan salin informasi App ID dan App Secret dari langkah sebelumnya. Lalu pilih OK.
Terakhir, atur Aplikasi sehingga hanya menerima aksi atau data setelah login menggunakan Twitter.
Pilih Save.
Untuk melakukan pengaturan pada situs yang lain bisa menggunakan pranala berikut ini :

Langkah 9 – Menambahkan External Redirect URLs

Fitur social login membutuhkan pengembang mendefinisikan sebuah skema URL untuk aplikasi. Dengan ini, sistem memungkinkan melakukan redirect ketika proses otentikasi selesai.

Buka Azure Portal
Pilih menu Authentication Authorization
Pada bagian Allowed External Redirect URLs, isi dengan skema URL dengan format appname ://easyauth.callback. Pada contoh akan digunakan skema dcd://easyauth.callback.
Klik Save.

Langkah 10 – Memberi Batasan Akses Pada Pengguna

Pada dasarnya, API pada Azure Mobile App dapat diakses tanpa melakukan otentikasi. Untuk menjalankan fitur social login, kita perlu membatasi akses kepada Tabel dan API kita.

Pada konfigurasi Azure Mobile App pilih Easy Tables dan klik tabel TodoItem.
Klik Change Permission dan untuk seluruh tabel pilih Authenticated acccess only
Pada Android Studio, jalankan kembali aplikasi. Perhatikan bahwa aplikasi akan menerima kode status 401 (Unauthorized) yang artinya aplikasi tidak memilik hak akses terhadap data.

Menambahkan Fitur Otentikasi Pada Aplikasi Mobile

Buka proyek pada Android Studio
Pada Project Explorer, buka java dan tambahkan ekspresi import untuk mengakses fungsi-fungsi pada kelas atau package tersebut.
Tambahkan fungsi berikut ini pada kelas
Pada onCreate tambahkan baris kode berikut ini setelah fungsi yang menginisialisasi MobileServiceClient. Kode ini akan menginsialisasi proses otentikasi.
Pindahkan sisa kode setelah baris authenticate() menjadi sebuah fungsi baru createTable
Tambahkan proses redirection dengan skema URL aplikasi pada xml. Pada contoh artikel ini akan kita gunakan skema dcd://

<intent-filter>

<data android:scheme="dcd://"

android:host="easyauth.callback"/>

</intent-filter>

</activity>

Tambahkan redirectUiScheme pada gradle di aplikasi Android

android {

buildTypes {

release {

// ...

manifestPlaceholders = ['redirectUriScheme': 'dcd://easyauth.callback']

}

debug {