Introduction :
Créer une application avec Typescript et Electron permet aux développeurs de concevoir des applications de bureau multiplateformes en utilisant des technologies web comme HTML, CSS et JavaScript. Grâce à la puissance de Typescript, qui améliore la robustesse du code, et Electron, qui permet de transformer une application web en logiciel de bureau, vous pouvez créer des applications performantes tout en réutilisant vos compétences de développeur web. Si vous souhaitez en savoir plus sur les meilleures pratiques de développement applicatif, consultez ce guide sur le développement applicatif.
Quels sont les prérequis pour créer une application avec Typescript et Electron ?
Installation de Node.js et Typescript
Avant de commencer, assurez-vous d’avoir Node.js installé sur votre machine. Node.js est indispensable pour gérer les dépendances du projet via npm (Node Package Manager). Vous pouvez télécharger et installer la version stable de Node.js depuis le site officiel. Si vous travaillez dans un environnement agile, vous pouvez également envisager d’explorer la méthode du Sprint 0, souvent utilisée pour préparer les bases d’un projet avant de démarrer le développement.
Ensuite, installez Typescript globalement avec la commande suivante :
bashCopier le codenpm install -g typescript
Cette installation vous permet de compiler des fichiers Typescript (.ts) en JavaScript (.js).
Installation d’Electron et création du projet de base
Une fois Node.js et Typescript installés, vous pouvez initialiser votre projet en créant un nouveau dossier et en utilisant les commandes suivantes :
bashCopier le codemkdir electron-ts-app
cd electron-ts-app
npm init -y
Ensuite, installez Electron en tant que dépendance de développement :
bashCopier le codenpm install electron --save-dev
Cela ajoutera Electron à votre projet, permettant de le transformer en application de bureau.
Si vous travaillez dans une agence spécialisée dans la création d’applications mobiles comme celle-ci, cette étape sera souvent réalisée par les équipes de développement, avec une forte attention portée à l’expérience utilisateur.
Configuration de Typescript pour le projet
Il est maintenant temps de configurer Typescript en créant un fichier tsconfig.json à la racine du projet. Ce fichier indique à Typescript comment compiler votre code. Utilisez la commande suivante :
bashCopier le codetsc --init
Puis, configurez le fichier pour que votre code soit compatible avec Electron en définissant le dossier de sortie, les options de module, et en activant des options comme strict pour une meilleure gestion des types.
Pour une meilleure gestion de vos fonctionnalités en amont, vous pouvez également intégrer des processus agiles comme une feature team qui facilitent la collaboration entre vos développeurs et les équipes produits.
Comment configurer Electron avec Typescript ?
Configuration du fichier tsconfig.json
Le fichier tsconfig.json doit être ajusté pour garantir que Typescript compile correctement votre code pour Electron. Voici un exemple de configuration de base :
jsonCopier le code{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"outDir": "./dist",
"strict": true
},
"include": ["src/**/*"]
}
Cela indique que tous les fichiers Typescript dans le dossier src seront compilés en JavaScript dans le dossier dist.
Si vous envisagez d’intégrer des solutions basées sur la blockchain, Electron peut également s’intégrer parfaitement dans vos projets. Pour une consultation plus approfondie de cette technologie, visitez notre page dédiée.
Création du fichier main.ts (point d’entrée)
Electron utilise un fichier principal qui sert de point d’entrée à l’application. Créez un fichier src/main.ts et définissez la création de la fenêtre principale de l’application comme suit :
typescriptCopier le codeimport { app, BrowserWindow } from 'electron';
let mainWindow: BrowserWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
mainWindow.loadFile('index.html');
});
Cela crée une fenêtre de 800×600 qui charge un fichier HTML lorsque l’application démarre.
Compilation du projet Typescript vers JavaScript
Pour compiler le projet, exécutez la commande suivante :
bashCopier le codetsc
Cela traduira votre fichier Typescript en JavaScript, prêt à être exécuté par Electron. Vous pouvez maintenant lancer votre application en exécutant la commande :
bashCopier le codenpm start
Comment créer la première fenêtre Electron avec Typescript ?
Création de la fenêtre principale avec BrowserWindow
Le module BrowserWindow est au cœur d’Electron pour la création de fenêtres. Vous pouvez définir plusieurs propriétés pour personnaliser la fenêtre, comme sa taille, son icône ou même son comportement. Par exemple :
typescriptCopier le codemainWindow = new BrowserWindow({
width: 1024,
height: 768,
backgroundColor: '#ffffff',
icon: 'path/to/icon.png'
});
Gestion des options de la fenêtre (taille, icône, couleur de fond)
L’API Electron permet de nombreuses personnalisations, comme le réglage de la couleur de fond de la fenêtre ou l’ajout d’une icône spécifique. Vous pouvez également définir si la fenêtre doit être redimensionnable ou non :
typescriptCopier le codemainWindow = new BrowserWindow({
width: 1024,
height: 768,
resizable: false,
backgroundColor: '#282c34'
});
Affichage d’un fichier HTML dans la fenêtre
Pour afficher du contenu dans la fenêtre Electron, vous devez charger un fichier HTML. Cela se fait via la méthode loadFile() ou loadURL() si vous souhaitez afficher un site distant :
typescriptCopier le codemainWindow.loadFile('index.html');
Si vous développez des solutions en mode lean startup, cette approche rapide et flexible vous permettra de tester des versions MVP efficacement. Pour en savoir plus, consultez notre article sur la méthode Lean Startup.
Comment personnaliser les menus Electron avec Typescript ?
Ajout de menus par défaut et menus personnalisés
Electron propose des menus par défaut. Cependant, vous pouvez personnaliser ceux-ci pour répondre aux besoins spécifiques de votre application :
typescriptCopier le codeimport { Menu } from 'electron';
const template = [
{ label: 'Fichier', submenu: [{ label: 'Quitter', role: 'quit' }] },
{ label: 'Édition', submenu: [{ label: 'Copier', role: 'copy' }] }
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
Si votre application inclut des composants UX complexes, n’oubliez pas de consulter les outils UX Design disponibles ici, qui peuvent enrichir l’interface de votre application.
Création d’événements pour les menus
Vous pouvez également ajouter des événements pour les actions du menu. Par exemple, vous pouvez déclencher une fonction lorsque l’utilisateur clique sur un élément du menu :
typescriptCopier le codesubmenu: [
{
label: 'Rafraîchir',
click() { mainWindow.reload(); }
}
]
Utilisation des menus natifs en fonction des plateformes (Windows, macOS)
Electron propose de définir des menus adaptés à chaque système d’exploitation. Par exemple, sous macOS, vous pourriez vouloir que l’application reste ouverte même lorsque toutes les fenêtres sont fermées.
Comment gérer du code spécifique aux plateformes dans Electron avec Typescript ?
Utilisation de process.platform pour identifier les systèmes d’exploitation
Electron permet d’adapter le comportement de l’application en fonction de la plateforme utilisée, via la variable process.platform. Par exemple :
typescriptCopier le codeif (process.platform === 'darwin') {
// Comportement spécifique pour macOS
}
Si votre application contient des éléments sensibles nécessitant des tests rigoureux, n’oubliez pas d’effectuer un test de non-régression. Vous pouvez trouver plus d’informations ici.
Personnalisation des comportements pour macOS, Windows, et Linux
Sur macOS, les applications continuent de fonctionner même après la fermeture des fenêtres. Pour gérer cela, vous pouvez écouter l’événement window-all-closed :
typescriptCopier le codeapp.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
Création de fonctionnalités spécifiques à chaque système
Electron permet de créer des conditions pour adapter votre application aux spécificités de chaque système, qu’il s’agisse des raccourcis clavier, des menus ou du comportement général.
Comment packager et distribuer une application Electron avec Typescript ?
Installation et configuration de electron-packager
Pour packager votre application et la distribuer, installez electron-packager :
bashCopier le codenpm install electron-packager --save-dev
Cela vous permet de générer un fichier exécutable pour chaque plateforme. Si vous avez des clients potentiels souhaitant tester votre produit, vous pouvez faciliter la distribution de votre application grâce à TestFlight, particulièrement utile pour les versions iOS.
Génération des fichiers .exe ou .app pour une distribution locale
Ajoutez un script de packaging dans votre fichier package.json :
jsonCopier le code"scripts": {
"build": "electron-packager . MyApp --platform=win32 --arch=x64"
}
Exécutez ensuite la commande suivante pour créer un exécutable :
bashCopier le codenpm run build
Ajout de la fonctionnalité d’auto-update avec electron-builder
Pour ajouter la fonctionnalité d’auto-update, installez electron-builder et configurez-le dans votre projet. Vous pourrez ainsi déployer des mises à jour sans intervention des utilisateurs.
Quels frameworks Javascript peut-on utiliser avec Electron et Typescript ?
Intégration de React avec Typescript et Electron
Vous pouvez intégrer React pour gérer l’interface utilisateur tout en utilisant Typescript pour améliorer la gestion des composants et des états. Pour une définition plus détaillée de React, consultez cet article sur React.
Utilisation de Vue.js avec Typescript et Electron
Vue.js est également un excellent choix pour construire une interface utilisateur réactive, en particulier avec Typescript pour une meilleure gestion des types.
Avantages de l’utilisation de frameworks dans Electron
Les frameworks permettent de structurer et de rendre l’application plus modulaire. Ils offrent une meilleure gestion des composants et facilitent le développement à grande échelle.
