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

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

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

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

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

  1. הורד והתקן node.js. אתה יכול לאשר שהתקנת אותו כהלכה על ידי בדיקת הגרסה:
    node -v
    צומת כולל גם npm, מנהל החבילות של JavaScript. אתה יכול לאשר שהתקנת את npm על ידי בדיקת גרסת npm:
    npm -v
  2. צור יישום Angular חדש באמצעות ה חדש פקודה. פעולה זו תיצור תיקיה המכילה את כל הדרוש קבצים הנדרשים עבור פרויקט Angular לעבוד.
    ng חָדָשׁ אפליקציית אלקטרונים
    3. instagram viewer
  3. בתיקיית השורש של היישום שלך, השתמש npm להתקנת אלקטרון.
    npm להתקין save-dev אלקטרון
  4. פעולה זו תיצור תיקיה חדשה עבור Electron בתיקיית node_modules של האפליקציה.
  5. אתה יכול גם להתקין את Electron באופן גלובלי במחשב שלך.
    npm להתקין -g אלקטרון

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

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

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

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

<!doctype html>
<html lang="he">
<רֹאשׁ>
<מטא תווים ="utf-8">
<כותרת> ElectronApp </title>
<בסיס href="./">
<מטא שם="נקודת מבט" תוכן="רוחב=רוחב התקן, קנה מידה התחלתי=1">
<קישור rel="סמל" סוג="תמונה/סמל x" href="favicon.ico">
</head>
<גוּף>
<app-root></app-root>
</body>
</html>

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

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

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

  1. צור קובץ בשורש הפרויקט שלך בשם main.js. בקובץ זה, אתחול אלקטרון כך שתוכל להשתמש בו כדי ליצור את חלון היישום.
    const { app, BrowserWindow } = לִדרוֹשׁ('אֶלֶקטרוֹן');
  2. צור חלון שולחן עבודה חדש ברוחב וגובה מסוימים. טען את קובץ האינדקס כתוכן שיוצג בחלון. ודא שהנתיב לקובץ האינדקס תואם לשם האפליקציה שלך. לדוגמה, אם קראת לאפליקציה שלך "electron-app", הנתיב יהיה "dist/electron-app/index.html".
    פוּנקצִיָהcreateWindow() {
     לנצח = חָדָשׁ BrowserWindow({רוֹחַב: 800, גוֹבַה: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. כאשר האפליקציה מוכנה, קרא לפונקציה createWindow(). פעולה זו תיצור את חלון היישום עבור האפליקציה שלך.
    app.whenReady().then(() => {
     createWindow()
    })
  4. בתוך ה src/index.html קובץ, ב- בסיס תג, שנה את תכונת href ל-"./".
    <בסיס href="./">
  5. ב package.json, הוסף רָאשִׁי וכלול את קובץ main.js בתור הערך. זו תהיה נקודת הכניסה של האפליקציה, כך שהאפליקציה תפעיל את קובץ main.js תוך כדי הפעלת האפליקציה.
    {
    "שֵׁם": "אפליקציית אלקטרונים",
    "גִרְסָה": "0.0.0",
    "רָאשִׁי": "main.js",
     ...
    }
  6. בתוך ה .browserslistrc קובץ, שנה את הרשימה כדי להסיר iOS safari גרסאות 15.2-15.3. זה ימנע שגיאות תאימות להופיע במסוף בעת ההידור.
    גרסת Chrome 1 האחרונה
    גרסת Firefox 1 האחרונה
    2 הגרסאות העיקריות של Edge האחרונות
    2 הגרסאות העיקריות האחרונות של Safari
    2 הגרסאות העיקריות האחרונות של iOS
    Firefox ESR
    לֹאios_saf 15.2-15.3
    לֹאספארי 15.2-15.3
  7. מחק את תוכן ברירת המחדל ב- src/app/app.component.html קוֹבֶץ. החלף אותו בתוכן חדש.
    <div class="תוֹכֶן">
    <div class="כַּרְטִיס">
    <h2> בית </h2>
    <ע>
     ברוכים הבאים לאפליקציית Angular Electron שלי!
    </p>
    </div>
    </div>
  8. הוסף קצת סטיילינג לתוכן ב- src/app/app.component.css קוֹבֶץ.
    .תוֹכֶן {
     גובה קו: 2rem;
    גודל גופן: 1.2em;
     שוליים: 48px 10%;
     font-family: Arial, sans-serif
    }
    .כַּרְטִיס {
    צל קופסא: 0 4פיקסלים 8פיקסלים 0 rgba(0, 0, 0, 0.2);
     רוחב: 85%;
     ריפוד: 16px 48px;
     שוליים: 24px 0px;
     צבע רקע: עשן לבן;
     font-family: sans-serif;
    }
  9. הוסף קצת סטיילינג כללי ל src/styles.css קובץ כדי להסיר את השוליים והריפודים המוגדרים כברירת מחדל.
    html {
     שוליים: 0;
     ריפוד: 0;
    }

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

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

  1. ב package.json, בתוך מערך הסקריפטים, הוסף פקודה לבניית אפליקציית Angular ולהפעיל את Electron. הקפד להוסיף פסיק אחרי הערך הקודם במערך הסקריפטים.
    "תסריטים": {
     ...
    "אֶלֶקטרוֹן": "לבנות && אלקטרון ."
    },
  2. כדי להפעיל את יישום Angular החדש שלך בחלון של שולחן העבודה, הפעל את הדברים הבאים בשורת הפקודה, בתיקיית השורש של הפרויקט שלך:
    npm ריצה אלקטרון
  3. המתן עד שהיישום שלך יקמפל. לאחר השלמתו, במקום אפליקציית Angular שלך תיפתח בדפדפן האינטרנט, במקום זאת ייפתח חלון שולחן עבודה. חלון שולחן העבודה יציג את התוכן של אפליקציית Angular שלך.
  4. אם אתה עדיין רוצה להציג את היישום שלך בדפדפן האינטרנט, אתה עדיין יכול להפעיל את הפקודה ng serve.
    לשרת
  5. אם אתה משתמש ב- לשרת הפקודה, התוכן של האפליקציה שלך עדיין יוצג בדפדפן אינטרנט ב- מארח מקומי: 4200.

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

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

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

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