Foobar

Présentation de Electron. Step #1

8 messages dans ce sujet

Posté(e) (modifié)

ELECTRON

Développez des Software avec JavaScript 

 

Electron est un packager utile pour créer des software utilisant les langages web. Quelques exemples d'application développer avec Electron: Slack, Skype, Visual Studio Code, Discord, Atom, GitHub Desktop et d'autres encore. 

 

Je vous laissent regardé par vous même: https://electronjs.org/apps.

Nous allons commencé par la mise en pratique de Electron afin d’acquérir les base pratiques.

 

Etape #1 - Prérequis:

- Avoirs l'environnement NODE.JS et NPM d'installer sur votre système d'exploitation. (Npm suffit largement).

- Compétence en JavaScript requis. 

- Prendre connaissance de la documentation Electron https://electronjs.org/docs.

 

Etape #2 - Installation: 

- Créez un dossier qui porte le nom de votre application. 

- Installez Electron avec npm install electron -g

- Lancez un npm init pour décrire l'application et ses données importantes (Créer un dossier avec le nom de votre application et rendez vous dedans) 

- Automatiser l’installation npm install electron --save-dev

- Puis npm install

 

Etape #3 - Set-up: 

- Définir l'application Electron dans notre code app.js ou index.js cela dépend de votre package.json.

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

- Puis nous initialiserons la fenêtre de l'application.

let mainWindow;

function createWindow () {

  mainWindow = new BrowserWindow({width: 1800, height: 1200}); // La taille de la fenetre.

  mainWindow.loadURL(`file://${__dirname}/index.html`); // Le chemin de notre script HTML (Le nom index est pas obligatoire.) 

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

- On informe que l'application et prête à être lancer.

app.on('ready', createWindow);

- On arrête tous les processus de lancement de Windows après la fermeture de l'app.

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

- Créer votre page HTML index.html (ou autres nom) et entrer:

SAMP Forum fr 

- Retourner sur votre Command Line et taper electron . ceci va lancer l'application dans une fenêtre windows.

 

Merci d'avoir lit ce tutoriel, ci vous avez des questions sur NODE.JS, NPM & ELECTRON hésitez pas à me contactez sur le forum en message privé ou sur Discord Foobar#8565.

 

PS: Merci de signaler les fautes d’orthographes en messages privée pour les corrections. 

Modifié par Foobar

Partager ce message


Lien à poster
Partager sur d’autres sites

Salut, je vois que le sujet date un peu, mais je voulais juste te dire que je trouve ça dommage de ne pas se servir des nouveautés d'ES6 :weird:

Partager ce message


Lien à poster
Partager sur d’autres sites

Électron ne supporte pas ES6 

Partager ce message


Lien à poster
Partager sur d’autres sites

Si, avec babel

Partager ce message


Lien à poster
Partager sur d’autres sites

Oui, en ajoutant un module. C'est compliqué pour une démonstration du framework :catface:

Partager ce message


Lien à poster
Partager sur d’autres sites

J'l'ai connu y'a quelques temps, y'a également des jeux qui s'sont fait avec ça, j'me souviens plus lesquels, mais c'est vraiment pas mal ça peut apporter énormément de possibilité, j'ai jamais trouvé comment exporter le projet en .exe mais pas grave :')

 

Merci à toi ;)

1 personne aime ça

Partager ce message


Lien à poster
Partager sur d’autres sites

Pour l'avoir utilisé je le trouve vraiment très simple et plutôt bien documenté. Adapter avec du react rédux c'est un bonheur. 

Modifié par lesalondugeek

Partager ce message


Lien à poster
Partager sur d’autres sites
Le 14/07/2018 à 11:39, Kush a dit :

J'l'ai connu y'a quelques temps, y'a également des jeux qui s'sont fait avec ça, j'me souviens plus lesquels, mais c'est vraiment pas mal ça peut apporter énormément de possibilité, j'ai jamais trouvé comment exporter le projet en .exe mais pas grave :')

 

Merci à toi ;)

Effectivement https://store.steampowered.com/app/606800/Startup_Company/ mais pour créer un jeu Electron ne suffit pas.

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !


Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.


Connectez-vous maintenant