Pembangunan Aplikasi Desktop Electron · Pelajaran

Mengintegrasikan dengan Perkhidmatan Awan

Pelajari cara mengintegrasikan aplikasi Electron anda dengan selamat bersama pelbagai perkhidmatan awan untuk penyegerakan data, pengesahan dan kefungsian bahagian belakang.

Pelajaran 3 daripada 412 langkah

Mengintegrasikan dengan Perkhidmatan Awan ialah pelajaran Pembangunan Aplikasi Desktop Electron percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Desktop Electron, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Mengapa Berhubung dengan Awan?

Aplikasi Electron berkuasa, tetapi kadangkala memerlukan lebih banyak ciri. Penyepaduan dengan perkhidmatan awan membuka pelbagai kemungkinan:

Penyegerakan Data: Kekalkan data pengguna supaya konsisten merentas peranti.
Pengesahan Pengguna: Urus log masuk dan profil pengguna dengan selamat.
Logik Bahagian Belakang: Jalankan tugasan kompleks tanpa membebankan aplikasi desktop.

Pelajaran ini menerangkan cara menambahkan ciri berkuasa ini pada aplikasi Electron anda.

Jenis Perkhidmatan Awan

Perkhidmatan awan menawarkan pelbagai fungsi. Berikut ialah beberapa kategori umum yang mungkin anda integrasikan dengan aplikasi Electron anda:

Pengesahan: Perkhidmatan seperti Firebase Authentication atau Auth0 mengendalikan pendaftaran pengguna, log masuk dan pengurusan identiti.
Pangkalan Data/Storan: Pangkalan data masa nyata (Firebase Firestore, AWS DynamoDB) atau storan fail (AWS S3, Google Cloud Storage) untuk data berterusan.
Fungsi Tanpa Pelayan: Perkhidmatan seperti AWS Lambda atau Firebase Functions membolehkan anda menjalankan kod bahagian belakang tanpa mengurus pelayan.

Pemilihan perkhidmatan yang sesuai bergantung pada keperluan khusus aplikasi anda.

Log Masuk Pengguna yang Selamat

Pengesahan pengguna dalam Electron selalunya melibatkan pelayar web luaran. Ini ialah corak yang selamat, khususnya untuk OAuth 2.0:

Aplikasi Electron anda membuka URL log masuk dalam pelayar lalai pengguna.
Pengguna log masuk di laman web penyedia awan.
Penyedia awan mengubah hala kembali ke URI khas yang boleh dipintas oleh aplikasi Electron anda.
Aplikasi anda mengekstrak token pengesahan daripada ubah hala ini.

Dengan cara ini, kelayakan log masuk yang sensitif tidak disimpan dalam aplikasi desktop anda.

Buka Pautan Log Masuk Luaran

Untuk memulakan aliran OAuth, biasanya anda membuka URL kebenaran penyedia awan menggunakan modul shell Electron. Ini memastikan pengguna log masuk dengan selamat dalam pelayar lalai mereka.

Cuba jalankan contoh asas ini:

// 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();
  }
});

Memintas Ubah Hala

Selepas log masuk luaran berjaya, penyedia awan mengubah hala ke URI. Aplikasi Electron anda perlu memintasnya.

Protokol Tersuai: Daftarkan protokol tersuai (contohnya, myapp://callback) yang boleh diarahkan oleh OS kepada aplikasi anda.
Pelayan Tempatan: Mulakan pelayan HTTP tempatan yang kecil (contohnya, http://localhost:8080) dalam aplikasi anda untuk mendengar ubah hala tersebut.

Selepas dipintas, aplikasi anda boleh menghuraikan parameter URL untuk mendapatkan token pengesahan (contohnya, token akses dan token penyegaran).

Data Masa Nyata dengan Firestore

Firebase Firestore ialah pangkalan data awan NoSQL yang fleksibel dan boleh diskalakan, serta menyediakan penyegerakan data masa nyata. Ia sesuai untuk:

Menyimpan keutamaan pengguna dan tetapan aplikasi.
Menyegerakkan data merentas beberapa kejadian aplikasi Electron anda atau platform lain.
Membina ciri kerjasama dengan kemas kini langsung.

Anda boleh menggunakan SDK pihak klien secara terus dalam proses pemapar atau SDK pentadbir dalam proses utama untuk operasi yang lebih selamat seperti pada pelayan.

Menyimpan Data dalam Firestore

Berikut ialah contoh ringkas yang menunjukkan cara memulakan Firebase serta menulis dan membaca data daripada Firestore dalam proses utama Electron. Anda perlu memasang pakej firebase (npm install firebase) dan menggantikan ruang letak dengan konfigurasi projek Firebase sebenar anda.

// 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();
});

