Mungkin tahun - tahun ini merupakan tahun dimana aplikasi website mulai bermunculan dan populer, banyak orang yang mulai beralih kesana bahkan saya pun juga ikut kesana karena suatu alasan yang agar bisa survive dari derasnya pembaruan teknologi. Tahun tersebut telah dilewati hingga pada suatu ketika saya baru menyadari ada sesuatu yang kurang pada pembuatan aplikasi berbasis website ini, mungkin juga alasan ini akan sangat terlihat aneh untuk konektivitas yang sudah bisa ditembus tanpa batas dengan adanya internet. Aksesibilitas, saya tidak pernah mengatakan bahwa membuat sebuah website merupakan cara yang sangat sulit untuk membuat aksesibilitas yang mudah tapi dari cara mengakses aplikasinya sudah pasti kita akan membutuhkan browser dan mengetik alamat url yang dituju. Ya ini bukan masalah untuk sebagian orang yang hafal dengan alamat url tapi untuk yang tidak familiar dengan yang namanya alamat URL ataupun domain website sekalipun, ini mungkin salah satu kesulitan yang akan dihadapi pengguna. Sangat fair kita katakan bahwa "kalau mau buka facebook ya tinggal search di google, pasti ketemu di paling atas", bagaimana untuk aplikasi website yang rasanya sangat privasi apakah perlu kita searching dulu di google terus ketemu paling atas. Mungkin tidak seperti itu.
Berkenalanlah saya dengan salah satu framework yang memungkinkan para pengembang aplikasi membuat sebuah aplikasi desktop dengan menggunakan javascript, tidak lain dan tidak bukan framework tersebut bernama **electron. **Electron merupakan salah satu framework javascript yang digunakan untuk membuat cross platform desktop application atau aplikasi desktop yang dapat digunakan diseluruh sistem operasi yang didukung, dengan menggunakan javascript anda dapat mengembangkan electron dengan cara apapun. Pada dasarnya electron dibangun menggunakan **NodeJS **dan Chromium. Hal terkeren yang bisa kalian temui pada **electron **sudah dapat ditemui di beberapa aplikasi yang sering kamu gunakan seperti : Microsoft Visual Studio Code, Atom, Slack dan yang lebih populer lagi yaitu Whatsapp.
Ada dua hal yang bisa kamu lakukan jika ingin membangun sebuah aplikasi desktop menggunakan electron yaitu : menggunakan aplikasi web yang ada untuk dijadikan aplikasi desktop atau membuat aplikasi baru, yup anda bisa menggunakan aplikasi yang sudah ada untuk dijadikan sebagai aplikasi desktop dengan electron karena pada dasarnya aplikasi ini dibuat menggunakan webview. Nah jika kebetulan anda ingin membuat sebuah aplikasi desktop dengan menggunakan VueJS, anda dapat mewujudkan keinginan tersebut dengan menggunakan sebuah plugin yang bernama electron-builder.
Electron buider merupakan sebuah vue-cli plugin yang digunakan untuk mengintegrasikan project vue yang kamu sedang kerjakan atau kamu miliki dengan electron, dengan mengusung tagline "A Vue CLI plugin for electron with no required configuration" anda dapat dengan mudah membuat project vue ataupun mengintegrasikan project vue yang sudah ada dengan electron.
Memulai Proyek
Sebelum anda membuat proyek baru ini ada beberapa hal yang harus diperhatikan sebelum menggunakan plugin electron builder diantaranya :
- Electron-Builder hanya dapat berjalan pada vue-cli 3
- Aplikasi yang digunakan untuk menggunakan electron-builder harus menggunakan vue-cli 3
- Vue development tool tidak dapat berjalan pada electron versi 6.0 dan mode dark pada windows
- Beberapa issue seperti vue tidak berjalan saat production dan lain sebagainya bisa dilihat pada halaman berikut.
Setelah beberapa hal tersebut dirasa aman anda dapat melanjutkannya pada beberapa proses yaitu :
- Membuat aplikasi vue dengan menggunakan vue-cli dengan perintah **vue create projectname **atau menggunakan project yang sudah ada.
- Tambahkan plugin electron-builder menggunakan perintah **vue add electron-builder **pada command prompt atau terminal.
- Saat proses memasang **electron-builder **anda akan diminta untuk memilih versi electron, gunakan versi 5.0 atau versi 6.0.
- Proses pemasangan **electron-builder **akan membutuhkan data sekitar 50 - 80 MB.
- Setelah pemasangan plugin selesai anda bisa menjalankannya dengan menggunakan perintah **npm run electron:serve **untuk menjalankan project vue dengan menggunakan electron.
- Setelah dirasa aplikasi sudah siap untuk digunakan pada production maka gunakan perintah npm run electron:build, seluruh hasil build akan disimpan pada folder dist_electron
Sumber :