eBook Getting Started Azure Mobile Services and Windows 8

Daftar Isi

Bab 1 – Pengantar Windows 8 & Azure Mobile Services..................................................................... 1

Perkembangan Teknologi Mobile................................................................................................... 1

Menggunakan Touch pada Windows Store App ............................................................................. 2

Microsoft Azure ............................................................................................................................. 2

Azure Mobile Services ................................................................................................................... 3

Apa yang harus dipersiapkan? ....................................................................................................... 3

BAB 2 - Membuat Aplikasi Windows Store Pertama Anda .................................................................. 4

Membuat Aplikasi Pertama untuk ambil Gambar ........................................................................... 5

Mendeklarasikan Kapabilitas Aplikasi Anda .................................................................................... 6

Membuat Halaman HTML .............................................................................................................. 7

Menambahkan Style Sheet ............................................................................................................ 7

Menambahkan Javascript File ........................................................................................................ 8

WinJS dan JQuery .......................................................................................................................... 9

Menggunakan JQuery pada Aplikasi Windows Store ................................................................ 10

Bab 3 – Pengenalan WinJS ............................................................................................................... 12

Class, Object, dan Inheritance pada WinJS ................................................................................... 12

ECMAScript5 ............................................................................................................................ 12

Membuat Class ........................................................................................................................ 12

Inheritance .............................................................................................................................. 13

Mixins ...................................................................................................................................... 14

Penggunaan Namespace pada WinJS ........................................................................................... 16

Membuat Namespace di WinJS ................................................................................................ 16

Module Pattern pada WinJS......................................................................................................... 17

Asynchronous Programming dengan Promises ............................................................................ 19

Menggunakan Promises di Windows Store .............................................................................. 19

Menggunakan then() atau done() ? .......................................................................................... 20

Membuat Promises.................................................................................................................. 21

Mengambil DOM Elemen dengan Query Selector ........................................................................ 21

Contoh penggunaan query pada WinJS .................................................................................... 22

Mengambil Elemen Tunggal menggunakan method WinJS.Utilities.id() .................................... 22

Menggunakan Method WinJS.Utilities.children()...................................................................... 23

Pemangilan AJAX dengan fungsi xhr() .......................................................................................... 23

Bab 4- Observable, Binding, dan Template....................................................................................... 25

Observable Pattern ...................................................................................................................... 25

Membuat Observable Object ................................................................................................... 25

Observable dengan Objek Kompleks ........................................................................................ 26

Notifikasi yang Bertumpuk ....................................................................................................... 26

Melewatkan Notifikasi ............................................................................................................. 28

Bekerja dengan Koleksi Observable ............................................................................................. 28

Declarative Data Binding.............................................................................................................. 30

Contoh Sederhana Declarative Data Binding ............................................................................ 30

Declarative Data Binding dan Observable .................................................................................... 32

Contoh Declarative Binding dan Observable............................................................................. 32

Contoh Mengambil Data dari Form .......................................................................................... 32

Contoh Data Binding menggunakan Navigation Template ........................................................ 34

Contoh Declarative Binding dan WinJS Control ........................................................................ 36

Declarative Binding dan Binding Converter .............................................................................. 37

Menggunakan Template .............................................................................................................. 39

Membuat Simple Template ...................................................................................................... 39

Bab 5 - Windows Azure Mobile Services .......................................................................................... 42

Memulai Membuat Azure Mobile Services................................................................................... 42

Windows Store Client .................................................................................................................. 46

Mengakses REST Services dari Table di Mobile Services ............................................................... 51

Menambahkan Data dan Table Baru pada Azure Mobile Services ................................................ 54

Menambahkan Script Pada Proses CRUD ..................................................................................... 59

Menggunakan Objek Request pada Script .................................................................................... 61

Menambahkan Field baru dengan Script ...................................................................................... 63

Menggunakan Query Object pada SCRIPT .................................................................................... 65

Bab 6 -Identity dengan Azure Mobile Services ................................................................................. 67

Membuat Twitter Identity Provider ............................................................................................. 67

Membuat Facebook Identity Provider .......................................................................................... 70

Menambahkan Restriction Permission pada Table ....................................................................... 71

Bab 7 - Menggunakan Push Notification .......................................................................................... 73

Tentang Penulis

Penulis menyelesaikan pendidikan S1 jurusan Teknik

Informatika di Universitas Kristen Duta Wacana,

kemudian melanjutkan pendidikan S2 di jurusan Ilmu

Komputer Universitas Gajah Mada.

Saat ini penulis bekerja sebagai dosen, konsultan dan

professional trainer. Selain mengajar, menulis buku dan

menjadi konsultan, penulis juga aktif sebagai pembicara

seminar, kuliah umum dan memberikan training dengan topik seputar teknologi terbaru terutama

yang berhubungan dengan teknologi web, cloud dan aplikasi mobile.

