איך לבנות REST API? מדריך שלב אחר שלב

REST API Cover

מאמר זה מספק הקדמה ל-APIs, ובמיוחד ל-RESTful APIs. נבחן את היתרונות, המגבלות והאלטרנטיבות שלהם. בנוסף, נציג כיצד לבנות REST API באמצעות Back4app — אחד מספקי ה-BaaS הטובים ביותר.

מהו API?

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

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

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

מה ההבדלים בין API ל-SDK?

כפי שהוזכר לעיל, API הוא סט כללים שמגדיר כיצד שני מכשירים או מערכות יכולים לתקשר. מצד שני, ערכת פיתוח תוכנה (SDK) היא אוסף של כלים, ספריות ותיעוד שעוזרים למפתחים לבנות תוכנה לפלטפורמה מסוימת (למשל Windows, Web, Android, iOS).

SDKs לעיתים קרובות משתמשים ב-APIs שונים מאחורי הקלעים. נבחן דוגמה מעשית בחלק השני של המאמר.

מהו REST?

הגישת ארכיטקטורת תוכנה שנקראת Representational State Transfer (REST) מאפיינת את מסגרת האינטרנט. היא אינה מהווה פרוטוקול או תקן, מה שמאפשר מגוון שיטות יישום על ידי מפתחים. רוי פילדינג הציג את REST בשנת 2000, והוא משמש כתקן הדומיננטי ליצירת APIs לאינטרנט כבר יותר מעשר שנים.

REST מבוסס על פרוטוקול HTTP ומשתמש בשיטות HTTP שונות כגון GET, POST, PUT, ו-DELETE כדי ל-Manipulate את המשאבים. פעולות אלה נקראות לעיתים CRUD (Create, Retrieve, Update, Delete). REST תומך בפורמטים נתונים שונים כולל JSON, HTML, XLT, Python, JavaScript, וכדומה. פורמט הנתונים הנפוץ ביותר הוא JSON.

כדי ש-API ייחשב כ-RESTful הוא חייב לעמוד בששת המגבלות הבאות:

  1. ארכיטקטורת לקוח ושרת — רכיבי הלקוח והשרת צריכים להיות מופרדים.
  2. ללא מצב — אפליקציות השרת אינן רשאיות לאחסן נתוני לקוח בין בקשות.
  3. קאשביליות — כאשר אפשרי, המשאבים צריכים להיות קאשביליים בצד הלקוח או השרת.
  4. מערכת שכבתית — APIs צריכים לאפשר מתווכים, אך זה לא צריך להשפיע על הלקוח.
  5. ממשק אחיד — הממשק בין השרת ללקוח צריך להיות אחיד.
  6. קוד על פי דרישה (אופציונלי) — מאפשר לשרת לשלוח קוד מבוצע ללקוח.

ההבדל בין REST ל-RESTful הוא ש-REST מתייחס לסט המגבלות, בעוד ש-RESTful מתייחס ל-API שעומד במגבלות אלה.

איך APIs RESTful פועלים?

APIs RESTful פועלים באופן דומה לדפדפנים. ההבדל העיקרי הוא שדפדפנים משתמשים ב-HTTP כדי לבקש דפי אינטרנט ומשאבים אחרים משרתים, בעוד ש-APIs RESTful משתמשים ב-HTTP כדי לבקש ול-Manipulate משאבי נתונים.

קריאה טיפוסית ל-API RESTful עוקבת אחרי השלבים הבאים:

  1. הלקוח שולח בקשה לשרת.
  2. השרת מאמת את הלקוח ובודק אם יש לו הרשאות מספקות לבקשה.
  3. השרת מעבד את הבקשה, למשל מבצע חישובים, ומביא נתונים מהמסד נתונים.
  4. השרת מחזיר תגובה ללקוח.
  5. הלקוח מעבד את התגובה.

השלבים עשויים להשתנות בהתאם ליישום ה-API. ההוראות כיצד להשתמש ב-API מוגדרות בהתייחסות ה-API (או בתיעוד ה-API).

מבנה הבקשה

בקשה מכילה את האלמנטים הבאים:

מאפייןתיאור
URIמגדיר איזה משאב השרת צריך ל-Manipulate. ה-URL יכול גם להכיל פרמטרי שאילתה לסינון או מיון התוצאות.
שיטת HTTPמספרת לשרת מה לעשות עם המשאב הזה. לדוגמה GET מחזיר את המשאב, POST מוסיף משאב חדש, PUT מעדכן משאב קיים, ו-DELETE מוחק את המשאב.
Headers (אופציונלי)מכיל מטא-נתונים על הבקשה, כגון מידע אימות, עוגיות, סוכן משתמש, וסוג התוכן.
Body (אופציונלי)מכיל מידע נוסף לביצוע הפעולה המבוקשת.

בקשה לדוגמה נראית כך:

REST API Request Example

מבנה התגובה

תגובה מכילה את האלמנטים הבאים:

מאפייןתיאור
קוד סטטוסקודי הסטטוס מגדירים האם הבקשה הצליחה (2xx) או לא (4xx, 5xx).
Headersמכילים מטא-נתונים על התגובה, כגון זמן השרת, אורך התוכן וסוג התוכן. בנוסף, השרת יכול להשתמש ב-Set-Cookie כדי להגדיר עוגיות על הלקוח.
Bodyמכיל את ייצוג המשאב. פורמט הייצוג מבוסס על ה-Content-Type של הבקשה (למשל application/json).

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

REST API Response Example

מהם היתרונות של APIs RESTful?

סקלאביליות

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

פורמטים נתונים מרובים

APIs RESTful יכולים להחזיר נתונים בפורמטים שונים בהתבסס על Headers של הבקשה של הלקוח. זה הופך אותם לגמישים מאוד וקלים לשילוב במערכות קיימות. הנתונים יכולים להיות מוחזרים בפורמט JSON, XLT, Python, HTML, JavaScript, וכדומה.

יעילות

APIs RESTful הם קלים ויש להם עומס נמוך יותר מ-SOAP (Simple Object Access Protocol). זה הופך אותם למהירים ויעילים בטיפול בבקשות. API RESTful טיפוסי יכול לטפל בין 10,000 ל-15,000 בקשות בשנייה.

עצמאות פלטפורמה

יתרון נוסף של APIs RESTful הוא שהשרת והלקוח הם לחלוטין עצמאיים. זה מאפשר למפתחים ליישם APIs RESTful ולקוחות בכמה שפות תכנות כמו Java, JavaScript, Python, ועוד!

קל להבנה

מאחר ש-REST מבוסס על HTTP, הוא מאוד קל להבנה. רוב המפתחים כמעט בוודאי עבדו או יישמו API RESTful לפחות פעם אחת.

מהם המגבלות של APIs RESTful?

משיכת נתונים עודפת וחסרה

אחת הבעיות הגדולות ביותר של APIs RESTful היא משיכת נתונים עודפת וחסרה. עודפת נתונים מתרחשת כאשר מוחזרים יותר נתונים ממה שנדרש ומשיכת נתונים חסרה מתרחשת כאשר לא מוחזרים מספיק נתונים (זה בעיקר בעת טיפול בקשרים).

אין מנויים לנתונים בזמן אמת

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

אין מערכת גרסאות

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

כדי לפתור את הבעיות הנ”ל צצו כמה אלטרנטיבות ל-REST. כמה מהפופולריות ביותר כוללות Simple Object Access Protocol (SOAP), GraphQL, ו-gRPC.

מהם שיטות האימות של RESTful?

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

  • אימות HTTP
  • מפתחות API
  • OAuth 2.0
  • OpenID Connect
  • JWT Authentication

רוב השיטות הללו דורשות מהלקוח לשלוח את האישורים שלו או את מפתח ה-API שלו ב-Headers של הבקשה. יש לשקול שיטות אימות שונות כאשר מתחילים פרויקט.

איך לבנות API RESTful?

חלק זה של המאמר בוחן בניית API RESTful באמצעות Back4app וקביעת חיבור עם ממשק קדמי Next.js.

דרישות מוקדמות

  • ניסיון עם JavaScript ES6
  • ניסיון עם React ו-Next.js
  • הבנה בסיסית של REST

מהו Back4app?

Back4app הוא פתרון BaaS – Backend as a Service מדהים. הוא משתמש בתוכנה בקוד פתוח ומציע הרבה תכונות שיעזרו למפתחים ליצור אפליקציות מובייל ואינטרנט במהירות רבה יותר. זה מאפשר לעסקים להתמקד בלוגיקת העסק שלהם, מבלי לדאוג לתשתית הענן.

