วิธีการแปลงเว็บไซต์ใด ๆ ให้เป็นแอปเดสก์ท็อปด้วย Electron ทีละขั้นตอน

คุณมีเว็บไซต์ที่ใช้งานได้อยู่แล้วและอยากจะแปลงให้เป็นแอปพลิเคชันเดสก์ท็อปโดยไม่ต้องเขียนใหม่ตั้งแต่ต้นหรือไม่? คุณโชคดีแล้ว ขอขอบคุณ อิเล็กตรอน.jsคุณสามารถนำเว็บไซต์ของคุณมาสู่ Windows ได้ macOS และ Linux เรียบง่ายและมีโค้ดฐานเดียว โซลูชันยอดนิยมนี้ได้รับเลือกจากบริษัทต่างๆ เช่น Microsoft, Slack และ Discord เพื่อพัฒนาแอปพลิเคชันเดสก์ท็อปที่ประสบความสำเร็จสูงสุด

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

Electron คืออะไรกันแน่ และทำไมจึงต้องใช้?

อิเล็กตรอน.js เป็นกรอบงานที่พัฒนาโดย GitHub ซึ่งช่วยให้คุณสามารถสร้างแอปพลิเคชันเดสก์ท็อปโดยใช้เทคโนโลยีเว็บ โดยพื้นฐานแล้วมันเหมือนกับการใส่เว็บไซต์ของคุณไว้ในตัวห่อหุ้มที่ทำให้สามารถเรียกใช้งานบนระบบปฏิบัติการต่างๆ ได้

ด้านล่างนี้ใช้ โครเมียม (เครื่องยนต์เดียวกับที่ใช้ขับเคลื่อนเบราว์เซอร์ Chrome) เพื่อแสดงอินเทอร์เฟซผู้ใช้ และ Node.js เพื่อให้สามารถเข้าถึงระบบปฏิบัติการได้ ด้วยวิธีนี้ คุณสามารถอ่านไฟล์จากฮาร์ดไดรฟ์ของคุณและแสดงการแจ้งเตือนระบบดั้งเดิมได้ ซึ่งเป็นสิ่งที่คุณไม่สามารถทำได้โดยทั่วไปกับเว็บไซต์

การรวมกันของทั้งสองสภาพแวดล้อมส่งผลให้เกิดสถาปัตยกรรมที่อิงตามกระบวนการหลักสองประการ:

• กระบวนการหลัก: ควบคุมวงจรชีวิตแอปพลิเคชัน, Windows และการรวมระบบปฏิบัติการ
• กระบวนการเรนเดอร์: มีหน้าที่รับผิดชอบในการเรนเดอร์อินเทอร์เฟซ เหมือนกับว่าเป็นเว็บไซต์ใดๆ ในเบราว์เซอร์

ข้อดีประการหนึ่งของอิเล็กตรอนก็คือ คุณสามารถเขียนแอปครั้งเดียวและรันได้บน Windows, macOS และ Linux- นอกจากนี้ ด้วยการใช้ประโยชน์จากระบบนิเวศ Node.js คุณจะมีแพ็คเกจและไลบรารีนับพันให้เลือกใช้เพื่อตอบสนองความต้องการเกือบทุกประเภท ซึ่งทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการพัฒนาแอปพลิเคชัน แม้กระทั่งสำหรับงานประจำวัน เช่น ใช้ WhatsApp บนคอมพิวเตอร์ของคุณ.

Electron สามารถนำเอาไปใช้ทำแอพพลิเคชั่นประเภทใดได้บ้าง?

จากเครื่องมือภายในบริษัทไปจนถึงผลิตภัณฑ์เชิงพาณิชย์ แอปยอดนิยมบางส่วนที่สร้างด้วย Electron ได้แก่:

• รหัส Visual Studio:โปรแกรมแก้ไขโค้ดของ Microsoft
• หย่อน:ไคลเอนต์การส่งข้อความสำหรับทีม
• ไม่ลงรอยกัน:แพลตฟอร์มการสื่อสารที่มีชื่อเสียงสำหรับการเล่นเกมและชุมชน
• บุรุษไปรษณีย์:เครื่องมือทดสอบ API

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

คุณต้องเริ่มต้นอะไร

ก่อนที่คุณจะเริ่มเขียนโค้ด ให้แน่ใจว่าคุณได้ติดตั้งเครื่องมือพื้นฐานเหล่านี้แล้ว:

• Node.js: จำเป็นสำหรับการติดตั้งส่วนที่ต้องพึ่งพาและการรันสคริปต์
• npm หรือเส้นด้าย:ตัวจัดการแพ็คเกจที่จะช่วยให้คุณติดตั้ง Electron และไลบรารีอื่น ๆ ได้

เมื่อคุณพร้อมแล้ว คุณสามารถติดตั้ง Electron ได้ ขอแนะนำให้ทำสิ่งนี้เป็นการพัฒนาที่ต้องพึ่งพา:

npm install electron --save-dev

หรือหากคุณต้องการใช้ทั่วโลก:

npm install -g electron

จากนั้นคุณต้องระบุใน package.json ไฟล์อินพุตของคุณคืออะไร (กระบวนการหลัก):

{
  "main": "main.js"
}

หากคุณไม่ระบุ Electron จะค้นหาไฟล์ index.js ค่าเริ่มต้น.

การสร้างแอปพื้นฐานตัวแรกของคุณด้วย Electron

มาดูสิ่งที่จำเป็นขั้นต่ำที่คุณจำเป็นต้องมีเพื่อสร้างเว็บไซต์และใช้งานเป็นแอปพลิเคชันเดสก์ท็อป จุดเริ่มต้นคือที่เก็บถาวร main.jsซึ่งคุณจะสร้างหน้าต่างเบราว์เซอร์และโหลดเพจ HTML ของคุณ:

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

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

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

เท่านี้ก็เพียงพอสำหรับคุณแล้ว เมื่อดำเนินการ electron .หน้าต่างจะเปิดขึ้นพร้อม HTML ของคุณ ภายในหลักคุณยังสามารถรับฟังเหตุการณ์เพื่อจัดการการปิด การย่อขนาด หรือการคืนค่าแอปได้

การทำความเข้าใจสถาปัตยกรรมกระบวนการ

ดังที่เราได้กล่าวไปก่อนหน้านี้ มีกระบวนการหลักสองประการ:

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

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

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

มันจะเกิดขึ้นทุกครั้งที่มีการสร้างอันใหม่ เบราว์เซอร์วินโดว์- มีหน้าที่รับผิดชอบในการแสดงเนื้อหาเว็บไซต์ คุณสามารถใช้เฟรมเวิร์กส่วนหน้าใดๆ ก็ได้ที่นี่: React, Vue, Angular หรือเพียงแค่ HTML และ JS ล้วนๆ โปรดจำไว้ว่าแม้แต่แอปพลิเคชันเช่น โครงการ G ของ Nvidia สามารถได้รับประโยชน์จากเทคโนโลยีเหล่านี้ได้

ทั้งตัวหลักและตัวเรนเดอร์สามารถใช้ Node.js API ได้ แต่เพื่อเหตุผลด้านความปลอดภัย ขอแนะนำให้สร้างเลเยอร์การสื่อสารระหว่างทั้งสองโดยใช้ ไอพีซีเมน e ipcRenderer- คุณยังสามารถใช้ สคริปต์พรีโหลด เพื่อเปิดเผยฟังก์ชั่นที่ปลอดภัยจากหลักสู่ตัวเรนเดอร์

การสร้างคุณสมบัติดั้งเดิมที่กำหนดเอง

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

