Cara Menyimpan Database Menggunakan Easy Table Azure !

Ditulis oleh alhudaghifari, dipublikasi pada 07 Aug 2017 dalam kategori Tutorial
Cara Menyimpan Database Menggunakan Easy Table Azure ! - CodePolitan.com

Halo para codepolitanian !
Azure Mobile App sendiri merupakan salah satu layanan yang disediakan oleh Microsoft Azure yang dikhususkan untuk mendukung aplikasi mobile. Dengan menggunakan azure mobile app maka pengguna tidak perlu membuat sendiri backend services secara manual. Fitur yang ada di Azure Mobile App yaitu Easy Table, Autentikasi, Push Services, dan juga kemampuan sinkronisasi secara offline (offline data sync).

1. Membuat Layanan Azure Mobile App

Mobile Apps Quickstart

Untuk ngebuat layanan ini berikut nih tutorialnya

  1. Buka portal Azure.
  2. Login dulu dengan akun masing2.
  3. Klik tombol plus "+" warna hijau di sidebar kiri, lalu ketikkan "Mobile App" pada search bar nya.
    tutono3
  4. Tekan enter, lalu pilih yang Mobile App Quicstart setelah itu tekan tombol create
    mobileapp
  5. Beri nama -> tekan app service plan/location.
  6. Create new App Service Plan. Beri nama service plan, dan pilih location yang sesuai dengan posisi kita.
    a
  7. Selanjutnya tekan tombol create dan nanti proses pembuatan akan berlangsung cukup lama.
    Sehingga disarankan memakai koneksi internet yang cepat.
  8. Jika sudah maka akan mendapatkan notifikasi telah selesai
    b
  9. Setelah selesai kemudian kita bisa gunain app tersebut dengan URL yang tertera pada laman Overview untuk menyediakan layanan buat mobile app kita.

2. Membuat database azure dengan Easy Table

Pada bagian ini saya mau jelasin tentang cara menyimpan database menggunakan Easy Table nya Microsoft Azure. Oke langsung saja.

  1. Buka portal.azure.com
  2. Masuk ke layanan yang telah kita buat. Pada tutorial ini layanan saya beri nama ModulKeren.
  3. Pada tab bagian kiri pilih Easy Table
    easytable
  4. klik add
  5. Beri nama, pada tutorial ini saya ingin membuat tabel mahasiswa.
    Kemudian klik OK.
  6. Setelah terbuat lalu klik tabel yang sudah kita buat tadi. Kemudian untuk menambahkan column kita tekan pilihan "Manage Schema".
  7. Terdapat beberapa column yang telah dibuat secara otomatis oleh azure. Kita tidak perlu mengubah column tersebut, cukup tekan "Add a column" saja untuk menambahkan column. Pada tutorial ini saya menambahkan column baru yaitu nim dan nama mahasiswa dengan tipe string.
    schema
  8. Setelah terbuat kemudian kita bisa kembali ke menu Overview. Atau jika ingin melihat perubahan column maka ketika tadi masih berada di editor table kita bisa menekan tombol refresh (di sebelah tombol manage schema) untuk melihat penambahan column.
  9. Di menu overview kita bisa melihat URL tempat kita bekerja dengan table tersebut. Pada tutorial ini link modul tadi yaitu http://modulkeren.azurewebsites.net

