MEAN: ثورة في تطوير الواجهة الأمامية

3

تطوير الويب هو مجال سريع التطور يتطلب منك باستمرار تحسين مهاراتك باستخدام التقنيات الحديثة والأدوات الفعّالة. في هذا المقال، سنتناول مجموعة من الأدوات التي تشكل “MEAN”، وهي اختصار لمجموعة من التقنيات التي يمكن أن تحول طريقة تطوير الويب الخاصة بك بشكل جذري. MEAN هو إطار عمل يعتمد على JavaScript ويتيح لك بناء تطبيقات ويب متكاملة باستخدام تقنيات حديثة وقوية، مما يجعله خيارًا ممتازًا لمطوري الويب الذين يسعون لإنشاء تطبيقات معمارية قوية وعالية الأداء.

ما هو MEAN؟

MEAN هو اختصار لأربعة تقنيات رئيسية يتم استخدامها معًا لبناء تطبيقات الويب:

1. MongoDB: قاعدة بيانات NoSQL تُستخدم لتخزين البيانات بشكل غير هيكلي.
2. Express.js: إطار عمل لتطبيقات الويب يعمل على جانب الخادم (Back-end) ويساعد في بناء واجهات البرمجة.
3. Angular: إطار عمل لتطوير واجهات المستخدم (Front-end) يعتمد على TypeScript، ويسهل بناء تطبيقات الويب التفاعلية.
4. Node.js: بيئة تشغيل JavaScript على الخادم، مما يتيح لك تشغيل JavaScript خارج المتصفح.

هذه المجموعة من الأدوات تمكنك من تطوير تطبيقات ويب متكاملة من خلال استخدام لغة JavaScript في جميع الطبقات: من قاعدة البيانات إلى واجهات المستخدم. باستخدام MEAN، يمكن للمطورين بناء تطبيقات سريعة وقابلة للتوسع بسهولة.

لماذا تختار MEAN؟

1. استخدام JavaScript في كل مكان

أحد أكبر الفوائد التي تقدمها MEAN هو القدرة على استخدام JavaScript في كل طبقات التطبيق. في الماضي، كان عليك تعلم عدة لغات لتطوير الويب (مثل SQL لقاعدة البيانات، PHP أو Python للخوادم، وHTML وCSS للواجهة الأمامية). لكن مع MEAN، يمكنك استخدام JavaScript من البداية إلى النهاية.

2. الأداء العالي والسرعة

مع Node.js، يُمكنك تنفيذ العمليات في وقت واحد (أي غير متزامن)، مما يعزز الأداء بشكل كبير. يُعدّ Node.js خيارًا مثاليًا لتطبيقات الويب التي تحتاج إلى استجابة سريعة وتحميل منخفض.

3. القابلية للتوسع

MEAN هو إطار عمل مفتوح المصدر ويعتمد على تقنيات يمكن توسيعها بسهولة لتلبية احتياجات التطبيقات الكبيرة. MongoDB، على سبيل المثال، يمكنه التعامل مع كميات ضخمة من البيانات دون التأثير على الأداء، وهو ما يجعله مناسبًا للتطبيقات التي تتطلب تخزين بيانات ضخمة.

4. بيئة تطوير متكاملة

باستخدام MEAN، يمكنك بناء تطبيقات متكاملة بكل سهولة. أنظمة إدارة قواعد البيانات، والخوادم، وواجهات المستخدم كلها تعمل بتناغم ضمن إطار واحد، مما يجعل عملية التطوير أكثر كفاءة وأقل تعقيدًا.

نظرة عامة على الأدوات المكونة لـ MEAN

MongoDB

MongoDB هو قاعدة بيانات NoSQL مصممة لتخزين البيانات غير الهيكلية. تُستخدم MongoDB بشكل أساسي لتخزين البيانات التي لا تتناسب مع قواعد البيانات التقليدية مثل MySQL أو PostgreSQL. يسمح MongoDB بتخزين البيانات في شكل مستندات JSON، مما يعني أنه يمكن تخزين معلومات متنوعة بسهولة.

