JDeDev

Formation ElectronJS

Partie 2 : BrowserWindow,
Réaliser un crud avec Mysql

En partenariat avec

Julien Demettre EIRL  Expert Windev Freelance

+33 (0)6 49 24 41 62  julien@jdedev.fr  www.jdedev.fr
Siège social  125 Rue de Viller, 54300 LUNEVILLE - FRANCE
SIRET  832 481 220 00024 | APE  5829C
Sommaire

La classe BrowserWindow ............................................................................................................................................3

Le constructeur de classe .........................................................................................................................................3
Les évènements ........................................................................................................................................................4
Les propriétés ...........................................................................................................................................................4
Les méthodes............................................................................................................................................................5
Réaliser un CRUD avec MYSQL .....................................................................................................................................5
Installation et paramétrage ......................................................................................................................................5
Get ALL ......................................................................................................................................................................6
Get One.....................................................................................................................................................................7
Add............................................................................................................................................................................7
Update ......................................................................................................................................................................7
Delete .......................................................................................................................................................................8
Live coding ....................................................................................................................................................................8
Entrainez vous ..............................................................................................................................................................9

2
LA CLASSE B ROWSER W INDOW

La classe BrowserWindows permet de créer et modifier des fenêtres navigateurs.

Cette classe n’est accessible que dans le processus principal, pas dans les processus de rendus

Le constructeur de classe

Lorsque vous construisez un objet de la classe BrowserWindow, vous pouvez passez un objet d’option
d’initialisation, voici les paramètres qui me semblent intéressant pour cette initialisation :

- width : nombre largeur initiale de la fenêtre

- height : nombre hauteur initiale de la fenêtre
- minWidth : nombre largeur minimale de la fenêtre
- minHeight : nombre hauteur minimale de la fenêtre
- maxWidth : nombre largeur maximale de la fenêtre
- maxHeight : nombre hauteur maximale de la fenêtre
- resizable : booléen permet de redimensionner la fenêtre ou non (par défaut vrai)
- movable : booléen permet de déplacer la fenêtre ou non (par défaut vrai)
- minimizable : booléen permet de minimiser la fenêtre ou non (par défaut vrai)
- maximizable : booléen permet de maximiser la fenêtre ou non (par défaut vrai)
- closable : booléen permet de fermer la fenêtre ou non (par défaut vrai)
- title : chaine titre de la fenêtre (par défaut Electron)
- icon : chaine ou image native icone de la fenêtre (par défaut l’icône d’Electron)
- show : booléen permet de définir si la fenêtre est affiché lors de sa création (par défaut vrai)
- parent : BrowserWindow fenêtre parent (par défaut null)
- modal : booléen ne fonctionne que si la fenêtre possède une fenêtre parent (par défaut faux)
- webPreferences : Objet permet de définir les fonctionnalitées de la page web
o devTools : booléen permet d’afficher la console dev tools (par défaut vrai)
o nodeIntegration : booléen permet d’utiliser les fonction node.Js depuis le processus de rendus
(par défaut faux)
o preload : chaine permet de définir un script js qui s’execute avant le chargement de la page
o session : Session permet de définir une session à utiliser pour la page

Pour l’ensemble des paramètres, voir : https://www.electronjs.org/docs/latest/api/browser-window#new-

browserwindowoptions

3
Les évènements

Plusieurs évènements peuvent se produire sur une fenêtre, notamment :

- resize : évènement émis lors du redimensionnement de la fenêtre

- focus : évènement émis lors de la prise de focus de la fenêtre
- move : évènement émis lors du déplacement de la fenêtre
- close : évènement émis lors de la fermeture de la fenêtre

Pour l’ensemble des évènements sur une fenêtre, voir : https://www.electronjs.org/docs/latest/api/browser-

window#instance-events

Les propriétés

Un objet de type BrowserWindow possède plusieurs propriétés, voici les propriétés qui me semblent les plus
importantes :

- id : nombre représente le numéro unique de la fenêtre (lecture seule)

- title : chaine représente le titre de la fenêtre

Pour l’ensemble des propriétés d’un objet BrowserWindow, voir :

https://www.electronjs.org/docs/latest/api/browser-window#instance-properties

4
Les méthodes

