Learn Electron, Nvda and Sequelize

Electron is a framework that makes it easy to create cross-platform desktop apps with JavaScript, HTML, and CSS. Electron and open-source tools give you everything you need to create a compelling desktop app--native user interface elements like menus and dialogs, installers, auto-updates, and more. 

This course will teach you the core concepts of Electron so that you can leverage it to create your own desktop application for macOS and Windows. 

We'll go over:
- Creating user interfaces in Electron (both HTML based and native)
- Understanding Electron's multi-process architecture 
- Shipping your app to users

Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS.

electron

Build a desktop application with Electron

In this lesson we’ll load javascript into the BrowserWindow and display the Electron version on the page. Loading javascript into Electron is almost exactly the same as loading it into the browser, however it is a best practice to use the `require` syntax.

Load JavaScript in an Electron BrowserWindow

A main menu is a hallmark of native desktop applications. Electron makes it easy to create native menus and menu items in JavaScript.

We’ll go over creating a menu template using `Menu.buildFromTemplate` and then setting it as the main application menu via `Menu.setApplicationMenu`. 

Create a native desktop system menu with the Electron Menu module

In this lesson we'll learn about `dialog.showMessageBox` . This is the most basic Electron dialog but it offers lots of customization options, such as `type`, `icon`, `title`, and `buttons`. Some of these options vary by platform, so we'll also look at how things differ between Windows and Mac. 

Display native desktop dialog windows with Electron

In this video, we'll learn how to save and open a file using native dialogs in Electron. First, we'll use `dialog.showSaveDialog` to display a native save dialog and use `dialog.showErrorBox` to display an error message if the save failed. Then, we'll open the file we saved using `dialog.showOpenDialog`. Finally, we'll look at how these dialogs look on Windows vs Mac.

Save/Open a file with an Electron dialog window

Dealing with multiple processes in an application is new for many JavaScript developers. We’ll go over what exactly a process is and what the primary responsibilities of the main and renderer processes are. The main process is primarily responsible for creating native UI elements and managing the application lifecycle, while the renderer process runs the HTML based UI. Accordingly, different APIs are available in each process. 

Understand Electron’s main and renderer process architecture

In Electron, we often need to coordinate actions between multiple processes. For example, if a user clicks a button in a renderer process that makes a new `browserWindow` open, we need to be able to send a message to the main process that triggers this action. We’ll look at how to do just that using the `ipcRenderer` and `ipcMain` modules.

Communicate between Electron processes using IPC

`remote` allows you to seamlessly interact with main process modules as if they were in the renderer process. It’s a super useful abstraction over IPC. We’ll learn how to use it and how to avoid some potential gotchas it has. 

