Memulai Aplikasi Desktop menggunakan Electron JS

Sumber: Electron JS

pengantar

Di dunia yang serba cepat ini, evolusi teknologi tidak pernah berhenti memukau orang. Pada hari-hari awal pengembangan, memiliki situs web multi-halaman dianggap suatu kemewahan. Namun, di zaman modern, kami memiliki situs web luar biasa yang tak terhitung jumlahnya untuk membuat kami terpesona. Selain itu, belakangan ini kita telah menggunakan berbagai aplikasi desktop yang membuat hidup kita lebih sederhana.

Mulai dari editor teks seperti Visual Studio Code, Atom atau Sublime hingga platform konferensi online seperti Zoom, Microsoft Teams atau Skype hingga platform komunikasi seperti Discord atau Whatsapp, kami memiliki pintasan ke banyak aplikasi serupa di desktop kami. Pada artikel ini, kita akan mengembangkan aplikasi desktop menggunakan kerangka kerja JavaScript yang disebut Electron . Ayo masuk!

Apa itu Electron JS?

Electron JS adalah kerangka runtime open-source untuk membuat aplikasi desktop dengan HTML, CSS, dan Javascript. Ini dikembangkan dan dikelola oleh GitHub. Ini menggabungkan mesin rendering Chromium dengan lingkungan waktu proses Node JS. Aplikasi yang dibangun menggunakan Electron bersifat lintas platform , atau dengan kata lain, kompatibel dengan Mac, Windows, dan Linux. Sebagian besar aplikasi desktop populer dikembangkan menggunakan Electron JS.

Kerja

Aplikasi elektron memiliki dua proses yaitu proses utama dan proses renderer . Proses utama membuat contoh jendela browser dan bertanggung jawab untuk mengirim permintaan ke jendela atau mentransfer data antara jendela yang berbeda. Proses perender menjadikan jendela sebagai antarmuka untuk pengguna. Setiap proses memanfaatkan arsitektur multi-proses Chromium. Singkatnya, proses utama mengelola seluruh aplikasi dan proses perender individualnya. Electron juga mendukung berbagai API untuk kedua proses tersebut, sehingga lebih mudah untuk berinteraksi dengan sistem operasi desktop dan sumber dayanya.

Memulai dengan Electron JS

Sebelum memulai dengan Electron, Node JS harus diinstal . Dengan itu, kita siap berangkat. Pergi ke baris perintah, cd ke folder, dan kemudian berikan

npm init -y

npm install electron --save-dev

{
  "name": "electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.1.0"
  }
}

view raw package.json hosted with ❤ by GitHub

Seperti biasa, kami akan mulai menjelajahi Electron dengan membuat aplikasi "Hello World". Untuk menjalankan proses utama, kita harus membuat file main.js dengan isi sebagai berikut.

const { app, BrowserWindow } = require("electron");

//Function to create a window
function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,  //Grants access to use NodeJS API
    },
  });
  mainWindow.loadFile("index.html");
}

//Loads the created window
app.whenReady().then(createWindow);

//Quits the app on closing all the windows
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

//Prevents re-launching of an already running app
app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

view raw main.js hosted with ❤ by GitHub

Fungsi createWindow () membuat jendela browser baru dengan dimensi tertentu dan memuat file index.html . Selain itu, kami menambahkan pendengar untuk menghentikan aplikasi saat jendela ditutup dan mencegah beberapa peluncuran secara bersamaan.

Sekarang untuk merender aplikasi, kami memberikan proses renderer, yaitu file index.html sederhana untuk menampilkan "Hello World!" di jendela baru.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
</head>
<body style="background-color: black;">
    <h1 style="color: aqua;">Hello World!</h1>
</body>
</html>

view raw index.html hosted with ❤ by GitHub

Dengan demikian, kami siap menjalankan aplikasi Elektron pertama kami. Kembali ke baris perintah dan di dalam folder yang dibuat, jalankan

npm start

"Halo Dunia!" Aplikasi elektron

Jika kita mengamati jendela aplikasi, kita memiliki bilah menu default, yang diisi saat aplikasi dijalankan. Dengan pesan “Hello World!” aplikasi berhasil dibuat, kami pindah ke aplikasi sederhana lain untuk menjelajahi beberapa fitur Electron JS lainnya.

