Vos applications avec Electron

JavaScript s'invite sur votre bureau

a marqué ce sujet comme résolu.

Tout le monde se secoue ! :D

J'ai commencé (lundi 14 décembre 2015 à 19h12) la rédaction d'un tutoriel au doux nom de « Vos application avec Electron » et j'ai dans l'objectif de proposer en validation un texte aux petits oignons. Je fais donc appel à votre bonté sans limite pour dénicher le moindre pépin, que ce soit à propos du fond ou de la forme. Vous pourrez consulter la bêta à votre guise à l'adresse suivante :

Merci !

Edit : C'est normalement fini, sauf vous trouvez que ça va vraiment pas, je modifierai bien-sûr. J'attends donc surtout des retours sur l'orthographe, la typographie, les tournures de phrases … et pourquoi pas les codes, mêmes si je les ai normalement testés, il peu y avoir des erreurs. Merci beaucoup de prendre le temps de m'aider en tout cas. :)

+4 -0

Super petit tuto qui devrait m'être bien utile !

Tu crois que tu pourrais rajouter un partie (ou faire un petit tuto separé) sur comment publier une application dans le windows store ?

+0 -0

Bonjour,

Je suis aussi très intéressé par le tuto et vu qu'après un très rapide parcour j'ai pas été convaincu par tout je me dis que je vais faire mes remarques afin d'améliorer cela.

Je fais donc une première vraie lecture, j'écris donc mes remarques au fur et a mesure.

  • Dans les prérequis tu dis qu'il est préférable de connaître ES6, cependant qu'on connaisse js suffit… finalement on fait un site web sous forme de programme… peut importe la version de js utilisée.
  • "mais la dépendance d'Electron sera ajoutée à votre manifeste" Je pense qu'il faudrai reformuler en quelque chose du style "la dépendance à electron sera ajoutée dans le manifeste de votre projet"
  • Dans le chapitre "Le script principal" tu annonce dans le bloc d'information que tu va utiliser les fonctions de ES6, un lien vers un tuto ne serai pas de trop pour ceux qui aurai besoin de rafraîchir leur mémoire.
  • Toujours dans le chapitre "Le script principal" après la déclarations des variables raccourcie tu as un paragraphe dans le quel tu décris ce que tu va avoir comme code. N'ayant pas encore eu de code jusque là c'est très lourd, du coup j'ai vraiment tendance à vouloir bêtement sauté le paragraphe car je m'en fou de savoir point par point ce qu'il va y avoir dans le code. Je veux d'abord voir le code puis qu'on m'explique point par point son fonctionnement, de cette manière quand je lis le fonctionnement je peux allé voir le code et comprendre ce qui est écrit.
    -> La remarque est valable pour tout les paragraphe dans lesquels tu décris ce que tu va faire dans ton code. C'est bien si sa tien en une ligne, sinon mieux vaux d'abord montrer le code et expliquer ensuite.
  • Dans le chapitre "L'IPC", faute de frappe dans le 4 ième paragraphe "Ensuite los du clic sur le bouton".

Une question qui m'est venue dans le chapitre "Publier" c'est comment organiser les mises à jour ? Y à t'il un module de mise à jour automatique ? Faut t'il tout gérer soie même ?

Sinon c'est un chouette tuto :) Merci pour ton travail.

+0 -0
  • Dans les prérequis tu dis qu'il est préférable de connaître ES6, cependant qu'on connaisse js suffit… finalement on fait un site web sous forme de programme… peut importe la version de js utilisée.

J'avais mis ça parce que dans le tutoriel j'utilise ES6, mais je vais rajouter que ce n'est pas nécéssaire (enfin rajouter un prérequi optionnel "Connaître JavaScript dans sa version ES6".

  • "mais la dépendance d'Electron sera ajoutée à votre manifeste" Je pense qu'il faudrai reformuler en quelque chose du style "la dépendance à electron sera ajoutée dans le manifeste de votre projet"

OK.

  • Dans le chapitre "Le script principal" tu annonce dans le bloc d'information que tu va utiliser les fonctions de ES6, un lien vers un tuto ne serai pas de trop pour ceux qui aurai besoin de rafraîchir leur mémoire.

