HTML/JavaScript Windows App Development - App Lifecycle dan Roaming Settings

Sebuah aplikasi dikatakan suspended(atau bisa dibilang paused) ketika aplikasi tersebut dialihkan atau ketika perangkat yang digunakan untuk menjalankan aplikasi tersebut tenaga baterainya hampir habis. Namun aplikasi tersebut masih berjalan di memory supaya pengguna dapat menyalakan aplikasinya lagi dengan cepat(atau di-resume).

Ketika aplikasi di-close, aplikasi tersebut akan ter-suspend selama 10 detik lalu kemudian terhenti(terminated). Data-data yang telah kita masukkan ke dalam variabel-variabel pada aplikasi tersebut akan hilang ketika aplikasi berhenti. Bagaimana membuat suatu aplikasi yang dapat menyimpan data yang kita masukkan seolah aplikasi tersebut tidak pernah berhenti? Disini kita akan menggunakan apa yang disebut dengan Roaming Settings. Roaming Settings memudahkan kita menyimpan data yang dapat diakses pada beberapa perangkat lain.

Percobaan menggunakan Roaming Settings
Pada percobaan ini kita menggunakan Visual Studio dengan Template Javascript Windows Store Apps Blank Template .

1. Pertama, buat New Project lalu pilih Template Javascript -> Store Apps -> Windows Apps, lalu pilih Blank App.
Ketika memilih Blank App, secara default akan tersedia file default.html dan default.js.

2. Buka file default.html. Lalu copy kode berikut ini di antara tag body
<div id="container">
  <h1>Demo menggunakan Roaming Settings - <a href="http://arliansyahazhary.blogspot.com">arliansyahazhary.blogspot.com</a></h1><br/>
  <h3><label for="InputNama">Masukkan namamu disini:</label></h3>
  <input type="text" id="InputNama" />
  <button id="TampilNama">Click</button><button id="Hapus">Hapus Nama</button><br/>
  <h2>Nama yang disimpan: <span id="SimpanNama"></span></h2><br/>
  <h2>Output: <span id="OutputNama"></span></h2><br/>
</div>

Agar kelihatan lebih rapi, kita atur margin pada #container dan display pada label dengan CSS. Copy kode berikut ini diantara tag head di bawah script default.js
<style>
  #container{
     margin32px;
  }
  label{
     displayblock;
  }
</style>

Aplikasi ini akan tampil seperti ini

3. Lalu kita akan membuat sebuah Event Handler yang meng-handle nama yang dimasukkan lalu ditampilkan dan disimpan. Kita akan membuat fungsi dalam javascript untuk melakukan hal tersebut.
Buat tag <script></script> di bawah tag <style> tadi lalu copy kode berikut di antara tag script tersebut
function ShowAndSave()
{
   // ambil nama yang dimasukkan pada textbox
   var TextboxInput = document.getElementById("InputNama").value;
 
   // tampilkan nama tadi pada tag span yang memiliki id OutputNama
   var OutputNama = document.getElementById("OutputNama");
   OutputNama.innerText = "Hello " + TextboxInput + ". Apa kabar?";
 
   // mengakses roaming settings
   var AppData = Windows.Storage.ApplicationData.current;
   var RoamingSettings = AppData.roamingSettings;
 
   // simpan nama yang dimasukkan tadi pada roaming settings dengan kunci "Nama"
   RoamingSettings.values["Nama"] = TextboxInput;
 
   // load nama yang disimpan dengan kunci "Nama" tadi
   // lalu ditampilkan pada tag span yang memiliki id SimpanNama
   var LoadNama = document.getElementById("SimpanNama");
   LoadNama.innerText = RoamingSettings.values["Nama"];
}

Fungsi tersebut akan menampilkan nama yang kita masukkan tadi, lalu menyimpannya ke dalam Roaming Settings dengan kunci "Nama".

