بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore مع إضافة خاصية الاستيثاق

في عصر التطور التكنولوجي الحالي، أصبحت تطبيقات الويب من أهم الأدوات التي يعتمد عليها الأفراد والمؤسسات في عرض المحتوى وتبادل المعلومات، ومن بين أكثر أنواع هذه التطبيقات شيوعاً هي المدونات. هذا المقال يقدم شرحاً موسعاً حول كيفية بناء مدونة متكاملة باستخدام إطار العمل Angular وقاعدة بيانات Firestore من Firebase، مع التركيز على إضافة خاصية الاستيثاق (Authentication) لضمان حماية المحتوى والتحكم في وصول المستخدمين.

مقدمة عن Angular وFirestore

إطار العمل Angular

Angular هو إطار عمل لتطوير تطبيقات الويب تم تطويره وصيانته بواسطة Google، ويُستخدم لبناء تطبيقات متقدمة تعتمد على هيكلة منظمة وقابلة للتوسيع. يعتمد Angular على TypeScript كلغة برمجة رئيسية، ويوفر نظاماً متكاملاً لإدارة المكونات، التوجيه، التعامل مع النماذج، والخدمات، مما يسهل بناء تطبيقات ويب تفاعلية ذات أداء عالي.

قاعدة بيانات Firestore

Firestore هي قاعدة بيانات NoSQL في الوقت الحقيقي تديرها Firebase، المنصة السحابية التابعة لشركة Google. تقدم Firestore تخزيناً مرناً وقابل للتوسع للبيانات مع مزايا مثل التزامن اللحظي (Real-time synchronization)، ودعم العمليات الخارجية من دون الحاجة لخادم (Serverless)، وهو ما يجعلها خياراً مثالياً لتطبيقات الويب الحديثة مثل المدونات.

مراحل بناء المدونة

1. إعداد بيئة العمل

لبدء بناء المدونة، يجب تجهيز بيئة التطوير:

• تثبيت Node.js و npm.

• تثبيت Angular CLI عبر الأمر:

  bash
  CopyEdit
  npm install -g @angular/cli
  

• إنشاء مشروع Angular جديد باستخدام الأمر:

  bash
  CopyEdit
  ng new blog-app
  

• الدخول إلى مجلد المشروع:

  bash
  CopyEdit
  cd blog-app
  

2. إعداد Firebase وربط المشروع

إنشاء مشروع Firebase

• تسجيل الدخول إلى Firebase Console.

• إنشاء مشروع جديد بالاسم المناسب (مثلاً: BlogApp).

• تفعيل Firestore من لوحة التحكم.

• تفعيل Authentication واختيار طرق تسجيل الدخول (مثل البريد الإلكتروني وكلمة المرور).

ربط Angular بـ Firebase

• تثبيت مكتبات Firebase و AngularFire:

  bash
  CopyEdit
  npm install firebase @angular/fire
  