لماذا MongoDB؟

• المرونة في التخزين: يمكنك تخزين البيانات بأي هيكل تريده، مما يعني أنه لا يتطلب منك تخطيطًا معقدًا مثل قواعد البيانات العلائقية.
• القابلية للتوسع: يمكن زيادة قدرة قاعدة البيانات بسهولة بمجرد زيادة حجم البيانات.

Express.js

Express هو إطار عمل بسيط وقوي لإنشاء تطبيقات الويب والخوادم باستخدام Node.js. يوفر Express العديد من الأدوات والميزات التي تجعل من بناء تطبيقات الويب أسهل وأسرع.

مميزات Express:

• الإعداد السريع: يساعدك في بناء الخوادم بسرعة.
• البساطة: يحتوي على واجهة برمجة تطبيقات بسيطة (API) تتيح لك التحكم في التطبيق بسهولة.
• المرونة: يمكن استخدامه مع أي نوع من أنواع قواعد البيانات، وهو مثالي للتطبيقات الصغيرة والكبيرة على حد سواء.

Angular

Angular هو إطار عمل لبناء واجهات المستخدم باستخدام TypeScript. يُستخدم في بناء التطبيقات الديناميكية والمتفاعلة مثل تطبيقات الويب ذات الصفحة الواحدة (SPA). يتمتع Angular بالكثير من الميزات الرائعة التي تساعد في بناء واجهات مستخدم متطورة وقابلة للتوسع.

مميزات Angular:

• التوجيه (Routing): يتيح لك توجيه المستخدمين بين الصفحات المختلفة بسهولة.
• الرؤية الثنائية الاتجاه (Two-way Data Binding): يتيح لك تحديث واجهة المستخدم تلقائيًا عندما تتغير البيانات، والعكس بالعكس.
• البناء من خلال المكونات: كل جزء من التطبيق يعالج ويُدار من خلال مكونات منفصلة.

Node.js

Node.js هو بيئة تشغيل JavaScript مفتوحة المصدر التي تعمل على الخادم. تُستخدم Node.js في التطبيقات التي تتطلب استجابة سريعة، مثل تطبيقات الويب التفاعلية والتطبيقات التي تحتاج إلى إدارة العديد من العمليات المتزامنة في نفس الوقت.

مميزات Node.js:

• الأداء السريع: يستخدم Node.js محرك V8 من Google، الذي يتيح تنفيذ JavaScript بسرعة.
• القدرة على المعالجة غير المتزامنة: يتيح لك تنفيذ العديد من العمليات في وقت واحد.
• دعم المجتمعات الكبيرة: بفضل دعم العديد من المكتبات عبر NPM، يمكن لمطوري Node.js الحصول على الأدوات التي يحتاجونها بسرعة.

كيفية تثبيت MEAN: دليل خطوة بخطوة

الخطوة 1: تثبيت Node.js و NPM

1. قم بزيارة الموقع الرسمي لـ Node.js.
2. اختر الإصدار المناسب لنظام التشغيل لديك (LTS هو الخيار الموصى به).
3. بعد التنزيل، اتبع التعليمات لإتمام التثبيت.
4. للتحقق من التثبيت، افتح سطر الأوامر (Command Prompt أو Terminal) واكتب:

node -v
npm -v

يجب أن تظهر لك إصدارات Node.js و npm المثبتة.

الخطوة 2: تثبيت MongoDB

1. قم بزيارة موقع MongoDB لتحميل الإصدار المناسب من MongoDB.
2. اتبع الإرشادات لتثبيت MongoDB على جهازك.
3. بعد التثبيت، يمكنك بدء MongoDB باستخدام الأمر:

mongod

الخطوة 3: إنشاء تطبيق Express.js

• أنشئ مجلدًا جديدًا لمشروعك:

mkdir mean-app
cd mean-app