4. Agar dapat menggunakan fungsi tersebut, kita harus register terlebih dahulu fungsi tersebut dengan Event Listener. Buka file default.js, maka akan terdapat kode seperti ini
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";
 
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
 
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
 
    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };
 
    app.start();
})();

Perhatikan kode yang di-highlight warna kuning, kode tersebut akan memproses semua yang diinisialisasi ketika aplikasi baru dijalankan. Edit baris kode tersebut menjadi seperti ini
args.setPromise(WinJS.UI.processAll().then(function completed() {
   // TODO       
}));

Setelah semuanya diproses, aplikasi akan mengeksekusi kode yang berada pada TODO. Copy kode berikut ini pada TODO
// register event click pada tombol dengan id TampilNama
// tombol click tersebut akan menjalankan fungsi ShowAndSave
var TombolTampil = document.getElementById("TampilNama");
TombolTampil.addEventListener("click", ShowAndSave, false);
 
// akses roaming settings
var AppData = Windows.Storage.ApplicationData.current;
var RoamingSettings = AppData.roamingSettings;
 
// load data yang disimpan dengan kunci "Nama" tadi
// lalu tampilkan pada tag span yg ber-id SimpanNama
var LoadNama = document.getElementById("SimpanNama");
if (RoamingSettings.values["Nama"])
   LoadNama.innerText = RoamingSettings.values["Nama"];
else // jika tidak ada nama yang disimpan, tampilkan kosong
   LoadNama.innerText = ""; 

5. Jalankan aplikasi tersebut dengan CTRL + F5. Masukkan nama kamu, lalu klik tombol Click untuk menampilkan dan menyimpan nama. Kemudian tutup aplikasinya, lalu jalankan lagi dengan CTRL + F5 dan lihat.. nama yang kamu masukkan tadi masih tersimpan.

Menghapus nama yang disimpan

6. Untuk menghapus nama yang disimpan, kita akan membuat suatu fungsi untuk menghapus nama yang disimpan tersebut lalu di-register pada tombol "Hapus Nama". Buka lagi default.html, lalu copy kode berikut di bawah function ShowAndSave() tadi
function HapusNama()
{
   // akses roaming settings
   var AppData = Windows.Storage.ApplicationData.current;
   var RoamingSettings = AppData.roamingSettings;
 
   // hapus nilai yang disimpan dengan kunci "Nama" tadi
   RoamingSettings.values.remove("Nama");
 
   // tampilkan kosong
   var LoadNama = document.getElementById("SimpanNama");
   LoadNama.innerText = "";
 }

Lalu buka default.js, pada WinJS.UI.processAll().then() tadi tambahkan kode berikut untuk register fungsi HapusNama pada tombol Hapus
// register event hapus pada tombol dengan id Hapus
// tombol hapus nama tersebut akan menjalankan fungsi HapusNama
var TombolHapus = document.getElementById("Hapus");
TombolHapus.addEventListener("click", HapusNama, false);

7. Jalankan aplikasi dengan CTRL + F5, lalu klik tombol Hapus Nama. Kemudian tutup aplikasinya, lalu jalankan lagi dan lihat.. nama yang disimpan tadi telah terhapus.


Source Code percobaan Roaming Settings