Komunikasi Antar Proses

Membangun pengetahuan kita lebih jauh, kita akan melihat pada pengembangan aplikasi multi-jendela dan memastikan interaksi di antara mereka. Fitur ini disebut komunikasi antar proses (IPC) . Perhatikan bahwa satu proses utama dapat memiliki beberapa proses perender. Namun, proses penyaji ini tidak dapat berkomunikasi satu sama lain secara langsung. Mereka harus menggunakan proses utama sebagai perantara. Electron memberi kita dua modul IPC, yaitu ipcMain dan ipcRenderer .

Sumber: OKStateACM

The ipcMain modul yang digunakan untuk berkomunikasi dari proses utama untuk proses penyaji. Modul ini menangani pesan asinkron dan sinkron yang dikirim dari proses perender saat digunakan dalam proses utama.

The ipcRenderer modul yang digunakan untuk berkomunikasi dari proses penyaji untuk proses utama. Modul ini menangani pengiriman pesan sinkron dan asinkron dari proses perender ke proses utama, serta menerima balasan dari proses utama.

Alur modul ipcMain dan ipcRenderer

Dilengkapi dengan pengetahuan tersebut, sekarang kita akan mengembangkan aplikasi yang memasukkan kota dari pengguna di satu jendela dan menampilkan detail cuaca kota saat ini di jendela lain. Detail cuaca diambil dari OpenWeatherMap API . Sebagai fitur tambahan, kami juga akan membuat menu kustom kami sendiri untuk aplikasi tersebut. File main.js sekarang akan terlihat seperti ini,

const { app, BrowserWindow, Menu, ipcMain } = require("electron");
process.env.NODE_ENV = "development";
let mainWindow, addWindow;

//Main window
const createMainWindow = () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,  //Grants access to use NodeJS API
    },
  });
  mainWindow.loadFile("index.html");

  //Quits the app on closing the main window
  mainWindow.on("closed", () => {
    app.quit();
  });

  //Builds custom menu from a template
  const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
  Menu.setApplicationMenu(mainMenu);
};

