Elektron.js nima?

Elektron.js - bu JavaScript, HTML va CSS-dan foydalangan holda ish stoli ilovalarini yaratish uchun ramka. Chromium va Node.js-ni ikkilik fayliga joylashtirish orqali Electron sizga bitta JavaScript kod bazasini saqlash va Windows, macOS va Linuxda ishlaydigan platformalararo ilovalarni yaratish imkonini beradi - buning uchun mahalliy ishlab chiqish tajribasi talab qilinmaydi.

Ishni boshlash

Sizga Electron.js ilovasini ishlab chiqish va uni foydalanuvchilarga tarqatish jarayoni bo'yicha yo'l-yo'riq ko'rsatadigan o'quv qo'llanmadan boshlashingizni tavsiya qilamiz. Misollar va API hujjatlari ham atrofni ko'rib chiqish va yangi narsalarni kashf qilish uchun yaxshi joylardir.

Elektron skripka bilan ishlash misollari

Electron Fiddle - bu Electron bilan yozilgan va Electronning texnik xizmatchilari tomonidan qo'llab-quvvatlanadigan sandbox ilovasi. Biz uni Electron API-lari bilan tajriba qilish yoki ishlab chiqish jarayonida prototip xususiyatlarini o'rganish uchun o'rganish vositasi sifatida o'rnatishni tavsiya qilamiz.

Fiddle ham bizning hujjatlarimiz bilan yaxshi integratsiyalashgan. Darslarimizdagi misollarni ko'rib chiqishda siz kod bloki ostidagi "Elektron skripkada ochish" tugmasini tez-tez ko'rasiz. Agar sizda Fiddle o‘rnatilgan bo‘lsa, bu tugma misolni Fiddle’ga avtomatik yuklaydigan fiddle.electronjs.org havolasini ochadi, nusxa ko‘chirish-joylashtirish shart emas.

main.js

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

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

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

preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

Hujjatlarda nima bor?

Barcha rasmiy hujjatlar yon panelda mavjud. Bular turli toifalar va har birida nimani kutishingiz mumkin:

O'quv qo'llanma: Birinchi Electron ilovangizni qanday yaratish va nashr etish bo'yicha to'liq qo'llanma.
Elektrondagi jarayonlar: Elektron jarayonlari va ular bilan ishlash bo'yicha chuqur ma'lumot.
Eng yaxshi amaliyotlar: Electron ilovasini ishlab chiqishda yodda tutish kerak bo'lgan muhim nazorat ro'yxatlari.
Misollar: Electron ilovangizga funksiyalar qo'shish uchun tezkor havolalar.
Rivojlanish: Har xil rivojlanish bo'yicha qo'llanmalar.
Tarqatish: Ilovangizni oxirgi foydalanuvchilarga qanday tarqatishni bilib oling.
Sinov va disk raskadrovka: JavaScript-ni disk raskadrovka qilish, testlarni yozish va sifatli Electron ilovalarini yaratish uchun foydalaniladigan boshqa vositalar.
Ma'lumotnomalar: Elektron loyihasi qanday ishlashi va tashkil etilishini yaxshiroq tushunish uchun foydali havolalar.
Hissa: Elektronni kompilyatsiya qilish va hissa qo'shish juda qiyin bo'lishi mumkin. Biz ushbu bo'limda buni osonlashtirishga harakat qilamiz.

Tez boshlash

Ushbu qo'llanma sizni Electron-da elektron/elektron-tezkor ishga tushirishga o'xshash "Hello World" ilovasini yaratish jarayoni bo'yicha qadam qo'yadi.

Ushbu qo‘llanmaning oxirida ilovangiz brauzer oynasini ochadi, unda qaysi Chromium, Node.js va Electron versiyalari ishlayotgani haqidagi ma’lumotlarga ega veb-sahifa ko‘rsatiladi.

Old shartlar

Electron-dan foydalanish uchun Node.js-ni o'rnatishingiz kerak. Mavjud bo'lgan so'nggi LTS versiyasidan foydalanishni tavsiya qilamiz.

Iltimos, Node.js ni platformangiz uchun oldindan oʻrnatilgan oʻrnatuvchilar yordamida oʻrnating. Aks holda, turli ishlab chiqish vositalari bilan mos kelmaslik muammolariga duch kelishingiz mumkin.

Node.js toʻgʻri oʻrnatilganligini tekshirish uchun terminal mijozingizga quyidagi buyruqlarni kiriting:

node -v
npm -v

Buyruqlar mos ravishda Node.js va npm versiyalarini chop etishi kerak.

Eslatma: Electron Node.js ni ikkilik fayliga joylashtirgani uchun kodingiz bilan ishlaydigan Node.js versiyasi tizimingizda ishlaydigan versiya bilan bog‘liq emas.

Davom etammiz, zerikib qolmang keyingi maqolalarda ko`rishguncha....