Agenda

• Intro
• Technologies
  • Node.js
  • Electron
• About Electron
• Demo
• Conclusion

Oracle APEX expert practice since 2004

Oracle APEX Center of Excellence

Comprehensive Consulting Services

• Training & coaching
• Architecture & Analysis
• Project Management
• On-site / Off-site Development
• APEX Best Practices, Methodology, and Toolkit

Offices in Canada, USA, & Peru

Core Values:

Respect, Teamwork, Integrity, Innovation, Quality, Fun

What is Node.js?

• JavaScript runtime built on Chrome's V8 JavaScript engine

• JavaScript running on the server

• Used to build powerful, fast & scalable web applications

• Uses an event-driven, non-blocking I/O model

What can be built with Node.js?

• REST APIs & Backend Applications

• Real-Time Service (Chat, Games, etc)

• Blogs, CMS, Social Applications

• Utilities & Tools

NPM

• Node.js Package Manager

• Used to install node programs/modules

• Easy to specify and link dependencies

• Modules get installed into the "node_modules" folder

node install express

node install -g express

package.json File

• File the describes your app and its dependencies
• Located in your project main directory

npm init

 
{
  "name": "web_app",
  "version": "1.0.0",
  "description": "Node.js Example",
  "author": "First Last",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.16.1"
  }
}

server.js file

'use strict';

const express = require('express');

// Constants
const PORT = 8080;
const HOST = '0.0.0.0';

// App
const app = express();
app.get('/', (req, res) => {
  res.send('Hello world\n');
});

app.listen(PORT, HOST);
console.log(`Running on http://${HOST}:${PORT}`);

Electron - Apps

More at: http://electron.atom.io/apps

Add to project:

npm install electron --save-dev

package.json

   "test": "echo \"Error: no test specified\" && exit 1"

   "start": "electron ." 

Demo

Menu items

• label
• role
• type
• click
• accelerator
• submenu

 const mainMenuTemplate =  [
  { 
    label: 'Test',
    submenu: [
      {
        role: 'reload'
      }
    ]
  },
 {
    label: 'Edit',
    submenu: [
      {
        role: 'undo'
      },
      {
        type: 'separator'
      },
      {
        role: 'copy'
      },
      {
        role: 'paste'
      }
    ]
  },
  {
    label: 'Developer Tools',
    submenu:[
      {
        role: 'reload'
      },
      {
        label: 'Toggle DevTools',
        accelerator:process.platform == 'darwin' ? 'Command+I' : 'Ctrl+I',
        click(item, focusedWindow){
          focusedWindow.toggleDevTools();
        }
      }
    ]
  }

...
const Menu = electron.Menu;

...
app.on('ready',function(){

...

  // Get menu from template
  const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
  // Insert menu
  Menu.setApplicationMenu(mainMenu);

});

// menu template
const mainMenuTemplate = [
...

Electron Packager

( https://github.com/electron-userland/electron-packager )

"Command line tool and Node.js library that bundles Electron-based application source code with a renamed Electron executable and supporting files into folders ready for distribution"

Supported platforms

• Windows (32/64 bit)
• OS X (also known as macOS)
• Linux (x86/x86_64)

# to add to our project

npm install electron-packager --save-dev

# for use from cli (run as admin user)

npm install electron-packager -g

Basic Form

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

electron-packager .

• Use the current directory for the sourcedir
• Infer the appname from the productName in package.json
• Infer the appVersion from the version in package.json
• Infer the platform and arch from the host
• Download the platform build of Electron 1.4.15 (and cache the downloads in ~/.electron)
• Build <appname>.app or <appname>.exe
• Place <appname>.app or <appname>.exe in ../<appname>-<platform>/ (since an out directory was not specified, it used the current working directory)

{
 "name": "red-button-app",
 "productName": "Red Button App",
 "version": "0.1.0",
 "main": "main.js",
 "devDependencies": {
 "electron": "^1.4.3",
 "electron-packager": "^8.1.0"
 },
 "scripts": {
 "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64
  --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
"package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true
 --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true
 --out=release-builds --version-string.CompanyName=CE 
 --version-string.FileDescription=CE --version-string.ProductName=\"Red Button App\"",    
"package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true 
 --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true
 --out=release-builds"
 }
}

npm run package-mac

npm run package-win

npm run package-linux

Electron Installers

• electron-installer-dmg
• electron-winstaller
• electron-wix-msi
• electron-installer-debian
• electron-installer-redhat

APEX Desktop Application Review

1. Install node.js
2. Create project directory
3. Create project specification
4. Add electron to project
5. Create the main.js file and add the URL to the APEX application
6. Use electron-packager to create the exectuable

1. Install node.js

2. Create project directory

mkdir project1

3. Create project specification

npm init

4. Add electron to project

npm install electron --save-dev

   "test": "echo \"Error: no test specified\" && exit 1"

   "start": "electron ." 

5. main.js

const electron = require('electron');
const app = electron.app;

const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;

var mainWindow;

app.on('ready',function(){
  
  // create window
  mainWindow = new BrowserWindow({width: 1024, height: 768,  
                                 backgroundColor: '#2e2c29', 
                                 webPreferences: {nodeIntegration: false}});

  // load a URL into our window
  mainWindow.loadURL('[URL]');

});

app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

electron-packager

npm install electron-packager -g

electron-packager .