//Additional window
const createAddWindow = () => {
  addWindow = new BrowserWindow({
    width: 350,
    height: 250,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  addWindow.loadFile("add.html");

  addWindow.on("close", () => {
    addWindow = null;
  });
};

//Loads the main window
app.whenReady().then(createMainWindow);

//Receives data from addWindow and sends it to mainWindow
ipcMain.on("city:find", (e, city) => {
  mainWindow.webContents.send("city:find", city);
  addWindow.close();
});

//Custom menu template
const mainMenuTemplate = [
  {
    label: "File",
    submenu: [
      {
        label: "Enter city",
        accelerator: process.platform == "darwin" ? "Command+W" : "Ctrl+W",
        click() {
          createAddWindow();
        },
      },
      {
        label: "Exit",
        accelerator: process.platform == "darwin" ? "Command+Q" : "Ctrl+Q",
        click() {
          app.quit();
        },
      },
    ],
  },
];

//Modifies the menu for macOS
if (process.platform == "darwin") {
  mainMenuTemplate.unshift({});
}

//Adds developer tools
if (process.env.NODE_ENV !== "production") {
  mainMenuTemplate.push({
    label: "Developer Tools",
    submenu: [
      {
        label: "Dev tools",
        accelerator: process.platform == "darwin" ? "Command+I" : "Ctrl+I",
        click(e, focusedWindow) {
          focusedWindow.toggleDevTools();
        },
      },
      {
        role: "reload",
      },
    ],
  });
}

view raw main.js hosted with ❤ by GitHub

Karena aplikasi melibatkan dua jendela, kami memiliki dua fungsi: createMainWindow () , yang membuat jendela browser baru dan memuat index.html , dan createAddWindow () , yang membuat jendela baru dan memuat add.html. Pengendali kejadian ipcMain (hadir dalam proses utama) menerima data dari jendela tambahan (satu proses penyaji) dan mengirimkannya ke jendela utama (proses penyaji lain). Selain itu, kami membangun menu baru dengan pintasan keyboard dengan membuat template menu baru.

Sekarang jendela utama dibuat oleh file index.html , dengan potongan kode berikut.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather App</title>
  </head>

  <body style="text-align: center; font-size: large; background-color: bisque;">
    <h1>TODAY'S WEATHER</h1>
    <div class="message">
        Press <strong> Ctrl + W (or) File->Enter city </strong> to open a new window to enter input.
    </div>
    <div class="info" style="margin: 10px 10px;">
      <div class="city"><span id="city-name"> </span></div>
      <div class="city"><span id="city-weather"> </span></div>
      <div class="city"><span id="city-temp"> </span></div>
    </div>
  </body>
  <script>
    const {ipcRenderer} = require("electron");

    //Receives the input from main process
    ipcRenderer.on("city:find", (e, city) => {
      fetchData(city);
    });

    //Function to fetch data from API
    function fetchData(city) {
      fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${YOUR_API_KEY}&units=metric`
      )
        .then(function (weather) {
          return weather.json();
        })
        .then(displayWeather);
    }

    //Function to display the data
    function displayWeather(weather) {
      document.getElementById("city-name").innerHTML =
        `<strong> City:  </strong> ${weather.name}, ${weather.sys.country}`;
      document.getElementById("city-weather").innerHTML =
        `<strong> Weather:  </strong> ${weather.weather[0].main}`;
      document.getElementById("city-temp").innerHTML =
        `<strong> Temperature:  </strong> ${Math.ceil(weather.main.temp)} °C`;
    }
  </script>
</html>

view raw index.html hosted with ❤ by GitHub

Kode di atas digunakan untuk menampilkan kondisi cuaca kota tertentu dengan bantuan API OpenWeatherMap. Tapi, di manakah sebenarnya fitur input yang dijanjikan tadi?

Kami menggunakan jendela lain yang berisi formulir untuk menerima masukan dari pengguna. Isi file add.html akan mencapai tujuan itu.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather App</title>
  </head>

  <body style="background-color: bisque; font-size: large;">
      <form class="input">
        <div class="form">
          <label for="name">Enter city name: </label>
          <input type="text" id="city" required />
        </div>
        <br>
        <button type="submit">
          Get Weather
        </button>
      </form>
  </body>
  <script>
    const {ipcRenderer} = require("electron");
    const form = document.querySelector("form");

    //Handles form submission
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const city = document.querySelector("#city").value;
      ipcRenderer.send("city:find", city);
    });
  </script>
</html>

view raw add.html hosted with ❤ by GitHub

Jendela ini memasukkan kota dari pengguna dan mengirimkan data ke proses utama melalui modul ipcRenderer, yang kemudian mentransfer data ke jendela utama untuk mengambil data untuk kota tersebut. Sekarang kita memiliki kodenya siap, kita akan melihat bagaimana aplikasinya ternyata. Seperti yang kita lakukan sebelumnya, untuk memulai aplikasi, berikan

npm start

      
       Input handling in a new window

Detail cuaca Chennai di jendela utama

Voila! Kami telah berhasil mengimplementasikan komunikasi antar proses antara dua jendela menggunakan modul ipcMain dan ipcRenderer.

Mengemas aplikasi

Kami telah melihat bagaimana menjalankan aplikasi secara lokal, tetapi akan merepotkan jika seseorang harus menggunakan perintah untuk menjalankannya setiap saat. Pikirkan tentang bagaimana kami biasanya memasang aplikasi desktop di sistem lokal kami. Kami akan mendapatkan file yang dapat dieksekusi dari beberapa sumber dan menjalankan file itu untuk menginstal aplikasi di sistem kami. Fitur membuat aplikasi tersedia dengan cara yang mudah digunakan disebut pengemasan .

Electron memberi kami pengemas elektron yang menggabungkan seluruh basis kode ke dalam paket masing-masing dan membuat aplikasi siap produksi. Untuk menginstal pengemas elektron, ketik perintah berikut di terminal,

npm install electron-packager --save-dev

"package": "electron-packager ."

npm run package

Fitur Electron JS

Electron JS cukup sederhana untuk memulai, dan sangat dapat disesuaikan. Ini tidak memerlukan antarmuka atau prosedur terpisah untuk mengembangkan aplikasi. Seperti bagaimana halaman web dirancang, kami menggunakan HTML dasar, CSS, dan Javascript untuk merancang aplikasi desktop. Kami juga memutuskan ukuran jendela, opsi menu, dan pintasan keyboard untuk melakukan tindakan yang diinginkan juga. Sebagai lapisan gula pada kue, aplikasi Electron JS kompatibel dengan Linux dan macOS seperti halnya dengan Microsoft Windows.

Cari Blog Ini

label

Memulai Belajar pemrograman

Apa itu Electron.js ?

Memulai Aplikasi Desktop menggunakan Electron JS

pengantar

Apa itu Electron JS?

Kerja

Memulai dengan Electron JS

Komunikasi Antar Proses

Mengemas aplikasi

Fitur Electron JS

Komentar

Posting Komentar

Postingan populer dari blog ini

Apa itu Adobe After Effects ?

Apa itu Adobe Lightroom ?

Apa itu Filezilla

	{
	"name": "electron",
	"version": "1.0.0",
	"description": "",
	"main": "main.js",
	"scripts": {
	"start": "electron ."
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"devDependencies": {
	"electron": "^11.1.0"
	}
	}

	const { app, BrowserWindow } = require("electron");

	//Function to create a window
	function createWindow() {
	const mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true, //Grants access to use NodeJS API
	},
	});
	mainWindow.loadFile("index.html");
	}

	//Loads the created window
	app.whenReady().then(createWindow);

	//Quits the app on closing all the windows
	app.on("window-all-closed", () => {
	if (process.platform !== "darwin") {
	app.quit();
	}
	});

	//Prevents re-launching of an already running app
	app.on("activate", () => {
	if (BrowserWindow.getAllWindows().length === 0) {
	createWindow();
	}
	});

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hello World!</title>
	</head>
	<body style="background-color: black;">
	<h1 style="color: aqua;">Hello World!</h1>
	</body>
	</html>

	const { app, BrowserWindow, Menu, ipcMain } = require("electron");
	process.env.NODE_ENV = "development";
	let mainWindow, addWindow;

	//Main window
	const createMainWindow = () => {
	mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true, //Grants access to use NodeJS API
	},
	});
	mainWindow.loadFile("index.html");

	//Quits the app on closing the main window
	mainWindow.on("closed", () => {
	app.quit();
	});

	//Builds custom menu from a template
	const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
	Menu.setApplicationMenu(mainMenu);
	};

	//Additional window
	const createAddWindow = () => {
	addWindow = new BrowserWindow({
	width: 350,
	height: 250,
	webPreferences: {
	nodeIntegration: true,
	},
	});
	addWindow.loadFile("add.html");

	addWindow.on("close", () => {
	addWindow = null;
	});
	};

	//Loads the main window
	app.whenReady().then(createMainWindow);

	//Receives data from addWindow and sends it to mainWindow
	ipcMain.on("city:find", (e, city) => {
	mainWindow.webContents.send("city:find", city);
	addWindow.close();
	});

	//Custom menu template
	const mainMenuTemplate = [
	{
	label: "File",
	submenu: [
	{
	label: "Enter city",
	accelerator: process.platform == "darwin" ? "Command+W" : "Ctrl+W",
	click() {
	createAddWindow();
	},
	},
	{
	label: "Exit",
	accelerator: process.platform == "darwin" ? "Command+Q" : "Ctrl+Q",
	click() {
	app.quit();
	},
	},
	],
	},
	];

	//Modifies the menu for macOS
	if (process.platform == "darwin") {
	mainMenuTemplate.unshift({});
	}

	//Adds developer tools
	if (process.env.NODE_ENV !== "production") {
	mainMenuTemplate.push({
	label: "Developer Tools",
	submenu: [
	{
	label: "Dev tools",
	accelerator: process.platform == "darwin" ? "Command+I" : "Ctrl+I",
	click(e, focusedWindow) {
	focusedWindow.toggleDevTools();
	},
	},
	{
	role: "reload",
	},
	],
	});
	}