Client Windows App


Erick Kurniawan & Reza Faisal


Jun 2015

Pada bagian ini akan diberikan contoh membuat aplikasi client pada platform Windows App dengan menggunakan bahasa pemrograman Javascript. Seperti yang telah diketahui pada platform ini dapat dibangun aplikasi dengan bahasa C# dan VB.NET selain Javascript.


Membuat Project

Langkah pertama untuk membuat project ini adalah dengan klik kanan pada solution kemudian pilih Add > New Project. Kemudian pilih bahasa Javascript > Store Apps > Windows App > Blank App (Windows). Kemudian pada kolom nama isi dengan ClientWinApp. Selanjutnya klik tombol OK.

Add New Project – Windows Apps
Gambar 49. Add New Project – Windows Apps

Langkah selanjutnya adalah menambahkan package SignalR client pada project ini dengan cara klik kanan pada project kemudian klik Manage NuGet Packages. Pada kolom pencarian di pojok kanan atas masukkan kata kunci signalr maka akan didapat daftar seperti pada gambar di bawah ini.
Berbeda dengan kedua project sebelumnya yang memilih Microsoft ASP.NET SignalR .NET Client, pada project ini dipilih package Microsoft ASP.NET SignalR Javascript Client. Kemudian klik tombol Install.

Manage NuGet Package - Microsoft ASP.NET SignalR Javascript Client.
Gambar 50. Manage NuGet Package - Microsoft ASP.NET SignalR Javascript Client.

Setelah proses download dan installasi package tersebut selesai maka dapat dilihat pada project ini terdapat folder Scripts yang berisi file yang berisi file-file Javascript untuk implementasi SignalR client.

Script SignalR client.
Gambar 51. Script SignalR client.

Langkah selanjutnya adalah membuat project ini menjadi Startup Project dengan cara klik kanan pada project ini kemudian pilih Set as Startup Project. Hasilnya dapat dilihat pada bagian tool bar.

Pilihan untuk menjalankan Windows App.
Gambar 52. Pilihan untuk menjalankan Windows App.


Menulis Kode Program

Sebelum menulis kode program utama ada hal yang harus dilakukan, yaitu melakukan perubahan pada kode jQuery. Karena pada Windows App jika menggunakan script jQuery begitu saja akan didapati peringatan seperti berikut ini.

Peringatan saat menggunakan jQuery.
Gambar 53. Peringatan saat menggunakan jQuery.

HTML1701: Unable to add dynamic content ' <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>'. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.

Walaupun peringatan tersebut tetap dapat membuat kode program yang berhubungan dengan SignalR pada client tetap berjalan dengan baik. Tetapi jika ingin menghilangkan peringatan tersebut maka perlu ada perubahan pada file script jQuery yang digunakan pada bagian berikut ini.

Kode Program 64. Baris jQuery.support sebelum diubah.

jQuery.support = (function( support ) { 
    var div = document.createElement( "div" ), 
        documentElement = document.documentElement, 
        all, 
        a, 
        select, 
        opt, 
        input, 
        marginDiv, 
        support, 
        fragment, 
        body, 
        testElementParent, 
        testElement, 
        testElementStyle, 
        tds, 
        events, 
        eventName, 
        i, 
        isSupported; 

    ... dan seterusnya ... 

    return support; 
})({});

Maka kode di atas dapat diubah menjadi seperti berikut ini, perubahannya dapat dilihat pada bagian awal dan akhir baris.

Kode Program 65. Baris jQuery.support setelah diubah.

jQuery.support = MSApp.execUnsafeLocalFunction(function () { 
    var div = document.createElement( "div" ), 
        documentElement = document.documentElement, 
        all, 
        a, 
        select, 
        opt, 
        input, 
        marginDiv, 
        support, 
        fragment, 
        body, 
        testElementParent, 
        testElement, 
        testElementStyle, 
        tds, 
        events, 
        eventName, 
        i, 
        isSupported; 

    ... dan seterusnya ... 

    return support; 
});

Selanjutnya adalah menulis kode program client SignalR dengan kode Javascript seperti berikut ini.

Kode Program 66. default.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ClientWinApp</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- ClientWinApp references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>

    <!-- SignalR references -->
    <script src="/Scripts/jquery-1.6.4.js"></script>
    <script src="/Scripts/jquery.signalR-2.1.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
        var connection = $.hubConnection('http://localhost:30526/signalr/hubs');
        var hubProxy = connection.createHubProxy('helloWorld');

        hubProxy.on('connected', function (user, pesan) {
            var msg = new Windows.UI.Popups.MessageDialog("User baru bergabung.", "SignalR");
            msg.showAsync();
            console.log('User baru bergabung.');
        });

        hubProxy.on('show', function (user, pesan) {
            $('#AddText').append('<strong> ' + user + ' :</strong> ' + pesan + '<br />');
            console.log(user + ' : ' + pesan);
        });

        connection.start()
            .done(function ()
            {
                $('#SubmitButton').click(function () {
                    hubProxy.invoke('Send', 'Win8 User', $('#PesanChat').val()).done(function () {
                        console.log('Send berhasil dieksekusi.');
                    }).fail(function (error) {
                        console.log('Send gagal dieksekusi. Error: ' +
error);
                    });

                    $('#PesanChat').val('').focus();
                });

                console.log('Terkoneksi, connection ID=' + connection.id);
            })
            .fail(function () { console.log('Koneksi tidak dapat dilakukan'); });
        });
    </script>
