إنشاء تطبيقات سطح المكتب باستخدام Electron و Vue

كانت JavaScript تُعرف باسم لغة إنشاء مواقع الويب وتطبيقات الويب خاصةً مع بعض أطر العمل الخاصة بها مثل React و Vue و Angular ولكن بمرور الوقت (في وقت مبكر من عام 2009) ، أصبح من الممكن تشغيل JavaScript خارج المتصفح باستخدام ظهور Node.js ، بيئة تشغيل JavaScript مفتوحة المصدر ومتعددة المنصات تقوم بتنفيذ كود JavaScript خارج مستعرض الويب. أدى ذلك إلى القدرة على استخدام JavaScript في أكثر من مجرد تطبيقات ويب ، وأحدها هو بناء تطبيقات سطح المكتب باستخدام Electron.js.

يمكّنك Electron من إنشاء تطبيقات سطح مكتب باستخدام JavaScript خالص من خلال توفير وقت تشغيل مع واجهات برمجة تطبيقات (نظام تشغيل) أصلية غنية. يمكنك رؤيته كمتغير لوقت تشغيل Node.js الذي يركز على تطبيقات سطح المكتب بدلاً من خوادم الويب.

في هذا البرنامج التعليمي ، سوف نتعلم كيفية إنشاء تطبيقات سطح المكتب باستخدام Electron ، وسوف نتعلم أيضًا كيفية استخدام Vuejs لبناء تطبيقات Electron.

ملاحظة : المعرفة الأساسية بـ Vue.js و Vue CLI مطلوبة لاتباع هذا البرنامج التعليمي. يمكن العثور على جميع التعليمات البرمجية المستخدمة في هذا البرنامج التعليمي على GitHub الخاص بي. لا تتردد في استنساخه واللعب معه!

ما هي تطبيقات سطح المكتب؟

تطبيقات سطح المكتب هي تطبيقات تعمل بشكل مستقل في أجهزة الكمبيوتر المكتبية أو المحمولة. إنها تطبيقات تؤدي مهامًا محددة ويتم تثبيتها لهذا الغرض فقط.

مثال على تطبيق سطح المكتب هو Microsoft Word الخاص بك ، والذي يستخدم لإنشاء المستندات وكتابتها. من الأمثلة الأخرى على تطبيقات سطح المكتب الشائعة متصفحات الويب و Visual Studio Code و Adobe Photoshop. تختلف تطبيقات سطح المكتب عن تطبيقات الويب لأنه يتعين عليك تثبيت تطبيق سطح المكتب حتى تتمكن من الوصول إليه والاستفادة منه ، وفي بعض الأحيان لا يحتاجون إلى الوصول إلى الإنترنت لكي يعملوا. من ناحية أخرى ، يمكن الوصول إلى تطبيقات الويب ببساطة عن طريق زيارة عنوان URL الذي يستضيفه مثل هذا التطبيق ويحتاج دائمًا إلى الوصول إلى الإنترنت قبل أن تتمكن من الوصول إليها.

تتضمن أمثلة الأطر المستخدمة في إنشاء تطبيقات سطح المكتب ما يلي:

1. جافا
   Java هي لغة برمجة للأغراض العامة تعتمد على الفئة ، وموجهة للكائنات ، ومصممة بحيث تحتوي على أقل عدد ممكن من تبعيات التنفيذ. الغرض منه هو السماح لمطوري التطبيقات بالكتابة مرة واحدة وتشغيلها في أي مكان (WORA) ، مما يعني أنه يمكن تشغيل كود Java المترجم على جميع الأنظمة الأساسية التي تدعم Java دون الحاجة إلى إعادة التجميع.
2. Java FX
   وفقًا لوثائقهم الرسمية ، فهي عبارة عن منصة تطبيقات عملاء من الجيل التالي مفتوحة المصدر لأجهزة سطح المكتب والجوال والأنظمة المدمجة المبنية على Java.
3. سي #
   C # هي لغة برمجة للأغراض العامة ومتعددة النماذج تشمل الكتابة القوية ، والمعجمية النطاق ، والحتمية ، والتوضيحية ، والوظيفية ، والعامة ، والموجهة للكائنات ، والمكونات.
