راه اندازی فروشگاه آنلاین در انگولار

سلام
امیدوارم حال دلتون خوب باشه! در این مقاله به راه اندازی یه فروشگاه آنلاین بسیار کوچیک که البته تمرکز اصلیم روی بکارگیری این موضوع به کمک RXJS هستش، می خوام بپردازم. درسته توی عنوان این مقاله کلمه انگولار آوردم اما دوستانی که از فریم ورک ها و کتابخونه های دیگه ای هم که استفاده می کنن این مقاله براشون خارج از لطف نیست و می تونن دنبال کنن.
در نظر بگیرید که شما دارید یک برنامه‌ی Angular برای یک فروشگاه آنلاین ایجاد می‌کنید. در این برنامه، سه کامپوننت وجود دارد: کامپوننت "سبد خرید" (CartComponent)، کامپوننت "لیست محصولات" (ProductListComponent) و کامپوننت "پیام‌های سیستم" (SystemMessagesComponent). حالا فرض کنید که شما نیاز دارید وقتی کاربر یک محصول را به سبد خرید اضافه کند، سبد خرید بروزرسانی شده و پیامی در قسمت پیام‌های سیستم نمایش داده شود.

ابتدا یک رویداد به نام "محصول اضافه شده به سبد خرید" تعریف می‌کنیم که شامل جزئیات محصول مورد نظر است. سپس در کامپوننت "لیست محصولات"، وقتی کاربر روی دکمه "افزودن به سبد خرید" کلیک می‌کند، این رویداد را ارسال می‌کنیم. در کامپوننت "سبد خرید"، مشترکی برای این رویداد ایجاد می‌کنیم و وقتی رویداد ارسال می‌شود، سبد خرید را بروزرسانی می‌کنیم. همچنین، یک مشترک در کامپوننت "پیام‌های سیستم" ایجاد می‌کنیم تا وقتی رویداد ارسال شود، پیامی را نمایش دهد.

// app.component.ts
import { Component } from '@angular/core';
import { SignalService } from './signal.service';

@Component({
  selector: 'app-root',
  template: `
      <h1>فروشگاه آنلاین</h1>
      <app-product-list></app-product-list>
      <app-cart></app-cart>
       <app-system-messages></app-system-messages>
   `,
})
export class AppComponent {
   constructor(private signalService: SignalService) { }
}

product-list.component.ts

import { Component } from '@angular/core';
import { SignalService } from '../signal.service';

@Component({
  selector: 'app-product-list',
  template: `
    <h2>لیست محصولات</h2>
    <ul>
      <li *ngFor=&quotlet product of products&quot>
        {{ product.name }}
        <button (click)=&quotaddToCart(product)&quot>افزودن به سبد خرید</button>
      </li>
    </ul>
  `,
})
export class ProductListComponent {
  products = [
    { id: 1, name: 'محصول 1', price: 10 },
    { id: 2, name: 'محصول 2', price: 20 },
    { id: 3, name: 'محصول 3', price: 30 },
  ];
  constructor(private signalService: SignalService) { }
  addToCart(product: any) {
    this.signalService.sendEvent('محصول اضافه شده به سبد خرید', product);
  }
}

cart.component.ts

import { Component } from '@angular/core';
import { SignalService } from '../signal.service';
@Component({
  selector: 'app-cart',
  template: `
    <h2>سبد خرید</h2>
    <ul>
      <li *ngFor=&quotlet item of cartItems&quot>
        {{ item.product.name }} - {{ item.product.price }}
      </li>
    </ul>
  `,
})
export class CartComponent {
  cartItems: any[] = [];
  constructor(private signalService: SignalService) {
    this.signalService.subscribeEvent('محصول اضافه شده به سبد خرید', (product: any) => {
      this.addToCart(product);
    });
  }
  addToCart(product: any) {
    this.cartItems.push({ product: product });
  }
}

system-messages.component.ts

import { Component } from '@angular/core';
import { SignalService } from '../signal.service';
@Component({
  selector: 'app-system-messages',
  template: `
    <h2>پیام‌های سیستم</h2>
    <ul>
      <li *ngFor=&quotlet message of messages&quot>{{ message }}</li>
    </ul>
  `,
})

export class SystemMessagesComponent {
  messages: string[] = [];
  constructor(private signalService: SignalService) {
    this.signalService.subscribeEvent('محصول اضافه شده به سبد خرید', (product: any) => {
      this.showMessage(`محصول ${product.name} به سبد خرید اضافه شد.`);
    });
  }
  showMessage(message: string) {
    this.messages.push(message);
  }
}

حالا می رسیم به مهمترین قسمت جایی که میایم و این سرویس معرفی میکنیم

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
  providedIn: 'root'
}

export class SignalService {
  private eventSubjects: { [eventName: string]: Subject<any> } = {};
  sendEvent(eventName: string, data?: any) {
    if (!this.eventSubjects[eventName]) {
      this.eventSubjects[eventName] = new Subject<any>();
    }
    this.eventSubjects[eventName].next(data);
  }
  subscribeEvent(eventName: string, callback: (data?: any) => void) {
    if (!this.eventSubjects[eventName]) {
      this.eventSubjects[eventName] = new Subject<any>();
    }
    this.eventSubjects[eventName].subscribe(callback);
  }
}

در این مثال، هنگامی که کاربر روی دکمه "افزودن به سبد خرید" در کامپوننت "لیست محصولات" کلیک می‌کند، رویداد "محصول اضافه شده به سبد خرید" ارسال می‌شود. سپس کامپوننت "سبد خرید" این رویداد را مشترک شده و سبد خرید را بروزرسانی می‌کند. همچنین، کامپوننت "پیام‌های سیستم" نیز این رویداد را مشترک شده و پیامی درباره اضافه شدن محصول به سبد خرید نمایش می‌دهد.

خب به پایان این مقاله رسیدیم. امیدوارم که از این مقاله استفاده کامل داشه باشید.
موفق باشید.
:))