• قم بتثبيت Express باستخدام npm:

npm init -y
npm install express --save

• قم بإنشاء ملف server.js يحتوي على الكود التالي:

const express = require('express');
const app = express();
const port = 3000;

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

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

• شغّل التطبيق:

node server.js

الخطوة 4: إعداد Angular

• قم بتثبيت Angular CLI عالميًا:

npm install -g @angular/cli

• أنشئ مشروع Angular جديد:

 ng new frontend cd frontend ng serve

الخطوة 5: الاتصال بين MongoDB و Express

1. قم بتثبيت مكتبة mongoose لتسهيل الاتصال بـ MongoDB:

npm install mongoose --save

• أضف الكود التالي في server.js للاتصال بقاعدة بيانات MongoDB:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/meanapp', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('Connected to MongoDB'))
  .catch(err => console.error('Could not connect to MongoDB...', err));

بناء تطبيق MEAN: الخطوات الأساسية مع مشروع كامل

في هذا الجزء، سنتابع بناء تطبيق MEAN بسيط خطوة بخطوة، حيث سنقوم ببناء تطبيق Todo List متكامل باستخدام MongoDB، Express، Angular، وNode.js. سنغطي كيفية إعداد الواجهة الخلفية (Back-end) باستخدام Express و MongoDB، وكيفية بناء الواجهة الأمامية (Front-end) باستخدام Angular، وأخيرًا كيفية ربط الواجهة الأمامية بالواجهة الخلفية لتمكين CRUD (إنشاء، قراءة، تحديث، وحذف) للبيانات.

الخطوة 1: إعداد الواجهة الخلفية (Back-end)

1. إنشاء مشروع Node.js باستخدام Express أولًا، سنقوم بإنشاء مشروع جديد لـ Node.js باستخدام Express. لنبدأ بإنشاء مجلد جديد وتهيئة البيئة:

mkdir mean-todo
cd mean-todo
npm init -y
npm install express mongoose body-parser --save

1. express: هو إطار عمل يساعد في بناء تطبيقات الويب والخوادم.
2. mongoose: مكتبة لـ MongoDB تعمل على تسهيل التفاعل بين Node.js و MongoDB.
3. body-parser: مكتبة لقراءة البيانات من الجسم (body) في الطلبات HTTP.
4. إنشاء ملف server.js الآن، أنشئ ملفًا جديدًا باسم server.js في المجلد mean-todo. هذا الملف سيكون بمثابة الخادم الأساسي للتطبيق. هنا هو الكود الأساسي:

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

// إعداد body-parser لمعالجة JSON
app.use(bodyParser.json());

// الاتصال بقاعدة بيانات MongoDB
mongoose.connect('mongodb://localhost:27017/todolist', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('Connected to MongoDB'))
  .catch(err => console.error('Could not connect to MongoDB...', err));

// نموذج Todo (Schema)
const todoSchema = new mongoose.Schema({
  title: String,
  completed: Boolean
});

const Todo = mongoose.model('Todo', todoSchema);

// النقطة النهاية (Endpoint) لإنشاء ToDo جديدة
app.post('/todos', async (req, res) => {
  const todo = new Todo({
    title: req.body.title,
    completed: false
  });

  try {
    const savedTodo = await todo.save();
    res.status(201).send(savedTodo);
  } catch (err) {
    res.status(400).send(err);
  }
});

// النقطة النهاية (Endpoint) لقراءة جميع Todos
app.get('/todos', async (req, res) => {
  try {
    const todos = await Todo.find();
    res.status(200).send(todos);
  } catch (err) {
    res.status(400).send(err);
  }
});

// النقطة النهاية (Endpoint) لتحديث ToDo
app.put('/todos/:id', async (req, res) => {
  try {
    const todo = await Todo.findById(req.params.id);
    if (!todo) {
      return res.status(404).send('Todo not found');
    }

    todo.completed = req.body.completed !== undefined ? req.body.completed : todo.completed;
    await todo.save();
    res.status(200).send(todo);
  } catch (err) {
    res.status(400).send(err);
  }
});

