oropesa/Window.js

## readme.txt
"En lo que respecta al desarrollo, una aplicación Electron es esencialmente una aplicación Nodejs."

# In project folder

> npm install electron -save-dev
> npm install electron -g

> npm install uikit
> npm install lodash

> npm install electron-builder --save-dev
> mkdir build

# https://cloudconvert.com/png-to-icns
# background.png & icon.png are equals
build/
|- background.png (256x256)
|- icon.png (256x256)
|- icon.ico (256x256)
\- icon.icns

> npm init
# package.json is created with the project custom data, review, at least, this data:

{
  "name": "custom-app",
  "version": "0.1.0",
  "description": "Just do it.",
  "author": "Oropensando <carlos@oropensando.com>",
  "license": "ISC",
  "main": "main.js",
  "dependencies": {
    "lodash": "^4.17.11",
    "uikit": "^3.0.3"
  },
  "devDependencies": {
    "electron-builder": "^20.39.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "pack": "build --dir",
    "dist": "build"
  },
  "build": {
    "appId": "custom-app.oropensando",
    "productName": "My Custom App",
    "asar": true,
    "dmg": {
      "contents": [
        {
          "x": 110,
          "y": 150
        },
        {
          "x": 240,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    "linux": {
      "target": [
        "AppImage",
        "deb"
      ]
    },
    "win": {
      "target": "NSIS",
      "icon": "build/icon.ico"
    }
  }
}

# Add Window.js
# Add main.js
# Add index.html
# Add index-front.js
# Add functions.js

...

# Meanwhile developing
> npm start

# To create the installer
> npm run dist

## functions.js
// CUSTOM FUNCTIONS

const _ = require( 'lodash' );

/**
 * let theObj = array2obj( { array: [ "one", "two", "three" ] } );
 * // theObj = { 1: "one", 2: "two", 3:"three" }
 *
 * let theObj = array2obj( { array: [ { id: "one", text: "foo" }, { id: "two", text: "bar" } ] }, 'id' );
 * // theObj = { one: { id: "one", text: "foo" }, two: { id: "two", text: "bar" } }
 *
 * @param {object} args
 * @param {array}  args.array
 * @param {string} [args.key]
 * @return {object} obj
 */
let array2obj = function( args ) {
    if( ! args.array || ! args.array.length ) { return {}; }

    let obj = {};
    args.array.forEach( ( value, key ) => {
        let theKey = args.key && value[ args.key ] !== undefined ? value[ args.key ] : key;
        obj[ theKey ] = value;
    });

    return obj;
};

exports.array2obj = array2obj;

## index-front.js
// All of the Node.js APIs are available here.
const { ipcRenderer } = require( 'electron' );
const fns = require( './functions' );

let objMain = { foo: 'bar' };

document.getElementById( 'the-button' )
    .addEventListener('click', () => {
        ipcRenderer.send( 'oro-custom-event', objMain );
    });

ipcRenderer
    .on( 'oro-custom-event-done', ( event, objFile ) => {
        console.log( objFile );
    });

## index.html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Oro - Youtube mp3</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
    <link rel="stylesheet" href="./node_modules/uikit/dist/css/uikit.min.css" />
</head>
<body>

<div class="uk-margin-top uk-margin-bottom">
    <div class="uk-container uk-text-small">

        <p>Hello World!</p>

        <button id="the-button" class="uk-button uk-button-small uk-button-primary">Accion</button>

    </div>
</div>

<script type="text/javascript" src="./node_modules/uikit/dist/js/uikit.min.js"></script>
<script type="text/javascript" src="./node_modules/uikit/dist/js/uikit-icons.min.js"></script>

<script>require('./index-front.js');</script>
</body>
</html>

## main.js
const { app, ipcMain } = require( 'electron' );

const Window = require( './Window' );

let mainWindow;

function createWindow () {
    mainWindow = new Window( { file: 'index.html' } );
    mainWindow.on('closed', () => { mainWindow = null } );
}

app.on( 'ready', createWindow );
app.on( 'activate', () => { if( mainWindow === null ) { createWindow() } } );
app.on( 'window-all-closed', () => { if( process.platform !== 'darwin' ) { app.quit(); } } );

// SERVER FN

ipcMain.on( 'oro-custom-event', ( event, objFile ) => {
    event.sender.send( 'oro-custom-event-done', objFile );
});

## Window.js
const { BrowserWindow } = require( 'electron' );

const defaultProps = {
    width: 1024,
    height: 640,
    webPreferences: { nodeIntegration: true },
    show: false
};

class Window extends BrowserWindow {
    constructor( { file, ...windowSettings } ) {
        super( { ...defaultProps, ...windowSettings } );

        this.loadFile( file );
        this.once( 'ready-to-show', () => { this.show() } );
    }
}

module.exports = Window;
	"En lo que respecta al desarrollo, una aplicación Electron es esencialmente una aplicación Nodejs."

	# In project folder

	> npm install electron -save-dev
	> npm install electron -g

	> npm install uikit
	> npm install lodash

	> npm install electron-builder --save-dev
	> mkdir build

	# https://cloudconvert.com/png-to-icns
	# background.png & icon.png are equals
	build/
	\|- background.png (256x256)
	\|- icon.png (256x256)
	\|- icon.ico (256x256)
	\- icon.icns

	> npm init
	# package.json is created with the project custom data, review, at least, this data:

	{
	"name": "custom-app",
	"version": "0.1.0",
	"description": "Just do it.",
	"author": "Oropensando <carlos@oropensando.com>",
	"license": "ISC",
	"main": "main.js",
	"dependencies": {
	"lodash": "^4.17.11",
	"uikit": "^3.0.3"
	},
	"devDependencies": {
	"electron-builder": "^20.39.0"
	},
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"start": "electron .",
	"pack": "build --dir",
	"dist": "build"
	},
	"build": {
	"appId": "custom-app.oropensando",
	"productName": "My Custom App",
	"asar": true,
	"dmg": {
	"contents": [
	{
	"x": 110,
	"y": 150
	},
	{
	"x": 240,
	"y": 150,
	"type": "link",
	"path": "/Applications"
	}
	]
	},
	"linux": {
	"target": [
	"AppImage",
	"deb"
	]
	},
	"win": {
	"target": "NSIS",
	"icon": "build/icon.ico"
	}
	}
	}

	# Add Window.js
	# Add main.js
	# Add index.html
	# Add index-front.js
	# Add functions.js

	...

	# Meanwhile developing
	> npm start

	# To create the installer
	> npm run dist
	// CUSTOM FUNCTIONS

	const _ = require( 'lodash' );

	/**
	* let theObj = array2obj( { array: [ "one", "two", "three" ] } );
	* // theObj = { 1: "one", 2: "two", 3:"three" }
	*
	* let theObj = array2obj( { array: [ { id: "one", text: "foo" }, { id: "two", text: "bar" } ] }, 'id' );
	* // theObj = { one: { id: "one", text: "foo" }, two: { id: "two", text: "bar" } }
	*
	* @param {object} args
	* @param {array} args.array
	* @param {string} [args.key]
	* @return {object} obj
	*/
	let array2obj = function( args ) {
	if( ! args.array \|\| ! args.array.length ) { return {}; }

	let obj = {};
	args.array.forEach( ( value, key ) => {
	let theKey = args.key && value[ args.key ] !== undefined ? value[ args.key ] : key;
	obj[ theKey ] = value;
	});

	return obj;
	};

	exports.array2obj = array2obj;
	// All of the Node.js APIs are available here.
	const { ipcRenderer } = require( 'electron' );
	const fns = require( './functions' );

	let objMain = { foo: 'bar' };

	document.getElementById( 'the-button' )
	.addEventListener('click', () => {
	ipcRenderer.send( 'oro-custom-event', objMain );
	});

	ipcRenderer
	.on( 'oro-custom-event-done', ( event, objFile ) => {
	console.log( objFile );
	});
	<!DOCTYPE html>
	<html lang="es">
	<head>
	<meta charset="UTF-8">
	<title>Oro - Youtube mp3</title>
	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
	<link rel="stylesheet" href="./node_modules/uikit/dist/css/uikit.min.css" />
	</head>
	<body>

	<div class="uk-margin-top uk-margin-bottom">
	<div class="uk-container uk-text-small">

	<p>Hello World!</p>

	<button id="the-button" class="uk-button uk-button-small uk-button-primary">Accion</button>

	</div>
	</div>

	<script type="text/javascript" src="./node_modules/uikit/dist/js/uikit.min.js"></script>
	<script type="text/javascript" src="./node_modules/uikit/dist/js/uikit-icons.min.js"></script>

	<script>require('./index-front.js');</script>
	</body>
	</html>
	const { app, ipcMain } = require( 'electron' );

	const Window = require( './Window' );

	let mainWindow;

	function createWindow () {
	mainWindow = new Window( { file: 'index.html' } );
	mainWindow.on('closed', () => { mainWindow = null } );
	}

	app.on( 'ready', createWindow );
	app.on( 'activate', () => { if( mainWindow === null ) { createWindow() } } );
	app.on( 'window-all-closed', () => { if( process.platform !== 'darwin' ) { app.quit(); } } );

	// SERVER FN

	ipcMain.on( 'oro-custom-event', ( event, objFile ) => {
	event.sender.send( 'oro-custom-event-done', objFile );
	});
	const { BrowserWindow } = require( 'electron' );

	const defaultProps = {
	width: 1024,
	height: 640,
	webPreferences: { nodeIntegration: true },
	show: false
	};

	class Window extends BrowserWindow {
	constructor( { file, ...windowSettings } ) {
	super( { ...defaultProps, ...windowSettings } );

	this.loadFile( file );
	this.once( 'ready-to-show', () => { this.show() } );
	}
	}

	module.exports = Window;