default.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WinControl</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>
 
    <!-- WinControl references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <style>
        #container{
            margin32px;
        }
        label{
            displayblock;
        }
    </style>
    <script>
        function ShowAndSave()
        {
            // ambil nama yang dimasukkan pada textbox
            var TextboxInput = document.getElementById("InputNama").value;
 
            // tampilkan nama tadi pada tag span yang memiliki id OutputNama
            var OutputNama = document.getElementById("OutputNama");
            OutputNama.innerText = "Hello " + TextboxInput + ". Apa kabar?";
 
            // mengakses roaming settings
            var AppData = Windows.Storage.ApplicationData.current;
            var RoamingSettings = AppData.roamingSettings;
 
            // simpan nama yang dimasukkan tadi pada roaming settings dengan kunci "Nama"
            RoamingSettings.values["Nama"] = TextboxInput;
 
            // load nama yang disimpan dengan kunci "Nama" tadi
            // lalu ditampilkan pada tag span yang memiliki id SimpanNama
            var LoadNama = document.getElementById("SimpanNama");
            LoadNama.innerText = RoamingSettings.values["Nama"];
        }
 
        function HapusNama()
        {
            // akses roaming settings
            var AppData = Windows.Storage.ApplicationData.current;
            var RoamingSettings = AppData.roamingSettings;
 
            // hapus nilai yang disimpan dengan kunci "Nama" tadi
            RoamingSettings.values.remove("Nama");
 
            // tampilkan kosong
            var LoadNama = document.getElementById("SimpanNama");
            LoadNama.innerText = "";
        }
    </script>
</head>
<body>
    <div id="container">
        <h1>Demo menggunakan Roaming Settings - <a href="http://arliansyahazhary.blogspot.com">arliansyahazhary.blogspot.com</a></h1><br/>
        <h3><label for="InputNama">Masukkan namamu disini:</label></h3>
        <input type="text" id="InputNama" />
        <button id="TampilNama">Click</button><button id="Hapus">Hapus Nama</button><br/>
        <h2>Nama yang disimpan: <span id="SimpanNama"></span></h2><br/>
        <h2>Output: <span id="OutputNama"></span></h2><br/>
    </div>
</body>
</html>

default.js
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";
 
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
 
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().then(function completed() {
                // register event click pada tombol dengan id TampilNama
                // tombol click tersebut akan menjalankan fungsi ShowAndSave
                var TombolTampil = document.getElementById("TampilNama");
                TombolTampil.addEventListener("click", ShowAndSave, false);
 
                // akses roaming settings
                var AppData = Windows.Storage.ApplicationData.current;
                var RoamingSettings = AppData.roamingSettings;
 
                // load data yang disimpan dengan kunci "Nama" tadi
                // lalu tampilkan pada tag span yg ber-id SimpanNama
                var LoadNama = document.getElementById("SimpanNama");
                if (RoamingSettings.values["Nama"])
                    LoadNama.innerText = RoamingSettings.values["Nama"];
                else // jika tidak ada nama yang disimpan, tampilkan kosong
                    LoadNama.innerText = "";
 
                // register event hapus pada tombol dengan id Hapus
                // tombol hapus nama tersebut akan menjalankan fungsi HapusNama
                var TombolHapus = document.getElementById("Hapus");
                TombolHapus.addEventListener("click", HapusNama, false);
            }));
        }
    };
 
    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };
 
    app.start();
})();

Reference: MSDN Manage App Lifecycle and State (HTML) - Windows App Development

Struktur Data - Binary Tree dan Huffman Coding



Tree adalah struktur data dimana tiap-tiap titik(node)-nya memiliki nilai serta pointer ke titik di bawahnya(child node).

Terdapat istilah-istilah yang perlu diketahui pada struktur data Tree ini. Perhatikan gambar di samping. Node yang memiliki angka 1 disebut sebagai root node, dan node yang berangka 5, 6, 7, 8, dan 9 disebut sebagai leaves. Node 2 dan node 3 merupakan siblings karena kedua node tersebut berasal dari parent node yang sama, yaitu 1. Sedangkan 5, 6, 7 adalah child node dari 3. Lalu 2 merupakan parent node dari 4.




Struktur data tree terdapat beberapa jenis, salah satunya adalah Binary Tree. Binary Tree merupakan struktur data tree yang tiap-tiap parent node-nya hanya memiliki dua child node. Tiap-tiap node pada binary tree tersusun oleh dua pointer dan data yang disimpan. Misalnya binary tree yang menyimpan integer, maka tiap-tiap node pada binary tree tersusun dari variabel bertipe integer, pointer ke child node kanan, dan pointer ke child node kiri.



