คู่มือฉบับสมบูรณ์และแหล่งข้อมูลการเรียนรู้

JavaScript เป็นหนึ่งในภาษาโปรแกรมที่ใช้บ่อยที่สุด ความจริงที่ว่ามันสามารถใช้ได้ทั้งการพัฒนาส่วนหลังและส่วนหน้าทำให้มันเป็นที่รักของคนจำนวนมาก

JavaScript มีไลบรารีและเฟรมเวิร์กจำนวนมากที่ขยายกรณีการใช้งานของมันนอกเหนือจากวานิลลา (ธรรมดา) JavaScript

Electron.js เป็นเฟรมเวิร์กโอเพ่นซอร์สที่มีประสิทธิภาพซึ่งช่วยให้นักพัฒนาเว็บสามารถพัฒนาแอปพลิเคชันแบบเนทีฟด้วยทักษะที่มีอยู่ บทความนี้จะสอนคุณเกี่ยวกับ Electron.js และวิธีที่สามารถใช้เพื่อขับเคลื่อนแนวคิดที่น่าทึ่งต่อไปของคุณ

อิเล็กตรอน JS

Electron JS เป็นเฟรมเวิร์กที่นักพัฒนาสามารถใช้สร้างเดสก์ท็อปแอปพลิเคชันโดยใช้ HTML, CSS และ JavaScript Electron JS สร้างและดูแลโดย GitHub

เฟรมเวิร์กเป็นการผสมผสานระหว่าง Node.JS และ Chromium ช่วยให้ผู้ใช้สามารถรักษาโค้ดเบส JavaScript เดียวและพัฒนาแอปพลิเคชันเดสก์ท็อปข้ามแพลตฟอร์มที่สามารถทำงานได้บน Windows, macOS และ Linux

เรื่องราวของ Electron.js เริ่มต้นในเดือนมกราคม 2013 แนวคิดดั้งเดิมคือการสร้างโปรแกรมแก้ไขข้อความข้ามแพลตฟอร์มที่สามารถทำงานร่วมกับ JavaScript, HTML และ CSS

Electron.js เดิมชื่อ Atom Shell และสร้างโอเพ่นซอร์สในปี 2014 ต่อมาโครงการนี้เปลี่ยนชื่อเป็น Electron ในเดือนเมษายน 2015 และ API ตัวแรกเปิดตัวในปี 2016

คุณสมบัติของอิเล็กตรอน JS

  • เข้ากันได้กับไลบรารีและเฟรมเวิร์ก JavaScript ทั้งหมด Vue.js, Angular และ React.js เป็นเพียงตัวอย่างของเฟรมเวิร์ก JavaScript ที่นักพัฒนาสามารถใช้ร่วมกับ Electron JS ความเข้ากันได้นี้ทำให้ง่ายต่อการใช้คุณลักษณะ/ฟังก์ชันการทำงานของไลบรารีและเฟรมเวิร์กเหล่านี้เมื่อสร้างแอป Electron
  • กรอบที่นำมาใช้ใหม่ได้ การตอบสนองความต้องการของลูกค้าที่แตกต่างกันอาจมีราคาแพง ข้อดีของ Electron JS คือสามารถใช้ได้ทั้งเว็บและเดสก์ท็อป โค้ดเบสเดียวหมายความว่าสามารถใช้กับระบบปฏิบัติการที่แตกต่างกันได้
  • มีสิทธิ์เข้าถึง API ดั้งเดิม นักพัฒนาที่ทำงานเกี่ยวกับ Electron JS สามารถเข้าถึง API ดั้งเดิมของระบบปฏิบัติการที่พวกเขาใช้งานอยู่ นักพัฒนาจึงสามารถสร้างแอปบนเดสก์ท็อปที่มีสิทธิ์เข้าถึงฟังก์ชันระดับต่ำ เช่น การแสดงการแจ้งเตือน
  • รองรับเทคโนโลยีเว็บ Electron JS สามารถปรับเปลี่ยนได้ เนื่องจากนักพัฒนาไม่จำเป็นต้องเรียนรู้ภาษาการเขียนโปรแกรมใหม่เพื่อพัฒนาแอปพลิเคชัน หมายความว่าหากคุณเข้าใจชุดภาษาที่คุณใช้สร้างเว็บแอปพลิเคชันอยู่แล้ว คุณสามารถใช้ชุดภาษานั้นเพื่อสร้างแอปบนเดสก์ท็อปได้
  • การจัดการโค้ดและแอพ คุณไม่จำเป็นต้องดูแลทีมต่างๆ เพื่อดูแลแอปและโค้ดสำหรับระบบปฏิบัติการที่แตกต่างกัน Electron JS ช่วยให้คุณสามารถรักษาโค้ดเบสเดียวกันสำหรับระบบปฏิบัติการ Linux, Windows และ Mac
  • สร้าง/ปรับใช้ได้ง่าย ตัวจัดการแพ็คเกจของอิเล็กตรอนช่วยให้นักพัฒนาจัดแพ็คเกจเป็นแพ็คเกจที่เกี่ยวข้อง คุณจึงสามารถเผยแพร่แอปเดสก์ท็อป Linux, Mac และ Windows จากฐานรหัสเดียวกันได้โดยใช้ตัวจัดการแพ็คเกจนี้
  วิธีตั้งค่าภาพพื้นหลังสำหรับ Microsoft Word

