การสร้างแอปเดสก์ท็อปด้วยอิเล็กตรอนและ Vue

JavaScript เคยเป็นที่รู้จักในฐานะภาษาสำหรับสร้างเว็บไซต์และเว็บแอปพลิเคชันโดยเฉพาะอย่างยิ่งกับเฟรมเวิร์กบางอย่างเช่น React, Vue และ Angular แต่เมื่อเวลาผ่านไป (ต้นปี 2009) JavaScript ก็สามารถทำงานนอกเบราว์เซอร์ด้วย การเกิดขึ้นของ Node.js ซึ่งเป็นโอเพนซอร์ส ข้ามแพลตฟอร์ม รันไทม์ JavaScript ที่รันโค้ด JavaScript ภายนอกเว็บเบราว์เซอร์ สิ่งนี้นำไปสู่ความสามารถในการใช้ JavaScript มากกว่าแค่เว็บแอปพลิเคชัน และหนึ่งในนั้นคือการสร้างแอปพลิเคชันเดสก์ท็อปโดยใช้ Electron.js

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

ในบทช่วยสอนนี้ เราจะเรียนรู้วิธีสร้างแอปพลิเคชันเดสก์ท็อปโดยใช้ Electron เราจะเรียนรู้วิธีใช้ Vuej เพื่อสร้างแอปพลิเคชัน Electron ด้วย

หมายเหตุ : จำเป็นต้องมีความรู้พื้นฐานเกี่ยวกับ Vue.js และ Vue CLI เพื่อทำตามบทช่วยสอนนี้ รหัสทั้งหมดที่ใช้ในบทช่วยสอนนี้มีอยู่ใน GitHub ของฉัน รู้สึกอิสระที่จะโคลนและเล่นกับมัน!

แอปพลิเคชั่นเดสก์ท็อปคืออะไร?

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

ตัวอย่างของแอปพลิเคชันเดสก์ท็อปคือ Microsoft Word ซึ่งใช้สำหรับสร้างและพิมพ์เอกสาร ตัวอย่างอื่นๆ ของแอปพลิเคชันเดสก์ท็อปทั่วไป ได้แก่ เว็บเบราว์เซอร์, Visual Studio Code และ Adobe Photoshop แอปพลิเคชันเดสก์ท็อปแตกต่างจากแอปพลิเคชันเว็บเนื่องจากคุณต้องติดตั้งแอปพลิเคชันเดสก์ท็อปเพื่อให้คุณเข้าถึงและใช้งานได้ และบางครั้งไม่จำเป็นต้องเชื่อมต่ออินเทอร์เน็ตเพื่อให้ทำงานได้ ในทางกลับกัน คุณสามารถเข้าถึงเว็บแอปได้โดยไปที่ URL ที่โฮสต์แอปดังกล่าวไว้และจำเป็นต้องเชื่อมต่ออินเทอร์เน็ตเสมอก่อนที่คุณจะสามารถเข้าถึงได้

ตัวอย่างของเฟรมเวิร์กที่ใช้ในการสร้างแอปเดสก์ท็อป ได้แก่

1. Java
   Java เป็นภาษาการเขียนโปรแกรมเอนกประสงค์ที่อิงตามคลาส เชิงวัตถุ และได้รับการออกแบบมาให้มีการพึ่งพาการใช้งานน้อยที่สุด มีจุดมุ่งหมายเพื่อให้นักพัฒนาแอปพลิเคชัน เขียนครั้งเดียว เรียกใช้ได้ทุกที่ (WORA) หมายความว่าโค้ด Java ที่คอมไพล์แล้วสามารถทำงานบนทุกแพลตฟอร์มที่รองรับ Java โดยไม่ต้องคอมไพล์ใหม่
2. Java FX
   ตามเอกสารอย่างเป็นทางการของพวกเขา มันเป็นโอเพ่นซอร์ส แพลตฟอร์มแอปพลิเคชันไคลเอนต์รุ่นต่อไปสำหรับเดสก์ท็อป มือถือ และระบบฝังตัวที่สร้างบน Java