4. .صافي
   NET هو نظام أساسي مجاني متعدد الأنظمة ومفتوح المصدر للمطورين لإنشاء العديد من أنواع التطبيقات المختلفة. باستخدام .NET ، يمكنك استخدام العديد من اللغات والمحررين والمكتبات لإنشاء الويب والجوال وسطح المكتب والألعاب وإنترنت الأشياء.
   

ما هو الإلكترون؟

Electron هو إطار عمل مفتوح المصدر لبناء تطبيقات سطح المكتب. كان يُعرف سابقًا باسم "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 Electron Builder

تتيح لك هذه الأداة إنشاء تطبيقات Vue لسطح المكتب باستخدام Electron ، وهذا يعني أنها تجعل تطبيق Vue الخاص بك يعمل كتطبيق إلكتروني. هذا يعني أنه يمكن توسيع تطبيق Vue الخاص بك والذي من المحتمل أن يكون تطبيق ويب للعمل في بيئات سطح المكتب دون الحاجة إلى إنشاء تطبيق سطح مكتب منفصل في إطار عمل آخر. يمنح هذا مطوري Vue الخيار والقوة لتجاوز الويب. من الآن فصاعدًا ، يمكنك العمل على هذه الفكرة التي لديك ومنح المستخدمين خيار تطبيق سطح المكتب - خيار يمكن تشغيله على أنظمة تشغيل Windows و macOS و Linux.

لرؤية هذا في العمل ، سنقوم ببناء تطبيق أخبار باستخدام News 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

بمجرد الانتهاء من ذلك ، قم بإنشاء تطبيق الأخبار الخاص بك باستخدام 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 الخاص بك عند تقديم طلب إلى واجهة برمجة التطبيقات الخاصة بهم ويقدم 3 طرق لإرفاقه بطلبك ولكن هنا ، نضيفه إلى خاصية X-Api-Key الخاصة بالعنوان وبعد ذلك نقوم بتصدير instance . بمجرد الانتهاء من ذلك ، يمكننا الآن استخدام هذا التكوين لجميع طلبات Axios في تطبيقنا.

عند الانتهاء من ذلك ، يمكنك إضافة Plugin Electron builder باستخدام CLI باستخدام هذا الأمر:

 vue add electron-builder

سيُطلب منك تحديد إصدار Electron المفضل لديك ، لقد اخترت الإصدار 9.0.0 لأنه أحدث إصدار من Electron (في وقت كتابة هذا التقرير).

عند الانتهاء من ذلك ، يمكنك الآن خدمة تطبيقك باستخدام هذا الأمر:

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

سيستغرق هذا بعض الوقت لتجميع تطبيقك وتقديمه. عندما يتم ذلك ، سيتم فتح التطبيق الخاص بك على نظامك ، يجب أن يبدو هذا على النحو التالي:

إذا أغلقت أدوات تطوير تطبيقك ، فيجب أن يبدو كما يلي:

يعد هذا المكون الإضافي للإلكترون مفيدًا للغاية وسهل الاستخدام لأن كل جزء من تطوير هذا التطبيق يعمل بنفس طريقة تطبيق Vue. هذا يعني أنه يمكنك الحصول على قاعدة بيانات واحدة لكل من تطبيق الويب وتطبيق سطح المكتب. سيتألف تطبيقنا من ثلاثة أجزاء:

1. صفحة مقصودة تعرض أهم الأخبار من بلد يتم اختياره عشوائيًا.
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 . لدينا أيضًا طريقة تقوم بتحميل الصور المرفقة بكل مقالة. تقوم هذه الطريقة بالمرور عبر عدد صور المقالة التي لدينا وتحميلها الكسول عندما تصبح مرئية. أخيرًا ، لدينا أنماط تستهدف هذا المكون في قسم النمط.

سيكون الشيء التالي هو إنشاء متجرنا حتى نتمكن من البدء في الحصول على آخر الأخبار. أضف سطور التعليمات البرمجية التالية إلى ملف 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 التي تجلب أهم الأخبار من بلد ما (تم تمرير هذا البلد من المكون الذي يسمى هذا الإجراء).

في هذه المرحلة ، إذا فتحنا تطبيقنا ، فسنرى صفحتنا المقصودة التي تبدو كالتالي:

ملف background.js

هذا الملف هو نقطة دخول Electron إلى تطبيقك. يتحكم في جميع الإعدادات المشابهة لتطبيق سطح المكتب لهذا التطبيق. يمكن العثور على الحالة الافتراضية لهذا الملف على جيثب الخاص بي.

