Utvikling av Electron-skrivebordsapper · leksjon

Integrasjon med skytjenester

Lær å integrere Electron-applikasjonen Deres sikkert med ulike skytjenester for datasynkronisering, autentisering og backend-funksjonalitet.

Leksjon 3 av 412 trinn

Integrasjon med skytjenester er en gratis leksjon i Utvikling av Electron-skrivebordsapper på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av Electron-skrivebordsapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.

Hvorfor koble til skyen?

Electron-apper er kraftige, men noen ganger trenger de mer. Integrasjon med skytjenester åpner for mange muligheter:

Datasynkronisering: Hold brukerdata konsistente på tvers av enheter.
Brukerautentisering: Håndter brukerinnlogginger og profiler på en sikker måte.
Backend-logikk: Kjør komplekse oppgaver uten å belaste skrivebordsappen.

I denne leksjonen utforsker De hvordan De kan legge til disse kraftige funksjonene i Electron-applikasjonen Deres.

Typer skytjenester

Skytjenester tilbyr ulike funksjoner. Her er noen vanlige kategorier De kan integrere i Electron-appen Deres:

Autentisering: Tjenester som Firebase Authentication eller Auth0 håndterer brukerregistrering, innlogging og identitetsforvaltning.
Databaser og lagring: Sanntidsdatabaser (Firebase Firestore, AWS DynamoDB) eller fillagring (AWS S3, Google Cloud Storage) for varige data.
Serverløse funksjoner: Tjenester som AWS Lambda eller Firebase Functions lar Dem kjøre backend-kode uten å administrere servere.

Valget av riktig tjeneste avhenger av appens spesifikke behov.

Sikker brukerinnlogging

Autentisering av brukere i Electron innebærer ofte en ekstern nettleser. Dette er et sikkert mønster, særlig for OAuth 2.0:

Electron-appen åpner en innloggings-URL i brukerens standardnettleser.
Brukeren logger inn på skyleverandørens nettsted.
Skyleverandøren omdirigerer tilbake til en spesiell URI som Electron-appen kan fange opp.
Appen henter autentiseringstokener fra denne omdirigeringen.

På denne måten holdes sensitive innloggingsopplysninger utenfor skrivebordsappen.

Åpne ekstern innloggingslenke

For å starte en OAuth-flyt åpner De vanligvis skyleverandørens autoriserings-URL ved hjelp av Electron-modulen shell. Dette sørger for at brukeren logger inn på en sikker måte i standardnettleseren sin.

Prøv å kjøre dette grunnleggende eksempelet:

// main.js (Electron's main process entry point)
const { app, BrowserWindow, shell } = require('electron');

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 600,
    height: 400,
    webPreferences: {
      nodeIntegration: true, // For simplicity in this example
      contextIsolation: false // For simplicity
    }
  });

  mainWindow.loadURL('about:blank'); // Load a blank page for demo
  mainWindow.webContents.openDevTools(); // Open DevTools for console output

  console.log('App ready. Opening external link in 3 seconds...');
  // Simulate opening an external login page
  setTimeout(() => {
    const authUrl = 'https://www.example.com/login-simulation'; // Placeholder URL
    shell.openExternal(authUrl);
    console.log('External browser opened! Check your system browser.');
    console.log('Close this window to quit the app.');
  }, 3000);
}

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Fange opp omdirigeringer

Etter en vellykket ekstern innlogging omdirigerer skyleverandøren til en URI. Electron-appen Deres må fange opp denne.

