Scribd
Upload
53 views21 pages

Electron JS

Electron JS

Uploaded by

ammarthaqif12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
53 views21 pages

Electron JS

Electron JS

Uploaded by

ammarthaqif12
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

NodeJS - https://nodejs.

org/en/
Visual studio code - https://code.visualstudio.com/
https://git-scm.com/
Cd go into the folder, eg cd jsproj
npx create-electron-app to-do (to-do is the project name)

cd to-do

npm start
Change index.html file to be like this

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
Code to add new window

var mainWindow; (on top)

mainWindow = new BrowserWindow({


width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
Step 1 create menu items

// Create an array of menus


var mainMenuTemplate = [
{
label:'File'
},
{
label:'Help'
Add this code under the createWindow function

const createWindow = () => {


// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
Adjust the menu item to add subitems array of object
var mainMenuTemplate = [

{
label: 'File',
submenu: [
{
label: 'Add new Item'
},
{
label: 'Clear all item'
},
{
Add event handler to exit the app

{
label: 'File',
submenu: [
{
label: 'Add new Item'
},
{
label: 'Clear all item'
Add onclick in Add new Item, to create a new window

var addWindow; (on top)


addWindow = new BrowserWindow({
width: 400,
height: 300,
title:"Add new Item",
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
Create a new add.html to show the UI, follow example with our localstorage exercise

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Add new item</title>
Add a new add.js file, follow localStorage exercise

function addNewItem(){
var name =
document.getElementById('name_input').value;
var description =
document.getElementById("description_input").value;
var place =
document.getElementById("place_input").value;
Optional for styling use Bootstrap

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Add new item</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]
Pass data from Rendere to index.js
// Import untuk menghantar ke index.js
var electron = require('electron');
var {ipcRenderer} = electron;

function addNewItem(){
var name = document.getElementById('name_input').value;
var description = document.getElementById("description_input").value;
var place = document.getElementById("place_input").value;

var newItem = {
name:name,
description: description,
Our Main (index.js)

const { app, BrowserWindow, Menu,ipcMain } =


require('electron');

ipcMain.on("item:add", function(e,item){
alert(“saya terima”)
})
Main (index.js) send to windows (main.js)
ipcMain.on("item:add", function(e,item){
mainWindow.webContents.send('item:add',item);
addWindow.close()
})
Renderer (main.js) receive and add in UI

ipcRenderer.on("item:add", function(e,item){

var newItem = document.createElement('li');


newItem.innerHTML = `${item.name} - $
{item.description} - ${item.place}`
console.log(item)

document.getElementById("list").appendChild(newItem);
Another example with menu clear Items
Main (index.js) send to window (main.js)

{
label: 'Clear all item',
click(){
mainWindow.webContents.send("item:clear");
}
},
Renderer (main.js) receive and clear the list

ipcRenderer.on("item:clear", function(){
document.getElementById("list").innerHTML = "";
})
Finally build the file (exe)
Npm run make

Change icon here : https://stackoverflow.com/questions/31529772/how-to-set-app-icon-for-electron-atom-shell-app

"main": "src/index.js",
"win":{
"icon":"./public/icons/png/256x256.png"
},
"mac":{
"icon":"./public/icons/png/256x256.png"
},
http://www.omdbapi.com/? https://www.omdbapi.com/?
s=Harry&apikey=87d10179 i=tt1201607&apikey=87d10179

Enter movie name

You might also like