Mern Social Network الجزء الاول
فهاد ال projet غادي نشوفوا كيفاش نقادو social network ب react js express nodejs & mongodb هاد ل projet لي غادي يكون عبارة على mini twitter فيه المستخدم ممكن يتبع أو يلغي متابعة مستخدم آخر يزيد تغريدات تعليقات يزيد إعجاب أو يلغي إعجاب هاد ل projet ماشي للمبتدئين ف react js و nodejs كنتي مبتدأ شوف الدورات الخاصة بالمبتدئين.
نظرة سريعة بالفيديو
1- إضافة projet جديد
أول حاجة زيد dossier جديد سميه لي بغيتي وداخلو زيد dossier آخر سميه backend هنا غادي يكون ل backend لي هو الجزء الخاص ب nodejs.
داخل dossier backend غادي تدير ل commande :
npm init
ودخل المعلومات الخاصة بك مبغيتيش ممكن تخدم بديالي فقط زيد fichier سميه package.json وزيد فيه هاد الكود :
{
"name": "backend",
"version": "1.0.0",
"description": "react social network",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "belasri imad",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-jwt": "^6.0.0",
"formidable": "^1.2.2",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.20",
"mongoose": "^5.10.0",
"nodemon": "^2.0.4"
}
}
2- إضافة قاعدة البيانات
قبل ما نزيدو قاعدة البيانات حيث زدنا قبل ل fichier package.json وفيه يلا شفتي لتحت كاين les packages لي غادي نحتاجو فل backend غادي تدير هاد ل commande :
npm install
منبعد ما يتزادو غادي نزيدو fichier جديد سميه env. هنا غادي يكون عندنا ل port لي غادي يتفتح فيه السيرفر ورابط قاعدة البيانات لي غادي تشوف هاد الفيديو باش تزيدها و JWT_SECRET لي ممكن تكتب فيها أي حاجة بغيتي غادي نحتاجوها من بعد.
الكود لي غادي تزيد هو :
PORT = 8888
DATABASE_URL = "YOUR DATABASE URL | LE LIEN VERS VOTRE BASE DE DONNEES"
JWT_SECRET = kjndfkjvndkfjvndkfjvnkdjfvnkjdfnvkdjfvngbgbgbgbgb
3- إضافة ل User Model
دائما ف dossier backend زيد dossier جديد سميه models فيه غادي نزيدو fichier user.js هنا غادي يكونوا عندي المعلومات الخاصة بالمستخدم مع des fonctions لي غادي يمكنوا باش ن crypter ل mot de passe وأيضا نقارنوا les mot de passes فاش نبغيو نتكونيكطاو.
الكود لي غادي تزيد هو :
const mongoose = require("mongoose");
const bcrypt = require("bcryptjs");
const { ObjectId } = mongoose.Schema;
const UserSchema = new mongoose.Schema(
{
name: {
type: String,
trim: true,
required: true,
},
about: {
type: String,
trim: true,
},
image: {
data: Buffer,
contentType: String,
},
email: {
type: String,
trim: true,
unique: true,
required: true,
},
salt: String,
hashed_password: {
type: String,
required: true,
},
following: [{ type: ObjectId, ref: "User" }],
followers: [{ type: ObjectId, ref: "User" }],
},
{
timestamps: true,
}
);
UserSchema.virtual("password")
.get(function () {
return this._password;
})
.set(function (password) {
this._password = password;
let salt = (this.salt = bcrypt.genSaltSync(10));
this.hashed_password = bcrypt.hashSync(password, salt);
});
UserSchema.methods.comparePassword = function (passwordToCheck, cb) {
bcrypt.compare(passwordToCheck, this.hashed_password, function (
err,
isMatch
) {
if (err) cb(err);
cb(null, isMatch);
});
};
module.exports = mongoose.model("User", UserSchema);
4- إضافة ل Post Model
دائما ف dossier models زيد fichier post.js هنا غادي يكونوا عندي المعلومات الخاصة بالتغريدة أو tweet ممكن تبدل الإسم ل tweet يلا بغيتي.
الكود لي غادي تزيد هو :
const mongoose = require("mongoose");
const { ObjectId } = mongoose.Schema;
const PostSchema = new mongoose.Schema(
{
text: {
type: String,
trim: true,
required: true,
},
postedBy: {
type: ObjectId,
ref: "User",
},
likes: [{ type: ObjectId, ref: "User" }],
comments: [
{
text: String,
created: { type: Date, default: Date.now },
postedBy: {
type: ObjectId,
ref: "User",
},
},
],
},
{
timestamps: true,
}
);
module.exports = mongoose.model("Post", PostSchema);