• แสดง การแจ้งเตือน ของระบบ
• อ่านหรือเขียนไฟล์ ฮาร์ดไดรฟ์.
• การเข้าถึง คลิปบอร์ดข้อมูลเครือข่าย หรือระบบ

ฟังก์ชั่นเหล่านี้จะต้องเปิดใช้งานจากกระบวนการหลัก หากคุณต้องการ คุณสามารถส่งจากตัวเรนเดอร์ได้โดยใช้ ipcRenderer.send() และฟังพวกเขาทางหลักด้วย ipcMain.on()หรือใช้ ipcMain.handle() หากคุณต้องการได้รับคำตอบ

เครื่องมือที่ทำให้ชีวิตของคุณง่ายขึ้น: Electron Forge

อิเล็กตรอนฟอร์จ เป็นชุดเครื่องมือที่ช่วยเพิ่มประสิทธิภาพการพัฒนาด้วย Electron มันช่วยให้คุณ:

• โครงการที่กำหนดค่าไว้ล่วงหน้าด้วย webpack, ชีวิต o สิ่งที่พิมพ์ด้วยพิมพ์ดีด.
• คำสั่งในการรัน คอมไพล์ และสร้างตัวติดตั้ง
• รองรับการโหลดเฟรมเวิร์กเช่น React หรือ Vue ได้อย่างง่ายดาย

ตัวอย่างการเริ่มต้นโครงการด้วย Electron Forge, Vite และ TypeScript:

npm init electron-app@latest mi-app -- --template=vite-typescript

หลังจากนั้นคุณสามารถรันแอปด้วย:

cd mi-app && npm start

ตอนนี้คุณทราบวิธีเริ่มต้นแล้ว คุณอาจต้องการเรียนรู้วิธีการทำงานของแอปบนระบบอื่นๆ เช่น Windows และคุณลักษณะใหม่ๆ เช่น App ของ Windows.

วิธีการแพ็กเกจแอปพลิเคชันของคุณและสร้างตัวติดตั้ง

เมื่อคุณมีแอปพร้อมแล้ว คุณต้องการให้ผู้ใช้สามารถติดตั้งได้เหมือนกับแอปอื่นๆ สำหรับสิ่งนี้คุณสามารถใช้เครื่องมือเช่น:

• แพ็คเกจอิเล็กทรอนิกส์
• ตัวสร้างอิเล็กตรอน
• การทำเตาหลอมอิเล็กตรอน

เครื่องมือเหล่านี้จะสร้างไฟล์ปฏิบัติการที่สอดคล้องกันสำหรับระบบปฏิบัติการแต่ละระบบ (.exe บน Windows, .dmg บน macOS, .AppImage หรือ .deb บน Linux) คุณยังสามารถตั้งค่าไอคอนที่กำหนดเอง ลายเซ็นดิจิทัล การอัปเดตอัตโนมัติ และอื่นๆ อีกมากมายได้

ตัวอย่างเช่น หากต้องการสร้างตัวติดตั้งด้วย Electron Forge คุณเพียงแค่รัน:

npm run make

และชุดเครื่องมือจะดูแลส่วนที่เหลือโดยสร้างแพ็คเกจในโฟลเดอร์ out.

จะเกิดอะไรขึ้นหากฉันต้องการแปลงโปรเจ็กต์เว็บที่มีอยู่ เช่น ใน React หรือ Vue?

เป็นไปได้อย่างสมบูรณ์แบบ คุณสามารถนำแอปของคุณใน React, Vue หรือเฟรมเวิร์กอื่น ๆ และโหลดไว้ในหน้าต่าง Electron ได้ คุณเพียงแค่ต้องมีไฟล์หลักที่จะโหลด index.html ที่คอมไพล์ครั้งสุดท้ายของโครงการ

