יסודות האלקטרון: כיצד להגדיר ולהפעיל אפליקציית אלקטרונים זוויתית

Electron מאפשר לך לבנות יישומי שולחן עבודה עבור Windows, Mac ולינוקס. כאשר אתה בונה אפליקציה באמצעות Electron, אתה יכול להציג תצוגה מקדימה ולהפעיל את האפליקציה דרך חלון יישום שולחן העבודה.

אתה יכול להשתמש באלקטרון כדי להגדיר אפליקציית Angular להפעלה בחלון שולחן העבודה, במקום בדפדפן האינטרנט הרגיל. אתה יכול לעשות זאת באמצעות קובץ JavaScript בתוך האפליקציה עצמה.

לאחר שתגדיר את Electron, תוכל להמשיך בפיתוח כפי שהיית עושה באפליקציית Angular רגילה. החלקים העיקריים של היישום עדיין יפעלו על פי אותו מבנה Angular סטנדרטי.

כיצד להתקין אלקטרון כחלק מהאפליקציה שלך

כדי להשתמש ב-Electron, עליך להוריד ולהתקין את node.js, ולהשתמש ב-npm install כדי להוסיף Electron לאפליקציה שלך.

הורד והתקן node.js . אתה יכול לאשר שהתקנת אותו כהלכה על ידי בדיקת הגרסה:
```
node -v
```
צומת כולל גם npm, מנהל החבילות של JavaScript . אתה יכול לאשר שהתקנת את npm על ידי בדיקת גרסת npm:
```
npm -v
```
צור יישום Angular חדש באמצעות ה של חדש פקודה. פעולה זו תיצור תיקיה המכילה את כל הדרוש קבצים הנדרשים עבור פרויקט Angular לעבוד.
```
ng new electron-app
```
בתיקיית השורש של היישום שלך, השתמש npm להתקנת Electron.
```
npm install --save-dev electron
```
פעולה זו תיצור תיקיה חדשה עבור Electron בתיקיית node_modules של האפליקציה.
אתה יכול גם להתקין את Electron באופן גלובלי במחשב שלך.
```
npm install -g electron 
```

מבנה הקובץ של יישום האלקטרון הזוויתי

אלקטרון ידרוש קובץ JavaScript ראשי כדי ליצור ולנהל את חלון שולחן העבודה. חלון זה יציג את תוכן האפליקציה שלך בתוכו. קובץ ה-JavaScript יכיל גם אירועים אחרים שיכולים להתרחש, כגון אם המשתמש סוגר את החלון.

בזמן ריצה, התוכן המוצג יגיע מהקובץ index.html. כברירת מחדל, אתה יכול למצוא את הקובץ index.html בתוך src תיקיה, ובזמן ריצה עותק בנוי שלה נוצר אוטומטית בתוך ה- dist תיקייה.

למה הטלפון שלי כל כך חם?

הקובץ index.html בדרך כלל נראה כך:

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title> ElectronApp </title> 
  <base href="./"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="icon" type="image/x-icon" href="favicon.ico"> 
</head> 
<body> 
  <app-root> </app-root> 
</body> 
</html>

בתוך תג הגוף נמצא תג . זה יציג את רכיב האפליקציה הראשי עבור היישום Angular. אתה יכול למצוא את רכיב האפליקציה הראשי ב- src/app תיקייה.

כיצד להשתמש באלקטרון כדי לפתוח יישום זוויתי בחלון שולחן עבודה

צור את קובץ main.js והגדר אותו כך שיפתח את תוכן היישום בתוך חלון שולחן העבודה.