3. ค#
   C# เป็นภาษาโปรแกรมอเนกประสงค์แบบหลายกระบวนทัศน์ที่ครอบคลุมการพิมพ์ที่รัดกุม ขอบเขตคำศัพท์ ความจำเป็น ประกาศ การทำงาน ทั่วไป เชิงวัตถุ และสาขาวิชาการเขียนโปรแกรมเชิงองค์ประกอบ
4. .สุทธิ
   .NET เป็นแพลตฟอร์มสำหรับนักพัฒนาโอเพ่นซอร์สข้ามแพลตฟอร์มฟรีสำหรับสร้างแอปพลิเคชันประเภทต่างๆ มากมาย ด้วย .NET คุณสามารถใช้ภาษา ตัวแก้ไข และไลบรารีได้หลายภาษาเพื่อสร้างเว็บ มือถือ เดสก์ท็อป เกม และ IoT
   

อิเล็กตรอนคืออะไร?

อิเลคตรอนเป็นเฟรมเวิร์กโอเพ่นซอร์สสำหรับการสร้างแอปพลิเคชันเดสก์ท็อป เดิมชื่อ 'Atom shell' และได้รับการพัฒนาและดูแลโดย GitHub ช่วยให้คุณเขียนแอปพลิเคชันเดสก์ท็อปข้ามแพลตฟอร์มโดยใช้ HTML, CSS และ JavaScript ซึ่งหมายความว่าคุณสามารถสร้างแอปพลิเคชันเดสก์ท็อปสำหรับ Windows, MacOS และแพลตฟอร์มอื่นๆ โดยใช้ฐานรหัสเดียว มันขึ้นอยู่กับ Node.js และ Chromium ตัวอย่างแอปพลิเคชันที่สร้างด้วย Electron ได้แก่ ตัวแก้ไข Atom ยอดนิยม, Visual Studio Code, Wordpress สำหรับเดสก์ท็อป และ Slack

การติดตั้ง

คุณสามารถติดตั้ง Electron ในโครงการของคุณโดยใช้ NPM:

 npm install electron --save-dev

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

 npm install electron -g

การสร้างแอป Vuejs สำหรับเดสก์ท็อปด้วยอิเล็กตรอน

หากคุณคุ้นเคยกับการสร้างเว็บแอปพลิเคชันโดยใช้ Vuejs คุณสามารถสร้างแอปพลิเคชันเดสก์ท็อปโดยใช้ Vuejs ได้ สิ่งที่คุณต้องการสำหรับสิ่งนี้คือ Vue CLI Plugin Electron Builder

ตัวสร้างอิเล็กตรอน Vue CLI Plugin

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

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

เราจะสร้างแอพง่ายๆ ที่นำเสนอสิ่งต่อไปนี้:

1. หน้าที่แสดงพาดหัวข่าวเด่นและข่าวด่วนจากประเทศที่เลือก พร้อมตัวเลือกในการเลือกประเทศโดยใช้ปลายทาง /top-headlines News API นำเสนอข่าวสารจากรายชื่อประเทศที่สนับสนุน ค้นหารายชื่อได้ที่นี่
2. ข่าวสารจากหมวดหมู่ที่เลือกโดยใช้จุดปลาย /everything และพารามิเตอร์การสืบค้น q ซึ่งเราจะระบุหมวดหมู่ของเรา

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

 npm install -g @vue/cli # OR yarn global add @vue/cli

เมื่อเสร็จแล้ว ให้สร้างแอป News ของคุณโดยใช้ CLI:

 vue create news-app

เราจะดึงข้อมูลจาก News API โดยใช้ Axios สำหรับบทช่วยสอนนี้ แต่คุณสามารถใช้ทางเลือกอื่นที่คุณสะดวกใจกว่าได้ คุณสามารถติดตั้ง Axios ได้โดยใช้คำสั่งใดๆ ต่อไปนี้:

 //NPM npm install axios // YARN yarn add axios

