קורס חינם React & GraphQL – שיעור שמיני – noSQL MongoDB

ברוכים השבים לקורס חינם ב React & GraphQL והנה אנחנו לקראת סיום הקורס. למעשה זה השיעור האחרון אם כי יהיה עוד שיעור אחד העשרה (אולי 2 שיעורים?) .. בכל מקרה היום נעביר את המוק למסד נתונים חיצוני בmongoDB , שזהו מסד נתונים שהחל להיות פופולארי מאוד לאחרונה אז חשוב מאד להכיר, אבל לפני שנתחיל בשיעור , מי שעוד לא צפה בשיעורים האחרונים או פספס איזה שיעור יכול לחזור עליהם בקישורים הללו:

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

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

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

קורס חינם React & GraphQL – שיעור רביעי – graphQL מגדירים schema.

קורס חינם React & GraphQL – שיעור חמישי – graphQL מגדירים schema.

קורס חינם React & GraphQL – שיעור שישי – graphQL על query and mutation. המשך.

קורס חינם React & GraphQL – שיעור שביעי – Apollo client

מי אתה MongoDB

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

קדימה ניגשים לעבודה.

הקמת מסד נתונים עם MongoDB

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

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

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

• שלב הבא נוכל לדלג עליו ויש ללחוץ על create project
• שלב הבא יהיה עליכם ללחוץ על build database – פשוט ללחוץ על הכפתור הירוק שיש לכם במרכז.
• לאחר מכן תוכלו לבחור את החבילה המתאימה עבורכם . לטובת קורס זה אני בחרתי את החינמית בצד ימין
  

• השלב הבא הוא לבחור את ההגדרות של ה cluster אני לא נוגע פה בכלום פשוט לוחץ על הכפתור הירוק create cluster
  

• לאחר מכן תועברו לממשק הניהול המרכזי. לא ארחיב על ממשק אלא אתקדם עם תהליך יצרית החשבון כך שנוכל לאחסן מידע בבסיס נתונים . כרגע נתעלם מהמסך שהגענו עליו ונלחץ על Network Access c בתפריט השמאלי.
  

• עכשיו נגדיר את התקשורת שלנו. אפשר לבחור בין 2 אפשרויות add current ip address , allow access from anywhere . אני בחרתי את האפשרות של גישה לכולם. בגדול לא חובה לבחור את האפשרות הזו (פחות מאובטחת).
  

• בשלב הבא נגדיר יוזר , בלחיצה על Database Access בתפריט השמאלי
  

• כמעט סיימנו, עכשיו נלך לתפריט ונלחץ על Databases . ונוכל להגדיר את מסדר הנתונים הראשון שלנו בלחיצה על create my own data . שימו לב שאנחנו בטאב של collections מונגו מייחסים שם ל"טבלה" כ collection. כל קולקציה כזו תשמור מסמכים מסוג מסויים. בדומה למערך של אובייקטים.
  

• עכשיו כל שעלינו לעשות הוא להוסיף מידע documents לתוך הקולקשן הזה ונעשה זאת על ידי לחיצה על insert document
  

שימו לב שאם רוצים להוסיף keys and values צריך ללחוץ על מספרי השורות ואז מופיע + ואפשר להוסיף בהתאם. וסיימנו בלחיצה על insert.

והנה לנו מסד נתונים עם 2 תוצאות של משחקים שהוספתי ידנית:

סוףסוף סיימנו את החלק בצד של mongodb atlas אמנם ארוך אבל הכל טכני ופשוט מאד.

תקשורת עם MongoDB בשרת Nodejs שלנו.

וחזרנו לחלק היותר כייפי של הפוסט והוא המימוש של mongodb אצלנו באפליקציה והחלפה של המוק הלוקלי שלנו. ובשביל זה צריך לעשות כמה הכנות:

1. להתקין את הספרייה של mongoose. הספריה שעושה לנו חיים קצת יותר קלים בעבודה עם מוגנו עם nodejs.
   npm i mongoose.
2. בשביל לעשות התקשרות עם המסד הנתונים שיצרנו . נצטרך שוב לגשת לmongodb atlas וללחוץ על connect .
   נלחץ על הכפתור האחרון ברשימה :
   