Cara mendefinisikan node pada Binary Tree
typedef struct node
{
    // data yang disimpan
    int value;

    // pointer ke child node kiri
    struct node* left;

    // pointer ke child node kanan
    struct node* right;
} node;

// deklarasi root node sebagai variabel global
node* root = NULL;

Ketika ingin mencari suatu data pada Binary Tree, pastikan terlebih dahulu bahwa data pada Binary Tree tersebut dalam keadaan terurut. Maksudnya adalah nilai child node sebelah kanan harus lebih besar dari nilai parent node, sedangkan nilai child node sebelah kiri harus lebih kecil dari nilai parent node-nya, atau sebaliknya.

Pada setiap parent node yang memiliki child node, nilai child node sebelah kanan lebih besar sedangkan nilai child node sebelah kiri lebih kecil

Setelah dipastikan terurut, pencarian data dimulai dari root node. Kita dapat menggunakan algoritma Binary Search untuk mencari data pada Binary Tree. Misalkan nilai yang kita cari lebih besar dari nilai node yang kita cek, maka pencarian akan bergerak ke child node sebelah kanan, lalu kemudian ketika nilai pada child node itu di cek lagi dan ternyata lebih besar dari nilai yang kita cari, maka pencarian akan bergerak ke child node sebelah kiri. Jika nilai pada node sama dengan nilai yang kita cari maka ketemu, namun ketika kita sampai pada node yang tidak ada nilai(NULL), berarti tidak ketemu.

Fungsi pencarian pada Binary Tree dengan nilai kembalian berupa boolean
/**
 * @param value: nilai yang ingin dicari
 * @param tree: tree yang salah satu nilainya sedang dicari
 */
bool contains(int value, node* tree)
{
    // pencarian dimulai dari root node
    node* current = tree;
    
    // pencarian terus berlanjut selama tidak ketemu NULL
    while (current != NULL)
    {
        if (current->value == value)
        {
            // jika nilai yang dicek sama dengan nilai yang dicari, berarti ketemu
            return true;
        }
        else if (current->value < value)
        {
            // jika nilai yang dicek lebih kecil dari yang dicari, 
            // maka pencarian bergerak ke child node kanan
            current = current->right;
        }
        else
        {
            // jika nilai yang dicek lebih besar dari yang dicari, 
            // maka pencarian bergerak ke child node kiri
            current = current->left;
        }
    }

    // tidak ketemu karena bertemu NULL
    return false;
}

Ketika ingin menyisipkan nilai pada Binary Tree, berarti kita akan menambahkan child node baru. Child node tersebut akan ditambah pada lokasi NULL tadi lalu dihubungkan dengan parent node. Jadi kita melakukan pencarian lokasi yang cocok untuk dimasukkan nilai tersebut. Jika bertemu NULL, maka masukkan nilai tersebut.

Fungsi memasukkan nilai pada Binary Tree dengan nilai kembalian berupa boolean
/**
 * @param value: nilai yang ingin dicari
 * @param tree: tree yang salah satu nilainya sedang dicari
 */
