Creating Desktop Applications With AngularJS and GitHub Electron ― Scotch

Creating #Desktop Applications With #AngularJS and GitHub #Electron

  • The steps for this tutorial are as follows:
    Create a simple Electron application
    Use Visual Studio Code Editor to manage our project and tasks
    Integrate an Angular Customer Manager App with Electron
    Use Gulp tasks to build our application and create installers
    Creating Your Electron Application
    To get started, install Node if you don’t have it in your system already.
  • If you’ve installed electron-prebuilt globally in your system, you can run our application with following command:

    electron app

    Here electron is the command to run electron shell and app is our application folder name.

  • /app”

    While you could do it that way, I recommend you create a gulp task to run your application in your gulpfile.js, so that you can integrate your task into Visual Studio Code Editor which we will check in next section.

  • /app’], { stdio: ‘inherit’ });
    });

    Run your gulp task: gulp run Our application might looks like this:

    Configuring Development Environment With Visual Studio Code
    Visual Studio Code is a cross platform code editor from Microsoft.

  • You can read more about visual studio code tasks here
    Debugging Electron Application
    Open the debug panel and click configure button which will create a launch.json file inside .

GitHub’s Electron framework (formerly known as Atom Shell) lets you write cross platform desktop application using HTML, CSS and JavaScript. It’s a variant of io.js run-time which is focused on desktop applications instead of web servers.

@TrinhVanHuy: Creating #Desktop Applications With #AngularJS and GitHub #Electron

GitHub’s Electron framework (formerly known as Atom Shell) lets you write cross platform desktop application using HTML, CSS and JavaScript. It’s a variant of io.js run-time which is focused on desktop applications instead of web servers.

Electron’s rich native APIs enables us to access native things directly from our pages with JavaScript.

This tutorial shows us how to build a desktop application with Angular and Electron. The steps for this tutorial are as follows:

To get started, install Node if you don’t have it in your system already. Our application should be structured as follows:

files in this project.

is exactly same as that of Node’s module. Your application’s startup script should be specified in main property inside your app/package.json.

might look like this:

command. You can also manually create these files. Install npm dependencies that are required for packaging the application by entering following command in your command line prompt:

app/main.js is the entry point of our application. This script is responsible for creating the main window and handling the system events. main.js should look like the following:

file as follows:

using Node’s fs (file system) module and writes the content into the document body.

, you’ll probably want to try running your initial Electron application to test it and make sure it’s working as expected.

globally in your system, you can run our application with following command:

folder as follows in your command line prompt:

, so that you can integrate your task into Visual Studio Code Editor which we will check in next section.

Our application might looks like this:

Visual Studio Code is a cross platform code editor from Microsoft. Behind the scene of VS Code is Electron and Microsoft’s proprietary monaco code editor. You can download Visual Studio Code here.

Open your electron application in VS Code.

Lots of tools exist to automate our tasks like building, packaging or testing our application. Mostly we run these tools from the command line. VS Code’s built in task runner enables you to integrate your custom tasks into your project. You can run your grunt, gulp, MsBuild or any other tasks directly from within your project without moving to the command line.

. To do this edit the task.json file as follows:

to that task. Currently VS Code supports one top level task only.

will be executed.

You can read more about visual studio code tasks here

folder with debug configuration.

We don’t need launch app.js configuration, so remove it.

should be as follows:

task that we created before as follows, so that our electron will start in debug mode and will listen to port 5858:

In the debug panel choose “Attach” configuration and click run or press F5. After few seconds you should see the debug command panel in the top.

New to AngularJS? Check out the official website here or some of the Scotch Angular tutorials.

This section explains how to create a simple Customer Manager application using AngularJS with a MySQL database as the backend. The goal of this application is not to highlight the core concepts of AngularJS but to demonstrate how to use the AngularJS and NodeJS together with MySQL backend inside GitHub Electron.

Our Customer Manager application is as simple as the following:

Our application is located inside app folder, and the structure of the application is shown below.

folder contains all the key scripts and views used in this application. There are several techniques that can be used for organizing application files.

Here I prefer scripts organized by features. Each feature has its own folder with templates and controllers inside the same folder. For more info on folder structure, read: AngularJS Best Practices: Directory Structure