כולל לוח בקרה ידידותי למשתמש וממשק שורת פקודה, הפלטפורמה מציעה ערכות פיתוח תוכנה (SDKs) תואמות לכלים בשימוש רחב כמו Node.js, Flutter, React Native, Android, Angular, ו-iOS.

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

כדי לדעת יותר על Back4app, אנא קראו מהו Back4app?

הקדמת הפרויקט

במאמר זה, נבנה אפליקציית אינטרנט פשוטה לבלוג. האפליקציה תאפשר עורכים להוסיף מאמרים ומשתמשים לקרוא אותם. האפליקציה תהיה מורכבת משני חלקים: ה-Backend (מבוסס REST) וה-Frontend. עבור ה-Backend, נשתמש ב-Back4app ועבור ה-Frontend, נשתמש ב-React עם Next.js.

Back4app REST App Preview

Backend

יצירת אפליקציה ב-Back4app

השלבים הבאים דורשים שתהיה לך חשבון ב-Back4app. המשך וה-התחבר או צור חשבון אם אין לך עדיין.

גש ללוח הבקרה של Back4app ויצר אפליקציה חדשה על ידי לחיצה על “Build new app”.

Back4app Build New App

בחר “Backend as a Service (BaaS)”, תן שם מותאם אישית, ובחר “NoSQL Database” כבסיס הנתונים שלך. לבסוף, לחץ על “Create” כדי להתחיל בתהליך יצירת האפליקציה.

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

Back4app Dashboard

הגדרת מחלקות מסד נתונים

בהמשך, נגדיר את מחלקות מסד הנתונים.

יהיו לנו את שתי המחלקות הבאות:

  1. ArticleCategory מייצגת קטגוריית מאמר (למשל בלוקצ’יין, AI, תכנות)
  2. Article מייצגת מאמר. למאמר יכולה להיות מספר קטגוריות (M:N).

כדי ליצור מחלקה, גש ללוח הבקרה של Back4app ובחר “Database” בסרגל הצד. לאחר מכן לחץ על “Create a class”, שם אותה ArticleCategory והפעל את “Public Read and Write”.

בעת המעבר לייצור, עליך לכבות את “Public Read and Write” ולהחמיר את האבטחה עם ACLs ו-CLPs. למידע נוסף עיין ב-אבטחת Parse Server.

Back4app Define Class

כעת, הוסף את השדות הבאים:

+-----------------------------+-----------------+--------------------+-------------+
| Data type                   | Name            | Default value      | Required    |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | name            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | slug            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | description     | <leave blank>      | no          |
+-----------------------------+-----------------+--------------------+-------------+

בצע את אותם השלבים עבור המחלקה השנייה בשם Article. הוסף את השדות הבאים:

+-----------------------------+-----------------+--------------------+-------------+
| Data type                   | Name            | Default value      | Required    |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | title           | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | slug            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | shortContent    | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | content         | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| Relation -> ArticleCategory | categories      | <leave blank>      | no          |
+-----------------------------+-----------------+--------------------+-------------+

מעולה, זה הכל.

מילוי מסד נתונים

בשלבים הבאים כאשר נבדוק את ה-API נצטרך כמה נתונים לעבוד איתם. המשך ומלא את מסד הנתונים בקטגוריות מאמרים ודוגמאות מאמרים.

כדי להוסיף ArticleCategory חדשה, בחר אותה בסרגל הצד ולחץ על “Add a row”.

Back4app Create Row

אתה יכול להשתמש בקטגוריות המאמרים האלה או להמציא כאלה משלך:

+------------+------------+---------------------------------------------------------+
| name       | slug       | description                                             |
+------------+------------+---------------------------------------------------------+
| Blockchain | blockchain | Blockchain, crypto & more!                              |
+------------+------------+---------------------------------------------------------+
| AI         | ai         | Artificial intelligence, LLMs, stable diffusion.        |
+------------+------------+---------------------------------------------------------+

אתה יכול גם להשתמש ב-ChatGPT ליצירת נתונים לדוגמה. כדי ללמוד עוד על ChatGPT, בדוק את המאמר איך להשתמש ב-ChatGPT לבניית אפליקציה?

עשה את אותו הדבר עבור המחלקה Article:

+------------------+---------------+--------------+---------+-----------------------+
| title            | slug          | shortContent | content | categories            |
+------------------+---------------+--------------+---------+-----------------------+
| Beyond Crypto    | beyond-crypto | ...          | ...     | <blockchain.objectId> |
+------------------+---------------+--------------+---------+-----------------------+
| The Rise of AI   | rise-of-ai    | ...          | ...     | <ai.objectId>         |
+------------------+---------------+--------------+---------+-----------------------+
| What is ChatGPT? | chatgpt       | ...          | ...     | <ai.objectId>         |
+------------------+---------------+--------------+---------+-----------------------+

ודא להחליף <blockchain.objectId> ו-<ai.objectId> עם ה-objectId האמיתי של ArticleCategory. במקרה שלי, אלו הם SxS0yiWDij ו-Hf8yBDTO79 (הדמות למעלה לעיון).

REST API

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

קונסולת REST API

כדי לבדוק את ה-API, גש ללוח הבקרה של Back4app ובחר “API > Console > REST” בסרגל הצד. לאחר מכן בחר GET כסוג הבקשה, ו-classes/Article כנקודת הקצה. לבסוף, לחץ על “Send Query” בפינה התחתונה הימנית של המסך לשליחת הבקשה.

Back4app REST Console

בקשה זו תחזיר את כל המאמרים במסד הנתונים שלך. אתה אמור לקבל תגובה דומה:

{
   "results":[
      {
         "objectId": "yEaR8K44il",
         "title": "Beyond Crypto",
         "slug": "beyond-crypto",
         "shortContent": "...",
         "content": "...",
         "createdAt": "2023-04-17T14:26:19.016Z",
         "updatedAt": "2023-04-17T14:26:30.922Z",
         "categories": {
            "__type": "Relation",
            "className": "ArticleCategory"
         }
      },
      {
         "objectId": "l46nMkHElH",
         "title": "What is ChatGPT?",
         "slug": "chatgpt",
         "shortContent": "...",
         "content": "...",
         "createdAt": "2023-04-17T14:27:34.931Z",
         "updatedAt": "2023-04-17T14:27:42.636Z",
         "categories": {
            "__type": "Relation",
            "className": "ArticleCategory"
         }
      }
      // ...
   ]
}

הקונסולה REST מאפשרת גם לבצע פעולות POST, PUT, ו-DELETE. בנוסף לכך, אתה יכול להשתמש בפרמטרי שאילתא של Parse כדי לסנן נתונים, לטפל בקשרים, ועוד.

לדוגמה, אם אתה רוצה למשוך מאמרים השייכים לקטגוריית “Blockchain” אתה יכול להשתמש בהצהרת where הבאה:

where={"categories": {
    "__type": "Pointer", "className": "ArticleCategory", "objectId": "<objectId>"
}}

ודא להחליף <objectId> עם ה-objectId של בלוקצ’יין.

ללמוד עוד על פרמטרי שאילתא על ידי בדיקת מדריך Parse REST API.

cURL

הקונסולה REST היא מעולה, אבל כשאתה עובד על אפליקציות אמיתיות תרצה גישה יותר מכוונת מתכנת לבקשות API. אחד הכלים שאתה יכול להשתמש בו הוא cURL – כלי שורת פקודה לפרוטוקולים שונים כמו HTTP, FTP, ו-SMTP.

פקודת cURL לדוגמה לרשימת קטגוריות המאמרים תיראה כך:

$ curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/ArticleCategory | jq

אתה יכול לקבל את המפתחות מ-“Back4app Dashboard > App Settings > Security & Keys”.

כפי שאתה יכול לראות, בשימוש ב-cURL עליך לציין את סוג השיטה HTTP ולספק את מזהה האפליקציה שלך ואת מפתח ה-REST API שלך. בנוסף לכך, אתה יכול להפנות את התגובה ל-jq כדי לעצב אותה אוטומטית ולהדגיש צבעים.

התייחסות API

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

כדי לגשת להתייחסות ה-API, בחר “Database” בסרגל הצד, והשתמש בשלוש הנקודות בפינה הימנית העליונה של המסך לראות את כל האפשרויות. לבסוף, בחר “API Reference”.

Back4app Access Documentation

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

Back4app Generated Docs

זה הכל עבור ה-Backend. בחלק הבא, נבחן כיצד ליישם Frontend שיכול לתקשר עם ה-Backend.

Frontend