Un objet de type BrowserWindow possède plusieurs méthodes, voici celles qui me semblent les plus
importantes :

- loadFile : chaine charge la page de la fenêtre à partir d’un fichier html local
- loadURL : chaine charge la page de la fenêtre à l’aide d’une URL distante
- setMenu : Menu charge le menu pour la fenêtre
- removeMenu : vide supprime le menu de la fenêtre
- show : vide affiche la fenêtre
- hide : vide cache la fenêtre
- close : vide ferme la fenêtre

Pour l’ensemble des méthodes d’un objet BrowserWindow, voir :

https://www.electronjs.org/docs/latest/api/browser-window#instance-methods

R ÉALISER UN CRUD AVEC MYSQL

Installation et paramétrage

Pour réaliser une connexion à mysql avec node.JS je vous conseille d’installer le paquet mysql2.

Voici comment il s’installe :

$ npm install --save mysql2

5
Voici un exemple de connexion et requêtage sur mysql avec Node :

// get the client

const mysql = require('mysql2');

// create the connection to database

const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
database: 'test'
});

// with placeholder
connection.query(
'SELECT * FROM `table` WHERE `name` = ? AND `age` > ?',
['Page', 45],
function(err, results) {
console.log(results);
}

Le plus simple dans une application Electron est de paramétrer la fenêtre avec l’option webPreferences et
nodeIntegration à vrai. Ainsi vous pourrez directement executer des requêtes SQL depuis vos scripts de rendus.

Get ALL

Voici un exemple de requête getAll avec mysql2 sur une table user fictive

export function getAllUsers() {

return new Promise((resolve, rej) => {
connection.query('SELECT * FROM user',
(err, res) => {
if (err) rej(err)
else resolve(res)
})
})
}

Personnellement je préfère retourner de promise que de passer à mes fonctions une callback qui sera exécuté en
asynchrone

6
Get One

Voici un exemple de getOne avec mysql2 sur la table user

export function geUserById(id) {

return new Promise((resolve, rej) => {
connection.query('SELECT * FROM user WHERE id=?',
[id],
(err, res) => {
if (err) rej(err)
else resolve(res[0])
})
})
}

Add

Voici un exemple de requête add avec mysql2 sur la table user

export function addUser(email, pass) {

return new Promise((resolve, rej) => {
connection.query('INSERT INTO user (email,pass) VALUES (?,?)',
[email, pass],
(err, res) => {
if (err) rej(err)
else resolve("Utilisateur ajouté")
})
})
}

Update

Voici un exemple de requête d’update avec mysql2 sur la table user

export function updUser(id, email, pass) {

return new Promise((resolve, rej) => {
connection.query('UPDATE user SET email=?, pass=? WHERE id=?',
[email, pass, id],
(err, res) => {
if (err) rej(err)
else resolve("Utilisateur modifié")
})
})
}

7
Delete

Voici un exemple de requête delete avec mysql2 sur la table user

export function delUser(id) {

return new Promise((resolve, rej) => {
connection.query('DELETE FROM user WHERE id=?',
[id],
(err, res) => {
if (err) rej(err)
else resolve("Utilisateur supprimé")
})
})
}

L IVE CODING

Réalisation en live code d’une application Electron en Typescript qui ouvre une page et manipule un tableau de
user lié a un CRUD mysql en BDD.

Transmission aux étudiants du code une fois réalisé

8
E NTRAINEZ VOUS

Réalisez une fenêtre qui affiche un agenda zoomé sur le mois en cours.

La fenêtre doit permettre de changer de mois (mois suivant, mois précédent)

La fenêtre doit être capable d’afficher les évènements disponibles dans le mois dans les bonnes cases des jours

Structure de la table évènement fournie (code SQL)

CREATE TABLE IF NOT EXISTS `event` (

`id` int NOT NULL AUTO_INCREMENT,
`date_deb` datetime DEFAULT NULL,
`date_fin` datetime DEFAULT NULL,
`titre` varchar(255) DEFAULT NULL,
`location` varchar(255) DEFAULT NULL,
`categorie` varchar(100) DEFAULT NULL,
`statut` varchar(10) DEFAULT NULL,
`description` text,
`transparence` varchar(15) DEFAULT NULL,
`nbMaj` int DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

Rendus attendut