Saat ini banyak sekali bermunculaan cara membuat sofware aplikasi dengan cara instant. Tidak perlu coding dengan bahasa aslinya. Seperti ketka kita membuat aplikasi android, kita bisa menggunakan bahasa bahasa lain seperti html dan javascript dengan bantuan phonegap ,ionic , ataupun cordova.

Kali ini kami akan mencoba membuat sofware cross platform yang bisa di jalankan di windows, linux maupun mac os dengan menggunakan electronjs. Enak bukan? satu coding bisa di jalankan di tiga os. Enaknya lagi jika anda sudah megnenal javascript dan html, layout atau interface dari electron js adalah dengan html file.

Apa itu electron js?

Kalau di lihat dari basic nya, electron js sendiri adalah menggunakan 2 dukungan yaitu menggunakan chromium sebagai antarmukanya dan node.js sebagai corenya. Sehingga aplikasi kita ini berjalan di browser atau dengan kata lain web programming akan tetapi bisa berjalan di server kita. Kelebihanya adalah jelas sofware kita akan berinteraksi dengan PC kita. Berbeda dengan jika kita menjalankan website, maka aplikasi kita berhubungan dengan servernya.

Ok tanpa basi basi mari kita langsung mencoba untuk mempraktekanya. Akan tetapi terlebih dahulu kita install sofware/ componen yang dibutuhkan

Install NodeJS

Tahap pertama yang harus kita lakukan adalah install nodejs. Anda bisa langsung menuju ke https://nodejs.org/en/ . Sesuaikan dengan os yang rekan rekan miliki. kali ini saya menggunakan windows, sehingga saya akan memilih nodejs yang di install di windows.

Untuk menginstalnya sangat mudah. Anda tinggal download saja installernya, kemudian anda install. Anda tinggal next saja semua instruksi yang ada. Jika anda masih kesulitan dalam menginstall nya silahkan lihat video tutorial yang ada di youtube ini. https://www.youtube.com/watch?v=2tYG5N1Mc8w

Persiapan Pembuatan Aplikasi

      • Tahap pertama adalah salahkan anda membuat dulu sebuah directory untuk bekerja. semisal anda akan membuat projectnya di C:\projectpertama
      • Setelah itu anda buka comand promtnya. setelah itu silahkan reken rekan semua masuk ke direktory C:\projectpertama  Caranya adalah dengan ketikan cd projectpertama
      • Setelah anda masuk ke dalam folder project pertama sekarang keitkan perintah npm init  C:\projectpertama>npm init
      • Setelah itu isikan data datnya. yang perlu anda isi adalah pada bagian  package name , Author silahkan di isi sesuai dengan keinginan anda yang lain bisa di tinggalkan.
      • Setelah itu anda harus mengiinstal electron js package dengan perintah berikut npm install electron -save-dev  C:\projectpertama>npm install electron –save-dev
      • Setelah itu buka file pakcage.json denga text editor anda  kemudian cari baris ke 7, rubah kode “test”: “echo \”Error: no test specified\” && exit 1″ menjadi  “start”: “electron .”

Tahap Koding

Setelah itu anda bisa membuat file index.js dan file index.html

File Index.js bisa anda isikan seperti contoh di bawah ini.

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
var ipcMain = require('electron').ipcMain;
global.sharedObj = {prop1:null};
ipcMain.on('show-prop1', function(event){
   console.log(global.sharedObj.prop1);
});
let win
function createWindow() {
   win = new BrowserWindow({width: 800, height: 500, frame: true, fullscreen: false})
   win.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html') ,
      protocol: 'file:',
      slashes: true
   }))
   win.webContents.openDevTools()
   win.on('closed',() => {
    win=null
   })
}
app.on('ready', createWindow)

Dalam code diatas kita akan melihat ada parameter width dan height, itu bisa kita set sesuai dengan ukuran windows yang teman teman inginkan. Jika ingin memperbesar, tinggal tambah saja . Dan apa bila ingin memperkecil rekan rekan tinggal kurangi ukuranya.

Dan disana kita meilhat da kode pathname: path.join(__dirname, ‘index.html’)  maka kita harus membikin file index.html untuk menampilkan interface form aplikasi yang akan kita buat. File index.html bisa rekan rekan sesuaikan isinya. Anda bisa menggunkan nya dengan bootstrap dan framework lainya. Jika anda ingin standar, maka anda bisa menuliskan html standar seperti kode dibawan ini.

 

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Setelah semuanya selesai , anda bisa menjalankan script diatas dengan cara mengetikan di cmd promt dengan perintah npm start C:\projectpertama>npm start

Gimana sobat ? apakah sofware anda berhasil di jalankan, silahkan anda mencobanya sendiri ya. semoga berhasil.

Tahap Compile Untuk Distribusi

Setelah semua berjalan dengan baik, saatnya kita compile project kita agar bisa di distribusikan ke orang lain. Tentunya akan repot jika kita share dalam bentuk code. Pengguna harus installnodejs dan lain sebagainya. Untuk itu mari kita langsung kita praktekkan bagaimana cara mendistribusikannya.

Pertama tama kita install dulu package untuk compile yaitu electron-packager dengan perintah npm install electron-packager –save-dev . Setelah itu kita jalankan perintah untuk mencompilenya

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
  • <sourcedir> adalah lokasi project kita berada
  • <appname> disikan dengan nama aplikasi kita, yang bisa kita lihat di package.json
  • <platform> bisa kita isi linux, darwin ( mac os ) dan win32 ( windows )
  • <arch> adalah arsitekturnya. Bisa kita isi dengan ia32  untuk 32 bit dan x64 untuk 64 bit
  • Jika kita ingin mengcompile ke semua arsitektur, maka kita bisa menggunakan –platform=all –arch=all

Dalam kasus ini command promt saya berada pada project ini. Project dengan nama halloword dan platform windows untuk 64 bit. Jadi saya mengeksekusinya dengan perintah

electron-packager ./ “halloword” –platform=win32 –arch=x64

 

Ok sobat semuanya silahkan mencoba untuk membuat aplikasi anda sendiri dengan electron js. Semoga bermanfaat

Pin It on Pinterest

Share This