Tutorial - How To Creating First Desktop App With HTML Using ElectronJS [Bahasa]
Summary : Here i will explain how to create first Desktop App with HTML using ElectronJS for beginners
Language : Indonesian
Aplikasi web semakin berkembang pesat setiap tahunnya, namun masih ada ruang untuk aplikasi desktop yang memiliki akses penuh ke perangkat komputer Anda. Sekarang Anda dapat membuat aplikasi desktop menggunakan HTML, JS, dan Node.js yang sudah terkenal, lalu mengemasnya menjadi file eksekusi dan mendistribusikannya sesuai Windows, OS X dan Linux, yaitu dengan ElectronJS.
Memulai Dengan Elektron
Aplikasi yang dibuat dengan Electron hanyalah situs web yang dibuka di browser yang tersemat web kromium. Selain API HTML5 biasa, situs web ini dapat menggunakan rangkaian lengkap modul Node.js dan modul Elektron khusus yang memberi akses ke sistem operasi.
Tutorial ini akan membuat aplikasi sederhana yang mengambil salah satu contoh umpan RSS dan menampilkannya dalam korsel yang keren. Semua file yang dibutuhkan agar aplikasi dapat di download
https://electronjs.org/
Ekstrak isinya dalam direktori Anda
Jalankan Aplikasi
Karena aplikasi Elektron hanyalah aplikasi Node.js maka Anda harus memasang npm terlebih dahulu, cara menginstal npm buka di http://blog.npmjs.org/post/85484771375/how-to-install-npm
Buka cmd atau terminal baru di direktori dengan file yang diekstrak dan jalankan perintah ini:
Untuk membuat folder node_modules yang berisi semua dependensi Node.js yang diperlukan agar aplikasi dapat bekerja. Dengan terminal yang sama seperti sebelumnya masukkan yang berikut ini:
Aplikasi ini akan membuka jendela dengan sendirinya. Perhatikan semua menu bar yang ada di atas.
Saat dikemas untuk umum, maka akan dipasang seperti program normal dan dibuka cukup dengan mengklik ganda pada ikonnya.
Bagaiamana Cara Membuatnya
Di sini, akan membahas file yang paling penting dalam aplikasi elektron manapun. Mulai dengan package.json, yang menyimpan berbagai informasi tentang proyek, seperti versi, dependensi npm dan pengaturan penting lainnya.
Jika Anda mengerti dengan node.js sebelumnya, Anda sudah tahu bagaimana ini bekerja. Hal yang paling penting untuk dicatat di sini adalah Script properti, yang menentukan perintah start npm, memungkinkan Anda menjalankan aplikasi seperti yang dilakukan sebelumnya. Saat Anda memerintahnya, itu meminta elektron untuk menjalankan file main.js. File JS ini berisi skrip pendek yang membuka jendela aplikasi, dan mendefinisikan beberapa opsi dan penanganam program.
Pertama, kita mendefinisikan jendela browser dan mengatur ukuran awalnya. Kemudian, kita memuat file index.html di dalamnya, yang bekerja sama untuk membuka file HTML di browser Anda.
Seperti terlihat, file HTML itu berupa sebuah wadah untuk korsel dan sebuah paragraf adalah statistik CPU dan RAM yang ditampilkan.
HTML juga terhubung ke stylesheet yang dibutuhkan, perpustakaan JS dan skrip. Jika jQuery terlihat tidak biasa atau aneh, maka untuk informasi lebih lanjut buka :
https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined
Akhirnya, inilah JavaScript sebenarnya untuk aplikasi. Di dalamnya kita mengakses umpan RSS, mengambil sebuah contoh artikel terbaru dan menampilkannya. Jika kita mencoba melakukan ini di lingkungan browser, tidak akan berhasil, karena umpan RSS berada pada domain yang berbeda dan diambil dari situ dilarang. Di Electron, bagaimanapun, keterbatasan ini tidak berlaku dan kita bisa mendapatkan informasi yang dibutuhkan dengan permintaan AJAX.
Hal yang keren tentang kode di atas, adalah bahwa dalam satu file yang kita gunakan bersamaan:
- Perpustakaan JavaScript - jQuery dan jQuery Flipster untuk membuat korsel.
- Modul asli Electron - Shell yang menyediakan API untuk tugas terkait desktop, dalam kasus ini membuka URL di browser web.
- Modul Node.js - OS untuk mengakses informasi memori sistem, Pretty Bytes untuk pemformatan.
Ada satu hal penting lainnya yang harus dilakukan agar aplikasi Anda siap untuk penggunaan akhir. Anda perlu mengemasnya menjadi exe yang bisa dimulai dengan klik dua kali pada komputer pengguna. Karena aplikasi Elektron dapat bekerja pada beberapa sistem operasi dan setiap OS berbeda, perlu ada distribusi terpisah untuk Windows, untuk OS X dan Linux.
Untuk cara penggabungan sebaiknya Anda lihat di https://github.com/electron-userland/electron-packager
Demikian tutorial ini, semoga dapat bermanfaat.
Posted on Utopian.io - Rewarding Open Source Contributors