ขั้นตอนต่อไปคือการตั้งค่าอินสแตนซ์ Axios สำหรับการกำหนดค่าส่วนกลางในแอปพลิเคชันของเรา เรากำลังจะสร้างโฟลเดอร์ ปลั๊กอิน ในโฟลเดอร์ src ที่เราจะสร้างไฟล์ axios.js นี้ หลังจากสร้างไฟล์แล้ว ให้เพิ่มโค้ดต่อไปนี้:

 import axios from "axios"; let baseURL = `https://newsapi.org/v2`; let apiKey = process.env.VUE_APP_APIKEY; const instance = axios.create({ baseURL: baseURL, timeout: 30000, headers: { "X-Api-Key": apiKey, }, }); export default instance;

ที่นี่ เรากำหนด baseURL และ apiKey ที่เราได้รับจาก News API และส่งผ่านไปยังอินสแตนซ์ใหม่ของ Axios อินสแตนซ์นี้ยอมรับ baseURL และ apiKey ร่วมกับคุณสมบัติการ timeout News API ต้องการให้คุณเพิ่มคีย์ API ของคุณเมื่อส่งคำขอไปยัง API และเสนอ 3 วิธีในการแนบไปกับคำขอของคุณ แต่ที่นี่ เรากำลังเพิ่มลงในคุณสมบัติ X-Api-Key ของส่วนหัว หลังจากนั้นเราจะส่งออก instance เมื่อเสร็จแล้ว เราก็สามารถใช้การกำหนดค่านี้สำหรับคำขอ Axios ทั้งหมดในแอปของเราได้

เมื่อเสร็จแล้ว คุณสามารถเพิ่มตัวสร้าง Plugin Electron ด้วย CLI โดยใช้คำสั่งนี้:

 vue add electron-builder

คุณจะได้รับแจ้งให้เลือกเวอร์ชันอิเลคตรอนที่คุณต้องการ ฉันเลือกเวอร์ชัน 9.0.0 เนื่องจากเป็นเวอร์ชันล่าสุดของอิเล็กตรอน (ในขณะที่เขียน)

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

 Using Yarn(strongly recommended) yarn electron:serve OR NPM npm run electron:serve

จะใช้เวลาสักครู่ในการรวบรวมและให้บริการแอปของคุณ เมื่อเสร็จแล้ว แอปพลิเคชันของคุณจะเปิดขึ้นในระบบของคุณ ซึ่งควรมีลักษณะดังนี้:

หากคุณปิด devtools ของแอป ควรมีลักษณะดังนี้:

ปลั๊กอินอิเล็กตรอนนี้มีประโยชน์มากและใช้งานง่าย เนื่องจากทุกส่วนของการพัฒนาแอปนี้ทำงานในลักษณะเดียวกับแอป Vue ซึ่งหมายความว่าคุณสามารถมีโค้ดเบสเดียวสำหรับทั้งเว็บแอปพลิเคชันและแอปเดสก์ท็อป แอพของเราจะมีสามส่วน:

1. หน้า Landing Page ที่แสดงข่าวเด่นจากประเทศที่เลือกแบบสุ่ม
2. หน้าสำหรับแสดงข่าวเด่นจากประเทศที่ผู้ใช้เลือก
3. เพจที่แสดงข่าวเด่นจากหมวดหมู่ที่ผู้ใช้เลือก

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

 <template> <header class="header"> <div class="logo"> <div class="logo__container"> <img src="../assets/logo.png" alt="News app logo" class="logo__image" /> </div> <h1>News App</h1> </div> <nav class="nav"> <h4 class="nav__link"> <router-link to="/home">Home</router-link> </h4> <h4 class="nav__link"> <router-link to="/top-news">Top News</router-link> </h4> <h4 class="nav__link"> <router-link to="/categories">News By Category</router-link> </h4> </nav> </header> </template> <script> export default { name: "app-header", }; </script> <style> .header { display: flex; flex-wrap: wrap; justify-content: space-between; } .logo { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; height: 50px; } .logo__container { width: 50px; height: 50px; } .logo__image { max-width: 100%; max-height: 100%; } .nav { display: flex; flex-wrap: wrap; width: 350px; justify-content: space-between; } </style>

