[Desk Dev] Membuat Aplikasi Desktop Dengan ElectronJS (Pengenalan)

Deskripsi

Dahulu pengembang aplikasi desktop harus mempelajari bahasa pemrograman C++, C, Visual Basic, Fortran, Foxpro atau bahasa pemrograman khusus aplikasi desktop lainnya. Kini, dengan perkembangan teknologi terbaru, kita bisa juga membuat aplikasi cross platform dengan bahasa pemrograman HTML, CSS dan Javascript! Saya sendiri dahulu tidak menyangka kalau bahasa untuk web development bisa digunakan untuk desktop app, karena yang bisa adalah kebalikannya, yaitu bahasa untuk desktop app bisa untuk pengembangan...

Selengkapnya

Dahulu pengembang aplikasi desktop harus mempelajari bahasa pemrograman C++, C, Visual Basic, Fortran, Foxpro atau bahasa pemrograman khusus aplikasi desktop lainnya. Kini, dengan perkembangan teknologi terbaru, kita bisa juga membuat aplikasi cross platform dengan bahasa pemrograman HTML, CSS dan Javascript! Saya sendiri dahulu tidak menyangka kalau bahasa untuk web development bisa digunakan untuk desktop app, karena yang bisa adalah kebalikannya, yaitu bahasa untuk desktop app bisa untuk pengembangan website. Dengan adanya framework ElectronJS, semua ini jadi mungkin. Tidak perlu jauh-jauh mencari contoh aplikasi desktop yang dibuat dengan framework ini, karena sudah familiar kita pakai sehari-hari. Aplikasi tersebut yaitu Visual Studio Code, Whatsapp, Twitch, Slack, Facebook messanger, Microsoft Teams serta Figma. Pasti teman-teman yang baru tahu akan kaget luar biasa. Termasuk saya juga. Aplikasi tersebut sangat familiar saya gunakan, dan ternyata dibangun hanya dengan pondasi HTML, CSS dan Javascript. Untuk lebih lengkapnya kamu bisa kunjungi website ini “Electron Apps to Supercharge Your Productivity”.

electronjs build app.png — Aplikasi yang dibuat dengan ElectronJS

Untuk mencobanya, teman-teman silakan mengunduh aplikasi GIT terlebih dahulu untuk memudahkan melakukan clonning project dari aplikasi github, serta NPM atau NodeJS. Saya menyarankan kamu untuk install NPM atau NodeJS, bebas, karena didalamnya sudah menyertakan kedua library yang menjadi pondasi aplikasi yang akan kita bangun. Untuk alamatnya bisa diunduh melalui:

Git for Windows (didalamnya terdapat GIT GUI, GIT CMD dan GIT BASH)
NPM
Node.js

Pilih sesuai dengan operating system yang kamu punya. Lalu lalukan instalasi sesuai dengan petunjuk yang ada di masing-masing website. Setelah selesai instalasi tools di atas, buka GIT CMD lalu ketik secara berurutan perintah di bawah ini:

electronjs quick start.png — 3 Langkah Membuat Aplikasi Notepad

Penjelasan:

$ git clone https://github.com/electron/electron-quick-start - melakukan proses unduh file contoh aplikasi notepad dengan electronjs.

$ cd electron-quick-start - pindah directory ke folder hasil unduhan sebelumnya.

$ npm install && npm start - install aplikasi lalu jalankan dengan perintah npm start.

Hasilnya akan seperti gambar di bawah ini:

quickstart electronjs.JPG — Hasil Aplikasi Desktop dengan ElectronJS

Sangat mudah bukan?

Untuk seri tutorial berikutnya paralel dengan tutorial Best Practice Pengembangan Aplikasi Website dengan Laravel, saya akan membahas pengembangan aplikasi desktop dengan framework ElektronJS ini. Sebagai pendahuluan ini saja yang dapat saya sampaikan. So, dukung terus melalui karyakarsa, sehingga saya bisa terus memberikan tutorial bermanfaat berikutnya. Salam.

Komentar

Karya ini GRATIS! Tapi kamu boleh kok kasih tip biar kreator hepi 🥰

Kategori

Electronjs Desktop Application

Selanjutnya [Desk Dev] Aplikasi Desktop dengan Bahasa Pemrograman PHP + Framework ElectronJS

Pada tutorial sebelumnya kita sudah berkenalan sedikit dengan Framework ElectronJS yaitu framework untuk membuat aplikasi desktop dengan menggunakan bahasa pemrograman HTML, CSS dan Javascript. Saat ini saya akan memberikan tutorial bagaimana membangun aplikasi desktop dengan menggunakan bahasa pemrograman PHP dengan bantuan ElectronJS ini. Setelah mencari berbagai sumber, akhirnya saya menemukan salah satu library yang bisa membantu kita mengeksekusi bahasa PHP ke dalam ElectronJS sehingga bisa menjadi aplikasi desktop. ElectronJS secara sederhana merupakan sebuah engine layaknya browser. Bowser ini dapat menjalan aplikasi website baik dalam html, css, javascript maupun PHP. Khusus untuk menjalankan aplikasi php di ElectronJS, pembuat library ini menambahkan modul kecil yaitu portabel web server sehingga file PHP bisa dieksekusi. Untuk memulai pembuatan aplikasi desktop dengan PHP ini, silakan terlebih dahulu mengunduh librarynya di alamat berikut:https://github.com/AJ-TechSoul/ELECTRON-4-PHPMasih ingat cara mengunduhnya? kita menggunakan bantuan GIT CMD yang telah kita install pada tutorial sebelumnya. Buka GIT CMD, arahkan folder dalam alamat project kamu, lalu jalankan perintah git clone https://github.com/AJ-TechSoul/ELECTRON-4-PHPSetelah itu change directory dengan perintah cd ELECTRON-4-PHP.Jika sudah masuk ke directory project, ketikkan perintah npm installUntuk menjalankan aplikasi, ketikkan perintah npm startUntuk menggunakan project PHP dengan library ini, sebelumnya siapkan project PHP yang telah kamu miliki. Copy dan paste file tersebut tepat pada lokasi folder Electron-4-PHP.Struktur File Library Electron-4-PHPPada struktur file di atas, kita akan melihat ada file dengan nama index.php. Nah, project php yang sudah di letakkan pada folder ini pastikan file index.php berada pada alamat root, menggantikan file index.php yang lama atau default. Berikut ini hasil menjalankan aplikasi php dengan electronjs.Aplikasi dengan PHP dijalankan dengan mode Desktop AppDemikian tutorial untuk membuat aplikasi desktop dengan bahasa pemrograman PHP dengan bantuan ElectronJS. Semoga teman-teman mendapatkan banyak manfaat dan wawasan baru. Dukung terus penulisan tutorial melalui KaryaKarsa dan nantikan tutorial menarik selanjutnya. Salam

Apakah konten ini melanggar ketentuan yang berlaku sesuai syarat dan persetujuan? Laporkan