Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Pengenalan Aplikasi Desktop HTML5 dengan Node-Webkit

by
Read Time:10 minsLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dengan menggunakan Node.js, kita dapat membuat aplikasi web dengan mudah. Sekarang, berkat node-webkit, kita juga dapat membuat aplikasi desktop dengannya, dengan menggunakan kombinasi HTML5 dan Node yang unik.


Pengenalan

Pustakanya menggabungkan mesin WebKit dan Node.js dengan cara yang unik. Baik WebKit dan Node berbagi konteks yang sama, memungkinkan Anda menulis kode Anda seperti yang dimaksudkan untuk dieksekusi di browser, namun dengan penambahan semua fitur Node.

Daftar penggunaan yang tidak ada habisnya. Anda dapat membuat aplikasi bisnis, editor teks dan gambar, permainan, presentasi, panel admin, dll. Cukup sebutkan aplikasi desktop yang ingin Anda buat, dan saya dapat meyakinkan Anda bahwa ini akan mungkin dilakukan dengan node-webkit.

Dalam tutorial ini, saya akan menunjukkan cara memulai dengan menunjukkan cara membuat editor teks sederhana.


Persiapan

Pertama, Anda harus mendapatkan pustakanya. Download versi yang sesuai untuk sistem operasi Anda (aplikasi itu sendiri akan berjalan pada semuanya) dari github dan unzip di manapun yang Anda mau. Sekarang, mari kita membuat struktur folder dasar. Kita akan memiliki folder untuk file HTML (.html) dan untuk file JavaScript (.js). Selain itu, buat file package.json di direktori yang sama dengan nw yang dapat dieksekusi di dalam dan folder node_modules untuk menyimpan modul yang akan kita buat.


Package.json

Hal pertama yang harus dilakukan adalah mengisi field yang dibutuhkan di file package.json. Dalam kasus node-webkit ini adalah name dan main (pada Github Anda dapat menemukan daftar lengkapnya dari pilihan package.json yang tersedia). Yang pertama persis sama seperti pada kasus aplikasi Node.js biasa. Yang kedua harus berupa path (relatif atau absolut) ke file HTML utama yang akan ditampilkan pada saat aplikasi dimulai. Dalam kasus contoh kita, file package.json akan terlihat seperti ini:

Sekarang jika Anda menjalankan aplikasi Anda dengan menggunakan nw yang dapat dieksekusi, Anda harus melihat layar kosong seperti ini:

blank_appblank_appblank_app

File Utama

Membuat antarmuka pengguna menggunakan node-webkit tidak berbeda dengan membuat halaman web (dengan sedikit perbedaan yang Anda ketahui tentang mesin rendering, jadi Anda tidak perlu memberikan fallback untuk browser lama, atau menggunakan pustaka seperti jQuery - dan sebenarnya Anda seharusnya tidak perlu, karena mereka termasuk kode fallback yang akan memperlambat aplikasi Anda). Mari membuat file index.html yang akan kita gunakan:

Mari kita sertakan (dan membuat) file JavaScript utama yang akan kita gunakan, di dalam body, jadi akan dijalankan setelah DOM dimuat:

Sekarang satu-satunya hal yang akan berubah saat Anda membuka aplikasi adalah judulnya.


Mari Menggunakan Beberapa Node

Untuk menunjukkan betapa mudahnya Anda dapat menggunakan Node.js di node-webkit, mari membaca isi package.json dan mencetaknya di layar. Buatlah file js/main.js dan letakkan kode berikut di dalamnya:

Seperti yang Anda lihat, kodenya terlihat persis sama seperti jika Anda menuliskannya untuk Node. Tapi kemudian kita menggunakan document.write untuk menaruh isi file di halaman. Tidak perlu setup server lokal apapun.

Sekarang buka aplikasi dan Anda harus melihat sesuatu seperti ini:

file_contents_printedfile_contents_printedfile_contents_printed

Modul

Ada hal bagus lainnya tentang node-webkit; Anda tidak perlu menyertakan serangkaian tag <script> di HTML jika Anda ingin membagi kode Anda menjadi modul. Anda bisa melakukannya seperti yang Anda lakukan di Node.js - menggunakan require. Mari membuat modul sederhana untuk membaca isi file ke textarea atau menuliskannya ke file. Beri nama file-nya file.js dan masukkan ke direktori node_modules. Sekarang letakkan keseluruhan struktur modul di dalamnya:

