Komunitas Cloud Indonesia

Membuat Universal Windows App Memanfaatkan Azure Mobile Service

Penulis :   |   November 21, 2014

Salam hangat untuk pembaca setia CloudIndonesiA, kali ini saya akan membahas mengenai bagaimana menambahkan atau memodifikasi aplikasi yang sudah ada pada Management Portal untuk digunakan sebagai aplikasi mobile service kita. Tutorial ini merupakan lanjutan tutorial sebelumnya yang berjudul Memulai Microsoft Azure Mobile Service. Pada tutorial sebelumnya, kita telah membuat mobile service yang akan digunakan pada aplikasi kita. Nantinya, mobile service tersebut akan dijadikan sebagai wadah menyimpan, mengolah dan mengambil data yang digunakan pada aplikasi.

Sekarang kita akan membuat universal windows app yang terkoneksi dengan mobile services kita. Ikuti langkah-langkah berikut:

1.  Pada Management Portal, klik pada bagian Mobile Services lalu pilih mobile services kita.

2.  Pada tab quickstart,  klik Windows di sebelah kanan Choose Platform dan buka Create a new Windows Store app.

windows phone application

Gambar ini menampilkan 3 langkah mudah untuk membuat aplikasi Windows Store yang terkoneksi dengan mobile service kita.

windows phone application

3.  Jika Anda belum melakukannya, unduh dan install Visual Studio Professional 2013 di komputer Anda.

4.  Di bagian bawah Download and run your app and service locally, pilih bahasa untuk aplikasi Anda, lalu klik Download.

Proses ini akan mengunduh sebuah solution yang berisi mobile service dan aplikasi todo list sederhana yang terkoneksi dengan mobile service tersebut. Simpan file terkompresi tersebut di komputer Anda.

Uji aplikasi Anda untuk mengakses mobile service lokal di komputer Anda

Projek mobile service yang Anda unduh memungkinkan Anda untuk menjalankan mobile service Anda secara lokal. Dengan ini, proses debugging akan lebih mudah dilakukan sebelum di-publish ke Azure.

Pada bagian ini, Kita akan menguji aplikasi kita secara lokal. Ikuti langkah-langkah berikut:

1.  Cari file terkompresi yang Anda simpan tadi, buka file tersebut lalu jalankan file solution di Visual Studio Anda.

2.  Tekan tombol F5 pada keyboard untuk rebuild projek tersebut dan sekaligus menjalankan aplikasi kita secara lokal.

mobile-create (1)

Halaman web akan secara otomatis tampil pada browser Anda untuk menandakan bahwa mobile service kita telah berhasil dijalankan.

3.  Pada bagian Solution Explorer di Visual Studio Anda, klik kanan pada aplikasi klien Anda dan pilih Set as Startup Project lalu tekan tombol F5 untuk rebuild dan menjalankan aplikasi Anda.

4.  Pada aplikasi kita, ketik sembarang teks pada Insert a ToDoItem, lalu klik Save.

Proses ini mengirimkan request POST ke layanan mobile lokal Anda. Data dari request dimasukkan ke dalam tabel TodoItem. Item yang disimpan dalam tabel dikembalikan oleh mobile servie, dan data ditampilkan dalam kolom kedua pada aplikasi.

Publish mobile service Anda

Setelah kita uji aplikasi kita secara lokal, tahapan terakhir pada aplikasi ini yaitu mem-publish aplikasi kita ke Azure dan menguji aplikasi kita secara live. Ikuti tahapan berikut:

1.  Pada Solution Explorer, klik kanan pada projek aplikasi Anda, lalu pilih Publish, lalu pada bagian Publish Web klik Azure Mobile Services

mobile-create (1)

2.  Sign ini dengan menggunakan akun Azure Anda, pilih mobile service Anda pada Existing Mobile Services, lalu klik OK

mobile-create (1)

3.  Klik Validate Connection untuk memverifikasi konfigurasi Anda, lalu klik Publish.

mobile-create (1)

Setelah proses publish sukses, Anda akan melihat  kembali halaman konfirmasi bahwa mobile service Anda berhasil jalan. Namun kali ini sudah bukan di lokal.

4.  Pada Shared Project, buka file App.xaml.cs, lalu cari bagian kode yang membuat MobileServiceClient, comment bagian yang menandakan bahwa service ini dibuat di localhost dan uncomment bagian kode yang menandkana bahwa service ini dibuat dengan URL remote. Kode akhir bisa dilihat sebagai berikut:

public static MobileServiceClient MobileService = new MobileServiceClient(
            "https://todolist.azure-mobile.net/",
            "XXXX-APPLICATION-KEY-XXXXX");

Uji aplikasi Anda untuk mengakses mobile service kita pada Azure

Karena sekarang aplikasi Anda terpublish di Azure, kita dapat menjalankan aplikasi Anda menggunakan Azure sebagai tempat menyimpan file. Ikuti langkah-langkah berikut:

1.  Tekan tombol F5 pada keyboard untuk menjalankan aplikasi Anda.

2.  Pada aplikasi, ketikan sembarang teks pada Insert a TodoItem lalu klik Save

mobile-create (1)

3.  Stop debugging dan ganti default startup project Anda pada universal Windows solution ke windows phone dan tekan kembali F5.

mobile-create (1)

Perhatikan bahwa data yang disimpan dari langkah sebelumnya telah dimuat dari mobile service pada saat app dijankan.

Sekarang kita telah berhasil membuat aplikasi Universal Windows yang terkoneksi dengan layanan mobile service dari Azure. Selamat mencoba 🙂

  1. ACCI – Asosiasi Cloud Computing Indonesia
  2. Lowongan .NET Developer
  3. Lowongan Android Developer
  4. Lowongan Java Developer
  5. Jakarta Cloud Computing Meetup 09.2016

Penulis :

Komentar

One thought on “Membuat Universal Windows App Memanfaatkan Azure Mobile Service

Leave a Reply

Your email address will not be published. Required fields are marked *