Make Video&Image SlideShow By Electron JS

จากบทความก่อนหน้านี้ผมได้ทำเกี่ยวกับหน้าเว็บแสดงข้อมูลรูปภาพและวิดีโอ (จอแสดงโฆษณา) แบบง่าย ๆ ไปแล้ว โดยในคราวนี้ผมจะเอาวิธีที่เรียกว่าช่วยอำนวยความสะดวกกับการแสดงผลหน้าเว็บให้ดียิ่งขึ้น เรียกได้ว่า Advance ขึ้นนั่นเอง โดยได้ใช้ Electron JS เข้ามาช่วยในการแสดงผลข้อมูลที่เราได้ทำ

Electron JS คือ

framework นึงที่ใช้ในการสร้าง Desktop Application ที่ทํางานได้บนทุก platform ด้วย Html5, JavaScript และ CSS สร้างด้วยเทคโนโลยี Node.js และ Chromium เขียนครั้งเดียวสามารถรันได้บนทุก platform ทั้ง Windows, Mac, Linux และก็ Raspberry PI ผมเคยลองแล้วแต่ก็ไม่ค่อยแนะนำเท่าไหร่ เพราะถ้าไม่มีระบบระบายความร้อนก็ทำให้เครื่องร้อนเร็วมาก ๆ เลย

วิธีติดตั้ง

โดยวิธีติดตั้งสามารถเข้าไปดูได้ทางเว็บของ Electron ได้เลย และสามารถเข้าไปทำตามต้นฉบับได้เลยที่ Quick Start | Electron (electronjs.org)

electron --version (ใช้สำหรับเช็ค Version)

1. เมื่อติดตั้งเสร็จแล้ว ขั้นตอนต่อมาคือสร้างโฟลเดอร์ของโปรเจคเลย

สร้างโฟลเดอร์สำหรับเก็บข้อมูลทั้งหมดไว้ในนี้

2. ขั้นตอนต่อมา เข้ามาข้างในโฟลเดอร์แล้วพิมพ์คำสั่ง (ถ้ายังไม่ติดตั้ง NodeJS ให้ทำการติดตั้งก่อนนะครับ)

npm init -y

จะได้ไฟล์ package.json ตามนี้

3. ทำการติดตั้ง Electron JS โดยใช้คำสั่ง

npm i --save-dev electron
npm i --save-dev auto-launch
npm i --save-dev electron-squirrel-startup
npm i --save-dev dns

จะได้ไฟล์เพิ่มเข้ามาตามด้านบน

Add Electron Forge as a development dependency of your app, and use its import command to set up Forge's scaffolding:

npm install --save-dev @electron-forge/cli
npx electron-forge import

4. ต่อมาผมจะทำการสร้างโฟลเดอร์ src ขึ้นมาเพื่อสำหรับเก็บข้อมูลต่าง ๆ ในโปรเจค และสร้างโฟลเดอร์ img เพื่อไว้เก็บรูปภาพต่าง ๆ

ผมจะเตรียมรูปไว้สำหรับทำเป็น Icon App

5. และสร้างไฟล์ index.js โดยเนื้อหาในไฟล์ index.js จะมีตามด้านล่างนี้

6. แก้ข้อมูลในไฟล์ package.json ตามด้านล่างเบื้องต้น

7. ขั้นตอนต่อไปเราจะสร้างตัว แสดงข้อมูล Preload หรือหน้ารอโหลดเข้าโปรแกรมนั่นเอง โดยให้ทำการสร้างไฟล์ใหม่ขึ้นมา 3 ไฟล์ตามด้านล่างนี้

loading.css

loading.html

preload.js

ตรวจสอบดูอีกที ข้อมูลทั้งหมดในโปรเจคเรามีตามนี้หรือไม่

8. เมื่อครบแล้วเรามาลองรันโปรเจคดูกัน โดยใช้คำสั่ง npm start

เมื่อรันโปรเจคจะมีข้อความขึ้นประมาณนี้

หน้า Preload ที่ทำตามข้อ 7 ได้ตามนี้

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

เมื่อโปรแกรมโหลดขึ้นมาจะทำการ Resize หน้าต่างแสดงผลเป็นจอใหญ่ให้อัตโนมัติ

9. เมื่อเราทำเสร็จแล้วต่อมาเราจะมาทำขั้นตอนการ Build ตัวติดตั้งสำหรับ Windows กัน โดยให้ทำการ install

npm i --save-dev electron-builder

10. เมื่อ install ข้างบนเสร็จเรียบร้อยแล้ว ต่อมาให้ทำการเข้าไปแก้ไขข้อมูลในไฟล์ package.json อีกครั้งตามนี้

11. เสร็จแล้วทำการลอง build ดูโดยใช้คำสั่ง

npm run build-installer

เมื่อ build เสร็จจะได้ข้อมูลตามนี้

จะได้โฟลเดอร์ใหม่ dist ในนั้นจะมีตัวติดตั้งโปรแกรมอยู่

ใช้สำหรับ build ตัวติดตั้งบน Windows ซึ่งถ้าเราต้องการสร้างตัวติดตั้งใน Platform อื่นด้วยจะต้องแก้ไขข้อมูลใน package.json

"build-installer": "electron-builder --ia32 --x64 -w" //For Windows
"build-installer": "electron-builder --armv7l" //For Raspberry pi 

ตัวติดตั้งโปรแกรม *ข้อมูลข้างในช่องคือไฟล์ license.txt ที่เราเขียนนั่นเอง

เมื่อเสร็จแล้วจะขึ้นหน้านี้

ทดสอบกับ Windows 11 แล้วใช้งานได้ปกติ

เสร็จเรียบร้อยได้ตัวโปรแกรมมาอยู่หน้า Desktop ของเรา

GitHub - SomnuekM/Electron-VideoAndImage-SlideShow