Penulis juga merupakan founder dari Actual Training (http://actual-training.com) dan Cloudemia

(http://cloudemia.co). Actual Training menyediakan jasa pelatihan professional di bidang Teknologi

Informasi yang berlokasi di Yogyakarta. Cloudemia merupakan portal pembelajaran online berupa

video tutorial yang menyediakan konten pembelajaran terbaik seputar teknologi informasi

berbahasa indonesia.

Saat ini penulis aktif di komunitas MUGI (Microsoft User Group). Penulis juga memiliki beberapa

sertifikasi professional seperti MCTS (Microsoft Certified Technology Specialist), MCPD (Microsoft

Certified Professional Developer), dan MCT (Microsoft Certified Trainer). Penulis juga pernah

mendapatkan penghargaan Microsoft MVP (Most Valuable Professional) pada tahun 2009 sd 2013.

Untuk menghubungi penulis anda dapat mengirimkan email ke [email protected]

Anda dapat mengunjungi blog penulis di http://mugi.or.id/blogs/erick dan website penulis di

http://actual-training.com.

http://actual-training.com/

http://cloudemia.co/

mailto:[email protected]

http://mugi.or.id/blogs/erick

http://actual-training.com/

Kata Pengantar

Penulis mendedikasikan buku ini kepada Komunitas Microsoft User Group Indonesia yang selalu

memberi dukungan dan dorongan kepada penulis untuk terus memiliki semangat untuk berkarya

dan berbagi. Tidak lupa penulis juga mengucapkan terima kasih kepada Microsoft Indonesia atas

dukungan dan dedikasinya pada komunitas MUGI sehingga kami bisa selalu terus berkarya.

Yogyakarta, 2 Maret 2014

Erick Kurniawan

Oleh : Erick Kurniawan ([email protected])

1

Bab 1 – Pengantar Windows 8 & Azure Mobile Services

Perkembangan Teknologi Mobile

Perkembangan teknologi mobile saat ini sudah demikian pesatnya, ini dapat dilihat dari

perubahan perilaku pengguna komputer yang sebelumnya lebih senang untuk bekerja

dengan perangkat Desktop PC, Netbook, atau Laptop beralih ke penggunaan Smartphone

dan Tablet sebagai alternative yang lebih diminati.

Aktivitas yang dapat dikerjakan pada smartphone atau tablet yaitu untuk pekerjaan yang

sifatnya tidak terlalu kompleks sepert membaca dan menulis email, membaca grafik/spread

sheet, browsing. Selain pekerjaan tersebut kebutuhan multimedia dan entertainment juga

sudah dapat terpenuhi lewat penggunaan smartphone dan tablet seperti menonton film,

membaca buku/majalah, mendengarkan music, dan bermain game. Perangkat seluler yang

dulu hanya digunakan untuk sekedar berkomunikasi lewat sms dan telpon kini sudah

berubah menjadi perangkat komputer canggih yang mempunyai software ekosistem sendiri.

Perangkat ponsel yang sederhana tidak lagi cukup butuh akses internet, browser yang

handal, dukungan multimedia, dan took aplikasi yang menyediakan banyak macam aplikasi.

Ponsel tersebut juga harus mendukung layar sentuh, sensor gerak, GPS, dan anda juga dapat

memberikan perintah lewat suara.

Banyak orang yang berpendapat bahwa kita sudah masuk kedalam jaman “POST PC Era”

dimana orang sudah lebih senang menggunakan perangkat yang sifatnya lebih simple dan

portable daripada menggunakan Desktop PC.

Meskipun demikian Smartphone dan Tablet juga masih memliki berbagai kekurangan, salah

satunya adalah perangkat tersebut tidak dapat melakukan pekerjaan komputasi yang berat

seperti pada Desktop PC atau Laptop pada umumnya.

Disisi lain Laptop atau Desktop PC yang paling mahal dan powerfull juga tidak memiliki

beberapa fitur seperti yang dimiliki oleh Smartphone/Tablet seperti touch input,

geolocation, ambient light sensor, dan accelerometer.

Perangkat mobile (smartphone/tablet) juga sudah terus meningkat performanya dengan

adanya processor dengan 2 bahkan 4 core. Namun perangkat mobile tidak akan mungkin

dapat mengerjakan semua task yang dapat dilakukan oleh Laptop atau Desktop PC.


2

Yang terjadi sekarang adalah perangkat mobile menjadi semakin popular dan pengguna

mulai berharap lebih dari perangkat mereka, tidak hanya sebagai portable komputer biasa

namun juga ringan, handal, berpenampilan stylish, dapat digunakan berjam-jam tanpa perlu

recharge battery, mempunyai performa yang prima, dan yang terutama yaitu dapat selalu

terkoneksi dengan internet.

Kita berharap semua kelebihan yang sudah disebutkan sebelumnya ada pada smartphone

dan tablet. Secara umum fitur-fitur yang dibutuhkan untuk sebuah perangkat yang modern

hampir sama. Perangkat yang modern mendukung layar sentuh dan pengenalan suara,

mempunyai banyak aplikasi pada took aplikasi yang dapat dicari, dibeli, dan diinstall dengan

mudah.

Menggunakan Touch pada Windows Store App

Pada versi windows yang terbaru yaitu Windows 8, Microsoft mencoba untuk membawa

pengalaman penggunaan produk phone mereka (Windows Phone) kedalam Sistem Operasi

baru ini. Awalnya Microsoft memberi nama user experience ini Metro, tetapi kemudian

berubah nama menjadi Windows Store App. Windows 8 ditujukan untuk berbagai macam

hardware seperti desktop PC, Laptop, Tablet, dan Ultrabook. Antarmuka dari Windows 8

secara khusus dioptimalkan untuk perangkat sentuh.

Aplikasi yang dibangun diatas Windows 8 (dulu disebut Metro App namun sekarang lebih

dikenal dengan Windows Store App) menggunakan library baru yang bernama WinRT

(Windows Runtime). Berbeda dengan .NET Framework yang di-manage oleh CLR (Common

Language Runtime), WinRT bersifat native sehingga secara performa lebih cepat dan cocok

untuk aplikasi mobile yang memiliki sumber daya yang terbatas.

Untuk membuat aplikasi di Windows 8 ada dua pilihan yang berbeda secara user experience

yaitu classic desktop dan Windows Store App. Windows Store App atau dulu dikenal sebagai

Metro App mempunyai UI yang sangat jauh berbeda dengan classic Windows UI karena

sudah sangat dioptimalkan untuk penggunaan layar sentuh.

Microsoft Azure

Microsoft sendiri mempunyai platform khusus untuk Cloud Computing bernama Windows Azure.

Sejak bulan maret 2014 Microsoft merubah nama Windows Azure menjadi Microsoft Azure, hal ini


3

disebabkan karena sekarang Microsoft juga mendukung platform lain selain Windows. Microsoft

Azure sekarang banyak juga mendukung teknologi open source seperti Linux, PHP, MySQL, NodeJs

dan masih banyak lagi.

Microsoft Azure sendiri adalah platform komputasi awan / Cloud Computing yang open dan fleksible

yang memungkinkan anda untuk membangun, memasang, dan mengatur aplikasi di seluruh jaringan

global datacenter milik Microsoft. Dengan Microsoft Azure anda dapat membuat aplikasi

menggunakan berbagai macam bahasa pemrograman, tools, dan framework, dan anda juga dapat

mengintegrasikan aplikasi anda di Cloud dengan aplikasi yang anda yg sekarang (on premise).

Azure Mobile Services

Selain Websites, Cloud Services, dan VM, Microsoft Azure juga menyediakan layanan khusus

bernama Azure Mobile Services. Azure Mobile Services sendiri menyediakan solusi lengkap

untuk layanan backend aplikasi mobile. Azure Mobile Services dapat melayani client dengan

platform iOS, Android, Windows Phone, Windows Store, dan HTML. Adapun layanan yang

disediakan oleh Azure Mobile Services adalah :

Penyimpanan Data di Cloud tanpa harus membuat aplikasi backend sendiri, data juga

dapat diakses via REST dengan output format JSON.

Autentikasi : dapat menggunakan akun Facebook, Microsoft, Google, dan Twitter

untuk autentikasi pada saat login.

Push Notification.

Monitor, Alert, Auto Scale.

Scheduler.

Dengan berbagai fitur yang disediakan diatas, azure mobile services sangat cocok digunakan

sebagai backed dari aplikasi mobile atau bahkan aplikasi web SPA (single page application).

Pada ebook ini akan dibahas penggunaan Azure Mobile Services menggunakan Windows

Store App.

Apa yang harus dipersiapkan?

Untuk mengembangkan aplikasi Windows Store ada beberapa kebutuhan dasar yang harus

dipenuhi:

Komputer anda harus terinstall Windows 8.1


4

Visual Studio 2013 Express for Windows Store Visual Studio 2013 Ultimate /

Premium

Ultrabook/Tablet dengan layar sentuh akan lebih optimal meskipun anda dapat

mengemulasikan sentuhan dan sensor menggunakan simulator yang disediakan oleh

Visual Studio 2013.

Untuk membuat aplikasi Windows Store / Metro anda dapat memilih dua teknologi yang

ditawarkan yaitu XAML & C#/C++/VB atau HTML5 & JavaScript. Pemilihan teknologi yang

akan digunakan tergantung backgroud developer. Bagi developer .NET mungkin lebih

terbiasa menggunakan teknologi XAML & C#/VB sama seperti ketika mengembangkan

aplikasi Silverlight atau WPF. Lain halnya dengan developer web yang lebih terbiasa

menggunakan HTML dan JavaScript akan memilih alterntif kedua. Untuk contoh

pengembangan aplikasi Windows Store yang akan dijelaskan pada ebook ini menggunakan

HTML5 dan JavaScript. Alasan penulis menggunakan teknologi HTML5 dan Javascript karena

lebih banyak developer (terutama developer mobile dan web) yang sudah familiar dengan

teknologi ini.

BAB 2 - Membuat Aplikasi Windows Store Pertama Anda

Pada bab ini kita akan mencoba untuk membuat aplikasi Windows Store yang pertama. Kita

tidak akan membuat aplikasi ‘Hello World’ sederhana yang membosankan, tapi kita akan

mencoba membuat sesuatu yang lebih menarik yaitu aplikasi untuk mengambil gambar. Jadi

ketika tombol pada AppBar ditekan maka aplikasi akan mengambil gambar dari kamera,

kemudian menampilkan gambar tersebut pada aplikasi yang kita buat.


5

Membuat Aplikasi Pertama untuk ambil Gambar

Langkah pertama adalah dengan membuat project Windows Store App baru. Buka Visual

Studio 2012 (anda dapat juga menggunakan VS 2012 Express for Windows Store App yang

dapat didownload secara gratis), kemudan pilih File – New – Project.

Kemudian pilih bahasa yaitu Javascript – Windows Store – Blank App, beri nama aplikasi

yang anda buat App1.

Setelah anda membuat project baru maka anda dapat melihat semua file anda pada jendela

Solution Explorer. Anda akan melihat file default.html (pada root folder aplikasi anda), file

default.js pada folder JS, dan default.css pada folder CSS.


6

Mendeklarasikan Kapabilitas Aplikasi Anda

Sebelum lebih lanjut untuk menuliskan kode aplikasi yang pertama kali harus kita lakukan

adalah mendeklarasikan kapabilitas aplikasi. Aplikasi yang kita buat dapat menggunakan

kamera, ini cukup menakutkan bagi pengguna, karena bisa saja aplikasi kita mengambil

gambar secara diam-diam dan mengirimkan gambar tersebut ke server untuk kemudian

digunakan tanpa seijin pengguna. Jika aplikasi mempunyai kapabilitas tertentu (misal pada

aplikasi kita adalah untuk mengambil gambar pada kamera), maka harus memberi tahu dulu

kepada pengguna diawal, sehingga mereka tahu bahwa aplikasi yang mereka gunakan akan

dapat mengakses kamera pada perangkat yang mereka gunakan.

Untuk pengaturan kapabilitas, anda dapat memilih file package.appxmanifest pada solution

explorer. Karena kita akan menggunakan kamera maka anda harus mencontreng pilihan

Webcam pada tab Capabilities.

Ketika anda menjalankan aplikasi (dengan menekan tombol F5), maka aplikasi akan

mengkonfirmasi penggunaan kamera pada pengguna.

7

Membuat Halaman HTML

Ketika anda membuat aplikasi Windows Store dengan JS maka anda akan mendapatkan file

default.html. File ini adalah file yang pertama kali akan dijalankan ketika anda membuaka aplikasi

anda. Kita akan mengkustomisasi file ini sebagai berikut.

<body> <img id="imgGambar" src ="/images/placeholder.png" />  <div id="sampleAppBar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAmbilGambar', label:'Ambil Gambar', icon:'camera', tooltip:'Ambil Gambar'}"></button> </div> </body>

Tambahkan pula gambar dengan nama placeholder.png pada folder images (anda dapat mengambil

gambar ini pada source code yang disediakan di folder Bab2\Begin). Tag img digunakan untuk

menampilkan gambar yang akan diambil dari kamera. Tag div dengan property data-win-control

merupakan contoh penggunaan WinJS control. Tag tersebut digunakan untuk membuat AppBar yang

berisi tombol untuk mengambil gambar dari kamera.

Menambahkan Style Sheet

Selain default.html anda juga memiliki file lain yaitu default.css yang berada pada folder CSS. File ini

berisi aturan style default yang akan menentukan tampilan dari aplikasi Windows Store anda.

Pada aplikasi contoh yang kita buat, modifikasi file default.css sebagai berikut

#imgGambar { display:block; margin:15px auto; border:10px solid white; max-width:90%; max-height:90%; }


8

Menambahkan Javascript File

File selanjutnya yang akan kita modifikasi adalah javascript file dengan nama default.js yang ada di

folder JS. File ini akan berisi kode-kode javascript yang berhubungan dengan kontrol pada halaman

default.html. Delete semua file dan tambahkan file berikut dari awal.

(function () { "use strict"; //membuat alias var tangkap = Windows.Media.Capture; //fungsi ini akan segera dijalankan ketika halaman diload function init() { //memproses semua control WinJS.UI.processAll().done(function () { var cmdAmbilGambar = document.getElementById("cmdAmbilGambar"); var imgGambar = document.getElementById("imgGambar"); //penanganan ketika tombol diklik cmdAmbilGambar.addEventListener("click", function () { var tangkapUI = new tangkap.CameraCaptureUI(); tangkapUI.photoSettings.format = tangkap.CameraCaptureUIPhotoFormat.png; tangkapUI.captureFileAsync(tangkap.CameraCaptureUIMode.photo).done(function (gambar) { if (gambar) { var photoUrl = URL.createObjectURL(gambar); //menampilkan gambar di elemen img imgGambar.src = photoUrl; } }); }); }); } document.addEventListener("DOMContentLoaded", init); })();

Tekan F5 untuk menjalankan aplikasi anda. Anda dapat juga menjalankan aplikasi tersebut pada

emulator. Klik kanan atau swipe kearah atas (jika komputer anda mendukung touch screen) untuk

menampilkan AppBar. Tekan tombol ‘Ambil Gambar’ untuk mengaktifkan kamera, klik pada layar

untuk mengambil gambar dari kamera dan menampilkannya


9

Method init() akan dijalankan ketika event DOMContentLoaded diaktifkan. DomContentLoaded

adalah event standar dari DOM yang akan diaktifkan ketika browser selesai memparsing dokumen

HTML. Pada aplikasi diatas semua kode dalam method init() tidak akan dipanggil sampai DOM selesai

diparsing dan siap digunakan.

Method WinJS.UI.processAll() digunakan untuk memproses semua kontrol yang berada pada

halaman (merubah tag DIV dengan property data-win-control untuk dirender menjadi AppBar).

Ketika penggguna menekan tombol ‘Ambil Gambar’ maka class Media.Capture.CameraCaptureUI

dibuat. Class CameraCaptureUI merupakan contoh dari class yang ada pada Windows Runtime.

Method tangkapUI.captureFileAsync() digunakan untuk menampilkan layar untuk mengambil

gambar, ketika anda menekan tombol OK maka method done() akan dipanggil dan gambar tersebut

akan ditampilkan di halaman app yang kita buat.

WinJS dan JQuery

Windows Library for Javascript (WinJS) adalah library javascript yang dibuat oleh Microsoft khusus

untuk membuat aplikasi Windows Store. Pengembang aplikasi Windows Store wajib untuk

mempelajari WinJS. Library ini juga akan menjadi fokus bahasan pada bab-bab selanjutnya.

Library WinJS berisi semua WinJS control, control-control tersebut yang akan digunakan untuk

membangun user interface pada aplikasi Windows Store anda. Sebagai contoh library WinJS

mengandung AppBar control yang sudah kita gunakan pada contoh sebelumnya.

Pertanyaan yang sering muncul dari pengembang adalah kenapa harus membuat library baru?

Bagaimana dengan JQuery yang sekarang merupakan javascript framework yang paling banyak

digunakan? Apakah kita bisa menggunakan library lain seperti JQuery untuk membuat aplikasi

Windows Store? Jawabannya anda tetap dapat menggunakan JQuery, namun akan lebih bagus jika

anda juga mempelajari WinJS terlebih dahulu karena ada beberapa fitur yang ada di WinJS yang

tidak disediakan di javascript (misalnya namespace).

10

Menggunakan JQuery pada Aplikasi Windows Store

Untuk mencoba menggunakan JQuery, buat project Windows Store dengan nama SampleJQuery,

kemudian untuk menambahkan library JQuery kedalam project anda dapat menggunakan package

manager yang sudah disediakan oleh VS 2012. Klik kanan pada project kemudian pilih Manage

NuGET Package, cari library JQuery, setelah ditemukan pilih tombol Install. Setelah proses install

selasai maka library JQuery akan disimpan pada folder Scripts.

Kemudian tambahkan kode berikut untuk menggunakan library JQuery pada aplikasi.

<html> <head> <meta charset="utf-8" /> <title>SampleJQuery</title>  <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>  <script src="Scripts/jquery-2.0.1.js"></script>  <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> <style type="text/css"> #divPesan { display: none; padding: 10px; border: solid 1px white; background-color: orange; } </style> </head> <body> <p>Contoh JQuery</p> <button id ="btnTampil">Klik disini !</button> <div id ="divPesan"> Isi Pesan </div>


11

<script type="text/javascript"> $("#btnTampil").click(function () { $("#divPesan").fadeToggle("slow"); }); </script> </body>

</html>

Jalankan aplikasi anda, kemudian klik pada tombol ‘Klik disini !’ maka akan ditampilkan pesan ‘Isi

Pesan’ pada tag DIV dengan id ‘divPesan’.


12

Bab 3 – Pengenalan WinJS

Tujuan dari bab ini adalah menjelaskan beberapa fitur dasar yang terdapat pada library WinJS

seperti Namespace, Module, Classes, Asynchronous Programming dengan Promises, Mengambil

DOM Elemen dengan menggunakan Query Selector, dan pemanggilan Ajax dengan fungsi xhr.

Class, Object, dan Inheritance pada WinJS

Ketika anda membuat project Windows Store di VS 2012, project tersebut secara otomatis akan

menambahkan referensi library WinJS. Library WinJS berisi extension dari Microsoft untuk membuat

aplikasi Windows Store .

Pada topik bahasan dibawah ini akan dijelaskan bagaimana cara pembuatan object dengan WinJS

seperti :

Membuat Object dengan WinJS.Class.define()

Inheritance dengan WinJS.Class.derive()

Method WinJS.Class.mix()

ECMAScript5

WinJS menggunakan standard ECMAScript versi 5 yang sudah didukung oleh browser modern

seperti IE9+, Firefox 4+, Chrome 7+, dan Safari 5.1. Dibandingkan dengan versi sebelumnya

(ECMAScript versi 3) versi ini mempunyai beberapa perbedaan terutama pada pendefinisian object

dan property.

Property pada ECMAScript versi 3 tidak mendukung penggunaan method getter dan setter seperti

pada CSharp, namun hal ini sudah diperbaiki pada ECMAScript versi 5.

Membuat Class

Untuk membuat class pada WinJS digunakan method define(). Anda juga dapat menambahkan

konstruktor untuk melakukan inisialisasi pada property. Contoh dibawah ini akan membuat class

dengan nama ‘Mahasiswa’yang mempunyai 2 property (nim, nama) dan satu method

(tampilMahasiswa).

var Mahasiswa = WinJS.Class.define( function (nim, nama) { //deklarasi konstruktor this.nim = nim; this.nama = nama; }, { //mendefinisikan properti dan method nim: undefined, nama: { set: function (value) { if (value != "") this._nama = value; else throw new Error("Nama Required !");


13

}, get: function () { return this._nama; } }, tampilMahasiswa: function () { return "Nim: " + this.nim + " - Nama: " + this.nama; } } ); var mhs1 = new Mahasiswa("22002321","Erick"); console.log(mhs1.nama); console.log(mhs1.tampilMahasiswa());

Tambahkan kode berikut untuk memberi nilai kosong pada property nama, maka exception akan

dimunculkan.

mhs1.nama = ""; console.log(mhs1.nama);

Inheritance

Pada WinJS anda dapat menggunakan WinJS.Class.derive() untuk menurunkan class dari class yang

lain. Method WinJS.Class.derive() dapat menerima empat argumen yaitu: baseClass, constructor,

instanceMember, dan staticMember.

var Civitas = WinJS.Class.define( function (nama) { this.nama = nama; }, { tampilDeskripsi: function () { return "Nama anda : " + this.nama + " dan Status : " + this.status; } } );


14

var Mahasiswa = WinJS.Class.derive(Civitas, function (nama) { this.nama = nama; this.status = "Mahasiswa"; }); var Dosen = WinJS.Class.derive(Civitas, function (nama) { this.nama = nama; this.status = "Dosen"; }); var mhs1 = new Mahasiswa("Erick"); var dsn1 = new Dosen("Mueller"); console.log(mhs1.tampilDeskripsi()); console.log(dsn1.tampilDeskripsi());

Pada kode diatas dapat dilihat bahwa class ‘Mahasiswa’ dan ‘Dosen’ diturunkan dari class ‘Civitas’

dengan begitu class ‘Mahasiswa’ dan ‘Dosen’ juga dapat mengakses method dan property dari class

‘Civitas’.

Mixins

Selain menggunakan protptype inheritance seperti yang sudah dibahas sebelumnya, anda juga dapat

menggunakan method WinJS.Class.mix() untuk menggabungkan class (mixins). Mixins digunakan

untuk menggabungkan method menjadi single object, jadi anda tidak perlu menggunakan

inheritance. Microsoft menyarankan penggunaan mixins karena penggunaan inheritance

mempunyai dampak yang buruk pada performance (karena harus melakukan chaining antar object).

Untuk menggunakan method ini ada dua parameter yang harus diisi yaitu constructor dan mixin.

Contoh penggunaan mixin untuk single inheritance dapat dilihat pada contoh berikut.

var Civitas = { showHello: function () { return "Hello World !"; } }; var Mahasiswa = WinJS.Class.mix( function (nama) { this.nama = nama; },


15

Civitas ); var mhs1 = new Mahasiswa("Erick"); console.log(mhs1.showHello());

console.log(mhs1.nama);

Mixins juga dapat digunakan untuk implementasi konsep yang mirip dengan multiple inheritance.

Anda dapat menggabungkan kumpulan method dan property yang anda butuhkan. Contoh dibawah

ini menunjukan bagaimana mixin dapat digunakan untuk multiple inheritance.

var Civitas = { showHelloCivitas: function () { return "Hello Civitas !"; } }; var Nasabah = { norek: undefined, tabungan: { set: function (value) { if (value < 0) throw new Error("Nilai Harus Positif !"); else this._tabungan = value; }, get: function () { return this._tabungan; } }, showTabungan: function () { return "NoRek : " + this.norek + " jumlah : " + this.tabungan; } }; var Komunitas = { showHelloKomunitas: function () { return "Hello Komunitas !"; } }; var Mahasiswa = WinJS.Class.mix( function (nama,norek,tabungan) { this.nama = nama; this.norek = norek; this.tabungan = tabungan; }, Civitas,Nasabah,Komunitas ); var mhs1 = new Mahasiswa(); console.log(mhs1.showHelloKomunitas()); var mhs2 = new Mahasiswa("Erick", "007", 2000000); console.log(mhs2.tabungan); console.log(mhs2.showTabungan()); console.log(mhs2.showHelloCivitas());


16

Mixins mendukung penggunaan property dan method seperti yang anda lihat pada contoh diatas,

anda juga dapat menggunakan set dan get method pada property.

Penggunaan Namespace pada WinJS

Javascript Framework pada umumnya tidak mendukung namespace, misalnya Jquery yang

merupakan Javascript framework paling populer juga tidak mendukung namespace.

Namespaces sendiri memiliki kegunaan utama untuk mencegah naming collision (kerancuan akibat

nama object yang sama). Jadi dengan menggunakan namespace anda dapat membuat object yang

namanya sama tanpa menyebabkan konflik.

Fungsi yang kedua adalah untuk kemudahan pengaturan. Namespace digunakan untuk

mengelompokan object-object yang sejenis kedalam group yang sama walaupun secara fisik berada

pada file yang berbeda. Misal pada WinJS library mempunyai namespace WinJS.Class yang isinya

adalah object-object yang berhubungan dengan pembuatan class di WinJS. Namespace membuat

kita lebih mudah untuk mengerti fungsionalitas yang ada pada library.

Namespace akan sangat dibutuhkan jika anda ingin membuat aplikasi javascript yang cukup

kompleks. Jika anda membutuhkan lebih dari satu library yang dikembangkan oleh banyak orang

maka anda membutuhkan namespace.

Membuat Namespace di WinJS

Untuk membuat namespace di WinJS anda dapat menggunakan method WinJS.Namespace.define()

yang terdiri dari dua parameter yaitu name dan members. Contoh dibawah ini akan menunjukan

bagaimana penggunaan namespace di WinJS.

WinJS.Namespace.define("KelasA"); KelasA.Registrasi = { login: function () { return "Login pada KelasA"; } }; WinJS.Namespace.define("KelasB.Metode", { Registrasi: { login: function () {


17

return "Login pada KelasB"; } } } ); console.log(KelasA.Registrasi.login());

console.log(KelasB.Metode.Registrasi.login());

Pada contoh diatas dibuat dua namespace yaitu KelasA dan KelasB.Metode yang mempunyai satu

object dengan nama yang sama yaitu Registrasi.

Selain cara yang sudah ditunjukan diatas, anda juga dapat membuat namespace dengan

menggunakan method WinJS.Namespace.defineWithParent(). Dengan method ini anda dapat

menambahkan namespace baru pada namespace yang sudah ada.

WinJS.Namespace.defineWithParent() memiliki tiga parameter yaitu : parentNamespace, name, dan

members. Contoh penggunaan method ini dapat dilihat pada kode berikut:

WinJS.Namespace.define("KelasA"); WinJS.Namespace.defineWithParent(KelasA, "Metode", { Registrasi: { login: function () { return "Login pada KelasA"; } } });

console.log(KelasA.Metode.Registrasi.login());

Module Pattern pada WinJS

Modul pattern dapat digunakan untuk membatasi pengaksesan class member (method / property),

karena di javascript tidak mendukung access modifier (public/private seperti pada CSharp/VB).

Mekanisme enkapsulasi (information hidding) pada JavaScript dapat dibuat menggunakan fungsi.

Fungsi pada Javascript dapat menentukan scope variabel. Anda dapat mendeklarasikan variabel

pada global scope yang dapat diakses oleh semua fungsi atau mendeklarasikan variabel lokal yang

hanya dapat diakses pada scope fungsi tertentu saja.


18

function kerjakan() { console.log("kerjakan"); function kerjakanLagi() { console.log("kerjakan lagi"); } } kerjakan(); kerjakanLagi();

Pada kode diatas dapat dilihat bahwa fungsi kerjakanLagi() yang berada di dalam fungsi kerjakan()

tidak dapat diakses dari luar fungsi, karena scopenya hanya di dalam fungsi kerjakan() saja.

Library WinJS juga menggunakan enkapsulasi fungsi untuk menyembunyikan semua internal method

yang tidak diijinkan untuk diakses. Untuk mengakses public method dari enkapsulasi fungsi method

tersebut harus dideklarasikan dalam namespace pada global scope.

Pada contoh dibawah ini akan dibuat sebuah library sederhana untuk menghitung nilai akhir

matakuliah. Semua method yang dibuat akan dienkapsulasi dalam self-executing anonymous

function dan hanya dapat diakses dengan cara menambahkan fungsi tersebut kedalam namespace.

(function () { function hitungTotalTugas(tugas1,tugas2,tugas3) { return ((tugas1 + tugas2 + tugas3)/3) * 0.5; } function hitungTotalUjian(uas, uts) { return ((uas + uts)/2) * 0.5; } function hitungNilaiAkhir(tugas1,tugas2,tugas3,uas,uts) { return hitungTotalTugas(tugas1, tugas2, tugas3) + hitungTotalUjian(uas, uts); } function lulus(total) { if (total >= 60) return "Anda Lulus"; else return "Anda Tidak Lulus"; } //menentukan public method yang bisa diakses WinJS.Namespace.define("KelasA.Hitung", { hitungNilaiAkhir: hitungNilaiAkhir, lulus: lulus }); })(); var total = KelasA.Hitung.hitungNilaiAkhir(70, 80, 60, 70, 60); console.log("Hasilnya : " + total);


19

console.log(KelasA.Hitung.lulus(total));

Pada kode diatas self-executing anonymous function terdiri dari method hitungTotalTugas(),

hitungTotalUjian(), hitungNilaiAkhir(), dan lulus(). Method yang dapat diakses adalah yang ada di

dalam namespace KelasA.Hitung yaitu hitungNilaiAkhir() dan lulus().

Asynchronous Programming dengan Promises

Sebagian kode akan dieksekusi langsung, sebagian yang lain membutuhkan waktu lebih untuk

selesai, bahkan ada yang tidak pernah selesai. Misalnya mengambil nilai dari variabel lokal adalah

contoh eksekusi yang langsung selesai, namun mengambil nilai pada remote website menggunakan

AJAX request akan membutuhkan waktu yang lebih lama dan ada kemungkinan proses tidak akan

selesai.

Jika ada kemungkinan bahwa kode yang dieksekusi tidak akan pernah selesai, maka anda harus

mengeksekusinya secara asynchronous. Daripada menunggu eksekusi selesai anda dapat

mengerjakan hal lain (menjalankan kode lain) sampai anda mendapatkan sinyal bahwa eksekusi

sudah selesai.

Ada beberapa pattern yang sering digunakan untuk eksekusi kode secara asynchronous, pattern

yang paling popular digunakan pada javascript adalah callback pattern.

Menggunakan Promises di Windows Store

Promises menyediakan interface standar untuk menggunakan callback. Pada library WinJS, ketika

anda membuat promises, anda dapat mengisi tiga callback yaitu: complete callback, failure callback,

dan progress callback (progress dan failure callback sifatnya optional).

Promises banyak digunakan di library WinJS, misalnya method di animation library, control library,

dan binding library semua menggunakan Promises. Misalnya method xhr() pada WinJS akan

mengembalikan promises. Method xhr() membungkus standar pemanggilan objek XMLHttpRequest

kedalam promises. Pada kode dibawah ini akan dicontohkan penggunaan promises.

Buat project Windows Store dengan nama ContohPromises1, kemudian tambahkan kode berikut

pada file default.js.

var alamat = { url: "http://actual-training.com/feed", responseType: "document" };


20

WinJS.xhr(alamat).done( function (xmlHttpRequest) { console.log("success"); //menampilkan judul dari artikel pertama blog var judulPertama = xmlHttpRequest.response.querySelector("item>title"); console.log(judulPertama.textContent); }, function (xmlHttpRequest) { console.log("fail"); }, function (xmlHttpRequest) { console.log("progress"); } )

Setelah eksekusi selesai dilakukan, maka akan ditampilkan judul dari blog paling awal. Output dari

JavaScript console di Visual Studio adalah sebagai berikut.

Menggunakan then() atau done() ?

Pada contoh sebelumnya, kita menggunakan method done() yang mengembalikan promises. selain

method done() sebenarnya ada satu method lagi yang dapat digunakan yaitu then(). Kegunaan

method ini sama dengan method done(), bedanya adalah method then() mendukung mekanisme

chaining (sama dengan di JQuery) untuk memproses hasil lebih lanjut setelah method selesai

dieksekusi. Pada contoh dibawah akan ditunjukan penggunaan then() untuk mengambil link dari

posting pertama di blog, kemudian diikuti dengan pemangilan ajax kedua untuk mengambil datanya.

Buat project Windows Store baru dengan nama ContohPromisesThen, kemudian tambahkan kode

berikut pada file default.js

var alamat = { url: "http://actual-training.com/feed", responseType: "document" }; WinJS.xhr(alamat).then( function (xmlHttpRequest) { //mengambil link dari posting blog pertama var linkPertama = xmlHttpRequest.response.querySelector("item>link"); //membuat pemanggilan ajax yang kedua return WinJS.xhr({


21

url: linkPertama.textContent, responseType: "document" }); } ).done( function (xmlHttpRequest) { // mengambil deskripsi dari blog yang diakses var deskripsi = xmlHttpRequest.response.querySelector("div.entry"); // mengambil 300 karakter dari deskripsi dan menampilkannya di console console.log(deskripsi.textContent.trim().substr(0, 100)); } );

Anda dapat melakukan chaining pada promises sebanyak yang anda inginkan dengan memanggil

method then().then().then()…. chain terakhir harus menggunakan method done(). Pada kode diatas

hasil promises yang pertama digunakan untuk melakukan pemanggilan yang kedua, baru kemudian

hasilnya ditampilkan ke javascript console.

Perbedaan yang kedua adalah pada method then() jika terjadi error (misal url yang dimasukan salah)

maka tidak ada exception error (eksekusi tetap dijalankan tanpa ada error), maka disarankan untuk

menggakan method done() pada chaining paling akhir.

Membuat Promises

Anda dapat membuat promises anda sendiri dengan membuat instance dari class Promises.

Konstruktor yang digunakan untuk membuat class Promises membutuhkan tiga parameter yaitu

complete, error, dan progress.

Mengambil DOM Elemen dengan Query Selector

Ketika anda membuat aplikasi Windows Store, anda pasti membutuhkan cara yang mudah untuk

mengambil nilai dari elemen HTML, misalnya kita akan mengambil semua nilai pada elemen yang

memiliki class selector yang sama, atau kita ingin mengambil satu nilai dari elemen yang memiliki

selector id tertentu.

Selector tidak hanya berguna untuk menambahkan format pada element. Selector juga digunakan

untuk menambahkan event kedalam elemen tertentu, sebagai contoh anda akan menambahkan

event click kedalam element button.


22

Javascript framework yang sudah sangat populer dengan fitur selector adalah Jquery. WinJS juga

menambahkan fitur selector yang mirip dengan Jquery.

Contoh penggunaan query pada WinJS

Buat project javascript Windows Store dengan nama ContohQuerySelector. Kemudian pada file

default.html tambahkan kode html berikut

<body> <h3>Penggunaan Selector</h3> <br /> <button>Klik Disini !</button><br /> <div style="display:none;"> <h2>Ini adalah pesan tersembunyi</h2> </div>

</body>

Kemudian untuk menambahkan event handler tambahkan juga kode pada file default.js

(function () { "use strict"; function initialize() { WinJS.Utilities.query("button").listen( "click", function() { WinJS.Utilities.query( "div").clearStyle( "display"); }); }; document.addEventListener("DOMContentLoaded", initialize); })();

Pada kode diatas method query() digunakan untuk mengambil element button dan menambahkan

event click kedalam button tersebut. Jika user menekan button maka elemen div akan diambil dan

style display akan dihapus. Kembalian dari method query() berupa object bertipe QueryCollection.

Tekan F5 untuk menjalankan aplikasi anda. Tampilan dari aplikasi diatas adalah sebagai berikut.

Mengambil Elemen Tunggal menggunakan method WinJS.Utilities.id()

Jika anda ingin mengambil elemen tunggal dari dokumen (bukan semua elemen), anda dapat

menggunakan method WinJS.Utilities.id(). Misal anda ingin mengambil elemen yang mempunyai id

dengan nama ‘pesan’, kemudian merubah warna teks yang ada dalam element tersebut menjadi

merah. Maka anda dapat menuliskan:

//pada default.html


23

<div id="pesan"> Hello World ! </div>

//pada default.js

WinJS.Utilities.id("pesan").setStyle("color", "red");

Atau anda juga dapat mengakses element div tersebut dengan cara :

WinJS.Utilities.query("#pesan").setStyle("color", "red");

Method WinJS.Utilities.id() sebenarnya sama dengan method standar yang ada pada javascript

untuk mengakses element yaitu getElementById(). Method tersebut juga mengembalikan hasil

berupa QueryCollection. Jika element dengan id yang dicari tidak berhasil ditemukan maka akan

dikembalikan QueryCollection dengan length 0 (tidak menyebabkan error).

Menggunakan Method WinJS.Utilities.children()

Method WinJS.Utilities.children() dapat digunakan untuk mengambil data berupa QueryCollection

yang berisi semua child dari element DOM. Misal kita akan mengambil child pada element berikut:

<div id="bahasa"> <div>CSharp</div> <div>JavaScript</div> <div>Visual Basic</div> <div>Phyton</div> </div>

Untuk mengambil child pada element diatas, tambahkan kode berikut pada default.js

var bahasa = WinJS.Utilities.query("#bahasa").get(0); WinJS.Utilities.children(bahasa).setStyle("color", "yellow").setStyle("border",

"2px dotted pink");

Satu hal yang perlu anda pahami adalah method ini hanya dapat menerima input berupa DOM

element bukan QueryCollection, maka pada kode diatas digunakan method get() untuk mengambil

DOM element dari DIV ‘bahasa’.

Pemangilan AJAX dengan fungsi xhr()

Fungsi xhr() sudah pernah kita gunakan sebelumnya ketika kita membahas tentang promises. Fungsi

xhr() adalah salah satu fungsi pada WinJS yang membungkus objek XMLHttpRequest untuk


24

asynchrounous call. Fungsi xhr() mempunyai nilai kembalian berupa promises. Anda dapat

menggunakan method ini jika ingin melakukan AJAX request.


25

Bab 4- Observable, Binding, dan Template

Pada bab ini kita akan membahas bagaimana cara menggunakan objek javascript, baik single objek

atau multiple (array object), dan bagaimana cara menampilkannya di aplikasi Windows Store anda.

Observable Pattern

Dengan membuat observalbe object maka notifikasi akan dikirimkan secara otomatis ketika ada

perubahan nilai property pada object tersebut.

Dengan observable anda dapat membuat data pada layer User Interface dan Model pada aplikasi

ada selalu sinkron. Sebagai contoh anda dapat mengupdate data pada layer UI secara otomatis

ketika nilai property pada Model berubah. Observable adalah fondasi untuk declarative-binding pada

WinJS.

WinJS bukan satu-satunya Javascript library yang mendukung declarative-binding, javascript library

lain yang sudah mendukung declarative-binding diantaranya adalah KnockoutJS dan Kendo.

Membuat Observable Object

Pada contoh berikut akan ditunjukan cara penggunaan observable, kita juga akan membuat listener

yang akan dijalankan ketika ada salah satu property yang nilainya diubah. Anda dapat mendaftarkan

listener menggunakan method bind().

Buat project Windows Store baru dengan nama ContohObservable1. Kemudian pada file default.js

tambahkan kode berikut.

(function () { "use strict"; //membuat objek sederhana var produk = { name: "Mouse", description: "Microsoft Mouse", price: 100 }; //membuat observable objek var produkObservable = WinJS.Binding.as(produk); //membuat listener, method ini akan dieksekusi ketika peoperty price berubah produkObservable.bind("price", function (baru, lama) { console.log("Nilai Baru :" + baru + " ,Nilai Lama :" + lama); }); //merubah nilai property produkObservable.price = 111; })();


26

Kemudian jalankan program untuk melihat hasilnya pada JavaScript console. Dapat dilihat bahwa

ketika ada perubahan nilai pada property price maka listener akan dijalankan. Pada output dapat

anda lihat bahwa fungsi dijalankan dua kali, output yang pertama dijalankan ketika property price

diinisialisasi pertama kali, dan output yang kedua dijalankan ketika property price diubah.

Observable dengan Objek Kompleks

Anda juga dapat melakukan bind ke objek yang lebih kompleks. Buat project dengan nama

ContohObservable2, kemudian modifikasi kode pada file default.js sebagai berikut:

(function () { "use strict"; //membuat objek kompleks var pelanggan = { alamat: { jalan: "Jl Gowongan Lor 46" } }; var pelangganObservable = WinJS.Binding.as(pelanggan); //binding objek yang komplek WinJS.Binding.bind(pelangganObservable, { alamat: { jalan: function (baru) { console.log("Nama Jalan yang baru : " + baru); } } }); pelangganObservable.alamat.jalan = "Jl Dr Wahidin 5-25"; })();

Output dari aplikasi diatas pada javascript console adalah sebagai berikut:

Notifikasi yang Bertumpuk

Bagaimana jika anda akan merubah nilai pada suatu property lebih dari satu kali? Apakah notifikasi

akan dipanggil lebih dari satu kali? Untuk menjawab pertanyaan tersebut mari kita buat contoh


27

berikut. Buat project baru dengan nama ContohObservable3, kemudian modifikasi kode pada file

default.js berikut.

(function () { "use strict"; //membuat objek sederhana var produk = { name: "Mouse", description: "Microsoft Mouse", price: 100 }; //membuat observable objek var produkObservable = WinJS.Binding.as(produk); //membuat listener, method ini akan dieksekusi ketika peoperty price berubah produkObservable.bind("price", function (baru, lama) { console.log("Nilai Baru :" + baru + " ,Nilai Lama :" + lama); }); //merubah nilai property beberapa kali produkObservable.price = 111; produkObservable.price = 222; produkObservable.price = 333;

})();

Output yang dihasilkan tidak seperti yang diharapkan, program hanya menampilkan notifikasi diawal

dan diakhir saja. Jika anda menginginkan semua notifikasi ditampilkan maka anda dapat

menggunakan method updateProperty() yang akan mengembalikan promises.

//merubah nilai property beberapa kali produkObservable.updateProperty("price", 111).then(function () { produkObservable.updateProperty("price", 222).then(function () { produkObservable.updateProperty("price", 333); })

});


28

Melewatkan Notifikasi

Anda juga dapat merubah nilai property tanpa harus menjalankan method listener yang memanggil

notofikasi. Untuk merubah nilai property secara silent (tanpa notifikasi), anda dapat menggunakan

property backingData. Untuk mencoba buat project baru dengan nama ContohObservable4.

(function () { "use strict"; //membuat objek sederhana var produk = { name: "Mouse", description: "Microsoft Mouse", price: 100 }; //membuat observable objek var produkObservable = WinJS.Binding.as(produk); //membuat listener, method ini akan dieksekusi ketika peoperty price berubah produkObservable.bind("price", function (baru, lama) { console.log("Nilai Baru :" + baru + " ,Nilai Lama :" + lama); }); //merubah nilai property secara silent produkObservable.backingData.price = 111; console.log(produkObservable.price); })();

Pada output dapat dilihat bahwa notifikasi tidak dipanggil ketika property price diubah

Bekerja dengan Koleksi Observable

Jika anda ingin membuat koleksi observable berupa array maka anda dapat menggunakan objek

WinJS.Binding,List, objek ini mendukung notifikasi ketika anda nilai property yang diubah.

Buat project baru dengan nama ContohKoleksiObservable1, kemudian tambahkan kode berikut pada

file default.js

(function () { "use strict"; var produk = [ { nama: "MS Mouse", harga: 100 }, { nama: "Flashdisk 4GB", harga: 20 }, { nama: "Flashdisk 8GB", harga: 30 } ];


29

//membuat list var listProduk = new WinJS.Binding.List(produk); //event handle ketika menambahkan data kedalam list listProduk.oniteminserted = function (e) { var pesan = "Item Ditambahkan : " + e.detail.value.nama + " pada index : " + e.detail.index + " dengan key : " + e.detail.key; console.log(pesan); }; listProduk.onitemchanged = function (e) { var pesan = "Item Diubah : " + e.detail.oldValue.nama + " menjadi : " + e.detail.newValue.nama + " pada index : " + e.detail.index + " dengan key : " + e.detail.key; console.log(pesan); }; listProduk.onitemmutated = function (e) { var pesan = "Item bermutasi : " + e.detail.value.nama + " dengan key : " + e.detail.key; console.log(pesan); }; listProduk.onitemremoved = function (e) { var pesan = "Item Dihapus : " + e.detail.value.nama + " pada index :" + e.detail.index + " dengan key : " + e.detail.key; console.log(pesan); }; listProduk.onreload = function (e) { var pesan = "Reload List"; console.log(pesan); }; //menambahkan item listProduk.push({ nama: "MS Mouse Pad", harga: 2 }); //ubah seluruh data pada item listProduk.setAt(1, { nama: "Disney Mouse Pad", harga: 2 }); //ubah satu data listProduk.getAt(1).price = 99; listProduk.notifyMutated(1); //menghapus data listProduk.splice(0, 1); //memindahkan item yg kedua di paling atas listProduk.move(1, 0); //sorting item listProduk.sort(); //menampilkan list console.log("Menampilkan daftar List : ");


30

listProduk.forEach(function (value,index,array) { console.log("Index : " + index + " - Nama : " + value.nama + " - Harga : "+value.harga); });

})();

Pada kode contoh diatas ditunjukan event handler dari objek WinJS.Binding.List yang akan dipanggil

ketika proses tertentu seperti insert, delete, atau update dipanggil.

Ketika anda membuat objek WinJS.Binding.List dari objek array seperti contoh diatas, maka list yang

dibuat bersifat observable, namun tidak dengan detail item didalam list tersebut. Untuk membuat

detail item didalam list tersebut observable anda dapat menuliskan kode sebagai berikut.

//item didalam list yang observable var listProduk = new WinJS.Binding.List(produk, { binding: true }); //untuk penanganan perubahan detail listProduk.getAt(1).bind("harga", function () { console.log("ada perubahan harga"); });

Declarative Data Binding

Dengan deklaratif data binding anda dapat mem-binding data yang berupa objek JavaScript untuk

ditampilkan pada elemen HTML dengan menambahkan atribut khusus pada elemen tersebut.

Dengan cara ini anda dapat menampilkan data ke elemen HTML dengan lebih mudah tanpa harus

menuliskan kode pada script.

Contoh Sederhana Declarative Data Binding

Buat project baru dengan nama ContohDeclarativeBinding1, kemudian tambahkan kode berikut

pada file default.html.

<body>


31

<h2>Detail Produk</h2> <div> Nama Produk : <span data-win-bind="innerText:nama"></span> </div> <div> Harga Produk : <span data-win-bind="innerText:harga"></span> </div> <div> Gambar Produk : <br /> <img data-win-bind="src:gambar;alt:nama" /> </div> </body>

Pada kode diatas data-win-bind adalah atribut yang digunakan untuk mem-binding data dari objek

JavaScript. Untuk membuat objek javaScript yang akan ditampilkan, tambahkan kode berikut pada

file default.js

(function () { "use strict"; function inisialisasi() { var produk = { nama: "Buku ASP.NET 4.5", harga: 62000, gambar: "buku.jpg" }; WinJS.Binding.processAll(null, produk); } document.addEventListener("DOMContentLoaded", inisialisasi); })();

Method WinJS.Binding.processAll() harus dipanggil jika anda ingin menggunakan declarative data

binding. Hasil dari kode diatas jika dijalankan adalah sebagai berikut.


32

Declarative Data Binding dan Observable

Kombinasi Declarative Data Binding dan Observable biasa digunakan dalam pembuatan aplikasi.

Dengan observable maka jika anda mengubah nilai pada dokumen HTML maka otomatis data yang

ada pada objek JavaScript juga ikut diupdate.

Contoh Declarative Binding dan Observable

Buat project dengan nama ContohDeclarativeBinding2.

<body> <div> Anda sudah melakukan klik sebanyak <span data-win-bind="innerText:banyakKlik"></span> kali <br /> <button id="btnKlik">Klik Disini !</button> </div> </body>

Pada file default.js tambahkan kode berikut

(function () { "use strict"; function inisialisasi() { var viewModel = { banyakKlik: 0 }; var btnKlik = document.getElementById("btnKlik"); btnKlik.onclick = function (e) { e.preventDefault(); viewModel.banyakKlik++; }; //membuat observable viewModel = WinJS.Binding.as(viewModel); // bind view model ke dokumen WinJS.Binding.processAll(null, viewModel); } document.addEventListener("DOMContentLoaded", inisialisasi);

})();

Contoh Mengambil Data dari Form

Kode pada default.html


33

<body> <p>Mengambil Nilai dari Form</p> <form id="frmProduk"> <div class="field"> <label>Nama:</label> <input id="namaProduk" required /> </div> <div class="field"> <label>Harga:</label> <input id="hargaProduk" required /> </div> <div class="field"> <button>Tambah Produk</button> </div> </form>

</body>

Kode default.js

(function () { "use strict"; function initialize() { WinJS.Utilities.query("#frmProduk").listen("submit", function (e) { e.preventDefault(); var produk = { nama: document.getElementById("namaProduk").value, harga: document.getElementById("hargaProduk").value }; //disini kode untuk menambahkan produk ke database console.log("Tambah Produk : " + produk.nama + " dengan harga " + produk.harga); }); } document.addEventListener("DOMContentLoaded", initialize);

})();


34

Contoh Data Binding menggunakan Navigation Template

Buat project navigation template dengan nama ContohBindingNavigation.

Pada home.html tambahkan kode berikut

<body> <div class="fragment homepage"> <header aria-label="Header content" role="banner"> <button class="win-backbutton" aria-label="Back" disabled type="button"></button> <h1 class="titlearea win-type-ellipsis"> <span class="pagetitle">Welcome to Sample Binding</span> </h1> </header> <section aria-label="Main content" role="main"> <div id="labelNama">Nama</div> <input id="nama" readonly="true" type="text" data-win-bind="value:nama" /> <div id="labelUmur">Umur</div> <input id="umur" readonly="true" type="text" data-win-bind="value:umur" /> <div id="labelWarna">Warna Favorit</div> <div id="warna" data-win-bind="style.backgroundColor:warnaFavorit"></div> <div id="buttons"> <button id="prevButton"></button> <button id="ultahButton"></button> <button id="nextButton"></button> </div> </section> </div>

</body>

Kemudian tambahkan kode pada file home.js untuk membinding data dan menampilkan data

tersebut ke dokumen HTML.

(function () { "use strict"; WinJS.UI.Pages.define("/pages/home/home.html", { ready: function (element, options) { var siswa = [ { nama: "Erick", umur: 32, warnaFavorit: "red" }, { nama: "Jovan", umur: 2, warnaFavorit: "blue" }, { nama: "Skywalker", umur: 31, warnaFavorit: "yellow" } ]; var section = element.querySelector("section[role=main]"); var currRecord = 0; WinJS.Binding.processAll(section, siswa[currRecord]); } }); })();

Jalankan aplikasi diatas untuk melihat hasilnya


35

Pada contoh diatas kita mencoba untuk menggunakan one-way binding untuk menampilkan data

dari javascript array kedalam HTML. Jika kita ingin mengubah nilai (misal nilai umur) dengan

menambahkan data pada object array ketika tombol ‘ultah’ ditekan.

ultahButton.onclick = function () { var mhs = siswa[currRecord]; mhs.umur++; }

Kode diatas belum dapat berfungsi karena nilai yang berubah baru nilai yang ada pada javascript

object, belum otomatis merubah data yang ada pada HTML. Agar data pada HTML juga berubah

ketika data pada javascript object berubah maka anda dapat menambahkan binding notification dan

listener pada array object.

var siswa = [ WinJS.Binding.as({ nama: "Erick", umur: 32, warnaFavorit: "red" }), WinJS.Binding.as({ nama: "Jovan", umur: 2, warnaFavorit: "blue" }), WinJS.Binding.as({ nama: "Skywalker", umur: 31, warnaFavorit: "yellow" }) ];

Sekarang jalankan aplikasi anda, kemudian tekan tombol ‘ultah’ untuk menambahkan nilai umur.

Untuk menyempurnakan aplikasi diatas kita akan mencoba merubah kode menjadi berikut:

(function () { "use strict"; WinJS.UI.Pages.define("/pages/home/home.html", { ready: function (element, options) { var siswa = [ WinJS.Binding.as({ nama: "Erick", umur: 32, warnaFavorit: "red" }), WinJS.Binding.as({ nama: "Jovan", umur: 2, warnaFavorit: "blue" }), WinJS.Binding.as({ nama: "Skywalker", umur: 31, warnaFavorit: "yellow" }) ];


36

var section = element.querySelector("section[role=main]"); var currRecord = 0; var viewModel = WinJS.Binding.as({ mhs: siswa[currRecord] }); WinJS.Binding.processAll(section, viewModel); ultahButton.onclick = function () { viewModel.mhs.umur++; } prevButton.onclick = function () { currRecord = (siswa.length + currRecord - 1) % siswa.length; viewModel.mhs = siswa[currRecord]; } nextButton.onclick = function () { currRecord = (siswa.length + currRecord + 1) % siswa.length; viewModel.mhs = siswa[currRecord]; } } }); })();

Untuk memudahkan pengaksesan dan binding ke array object anda dapat membuat variabel dengan

nama viewModel untuk menyimpan data yang akan ditampilkan ke dokumen HTML. Anda dapat

menekan tombol next dan previous untuk menampilkan data.

Contoh Declarative Binding dan WinJS Control

Pada contoh dibawah ini akan ditunjukan penggunaan declarative binding pada salah satu WinJS

control yang ada yaitu rating control.

Buat project blank app baru dengan nama ContohRatingControl kemudian tambahkan kode berikut

//default.html

<body> <p>Declarative Binding dengan Rating Control</p> <div data-win-control="WinJS.UI.Rating" data-win-bind="winControl.averageRating:averageRating"> </div> <div> Rating rata-rata dari produk ini adalah : <span data-win-bind="innerText:averageRating"></span>


37

</div>

</body>

Kemudian tambahkan juga untuk kode javascript pada file default.js

(function () { "use strict"; function inisialisasi() { var viewModel = { averageRating: 3 }; WinJS.UI.processAll().done(function(){ WinJS.Binding.processAll(null, viewModel); }) } document.addEventListener("DOMContentLoaded", inisialisasi); })();

Declarative Binding dan Binding Converter

Buat blank app baru dengan nama ContohBindingConverter

/js/myBindingConverters.js

(function () { "use strict"; var onSaleToDisplay = WinJS.Binding.converter(function (onSale) { return onSale ? "block" : "none"; }); var harga = WinJS.Binding.converter(function (hargaToConvert) { return "Rp" + hargaToConvert.toFixed(2); }); var shortDate = WinJS.Binding.converter(function (dateToConvert) { return dateToConvert.getMonth() + 1 + "/" + dateToConvert.getDate() + "/" + dateToConvert.getFullYear(); }); WinJS.Namespace.define("MyBindingConverters", { onSaleToDisplay: onSaleToDisplay, harga: harga, shortDate: shortDate }); })();

//default.html

<body>


38

<div> <div> <h1 data-win-bind="innerText:produk1.nama"></h1> <div> Harga: <span data-win-bind="innerText:produk1.harga MyBindingConverters.harga"></span> </div> <div data-win-bind="style.display:produk1.onSale MyBindingConverters.onSaleToDisplay"> <b>On Sale!</b> </div> <div> Ketersediaan: <span data-win-bind="innerText:produk1.ketersediaan MyBindingConverters.shortDate"></span> </div> </div><br /> <div> <h1 data-win-bind="innerText:produk2.nama"></h1> <div> Harga: <span data-win-bind="innerText:produk2.harga MyBindingConverters.harga"></span> </div> <div data-win-bind="style.display:produk2.onSale MyBindingConverters.onSaleToDisplay"> <b>On Sale!</b> </div> <div> Ketersediaan: <span data-win-bind="innerText:produk2.ketersediaan MyBindingConverters.shortDate"></span> </div> </div> </div>

</body>

//default.js

(function () { "use strict"; function inisialisasi() { var viewModel = { produk1: { nama: "IPhone 5", harga: 9000000, onSale: false, ketersediaan: new Date('10/18/2012') }, produk2: { nama: "Nokia 920", harga: 7000000, onSale: true, ketersediaan: new Date('3/2/2012') } };

39

WinJS.Binding.processAll(null, viewModel); } document.addEventListener("DOMContentLoaded", inisialisasi); })();

Menggunakan Template

Jika anda membutuhkan untuk menampilkan data yang formatnya sama secara berulang, maka anda

dapat menggunakan template.

Membuat Simple Template

Buat blank app baru dengan nama ContohSimpleTemplate

//default.html <body>  <div id="produkTemplate"> <div class="produk"> Nama: <span data-win-bind="innerText:nama"></span> <br /> Harga: <span data-win-bind="innerText:harga"></span> </div> </div>  <div id="renderProduk"></div> </body>

//default.js (function () { "use strict"; function inisialisasi() { var produk = [ { nama: "Nokia 520", harga: 1850000 }, { nama: "Samsung Galaxy Note 2", harga: 6200000 }, { nama: "Lenovo P770", harga: 2500000 } ]; var produkTemplate = document.getElementById("produkTemplate"); var renderProduk = document.getElementById("renderProduk");

40

var template = new WinJS.Binding.Template(produkTemplate); produk.forEach(function (produk) { template.render(produk, renderProduk); }); } document.addEventListener("DOMContentLoaded", inisialisasi); })();

Selain cara diatas anda dapat menggunakan cara yang lebih deklaratif. Buat project dengan nama

ContohDeclarativeTemplate.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ContohDeclarativeTemplate</title>  <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>  <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <p>Contoh Declarative Binding</p> <div id="templateProduk" data-win-control="WinJS.Binding.Template"> <div class="produk"> Name: <span data-win-bind ="innerText:nama"></span> <br /> Price: <span data-win-bind="innerText:harga"></span> </div> </div> <div id="renderTemplate"></div> </body> </html>


41

(function () { "use strict"; function initialize() { var produk = [{ nama: "Office 2013", harga: "500" }, { nama: "Visual Studio Premium", harga: 1200 }, { nama: "SQL Server Standard", harga: 2000 }]; var templateProduct = document.getElementById("templateProduk"); var renderTemplate = document.getElementById("renderTemplate"); WinJS.UI.processAll().done(function () { produk.forEach(function (produk) { templateProduct.winControl.render(produk, renderTemplate); }); }); } document.addEventListener("DOMContentLoaded", initialize); })();


42

Bab 5 - Windows Azure Mobile Services

Pada bab ini kita akan mempelajari penggunaan Windows Azure Mobile Services sebagai backend

dari aplikasi Windows 8.

Azure Mobile Services menyediakan layanan penting yang dibutuhkan oleh setiap developer aplikasi

mobile seperti :

Data : stuctured storage, sql database, dynamic schema

Push Notification : yang dapat diakses dari Windows, Windows Phone, iOS, dan Android.

Identity : Oauth Providers, Notification Hub.

Scheduled Task : Server-side scripting, API framework

Karena Azure Mobile Services berjalan di platform Windows Azure yang merupakan layanan berbasis

cloud, maka Azure Mobile Services juga bersifat elastis sehingga dapat dengan mudah di scale-up

dan scale-down.

Memulai Membuat Azure Mobile Services

1. Buka Windows Azure manajemen portal, kemudian pilih Mobile Services.

2. Tambahkan new mobile service baru dengan detail sebagai berikut (untuk penamaan anda

dapat menentukan nama sendiri). Anda dapat memilih free 20mb database yang disediakan

oleh Azure.


43

3. Pilih tombol next. Kemudian anda dapt memilih menyimpan database tersebut pada

database server yang sudah ada, atau membuat database server yang baru.


44

4. Setelah selesai maka anda dapat melihat azure mobile services baru dengan nama

CloudemiaAMS.

5. Sampai tahap ini kita sudah berhasil membuat azure mobile services baru.

6. Bila kita pilih ke menu SQL Database anda akan dapat melihat database CloudemiaAMS_db

yang akan digunakan untuk menyimpan data.

7. Jika anda perhatikan maka Azure Mobile Services dan SQL Database yang sudah kita buat

akan memiliki region yang sama.


45

8. Kemudian pilih azure mobile services yang sudah anda buat. Akan muncul beberapa menu

seperti dashboard, data, api, scheduler, push, identity, configure, dll.

9. Pada dashboard kita dapat melihat limitasi dari services yang kita buat. Karena kita

menggunakan versi gratis maka ada batasan pemanggilan API per hari, dan batasan devices

yang mengakses per hari. Kita dapat melakukan scaling jika kebutuhan kita sudah melebihi

batas yang ditentukan.


46

10. Untuk melakukan scaling, anda dapat melakukan pengaturan di menu SCALE.

Windows Store Client

Pada langkah selanjutnya kita akan membuat client berupa Windows Store App yang akan

mengakses azure mobile services yang sebelumnya sudah kita buat.

1. Pilih logo biru di sebelah kiri atas dari menu


47

2. Maka akan muncul halaman berikut untuk memiih platform dari aplikasi client yang akan

kita gunakan. Anda dapat memilih aplikasi Windows Store, Windows Phone, iOS, maupun

aplikasi Android.

3. Pilih Windows Store, kemudian pilih menu Create New Windows Store App.

4. Karena sebelumnya kita sudah menginstal Visual Studio 2012/2013, maka langkah

selanjutnya adalah membuat contoh table. Pilih ‘Create TodoItem Table’.

5. Kemudian pilih Javascript sebagai bahasanya, dan pilih download.

6. Setelah itu ekstrak file yang sudah anda download, kemudian buka solusinya. (Misal pada

aplikasi yang saya buat nama solusinya adalah CloudemiaAMS.sln).

7. Pada folder ‘js’ di solution explorer anda dapat melihat file-file yang digunakan untuk

mengakses azure mobile services.


48

8. Kemudian coba jalankan aplikasi tersebut dengan menekan tombol F5. Maka anda akan

dapat melihat tampilan aplikasi Windows Store App sebagai berikut.

9. Pada aplikasi ‘todo’ tersebut anda dapat menambahkan beberapa contoh data. Anda juga

dapat mencontreng todo yang sudah selesai dikerjakan, maka data tersebut secara otomatis

akan dihilangkan.

10. Ketika anda menambahkan data todo pada aplikasi, maka data tersebut akan disimpan di

azure mobile services.

11. Anda dapat membuka kembali windows azure management untuk melihat apakah data yang

anda tambahkan sudah disimpan.

12. Pada mobile services yang sudah anda buat sebelumnya, pilih menu DATA.


49

13. Pilih table TodoItem, maka anda akan dapat melihat data yang sudah anda masukan

sebelumnya.

14. Selain menggunakan cara diatas, anda juga dapat langsung mengakses database dengan cara

pilih menu SQL Database, kemudian pilih database, pilih manage untuk mengijinkan ip

komputer kita mengakses SQL Azure.

15. Kemudian buka SQL Management Studio dan masukan nama server, username, dan

password.

16. Anda dapat melihat bahwa table TodoItem sudah dibuatkan beserta field.


50

17. Anda juga dapat mencermati file ‘default.js’ untuk melihat bagaimana cara untuk

menambahkan data todoitem.

18. Selain menggunakan SQL Server Management studio untuk mengakses database, anda juga

dapat menggunakan Sql Azure Manage Portal. Untuk menampilkan portal tersebut anda

harus menginstal silverlight plugin.

19. Kemudian anda dapat login ke database pada portal tersebut.


51

20. Setelah login anda akan mendapatkan tampilan sebagai berikut. Anda dapat menambahkan

table baru, membuat view, stored procedure, dll.

Mengakses REST Services dari Table di Mobile Services

Anda dapat mengakses table TodoItem yang sudah anda buat secara REST. Untuk mengakses table

tersebut anda harus memeriksa permission dari table teersebut, caranya anda dapat memilih table

TodoItem kemudian pilih menu ‘Permission'.


52

Agar semua orang dapat mengakses dan menquery data, anda harus mengubah pengaturan READ

PERMISSION menjadi Everyone.

Setelah pengaturan selesai tekan SAVE, kemudian anda bisa mencoba untuk membaca data

menggunakan REST. Pada browser tambahkan url berikut :

Maka anda dapat melihat bahwa data dengan format JSON yang berisi semua data dari table

TodoItem akan ditampilkan.

Anda juga dapat menggunakan program seperti fiddler untuk mengakses REST services tersebut.

Berikut contoh penggunaan fiddler.

Dapat dilihat file JSON yang akan dihasilkan sebagai berikut :


53

Cara seperti diatas dapat dilakukan namun kurang aman karena semua orang dapat mengakses table

TodoItem secara REST. Coba anda kembalikan pengaturan READ PERMISSION menjadi ‘Anybody

with the Application Key’.

Kemudian buka fiddler kembali, dan akses REST url seperti sebelumnya.

Sekarang pesannya adalah Unauthorized karena permission sudah dirubah, anda harus

menambahkan application key untuk melakukan request. Untuk mendapatkan application key anda

dapat memilih tombol MANAGE KEYS.


54

Copy application key, kemudian tambahkan application key tersebut ketika kita melakukan request

ke server.

Setelah ditambahkan application key, maka anda dapat melihat bahwa request tersebut berhasil dan

mengembalikan status 200.

Menambahkan Data dan Table Baru pada Azure Mobile Services

Untuk menambahkan table pada windows azure mobile services, sebenarnya anda tidak perlu

menggunakan SQL Server Management studio atau fasilitas managed database di SQL Azure. Anda

dapat menambahkan table lewat menu Mobile Services.


55

Pertama kita akan menambahkan table baru dengan nama ‘Courses’.

Secara default table yang kita buat akan memiliki empat column sebagai berikut :


56

Jika anda buka table tersebut di SQL Server Management studio, dapat dilihat bahwa column Id akan

digunakan sebagai primary key.

Tambahkan 3 column baru dengan nama Title – string, Description- string, dan Complete – boolean.

Setelah menambahkan column tersebut, sekarang kita akan mencoba untuk menambahkan data

kedalam table yang sudah kita buat menggunakan fiddler. Untuk menambahkan data kita akan

menggunakan method POST.


57

Jika data berhasil ditambah maka akan muncul status kode ‘201 Created’.

Jika kita lihat data yang kita inputkan pada windows azure adalah sebagai berikut :

Untuk melakukan update data anda dapat menggunakan method PUT atau PATCH. Dengan

menggunakan PATCH anda cukup mengirimkan field yang akan diupdate. Sebagai contoh kita akan

mengupdate field ‘Complete’ menjadi ‘true’ dari data dengan id tertentu.


58

Jika anda lihat record setelah data diupdate adalah sebagai berikut :

Untuk mendelete data anda dapat menggunakan method DELETE.

Maka record tersebut akan didelete sehingga kita sudah tidak mempunyai record yg tersisa.

Tambahkan beberapa record lagi sebagai data contoh karena kita akan mencoba beberapa variasi

query dapat dilakukan.


59

Kita dapat menggunakan sintaks ODATA untuk memfilter record sesuai dengan kebutuhan. Untuk

menampilkan data yg field ‘Complete’ bernilai ‘true’ tambahkan sintaks berikut pada url.

https://cloudemiaams.azure-mobile.net/Tables/Courses?$filter=Complete eq true

Hasil query dalam format JSON adalah sebagai berikut :

Untuk contoh2 query pada ODATA dapat dilihat pada alamat berikut :

http://www.odata.org/documentation/odata-version-2-0/uri-conventions/

Misal untuk mengurutkan data course berdasarkan title, anda dapat menggunakan keyword

$orderby sebagai berikut:

Menambahkan Script Pada Proses CRUD

Anda juga dapat menambahkan script untuk mengubah atau memfilter data sebelum atau sesudah

perintah CRUD dijalankan. Dengan script anda dapat bekerja dengan bermacam-macam objek data

sebagai berikut :

Request : execute default operation

Query : filtering, paging, ordering

Table : CRUD operation dan query

http://www.odata.org/documentation/odata-version-2-0/uri-conventions/


60

MSSQL : Direct SQL Statement

Untuk mencoba menggunakan script ikuti langkah berikut :

Pada services yang sebelumnya anda buat buka menu DATA. Kemudian pilih table TodoItem.

Kemudian pilih menu SCRIPT, anda dapat menambahkan script ketika operasi insert, update,

delete,dan read.

Disini perintah script yang dijalankan menggunakan nodejs, Sebagai contoh pada script tambahkan

kode berikut :

Kemudian tekan Save, dan jalankan aplikasi TodoItem. Tambahkan record baru kedalam aplikasi

anda.


61

Setelah anda tambahkan, coba lihat menu log untuk melihat log yang dituliskan ketika perintah

insert dijalankan.

Maka anda dapat melihat log yang kita create ketika perintah insert di table TodoItem dijalankan.

Jika anda sudah menginstall azure cli maka anda juga dapat menggunakan command prompt untuk

melihat list daftar mobile services dan script yang sudah anda buat.

Menggunakan Objek Request pada Script

Pada contoh dibawah ini akan ditunjukan cara penggunaan objek request untuk menambahkan

result data dari server.

Untuk itu pilih table ‘Course’ kemudian pilih SCRIPT dan tambahkan kode berikut :


62

Kemudian coba request api dari table Courses menggunakan fiddler. Jika request berhasil maka akan

ditambahkan field baru dengan nama ‘Waktu’ yang berisi tanggal sekarang.

Seperti anda lihat output yang dikirimkan mempunyai satu field tambahan ‘Waktu’ yang dibuat pada

saat request. Cara ini dapat digunakan jika anda ingin menambahkan informasi tambahan yang

dikirimkan ke client pada saat request.

Jika anda lihat di struktur table maka dapat terlihat struktur table tersebut tidak berubah, tidak ada

tambahan field baru dengan nama ‘Waktu’.


63

Menambahkan Field baru dengan Script

Jika konfigurasi dynamic schema diaktifkan, maka kita akan dapat menambahkan field pada table

secara dinamis (menggunakan script). Cara ini mirip dengan penggunaan entity framework code

first.

Pada contoh dibawah ini akan ditunjukan bagaimana cara untuk menambahkkan field

‘DateCourseCreated’ secara dinamis dan menambahkan nilai kedalam field tersebut saat perintah

insert dijalankan.

Buka fiddler, kemudian tambahkan data baru kedalam table Courses.


64

Seletah itu jalankan method GET untuk melihat output JSON yang dikirimkan.

Dapat anda lihat bahwa disetiap record akan ada satu field baru dengan nama ‘DateCourseCreated’.

Jika anda lihat pada struktur table, maka field tersebut juga sudah ditambahkan secara permanen.


65

Menggunakan Query Object pada SCRIPT

Anda juga dapat memanipulasi objek Query dengan menggunakan SCRIPT. Pada contoh dibawah ini

akan ditunjukan bagaimana cara memanipulasi objek query.

Setelah script diatas disimpan, coba jalankan method GET untuk request data dengan menggunakan

fiddler. Maka hasil output setelah objek query dimanipulasi adalah sebagai berikut:


66

Dapat dilihat pada output bahwa data yang ditampilkan adalah data yang field ‘complete’ bernilai

‘false’.


67

Bab 6 -Identity dengan Azure Mobile Services

Pada sub bab ini akan dibahas bagaimana cara penggunaan Identity pada Windows Azure Mobile

services. Dengan menggunakan services ini user dapat login dengan menggunakan account

(username/password) dari provider seperti google, facebook, microsoft.

Membuat Twitter Identity Provider

Untuk membuat twitter provider langkah yang pertama kali harus dilakukan adalah :

1. Masuk ke halaman http://dev.twitter.com

2. Kemudian pilih sign-in untuk login dengan twitter account

3. Kemudian pilih My Application

http://dev.twitter.com/


68

4. Kemudian pilih new application untuk membuat app baru.

5. Tambahkan informasi dari aplikasi yang akan kita buat. Arahkan callback ke mobile services

anda.


69

6. Setelah services selesai dibuat akan muncul halaman yang berisi informasi dari aplikasi yang

kita buat.

7. Kemudian catat API key dan API secret untuk dimasukan kedalam Azure Mobile Services.

8. Pada Azure Mobile Services, pilih menu Identity, kemudian tambahkan consumer key (API

key) dan consumer secret (API secret)


70

Membuat Facebook Identity Provider

1. Untuk membuat facebook developer account anda dapat mengunjungi url berikut :

https://developers.facebook.com/apps

2. Silahkan login dengan facebook account anda dan buat aplikasi baru.

3. Setelah aplikasi berhasil dibuat, masuk ke tampilan dashboard untuk mengambil App ID dan

App Secret.

4. Kemudian masukan informasi tersebut pada halaman Identity.

https://developers.facebook.com/apps


71

Menambahkan Restriction Permission pada Table

Langkah selanjutnya adalah menambahkan permission pada table yang sudah kita buat sehingga

user harus melakukan login terlebih dahulu sebelum dapat mengakses informasi pada table. Pada

contoh dibawah ini kita akan menambahkan autentikasi menggunakan facebook login yang

sebelumnya sudah anda buat.

Misal pada table ‘Todoitem’ yang sudah anda buat tambahkan permission sebagai berikut agar

pengguna harus login terlebih dahulu sebelum dapat mengakses table Todoitem.

Kemudian buka project Windows Store App dengan nama ClodemiaAMS yang sebelumnya sudah

anda buat (contoh aplikasi yang didownload dari sample windows azure).

Tambahkan kode berikut pada file default.js.

Pada event app.onactivated hapus atau tandai method refreshTodoItems() dan tambahkan kode

berikut dibawah method tersebut.

var userId = null;


72

var login = function() { return new WinJS.Promise(function(complete) { client.login("facebook").done(function(results) { userId = results.userId; refreshTodoItems(); var message = "Anda sekarang login sebagai : " + userId; var dialog = new Windows.UI.Popups.MessageDialog(message); dialog.showAsync().done(complete); }, function(error) { userId = null; var dialog = new Windows.UI.Popups.MessageDialog("Terjadi error ketika login", "Login Required"); dialog.showAsync().done(complete); }); }); } var authenticate = function() { login().then(function() { if (userId == null) { authenticate(); } }); } authenticate();

Kemudian jalankan program, maka sebelum anda dapat mengakses aplikasi untuk melihat dan

menambahkan todo list, anda wajib untuk login menggunakan account facebook terlebih dahulu.

Anda juga dapat bereksperimen dengan provider yang lain seperti microsoft account atau twitter

account.


73

Bab 7 - Menggunakan Push Notification

Pada bab ini kita akan mencoba menggunakan fitur push notification yang ada pada Azure Mobile

Services. Dengan menggunakan fitur ini maka anda dapat mengirimkan push notification ke mobile

device. Azure mobile services dapat menggunakan beberapa layanan push seperti APN (Apple Push

Notification), GCM (Google), WNS (Windows 8), dan MPNS (Windows Phone).

Buka aplikasi Windows Apps Todo List yang sudah anda buat sebelumnya.


74

Kemudian klik kanan pada project, pilih ‘store’ dan ‘associate app with the store’. Untuk melakukan

langkah ini anda harus sudah punya account untuk Windows Store Developer, kemudian anda dapat

menambahkan apps baru di portal Windows Store Developer.

Setelah berhasil login pilih aplikasi Windows Store yang akan diasosiasikan dengan project yang

sedang kita buat. Pada contoh dibawah ini saya sudah membuat apps baru dengan nama

CloudemiaAMS.

Setelah memilih aplikasi tersebut, tekan tombol Next.

Buka portal Windows Store Developer kemudian pilih apps yang sudah anda asosiasikan dengan

project anda pada langkah selanjutnya. Pilih menu services untuk mengambil informasi Client Script

dan Package SID.


75

Kemudian pilih ‘Live Services Site’, kemudian catat informasi Client Script dan Package SID.


76

Kemudian masuk kedalam portal Azure Mobile Services, pilih menu PUSH, dan pada bagian bawah

tekan tombol ‘Enable Enhanced PUSH’.

Masukan informasi Client Script dan Package SID yang sudah anda dapatkan.

Kemudian pada default.js tambahkan kode dibawah instansiasi WindowsAzure.MobileServiceClient.

// This MobileServiceClient has been configured to communicate with your Mobile Service's url // and application key. You're all set to start working with your Mobile Service! var client = new WindowsAzure.MobileServiceClient( "https://cloudemiaams.azure-mobile.net/", "…." );


77

//push notification Windows.Networking.PushNotifications .PushNotificationChannelManager .createPushNotificationChannelForApplicationAsync().then(

function(channel) { client.push.registerNative(channel.uri); });

Pada solution explorer pilih package.appmanifest kemudian ubah pengaturan Toast capable menjadi

‘Yes’.

Kembali ke halaman azure mobile services, pilih menu DATA – Todoitem – SCRIPT. Pada saat

perintah insert tambahkan kode javascript berikut untuk mengirimkan notifikasi push ke client.

function insert(item, user, request) {

//console.log('Menambahkan item baru: ' + item.text);

var payload = '<?xml version="1.0" encoding="utf-8"?><toast><visual>' +

'<binding template="ToastText01"> <text id="1">' +

item.text + '</text></binding></visual></toast>';

request.execute({

success: function() {

// If the insert succeeds, send a notification.

push.wns.send(null,payload, 'wns/toast', {

success: function(pushResponse) {

console.log("Sent push:", pushResponse);

request.respond();


78

},

error: function (pushResponse) {

console.log("Error Sending push:", pushResponse);

request.respond(500, { error: pushResponse });

}

});

}

});

}

Setelah itu save dan jalankan aplikasi Windows Store App anda. Ketika anda jalankan dan

menambahkan todolist baru maka push notification akan muncul dalam bentuk toast seperti pada

gambar berikut.

eBook Getting Started Azure Mobile Services and Windows 8

Documents

Transcript of eBook Getting Started Azure Mobile Services and Windows 8