ובשלב הבא כל מה שיהיה עליכם לעשות זה להעתיק את הURI הבא ולהחליף בו את הסיסמה לסיסמה של היוזר שיצרתם למסד הנתונים הנל וגם במקום המילה test לשים את שם מסד הנתונים שיצרתם. (במקרה של הדוגמה פה השם הוא results)

ועכשיו נוכל להמשיך לתוך הקוד שלנו ולממש קצת mongo עם nodejs :

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

const {results} = require("../client/src/mock/results");

const { graphqlHTTP } = require('express-graphql');
const graphql = require("graphql");
const { GraphQLSchema, GraphQLObjectType, GraphQLInt, GraphQLString, GraphQLList } = graphql;

const mongoose = require('mongoose');

const dbURI = 'mongodb+srv://tiktaktoe:סיסמה תיהיה כאן.g2iap.mongodb.net/results';

const ResultsSchema = new mongoose.Schema({
    player: {
        type: String,
        required: true
    },
    results: {
        type: String,
        required: true
    }
});

const ResultsMon = mongoose.model('results',ResultsSchema);

const ResultsType = new GraphQLObjectType({
    name: "Results",
    fields: ()=> ({
        id: {type: GraphQLString},
        player: {type: GraphQLString},
        results: {type: GraphQLString}
    })
});


const RootQuery = new GraphQLObjectType({
    name: "RootQueryType",
    fields: {
        getResults: {
            type: new GraphQLList(ResultsType),
            // args: {id: {type: GraphQLInt}} ,
            async resolve(parent,args) {
                return await ResultsMon.find();
            }
        }
    }
})
const Mutation = new GraphQLObjectType({
    name: "Mutation",
    fields: {
        createGameResults: {
            type: ResultsType,
            args: {
                id: {type: GraphQLInt},
                player: {type: GraphQLString},
                results: {type: GraphQLString}
            },
        async resolve(parent,args){
                if(!results.some(item => item.id === args.id)){
                    const result = new ResultsMon({player:args.player, results: args.results })
                    await result.save();
                    return args
                }
                return null
            }
        }
    }
})

const schema = new GraphQLSchema({
    query: RootQuery, mutation: Mutation
})
app.use(cors());
app.use(express.json());
app.use('/graphql', graphqlHTTP({
    schema,
    graphiql: true
}));




mongoose.connect(dbURI, {useNewUrlParser: true}).then((data)=>{
   
   return app.listen(PORT, () => {
        console.log('Server runnig' ,results)
    })
}).catch(err=>{
    console.log(err)
});

אז מה עשינו פה בדיוק?

ההיישום של mongoDB ב nodejs

הכל מתחיל בשורה 16 ונגמר בשורה 27. כל ומה שעשינו זה שימוש בmongoose והגדרנו את dbURI עם הקישור הנכון (רק שימו את הסיסמה שלכם כמובן) וביצענו את ההתקשרות בשורה 86 שעושה connect, ואם הכל קשורה היא מחזירה את הפורט שלנו. אם יש שגיאה אפשר לתפוס אותו כמופה שורה 91.

את שאר הקוד שהגדרנו בשורות 16 עד 25 הגדרנו schema של mongodb ושמרנו אותה בmodel z בשורה 27 .

ומכוון שהמידע חוזרה אלינו כpromise כל מה שנצטרך לעשות זה שינויים קלים בGQL . למשל ב rootQuery הפונקציה של הresolver הפכה להיות אסינכרונית , כי עכשיו היא פונה למידע שיושב במונגו, שורה 46, עם המטודה find נוכל לייבא את כל מערך התוצאות של המשחקים בקולקשן של resuts. ופה סיימנו את העבודה עם הquery מומלץ לבדוק כמובן בסביבת הבדיקות של GQL שהכל מנגן : אפשר לראות לפי הID שמדובר במונגו, שימו לב גם שהחלפת את הID TYPE לסטרינג כי מונגו מייצר לכל אובייקט ID מסוג סטרינג.

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

לסיום ולסיכום

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

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

קורס חינם React & GraphQL – שיעור חמישי – graphQL מגדירים schema. קורס חינם React & GraphQL – שיעור תשיעי – טיפים והנחיות להמשך הדרך קורס חינם React & GraphQL – שיעור שישי – graphQL על query and mutation. המשך. קורס חינם React & GraphQL – שיעור רביעי – graphQL מגדירים schema.