ELECTRON JS : Créez des apps desktop multi-plateformes

Développez des applications multi-plateformes en Javascript grâce à electron js et déployez sur Windows, Mac et Linux.

4.60 (134 reviews)
Udemy
platform
Français
language
Development Tools
category
586
students
7.5 hours
content
Mar 2024
last update
$59.99
regular price

What you will learn

Créer des logiciels avec electron js

Développer des applications multi-plateformes avec Javascript grâce à électron

Utiliser JS pour générer des logiciels Windows, Mac et Linux

Coder un logiciel de gestion de budget / finances

Utiliser Chart JS pour créer des graphes

Utiliser NeDB (Dérivé de MongoDB) pour travailler avec une base de données

Générer des fichiers PDF à partir de javascript

Utiliser Bootstrap pour l'interface utilisateur (UI)

Initialiser un projet avec Node JS et installer des packages

Débugger une application electron avec les dev tools

Description

ElectronJS est un outil surpuissant qui vous permet de développer des logiciels desktop avec Javascript et de les déployer sur toutes les plateformes. 

Electron JS est utilisé par les plus grandes sociétés comme Slack, Microsoft, Facebook, Twitch, Figma pour proposer aux utilisateurs des logiciels multi-plateformes.

Vous êtes développeur web, débutant ou expert, vous souhaitez découvrir le développement logiciel avec Javascript ou vous souhaitez aller plus loin dans le développement : ce cours est fait pour vous !

Si vous aimez développer 1 seule fois et déployer sur toutes les plateformes alors electron js est la solution qu'il vous faut. Electron est un outil très léger, puissant, intuitif et extrêmement rapide à mettre en place. En quelques minutes vous pouvez créer votre première application multi-plateformes grâce à electron.

Dans ce cours nous allons développer une application complète de gestion de budget / fiances personnelles. Notre programme sera un logiciel réel et concret qui nous permettra de manipuler tout ce qu'il y a à savoir :

  • Mise en place d'electron js

  • Conception d'une interface et utilisation de Bootstrap

  • Utilisation d'une base de donnée NoSQL (NeDB, dérivé de MongoDB)

  • Génération de fichiers PDF

  • Utilisation de Javascript pour coder le logiciel

  • Accès à différentes fonctionnalités de l'OS

  • Utiliser Node JS

  • Générer des graphes interactifs avec Chart JS

  • Générer un exécutable et un installeur pour notre logiciel

A l'issue de ce cours vous aurez développé un logiciel de A à Z, fonctionnel et utile ! Vous pourrez l'ajouter à votre CV ou portfolio et vous aurez acquis les compétences pour développer des logiciels desktop avec Javascript, Electron, NeDB et NodeJS.

Electron est réellement une pépite qui vous permettra de faire des merveilles et cette formation vous permettra d'être rapidement opérationnel sur cette techno. Nous utiliserons en parallèle plein de choses qui vous seront utiles dans la vie de tous les jours comme utiliser une base de données, manipuler des données, générer des PDF, utiliser Bootstrap et bien plus.

Si vous souhaitez vous lancer, rejoignez mon cours et je vous assure qu'en quelques jours vous saurez développer vos logiciels en JS avec electron !

Content

Création d'une application de gestion de budget / finances avec electronjs

Installation des outils et d'electron js
Initialisation du projet avec NPM init
Script Main.js pour notre projet electron
Le script preload spécifique à electronjs
Les paramètres du BrowserWindow (la fenêtre du logiciel)
Squelette d'une page vide avec Bootstrap installé
Design des boutons de la top bar de la fenêtre principale
Code des boutons de la fenêtre de l'application
Code de la drag zone pour déplacer la fenêtre à la souris
Design du dashboard avec les widgets de données financières
Design du tableau de la liste des recettes et dépenses
Création d'une popup (modale) pour pouvoir insérer une ligne au tableau
Création d'un objet javascript prêt à être inséré en base de données
Mise en place d'une base NoSQL (NeDB) + insert des données dans la BDD
Lecture de la base de données avec find pour récupérer les lignes
Génération dynamique d'un tableau avec JS pour afficher les données de la base
Suppression d'une ligne de la base de données NoSQL par ID
Création d'un sélecteur de date pour pouvoir filtrer par date
Filtre des données de la base NoSQL par date mini et maxi (mois en cours)
Affichage des données traitées sur l'accueil du logiciel dans 4 widgets UI
Fonctionnement de Chart JS : Étude du code existant et de la documentation
Chart js : Afficher les données de notre base dans un graph interactif
Exercice : Créer un Pie Chart avec ChartJS pour afficher recettes et dépenses
Colorer les lignes du registre en fonction de si c'est une dépense ou recette
Export PDF avec ElectronJS : Générer un rapport PDF depuis notre application
Compiler le logiciel et générer un exécutable (.exe) Windows, Mac ou Linux
Bonus : Créer un installeur professionnel pour distribuer son logiciel
Téléchargement du code source complet du projet

Atelier pratique : Plus loin avec Bootstrap

Présentation de cette section bonus
Inclure bootstrap dans un projet web
Utiliser le système de grille de bootstrap
Les éléments HTML de base avec bootstrap (titres, texte, images...)
Revue des principaux composants de bootstrap partie 1/2
Revue des principaux composants de bootstrap partie 2/2
Mini TD : Design d'une page web avec bootstrap

Screenshots

ELECTRON JS : Créez des apps desktop multi-plateformes - Screenshot_01ELECTRON JS : Créez des apps desktop multi-plateformes - Screenshot_02ELECTRON JS : Créez des apps desktop multi-plateformes - Screenshot_03ELECTRON JS : Créez des apps desktop multi-plateformes - Screenshot_04