// النقطة النهاية (Endpoint) لحذف ToDo
app.delete('/todos/:id', async (req, res) => {
  try {
    const todo = await Todo.findByIdAndRemove(req.params.id);
    if (!todo) {
      return res.status(404).send('Todo not found');
    }

    res.status(200).send(todo);
  } catch (err) {
    res.status(400).send(err);
  }
});

// بدء الخادم
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

الخطوة 2: إعداد الواجهة الأمامية (Front-end) باستخدام Angular

• إنشاء مشروع Angular بعد إنشاء الواجهة الخلفية، ننتقل إلى بناء الواجهة الأمامية باستخدام Angular. أولًا، قم بتثبيت Angular CLI إذا لم تكن قد قمت بتثبيته مسبقًا:

npm install -g @angular/cli

• ثم أنشئ مشروع Angular جديد:

ng new frontend cd frontend

• إعداد Angular Service للتفاعل مع API في مشروع Angular، أنشئ خدمة (Service) للتفاعل مع API التي أنشأناها في الواجهة الخلفية. استخدم الأمر التالي لإنشاء الخدمة:

ng generate service todo

• قم بتعديل الكود داخل todo.service.ts ليبدو كما يلي:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TodoService {

  private apiUrl = 'http://localhost:3000/todos';

  constructor(private http: HttpClient) { }

  getTodos(): Observable<any> {
    return this.http.get(this.apiUrl);
  }

  addTodo(title: string): Observable<any> {
    return this.http.post(this.apiUrl, { title });
  }

  updateTodo(id: string, completed: boolean): Observable<any> {
    return this.http.put(`${this.apiUrl}/${id}`, { completed });
  }

  deleteTodo(id: string): Observable<any> {
    return this.http.delete(`${this.apiUrl}/${id}`);
  }
}

• إعداد مكون TodoList لعرض وإدارة البيانات الآن، أنشئ مكونًا (Component) لعرض todos. استخدم الأمر التالي لإنشاء المكون:

ng generate component todo-list

• ثم قم بتعديل ملف todo-list.component.ts ليبدو كما يلي:

import { Component, OnInit } from '@angular/core';
import { TodoService } from './todo.service';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {

  todos: any[] = [];
  newTodo: string = '';

  constructor(private todoService: TodoService) { }

  ngOnInit(): void {
    this.loadTodos();
  }

  loadTodos(): void {
    this.todoService.getTodos().subscribe(todos => {
      this.todos = todos;
    });
  }

  addTodo(): void {
    if (this.newTodo.trim()) {
      this.todoService.addTodo(this.newTodo).subscribe(() => {
        this.loadTodos();
        this.newTodo = '';
      });
    }
  }

  updateTodoStatus(todo: any): void {
    this.todoService.updateTodo(todo._id, !todo.completed).subscribe(() => {
      todo.completed = !todo.completed;
    });
  }

  deleteTodo(id: string): void {
    this.todoService.deleteTodo(id).subscribe(() => {
      this.loadTodos();
    });
  }
}

• تشغيل تطبيق Angular لتشغيل تطبيق Angular، استخدم الأمر التالي:

ng serve

• الآن، يمكنك فتح المتصفح على http://localhost:4200 ومشاهدة تطبيق Todo List الذي تفاعلت فيه الواجهة الأمامية مع API التي أنشأناها.

الخاتمة

بفضل تقنيات MEAN، أصبح بناء تطبيقات الويب أكثر كفاءة وسرعة من أي وقت مضى. باستخدام JavaScript عبر جميع الطبقات، يمكن للمطورين إنشاء حلول مبتكرة وقابلة للتوسع باستخدام مجموعة أدوات موحدة. من خلال الأدوات مثل MongoDB و Express و Angular و Node.js، يمكنك بناء تطبيقات ديناميكية وقوية تلبي احتياجات العصر الرقمي.