Desktop Apps using Electron JS with centralized data control

       0

We aggregate and tag open source projects. We have collections of more than one million projects. Check out the projects section.

When there is a requirement for having local storage for the desktop application context and data needs to be synchronized to central database, we can think of Electron with PouchDB having CouchDB stack. Electron can be used for cross-platform desktop apps with pouch db as local storage. It can sync those data to centralized database CouchDB seamlessly so any point desktop apps can recover or persist the data.

In this article, we will go through of creation of desktop apps with ElectronJS, PouchDB and show the sync happens seamlessly with remote CouchDB.

Pre-requisites:

Install node and npm latest release with latest distributions. Read the installation guide to install Node.

ElectronJS

Build cross-platform desktop apps with Javascript, HTML and CSS with ElectronJS framework. Thanks to chromium rendering engine and nodejs runtime. ElectronJS source code available in github and it is licensed under MIT license. It has been widely used and testimonials like Slack, WhatsApp desktop application built with Electron framework.

ElectronJS can be installed easily through

   npm install --save-dev electron 

PouchDB

PouchDB is a Javascript DBMS with an API inspired by CouchDB. It is a schema free document store for local small storage. It has been developed by Apache Software foundation under Apache License 2.0 and available in github. It supports master-master and master-slave replication with eventual consistency.

It can be installed through npm packages or can be done by simply invoking

   npm install -g pouchdb

   git clone https://github.com/pouchdb/pouchdb.git
   cd pouchdb
   npm install

CouchDB

CouchDB can be installed remotely as centralized document store. It will be used to authenticate and complete control of all the desktop data. PouchDB and CouchDB seamlessly replicate bi-directionally with Rest API protocol. It is developed by Apache software foundation and licensed under Apache-2.0 license. Source code is available in Github. The Couch Replication Protocol lets your data flow seamlessly between server clusters to mobile phones and web browsers, enabling a compelling offline-first user-experience while maintaining high performance and strong reliability. CouchDB comes with a developer-friendly query language, and optionally MapReduce for simple, efficient, and comprehensive data retrieval.

Installation will be straight walk through of the installation guide in the CouchDB site.

   sudo apt-get install -y apt-transport-https gnupg ca-certificates 
   echo "deb https://apache.bintray.com/couchdb-deb bionic main" | sudo tee -a /etc/apt/sources.list.d/couchdb.list
   sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 8756C4F765C9AC3CB6B85D62379CE192D401AB61
   sudo apt update 
   sudo apt install -y couchdb

After installation, CouchDB can be opened in the browser using http://127.0.0.1:5984/_utils/index.html#login. Using admin login and create a database as Employee DB.

Build Application

Create a nodejs application with "npm init" with user defined parameters and install Electron and PouchDB. So package.json will look as below

 {
    "name": "firstelectron",
    "version": "0.1.0",
    "description": "first electron for quick start",
    "main": "main.js",
    "scripts": {
          "start": "electron main.js"
    },
   "author": "nagappan subramanian",
   "license": "ISC",
   "devDependencies": {
       "electron": "^6.0.12",
       "pouchdb": "^7.1.1"
  },
  "dependencies": {
      "electron-prebuilt": "^1.4.13",
       "pouchdb-browser": "^7.1.1",
       "pouchdb-find": "^7.1.1"
   }
}

File: main.js

Create main.js file to open the html page in desktop native window.

 //import statements
 const { app, BrowserWindow } = require('electron')

 const path = require('path')

 const url = require('url')

 //global variables
 let win

function createWindow () {
    // Create the browser window.
     win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
       }
    })

    // and load the index.html of the app.
    win.loadURL(url.format({
         pathname: path.join(__dirname, 'index.html'),
         protocol: 'file:',
         slashes: true})
    );

    win.webContents.openDevTools();

    win.on('closed', function(){
    win = null;
 });
}

 console.log(app);
 console.log(BrowserWindow);

 app.on('ready', createWindow);

 app.on('window-all-closed', function(){
      //below is for macos to quit all the menu actions also
      if (process.platform!=='darwin') {
          app.quit();
      }
 });

 app.on('activate', ()=> {
       //this is also for macos
    if (win==null) {
       createWindow();
    }
 });

File: index.html

index.html file will have the display of employee list and it can be added using the add in header nav. Add happens by using input parameters through modal and add in the ui using the html template.

  <html>
  <head>
   meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <link rel="stylesheet" href="employeelist.css">
  <script src="node_modules/pouchdb/dist/pouchdb.min.js"></script>
  <script src="node_modules/pouchdb/dist/pouchdb.find.min.js"></script>
  <script src="employeelist.js"></script>
  <title>Organization CRM</title>
  </head>
  <body onload="loadEmployees()">
  <!--banner-->
  <header class="navbar-fixed">
  <nav id="nav" class="primary-color">
  <span id="header-title">Employee Directory</span>
  <button onclick="showAddModal()" class="actionBtnClass"><i class="material-icons">add</i></button>
  <button onclick="syncModal()" class="actionBtnClass"><i class="material-icons">sync</i></button>
  </nav>
  </header>

  <main>
    <div class="row">
     </div>
  </main>
  

 <!-- card template -->
  <template id="employeeCard">
  <div class="card" style="width: 18rem;">
    <img src="https://img.icons8.com/officel/160/000000/user.png" class="card-img-top" alt="...">
    <a class="btn-floating waves-effect waves-light grey verticaltop" onclick="deleteEmployee(currEmpId)">
       <i class="material-icons">delete</i>
    </a>
    <div class="card-body">
    <h5 class="card-title">Nagappan Subramanian</h5>
    <h4 class="card-title">Architect</h5>
    <p class="card-text contact"> XXXXX-X0494 | nagappan08@gmail.com </p>
    </div>
  </div>
