הגדרת הסביבה ודף ה-HTML#

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

דוגמה זו משתמשת ב-Vite — כלי מודרני לבניית צד הלקוח (frontend), שאינו תלוי ב-framework: ניתן להשתמש ב-React, ב-Vue, ב-Vanilla JS או בכל דבר אחר עבור הפרויקט שלכם.

התקנת Node.js#

תחילה יש להתקין את Node.js עם מנהל החבילות npm, שיידרש להתקנת Vite. ניתן להוריד את Node.js עבור המערכת שלכם מהאתר הרשמי.

יצירת פרויקט Vite#

פתחו את הטרמינל והריצו את הפקודות הבאות

npm create vite@latest my-simple-app

כאשר תתבקשו לבחור framework, בחרו "Vanilla" עבור פרויקט ללא framework ממשק מסוים.

cd my-simple-app
npm install

יצרתם פרויקט Vite חדש.

מבנה הפרויקט#

מבנה הפרויקט שלכם ייראה בערך כך:

my-simple-app/
├── index.html
├── main.js
├── style.css
├── vite.config.js
└── package.json

• index.html: קובץ ה-HTML הראשי של האתר
• main.js: קובץ ה-JavaScript הראשי עם הסקריפטים שלכם
• style.css: קובץ ה-CSS לעיצוב
• vite.config.js: קובץ התצורה של Vite

כדי ליצור את האתר, יש ליצור קבצי index.html ו-main.js מינימליים

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Simple App</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <h1>Hello, Vite!</h1>
  <p>This is a simple project without any frameworks.</p>
  <script type="module" src="/main.js"></script>
</body>
</html>

וגם main.js:

document.addEventListener('DOMContentLoaded', () => {
  console.log('JavaScript is working!');
});

ניתן גם להגדיר את style.css ולהוסיף סקריפטים ל-main.js.

כדי ליצור גרסה להפצה, הריצו:

npm run build

קישורים נוספים לשימוש ב-Vite#

ללימוד מעמיק יותר של Vite, היעזרו במקורות הבאים:

• התיעוד הרשמי של Vite
• Vite עבור Vanilla JS

הסביבה מוכנה — כעת התקינו את הספרייה.