في هذا الملف ، لدينا بعض التكوينات المحددة مسبقًا التي تم تعيينها للتطبيق مثل height width الافتراضيين لتطبيقك. دعنا نلقي نظرة على بعض الأشياء التي يمكنك القيام بها في هذا الملف.

تمكين أدوات تطوير Vuejs

بشكل افتراضي ، يمكنك الوصول إلى أدوات التطوير في 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) وإلغاء التعليق عليه أيضًا. بمجرد الانتهاء من ذلك ، ستتم إعادة تشغيل التطبيق تلقائيًا ، وعندما تتحقق من أدوات التطوير ، يجب أن ترى Vuejs Devtools.

اختيار رمز مخصص لتطبيقك

بشكل افتراضي ، يتم تعيين رمز Electron كأيقونة افتراضية لتطبيقك ، وفي معظم الأحيان ، قد ترغب في تعيين الرمز المخصص الخاص بك. للقيام بذلك ، انقل الرمز الخاص بك إلى مجلدك العام ، وأعد تسميته ليكون icon.png . الشيء التالي الذي يجب فعله هو إضافة التبعية المطلوبة ، electron-icon-builder .

يمكنك تثبيته باستخدام أي من الأوامر التالية:

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

بمجرد الانتهاء من ذلك ، يمكنك تشغيل هذا الأمر التالي. سيقوم بتحويل الرمز الخاص بك إلى تنسيق Electron وطباعة ما يلي في وحدة التحكم الخاصة بك عند القيام بذلك.

الشيء التالي هو تعيين خيار الرمز في ملف 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());

نحن نستمع إلى حدث يتم إطلاقه عند تحديث BrowserWindow title عندما يتم إطلاق هذا الحدث ، فإننا نخبر Electron بعدم تحديث العنوان بالعنوان الموجود في ملف index.html .

الشيء الآخر الذي قد يستحق التغيير هو اسم productName ، هذا يتحكم في الاسم الذي يظهر عندما تحوم فوق أيقونة التطبيق الخاص بك أو ما يتعرف الكمبيوتر الخاص بك على التطبيق. الآن ، اسم تطبيقنا هو Electron . لتغيير هذا الاسم في الإنتاج ، أنشئ ملف vue.config.js وأضف سطور التعليمات البرمجية التالية إليه:

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

هنا ، نحدد اسم المنتج ليكون "تطبيق الأخبار" بحيث عندما نقوم بتشغيل أمر productName ، يتغير الاسم من "إلكترون" إلى "تطبيق الأخبار".

بناء متعدد المنصات

افتراضيًا ، عند تشغيل أمر الإنشاء ، فإن التطبيق الذي يتم إنشاؤه يعتمد على النظام الأساسي الذي يتم تشغيله عليه. هذا يعني أنه إذا قمت بتشغيل الأمر build على نظام Linux ، فسيكون التطبيق الذي يتم إنشاؤه هو تطبيق Linux لسطح المكتب. الأمر نفسه ينطبق أيضًا على الأنظمة الأساسية الأخرى (macOS و windows). لكن Electron يأتي مع خيار تحديد منصة (أو نظامين أساسيين) تريد إنشاءهما. الخيارات المتاحة هي:

1. mac
2. win
3. linux

لذلك من أجل إنشاء إصدار Windows من تطبيقك ، قم بتشغيل الأمر التالي:

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

خاتمة

يمكن العثور على التطبيق المكتمل على جيثب الخاص بي. توفر وثائق Electron الرسمية معلومات ودليل يساعدك على تخصيص تطبيق سطح المكتب الخاص بك بالطريقة التي تريدها. بعض الأشياء التي جربتها ولكن لم يتم تضمينها في هذا البرنامج التعليمي هي:

1. تخصيص قفص الاتهام الخاص بك على 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.jsh https: //en.wikipedia.org/wiki/Node.js
2. جافا (لغة برمجة) https://en.wikipedia.org/wiki/Java_ (architecture_language)
3. الإلكترون (إطار عمل برمجي)
4. JavaFX 14
5. إلكترونجس
6. التوثيق الإلكتروني
7. Vue CLI Plugin Electron Builder
8. تحميل الصور الكسولة للأداء باستخدام مراقب التقاطع بواسطة Chris Nwamba
9. أكسيوس
10. الشروع في العمل مع Axios In Nuxth