כפי שהוזכר לעיל, נשתמש ב-React עם Next.js 13 לבניית ה-Frontend. באופן כללי, יש שלושה דרכים להתחבר ל-Backend מבוסס Parse מתוך Frontend JavaScript:

  1. על ידי שימוש ב-REST API (בקשות ותגובות HTTP)
  2. על ידי שימוש ב-GraphQL API (נכסה במאמר זה)
  3. על ידי שימוש ב-JavaScript SDK

עליך לבחור באופציה האחרונה או השנייה האחרונה. השימוש הישיר ב-REST API אינו מומלץ באפליקציות לקוח שיכולות להשתמש ב-SDKs של Parse (למשל JavaScript, Flutter, Android, iOS, Xamarin). זאת מכיוון ש-SDK של Parse מאפשר לך לכתוב קוד נקי יותר ופחות רגיש לשגיאות. מאחורי הקלעים, SDKs של Parse משתמשים ב-REST API.

יצירת אפליקציית Next

המשך ואתחל פרויקט Next.js באמצעות כלי create-next-app. פתח את הטרמינל שלך והרץ את הפקודה הבאה:

$ yarn create next-app

√ What is your project named? ... back4app-graphql
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use the `src/` directory with this project? ... No
√ Would you like to use the experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Successfully created a Next.js app.

לאחר מכן, הרץ את שרת הפיתוח:

$ yarn dev

גש אל http://localhost:3000 ואתה אמור לראות את דף הנחיתה של Next.js.

NextJS Default Landing Page

ChakraUI

כדי להקל על תהליך בניית UI/UX, נשתמש ב-ChakraUI. Chakra UI הוא ספריית רכיבים פשוטה, מודולרית וידידותית למשתמש שמספקת את כל האלמנטים הנדרשים לפיתוח אפליקציות React שלך.

במקרה שתיתקל בבעיות כלשהן, התייחס ל-ChakraUI: Getting started with Next.js.

תחילה התקן את Chakra ואת התלויות שלו על ידי הרצת:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

לאחר מכן, גש אל _pages/app.tsx ועטוף את האפליקציה שלך עם ChakraProvider כך:

// pages/_app.tsx

import "../styles/globals.css";
import {ChakraProvider, extendTheme} from "@chakra-ui/react";

export const theme = extendTheme({});

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

אל תשכח לייבא את ChakraProvider:

import {ChakraProvider} from "@chakra-ui/provider";

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

// pages/_document.js

import {ColorModeScript} from "@chakra-ui/react";
import { Html, Head, Main, NextScript } from "next/document";
import {theme} from "@/pages/_app";