</head>
<body>
    <input type="text" id="PesanChat" />
    <input type="button" id="SubmitButton" value="Send" />
    <div id="AddText"></div>
</body>
</html>

Uji Coba

Untuk melakukan uji coba client SignalR Windows App ini dapat dilakukan langsung pada local mechine dengan cara mengklik tombol ini.

Pilihan menjalankan Windows App pada Local Machine.
Gambar 54. Pilihan menjalankan Windows App pada Local Machine.

Tapi pada uji coba ini aplikasi yang dibuat akan menggunakan Simulator maka pilihan untuk menjalankan Windows App tersebut diganti menjadi seperti berikut.

Pilihan menjalankan Windows App pada Simulator.
Gambar 55. Pilihan menjalankan Windows App pada Simulator.

Setelah pilihan diubah, selanjutnya klik tombol berupa segitiga berwarna hijau tersebut. Makan akan ditampilkan simulator seperti berikut ini.

Aplikasi client Windows App dijalankan.
Gambar 56. Aplikasi client Windows App dijalankan.

Dari gambar dapat dilihat message box yang menyatakan aplikasi terkoneksi pada server. Setelah tombol Close pada message box diklik maka aplikasi ini siap digunakan untuk melakukan chat.

Aplikasi chat pada halaman web chatroom.html.
Gambar 57. Aplikasi chat pada halaman web chatroom.html.

Aplikasi chat Windows App.
Gambar 58. Aplikasi chat Windows App.


Penjelasan

Pada kode Javascript yang digunakan di atas ada beberapa perbedaan jika dibandingkan dengan kode Javascript yang digunakan pada bagian Hub sub bahasan tentang Chat Room. Pada bahasan sebelumnya kode ditulis dengan memanfaatkan kode proxy digenerate sehingga memudahkan untuk memanfaaatkan pembuatan fungsi hub pada client dan kemudahan untuk mengakses hub pada server.

Pada kode program 66 di atas dapat dilihat kode untuk melakukan koneksi ke Hub server tanpa ada bantuan proxy yang digenerate secara otomatis, hal ini bisa diidentifikasi dengan tidak adanya baris kode berikut ini.

Kode Program 67. Lokasi proxy yang digenerate otomatis.

<script src="./signalr/hubs" type="text/javascript"></script>

Karena proxy tidak digenerate secara otomatis maka cara penulisan kode mempunyai kemiripan dengan yang dibahas pada bagian Client Windows Forms dan Client Windows Phone.

Untuk melakukan koneksi ke server dilakukan dengan kode berikut ini.

var connection = $.hubConnection('http://localhost:30526/signalr/hubs'); 
var hubProxy = connection.createHubProxy('helloWorld');

Selanjutnya untuk memulai koneksi dapat dilakukan dengan kode berikut ini.

connection.start() 
    .done(function () 
    { 
        . . . 
        console.log('Terkoneksi, connection ID=' + connection.id); 
    }) 
    .fail(function () { console.log('Koneksi tidak dapat dilakukan'); });

Pada kode di atas dapat dilihat kode tambahan yang memanggil fungsi console.log, fungsi itu bertujuan untuk mengeluarkan output pada Javascript console pada Visual Studio.

Javascript console.
Gambar 59. Javascript console.

Selanjutnya untuk mendaftarkan fungsi hub pada client agar bisa dipanggil oleh method hub pada server dapat dilakukan dengan menulis kode seperti berikut ini.

Kode Program 68. Mendaftarkan fungsi hub client.

hubProxy.on('connected', function (user, pesan) { 
    var msg = new Windows.UI.Popups.MessageDialog("User baru bergabung.", "SignalR"); 
    msg.showAsync(); 
    console.log('User baru bergabung.'); 
}); 

hubProxy.on('show', function (user, pesan) { 
    $('#AddText').append('<strong> ' + user + ' :</strong> ' + pesan + '<br />'); 
    console.log(user + ' : ' + pesan); 
});

Sedangkan kode yang digunakan untuk mengirim pesan chat dilakukan dengan menggunakan kode berikut ini.

Kode Program 69. Fungsi mengirim pesan chat.

connection.start() 
    .done(function () 
    { 
        $('#SubmitButton').click(function () { 
            hubProxy.invoke('Send', 'Win8 User', $('#PesanChat').val()).done(function () { 
                console.log('Send berhasil dieksekusi.'); 
            }).fail(function (error) { 
                console.log('Send gagal dieksekusi. Error: ' + error); 
            }); 

            $('#PesanChat').val('').focus(); 
        }); 

            console.log('Terkoneksi, connection ID=' + connection.id); 
    }) 
    .fail(function () { console.log('Koneksi tidak dapat dilakukan'); });

Referensi

http://stackoverflow.com/questions/10859523/using-jquery-with-windows-8-metro-javascript-app-causes-security-error
http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client#manualproxy
http://www.codeproject.com/Articles/338916/Windows-JavaScript-Metro-Application-Getting-Sta

Artikel terkait | Pengenalan ASP.NET SignalR 2 – Pendahuluan | Lingkungan Pengembangan | Hub | Persistent Connection | Client Windows Forms | Client Windows Phone | Client Windows App | Hosting SignalR: Self-Host | Hosting SignalR: Azure | Scaleout dengan Service Bus


Technical Article | Community Translation