Before get started with the AngularJS application, we’re going to install client side dependencies using bower. Install Bower if you don’t have it already. Change the current working directory to the root of the application in your terminal then install dependencies as follows from your command line prompt :

. Here is the dump of database so that you can get up and run quickly.

module in your app/ folder where your Angular application resides.

Change the current working directory to app folder in your command prompt install using following command.

Our angular service – app/scripts/customer/customerService.js, should looks like following:

(function () { ‘use strict’; var mysql = require(‘mysql’); // Creates MySql database connection var connection = mysql.createConnection({ host: “localhost”, user: “root”, password: “password”, database: “customer_manager” }); angular.module(‘app’) .service(‘customerService’, [‘$q’, CustomerService]); function CustomerService($q) { return { getCustomers: getCustomers, getById: getCustomerById, getByName: getCustomerByName, create: createCustomer, destroy: deleteCustomer, update: updateCustomer }; function getCustomers() { var deferred = $q.defer(); var query = “SELECT * FROM customers”; connection.query(query, function (err, rows) { if (err) deferred.reject(err); deferred.resolve(rows); }); return deferred.promise; } function getCustomerById(id) { var deferred = $q.defer(); var query = “SELECT * FROM customers WHERE customer_id = ?”; connection.query(query, [id], function (err, rows) { if (err) deferred.reject(err); deferred.resolve(rows); }); return deferred.promise; } function getCustomerByName(name) { var deferred = $q.defer(); var query = “SELECT * FROM customers WHERE name LIKE ‘” + name + “%'”; connection.query(query, [name], function (err, rows) { if (err) deferred.reject(err); deferred.resolve(rows); }); return deferred.promise; } function createCustomer(customer) { var deferred = $q.defer(); var query = “INSERT INTO customers SET ?”; connection.query(query, customer, function (err, res) if (err) deferred.reject(err); deferred.resolve(res.insertId); }); return deferred.promise; } function deleteCustomer(id) { var deferred = $q.defer(); var query = “DELETE FROM customers WHERE customer_id = ?”; connection.query(query, [id], function (err, res) { if (err) deferred.reject(err); deferred.resolve(res.affectedRows); }); return deferred.promise; } function updateCustomer(customer) { var deferred = $q.defer(); var query = “UPDATE customers SET name = ? WHERE customer_id = ?”; connection.query(query, [customer.name, customer.customer_id], function (err, res) { if (err) deferred.reject(err); deferred.resolve(res); }); return deferred.promise; } } })();

module directly inside the service. If you already have a remote data service, you can use it instead.

insideapp/scripts/customer/customerController is as follows:

Our Customer template(app/scripts/customer/customer.html) uses angular material components to build user interface, and its is as follows:

app.js contains module initialization script and application route config as follows:

if you already configured VS Code task runner as above.

packages.

and import required modules

Clean build directory if it already exists.

will do this for us in next section:

Our build task takes our app/index.html with gulp.src() and then we pipe it to usemin. It then writes the output into build directory and replace references in index.html with optimized version of code.

The build task should look as follows:

. This script is intended to be used on Windows. For other platform you should create scripts specific to that platform and should run according to your platform.

directory. Here is our steps to build the electron application:

Next initialize our build script as follows:

node module for the file operation. It gives more flexibility on file operations.

to our dist directory.

folder. We need to replace this application with our angular application. Remove it as follows:

directory.

Next step is to replace the default electron icon with your own, update the product information and rename the application.

You can either use wix or NSIS to create windows installer. Here we use NSIS which is designed to be small and flexible as possible and is very suitable for internet distribution. With NSIS you can create such installers that are capable of doing everything that is needed to setup your software.

file as follows:

command.

Create a function to put all pieces together, then export it to be accessed from gulp task:

to execute this build script:

You can have your final product by running:

folder and folder structure should be some thing similar to following.

Electron is not just a native web view that let’s you to wrap your web application into desktop application . It now includes automatic app updates, Windows installers, crash reporting, notifications, and other useful native app features — all exposed through JavaScript APIs.

So far there is huge range of apps created using electron including chat apps, database explorers, map designers, collaborative design tools, and mobile prototyping apps.

Here is some useful resources about Github Electron:

Creating Desktop Applications With AngularJS and GitHub Electron ― Scotch

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.