export default function Document() {
  return (
    <Html lang='en'>
      <Head />
      <body>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

מעולה, התקנת בהצלחה את ChakraUI.

ממשק משתמש

בהמשך, ניישם את הממשק המשתמש. ניצור את שתי הדפים הבאים:

  1. / מציג את רשימת המאמרים
  2. /<articleSlug>/ מציג מאמר ספציפי

התחל עם האינדקס. החלף את תוכן pages/index.js עם הבא:

// pages/index.js

import {Card, CardBody, Container, Heading, 
        Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";

export default function Home() {

  const [isLoading, setIsLoading] = useState(true);
  const [articles, setArticles] = useState([]); 

  return (
    <>
      <main>
        <Container maxW="container.lg">
          <Heading as="h1" my="4">
            back4app-rest
          </Heading>
          {isLoading ? (
            <Spinner size="lg"/>
          ) : (
            <Stack spacing="4" direction="column">
              {articles.map((article, index) => (
                <Card key={index} w="100%">
                  <CardBody>
                    <Stack spacing="3">
                      <Heading size="md">
                        <Link as={NextLink} href={article.get("slug")}>
                          {article.get("title")}
                        </Link>
                      </Heading>
                      <Text>
                        {article.get("shortContent")}
                      </Text>
                    </Stack>
                  </CardBody>
                </Card>
              ))}
            </Stack>
          )}
        </Container>
      </main>
    </>
  );
}
  1. הכנו את מצבי articles ו-isLoading אותם נשתמש מאוחר יותר בעת שליפת נתונים.
  2. השתמשנו ברכיבי ChakraUI בסיסיים לעיצוב ממשק המשתמש.
  3. להצגת כל המאמרים עברנו על מצב articles.

לאחר מכן, גש אל pages/[slug].js והחלף אותו עם הבא:

// pages/[slug].js

import {useRouter} from "next/router";
import {Card, CardBody, Container, Heading,
        Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";

export default function Article() {

  const router = useRouter();
  const {slug} = router.query;

  const [isLoading, setIsLoading] = useState(true);
  const [article, setArticle] = useState(null);

  return (
    <>
      <main>
        <Container maxW="container.lg">
          <Heading as="h1" my="4">
            back4app-rest
          </Heading>
          {isLoading ? (
            <Spinner size="lg"/>
          ) : (
            <>
              {article == null ? (
                <Text>המאמר הזה אינו קיים.</Text>
              ) : (
                <Card w="100%">
                  <CardBody>
                    <Stack spacing="3">
                      <Heading size="md">{article.get("title")}</Heading>
                      <Text>
                        {article.get("content")}
                      </Text>
                      <Text fontSize="sm">
                        פורסם ב- {new Date(article.get("createdAt")).toDateString()}
                      </Text>
                    </Stack>
                  </CardBody>
                </Card>
              )}
            </>
          )}
          <Text size="sm" mt="2" align="right">
              <Link as={NextLink} href="/">← חזור</Link>
          </Text>
        </Container>
      </main>
    </>
  );
}
  1. הכנו את מצב article לאחסן את המאמר.
  2. השתמשנו ב-Next Router כדי לשלוף את פרמטר slug מה-URL.

אינטגרציה עם Backend

בחלק האחרון הזה, נחבר את ה-Frontend עם ה-Backend.

כדי להשתמש ב-Parse SDK, ראשית עלינו להתקין אותו. המשך והריץ את הפקודה הבאה:

$ yarn add parse @react-native-async-storage/async-storage

לאחר מכן, גש אל pages/_app.js ואתחל את Parse כך:

// pages/_app.js

const PARSE_HOST_URL = "https://parseapi.back4app.com/";
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  // החלף אותי
Parse.serverURL = PARSE_HOST_URL;

export default function App({ Component, pageProps }) {
  return (
      // ...
  );
}

אל תשכח לייבא את:

import Parse from "parse/dist/parse.min.js";

כדי למשוך את המאמרים בדף האינדקס נוכל להשתמש ב-Parse.Query. ברגע שהנתונים משונכים, נוכל לאחסן אותם במצב articles ולהגדיר isLoading ל-false:

// pages/index.js

export default function Home() {

  // ...

  const getArticles = async () => {
    const query = new Parse.Query("Article");
    setArticles(await query.find());
    setIsLoading(false);
  };

  useEffect(() => {
    getArticles();
  }, []);

  return (
    // ...
  );
}

נוכל לעשות את אותו הדבר עבור המאמר ב-pages/[slug].js:

// pages/[slug].js

export default function Article() {

  // ...

  const getArticle = async () => {
    const query = new Parse.Query("Article");
    query.equalTo("slug", slug);
    const results = await query.find();
    setIsLoading(false);
    if (results.length === 0) return;
    setArticle(results[0]);
  };

  useEffect(() => {
    getArticle();
  }, []);

  return (
    // ...
  );
}

שוב, אל תשכח לייבא את Parse בשני הקבצים.

import Parse from "parse/dist/parse.min.js";

הרץ את שרת הפיתוח של Next (אם הוא אינו רץ כבר) וגש אל http://localhost:3000 בדפדפן האינטרנט האהוב עליך. אתה אמור לראות את רשימת המאמרים שלך והמאמרים צריכים להיות קריאים.

back4app-rest Article Details

סיכום

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

אתה יכול להשיג את קוד המקור הסופי ב-GitHub.

אם נהנית מהמאמר הזה, אנא בדוק גם את המאמר איך לבנות API GraphQL.


Nik Tomazic

ניק מסלובניה הוא מפתח פול סטאק רב-גוני, מיומן בשפות כמו Python, Java ו-JavaScript. מעבר לתכנות, המומחיות שלו כוללת ניהול שרתים, עיצוב גרפי וכתיבה טכנית. ניק, המונע על ידי שאיפה למצוינות, מתמודד עם אתגרים בשמחה ושואף תמיד לשלמות במעשיו. למידע נוסף על עבודתו ופרויקטים של ניק, בקרו באתר האישי שלו 🌐 או עיינו במאגרי הקוד שלו ב-GitHub 🛠️. למידע מקצועי נוסף, בקרו ב-פרופיל ה-LinkedIn 🔗 שלו.

Leave a reply

Your email address will not be published.