איך לבנות Astro.js backend? מדריך צעד אחר צעד.

Astro.js הוא ג’נרטור אתרים סטטי (SSG) ומסגרת פרונטאנד לבניית אפליקציות ווב מהירות ומודרניות.

הוא מאפשר לכם ליצור אתרים מהירים וקלי-משקל על ידי רינדור מוקדם של קבצי HTML, CSS ו-JavaScript סטטיים בשלב הבנייה.

בשונה מ-SSG מסורתיים, Astro.js מאפשר גם “הידרציה” (hydration) של הדפים הסטטיים בעזרת JavaScript בזמן הריצה, ומעניק לכם את הגמישות ליצור אתרים דינמיים ואינטראקטיביים.

מאמר זה מציג מדריך מקיף על אופן בניית אפליקציה ב-Astro.js בשילוב Back4app כ-Backend as a Service (BaaS).

הוא יספק סקירה כללית של Astro.js, יתרונותיו והמגבלות שלו, וכן מדריך שלב-אחר-שלב כיצד לבנות ולאחסן אפליקציית Astro.js.

יתרונות של Astro.js

Astro.js מונע על ידי מספר תכונות עיקריות שהופכות אותו לבחירה מצוינת עבור בניית אתרים מודרניים, ביניהן:

ארכיטקטורת “Island”

ארכיטקטורת “Island” היא תבנית בארכיטקטורת ווב שבה מפרקים דף אינטרנט לאיים מבודדים ועצמאיים של פונקציונליות.

כל “אי” יכול להיות מיוצג על ידי רכיב אחד, קבוצת רכיבים, או אפילו עמוד שלם.

Astro.js מפרק את ממשק המשתמש (UI) למרכיבים קטנים ומבודדים המכונים “Astro Islands”. ניתן להשתמש ב”איים” האלה בכל עמוד, ובכך להחליף קוד JavaScript לא בשימוש ב-HTML קליל.

לארכיטקטורת “Island” יש מספר יתרונות, ביניהם ביצועים משופרים, גמישות מוגברת ופיתוח פשוט יותר.

JavaScript מינימלי

Astro מאמץ גישה של “פחות JavaScript”. הוא שולח JavaScript ללקוח רק כשנחוץ לצורך אינטראקטיביות. זה מסייע בהקטנת גודל הבאנדל של JavaScript ומשפר את זמני הטעינה.

השימוש ב-JavaScript מינימלי ב-Astro.js מספק כמה יתרונות מוחשיים, ביניהם שיפור בביצועי האתר, SEO משופר, צריכת משאבים מופחתת, אבטחה משופרת וחוויית משתמש תגובתית יותר.

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

אינטגרציה עם פריימוורקים פופולריים

ניתן להשתמש ב-Astro.js יחד עם פריימוורקים פופולריים שונים של JavaScript, ביניהם React, Svelte, Vue ו-Lit.

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

גמישות ותאימות אלה הופכות את Astro.js לבחירה אטרקטיבית למגוון רחב של פרויקטים.

טעינה אופטימלית

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

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

מגבלות של Astro.js

ל-Astro.js יש מספר מגבלות שכדאי להכיר. להלן כמה מהן:

התאמה לאקו-סיסטמה

Astro.js תוכנן לעבוד עם פריימוורקי פרונטאנד פופולריים כגון React, Svelte ו-Vue.js. עם זאת, האקו-סיסטמה שלו פחות בוגרת מאשר פריימוורקים כמו React או Vue, ולכן ייתכן שתמצאו פחות ספריות ורכיבים של צד שלישי שנבנו במיוחד עבור Astro.

צורך בהיכרות עם פריימוורקים

Astro.js מאפשר שימוש במספר פריימוורקי פרונטאנד, ולכן נדרשת היכרות עם כל פריימוורק שנבחר.

היקף הידע הנדרש יכול להיות מרתיע עבור מפתחים המתמחים בפריימוורק אחד או חדשים בתחום הפיתוח לווב.

עבודה על פרויקט המצריך שימוש במספר פריימוורקים דורשת שמירה על עקביות בין כל הפריימוורקים השונים.

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

למידת אופטימיזציה

“למידת אופטימיזציה” מתייחסת להבנה ויישום אסטרטגיות ספציפיות למקסום הביצועים של אפליקציות ווב הנבנות עם פריימוורק.

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