ที่นี่ เราสร้างองค์ประกอบส่วนหัวที่มีชื่อแอปและโลโก้ของเรา (รูปภาพสามารถพบได้ใน GitHub ของฉัน) พร้อมกับส่วนการนำทางที่มีลิงก์ไปยังส่วนอื่นๆ ของแอปพลิเคชันของเรา สิ่งต่อไปคือการนำเข้าหน้านี้บนหน้าเลย์เอาต์ของเรา — App.vue เพื่อให้เราเห็นส่วนหัวของเราในทุกหน้า

 <template> <div> <app-header /> <router-view /> </div> </template> <script> import appHeader from "@/components/Header.vue"; export default { name: "layout", components: { appHeader, }, }; </script> <style> @import url("https://fonts.googleapis.com/css2?family=Abel&family=Staatliches&display=swap"); html, #app { min-height: 100vh; } #app { font-family: "Abel", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; background-color: #fff; } #app h1 { font-family: "Staatliches", cursive; } a { font-weight: bold; color: #2c3e50; text-decoration: none; } a:hover { text-decoration: underline; } a.router-link-exact-active { color: #42b983; } </style>

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

ตอนนี้ถ้าเราพยายามดูแอพของเรา มันควรจะเป็นดังนี้:

ขั้นตอนต่อไปคือการเพิ่มเนื้อหาลงในไฟล์ Home.vue ของเรา หน้านี้จะโฮสต์ส่วนแรกของแอพของเรา ข่าวเด่นจากประเทศที่สุ่มเลือก อัปเดตไฟล์ Home.vue ของคุณด้วยโค้ดต่อไปนี้:

 <template> <section class="home"> <h1>Welcome to News App</h1> <h4>Displaying Top News from {{ countryInfo.name }}</h4> <div class="articles__div" v-if="articles"> <news-card v-for="(article, index) in articles" :key="index" :article="article" ></news-card> </div> </section> </template> <script> import { mapActions, mapState } from "vuex"; import NewsCard from "../components/NewsCard"; export default { data() { return { articles: "", countryInfo: "", }; }, components: { NewsCard, }, mounted() { this.fetchTopNews(); }, computed: { ...mapState(["countries"]), }, methods: { ...mapActions(["getTopNews"]), async fetchTopNews() { let countriesLength = this.countries.length; let countryIndex = Math.floor( Math.random() * (countriesLength - 1) + 1 ); this.countryInfo = this.countries[countryIndex]; let { data } = await this.getTopNews( this.countries[countryIndex].value ); this.articles = data.articles; }, }, }; </script> <style> .articles__div { display: flex; flex-wrap: wrap; justify-content: center; } </style>