หากคุณใช้ Vite สำหรับโครงการ React/Vue คุณสามารถกำหนดค่าได้ สกรู.config.js การคอมไพล์ไฟล์เข้าในโฟลเดอร์ dist ซึ่งจะถูกชาร์จด้วยอิเล็กตรอนด้วย loadFile()- คุณยังสามารถส่งเหตุการณ์จากอินเทอร์เฟซของคุณไปยังกระบวนการหลักได้โดยใช้ ipcRenderer หากคุณใช้ preload.ts ดังตัวอย่างนี้:

ipcMain.handle('seleccionar-carpeta', () => {
  // aquí abres el selector de carpetas
});

จากนั้นจากอินเทอร์เฟซโดยใช้ Electron Bridge:

window.electron.invoke('seleccionar-carpeta')

สิ่งนี้แสดงให้เห็นถึงความหลากหลายของ Electron ในการสร้างแอป ซึ่งคล้ายกับทางเลือกของ WhatsApp ที่คำนึงถึงการบูรณาการที่จำเป็นเพื่อให้มีประสิทธิภาพ

ข้อเสียของ Electron ที่พูดถึงกันมากที่สุดคืออะไร?

ไม่ใช่ทุกอย่างจะเป็นสีชมพู อิเล็กตรอนได้รับการวิพากษ์วิจารณ์ โดยเฉพาะอย่างยิ่งสำหรับ การใช้ RAM สูง- และเมื่อคุณใช้ Chromium และ Node.js ร่วมกัน คุณกำลังโหลดสองสภาพแวดล้อมเพื่อรันแอปเดียว

ข้อความ "Hello World" ธรรมดาอาจใช้หน่วยความจำมากถึง 60 MB ซึ่งจะไม่เกิดขึ้นในแอปดั้งเดิม อย่างไรก็ตาม มันขึ้นอยู่กับหลายสิ่งหลายอย่าง คุณพัฒนาแอปพลิเคชันของคุณอย่างไร และคุณทำการปรับแต่งกี่อย่าง ไคลเอนต์ Slack ไม่เหมือนกับ VS Code ซึ่งเขียนด้วย Electron ทั้งคู่ แต่มีประสิทธิภาพที่แตกต่างกันมาก

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

กรณีการใช้งานและแรงบันดาลใจสำหรับโครงการของคุณเอง

อิเล็กตรอนเหมาะสำหรับ:

• แอปพลิเคชันภายในหรือ POC:เป็นเครื่องมือภายในบริษัทที่ต้องใช้อินเทอร์เฟซ GUI
• เปลี่ยนเว็บไซต์โปรดของคุณให้เป็นแอป: เช่น ไคลเอนต์โซเชียลมีเดีย แดชบอร์ด ตัวจัดการ API ฯลฯ
• การใช้งานเชิงพาณิชย์ ข้ามแพลตฟอร์มโดยไม่จำเป็นต้องเรียนรู้การพัฒนาแบบเนทีฟ

นักพัฒนามากมายยังสร้าง ไคลเอนต์ API, แดชบอร์ด สำหรับข้อมูลหรือ juegos ง่ายด้วยเครื่องยนต์อย่าง Phaser ที่โหลดไว้ใน Electron นี่กลายเป็นแนวโน้มในการสร้างแอปพลิเคชันสำหรับผู้ใช้ทั่วไป

ตอนนี้คุณรู้ทุกสิ่งที่คุณต้องการแล้ว คุณสามารถติดตั้ง Electron อัปโหลดเว็บไซต์ของคุณ และเริ่มปรับแต่งราวกับว่าเป็นแอพพลิเคชันอิสระจากเบราว์เซอร์โดยสมบูรณ์ โปรดจำไว้ว่ายิ่งคุณปรับแต่งการทำงานร่วมกับระบบปฏิบัติการ (หน้าต่าง เมนู การแจ้งเตือน พื้นที่จัดเก็บข้อมูลในเครื่อง ฯลฯ) มากเท่าไหร่ แอปของคุณก็จะดูเป็นมืออาชีพมากขึ้นเท่านั้น

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