• استيراد AngularFireModule و AngularFirestoreModule و AngularFireAuthModule في ملف app.module.ts:

  typescript
  CopyEdit
  import { AngularFireModule } from '@angular/fire/compat';
  import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
  import { AngularFireAuthModule } from '@angular/fire/compat/auth';
  import { environment } from '../environments/environment';
  
  @NgModule({
    declarations: [...],
    imports: [
      ...,
      AngularFireModule.initializeApp(environment.firebaseConfig),
      AngularFirestoreModule,
      AngularFireAuthModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• إعداد بيانات الاتصال Firebase في ملف environment.ts:

  typescript
  CopyEdit
  export const environment = {
    production: false,
    firebaseConfig: {
      apiKey: "API_KEY",
      authDomain: "PROJECT_ID.firebaseapp.com",
      projectId: "PROJECT_ID",
      storageBucket: "PROJECT_ID.appspot.com",
      messagingSenderId: "SENDER_ID",
      appId: "APP_ID"
    }
  };
  

3. بناء هيكل المدونة الأساسية

تصميم قاعدة البيانات في Firestore

في Firestore، يمكن إنشاء مجموعة (Collection) باسم posts لتخزين المقالات، بحيث يحتوي كل مستند (Document) على الحقول التالية:

• title: عنوان المقال (String)

• content: محتوى المقال (String)

• authorId: معرف الكاتب (String)

• createdAt: تاريخ الإنشاء (Timestamp)

• updatedAt: تاريخ التعديل (Timestamp) (اختياري)

إنشاء نموذج بيانات المقال في Angular

إنشاء ملف TypeScript لتعريف نموذج المقال:

typescript
CopyEdit
export interface Post {
  id?: string;
  title: string;
  content: string;
  authorId: string;
  createdAt: any;
  updatedAt?: any;
}

خدمة لإدارة المقالات

إنشاء خدمة post.service.ts لإضافة، تعديل، حذف، واسترجاع المقالات من Firestore:

typescript
CopyEdit
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';
import { Post } from './post.model';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class PostService {
  private postsCollection: AngularFirestoreCollection<Post>;
  posts: Observable<Post[]>;

  constructor(private afs: AngularFirestore) {
    this.postsCollection = afs.collection<Post>('posts', ref => ref.orderBy('createdAt', 'desc'));
    this.posts = this.postsCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as Post;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
  }

  getPosts(): Observable<Post[]> {
    return this.posts;
  }

  getPost(id: string): Observable<Post> {
    return this.postsCollection.doc<Post>(id).valueChanges();
  }

  addPost(post: Post) {
    post.createdAt = new Date();
    return this.postsCollection.add(post);
  }

  updatePost(id: string, post: Post) {
    post.updatedAt = new Date();
    return this.postsCollection.doc(id).update(post);
  }

  deletePost(id: string) {
    return this.postsCollection.doc(id).delete();
  }
}

4. إضافة خاصية الاستيثاق (Authentication)

تفعيل طرق تسجيل الدخول في Firebase

• من لوحة Firebase، تفعيل طريقة تسجيل الدخول بالبريد الإلكتروني وكلمة المرور (Email/Password).

• يمكن تفعيل طرق أخرى حسب الحاجة مثل Google Sign-In.

خدمة الاستيثاق في Angular

إنشاء خدمة auth.service.ts لإدارة تسجيل الدخول، التسجيل، وتسجيل الخروج:

typescript
CopyEdit
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  user$: Observable<any>;

  constructor(private afAuth: AngularFireAuth) {
    this.user$ = afAuth.authState;
  }

  register(email: string, password: string) {
    return this.afAuth.createUserWithEmailAndPassword(email, password);
  }

  login(email: string, password: string) {
    return this.afAuth.signInWithEmailAndPassword(email, password);
  }

  logout() {
    return this.afAuth.signOut();
  }
}

حماية صفحات المدونة

باستخدام حراس التوجيه (Route Guards) في Angular، يمكن منع غير المسجلين من الوصول إلى صفحات معينة، مثل صفحة إضافة أو تعديل المقالات.

إنشاء حارس auth.guard.ts:

typescript
CopyEdit
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private afAuth: AngularFireAuth, private router: Router) {}

  canActivate(): Observable<boolean> {
    return this.afAuth.authState.pipe(
      map(user => !!user),
      tap(loggedIn => {
        if (!loggedIn) {
          this.router.navigate(['/login']);
        }
      })
    );
  }
}

5. تصميم واجهات المستخدم

صفحة التسجيل وتسجيل الدخول

• إنشاء نموذج تسجيل يحتوي على حقول البريد الإلكتروني وكلمة المرور.

• إنشاء نموذج تسجيل الدخول بطريقة مشابهة.

• ربط النماذج مع خدمة الاستيثاق AuthService لمعالجة التسجيل وتسجيل الدخول.

صفحة عرض المقالات

• عرض قائمة المقالات المسحوبة من Firestore.

• إمكانية اختيار مقال لعرض محتواه بالكامل.

صفحة إضافة وتعديل المقالات

• نموذج لإدخال عنوان المقال والمحتوى.

• ربط النموذج بخدمة PostService لإضافة أو تعديل المقالات.

• تأكد من إرفاق معرف الكاتب (authorId) المرتبط بالمستخدم الحالي.

6. مزايا إضافية لتحسين المدونة

مزامنة البيانات في الوقت الحقيقي

Firestore يدعم التحديث اللحظي، مما يسمح للمدونة بتحديث المحتوى تلقائياً عند إضافة أو تعديل مقال دون الحاجة لتحديث الصفحة يدوياً.

تحسين الأداء باستخدام Lazy Loading

يمكن تحميل مكونات الصفحة عند الحاجة فقط، ما يقلل وقت تحميل التطبيق ويساهم في تحسين تجربة المستخدم.

دعم التوافق مع الأجهزة المختلفة

باستخدام Angular Material أو Bootstrap يمكن تصميم واجهات متجاوبة (Responsive) تناسب الشاشات المختلفة من هواتف وأجهزة لوحية وأجهزة مكتبية.

جدول مقارنة بين ميزات Angular وFirestore في بناء المدونة

الخاتمة

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

هذا التزاوج بين Angular وFirestore بالإضافة إلى الاستيثاق يضمن تطوير مدونة ذات أداء عالٍ، أمان محسّن، وتجربة مستخدم سلسة، ما يجعلها خياراً مثالياً للمطورين الراغبين في بناء تطبيقات ويب حديثة ومتكاملة.

المصادر والمراجع

• Firebase Documentation

• Angular Official Documentation