3. Membuat Xamarin Forms Project melalui Visual Studio 2017

  1. Buka Visual Studio (saya memakai Visual Studio 2017)

  2. Klik new project, pilih Cross Platform App, beri nama dan tentukan lokasi penyimpanan, kemudian klik OK.
    Proses create new project ini akan memakan waktu agak lama sehingga kita harus sabar menunggu terlebih dahulu sehingga proses selesai.
    vs

  3. Setelah proses selesai kemudian tambahkan Microsoft.Azure.Mobile.Client pada project.
    Klik kanan Solution 'NamaProjectmu' -> Manage NuGet Packages for Solution.
    search Microsoft.Azure.Mobile.Client pada tab Browse, kemudian klik dan centang semua project. Setelah itu install.
    Jangan lupa proses ini membutuhkan koneksi Internet untuk mendownload data.
    pastikan bahwa pc / laptop kalian sudah tersambung dengan internet.
    mobile azure client

  4. Jika muncul kotak dialog kemudian klik Ok dan I Accept.

  5. Tambahkan class Mahasiswa.cs
    using System;
    using Microsoft.WindowsAzure.MobileServices;
    using Newtonsoft.Json;

    namespace DataMahasiswa
    {
         public class Mahasiswa
        {
                private string _id;
                [JsonProperty(PropertyName = "id")]
                public string Id
                {
                    get { return _id; }
                    set { _id = value; }
                }
    
                private string _nim;
                [JsonProperty(PropertyName = "nim")]
                public string Nim
                {
                    get { return _nim; }
                    set { _nim = value; }
                }
    
                private string _namamahasiswa;
                [JsonProperty(PropertyName = "namamahasiswa")]
                public string NamaMahasiswa
                {
                    get { return _namamahasiswa; }
                    set { _namamahasiswa = value; }
                }
    
                [Version]
                public string Version { get; set; }
         }
    }
  6. Tambahkan class Constant.cs . Kelas ini berfungsi untuk menyimpan link dari url azure milik kita. Kenapa harus dipisahkan dalam kelas tersendiri ? Hal ini bertujuan untuk memudahkan pengembang dalam melakukan maintenance apabila ada perubahan alamat.
    namespace DataMahasiswa
    {
    public static class Constant
    {
    public static string ApplicationURL = @"http://modulkeren.azurewebsites.net";
    }
    }

  7. Tambahkan class Manager.cs
    using System;
    using System.Collections.Generic;
    using System.Threading.Tasks;
    using Microsoft.WindowsAzure.MobileServices;
    using System.Diagnostics;
    using System.Collections.ObjectModel;

    namespace DataMahasiswa
    {
        public class Manager
        {
                private IMobileServiceTable<Mahasiswa> _mahasiswaTable;
    
                public Manager()
                {
                        var client = new MobileServiceClient(Constant.ApplicationURL);
                        _mahasiswaTable = client.GetTable<Mahasiswa>();
                }
    
                public async Task<ObservableCollection<Mahasiswa>> GetMhsAsync()
                {
                        try
                        {
                                IEnumerable<Mahasiswa> mahasiswas = await _mahasiswaTable.ToEnumerableAsync();
                                return new ObservableCollection<Mahasiswa>(mahasiswas);
                        }
                        catch (MobileServiceInvalidOperationException msioe)
                        {
                                Debug.WriteLine("@Invalid sync operation: {0}", msioe.Message);
                        }
                        catch (Exception e)
                        {
                                Debug.WriteLine(@"Sync error: {0}", e.Message);
                        }
                        return null;
                }
    
                public async Task SaveTaskAsync(Mahasiswa mhs)
                {
                        if (mhs.Id == null)
                        {
                                await _mahasiswaTable.InsertAsync(mhs);
                        }
                        else
                        {
                                await _mahasiswaTable.UpdateAsync(mhs);
                        }
                }
        }
    }
  8. Tambahkan class dengan nama ActivityIndicatorScope.cs . Class ini akan digunakan untuk menampilkan activity indicator ketika sedang mengambil data services.
    using System;
    using System.Threading.Tasks;
    using Xamarin.Forms;

    namespace SampleMobileAzure
    {
        public class ActivityIndicatorScope : IDisposable
            {
                private bool _showIndicator;
                private ActivityIndicator _indicator;
                private Task _indicatorDelay;
    
                public ActivityIndicatorScope(ActivityIndicator indicator, bool showIndicator)
                {
                        _indicator = indicator;
                        _showIndicator = showIndicator;
    
                        if (showIndicator)
                        {
                                _indicatorDelay = Task.Delay(2000);
                                SetIndicatorActivity(true);
                        }
                        else
                        {
                                _indicatorDelay = Task.FromResult(0);
                        }
                }
                private void SetIndicatorActivity(bool isActive)
                {
                        _indicator.IsVisible = isActive;
                        _indicator.IsRunning = isActive;
                }
    
                public void Dispose()
                {
                        if (_showIndicator)
                        {
                                _indicatorDelay.ContinueWith(t => SetIndicatorActivity(false),
                                    TaskScheduler.FromCurrentSynchronizationContext());
                        }
                }
        }
    }
  9. Tambahkan file xaml baru dengan nama MahasiswaPage.xaml . Page ini rencananya akan digunakan untuk menampilkan data mahasiswa
    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="DataMahasiswa.MahasiswaPage">

  10. Tambahkan juga code untuk MahasiswaPage.xaml.cs . Ini merupakan "back-end" dari page tadi.
    Jika muncul tanda merah pada TambahMhsPage maka tenang saja karena page tersebut insya Allah akan dibuat pada point selanjutnya.

    using System;
    using System.Threading.Tasks;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    namespace DataMahasiswa
    {
            [XamlCompilation(XamlCompilationOptions.Compile)]
            public partial class MahasiswaPage : ContentPage
        {
    
                private Manager _mahasiswaManager = new Manager();
    
                public MahasiswaPage ()
                {
                        InitializeComponent ();
                }       
                protected override async void OnAppearing()
                {
                        base.OnAppearing();
                        await RefreshItems(true);
                }
    
                private async Task RefreshItems(bool showActivityIndicator)
                {
                        using (var scope = new ActivityIndicatorScope(syncIndicator, showActivityIndicator))
                        {
                                listViewBarang.ItemsSource = await _mahasiswaManager.GetMhsAsync();
                        }
                }
    
                private async void ListView_OnItemTapped(object sender, ItemTappedEventArgs e)
                {
                        TambahMhsPage tambahPage = new TambahMhsPage();
    
                        Mahasiswa item = (Mahasiswa)e.Item;
                        tambahPage.BindingContext = item;
                        ((ListView)sender).SelectedItem = null;
                        await Navigation.PushAsync(tambahPage);
                }
    
                private async void MenuItem_OnClicked(object sender, EventArgs e)
                {
                        TambahMhsPage tambahPage = new TambahMhsPage(true);
                        await Navigation.PushAsync(tambahPage);
                }
    
                private async void ListViewBarang_OnRefreshing(object sender, EventArgs e)
                {
                        var list = (ListView)sender;
                        Exception error = null;
                        try
                        {
                                await RefreshItems(false);
                        }
                        catch (Exception ex)
                        {
                                error = ex;
                        }
                        finally
                        {
                                list.EndRefresh();
                        }
    
                        if (error != null)
                        {
                                await DisplayAlert("Refresh Error !", "Couldn't refresh data (" + error.Message + ")", "OK");
                        }
                }
        }
    }
  11. Tambahkan file xaml dengan nama TambahMhsPage.xaml . Page ini digunakan untuk menampilkan, menambah, serta mengubah data.
    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="DataMahasiswa.TambahMhsPage">

  12. Kemudian tambahkan juga kode pada TambahMhsPage.xaml.cs
    using System;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;

        namespace DataMahasiswa
        {
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class TambahMhsPage : ContentPage
        {
                private Manager _mhsManager = new Manager();
                private bool _isNew = false;
    
                public TambahMhsPage()
                {
                        InitializeComponent();
                }
    
                private void ClearAll()
                {
                        foreach (var ctr in gvMhs.Children)
                        {
                                if (ctr is Entry)
                                {
                                        var item = ctr as Entry;
                                        item.Text = string.Empty;
                                }
                        }
                }
    
                public TambahMhsPage(bool isNew)
                {
                        InitializeComponent();
                        _isNew = isNew;
                        if (_isNew)
                        {
                                txtKodeMhs.Focus();
                        }
                }
    
                private async void BtnSave_OnClicked(object sender, EventArgs e)
                {
                        if (_isNew)
                        {
                                var barang = new Mahasiswa()
                                {
                                        Nim = txtKodeMhs.Text,
                                        NamaMahasiswa= txtNamaMhs.Text
                                };
                                await _mhsManager.SaveTaskAsync(barang);
                                ClearAll();
                                await DisplayAlert("Keterangan", "Data Barang berhasil ditambah !", "OK");
                        }
                        else
                        {
                                var barang = (Mahasiswa)this.BindingContext;
                                await _mhsManager.SaveTaskAsync(barang);
                                await DisplayAlert("Keterangan", "Data Barang berhasil diupdate !", "OK");
                        }
                }
            }
    }
  13. Oke untuk langkah terakhir selanjutnya cukup buka pada App.xaml.cs kemudian diedit untuk dijadikan seperti ini kodenya

        using Xamarin.Forms;
    
        namespace DataMahasiswa
        {
        public partial class App : Application
        {
                public App ()
                {
                        InitializeComponent();
    
                        MainPage = new NavigationPage(new MahasiswaPage());
                }
        }
        }