Seperti yang dapat Anda lihat, ini akan menjadi kelas statis dengan dua metode public - satu untuk membuka file dan satu untuk menyimpannya.

Metode open akan terlihat seperti ini:

Cukup sederhana kan? Fungsinya menerima path ke file sebagai parameter pertama dan meletakkan isi file ke dalam elemen dengan id "editor". Kita juga harus melewatkan objek document ke fungsinya karena skrip dipanggil menggunakan require dari Node dan tidak memiliki akses ke barang milik WebKit secara langsung.

Metode save sesederhana yang sebelumnya:

Sekarang mari kita uji jika semuanya berhasil. Ubah isi js/main.js menjadi ini:

Sekarang jika Anda pergi ke konsol developer tools dan klik tombol developer refresh di pojok kanan jendela, Anda akan melihat dua fungsi dari modul ini tercatat. Ini adalah hal lain yang berguna di node-webkit - panggilan console.log Anda ditampilkan di konsol developer tools, jadi lebih mudah men-debug aplikasi Anda.

dev_tools_logdev_tools_logdev_tools_log

Input File Node-Webkit

Mari menambahkan dua input file yang akan kita butuhkan nanti:

Perhatikan atribut nwsaveas pada input kedua. Ini adalah jenis input khusus dari node-webkit, yang mengijinkan pengguna untuk memilih file yang tidak ada. Kedua input tersembunyi, karena kita hanya akan mengaksesnya dari JavaScript. Di node-webkit, input file dimodifikasi dengan cara yang memungkinkan Anda melakukan event click padanya, sehingga Anda dapat membuka dialog file tanpa pengguna mengklik input (tanpa kebutuhan akan penyelesaian masalah seperti input tak terlihat di atas tombol). Sekarang kita bisa berpindah ke JavaScript.

Pertama, hapus panggilan console.log dari file js/main.js. Sekarang letakkan kode ini di sana:

Kode ini bertanggung jawab untuk menampilkan dialog Open dan Save. Fungsi clickInput melakukan pekerjaan utama di sini - ia mensimulasikan event click pada elemen input - di browser normal, ini tidak mungkin karena alasan keamanan, tapi ini bukan ancaman keamanan sama sekali. Kemudian, ada event handler normal keyup yang memeriksa apakah kombinasi tombol yang benar ditekan (Ctrl+O atau Ctrl+S) dan "click" pada input. Perhatikan bahwa ini juga tidak mungkin dicapai dalam browser - kombinasi seperti Ctrl+O dan Ctrl+S dicadangkan untuk penggunaan internal browser dan tidak ada event yang terjadi saat mereka ditekan (hanya Firefox yang menjalankan event untuk mereka).

Sekarang tekan tombol developer refresh dan Anda akan melihat dialog yang sesuai saat Anda menekan Ctrl+S atau Ctrl+O. Mereka tentu saja tidak melakukan apapun untuk saat ini.


Membuat Editor

Sekarang, karena kita akan membuat editor teks, kita butuh sesuatu untuk ditulis. Tambahkan textarea ke HTML:

Selanjutnya kita harus menyelesaikan kode membuka/menyimpan. Mari membuat event listener onchange untuk input open dan save:

Berkat modul yang dibuat sebelumnya, kodenya sangat sederhana. Ini juga dimungkinkan berkat node-webkit, karena di browser (sekali lagi untuk alasan keamanan), nilai elemen input file diatur ke path palsu - inilah path yang dipilih. Sekarang buka aplikasi (atau tekan tombol developer refresh, jika Anda tidak menutupnya) dan Anda harus memiliki editor teks yang bekerja sempurna.


Peningkatan Lebih Lanjut

Kita juga bisa melakukan beberapa hal lain untuk membuat editor sedikit lebih canggih dan berguna. Sebagai contoh, mari buka jendela baru saat pengguna menekan Ctrl+N. Pertama, tambahkan require ini ke bagian atas skrip:

Modul nw.gui adalah pustaka node-webkit yang terkait dengan antarmuka pengguna (Anda dapat membaca lebih lanjut tentangnya pada Github Node-webkit). Selanjutnya tambahkan else if ke listener keyup dokumen:

Dan voila! Jika Anda me-refresh aplikasi, sekarang Anda dapat menekan Ctrl+N untuk membuka jendela baru. Fungsi ini berbeda dari window.open normal. Anda bisa melewatkan berbagai pilihan jendela sebagai parameter kedua. Daftar apa yang dapat Anda tetapkan di sana tersedia di dokumentasinya.

Hal lain yang mungkin berguna dalam editor teks adalah menu aplikasi (menu yang berada di bawah judul bar di Windows/Linux dan di bagian atas layar di Mac). Di node-webkit ini cukup sederhana. Pertama, mari membuat menunya:

Jenis menubar dicadangkan untuk menu aplikasi. Sekarang kita bisa menambahkan item ke dalamnya. Biarkan menu File:

Sekarang mari menambahkan beberapa item ke menu ini:

menu.items[0] adalah item pertama dari menu aplikasi kita (Anda juga dapat menetapkannya ke variabel saat membuatnya jika Anda mau). Kita menambahkan item baru ke submenu, dan setiap item mendapatkan callback click untuk menangani klik padanya. Metode gui.Window.get mendapatkan jendela saat ini, jadi kita bisa menutupnya saat pengguna memilih opsi Close di menu File.

Akhirnya, kita bisa menugaskan menu ke jendela:

Sekali lagi, kita menggunakan gui.Window.get untuk mendapatkan jendela saat ini, lalu kita menugaskan menu kita ke properti menu miliknya. Harap dicatat, meskipun kita dapat menetapkan menu yang berbeda ke setiap jendela, di OSX (Mac), satu aplikasi hanya dapat memiliki satu menu (yang bersifat global untuk semua jendela), jadi jika Anda ingin aplikasi Anda digunakan di Mac, Anda sebaiknya menghindari penggunaan menu yang berbeda pada jendela yang berbeda.

Sekarang jika Anda membuka atau me-refresh aplikasi Anda, Anda harus melihat menu sistem di bawah titlebar:

system_menusystem_menusystem_menu

Pengemasan Aplikasi

Sekarang jika Anda ingin berbagi aplikasi dengan pengguna lain, Anda dapat mengemasnya menjadi satu file, sehingga pengguna dapat mendownload executable node-webkit yang sesuai dengan platform mereka dan meluncurkan aplikasi Anda dengannya. Pertama, mari kita hapus toolbar yang membuat jendela terlihat seperti browser - sangat menyenangkan untuk memilikinya saat pengembangan, namun pengguna Anda mungkin tidak ingin melihatnya. Kita bisa mencapainya dengan menyetel window.toolbar menjadi false di package.json, jadi terlihat seperti ini:

Sekarang jika Anda membuka aplikasinya (tidak ada yang akan berubah jika Anda me-refresh-nya saja, package.json dimuat hanya saat startup), Anda harus melihat hasil akhirnya:

final_resultfinal_resultfinal_result

Pengemasan aplikasi ini cukup sederhana. Buatlah arsip .zip dengan semua aset Anda (semua file yang Anda buat, tanpa file yang disertakan dengan node-web) dan ubah ekstensinya menjadi .nw. Itu saja. Jika pengguna men-download node-webkit dan paket Anda, mereka hanya perlu memasukkannya ke dalam direktori node-webkit dan menjalankan nw. Uraian terperinci, dengan beberapa tip lagi, tersedia di github node-webkit.

Sekarang editor Anda siap dikirim ke pengguna Anda.


Kesimpulan

Seperti yang Anda lihat, node-webkit adalah pustaka yang sangat menjanjikan dan hebat. Dengan seringnya pembaruan dan perbaikan, dan didukung oleh Intel, hampir tidak ada kemungkinan akan dihentikan, yang terkadang dapat terjadi pada proyek open source.

Bagikan pendapat Anda tentang proyek ini di komentar di bawah ini. Saya pribadi berpikir itu adalah hal terbaik di luar sana jika Anda ingin membuat aplikasi desktop menggunakan Node.js dan HTML.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.