สถาปัตยกรรมอิเล็กตรอน JS

สถาปัตยกรรมของ Electron คล้ายกับของเว็บเบราว์เซอร์สมัยใหม่มาก เนื่องจากได้รับสถาปัตยกรรมแบบหลายกระบวนการมาจาก Chromium

สถาปัตยกรรมของ Electron ประกอบด้วย V8 JavaScript Engine, Node.JS และเนื้อหา Libchromium

  • Node.JS– รันไทม์ JavaScript แบบโอเพ่นซอร์สที่ทำงานบนเอ็นจิ้น V8 JavaScript Node.JS ช่วยให้นักพัฒนาเรียกใช้ JavaScript นอกหน้าต่างเบราว์เซอร์ Node.JS ยังอนุญาตให้ผู้ใช้รันโค้ด JavaScript ดิบผ่านเชลล์แบบโต้ตอบ
  • Libchromiumcontent- ไลบรารีการเรนเดอร์ Chromium ที่เป็นโอเพ่นซอร์สและดูแลโดย Google Chrome Chrome มีส่วนต่อประสานผู้ใช้ที่เรียบง่ายและใช้การกะพริบเป็นเครื่องมือเลย์เอาต์และ V8 เป็นเครื่องมือ JavaScript
  • V8 JavaScript Engine– เอ็นจิ้น JavaScript แบบโอเพ่นซอร์สที่เขียนด้วย C ++ และ JavaScript และพัฒนาโดย Google

#1. โหนด js

ในการเริ่มต้นใช้งาน Electron JS คุณต้องติดตั้ง Node.js ไว้ในเครื่องของคุณ

เลือกเวอร์ชันของโหนดที่ถูกต้องโดยขึ้นอยู่กับระบบปฏิบัติการที่คุณใช้งานบนคอมพิวเตอร์ของคุณ

ตรวจสอบว่า Node.js ได้รับการติดตั้งอย่างถูกต้องหรือไม่โดยเรียกใช้คำสั่งเหล่านี้

node -v
npm -v

หากติดตั้งอย่างถูกต้อง คำสั่งเหล่านี้จะแสดงเวอร์ชันโหนดและ npm ตามลำดับ

#2. บรรทัดคำสั่ง

วิธีเข้าถึงบรรทัดคำสั่งจะขึ้นอยู่กับระบบปฏิบัติการของคุณ

  • Linux จะขึ้นอยู่กับการกระจาย
  • Windows: PowerShell หรือพรอมต์คำสั่ง
  • macOS: เทอร์มินัล

โปรแกรมแก้ไขโค้ดบางตัว เช่น Visual Studio Code มาพร้อมกับเทอร์มินัลแบบรวม

#3. ตัวแก้ไขโค้ด

คุณต้องมีโปรแกรมแก้ไขโค้ดเพื่อเขียนโค้ด Electron JS ของคุณ Visual Studio Code เป็นหนึ่งในสิ่งที่ดีที่สุดที่คุณสามารถลองได้

วิธีการติดตั้ง Electron JS

ขั้นตอนที่ 1: สร้างโปรเจ็กต์ node.js

ใช้คำสั่งเหล่านี้เพื่อเริ่มต้น

mkdir my-electron-app && cd my-electron-app
npm init

คำสั่ง npm init จะแจ้งให้คุณกรอกข้อมูลบางฟิลด์ เช่น ชื่อแอป จุดเข้าใช้งาน และคำอธิบาย

คุณสามารถเลือกชื่อเริ่มต้นของโฟลเดอร์เป็นชื่อแอปได้ อย่างไรก็ตาม อย่าลืมตั้งค่าจุดเริ่มต้นของแอปเป็น main.js