Egendefinert protokoll: Registrer en egendefinert protokoll (for eksempel myapp://callback) som operativsystemet kan rute til appen Deres.
Lokal server: Start en liten lokal HTTP-server (for eksempel http://localhost:8080) i appen for å lytte etter omdirigeringen.

Når omdirigeringen er fanget opp, kan appen analysere URL-parametrene for å hente autentiseringstokenene (for eksempel tilgangstoken og fornyelsestoken).

Sanntidsdata med Firestore

Firebase Firestore er en fleksibel og skalerbar NoSQL-skydatabase som tilbyr sanntidssynkronisering av data. Den egner seg godt til:

Lagring av brukerinnstillinger og applikasjonsinnstillinger.
Synkronisering av data på tvers av flere instanser av Electron-appen Deres eller andre plattformer.
Utvikling av samarbeidsfunksjoner med direkte oppdateringer.

De kan bruke SDK-et på klientsiden direkte i renderer-prosessen eller Admin SDK i hovedprosessen for sikrere, serverlignende operasjoner.

Lagre data i Firestore

Her er et enkelt eksempel som viser hvordan De initialiserer Firebase og skriver til og leser data fra Firestore i Electron-hovedprosessen. De må installere firebase-pakken (npm install firebase) og erstatte plassholderne med den faktiske konfigurasjonen for Firebase-prosjektet Deres.

// main.js snippet - assumes Firebase is initialized
const { app, BrowserWindow } = require('electron');
const firebase = require('firebase/app');
require('firebase/firestore'); // Import Firestore service

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase (only once!)
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

const db = firebase.firestore();

function createAndManageWindow() {
  const mainWindow = new BrowserWindow({
    width: 600,
    height: 400,
    webPreferences: {
      nodeIntegration: true, // Required for require statements in main process
      contextIsolation: false // For simplicity
    }
  });

  mainWindow.loadURL('about:blank'); // Load a blank page
  mainWindow.webContents.openDevTools(); // Open DevTools for console output

  console.log('Attempting Firestore operations...');

  // Add a new document to a collection
  db.collection("electron_users").doc("user123").set({
    name: "CoddyKit User",
    email: "user@coddykit.com",
    lastLogin: new Date()
  })
  .then(() => {
    console.log("Document successfully written!");
    // Read the document back
    db.collection("electron_users").doc("user123").get()
      .then((doc) => {
        if (doc.exists) {
          console.log("Document data:", doc.data());
        } else {
          console.log("No such document!");
        }
      })
      .catch((error) => {
        console.error("Error getting document:", error);
      });
  })
  .catch((error) => {
    console.error("Error writing document:", error);
  });
}

app.whenReady().then(createAndManageWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createAndManageWindow();
});

Backend med serverløse funksjoner

Serverløse funksjoner (som AWS Lambda eller Firebase Cloud Functions) egner seg godt til å kjøre backend-logikk uten å administrere servere. De kan brukes til:

Sikker behandling av data før de lagres.
Utføring av tunge beregninger som ikke bør kjøre på klienten.
Integrasjon med andre skytjenester eller eksterne API-er.

Electron-appen Deres sender ganske enkelt en HTTP-forespørsel til et API-endepunkt, og skyen håndterer kjøringen.

Kalle en skyfunksjon

Electron-appen Deres kan kalle en serverløs funksjon på samme måte som alle andre web-API-er, vanligvis med en HTTP-forespørsel ved hjelp av fetch eller axios. Dette eksempelet viser et grunnleggende fetch-kall fra hovedprosessen til et offentlig test-API.

// main.js (Electron's main process entry point)
const { app, BrowserWindow } = require('electron');

async function callCloudFunction() {
  const apiUrl = "https://jsonplaceholder.typicode.com/posts/1"; // A public test API

  try {
    console.log("Attempting to call cloud function...");
    const response = await fetch(apiUrl, {
      method: "GET", 
      headers: {
        "Content-Type": "application/json"
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const result = await response.json();
    console.log("Cloud Function Response:", result);
    console.log("Successfully fetched data from cloud service!");
  } catch (error) {
    console.error("Error calling cloud function:", error);
  }
}

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 600,
    height: 400,
    webPreferences: {
      nodeIntegration: true, // Allows Node.js features in renderer (not strictly needed here)
      contextIsolation: false // For simplicity
    }
  });

  mainWindow.loadURL('about:blank'); // Load a blank page for demo
  mainWindow.webContents.openDevTools(); // Open DevTools for console output

  // Call the function after the window is ready
  mainWindow.webContents.on('did-finish-load', () => {
    callCloudFunction();
  });
}

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Sikker skyintegrasjon

Sikkerhet er avgjørende ved tilkobling til skytjenester:

API-nøkler og hemmeligheter: Ikke hardkod sensitive opplysninger. Bruk miljøvariabler eller sikre konfigurasjonsfiler.
Minste privilegium: Gi appen og skytjenestene bare tillatelsene de absolutt trenger.
Validering av inndata: Valider alltid data som kommer fra skyen, og data før de sendes.
HTTPS: Sørg for at all kommunikasjon med skytjenester bruker HTTPS for kryptering.
CORS: Konfigurer Cross-Origin Resource Sharing riktig for skyfunksjonene og API-ene.

En robust sikkerhetsstrategi beskytter både applikasjonen og brukerne Deres.

Test av skyintegrasjon

Når De integrerer autentisering med en skytjeneste i Electron, hva er en viktig grunn til å åpne innloggingssiden i brukerens eksterne standardnettleser i stedet for direkte i et Electron-BrowserWindow?

Besvar den i den interaktive leksjonen

Oppsummering av skyintegrasjon

De har lært hvordan De kan utvide funksjonaliteten i Electron-appen Deres ved å integrere skytjenester!

Vi har gått gjennom hvordan skytjenester kan brukes til autentisering, datasynkronisering og backend-logikk.
De har sett hvordan shell.openExternal bidrar til sikre OAuth-flyter.
Vi har utforsket hvordan De kan samhandle med sanntidsdatabaser som Firestore og kalle serverløse funksjoner.
Til slutt har vi gjennomgått viktige beste praksiser for sikkerhet ved skyintegrasjon.

Med disse ferdighetene kan Electron-appene Deres bli mer dynamiske, skalerbare og kraftige!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 47

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Integrasjon med skytjenester» gratis?

Ja – hele teksten i «Integrasjon med skytjenester» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av Electron-skrivebordsapper-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Integrasjon med skytjenester»?

Lær å integrere Electron-applikasjonen Deres sikkert med ulike skytjenester for datasynkronisering, autentisering og backend-funksjonalitet. Du øver på Utvikling av Electron-skrivebordsapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Utvikling av Electron-skrivebordsapper?

Ingen tidligere erfaring er nødvendig. Utvikling av Electron-skrivebordsapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Integrasjon med skytjenester»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Utvikling av Electron-skrivebordsapper-leksjonen?

Ja. Alle Utvikling av Electron-skrivebordsapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Arkitekturer for flere vinduer
Bakgrunnsprosesser og workers
Integrasjon med skytjenester
Automatiske oppdateringer av Electron-appen

← Tilbake til Utvikling av Electron-skrivebordsapper