Make a desktop app with Python with Electron

Introduction

When I thought that the GUI environment of Python was delicate, I could easily link with Electron and it seemed that I could create a beautiful GUI environment, so I made a simple application. Reference: Electron as GUI of Python Applications

Thank you for your cooperation!

If you find this article helpful, I would be grateful if you could like this article.

About the author

I am ** Kikagaku Co., Ltd. ** Representative Director ** Ryosuke Yoshizaki ** My name is. Currently, "** Machine Learning / Artificial Intelligence De-Black Box Seminar **" and "** Machine Learning Online Tutor ** ”is operated.

Biography

Kikagaku Co., Ltd.

Providing educational services for machine learning and artificial intelligence

We look forward to your follow-up

We provide information on machine learning and artificial intelligence from a business perspective and recommended reference books.

President and CEO Ryosuke Yoshizaki Twitter：@yoshizaki_kkgk Facebook：@ryosuke.yoshizaki Blog: Blog of Kikagaku representative

Now that the introduction is long, let's start building the environment!

Development environment

・ OS: Mac OS X EL Capitan (10.11.5)

Environment

This time we'll use Flask, Python's lightweight web framework.

Flash(python)And Electron installation

$ pip install Flask
$ npm install -g electron-prebuilt

If you stumbled on installing Electron, updating node.js to the latest version is likely to work. For details, see the previous article Introduction to Electron (from installation to Hello World).

Create Python desktop apps with Electron

Create a new project

Directory structure

PythonApp
├── node_modules
├── hello.py
├── main.js
└── package.json

Create a new project for Electron.

Create a new project

$ mkdir PythonApp
$ cd PythonApp
$ npm init -y

Here, there is a required module on the node.js side, so install it.

Installation of required modules

$ npm install --save request
$ npm install --save request-promise 

npm init -package created with y.Edit the json.

#### **`package.json`**
```json

{
  "name": "PythonApp",
  "version": "0.1.0",
  "main": "main.js",
  "dependencies": {
    "request-promise": "*",
    "electron-prebuilt": "*"
  }
}

Create main.js of application control part

Create main.js in the directory to control Electron.

main.js

//Initial setting on Electron side
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;

//Quit when the app is closed
app.on('window-all-closed', function() {
  app.quit();
});

//Processing after launching the app
app.on('ready', function() {
  var subpy = require('child_process').spawn('python',['./hello.py']);
  var rq = require('request-promise');
  var mainAddr = 'http://localhost:5000';

  var openWindow = function() {
    mainWindow = new BrowserWindow({width: 400, height: 300 });
    mainWindow.loadURL(mainAddr);

    //End processing
    mainWindow.on('closed', function() {
      mainWindow = null;
      subpy.kill('SIGINT');
    });
  };

  var startUp = function() {
    rq(mainAddr)
      .then(function(htmlString) {
        console.log('server started');
        openWindow();
      })
      .catch(function(err) {
        startUp();
      });
  };

  startUp();
});

Create hello.py for the application display part

Create hello.py.

hello.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from __future__ import print_function
import time
from flask import Flask

app = Flask(__name__)

@app.route("/")

def hello():
    return "Hello World!<br>This is powered by Python backend."

if __name__ == "__main__":
    print('on hello')
    app.run(host="127.0.0.1", port=5000)

Run Electron

Run the sample application.

Run Electron

$ electron .

It worked fine. That's all there is to it.

Thank you for your hard work.

We look forward to your follow-up

We provide information on machine learning and artificial intelligence from a business perspective and recommended reference books.

President and CEO Ryosuke Yoshizaki Twitter：@yoshizaki_kkgk Facebook：@ryosuke.yoshizaki Blog: Blog of Kikagaku representative

Until the end Thank you for reading.