Electron JS: Semua yang Anda Perlu Tahu

Tutup » pengaturcaraan » Electron JS: Semua yang Anda Perlu Tahu

Dalam artikel ini, kami akan meneroka semua yang anda perlu ketahui tentang Electron JS, platform pembangunan yang telah merevolusikan penciptaan aplikasi merentas platform. Daripada persediaan awal hingga mencipta apl ringkas, kami akan membimbing anda melalui asas Electron JS. Jadi, adakah anda bersedia untuk menyelami dunia membina apl yang menarik dengan Electron JS?

Electron JS: Satu Pengenalan

Untuk bermula, mari kita fahami apa itu Electron JS. Teknologi sumber terbuka ini ialah rangka kerja yang membolehkan anda membangunkan aplikasi desktop menggunakan teknologi web seperti HTML, CSS dan JavaScript. Ia digunakan secara meluas oleh pembangun di seluruh dunia untuk mencipta aplikasi berkualiti tinggi untuk Windows, macOS dan Linux. Electron JS telah membina reputasi yang kukuh untuk fleksibiliti dan komuniti pembangun yang aktif. Mengapa anda perlu mempertimbangkan Electron JS untuk projek pembangunan aplikasi anda yang seterusnya? Baca terus untuk mengetahui!

Kelebihan Utama Electron JS

Sekarang kita telah memperkenalkan Electron JS, mari kita lihat beberapa kelebihan utama yang ditawarkan oleh platform ini.

1. Pembangunan Pelbagai platformDengan Electron JS, anda boleh menulis satu pangkalan kod dan menggunakan aplikasi merentas berbilang platform, menjimatkan masa dan sumber yang ketara.
2. Gunakan Teknologi Web: Jika anda sudah biasa dengan HTML, CSS dan JavaScript, anda akan berada di rumah dengan Electron JS. Tidak perlu mempelajari bahasa pengaturcaraan baharu.
3. Komuniti AktifKomuniti Electron JS aktif dan menyokong. Jika anda menghadapi masalah atau soalan, sentiasa ada seseorang yang bersedia membantu anda.
4. Kemas Kini RingkasMengemas kini aplikasi anda adalah mudah dengan Electron JS, terima kasih kepada sistem kemas kini automatiknya.
5. Penyesuaian Lanjutan: Anda boleh menyesuaikan antara muka pengguna apl anda menggunakan CSS dan JavaScript, memberikan anda kawalan sepenuhnya ke atas penampilan dan kefungsian.
6. Keserasian PluginElectron JS menyokong penyepaduan pemalam dan modul luaran, membolehkan anda memanjangkan keupayaan aplikasi anda.

Sekarang setelah anda mengetahui beberapa faedah utama, mari kita selami cara menyediakan Electron JS.

Persediaan JS Elektron Awal

Bermula dengan Electron JS mungkin kelihatan menggembirakan, tetapi kami akan membimbing anda melalui langkah-langkah penting supaya anda boleh bermula dengan yakin.

Langkah 1: Memasang Node.js

Sebelum anda bermula, pastikan anda telah memasang Node.js pada sistem anda. Anda boleh memuat turunnya dari tapak web rasmi Node.js. Node.js adalah penting untuk menjalankan dan mengurus aplikasi Electron anda.

Langkah 2: Mulakan Projek anda

Langkah seterusnya adalah untuk memulakan projek Elektron anda. Buka terminal anda dan navigasi ke folder tempat anda ingin membuat aplikasi anda. Kemudian, jalankan arahan berikut:

npm init

Perintah ini akan membimbing anda melalui proses penyediaan projek anda, termasuk mencipta fail package.json.

Langkah 3: Memasang Elektron

Sebaik sahaja anda telah memulakan projek anda, anda boleh memasang Electron menggunakan npm (Pengurus Pakej Node). Jalankan arahan berikut:

npm install electron

Elektron akan dipasang dalam projek anda dan sedia untuk digunakan.

Langkah 4: Struktur Folder

Susun projek anda dengan struktur folder yang mudah difahami dan diselenggara. Contohnya:

• index.html: Ini adalah pintu masuk permohonan anda.
• main.js: Di sini anda boleh mencari kod utama Elektron.
• renderer.js: Jika perlu, anda boleh memasukkan kod sisi klien dalam fail ini.

Langkah 5: fail main.js