</template>


<!-- modal: add a shopping list form -->
<div class="modal">
  <form id="employee-list-add" class="col s12 white" onsubmit="saveEmployee(event);">
  <div class="modal-content">
  <h5>Add Employee</h5>
  <div class="row">
  <div class="input-field col s12">
     <input name="name" type="text" class="validate" placeholder="Name" required />
  </div>
  <div class="input-field col s12">
     <input name="mailId" type="text" class="validate" placeholder="EmailId" required />
  </div>
  <div class="input-field col s12">
     <input name="designation" type="text" class="validate" placeholder="Designation" required />
  </div>
  <div class="input-field col s12">
    <input name="mobileno" type="text" class="validate" placeholder="Mobile Number" required />
  </div>
</div>
</div>
<div class="modal-footer primary-color">
  <button class="btn-flat" type="button" onclick="closeModal()">Cancel</button>
  <button class="btn-flat" type="submit" >Add</button>
</div>
</form>
</div>

<!-- modal: overlay -->
<div class="modal-overlay" onclick="closeModal()"></div>
  <footer class="footerClass">
     <script>document.write(process.platform);</script>
  </footer>
</body>
</html>

Employee list modal will create pouch db with remote async setup with CouchDB.

File: employeelist.modal.js

 var PouchDB = require('pouchdb-browser')

 var db = new PouchDB('employeedb')

 const remote_url = 'http://admin:admin@127.0.0.1:5984/employeedb';

 db.sync(remote_url, {live: true}).on('change', function() {
    console.log("change happened");
 }).on('error', function(){
     console.log("error happened");
});

db.addEmployee = function (employeeObj) {
    employeeObj._id = new Date().toISOString();
    employeeObj.completed = false;
    db.put(employeeObj, function(err, result) {
    if (!err) {
      console.log("successfully add a employee");
      console.log(result); 
   }
})
}

module.exports = db;

Employee list having the handlers for add modal, delete employees and load employees.

File: employeelist.js

 const db = require('./employeelist.model.js')

 const remote_url = 'http://admin:admin@127.0.0.1:5984/employeedb';

 const showAddModal = () => {
    console.log(db);
    let form = document.getElementById('employee-list-add')
    form.reset()
    document.body.className += ' ' + form.id
 }

 const deleteEmployee = (empId) => {
    db.get(empId).then(function(empObj){
    db.remove(empObj).then(function(success){
    console.log(success);
    document.querySelector('main .row').innerHTML = '';
    loadEmployees();
  }).catch(function(err) {
      console.log(response);
  });
 })
}

const loadEmployees = () => {
   db.allDocs({
   include_docs: true,
 }).then(function(results) {
   console.log(results);
   results.rows.forEach(function(row){
   console.log(row.doc);
   let empObj = row.doc;
   let empTemplate = document.querySelector("#employeeCard");
   empTemplate.content.querySelector('h5').innerHTML = empObj.name;
   if (empObj.designation !== '') {
       empTemplate.content.querySelector('h4').innerHTML = empObj.designation;
   }

   if (empObj.mobileno !== '' && empObj.mailId !== '') {
         let contact = empObj.mobileno + '|' + empObj.mailId;
         empTemplate.content.querySelector('.contact').innerHTML = contact;
   }
   empTemplate.content.querySelector('a').setAttribute("onclick", "deleteEmployee('" + empObj._id + "')");
      console.log(empTemplate.content.querySelector('a'));
      let clone = document.importNode(empTemplate.content, true);
      document.querySelector('main .row').appendChild(clone);

  });
 }).catch(function(){
    console.log("not able to read the pouch db");
})
}

 const saveEmployee = (element) => {
 console.log(event);
 const elements = event.target.elements;
 const employeeObj = {};
 for (let i = 0; i < elements.length; i++) {
    if (elements[i].tagName.toLowerCase() !== 'button') {
    employeeObj[elements[i].name] = elements[i].value
 }
}
 console.log(employeeObj);
 db.addEmployee(employeeObj);
}

const closeModal = () => {
   let classNames = document.body.className;
   document.body.className = classNames.replace('employee-list-add', '');;
}

The App demo is available in the below video.

Reference:

Source code: https://github.com/nagappan080810/employeedesktopapp

https://electronjs.org/

https://github.com/pouchdb/pouchdb

https://github.com/apache/couchdb

https://github.com/ibm-watson-data-lab/shopping-list-electron-pouchdb