En effet, je vais rajouter ça.

  • Toujours dans le chapitre "Le script principal" après la déclarations des variables raccourcie tu as un paragraphe dans le quel tu décris ce que tu va avoir comme code. N'ayant pas encore eu de code jusque là c'est très lourd, du coup j'ai vraiment tendance à vouloir bêtement sauté le paragraphe car je m'en fou de savoir point par point ce qu'il va y avoir dans le code. Je veux d'abord voir le code puis qu'on m'explique point par point son fonctionnement, de cette manière quand je lis le fonctionnement je peux allé voir le code et comprendre ce qui est écrit.
    -> La remarque est valable pour tout les paragraphe dans lesquels tu décris ce que tu va faire dans ton code. C'est bien si sa tien en une ligne, sinon mieux vaux d'abord montrer le code et expliquer ensuite.

OK, je vais faire comme ça, ça semble plus logique en plus.

  • Dans le chapitre "L'IPC", faute de frappe dans le 4 ième paragraphe "Ensuite los du clic sur le bouton".

C'est corrigé, mais pas dans la version en bêta. :p

Une question qui m'est venue dans le chapitre "Publier" c'est comment organiser les mises à jour ? Y à t'il un module de mise à jour automatique ? Faut t'il tout gérer soie même ?

Il y a un module de mise à jour (Squirrel si ça t'intérèsse), mais il me semble qu'il est un peu complexe à mettre en place il me semble, et je pense qu'un tuto dédié serait mieux. En fait je ne m'y suis jamais trop intéréssé, donc je ne sais pas trop …

Sinon c'est un chouette tuto :) Merci pour ton travail.

La source

De rien. Et merci à toi de prendre le temps de relire. :)

+0 -0

Bonjour les agrumes !

La bêta a été mise à jour et décante sa pulpe à l'adresse suivante :

Merci d'avance pour vos commentaires.

J'ai pris en compte les remarques de La Source. J'ai essayé de virer les gros pâtés de texte qui explique se qu'on va faire avant le code (ils sont après maintenant), dites moi si ça vous semble bien comme ça. Et j'ai aussi passé un coup de Grammalecte, pour la typo, mais aussi pour certaines fautes d'accords, d'orthographe ou de conjugaison (elle est cool cette extension quand même :p ). Si vous avez encore des retours, allez-y, la bêta est là pour ça. :D

+0 -0

Mieux :) beaucoup mieux, maintenant que je lis le paragraphe expliquant le code, j'ai le code en mémoire et quand je lis l'explication je comprend tout de suite de quoi tu parles et si je suis pas sur j'ai qu'a levé les yeux pour comprendre ce que tu explique.

Dans la partie concernant la fermeture de l'application tu dis "quand toutes les fenêtres ont étés fermées", sous-entendu on peu ouvrir des fenêtres… il serai intéréssant de parler de la gestion de plusieurs fenêtres avec la possibilité d'ouvrir une fenêtre via un menu contextuel ou si on appuie sur un bouton dans un chapitre du tuto.
Par ailleurs (j'ignore comment est gérer le multi fenêtrage) il faut voir comment gérer les fenêtre fille. Par exemple interdire de revenir dans la fenêtre parent sans que la fille soie refermer ou au contraire avoir deux fenêtres complètement indépendante.

Une autre question qui m'est venue est comment est gérer le localstorage ? Y a-t'il une limite de taille ? L'utilisateur peut-il le vider lui même ?

Si l'on fait une requête ajax depuis l'application, quel sera notre host ? (pour l'autoriser sur le serveur)

Ce sont des questions qui sont peut-être un peu avancée mais néanmoins je me les suis posé du coup peut-être quelqu'un d'autre se les posera ^^

+0 -0

Mieux :) beaucoup mieux, maintenant que je lis le paragraphe expliquant le code, j'ai le code en mémoire et quand je lis l'explication je comprend tout de suite de quoi tu parles et si je suis pas sur j'ai qu'a levé les yeux pour comprendre ce que tu explique.

Ah, je suis content que ça te plaise. :)