ในส่วนสคริปต์ของไฟล์นี้ เรานำเข้า mapState และ mapActions จาก Vuex ซึ่งเราจะใช้ในไฟล์นี้ในภายหลัง นอกจากนี้เรายังนำเข้าองค์ประกอบ NewsCard (เราจะสร้างสิ่งนี้ต่อไป) ที่จะแสดงหัวข้อข่าวทั้งหมดในหน้านี้ จากนั้นเราจะใช้วิธี fetchTopNews เพื่อดึงข้อมูลข่าวสารล่าสุดจากประเทศที่สุ่มเลือกจากอาร์เรย์ของ countries ในร้านค้าของเรา ประเทศนี้ถูกส่งไปยังการดำเนินการ getTopNews ของเรา ซึ่งจะต่อท้าย baseURL เป็นข้อความค้นหาสำหรับประเทศเช่นนี้ baseURL/top-news?country=${randomCountry} เมื่อดำเนินการเสร็จแล้ว เราจะวนซ้ำข้อมูลนี้และส่งผ่านไปยังส่วนรองรับ article ขององค์ประกอบ Newscard ของเราในส่วนเทมเพลต เรายังมีย่อหน้าที่ระบุว่าข่าวเด่นมาจากประเทศใด

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

 <template> <section class="news"> <div class="news__section"> <h1 class="news__title"> <a class="article__link" :href="article.url" target="_blank"> {{ article.title }} </a> </h1> <h3 class="news__author" v-if="article.author">{{ article.author }}</h3> <!-- <p class="article__paragraph">{{ article.description }}</p> --> <h5 class="article__published">{{ new Date(article.publishedAt) }}</h5> </div> <div class="image__container"> <img class="news__img" src="../assets/logo.png" :data-src="article.urlToImage" :alt="article.title" /> </div> </section> </template> <script> export default { name: "news-card", props: { article: Object, }, mounted() { this.lazyLoadImages(); }, methods: { lazyLoadImages() { const images = document.querySelectorAll(".news__img"); const options = { // If the image gets within 50px in the Y axis, start the download. root: null, // Page as root rootMargin: "0px", threshold: 0.1, }; const fetchImage = (url) => { return new Promise((resolve, reject) => { const image = new Image(); image.src = url; image.onload = resolve; image.onerror = reject; }); }; const loadImage = (image) => { const src = image.dataset.src; fetchImage(src).then(() => { image.src = src; }); }; const handleIntersection = (entries) => { entries.forEach((entry) => { if (entry.intersectionRatio > 0) { loadImage(entry.target); } }); }; // The observer for the images on the page const observer = new IntersectionObserver(handleIntersection, options); images.forEach((img) => { observer.observe(img); }); }, }, }; </script> <style> .news { width: 100%; display: flex; flex-direction: row; align-items: flex-start; max-width: 550px; box-shadow: 2px 1px 7px 1px #eee; padding: 20px 5px; box-sizing: border-box; margin: 15px 5px; border-radius: 4px; } .news__section { width: 100%; max-width: 350px; margin-right: 5px; } .news__title { font-size: 15px; text-align: left; margin-top: 0; } .news__author { font-size: 14px; text-align: left; font-weight: normal; } .article__published { text-align: left; } .image__container { width: 100%; max-width: 180px; max-height: 180px; } .news__img { transition: max-width 300ms cubic-bezier(0.4, 0, 1, 1), max-height 300ms cubic-bezier(0.4, 0, 1, 1); max-width: 150px; max-height: 150px; } .news__img:hover { max-width: 180px; max-height: 180px; } .article__link { text-decoration: none; color: inherit; } </style>

ที่นี่ เราแสดงข้อมูลที่ส่งผ่านไปยังองค์ประกอบนี้โดยใช้ article prop วัตถุ เรายังมีวิธีการที่ขี้เกียจโหลดรูปภาพที่แนบมากับแต่ละบทความ วิธีนี้จะวนซ้ำตามจำนวนรูปภาพบทความที่เรามีและขี้เกียจโหลดเมื่อปรากฏให้เห็น สุดท้าย เรามีสไตล์ที่กำหนดเป้าหมายที่องค์ประกอบนี้ในส่วนสไตล์

สิ่งต่อไปคือการจัดตั้งร้านค้าของเราเพื่อให้เราสามารถเริ่มรับข่าวสารล่าสุดได้ เพิ่มบรรทัดโค้ดต่อไปนี้ในไฟล์ index.js ของคุณ:

 import Vue from "vue"; import Vuex from "vuex"; import axios from "../plugins/axios"; Vue.use(Vuex); const store = new Vuex.Store({ state: { countries: [{ name: "United States of America", value: "us", }, { name: "Nigeria", value: "ng", }, { name: "Argentina", value: "ar", }, { name: "Canada", value: "ca", }, { name: "South Africa", value: "za", }, ], categories: [ "entertainment", "general", "health", "science", "business", "sports", "technology", ], }, mutations: {}, actions: { async getTopNews(context, country) { let res = await axios({ url: `/top-headlines?country=${country}`, method: "GET", }); return res; }, }, }); export default store;

เรากำลังเพิ่มคุณสมบัติสองแห่งในร้านค้าของเรา หนึ่งในคุณสมบัติเหล่านี้คือ countries คุณสมบัตินี้มีอาร์เรย์ของประเทศต่างๆ เรายังมี categories คุณสมบัติ; มีอาร์เรย์ของหมวดหมู่ที่มีอยู่ใน News API ผู้อ่านจะชอบอิสระในการดูข่าวเด่นจากประเทศและหมวดหมู่เฉพาะ สิ่งนี้จำเป็นในมากกว่าหนึ่งส่วนของแอพด้วย นั่นคือเหตุผลที่เรากำลังใช้ประโยชน์จากร้านค้า ในส่วนการดำเนินการของร้านค้าของเรา เรามีวิธี getTopNews ที่ดึงข่าวเด่นจากประเทศหนึ่ง (ประเทศนี้ถูกส่งผ่านจากองค์ประกอบที่เรียกการกระทำนี้)

ณ จุดนี้ หากเราเปิดแอปของเรา เราควรเห็นหน้า Landing Page ของเรามีลักษณะดังนี้:

ไฟล์ background.js

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

ในไฟล์นี้ เรามีการกำหนดค่าที่กำหนดไว้ล่วงหน้าสำหรับแอป เช่น height และ width เริ่มต้นสำหรับแอปของคุณ มาดูสิ่งที่คุณสามารถทำได้ในไฟล์นี้กัน

การเปิดใช้งาน Vuejs devtools

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

 // Install Vue Devtools // Devtools extensions are broken in Electron 6.0.0 and greater // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode // If you are not using Windows 10 dark mode, you may uncomment these lines // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines // try { // await installVueDevtools() // } catch (e) { // console.error('Vue Devtools failed to install:', e.toString()) // }

ดังนั้น หากคุณไม่ได้รับผลกระทบจากจุดบกพร่องนี้ คุณสามารถยกเลิกการแสดงข้อคิดเห็นบล็อก try/catch และค้นหา installVueDevtools ในไฟล์เดียวกันนี้ (บรรทัดที่ 5) และยกเลิกการแสดงความคิดเห็นได้ เมื่อเสร็จแล้ว แอปของคุณจะรีสตาร์ทโดยอัตโนมัติ และเมื่อคุณตรวจสอบเครื่องมือ dev ของคุณ คุณจะเห็น Vuejs Devtools

การเลือกไอคอนที่กำหนดเองสำหรับแอปของคุณ

ตามค่าเริ่มต้น ไอคอนอิเล็กตรอนจะถูกตั้งค่าเป็นไอคอนเริ่มต้นสำหรับแอปของคุณ และโดยส่วนใหญ่ คุณอาจต้องการตั้งค่าไอคอนแบบกำหนดเองของคุณเอง ในการดำเนินการนี้ ให้ย้ายไอคอนของคุณไปที่โฟลเดอร์ สาธารณะ แล้วเปลี่ยนชื่อเป็น icon.png สิ่งต่อไปที่ต้องทำคือเพิ่มการพึ่งพาที่จำเป็น electron-icon-builder

คุณสามารถติดตั้งโดยใช้คำสั่งใดๆ ต่อไปนี้:

 // With Yarn: yarn add --dev electron-icon-builder // or with NPM: npm install --save-dev electron-icon-builder

เมื่อเสร็จแล้ว คุณสามารถรันคำสั่งถัดไปนี้ได้ มันจะแปลงไอคอนของคุณเป็นรูปแบบอิเลคตรอนและพิมพ์สิ่งต่อไปนี้ในคอนโซลของคุณเมื่อเสร็จสิ้น

สิ่งต่อไปคือการตั้งค่าตัวเลือกไอคอนในไฟล์ background.js ตัวเลือกนี้จะอยู่ภายในตัวเลือก BrowserWindow ที่นำเข้าจาก Electron ในการดำเนินการนี้ ให้อัปเดต BrowserWindow ให้มีลักษณะดังนี้:

 // Add this to the top of your file /* global __static */ // import path import path from 'path' // Replace win = new BrowserWindow({ width: 800, height: 600 }) // With win = new BrowserWindow({ width: 800, height: 600, icon: path.join(__static, 'icon.png') })

ตอนนี้ หากเราเรียกใช้งาน yarn run electron:build และดูแอปของเรา เราควรเห็นไอคอนที่อัปเดตซึ่งถูกใช้เป็นไอคอนของแอป แต่จะไม่เปลี่ยนแปลงในการพัฒนา ปัญหานี้ช่วยแก้ไขปัญหาด้วยตนเองสำหรับ macOS

การตั้งชื่อแอปของคุณ

คุณจะสังเกตเห็นว่าชื่อแอปของคุณตั้งเป็นชื่อแอป (แอปข่าวในกรณีนี้) และเราจำเป็นต้องเปลี่ยน ในการทำเช่นนั้น เราต้องเพิ่มคุณสมบัติ title ให้กับเมธอด BrowserWindow ในไฟล์ background.js ของเราดังนี้:

 win = new BrowserWindow({ width: 600, height: 500, title: "News App", icon: path.join(__static, "icon.png"), webPreferences: { // Use pluginOptions.nodeIntegration, leave this alone // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, }, });

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

 win.on("page-title-updated", (event) => event.preventDefault());

เรากำลังรับฟังเหตุการณ์ที่จะถูกไล่ออกเมื่อมีการอัปเดต title ของเราจาก BrowserWindow เมื่อเหตุการณ์นี้เริ่มต้นขึ้น เรากำลังบอกอิเลคตรอนว่าอย่าอัปเดตชื่อเรื่องด้วยชื่อที่พบในไฟล์ index.html

อีกสิ่งหนึ่งที่อาจคุ้มค่าที่จะเปลี่ยนคือ productName ซึ่งจะควบคุมชื่อที่จะปรากฏเมื่อคุณวางเมาส์บนไอคอนของแอป หรือสิ่งที่คอมพิวเตอร์ของคุณรู้จักแอปดังกล่าว ตอนนี้ชื่อแอพของเราคือ Electron ในการเปลี่ยนชื่อนี้ในการผลิต ให้สร้างไฟล์ vue.config.js และเพิ่มบรรทัดของโค้ดต่อไปนี้:

 module.exports = { pluginOptions: { electronBuilder: { builderOptions: { productName: "News App", }, }, }, };

ที่นี่ เรากำหนด productName เป็น 'News App' ดังนั้นเมื่อเราเรียกใช้คำสั่ง build สำหรับแอปของเรา ชื่อจะเปลี่ยนจาก 'Electron' เป็น 'News App'

บิลด์หลายแพลตฟอร์ม

ตามค่าเริ่มต้น เมื่อคุณรันคำสั่ง build แอพที่สร้างขึ้นจะขึ้นอยู่กับแพลตฟอร์มที่กำลังรันอยู่ ซึ่งหมายความว่าหากคุณเรียกใช้คำสั่ง build บน Linux แอพที่สร้างขึ้นจะเป็นแอพ Linux บนเดสก์ท็อป เช่นเดียวกับแพลตฟอร์มอื่นๆ (macOS และ windows) แต่อิเลคตรอนมาพร้อมกับตัวเลือกในการระบุแพลตฟอร์ม (หรือสองแพลตฟอร์ม) ที่คุณต้องการสร้าง ตัวเลือกที่ใช้ได้คือ:

1. mac
2. win
3. linux

ดังนั้นเพื่อสร้างแอปเวอร์ชัน Windows ให้รันคำสั่งต่อไปนี้:

 // NPM npm electron:build -- --win nsis // YARN yarn electron:build --win nsis

บทสรุป

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

1. ปรับแต่ง Dock ของคุณบน macOS — https://www.electronjs.org/docs/tutorial/macos-dock
2. การตั้งค่าปรับขนาดได้ ขยายได้สูงสุด และอื่นๆ อีกมากมาย — https://github.com/electron/electron/blob/master/docs/api/browser-window.md#new-browserwindowoptions

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

แหล่งข้อมูลที่เกี่ยวข้อง

1. Node.jshttps://th.wikipedia.org/wiki/Node.js
2. Java (ภาษาโปรแกรม)https://en.wikipedia.org/wiki/Java_(programming_language)
3. อิเลคตรอน (ซอฟต์แวร์เฟรมเวิร์ก)
4. JavaFX 14
5. อิเล็คตรอน
6. เอกสารอิเลคตรอน
7. Vue CLI Plugin Electron Builder
8. Lazy Loading Images สำหรับการแสดงโดยใช้ Intersection Observer โดย Chris Nwamba
9. axios
10. เริ่มต้นใช้งาน Axios ใน Nuxthttps://www.smashingmagazine.com/2020/05/getting-started-axios-nuxt/) โดย Timi Omoyeni