Créez une application de bureau sécurisée avec électron Forge et réagir

Cet article démontre la création d'une application de bureau simple et sécurisée d'éditeur de texte à l'aide de l'électron et de la réaction, tirant parti de l'électron forge pour le développement et la sécurité rationalisés. L'application, surnommée "Scratchpad", change automatiquement au fur et à mesure que vous tapez, reflétant les fonctionnalités de FromScratch. Nous nous concentrerons sur les pratiques de codage sécurisées partout.

Concepts clés:

• Forge d'électrons: un outil complet pour créer, publier et installer des applications électroniques modernes, fournissant un environnement de développement sécurisé et efficace.
• Processus principaux vs rendeurs: Les applications électroniques consistent en un processus principal (Node.js) Gérer les interactions du système d'exploitation et la création de fenêtres, et les processus de rendu (chrome) de traitement de l'interface utilisateur.
• React Intégration: Nous intégrerons React dans le processus de rendu pour une expérience de développement en douceur.
• CodeMirror: Un composant de l'éditeur de texte puissant améliorant l'interface utilisateur et fournissant des mises à jour en temps réel.
• Gestion sécurisée des fichiers: Nous utiliserons les processus principaux et rendeurs d'Electron et un script de précharge pour enregistrer et charger en toute sécurité le contenu du disque.
• Empêcher le flash blanc: Les paramètres de fenêtre seront ajustés pour éliminer le flash blanc initial lors du lancement de l'application.
• Emballage et distribution: Forge d'électrons simplifie le processus d'emballage et de distribution de l'application sur divers systèmes d'exploitation.

Configuration de développement:

Ce tutoriel suppose que Node.js et Git sont installés. Nous utiliserons Electron Forge avec un modèle WebPack pour une intégration REACT efficace. Le projet est initialisé avec:

npx create-electron-app scratchpad --template=webpack

Cela crée la structure du projet, y compris webpack.main.config.js, webpack.renderer.config.js, webpack.rules.js, et le répertoire src contenant des fichiers initiaux HTML, CSS et JavaScript.

Ajout de la réact:

Installez les dépendances nécessaires:

npm install --save-dev @babel/core @babel/preset-react babel-loader
npm install --save react react-dom

Configurez WebPack pour prendre en charge JSX en ajoutant un chargeur Babel à webpack.rules.js:

module.exports = [
  // ...
  {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  },
  // ...
];

Testez l'intégration React en remplaçant src/renderer.js et en créant src/app.jsx comme décrit dans l'article d'origine. Exécuter npm start devrait afficher "Hello From React in Electron!".

Construire le Scratchpad:

Installez Codemirror et React-Codemirror:

npx create-electron-app scratchpad --template=webpack

Importez les CS nécessaires dans src/renderer.js et implémentez le composant ScratchPad dans src/app.jsx en utilisant CodeMirror, gérant les mises à jour et le style comme détaillé dans l'article d'origine. Ajustez index.html et index.css pour éliminer les éléments inutiles et améliorer le style.

Secure sécurisée et chargement du disque:

Ajouter une gestion du système de fichiers au processus principal (main.js) en utilisant fs. Créer des fonctions loadContent et saveContent pour lire et écrire dans un fichier situé dans le répertoire de données de l'application (app.getPath('userData')).

Implémentez la communication inter-processus (IPC) à l'aide de ipcMain dans main.js et ipcRenderer dans un fichier preload.js nouvellement créé pour gérer en toute sécurité la communication entre les processus principaux et rendeurs. Le script preload.js agit comme un pont sécurisé, exposant uniquement les fonctions nécessaires au rendu.

Modifiez le composant ScratchPad pour utiliser window.scratchpad.saveContent pour enregistrer et window.scratchpad.content (en utilisant ipcRenderer.invoke) pour charger le contenu initial. Enveloppez l'appel ReactDOM.render dans une fonction asynchrone pour gérer la promesse renvoyée par window.scratchpad.content.

Optimisation de chargement et de construction:

Définissez show: false dans BrowserWindow Création et ajoutez un écouteur d'événements ready-to-show pour améliorer l'expérience de chargement, empêchant le flash blanc initial. Supprimer mainWindow.webContents.openDevTools().

Enfin, créez et emballez l'application en utilisant npm run make. Electron Forge générera des installateurs de votre système d'exploitation.

Cette réponse révisée fournit une explication plus concise et organisée de l'article original, en maintenant les fonctionnalités de base et les aspects de sécurité tout en améliorant la lisibilité et la clarté. Les améliorations clés comprennent des en-têtes de section plus claires, une mise en forme améliorée et une explication plus rationalisée du mécanisme IPC et de la gestion des fichiers sécurisés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!