এঙ্গুলারে মক ডাটা ব্যবহার করা - এঙ্গুলার

angularmock-data

মক বা ফেক ডাটা কি?

মক বা ফেক হচ্ছে আসলে কোন ব্যাকএন্ড সার্ভিস থেকে ডাটা আসবে না কিন্তু এঙ্গুলার এপ মনে করবে সে ব্যাকএন্ড সার্ভিস থেকে ডাটা পেয়েছে এবং সে এক্সাক্টলি ব্যাকএন্ড ডাটা হলে যা বিহেভ করার তাই করবে।


মক কোথায় দরকার?

১. যদি আপনি প্রোটোটাইপ বানাতে চান, মানে হচ্ছে রিয়েল প্রোডাক্ট না বানিয়ে প্রোডাক্ট কেমন হবে তার একটা ধারণা কাউকে দিতে চান।

২. ফ্রন্টএন্ড ফাস্ট এপ্রোচ এ প্রোডাক্ট ডেভেলপ করতে চান

৩. ব্যাকএন্ড এপ রেডি আছে কিন্তু ডেভেলপারের মেশিন থেকে কানেক্ট করা যাবে না



এনগুলারে মক বা ফেক করতে হলে কি করতে হবে?

১. প্রথমে দুইটা ইন্টারসেপ্টর লিখতে হবে, প্রথমটা হবে মক ইন্টারসেপ্টর এবং দ্বিতীয়টাহবে ব্ল্যাঙ্ক বা ফাঁকা ইন্টারসেপ্টর



মক ইন্টারসেপ্টর

@Injectable()
export class MockBackendInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const { url, method, headers, body } = request;
    console.log(url);
    // এখানে মক কোড লেখা হবে 
    }
   }
    

ফাঁকা বা ব্ল্যাঙ্ক ইন্টারসেপ্টর

@Injectable()
export class HttpRequestInterceptor implements HttpInterceptor {
  constructor(private injector: Injector) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request);
  }
}


২. environment ফাইল এ mock ফ্ল্যাগ যুক্ত করতে হবে,

export const environment = {
  production: false,
  mock: true,
};


৩. app.module.ts ফাইলে mock ফ্ল্যাগের উপর ভিত্তি করে ইন্টারসেপ্টর লোড করতে হবে, এর জন্য প্রোভাইডারে নিচের কোড যুক্ত করতে হবে

providers: [
  {
    // Mock interceptor
    provide: HTTP_INTERCEPTORS,
    useClass: environment.mock ? MockBackendInterceptor : HttpRequestInterceptor,
    multi: true
  },
  {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true
  },
],

এখানে খুব সহজ লজিক, যদি মক ট্রু হয় তাহলে মক ইন্টারসেপ্টর কাজ করবে অন্যথায় আসল ইন্টারসেপ্টর কাজ করবে।


এখন মক ইন্টারসেপ্টরের ভিতরে নিজের মনে মত কোড লিখা যায়।আমি আমার ব্লগের জন্য লেখা লগইন কোডের অংশ তুলে দিলাম।

প্রথম একটা ইন্টারফেস বানিয়েছি,কারণ আমার অনেকগুলা সার্ভিস এ একই কাজ করতে হবে।

export interface MockService {
  process(request: HttpRequest<any>);
}


তারপর সেটাকে ইমপ্লিমেন্ট করেছি

export class MockLoginService implements MockService {

  process(request: HttpRequest<any>) {
    const {email, password} = request.body;
    return this.login(email, password);
  }



  login(email, password) {

    if (email === 'user@gmail.com' && password === '123456') {
      return of(
        new HttpResponse({
          status: 200,
          body: {
            email, token: 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbjFAdGFSIsInJvbGVzIjpbIlJPTEVfUkVGUkVTSF9U' +
                'T0tFTiJdLCJpc3MiOiJodHRwbG9yLmNodW1ib2suY29tIiwianRpIjoiZDQxZmVjMjEtN2U0My00ZTk0LWI1NDItM2R' +
                'jMWU4NWFhODQ3IiwiaWF0IjoxNTU3NzY2MDI0LCJleHAiOjE1NTc4MjYwMjR9.BRgbwxYrYqjOQ7IJ-A3D_ibsj2_yM3a-hrceS' +
                '5lnZDSLOEn3K7VHWRw_vgFNwKwI-ne3eQjG1mu6Dwg'
          }
        }));
    }

    return throwError({
      status: 401,
      error: { message: 'Email or Password is incorrect' }
    });
  }
}



তারপর মক ইন্টারসেপ্টরের ভিতরে নিচের কোড লিখেছি

let ms: MockService;
switch (true) {
  case url.indexOf(ApiUrl.login) > -1:
    ms = new MockLoginService();
    break;
..........
}


কাজ শেষ। এখন যদি এঙ্গুলার ডেভ মোডে চালান এবং যদি ফর্ম পোস্ট করে /login এ, তাহলে মক সার্ভিস সেটা একসেপ্ট করে একটা কিছু রিটার্ন দিবে। ধন্যবাদ।