צור קובץ בשורש הפרויקט שלך בשם main.js . בקובץ זה, אתחול אלקטרון כך שתוכל להשתמש בו ליצירת חלון היישום.
```
const { app, BrowserWindow } = require('electron');
```
צור חלון שולחן עבודה חדש ברוחב ובגובה מסוימים. טען את קובץ האינדקס כתוכן שיוצג בחלון. ודא שהנתיב לקובץ האינדקס תואם לשם האפליקציה שלך. לדוגמה, אם קראת לאפליקציה שלך 'electron-app', הנתיב יהיה 'dist/electron-app/index.html'.
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
כאשר האפליקציה מוכנה, קרא לפונקציה createWindow() . פעולה זו תיצור את חלון היישום עבור האפליקציה שלך.
```
app.whenReady().then(() => { 
  createWindow() 
})
```
בתוך ה src/index.html קובץ, ב- בסיס תג, שנה את תכונת href ל-'./'.
```
<base href="./">
```
ב package.json , הוסף רָאשִׁי וכלול את קובץ main.js בתור הערך. זו תהיה נקודת הכניסה של האפליקציה, כך שהאפליקציה תריץ את קובץ main.js בזמן שהוא מפעיל את האפליקציה.
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}
```
בתוך ה .browserslistrc קובץ, שנה את הרשימה כדי להסיר iOS safari גרסאות 15.2-15.3. זה ימנע שגיאות תאימות להופיע במסוף בעת ההידור.
```
last 1 Chrome version 
last 1 Firefox version 
last 2 Edge major versions 
last 2 Safari major versions 
last 2 iOS major versions 
Firefox ESR 
not ios_saf 15.2-15.3 
not safari 15.2-15.3 
```

מחק את תוכן ברירת המחדל ב- src/app/app.component.html קוֹבֶץ. החלף אותו בתוכן חדש.

<div class="content"> 
  <div class="card"> 
    <h2> Home </h2> 
    <p> 
      Welcome to my Angular Electron application! 
    </p> 
  </div> 
</div>

הוסף קצת סטיילינג לתוכן ב- src/app/app.component.css file.

.content { 
  line-height: 2rem; 
  font-size: 1.2em; 
  margin: 48px 10%; 
  font-family: Arial, sans-serif 
} 
.card { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
  width: 85%; 
  padding: 16px 48px; 
  margin: 24px 0px; 
  background-color: whitesmoke; 
  font-family: sans-serif; 
}

הוסף קצת סטיילינג כללי ל src/styles.css קובץ כדי להסיר את שולי ברירת המחדל והריפודים.
```
html { 
  margin: 0; 
  padding: 0; 
}
```

כיצד להפעיל אפליקציית אלקטרונים

כדי להפעיל את היישום שלך בחלון, הגדר פקודה במערך הסקריפטים של package.json. לאחר מכן, הפעל את האפליקציה שלך באמצעות הפקודה בטרמינל.

ב package.json , בתוך מערך הסקריפטים, הוסף פקודה לבניית אפליקציית Angular ולהפעיל את Electron. הקפד להוסיף פסיק אחרי הערך הקודם במערך הסקריפטים.
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
כדי להפעיל את יישום ה-Angular החדש שלך בחלון שולחן העבודה, הפעל את הדברים הבאים בשורת הפקודה, בתיקיית השורש של הפרויקט שלך:
```
npm run electron
```
המתן עד שהיישום שלך יקמפל. לאחר השלמתו, במקום אפליקציית Angular שלך תיפתח בדפדפן האינטרנט, במקום זאת ייפתח חלון שולחן עבודה. חלון שולחן העבודה יציג את התוכן של אפליקציית Angular שלך.
אם אתה עדיין רוצה להציג את היישום שלך בדפדפן האינטרנט, אתה עדיין יכול להפעיל את הפקודה ng serve.
```
ng serve
```
אם אתה משתמש ב- של לשרת הפקודה, התוכן של האפליקציה שלך עדיין יוצג בדפדפן אינטרנט ב- מארח מקומי: 4200.

בניית יישומי שולחן עבודה עם אלקטרון

אתה יכול להשתמש באלקטרון כדי לבנות יישומי שולחן עבודה ב-Windows, Mac ו-Linux. כברירת מחדל, אתה יכול לבדוק יישום Angular באמצעות דפדפן אינטרנט באמצעות הפקודה ng serve. אתה יכול להגדיר את יישום Angular שלך כך שייפתח גם בחלון שולחן עבודה במקום בדפדפן אינטרנט.

אתה יכול לעשות זאת באמצעות קובץ JavaScript. תצטרך גם להגדיר את הקבצים index.html ו-package.json שלך. היישום הכולל עדיין יפעל באותו מבנה כמו יישום Angular רגיל.

אם ברצונך ללמוד עוד על בניית יישומי שולחן עבודה, תוכל גם לחקור את יישומי Windows Forms. יישומי Windows Forms מאפשרים לך ללחוץ ולגרור רכיבי ממשק משתמש על קנבס תוך הוספת כל היגיון קידוד לקבצי C#.