Mern stack from scratch الجزء الأول


فهاد الدورة الجديدة لي غادي نخصصوها ل Mern Stack لي كتعني Mongodb Express React Nodejs مجموعين ف projet واحد غادي نشوفوا كيفاش نخدموا بهاد التقنيات مجموعين أول projet غادي يكون عبارة عن Notes app من بعد غادي نقادوا Blog.

نظرة سريعة بالفيديو


1- إضافة قاعدة البيانات


أول حاجة غادي نزيدو قاعدة بيانات جديدة لي غادي نخدموا بها.

غادي نخدموا ب mongodb atlas لي كيمكن باش تكون عندك قاعدة بيانات ولي غادي تكون en ligne عوض ما ن installer mongodb وندخلوا فالمتاهة ديال les versions وأنظمة التشغيل.

باش تزيد قاعدة البيانات تبع هاد الفيديو لي فالقناة ديالنا من بعد ماتزيدها غادي تزيد projet جديد فين بغيتي فيه  غادي تزيد fichier جديد سميه package.json لي فيه غادي يكونوا les packages لي غادي نحتاجوا.

الكود ديال الملف هو :

                                    
                                        //
{
  "name": "backend",
  "version": "1.0.0",
  "description": "notes app backend",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "dcoding",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "mongoose": "^5.7.9",
    "nodemon": "^1.19.4"
  }
}
                                    
                                

2- إضافة server ديالنا


منبعد غادي تفتح ل projet ديالك ف cmd وتدير هاد ل commande :

npm install

غادي ت installer les packages كاملين منبعد زيد fichier جديد سميه index.js.

فيه كنسترجع les packages لي زدت express وmongoose لي كيمكني باش ندير la connexion مع قاعدة البيانات و cors لي كتمكن باش نديرو des appels ل api من رابط خارجي.

عندي أيضا dotenv لي كتمكن من أننا نزيدو des variables d'environnement لي غادي نشوفوهم من بعد.

منبعد كندير la connexion مع la base ولي غادي نديرها ب uri لي هي variable environnment غادي نزيدوها من بعد.

بالنسبة ل noteRoutes لي هما les routes الخاصين ب notes غادي نزيدوهم من بعد .

أخيرا كن démmarer serveur فل port لي حددناه ف 3200.

الكود ديال الملف هو :

                                    
                                        //
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const { noteRoutes } = require('./routes/notes.routes');
require('dotenv').config();

const uri = process.env.ATLAS_URI;
mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', true);
mongoose.set('useCreateIndex', true);
mongoose.set('useUnifiedTopology', true);

const app = express();

app.use(express.json({ extended: false }));

app.use(cors());

mongoose.connect(uri).then(() => console.log('connected')).catch(err => console.log(err));


app.get('/', (req, res) => {
    res.send('api working');
});

app.use('/', noteRoutes);

const port = process.env.PORT || 3200;

app.listen(port, () => console.log('server running at port ' + port));
                                    
                                

3- إضافة رابط الإتصال بقاعدة البيانات


منبعد زيد fichier جديد سميه env. فيه غادي يكون رابط الإتصال بقاعدة البيانات لي غادي تبدل فيه ل username وتدير فبلاصتو ل username لي زدتي كيف شوفتي فالفيدو ول password عوضوا بكلمة المرور لي زدتي و dbname بإسم قاعدة البيانات لي زدتي.

الكود ديال الملف هو :

                                      
                                        //
ATLAS_URI = mongodb+srv://username:password@notesapp-eocqn.gcp.mongodb.net/dbname?retryWrites=true&w=majority
                                      
                                    

4- إضافة ل Model Note


منبعد غادي نزيدوا dossier جديد سميه models فيه زيد fichier جديد سميه note.model.js فيه غادي يكون ل model ديالنا ولي هو المقابل ديال table ف sql.

داخل ل model كنحدد les champs لي عندي هنا عندنا title و description ولي كنعطي type ديالهم وعدد الحروف وعندي timestamps لي كنزيد بها تاريخ الإضافة والتعديل.

منبعد كندير ل export ل model باش نخدم به فملفات أخرى ولي سميناه Note.

الكود ديال الملف هو :

                                        
                                            //
const mongoose = require('mongoose');

const noteSchema = mongoose.Schema({
    title: {
        type: String,
        required: true,
        minlength: 4,
        maxlength: 150
    },
    body: {
        type: String,
        required: true,
        minlength: 4,
        maxlength: 2000
    }
}, {
    timestamps: true
});

module.exports = mongoose.model('Note', noteSchema);
                                        
                                    

5- إضافة ل Controlleur Note


منبعد غادي نزيدوا dossier جديد سميه controllers فيه زيد fichier جديد سميه note.controller.js فيه غادي يكون ل controller ديالنا.

داخل ل controller كنسترجع ل model Note لي سبق وزدنا منبعد كنزيد les fonctions لي غادي نحتاج عندي getAllNotes لي كنسترجع بها les notes كاملين.

عندي addNote لي كتمكن من إضافة note جديدة فقاعدة البيانات و عندي updateNote لي كتمكن من تعديل note و deleteNote لي كتمكن من حذف note.

عندي أيضا noteById لي كتمكن من إسترجاع note بل id ديالها.

منبعد كندير export لهاد les fonctions كاملين باش نخدم بهم فملفات أخرى.

الكود ديال الملف هو :

                                        
                                            //
const Note = require('../models/note.model');

const getAllNotes = (req, res) => {
    Note.find((err, notes) => {
        if (err || !notes) {
            return res.json({
                error: 'No data'
            })
        }
        res.json({ notes });
    }).select('title body createdAt');
}


const addNote = (req, res) => {
    const title = req.body.title;
    const body = req.body.body;

    const newNote = new Note({ title, body });

    newNote.save().then(() => {
        res.json("note added");
    }).catch(err => console.log(err));
}

const updateNote = (req, res) => {
    Note.findById(req.params.id).then(note => {
        note.title = req.body.title;
        note.body = req.body.body;
        note.save().then(() => {
            res.json("note updated");
        }).catch(err => console.log(err));
    }).catch(err => console.log(err));
}

const deleteNote = (req, res) => {
    Note.findByIdAndDelete(req.params.id).then(note => {
        res.json("note deleted");
    }).catch(err => console.log(err));
}

const noteById = (req, res) => {
    Note.findById(req.params.id).then(note => {
        res.json({ note });
    }).catch(err => console.log(err));
}

module.exports = {
    getAllNotes,
    addNote,
    updateNote,
    deleteNote,
    noteById
}
                                        
                                    

كلمات مفاتيح :