בניית אפליקציית היומן

בעזרת המדריך הזה, תבנו אפליקציית יומן בסיסית באמצעות פריימוורק Astro.js יחד עם React.js.

אפליקציית היומן תציע יכולות CRUD (יצירה, קריאה, עדכון, מחיקה) ותשתמש ב-Back4app לאחסון ואחזור נתונים.

ניתן ליצור פרויקט Astro.js על ידי הרצת הפקודה הבאה במסוף (terminal):

npm create astro@latest

הפקודה לעיל תייצר פרויקט Astro.js בסיסי ותלווה אתכם בהגדרת האפליקציה, כולל הגדרות כגון שימוש ב-TypeScript ורמת הקשיחות שלו.

כדי להוסיף React.js לפרויקט Astro.js שלכם, הריצו את הפקודה הבאה במסוף:

npx astro add react

כעת הפרויקט שלכם מוכן. תוכלו להתחיל לפתח את האפליקציה בעורך הקוד המועדף עליכם. ראשית, הגדירו את הסגנונות הגלובליים (global styles) ואת תבנית הפריסה (layout) של האפליקציה.

כדי להגדיר את הסגנונות הגלובליים שלכם, צרו תיקיה בשם styles בתוך תיקיית src. בתוך התיקייה styles, צרו קובץ בשם global.css והגדירו בו את הסגנונות הגלובליים שלכם.

לדוגמה:

כעת, לאחר שהסגנונות הגלובליים מוכנים, הגיע הזמן להגדיר את תבנית הפריסה. תוכלו למצוא קובץ בשם Layout.astro בתוך התיקייה layouts בתיקיית src.

החליפו את הקוד הקיים בקובץ Layout.astro בקוד הבא:

קטע הקוד שלמעלה מייצג את רכיב הפריסה (layout). הוא מייבא את הסגנונות הגלובליים, מגדיר מידע מטא, ומספק מקום לתוכן דינמי באמצעות אלמנט slot.

התוכן העיקרי של הרכיב הוא כותרת h1 בעלת עיצוב ספציפי המוגדר בתג style.

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

כדי ליישם את הפריסה בעמוד הבית שלכם, חזרו על אותם שלבים בקובץ index.astro שנמצא בתוך תיקיית src/pages.

לדוגמה:

קטע קוד זה מגדיר את עמוד הבית של האפליקציה. הוא מגדיר תפריט ניווט עם קישור לעמוד “/journal” ומחיל סגנונות ספציפיים כדי למרכז ולרווח את אלמנט הניווט.

כדי ליצור את עמוד היומן, צרו קובץ בשם journal.astro בתוך תיקיית src/pages והוסיפו אליו את קטע הקוד הבא.

קטע הקוד שלמעלה מייצג את עמוד היומן של האפליקציה. הוא מייבא את רכיב הפריסה ועוטף את קטע ה-HTML כדי לספק מבנה עמוד עקבי.

הקוד גם מגדיר טופס לקליטת רשומות יומן, כולל שדות קלט עבור כותרת ותוכן, וכן כפתור “Log”. הסגנונות ב-CSS המוגדרים בתג ה-style שולטים במראה הטופס ואלמנטיו.

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

npm run dev

הפקודה לעיל תספק לכם קישור לכתובת http://localhost:4321/. גשו לכתובת זו בדפדפן כדי לצפות באפליקציה שלכם.

עמוד הבית אמור להיראות כך:

כדי לצפות בעמוד היומן, לחצו על קישור הניווט “Log your experience.”

אינטגרציה של Back4app עם האפליקציה שלכם

Back4App היא פלטפורמת Backend בענן שנועדה לייעל את תהליך הפיתוח וניהול האפליקציות, וכאן נעשה בה שימוש כ-backend עבור Astro.js.

באמצעות Parse Server framework בקוד פתוח, היא מספקת מערך כלים חזק המאפשר למפתחים להתמקד בפיתוח הפרונטאנד תוך פישוט המורכבות בצד הבקאנד.

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

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

יצירת חשבון Back4app

כדי לשלב את התכונות ש-Back4app מציעה באפליקציות שלכם, עליכם לפתוח חשבון ב-Back4app. ניתן ליצור חשבון באמצעות הצעדים הבאים:

1. גשו ל-אתר Back4app.
2. לחצו על כפתור “Sign up”.
3. מלאו את טופס ההרשמה ושלחו אותו.

היכרות עם התוסף Back4app ChatGPT

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

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

כדי לגשת לתוספי ChatGPT, עליכם להיות מנויים ל-ChatGPT Plus. לאחר ההרשמה, לחצו על כפתור “GPT-4” כדי לפתוח תפריט קופץ, ואז בחרו באפשרות “Plugins” כדי להמשיך.

רשימת תוספים זמינים תופיע על המסך. מצאו ובחרו את התוסף Back4app (הקלידו “Back4app” בשדה החיפוש).

יצירת אפליקציית Back4app בעזרת התוסף

יצירת אפליקציית Back4app באמצעות התוסף Back4app ב-ChatGPT היא משימה פשוטה. ספרו ל-ChatGPT על סוג האפליקציה שתרצו ליצור, והוא יטפל בכל השאר.

לדוגמה:

כפי שניתן לראות בתמונה למעלה, התוסף Back4app ChatGPT יוצר אפליקציית Back4app בשם “Journal application”.

כדי לאמת שהתוסף Back4app ChatGPT יצר את האפליקציה בהצלחה, גשו לאתר Back4app, התחברו לחשבון שלכם, ובדקו את רשימת האפליקציות. אתם אמורים לראות אפליקציה בשם “journal application” בין האפליקציות שלכם.

באמצעות התוסף, צרו מחלקת “journal” באפליקציית ה-“journal application”.

כפי שניתן לראות בתמונה למעלה, התוסף Back4app ChatGPT יוצר את מחלקת ה-journal ומוסיף שדות title, content ו-date.

הוספת נתונים לאפליקציית Back4app

באמצעות התוסף Back4app ChatGPT, תוכלו גם להוסיף נתונים מותאמים אישית לאפליקציה. לדוגמה, תוכלו להוסיף טקסט מותאם אישית לשדות title ו-content.

לאחר הוספת הטקסטים, גשו ללוח הבקרה של האפליקציה, לחצו על מחלקת ה-journal, ואמתו שהטקסט נוסף.

התחברות ל-Back4app

כדי לחבר את אפליקציית היומן שלכם לאפליקציית Back4app, עליכם להתקין את Parse JavaScript SDK באפליקציה שלכם.

לשם כך, הריצו את הפקודה הבאה במסוף:

npm install parse 

לאחר התקנת Parse JavaScript SDK, תזדקקו לפרטי החיבור Application ID ו-Javascript KEY.

תוכלו למצוא פרטים אלה בחלק Security & Keys בלוח הבקרה של אפליקציית Back4app שלכם. שמרו את ה-Application ID וה-Javascript KEY באופן מאובטח באפליקציה שלכם.

הוספת נתונים ל-Back4app מתוך האפליקציה

קודם במאמר, למדתם כיצד להוסיף נתונים ל-Back4app באמצעות התוסף Back4app ChatGPT. כדי לבצע זאת באמצעות אפליקציית היומן שלכם, תשתמשו ב-Parse Javascript SDK.

בקובץ journal.astro, הוסיפו את קטע הקוד הבא:

קטע הקוד הזה מייצג סקריפט JavaScript שמשתלב עם Parse כדי ליצור ולשמור רשומות יומן. הוא מייבא את הגרסה המינימלית של Parse מ-parse/dist/parse.min.js וקורא למתודה initialize.

מתודה זו מקבלת כארגומנטים את פרטי החיבור Application_ID ו-Javascript_KEY. לאחר הקריאה למתודה initialize ב-Parse, הגדירו את מאפיין serverURL של Parse לכתובת https://parseapi.back4app.com/.

הקוד בוחר את אלמנטי input, textarea וכפתור (button) מה-DOM ומשייך אותם למשתנים title, body ו-button.

שדה ה-input מקבל את הכותרת של רשומת היומן, ושדה ה-textarea מקבל את גוף הרשומה.

הפונקציה addJournal מכילה את הלוגיקה הדרושה להוספת נתונים למסד הנתונים ב-Back4app. היא יוצרת מופע חדש של אובייקט Journal, מגדירה את המאפיינים title ו-content לערכים של אלמנטי input ו-textarea, ושומרת אותו ב-Back4app.