Dans la partie concernant la fermeture de l'application tu dis "quand toutes les fenêtres ont étés fermées", sous-entendu on peu ouvrir des fenêtres… il serai intéréssant de parler de la gestion de plusieurs fenêtres avec la possibilité d'ouvrir une fenêtre via un menu contextuel ou si on appuie sur un bouton dans un chapitre du tuto.
Par ailleurs (j'ignore comment est gérer le multi fenêtrage) il faut voir comment gérer les fenêtre fille. Par exemple interdire de revenir dans la fenêtre parent sans que la fille soie refermer ou au contraire avoir deux fenêtres complètement indépendante.

En effet, un chapitre sur la gestion des fenêtres peut être intéressant, surtout que j'en parle à différents endroits dans le tuto, sans vraiment préciser ce que c'est.

Une autre question qui m'est venue est comment est gérer le localstorage ? Y a-t'il une limite de taille ? L'utilisateur peut-il le vider lui même ?

Le localStorage est enregistré dans le dossier AppData (sous Windows, pour les autres sytèmes je ne sais pas), et donc l'utilisateur, si il est un peu bidouilleur peut venir supprimer les fichiers qui le contienne. Et je ne suis pas sûr, mais je ne penses pas qu'il soit limité.

Si l'on fait une requête ajax depuis l'application, quel sera notre host ? (pour l'autoriser sur le serveur)

Je ne suis pas sûr de bien comprendre ce que tu veux dire … je n'ai jamais fait de AJAX a un niveau très avancé … :honte: Mais de toute façon, il me semble que le module request est préféré pour faire des requêtes dans Electron.

+0 -0

Um…

Dans la cas de request le problème ne doit pas se poser, mais je pense au cas où je souhaiterai transposer un site web en application sans avoir besoin de tout ré-écrire (donc finalement juste wrapper le site dans une application). Si le site est dynamique et utilise l'objet xmlhttprequest il va donc faire des requête ajax. Les requêtes ajax sont limitée par les navigateurs (chrome, ff, ie, …) pour éviter des requête non autorisée en envoyant une entête HTTP Origin, le serveur renvoyant une entête Access-Control-Allow-Origin (voir ici pour plus d'infos)

Si l'origin n'est pas contenu dans la liste des autorisé le navigateur bloque purement et simplement la requête.

Vu qu'electron n'est finalement qu'un navigateur embarquer… comment le gère t'il ? J'aurai tendance à penser qu'il à le même mécanisme… du coup il faut savoir quel est l'origin pour pouvoir autorisé sur le serveur web la possibilité de faire des requêtes AJAX.

+0 -0

Salut ! J'ai pas de remarque sur le fond-fond, mais quelques remarques sur le code. Tu décides d'utiliser ES2015, c'est une super idée. J'aurais pas compris et ça m'aurait pas plu que tu choisisses une version de JS d'il y a 10 ans. Par contre il y a des choses très étonnantes dans ton code, et je pars du principe que si ça me surprend alors que je connais le langage, ça risque d'engendrer une grande confusion aux gens qui ne connaissent pas si bien le langage.

let childWindow = new BrowserWindow({parent: mainWindow});

const ?

fenetre.loadURL('file://' + __dirname + 'mapage.html');

Évite de concaténer inutilement des strings. ;)

C’est un tableau d’objets sous cette forme.

C'est un objet. Un objet litéral. Pas un tableau. Si tu parles de ['mp3', 'ogg', 'wav'], c'est une liste de chaines.

'L\'appliction a rencontré

application

let tray = new Tray('assets/zds.png');

const ?

+0 -0

const ?

Oui en effet, j'ai pas toujours le réflexe de l'utiliser. :p

fenetre.loadURL('file://' + __dirname + 'mapage.html');

Évite de concaténer inutilement des strings. ;)

Ça me semble utile ici, non ?

C’est un tableau d’objets sous cette forme.

C'est un objet. Un objet litéral. Pas un tableau. Si tu parles de ['mp3', 'ogg', 'wav'], c'est une liste de chaines.

OK.

'L\'appliction a rencontré

application

C'est corrigé dans la version en validation. ;)

let tray = new Tray('assets/zds.png');

const ?

victor

Oui, là aussi.

Merci pour ton retour. :)

+0 -0

fenetre.loadURL('file://' + __dirname + 'mapage.html');

Évite de concaténer inutilement des strings. ;)

Ça me semble utile ici, non ?

Bat'

Non, c'est pas utile. C'est comme en Python : tu peux faire 'a' + 'b', mais .format est mieux.

Du coup, en JS, on fait

1
fenetre.loadURL(`file://${__dirname}mapage.html`);
+0 -0
Ce sujet est verrouillé.