bool insert(int value, node* tree)
{
    // alokasi memori untuk membuat node baru
    node* new_node = malloc(sizeof(node));
    if (new_node == NULL)
    {
        // alokasi memori gagal
        return false;
    }
    
    // inisialisasi nilai tersebut ke node baru
    new_node->value = value;
    new_node->right = NULL;
    new_node->left = NULL;

    // pointer pembantu untuk mencari lokasi penyisipan
    node* current = tree;
    node* previous = NULL;

    // jika tree kosong
    if (current == NULL)
    {
        // berarti root node diinisialisasi oleh node baru tadi
        root = new_node;
        return true;
    }

    // lakukan pencarian lokasi selama belum ketemu NULL
    while (current != NULL)
    {
        // jika nilai yang ingin dimasukkan telah ada sebelumnya
        if (current->value == value)
        {
            // release memori dari nilai tersebut
            free(new_node);
            return false;
        }

        if (current->value < value)
        {
            // jika nilai yang dicek lebih kecil dari yang dicari, 
            // maka pencarian bergerak ke child node kanan
            previous = current;
            current = current->right;
        }
        else
        {
            // jika nilai yang dicek lebih besar dari yang dicari, 
            // maka pencarian bergerak ke child node kiri
            previous = current;
            current = current->left;
        }
    }

    // jika ketemu null
    if (current == NULL)
    {
        // maka sisipkan node baru pada lokasi tersebut
        current = new_node;

        if (previous->value < value)
        {
            // jika nilai yang disisipkan lebih besar dari parent node-nya,
            // berarti node baru dihubungkan oleh pointer sebelah kanan dari parent node-nya
            previous->right = current;
        }
        else
        {
            // jika nilai yang disisipkan lebih kecil dari parent node-nya,
            // berarti node baru dihubungkan oleh pointer sebelah kiri dari parent node-nya
            previous->left = current;
        }

        // penyisipan berhasil
        return true;
    }

    // penyisipan gagal
    return false;
}

Struktur data Binary Tree ini digunakan sebagai model untuk mengkompres(mengecilkan ukuran memori) dari suatu file. Suatu file yang berukuran besar perlu dikompres ketika ingin mengirimkannya melalui internet. Pengkompresan file ini menggunakan jumlah bits memori yang lebih kecil dari jumlah bits yang biasanya dipakai untuk merepresentasikan sebuah data. Metode ini dinamakan Huffman Coding.

Biasanya kita menggunakan ASCII untuk merepresentasikan data. ASCII adalah skema encoding yang berukuran tetap(biasanya 8 bit). Di sisi lain, huffman encoding adalah skema encoding yang ukurannya berbeda-beda tergantung pada banyaknya frekuensi suatu data yang ingin di-encoding.



Misalnya ketika kita ingin mengkompres sebuah string seperti pada gambar di samping. Kita akan menggunakan binary tree untuk menyusun skema encoding pada tiap karakter. Pertama-tama kita harus mencari tahu frekuensi kemunculan dari masing-masing karakter tersebut, nilainya dapat dilihat pada gambar di samping. Lalu susun nilai-nilai frekuensi tersebut sebagai leaves dari tree yang akan kita buat.
Kemudian, gabungkan dua node menjadi satu node dan tambahkan nilai frekuensi keduanya. Lakukan terus menerus hingga terbentuknya suatu tree seperti gambar di bawah


Lalu kita buat skema bahwa setiap child node sebelah kanan direpresentasikan oleh 1 sedangkan yang sebelah kiri direpresentasikan oleh 0. Jadi kita dapat merepresentasikan tiap huruf dengan jumlah bit yang berbeda. Misalnya huruf E yang frekuensi kemunculannya paling besar, kita hanya perlu merepresentasikannya dengan bit 1 dengan ukuran 1 bit dan itu akan menghemat memori dari pada kita merepresentasikannya dengan jumlah 8 bit. Lalu misalnya untuk merepresentasikan huruf C kita menggunakan 0001 dengan ukuran 4 bit.

--------------------------------------------------------------------------------------------------
https://study.cs50.net/

C# - Exception Handling

Exception dalam C# digunakan untuk mengindikasikan terjadinya error pada sebuah aplikasi yang sedang digunakan. Pada aplikasi yang menggunakan .NET Framework, ketika terjadi error maka program tersebut secara otomatis akan menampilkan Exception. Contohnya ketika membuat suatu program pembagian dengan pembagi berupa 0. Karena angka tidak dapat dibagi dengan 0, maka program akan menampilkan Exception.


Error yang tidak di-handle akan membuat pengguna aplikasi kebingungan dengan pesan yang bersifat cryptic seperti itu, terlebih lagi terkadang pesan yang ditampilkan mungkin dapat digunakan seorang hacker untuk meretas aplikasi kita. 