[Devtron](https://electron.atom.io/devtron/) is a devtools extension that the Electron team has made. We’ll be using it to view all of the IPC that happens in our application. In this lesson we’ll learn how to include and use it in our code. 

Communicate between Electron processes using the remote module

Every Electron application needs a custom icon. Mac needs an `icns` file and Windows needs an `ico` file. We'll learn how to use a npm module, `electron-icon-maker`, that takes a 1024x1024 PNG and then outputs all the files we need. 

Create an icon for your Electron app

We’ve been running our app in a development environment using the Electron executable. Now let’s learn how to package our app into a `.app` or `.exe` file so that we can distribute it to other users. Electron doesn't provide this functionality out of the box, so we'll use a popular and easy-to-use npm package called [electron-builder](https://github.com/electron-userland/electron-builder) to handle the details. electron-builder will automatically grab our `.ico` or `.icns` file and use that as our app's icon. 

Package your Electron application into a executable file with electron-builder

Code signing ensures that your app was created and distributed by you or your company and has not been modified since it was built. It is done via a special code signing certificate issued by a trusted authority. While you can distribute your Electron app without signing it; code signing is a security best practice and is a prerequisite to implementing auto-updates in your app. We’ll walkthrough how to integrate code signing into your electron-builder build process, what happens when you don't sign your application, and how to verify it's been signed correctly. 

This lesson assumes that you have already purchased code signing certificates from Apple and one of Microsoft's trusted vendors and have exported the certificate as a `p12` or `pfx` file. 

Code sign your Electron application with electron-builder

Once users are using your app, you need a way to ship new features and fixes to them. In this lesson, we’ll learn how to implement auto-updates in your app, which allows you to distribute updates to your application seamlessly. We'll go over how to integrate with Electron's `autoUpdater` module to check for an update and display a prompt to update once it's been downloaded. For our server side implementation we'll just use a plain file server to keep things simple. 


Ship updates to your Electron app with `autoUpdater` (Mac)

In this lesson, we'll go over a few differences in implementing auto-updates on Windows like handling `Squirrel.Windows` startup events and configuring `electron-builder` to build for a `Squirrel.Windows` target.

Ship updates to your Electron app with `autoUpdater` (Windows)

NVDA (NonVisual Desktop Access) is a free “screen reader” which enables blind and vision impaired people to use computers.

nvda

NVDA is a popular open source screen reader on Windows that works well with Firefox. It's similar to JAWS, another popular Windows screen reader that works best with IE. But NVDA has no licensing fee plus an open bug tracker, making it great for users as well as developer testing. 

In this lesson, you'll learn how to browse a webpage using NVDA's keyboard shortcuts, including headings navigation, skip links, and the Elements List. You'll also learn a bit about Forms Mode and how it impacts screen reader navigation.  For more tips, check out the resources below.

## Resources
- [Using NVDA to Emulate Web Accessibility](http://webaim.org/articles/nvda/)
- [NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
- [Understanding Screen Reader Interaction Modes](http://tink.uk/understanding-screen-reader-interaction-modes/)
- [Three Things You Should Know Before Using Voiceover for Testing](http://webaim.org/blog/three-things-voiceover/)

## Installing NVDA
If you're on a Windows machine, you can install [NVDA directly](http://www.nvaccess.org/download/). If you're on a Mac or Linux, you could install a Windows virtual machine:

- [Install VirtualBox](https://www.virtualbox.org/wiki/Downloads)
- [Get a Windows VM from Microsoft](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/) - I use IE11
- [Install Firefox](https://www.mozilla.org/en-US/firefox/new/) - install on the VM!
- [Install NVDA](http://www.nvaccess.org/download/)
- [How to Map Your Mac's Capslock Key to a NVDA or JAWS Key in a Windows VM](https://www.marcozehe.de/2015/06/07/how-to-map-your-macs-capslock-key-to-a-nvda-or-jaws-key-in-a-windows-virtual-machine/)

Testing for Accessibility with the NVDA Screen Reader on Windows

Take the first step in learning how to create native desktop applications with Electron. We'll set up a package.json, create an npm start script to launch our app in development, and create a browser window and load a local HTML file into it.

An important concept to understand about Electron is it's multi-process architecture. The main process creates web pages by creating `BrowserWindow` instances, manages application lifecycle events, and more. Each `BrowserWindow` instance runs the web page in its own renderer process. 

Create a "Hello World" app using Electron

In this lesson we'll learn how to load CSS in an Electron BrowserWindow, which is just like loading CSS into the browser. We’ll also use the `ready-to-show` event to only display our BrowserWindow when its rendering is complete.

Load CSS in a Electron BrowserWindow

Sequelize is a promise-based ORM for Node.js and io.js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite and MSSQL and features solid transaction support, relations, read replication and more.

sequelize

Sequelize attribute getters and setters are a convenient way to encapsulate extra logic for model properties. In this video, we'll cover adding getters and setters to enhance and even virtualize a column.

Sequelize: Getters, Setters and Virtual Columns

Models in the Node.js ORM, Sequelize, can be expanded with both class level and instance level functions. This video will show you how to extend your models to add helpers or business logic, and explain the methods execution scope.

Sequelize: Class & Instance Methods

Javascript and database systems tend to be at odds with regard to how tables and columns should be named. Sequlize provides all the tools necessary to satisfy naming conventions in both your Node.js code and in your SQL database.

Topics

Instructors

Content Type