באמצעות המתודה addEventListener, הקוד מוסיף “מאזין אירוע” לכפתור, כך שלחיצה עליו תפעיל את הפונקציה addJournal.

שליפת נתונים מ-Back4app

כדי לשלוף נתונים מ-Back4app ולהציגם באפליקציה שלכם, תשתמשו ברכיב React. צרו קובץ Journal.tsx בתיקייה src/components. בתוך הקובץ, ייבאו ואתחלו את ספריית Parse.

לדוגמה:

לאחר מכן, הגדירו את אלמנטי ה-JSX של הרכיב:

לאחר מכן, צרו state עבור היומן והגדירו פונקציה המכילה את הלוגיקה לשליפת נתונים מ-Back4app.

לדוגמה:

באמצעות המתודה Parse.Query, הפונקציה fetchJournal משתמשת ב-Parse SDK כדי ליצור שאילתה (query) לשליפת נתונים ממחלקת Journal.

המתודה find של אובייקט השאילתה מחזירה מערך הכולל את תוצאות השאילתה, והפונקציה setJournal מעדכנת את ה-state הנקרא journal בנתונים שהתקבלו.

קוד זה משתמש בהוק useEffect כדי להפעיל תופעות צד (side effects) בתוך הרכיב. הוא קורא לפונקציה fetchJournal כדי לשלוף נתונים בעת טעינת הרכיב. כעת, בתוך הרכיב, הציגו את תוכן ה-state בשם journal.

לדוגמה:

קטע הקוד שלמעלה מציג את רשימת רשומות היומן כאוסף אלמנטי div, כאשר כל אלמנט כולל תוכן ספציפי וכפתור “Delete” ייעודי.

הקוד מציג את הכותרת והתוכן של כל רשומת יומן בתוך תגי h3 ו-p, וכן כולל כפתור “Delete” המאפשר למשתמשים להסיר את הרשומות בקלות.

כדי לעצב את אלמנטי ה-JSX שהגדרתם ברכיב היומן, הוסיפו את הסגנונות הבאים לקובץ global.css שלכם:

כעת, הציגו את רכיב היומן בעמוד הבית שלכם. לשם כך, החליפו את הקוד הקיים בקובץ index.astro בקטע הקוד הבא:

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

מחיקת נתונים מ-Back4app

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

לדוגמה:

הפונקציה deleteJournal יוצרת מופע חדש של אובייקט Journal באמצעות המתודה Parse.Object.extend. לאחר יצירת האובייקט, היא מגדירה את מאפיין id של האובייקט לפרמטר id שהועבר לפונקציה.

לאחר מכן, הפונקציה קוראת למתודה האסינכרונית destroy של אובייקט “Journal” כדי למחוק את רשומת היומן עם ה-ID שהועבר מ-Back4app.

באמצעות המתודה filter, הפונקציה מסננת את רשומת היומן עם ה-id המצוין מתוך ה-state בשם journal, וכך נוצרת רשימה חדשה שאינה כוללת את הרשומה שנמחקה.

לבסוף, באמצעות המתודה setJournal, הפונקציה מעדכנת את ה-state journal עם המערך החדש.

כעת, חברו את הפונקציה deleteJournal לכפתור "Delete" באמצעות מנהל אירוע הלחיצה (click event). דבר זה יגרום לאלמנטי ה-JSX בקובץ Journal.tsx להיראות כך:

בדיקת האפליקציה

כעת, לאחר שסיימתם לבנות את האפליקציה, חשוב שתבדקו אותה. לשם כך, גשו למסוף (terminal), הריצו את שרת הפיתוח, וצפו באפליקציה בדפדפן שלכם.

האפליקציה אמורה להיראות כך:

לחצו על “Log your experience” כדי לעבור לעמוד היומן של האפליקציה ומלאו את שדות הקלט.

לאחר שמילאתם את שדות הקלט, לחצו על “Log” כדי להוסיף את הנתונים למסד הנתונים של Back4app. חזרו לעמוד הבית.

כעת, כדי לבדוק אם אתם יכולים למחוק רשומה, לחצו על כפתור המחיקה של רשומת “My First Day Journaling”. עמוד הבית שלכם אמור להיראות כעת כמו בתמונה למטה.

סיכום

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

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

למידע נוסף, מומלץ לקרוא את המדריך How to create a backend for Astro.js.