Hasil

Untuk menjalankannya anda bisa menggunakan android device, emulator android, ataupun jika ingin lebih mudah maka tinggal set as start-up project pada klik kanan solution, kemudian ubah menjadi UWP.
Disini saya menggunakan UWP untuk menjalankan program tersebut.
hasil1

gambar diatas belum muncul data apapun karena kita baru pertama membuat. Kemudian kita bisa menambahkan data mahasiswa dengan menekan tombol + pada window tersebut.
Disini saya akan menambahkan data

hasil2

Kemudian jika proses berhasil maka akan muncul notifikasi sebagai berikut

hasil3

Jika melihat di halaman utama app kita juga sudah muncul data nya. Dan yang lebih menarik juga data kita sudah tersimpan di dalam Easy Table Microsoft Azure.

hasil4

Oke demikian tutorial dari Farhan mengenai Cara Menyimpan Database Menggunakan Easy Table Azure !
Terimakasih atas perhatiannya :))

--
Ahmad Farhan Ghifari
Teknik Informatika ITB 2014
http://diaryinformatika.blogspot.co.id



Berlangganan Informasi CodePolitan Melalui Email

Jangan sampai kamu melewatkan informasi penting tentang pemrograman dan teknologi! Kamu bisa berlangganan Newsletter CodePolitan dengan cara mengisi formulir di samping.