In this tutorial I'm going to start a new curriculum to build a shopping list app with Electron framework. that will allow to build a simple shopping list with only javascript,html,css also I'm going to deal with multiple functions and I will explain everything clearly and step by step.
Go to https://nodejs.org/en/
Then download Node.js 8.9.4 or above (LTS is recommended)
Create a new folder for your project for example:
C:\Projects\ShoppingList
Open your editor and create a new file inside your ShoppingList folder
for example
Index.js
Then open command prompt or terminal
Then type npm init
Hit Enter.
Then type your project name shoppinglist (lowercase only)
Then Hit Enter.
Then answer the rest of question to skip any option value just hit enter.
The following is just an example:
package name: shoppinglist
version: (1.0.0)
description: a shopping list tutorial
entry point: (index.js)
test command:
git repository:
keywords:
author: jinzo
license: (MIT)
That will create a new package.json file
Content
{
"name": "shoppinglist",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"author": "jinzo",
"license": "MIT"
}
Now open command prompt or terminal then type npm install electron --save
Then Hit Enter.
Note:
Electron package size is about 140MB and it may take some time.
The final result
Then open index.js that we have already created before.
Type const electron = require('electron'); to add electron framework to our workspace.
then add url & path as well like the following:
const electron = require('electron');
const url = require('url');
const path = require('path');
Then define app, window for electron as objects
const {app, BrowserWindow, Menu} = electron;
Then you've to create a variable to represent our main window for shopping list
let mainWindow;
Then now you have to make a listen for the app to be ready. and once the app is ready we gonna run a function we will call it mainWindow then set it to a new browser window then added an empty object. because there is no configuration options we need right now for this.
app.on('ready', function(){
mainWindow = new BrowserWindow({});
}));
Now create a new HTML file then call it mainWindow.html
<!DOCTYPE html>
<html>
<head>
<title>ShoppingList</title>
</head>
<body>
<h1>My Shopping List</h1>
</body>
</html>
Then we gonna have to load an HTML file to the window using protocol file.
app.on('ready', function(){
mainWindow = new BrowserWindow({});
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'mainWindow.html'),
protocol: 'file:',
slashes:true
}));
});
so our final result for index.js will be like the following:
const electron = require('electron');
const url = require('url');
const path = require('path');
const {app, BrowserWindow, Menu} = electron;
let mainWindow;
app.on('ready', function(){
mainWindow = new BrowserWindow({});
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'mainWindow.html'),
protocol: 'file:',
slashes:true
}));
});
Then open command prompt and type:
npm start
Next tutorial I will added an interactive functions to get the best results for our electron app as well as we gonna remove the default menu items and customize it for our shopping list and so on.
@jinzo for an open source project.