05.05.2023
1254
Salam dəyərli oxucular! Bu yazıda, Node.js, Express və MongoDB istifadə edərək xəbər tətbiqi hazırlayacağıq. Proyektin məqsədi, istifadəçilərə xəbərləri izləmə, paylaşma və rəy bildirmə imkanı verən interaktiv bir platforma yaratmaqdır.
Bu proyekti seçməyimizin bir neçə səbəbi var. Günümüzdə internet istifadəçiləri maraqlandığı mövzulardan xəbərdar olmaq və ən son xəbərləri öyrənmək üçün xəbər proqramlarından istifadə edirlər. Birlikdə yaradacağımız tətbiqdə istifadəçilər xəbərləri paylaşa, bəyənə və şərh yaza biləcək. Bundan əlavə tətbiqdə müəyyən kateqoriyalara uyğun şəkildə filtrlənmiş və fərdiləşdirilmiş xəbərləri oxuya biləcək.
İstifadə Olunan Texnologiyalar
Bu layihədə əsas olaraq aşağıdakı texnologiyalardan istifadə ediləcək:
Node.js və Express: Web tətbiqlərini sürətli və effektiv şəkildə yaratmaq üçün istifadə edəcəyimiz əsas texnologiyalar.
MongoDB və Mongoose: Verilənlər bazası olaraq MongoDB-ni istifadə edəcək və Mongoose ilə bu verilənlər bazasıyla əlaqə yaradacağıq.
EJS (Embedded JavaScript): İstifadəçi tərəfində HTML şablonlarını render etmək üçün istifadə edəcəyimiz şablon motoru (template engine).
Bu texnologiyaların birləşməsi, tətbiqimiz üçün kifayət qədər güclü bir backend qurmaq və eyni zamanda istifadəçi dostu (user friendly) bir frontend təqdim etməyə bizə imkan verəcəkdir.
Node.js və Express
Proyektimizin qovluğunu yaratdıqdan sonra, terminal və ya komanda prompt'unda (terminalda) aşağıdakı komandanı istifadə edərək package.json faylını yaratmağa başlayırıq:
npm init -y
Proyektdə istifadə edəcəyimiz əsas paketləri qura bilərik. Həmin paketlər NPM (Node Package Manager) ilə istifadə olunacaq. Qısaca desək, NPM JavaScript proqramlaşdırma dili üçün paket meneceridir. Onun vasitəsilə digər proqramçıların yaratdıqları paketləri öz proyektimizə yükləyə, silə, yeniləyə (update) və s. edə bilərik. Bu paketləri layihəmizə əlavə etmək üçün terminalda aşağıdakı əmrləri yazırıq:
npm install express mongoose body-parser nodemon ejs
Lazımi paketləri də yüklədikdən sonra proyektimizin ümumi qovluq strukturu necə olacaq gəlin ona baxaq:
├── config
│ └── database.js
├── models
│ └── news.js
├── public
│ ├── css
│ │ └── style.css
│ ├── images
│ └── js
│ └── main.js
├── routes
│ └── index.js
├── views
│ ├── partials
│ │ └── header.ejs
│ ├── index.ejs
│ └── error.ejs
├── .gitignore
├── index.js
├── package.json
├── README.md
└── yarn.lock
Bu qovluq strukturu layihəmizin əsas fayl və qovluqları barədə bizə məlumat verir. Həmin fayl və qovluqların qısa izahı:
config: layihənin parametr və konfiqurasiyalarını içərisində saxlayır.
database.js: MongoDB bağlantısı kimi verilənlər bazası konfiqurasiyaları daxildir.
models: Qovluqda Mongoose modelləri olan faylları vardır.
news.js: Xəbər obyektinin Mongoose modelini təsvir edir.
public: Daxilində statik fayllar vardır (şəkillər, CSS və s. faylları).
routes: Express router-i içərisində saxlayır.
routes/index.js: İçərisində əsas səhifə üçün route kodları yazılmışdır.
views: EJS şablon sənədlərinin saxlandığı qovluq. Bu sənədlər HTML şablonları üçün istifadə edilir.
partials: Bir neçə səhfədə istifadə olunacaq şablonları saxlayır.
pages: Əsas səhifə və s. üçün konkret şablonlar.
.gitignore: Git reposuna (repository) əlavə edilməyəcək fayl və qovluqların siyahısı.
index.js: Proyektin əsas giriş nöqtəsi olan başlatma faylı.
package.json: Proyektin məlumatını və modulların siyahısını saxlayır.
README.md: Layihə ilə bağlı ətraflı məlumat və qoşulmuş sənədlərin necə işlədiyi barədə qısa izahat.
Databaza yaratmaq üçün ilk öncə MongoDB-in [rəsmi saytına] daxil olaraq qeydiyyatdan keçə bilərik. Daha sonra bizə təqdim olunan url vasitəsilə verilənlər bazası ilə əlaqə qurmaq üçün aşağıdakı kod sətirlərini `config/database.js` faylına əlavə edirik:
javascript:
import mongoose from "mongoose";
"mongodb+srv://username:password@cluster0.bck5a.mongodb.net/news?retryWrites=true&w=majority";
export const connectionDB = () =>
mongoose
.connect(dbURL)
.then(() => console.log("The connection to the database was successful"))
.catch((err) => console.error("MongoDB connection error:", err));
İndi isə istifadəçilər tərəfindən yazılacaq olan xəbərlər üçün sadə bir model yaradaq. Modeli yaratmaq üçün yüklədiyimiz Mongoose paketinin içərisində gələn `Schema` class-dan istifadə edəcəyik. (Mongoose barədə daha ətraflı məlumat üçün bu linkə keçid edə bilərsiniz. Bunun üçün `models/news.js` faylında müəyyən kod sətirlərini əlavə etməliyik:
import { Schema, model } from "mongoose";
const newsSchema = new mongoose.Schema({
title: { type: String, required: true },
description: { type: String, required: true },
date: { type: Date, default: Date.now },
});
export const newsModel = model("news", newsSchema);
Verilənlər bazası ilə əlaqəni qurduqdan sonra layihə daxilində istifadə edəcəyimiz Express marşrutlarını (routes) `routes/index.js` faylına əlavə edək:
import { Router } from "express";
const router = Router();
router.get("/", (req, res) => {
res.render("index");
});
export default router;
Vebsaytımızın ana səhifəsinin görüntüsünü yaratmaq üçün, `views/index.ejs` faylına daxil olub HTML şablonumuzu yaradacağıq. Bundan əvvəl isə bir neçə səhifədə istifadə olunacaq saytın başlıq hissəsini (header) `views/partials/header.ejs` faylına əlavə edək:
html
<!-- Səhifə başlığı -->
<header class="header">
<h1>Xəbər oxuma platforması</h1>
<nav>
<a href="/">Əsas səhifə</a>
</nav>
</header>
İndi isə ana səhifənin HTML kodlarını yazmağın vaxtıdır. `views/index.ejs` faylına daxil oluruq:
html
<!-- Ana sayfa şablonu -->
<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Xəbər oxuma platforması</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<%- include('partials/header') %>
<div class="main-content">
<h2>Xoş gəldiniz!</h2>
<p>Bu, xəbər oxuma platformasının ana səhifəsidir.</p>
</div>
</body>
</html>
Təbii ki burada müəyyən stilləndirmə üçün `public/css/style.css` faylına CSS kodlarını yaza bilərik. Yazdığımız proqramı işlədə bilməyimiz üçün `index.js` faylına daxil olub bəzi kodları əlavə edirik:
javascript
import express from "express";
import path, { dirname } from "path";
import { fileURLToPath } from "url";
import bodyParser from "body-parser";
import newsRoute from "./routes/index.js";
import { connectionDB } from "./config/database.js";
const app = express();
const port = process.env.PORT || 3000;
const __dirname = dirname(fileURLToPath(import.meta.url));
connectionDB();
// Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, "public")));
// EJS şablonlarından istifadə
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
// Ana səhifənin marşrutları(route)
app.use("/", newsRoute);
// Serveri işə salmaq
app.listen(port, () => {
console.log(`Server http://localhost:${port}-də işləyir`);
});
Son olaraq hər hansı dəyişikliyimizdə bizim üçün javascript faylını yenidən ayağa qaldırmaq üçün yüklədiyimiz `nodemon` paketi üçün konfiqurasiyanı etmək lazımdır. Bunun üçün `package.json` faylına `"start": "nodemon index.js" komandı əlavə olunur: (daha aydın görünməsi üçün bold effekti verilib)
json
{
"name": "news-project",
"version": "1.0.0",
"description": "",
"type": "module",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon index.js"
}
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.20.2",
"ejs": "^3.1.9",
"express": "^4.18.2",
"mongoose": "^8.0.3"
}
}
Yeni teminal açıb `npm start` komandını yazarıq. Bu komand, Express serveri başladır, MongoDB-ə qoşulur və ana səhifədə istifadəçiyə "Xoş gəldiniz!" mesajını göstərir.
Məqaləni hazırladı: Şamil Vasiyev
Təsdiqlədi: Əlinemət İsiyev