Reviews

Laurent
June 13, 2023
Bonjour, Absolument, Je recherchais depuis très longtemps, un framework pour créer des app bureau avec le langage que je connais ( HTML, CSS et JS ) et utilisant une base de données. C'est tout simplement parfait. Merci à vous. Je recherche maintenant, des tutos complémentaires ou des exemples concrets, afin de bien maîtriser la base de donnée NEDB. Si vous avez des infos, merci de m'en faire part.
Als
May 16, 2023
Nickel, cours facile a comprendre, bien expliqué. On va a l'essentiel et on apprend pas mal de chose. Le seul petit point négatif c'est les fichiers créés sont mal organisés.
Damien
April 13, 2023
Personnellement, je trouve que le projet est trop mis en avant par rapport à l'apprentissage d'ElectronJS. Après il se peut qu'il n'y est pas assez de fonctionnalité à ElectronJS pour en faire une formation complète :)
Olivier
August 26, 2022
N'ayant que très peu d'expérience dans les technologies web, j'ai apprécié cette formation pour m'avoir apporté tout le nécessaire à la réalisation d'une application complète. Les explication d'Anthony sont claires et c'est sympa de voir notre application (le fil rouge de la formation) s'enrichir à chaque vidéo. Évidemment, tout ne pas être dit durant la formation et il faut parfois consulter les documentations pour en savoir plus, mais rien d'anormal à cela. Alors pourquoi la note de 4 ? C'est ma faute, car je ne suis peut-être pas la bonne cible: je développe depuis pas mal d'années sur des systèmes embarqués, et par moment, certaines explications, plutôt adressées aux vrais débutants, étaient un peu longues... (J'aurais par exemple préféré plus de détails techniques, des pistes d'optimisation, etc...) Mais au final, je ne regrette pas d'avoir suivi cette formation ! Merci !
Ryad
January 1, 2022
Le formateur veut cibler tout le public, débutant comme avancé c'est pour cela que parfois il explique certaines notions de base mais cela me semble ridicule étant donné que nous utilisons un framework ainsi les bases et la maitrise de certaines choses sont primordiales pour ce cours et donc non accessible à ceux qui n'ont jamais fait du web auparavant. De plus, le formateur ne prend pas le temps d'aller dans la documentation electron et de l'expliquer en faisant un tour d'horizon sachant qu'il s'agit du coeur du cours. Nous sommes censés apprendre à utiliser electron donc nous devons aller dans la documentation puis expliquer les bases ainsi que les choses utiles à connaître et surtout la logique du framework pour ensuite être un minimum autonome. De même, le fait de faire des copier-coller dans le cours en disant que ce n'est pas la peine d'expliquer n'est absolument pas pédagogique. En bref, on ne nous apprend pas vraiment à créer notre propre application desktop ni à être autonome mais on nous "apprend" à créer la même application que le formateur. Je poste ce commentaire en étant quasiment à la fin du cours. Déçu...
Cédric
December 17, 2021
Très bon cour (et très bon prof) d'une manière générale, je retire une étoile pour le chapitre export PDF qui ne correspondait pas du tout à ce que j'attendais. J'aurais préféré un véritable chapitre pour apprendre à générer un PDF de A à Z en NodeJS dans lequel on aurait pu positionner par programme du texte, des images, ... et obtenir un document PDF tout à fait personnalisé et personnalisable. En plus c'était un chapitre que j'attendais avec beaucoup d'impatience, car j'ai dans le projet de réaliser un programme qui permettra de gérer et de générer des devis, factures, ...
Laborde
October 1, 2021
J'ai beaucoup aimé la formation, c'est très clair et bien expliqué. Je pense que c'est accessible à tous les niveaux. J'aurai peut être aimé voir comment on peut faire communiquer l'app avec des données en ligne.
Chris
August 3, 2021
Super formation, le TP est en plus réellement utile car avec un peut de modifications, il me permet de faire un livre des recettes pour ma micro entreprise.
Philippe
May 20, 2021
Le formateur explique bien, même si parfois un peu répétitif dans les explications Dommage d'avoir intégré bootstrap et de le surcharger alors qu'ils y a des classes qui font le job. "justify-content-end" sur ta nav "border-0" et "bg-transparent" sur les icones et mr-2 pour tes espaces. Pareil pour ton bouton d'ajout dans le registre. Tu crées ta classe pull-right avec l'instruction css float, alors que la classe float-right existe directement dans bs. Pour le coup t'as eu la flemme de préparer cette partie :-) Enfin j'imagine que la partie design c'est pas ta came :-) J'arrive à la moitié du cours et il faut souligner que tout ce qui est enseigné est interessant et surtout fonctionne ... Bon il y a parfois de la logique un peu curieuse comme lorsque tu effaces l'entièreté de ton tableau pour le reconstruire pour ensuite mettre un test pour préserver ton en-tête. Personnellement j'ai ciblé directement le tbody à la place du thead. Après si on voit le côté positif, c'est peut être ce manque d'abstraction qui rend le cours plus accessible aux débutants ...
Emmanuel
May 11, 2021
toujours aussi excellent dans les explications et l'application en lui-même très utile. J'adore, j'adhère !!

Charts

Price

ELECTRON JS : Créez des apps desktop multi-plateformes - Price chart

Rating

ELECTRON JS : Créez des apps desktop multi-plateformes - Ratings chart

Enrollment distribution

ELECTRON JS : Créez des apps desktop multi-plateformes - Distribution chart
4024128
udemy ID
5/3/2021
course created date
5/9/2021
course indexed date
Bot
course submited by