קורס חינם React & GraphQL – שיעור שלישי – צד שרת Nodejs של המשחק איקס עיגול.

שיעורים הקודמים למי שעוד לא עקב נמצאים פה:

קורס חינם React & GraphQL – שיעור שני – משחק איקס עיגול TIK-TAK-TOE

קורס חינם React & GraphQL – שיעור ראשון – אתחול צד לקוח

אז עד עכשיו בנינו UI וקצת לוגיקה של משחק איקס עיגול ועכשיו נתקדם לצד שרת על מנת שנוכל להגיע לנושא השני המרכזי של הקורס והוא עבודה עם GQL . אז לפני שנתחיל להעמיס תובנות וגם קצת קוד של GQL נצטרך לשם כך צד שרת קטן שכל מטרתו תהיה לייצר לנו תקשורת. התקשורת שנצטרך היא API שיגיש לנו את הדטה וגם לוגיקה של GQL שנוכל לבצע את הקריאות השונות שהם כל הקסם בGQL . אז לפני כל זה , נבנה קובץ index.js בתוך תיקיה חדשה. אפשר לקרוא לה server ולקבצים של צד הלקוח שיצרנו אפשר לשים בתיקיה שנקראת client .למשל ככה זה נראה אצלי:

בתוך התיקיה של server נעשה כמה דברים:

• npm init -y בשביל לייצר לנו קובץ package.json
• נתקין כמה ספריות שימושיות לפרויקט שלנו:
  npm install express
  npm install express-graphgl
  npm install graphql
  npm install cors
  npm install nodemon –save-dev
• נייצר קובץ index.js

מתחילים לכתוב Nodejs

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

const express = require("express");
const app = express();
PORT = 5001;
const cors = require("cors");

app.use(cors());

app.listen(PORT, () => {
    console.log('Server runnig on port ' + PORT);
});

זה הכל! . עכשיו אסביר מה יש כאן ולמה זה נחוץ.

אז ייבאנו את הספריה של express שמאפשרת לנו הקים פורט לוקאלי ולנהל ראוטים בקלות רבה וגם מאפשר לנו לעשות שימוש בmiddlewares שנגדיר בהמשך.
כמו כן הגדרנו פורט (שורה4).
והמשכנו עם הקונבנציה של nodejs עם listen שמקבלת PORT ופונקציה שבה נוכל לרשום מה שבא לנו, ופשוט הנדפיס קונסולוג , במידה והכל רץ כמו שצריך אנחנו נקבל את ההודעה הזו אצלנו בטרמינל . כמובן שכרגע לא תראו כלום בפורט אבל כן תראו בטרמינל שלכם את הקונסול לוג שלנו.
בשביל להריץ כל מה שנצטרך לעשות זה :

1. להגדיר משהו קטן בpackage.json :
   הסיפריה של nodemon מקלה עלינו כך שלא נצטרך להקליד כל הזמן node index.js ולמעשה כל שינוי שנעשה יבצע ריצה נוספת של Index.js . ולכן נצטרך להגדיר את הקובץ שלנו בהתאם: למעשה התווספה שורה 9.
2. להריץ את הפקודה npm run start
   

{
  "name": "tiktaktoe",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "node index",
    "start": "nodemon index"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-graphql": "^0.12.0",
    "graphql": "^15.5.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
}

עוד משהו אחד קטן שלא נוכל לשכוח אותו זהו CORS שמאפשר לנו לקבל קריאות מבחוץ. זהו middleware שנריץ עם אקספרס בעזרת use. כל שימוש בuse הכוונה לmiddleware.

כל מה שאתם צריכים לדעת כרגע על CORS זה שהוא מטפל לנו בבעיה שכיחה של cross origin . כך שלא יהיו לנו בעיות עם מעבר בין כתובות שונות שבהן נשתמש.

סיימנו עם nodejs ! פחות או יותר..

אז למעשה זו כל העבודה שיש לנו עם nodejs אבל לא מדוייק כי נעשה עוד המון עבודה על הקובץ אינקס אבל רוב הקוד יוקדש לטובת GQL . אז זהו בנתיים. נתראה בשיעור הבא 🐊❤

פוסטים קשורים:

קורס חינם React & GraphQL – שיעור רביעי – graphQL מגדירים schema. קורס חינם React & GraphQL – שיעור שני – משחק איקס עיגול TIK-TAK-TOE קורס חינם React & GraphQL – שיעור ראשון – אתחול צד לקוח graphQl עוקף את REST בסיבוב? מדריך GQL