Electron : Membangun Aplikasi Desktop Lintas Platform Dengan JavaScript, HTML, Dan CSS

25 Mar 2022 16:00
Dipost oleh Admin
821
0
Share:

Sobatcoding.com - Membuat Aplikasi Pertama dengan Electron JS

Electron adalah sebuah framework yang bisa digunakan untuk membuat aplikasi dekstop dengan teknologi web menggunakan JavaScript, HTML, dan CSS.

Jadi kita bisa membuat aplikasi dekstop based on website.

Berikut kita akan membuat aplikasi sederhana dengan electron js berdasarkan tutorial yang ada di halaman web resminya. Untuk proses instalasi kita membuatuhkan tool npm. Pastikan npm sudah terinstall di komputer kalian.

Buat Project Baru

Kita buat terlebih dahulu folder bernama electron_demo, dan jalankan npm init.

cd electron_demo
npm init -y

Secara otomatis akan ter create file package.json. Kurang lebih didalamnya seperti berikut.

{
  "name": "electron_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
...

Install Electron Dependecies

Selanjutnya kita instal electron package electron menggunakan perintah berikut.

npm install --save-dev electron

Buka file package.json dan tambahkan script berikut

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ." //tambahkan script berikut setelah test
  }
}

Kita bisa mencoba menjalankan dengan perintah npm start, jika muncul pesan error itu karena kita belum membuat file index.js sebagai entry point.

Kita buat terlabih dahulu sebuah file index.js dan simpan di root folder electron_demo.

Buat Halaman HTML

Buat sebuah file index.html di root folder dan masukkan kode berikut.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

Buka kembali file index.js dan masukkan kode berikut.

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Buat sebuah file js bernama preload.js dan masukkan kode berikut.

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

Build App

Kita terlebih dahulu install dependecies electron-forge/cli.

npm install --save-dev @electron-forge/cli
npx electron-forge import

Kemudian system kita akan diceck, jika berhasil maka akan mucul pesan seperti berikut.

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

Selanjutnya kita akan build menggunakan perintah npm run make

npm run make

> my-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

Jika proses build berhasil. Nanti akan muncul folder baru bernama out. Didalamnya terdapat file exe . Cuntoh untuk windows seperti berikut.

Electron folder structure

Hasil build electron seperti berikut.

First app electron js

Jika dalam proses build muncul pesan error seperti berikut.

An unhandled error has occurred inside Forge:
An error occured while making for target: squirrel
Output:
Attempting to build package from 'electron_demo.nuspec'.
Description is required.
Error: Failed with exit code: 1
Output:
Attempting to build package from 'electron_demo.nuspec'.
Description is required.

Hal itu dikarenakan di dalam file package.json attribute description masih kosong. Pastikan semua attribute di dalam package.json terisi.

Demikian tutorial kali ini semoga bermanfaat.

Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.