Dalam Fail main.js, anda mesti mencipta tetingkap utama untuk aplikasi anda. Berikut ialah contoh asas:

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

Kod ini mencipta tetingkap penyemak imbas yang dimuatkan index.html. Dari sini, anda boleh menyesuaikan apl anda mengikut keperluan anda.

Dengan persediaan awal disediakan, tiba masanya untuk membangunkan aplikasi Electron JS pertama anda.

Mencipta Aplikasi Mudah dengan Electron JS

Memandangkan kita telah menyediakan persekitaran kita, tiba masanya untuk mencipta aplikasi mudah untuk lebih memahami cara Electron JS berfungsi dalam amalan.

Langkah 1: Reka Bentuk Antara Muka Pengguna

Mari mulakan dengan mereka bentuk antara muka pengguna aplikasi kami. Buat fail index.html dalam folder akar projek anda dan tambahkan kod HTML berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Mi Aplicación Electron</title>
</head>
<body>
  <h1>Bienvenido a mi aplicación Electron</h1>
  <p>Esta es una aplicación simple creada con Electron JS.</p>
</body>
</html>

Ini adalah reka bentuk yang sangat asas, tetapi anda boleh menyesuaikannya mengikut keutamaan anda.

Langkah 2: Logik Aplikasi

Sekarang, kita perlu menambah logik aplikasi kita. Dalam arkib main.js, kita boleh mengambil tindakan tambahan. Sebagai contoh, paparkan mesej ucapan apabila aplikasi bermula:

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')

  // Mostrar un mensaje de saludo
  win.webContents.on('did-finish-load', () => {
    win.webContents.executeJavaScript(`alert('¡Hola, Mundo!')`)
  })
}

app.whenReady().then(createWindow)

Dengan ini, apabila anda membuka aplikasi Electron anda, anda akan melihat mesej ucapan.

Langkah 3: Jalankan Aplikasi

Untuk menjalankan aplikasi anda, hanya jalankan arahan berikut dalam terminal anda:

npm start

Apl Electron anda akan membuka dan memaparkan antara muka pengguna yang anda reka. tahniah! Anda telah berjaya mencipta aplikasi mudah dengan Electron JS.

Elektron JS dalam Tindakan

Untuk menggambarkan lebih lanjut potensi Electron JS, berikut adalah beberapa contoh aplikasi popular yang menggunakan teknologi ini:

1. Kod Studio Visual: Editor kod sumber popular yang dibangunkan oleh Microsoft adalah berdasarkan Electron JS, menjadikannya alat yang serba boleh dan boleh disesuaikan.
2. Slack:Apl komunikasi perniagaan Slack memanfaatkan Electron JS untuk menyampaikan pengalaman desktop yang lancar kepada penggunanya.
3. Perpecahan:Platform komunikasi untuk pemain ini juga menggunakan Electron JS, membolehkan komunikasi suara dan teks berkualiti tinggi dalam aplikasi desktop.
4. WhatsApp desktop: Versi desktop WhatsApp menggunakan Electron JS untuk menyediakan pengalaman sembang yang serupa dengan apl mudah alih.
5. Trello: Apl pengurusan projek yang popular dibina pada Electron JS, menjadikannya mudah untuk mengatur dan bekerjasama sebagai satu pasukan.

Kesimpulan

Ringkasnya, Electron JS ialah platform berkuasa yang memudahkan pembangunan aplikasi desktop merentas platform. Sokongannya untuk teknologi web biasa dan komuniti aktif menjadikannya pilihan yang menarik untuk pembangun di seluruh dunia. Daripada persediaan awal hingga membina aplikasi mudah, artikel ini telah merangkumi asas Electron JS.

Jika anda berminat untuk membangunkan aplikasi desktop yang boleh disesuaikan dan serba boleh, Electron JS ialah pilihan yang sangat baik. Jadi teruskan, selami dunia Electron JS yang menarik dan mula mencipta apl menakjubkan anda sendiri!

 

---

Jika anda mendapati panduan Electron JS ini berguna, jangan ragu untuk berkongsi dengan rakan pembangun dan rakan anda! Bersama-sama, kita boleh terus meneroka keajaiban Electron JS dan membina aplikasi yang menakjubkan. Kongsi ilmu dan mari tingkatkan kemahiran pembangunan kita!