Bahagian Belakang dengan Fungsi Tanpa Pelayan

Fungsi tanpa pelayan (seperti AWS Lambda atau Firebase Cloud Functions) sesuai untuk melaksanakan logik bahagian belakang tanpa mengurus pelayan. Fungsi ini boleh digunakan untuk:

Memproses data dengan selamat sebelum menyimpannya.
Melakukan pengiraan berat yang tidak sepatutnya dijalankan pada klien.
Bersepadu dengan perkhidmatan awan lain atau API luaran.

Aplikasi Electron anda hanya membuat permintaan HTTP kepada titik akhir API, manakala awan mengendalikan pelaksanaannya.

Memanggil Fungsi Awan

Aplikasi Electron anda boleh memanggil fungsi tanpa pelayan seperti API web lain, biasanya dengan permintaan HTTP fetch atau axios. Contoh ini menunjukkan panggilan fetch asas daripada proses utama kepada API ujian awam.

// 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();
  }
});

Penyepaduan Awan yang Selamat

Keselamatan amat penting apabila berhubung dengan perkhidmatan awan:

Kunci API dan Rahsia: Jangan sekali-kali menulis kelayakan sensitif secara terus dalam kod. Gunakan pemboleh ubah persekitaran atau fail konfigurasi yang selamat.
Keistimewaan Minimum: Berikan aplikasi dan perkhidmatan awan anda hanya kebenaran yang benar-benar diperlukan.
Pengesahan Input: Sentiasa sahkan data yang datang daripada awan dan data sebelum menghantarnya.
HTTPS: Pastikan semua komunikasi dengan perkhidmatan awan menggunakan HTTPS untuk penyulitan.
CORS: Konfigurasikan Perkongsian Sumber Rentas Asal dengan betul pada fungsi/API awan anda.

Strategi keselamatan yang kukuh melindungi aplikasi dan pengguna anda.

Semakan Penyepaduan Awan

Apabila mengintegrasikan pengesahan dengan perkhidmatan awan dalam Electron, apakah sebab utama untuk membuka halaman log masuk dalam pelayar luaran lalai pengguna dan bukannya terus di dalam BrowserWindow Electron?

Jawab dalam pelajaran interaktif

Ringkasan Penyepaduan Awan

Anda telah mempelajari cara memperluas keupayaan aplikasi Electron dengan mengintegrasikannya bersama perkhidmatan awan!

Kita membincangkan penggunaan perkhidmatan awan untuk pengesahan, penyegerakan data dan logik bahagian belakang.
Anda melihat cara shell.openExternal membantu aliran OAuth yang selamat.
Kita meneroka cara berinteraksi dengan pangkalan data masa nyata seperti Firestore dan memanggil fungsi tanpa pelayan.
Akhir sekali, kita membincangkan amalan terbaik keselamatan yang penting untuk penyepaduan awan.

Dengan kemahiran ini, aplikasi Electron anda boleh menjadi lebih dinamik, boleh diskalakan dan berkuasa!

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 47

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengintegrasikan dengan Perkhidmatan Awan” percuma?

Ya — teks penuh “Mengintegrasikan dengan Perkhidmatan Awan” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Aplikasi Desktop Electron, tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengintegrasikan dengan Perkhidmatan Awan”?

Pelajari cara mengintegrasikan aplikasi Electron anda dengan selamat bersama pelbagai perkhidmatan awan untuk penyegerakan data, pengesahan dan kefungsian bahagian belakang. Anda berlatih Pembangunan Aplikasi Desktop Electron menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Desktop Electron?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Desktop Electron di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Mengintegrasikan dengan Perkhidmatan Awan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Desktop Electron ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Desktop Electron menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Seni Bina Berbilang Tetingkap
Proses Latar Belakang dan Pekerja
Mengintegrasikan dengan Perkhidmatan Awan
Mengemas Kini Aplikasi Electron Anda Secara Automatik

← Kembali ke Pembangunan Aplikasi Desktop Electron