Desktopapplicaties ontwikkelen met Electron · Les

Shell-integratie

Leer externe links, bestanden en mappen openen met de standaardapplicaties van het besturingssysteem via Electron's `shell`-module.

Les 3 van 411 stappen

Shell-integratie is een gratis Desktopapplicaties ontwikkelen met Electron-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Desktopapplicaties ontwikkelen met Electron. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Desktopapplicaties ontwikkelen met Electron bevat in totaal 4 lessen.

Introductie tot shell-integratie

Welkom bij shell-integratie! In Electron kan je desktopapp op krachtige manieren communiceren met het besturingssysteem (OS) van de gebruiker.

Dit betekent dat je externe koppelingen en bestanden kunt openen of zelfs items in de bestandsverkenner van het besturingssysteem kunt weergeven, net als systeemeigen apps.

Maak kennis met de module `shell`

Electron biedt de ingebouwde module shell om deze interacties met het besturingssysteem eenvoudig en veilig te maken. De module is beschikbaar in zowel het hoofdproces als het rendererproces.

Met de module shell kan je taken zoals het openen van URL's of bestanden delegeren aan de standaardapplicaties van het besturingssysteem.

Externe URL's openen

De meest voorkomende toepassing is het openen van webkoppelingen in de standaardbrowser van de gebruiker. Dat doe je met shell.openExternal(url).

Dit is belangrijk voor de beveiliging: in plaats van externe webinhoud in je app weer te geven, geef je die door aan een vertrouwde browser.

Code: een externe koppeling openen

Zo open je een externe URL. Deze code staat meestal in je main.js of wordt aangeroepen vanuit een preloadscript als de actie door het rendererproces wordt geactiveerd.

Probeer dit voorbeeld uit te voeren:

const { app, shell } = require('electron');

app.whenReady().then(() => {
  // In a real app, this would be triggered by a user action.
  // For this demo, it opens when the app is ready.
  shell.openExternal('https://www.electronjs.org/docs')
    .then(() => console.log('Opened Electron docs!'))
    .catch(err => console.error('Failed to open URL:', err));
  // A real Electron app would also create a BrowserWindow here.
});

Lokale bestanden en mappen openen

Wil je vanuit je app een document, afbeelding of zelfs een map openen? Gebruik dan shell.openPath(path).

Deze functie probeert het opgegeven bestand of de opgegeven map te openen met de standaardapplicatie van het besturingssysteem voor dat bestandstype.

Code: een lokaal bestand openen

In dit voorbeeld wordt een eenvoudig tekstbestand gemaakt en vervolgens geopend met de standaardteksteditor van het besturingssysteem.

Probeer dit voorbeeld uit te voeren:

const { app, shell } = require('electron');
const path = require('path');
const fs = require('fs');

app.whenReady().then(() => {
  const userDataPath = app.getPath('userData');
  const filePath = path.join(userDataPath, 'my-document.txt');

  // Create a dummy file for demonstration
  fs.writeFileSync(filePath, 'Hello from CoddyKit! This is your document.');

  shell.openPath(filePath)
    .then(() => console.log(`Opened: ${filePath}`))
    .catch(err => console.error(`Failed to open path: ${err}`));
});

Items weergeven in Explorer/Finder

Soms wil je een bestand niet openen, maar alleen laten zien waar het zich bevindt. shell.showItemInFolder(fullPath) doet precies dat.

De functie toont het opgegeven bestand in de bestandsbeheerder van het besturingssysteem van de gebruiker (bijvoorbeeld Bestandsverkenner in Windows of Finder in macOS) en selecteert het desgewenst.

Code: een item in een map weergeven

We maken nog een bestand en tonen vervolgens de locatie ervan aan de gebruiker.

Probeer dit voorbeeld uit te voeren:

const { app, shell } = require('electron');
const path = require('path');
const fs = require('fs');

app.whenReady().then(() => {
  const desktopPath = app.getPath('desktop');
  const fileToShowPath = path.join(desktopPath, 'coddykit_demo_file.txt');

  // Create a dummy file on the desktop
  fs.writeFileSync(fileToShowPath, 'Find me!');

  shell.showItemInFolder(fileToShowPath);
  console.log(`Showing item in folder: ${fileToShowPath}`);
});

Beveiliging en aanbevolen werkwijzen

Houd bij het gebruik van methoden van shell, vooral met invoer van de gebruiker, altijd rekening met de beveiliging:

URL's valideren: Controleer voordat je openExternal() aanroept of de URL veilig is en bedoeld is om te worden geopend.
Contextisolatie: Gebruik in het rendererproces een preloadscript om alleen de benodigde functies van shell veilig beschikbaar te maken.
Fouten afhandelen: Voeg altijd .catch() toe aan methoden die Promises retourneren, zoals openExternal en openPath.

Korte controle over shell

Welke methode van de module shell gebruik je om een webkoppeling in de standaardbrowser van de gebruiker te openen?

Beantwoord dit in de interactieve les

Samenvatting: shell-integratie

Goed gedaan! Je hebt geleerd hoe de module shell van Electron je app helpt communiceren met het systeemeigen besturingssysteem:

shell.openExternal() voor webkoppelingen.
shell.openPath() voor lokale bestanden en mappen.
shell.showItemInFolder() om items in de bestandsbeheerder weer te geven.

Deze methoden bieden een naadloze en veilige manier om de functionaliteit van je app uit te breiden naar de systeemeigen omgeving.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 47

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Shell-integratie” gratis?

Ja — de volledige tekst van “Shell-integratie” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Desktopapplicaties ontwikkelen met Electron wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Desktopapplicaties ontwikkelen met Electron bevat in totaal 4 lessen.

Wat leer ik in “Shell-integratie”?

Leer externe links, bestanden en mappen openen met de standaardapplicaties van het besturingssysteem via Electron's `shell`-module. Je oefent met Desktopapplicaties ontwikkelen met Electron door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Desktopapplicaties ontwikkelen met Electron te beginnen?

Ervaring vooraf is niet nodig. Desktopapplicaties ontwikkelen met Electron op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Shell-integratie”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Desktopapplicaties ontwikkelen met Electron?

Ja. Elke les over Desktopapplicaties ontwikkelen met Electron bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Desktopapplicaties ontwikkelen met Electron