ช่องต่างๆ เช่น ผู้เขียนและคำอธิบายสามารถใช้เป็นค่าใดก็ได้ package.json ของคุณจะมีลักษณะดังนี้เมื่อคุณทำตามขั้นตอนเหล่านี้เสร็จแล้ว:

{
"name": "my-electron-app",

  "version": "1.0.0",

  "description": "Hello World!",

  "main": "main.js",

  "author": "Peter Drury",

  "license": "MIT"

}

ขั้นตอนที่ 2: ติดตั้งอิเล็กตรอน

ใช้คำสั่งนี้

npm install --save-dev electron

ขั้นตอนที่ 3: เพิ่มคำสั่ง ‘start’ ใน package.json ของคุณ

{

  "scripts": {

    "start": "electron ."

  }

}

ขั้นตอนที่ 4: เริ่มแอปของคุณ

ใช้คำสั่งนี้เพื่อเริ่มแอปของคุณในโหมดการพัฒนา

npm start

กระบวนการทำงานของอิเล็กตรอน JS

เราจะสร้างแอปต่อจากการตั้งค่าที่เราเพิ่งทำไปด้านบน การประยุกต์ใช้อิเล็กตรอนมีกระบวนการสองประเภท หลักและเรนเดอร์

  สคริปต์ Python เพื่อลบไฟล์เป็นประจำ

กระบวนการหลัก

สคริปต์หลักคือจุดเริ่มต้นของแอปอิเล็กตรอนใดๆ แอปจะทำงานในสภาพแวดล้อม Node.js เต็มรูปแบบ อิเลคตรอนจะมองหาสคริปต์หลักในไฟล์ package.json ที่คุณกำหนดค่าไว้แล้วระหว่างการทำแอพ

สร้าง main.js ในโฟลเดอร์รูทเพื่อเริ่มต้นสคริปต์หลัก คุณสามารถทำได้ด้วยตนเองหรือใช้คำสั่งนี้

touch main.js

คุณสามารถเพิ่มโค้ดต่อไปนี้ใน main.js

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

const createWindow = () => {

 const win = new BrowserWindow({

   width: 800,

   height: 600,

 });

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

 }

});

หน้าเว็บใน Electron สามารถโหลดได้จากที่อยู่เว็บระยะไกลหรือไฟล์ HTML ในเครื่อง เราจะใช้ไฟล์ HTML ในเครื่องเพื่อจุดประสงค์ในการสาธิต

สร้างไฟล์ index.html ในโฟลเดอร์รูทของคุณ รหัสสำหรับ index.html มีให้เสมอ แต่คุณสามารถใช้รหัสนี้เป็นรหัสเริ่มต้นได้

<!DOCTYPE html>

<html>

 <head>

   <meta charset="UTF-8" />

   <meta

     http-equiv="Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <meta

     http-equiv="X-Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <title>Hello from Electron renderer!</title>

 </head>

 <body>

   <h1>Hello from Electron renderer!</h1>

   <p>👋</p>

   <p id="info"></p>

 </body>

 <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script>

</html>

กระบวนการเรนเดอร์

Renderer แสดงผลเนื้อหาเว็บ สคริปต์โหลดล่วงหน้ามาพร้อมกับโค้ดที่ทำงานในกระบวนการเรนเดอร์ก่อนที่เนื้อหาเว็บจะเริ่มโหลดที่จำเป็น

สร้าง 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])

  }

})

เรียกใช้เซิร์ฟเวอร์การพัฒนาโดยใช้ npm start และนี่คือสิ่งที่จะแสดง

ตัวอย่างแอป: Electron JS

#1. แอปเดสก์ท็อปหย่อน

Slack เป็นหนึ่งในเครื่องมือการทำงานร่วมกันทางไกลที่ได้รับความนิยมมากที่สุด ผู้ใช้สามารถส่งและรับข้อความ โทรออก และแชร์ไฟล์โดยใช้แอพนี้ Slack มีทั้งแอปบนเว็บและเดสก์ท็อปบนระบบปฏิบัติการ Mac, Linux และ Windows แอปเดสก์ท็อปของ Slack ใช้เครื่องมือ Chromium และ Node.js เพื่อแสดงโค้ดคุณภาพสูง

#2. แอพ WordPress บนเดสก์ท็อป