Disinilah Exception Handling digunakan. Kita dapat menampilkan pesan yang user-friendly ketika terjadi error dengan menggunakan kerangka try - catch - finally. Ketika terjadi error pada salah satu baris kode pada blok try, maka program akan langsung "lompat" ke blok catch dan sisa kode yang terdapat pada blok try tidak dieksekusi. Pada blok catch ini kita dapat menampilkan pesan akibat error yang di-throw dari blok try. Seperti pada program di bawah ini


Ada beberapa properti yang disediakan class Exception dan turunannya. Pesan yang ditampilkan tersebut biasanya menggunakan properti Message dan StackTrace, dapat dilihat pada output program sebelumnya.


Jika kita menampilkan pesan error menggunakan properti Message dan StackTrace pada class Exception dan turunannya, maka outputnya akan sama, contohnya seperti program di samping

Pada .NET Framework terdapat class Exception yang memiliki bermacam-macam derived class(kelas turunan) seperti class DivideByZeroException di samping.

Dengan menggunakan DivideByZeroException kita dapat mengakses properti yang terdapat pada class Exception itu sendiri (seperti Message dan StackTrace) karena secara tidak langsung class DivideByZeroException adalah turunan dari class Exception. Pada Visual Studio IDE kita dapat menemukan definisi dari class yang telah disediakan oleh .NET dengan klik kanan pada class tersebut lalu pilih Go To Definition. Perhatikan gambar di bawah


Ketika kita melihat definisi dari class DivideByZeroException maka dapat kita lihat bahwa class tersebut adalah turunan dari class ArithmeticException, lalu ketika Go To Definition dari class ArithmeticException maka dapat dilihat bahwa class tersebut adalah turunan dari class SystemException, dan seterusnya kita akan terarah ke class Exception itu sendiri. Dapat dilihat properti-properti yang dimiliki oleh class Exception seperti Message dan StackTrace.

Contoh kasus lain yang menggunakan Exception Handling adalah ketika kita membuat program yang membaca konten dari sebuah file. Untuk membaca konten dari sebuah file pada C# dapat menggunakan class StreamReader yang merupakan bagian dari System.IO.

Contoh program yang membaca file bernama example.txt yang isinya "arliansyahazhary.blogspot.com C# - Exception Handling" yang disimpan di direktori C:\Sample Files\example.txt


Note: Parameter Constructor pada class StreamReader adalah lokasi file yang disimpan. Karena karakter backslash(\) adalah Escape Sequence Character(ESC) (misalnya \n dan \t), maka perlu ditaruh tanda @ di depan agar backslash tidak dianggap ESC. Untuk menampilkan isi dari file, kita dapat menggunakan method ReadToEnd() pada objek yang ber-class StreamReader. Lalu ketika telah selesai, file tersebut ditutup dengan method Close().

Nah, bagaimana jika file tersebut tidak ada? Jika file tidak ada maka program akan menampilkan FileNotFoundException


Ini adalah program yang meng-handle FileNotFoundException


Ketika constructor StreamReader tidak dapat menemukan file yang diinginkan, maka eksekusi akan melompat ke blok catch dan mengeksekusi kode yang ada di dalamnya. Pada class FileNotFoundException terdapat properti FileName sehingga kita dapat menampilkan nama file yang dicari. Lalu buat apa blok finally yang ada di bawahnya? Seperti yang kita ketahui bahwa program akan throw FileNotFoundException ke blok catch ketika mencapai baris kode (file = new StreamReader(@"C:\example.txt");) sehingga kode file.Close() tidak tereksekusi. Untuk itu kita memerlukan blok finally karena program akan mengeksekusi kode pada blok finally tersebut setelah mengeksekusi kode yang terdapat pada blok catch. Pada blok finally kita dapat menulis file.Close()selama objek file tidak sama dengan null.