WordPress เป็นระบบการจัดการเนื้อหาที่ใหญ่ที่สุด ความจริงที่ว่าคุณสามารถเปิดเว็บไซต์ได้แม้ไม่มีทักษะการเขียนโค้ดพื้นฐานได้ดึงดูดผู้ใช้จำนวนมาก WordPress สามารถเข้าถึงได้ผ่านเบราว์เซอร์และผ่านแอปเดสก์ท็อปบน Mac, Linux และ Windows เดสก์ท็อป WordPress ที่ปรับปรุงใหม่ใช้ Electron JS

#3. แอปเดสก์ท็อป WhatsApp

WhatsApp เป็นหนึ่งในแอพส่งข้อความที่ได้รับความนิยมมากที่สุดในโลกสมัยใหม่ เนื่องจากมีผู้ใช้มากกว่า 2 พันล้านคน เดิมที WhatsApp ได้รับการออกแบบให้เป็นแอปบนอุปกรณ์เคลื่อนที่ แต่ตอนนี้ได้เปลี่ยนไปเป็นแพลตฟอร์มข้ามอุปกรณ์แล้ว เดสก์ท็อป WhatsApp ใช้ Electron JS และพร้อมใช้งานบนระบบปฏิบัติการหลัก

#4. รหัส Visual Studio

Visual Studio Code ซึ่งเป็นของ Microsoft เป็นหนึ่งในโปรแกรมแก้ไขโค้ดยอดนิยม Visual Studio Code รองรับ HTML, CSS และโค้ดที่เขียนด้วยภาษาโปรแกรมต่างๆ เช่น JavaScript, Python, PHP, Java และ Ruby เป็นต้น แอปเดสก์ท็อปที่สร้างโดยใช้ Electron JS พร้อมใช้งานสำหรับระบบปฏิบัติการ Windows, Mac และ Linux

  14 เกมคอนโซลย้อนยุคที่คุณสามารถซื้อได้ตอนนี้

แหล่งการเรียนรู้: อิเล็กตรอน JS

#1. เอกสารอย่างเป็นทางการของ Electronjs

เอกสารประกอบ Electronjs สร้างและดูแลโดย Electronjs.org คุณจะได้เรียนรู้ว่า Electron JS คืออะไร วิธีตั้งค่าแอพ Electron แรกของคุณ และวิธีการสร้างแอพเดสก์ท็อปข้ามแพลตฟอร์มโดยใช้เทคโนโลยีต่างๆ เอกสารประกอบจะได้รับการอัปเดตเสมอทุกครั้งที่มีการปรับปรุงหรือแนะนำคุณสมบัติใหม่

#2. Master Electron: แอปเดสก์ท็อปที่มี HTML, JavaScript และ CSS

Master Electron เป็นหลักสูตรแบบชำระเงินบน Udemy ที่แนะนำให้คุณรู้จักกับ Electron JS คุณจะได้เรียนรู้วิธีสร้างแอปเดสก์ท็อปสำหรับระบบปฏิบัติการต่างๆ เช่น Mac, Linux และ Windows Master Electron เป็นทรัพยากรที่สมบูรณ์แบบหากคุณต้องการทำความเข้าใจกระบวนการ Electron API ทั้งหมด

#3. กวดวิชาปฏิกิริยาอิเล็กตรอน

Electron React เป็นหลักสูตรแบบชำระเงินบน Udemy ที่สอนนักพัฒนาเกี่ยวกับวิธีสร้างแอป Electron โดยใช้ React.js React เป็นหนึ่งในไลบรารี JavaScript ที่มีชื่อเสียงที่สุด และสร้างโดย Meta (ชื่อเดิมคือ Facebook)

ห่อ

Electron JS เป็นไลบรารี JavaScript ที่ยอดเยี่ยมสำหรับการสร้างแอปเดสก์ท็อปในโลกสมัยใหม่ที่ต้องยอมรับแอปข้ามแพลตฟอร์ม ข้อเท็จจริงที่ว่าคุณสามารถใช้ HTML, CSS และ JavaScript ได้หมายความว่านักพัฒนาไม่จำเป็นต้องเรียนรู้กองเทคโนโลยีใหม่ ๆ เพื่อสร้างแอปดังกล่าว การมีชุมชนขนาดใหญ่และให้การสนับสนุนก็เป็นข้อดีเช่นกัน เนื่องจากคุณจะได้รับการสนับสนุนเสมอ

คุณยังสามารถสำรวจเฟรมเวิร์ก JavaScript ที่ดีที่สุดเพื่อสร้างแอปพลิเคชันสมัยใหม่โดยใช้เวลาน้อยลง

เรื่องล่าสุด

x