ساخت یک Tour Guide در انگولار

سلام
توی این مقاله تلاش میکنم به آموزش ساخت یه تور آموزشی یا همون tour guide در انگولار به صورت مرحله به مرحله بپردازم. امیدوارم تا آخر این مقاله همراه من باشید.

قبل از اینکه شروع به این کار بکنم لازم می دونم یه توضیحی درباره تور آموزشی بدم بهتون، فرض کنید یه سامانه یا یک پنل یا به طور کل یه پروژه ای راه اندازی کردین و لازم درباره این پروژه به مخاطب ها آموزش بدین. باید بگم روش های زیای وجود داره مثلا یه فایل داکیومنتی حاضر کنید و توی اون از پروژه خودتون بگید یا یه اصلا یه فایل ویدئویی بسازید و توی خود پروژه ، یوتیوب ، آپارات یا هر جای دیگه ای در دسترس کاربرهای خودتون قرار بدید. اما یه راه فرانتی وجود داره و اون اینه که به کمک تور آموزشی دقیقا برای هر بخش خودتون مثل جدول، منو، دکمه و ... یه توضیحی بذارید و اینو مرحله به مرحله یا حتی صفحه به صفحه ببرید جلو. حالا همه این ها گفتم که برم سراغ آموزشی که توی این مقاله دنبالش هستم.

روش های مختلفی برای Tour Guide وجود داره اما تلاش کردم یکی از ساده ترین اونها در اختیار شما بزارم

مرحله اول : نصب npm

npm i ngx-guided-tour

بعد از نصب این npm لازم یه تنظیماتی توی angular.json انجام بدید:

مرحله دوم: معرفی ماژول

حالا میریم سراغ معرفی ماژول به app.module

...
import { GuidedTourModule, GuidedTourService } from 'ngx-guided-tour';
...

@NgModule({
    declarations: [AppComponent],
    imports: [
      ...
      GuidedTourModule,
     ],
     providers: [
       ...
       GuidedTourService,
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

همیجوری که توی کد دیدید سرویس و ماژول داخل App.module آوردیم.

مرحله سوم: اعلام توضیحات

برای تمیز کد زدنمون و همینطور جدا سازی این آموزش ها از سایر بخش ها یه فایل جدا درست کردم به اسم constants.ts اونجا شروع کردم این model معرفی کردن:

import { GuidedTour, Orientation } from 'ngx-guided-tour';
export const GravityTour: GuidedTour = {
   tourId: 'gravity-tour',
   useOrb: true,
   steps: [
      {
         title: 'خوش آمدید',
         selector: '.tour-step-0', // میتونه نقطه برای کلاس باشه یا # برای شناسه یا اسم تگ
         content: 'به تور  آموزشی ما خوش آمدید. برای شروع بر روی دکمه بعدی کلیک کنید و در صورت لغو این تور آموزشی بر روی لغو کلیک کنید.',
         orientation: Orientation.Top, // جهت نمایش مدال آموزشی در صفحه
    },
    {
          title: 'کار من',
          selector: '.tour-step-1',
          content: 'در بخش کار من وظایفی برای شما تعریف شده است.',
          orientation: Orientation.Left,
     },
   ....
    {   
          title: 'پایان تور آموزشی',      
          content:'تور آموزشی ما همین جا اتمام پیدا می کند، ممنون که در این تور همراه ما بودید.',
    },
  ],
};

مرحله چهارم: اعلام شروع به کار

برای اینکه این بخش شروع به حرکت کند و کاربر آن را دنبال کند باید یک دستور در کامپوننت خودتون تحت عنوان رخداد کلیک یا هر چیز دیگه قرار بدید به این شکل

gravityTour: GuidedTour = GravityTour;
startTourGuide() {
     this.guidedTourService.startTour(this.gravityTour);
}

لازم هستش که توی app.component خودتون این تگ هم اضافه کنید.

<ngx-guided-tour skipText=&quotلغو&quot nextText=&quotبعدی&quot backText=&quotقبلی&quot doneText=&quotپایان&quot>
</ngx-guided-tour>

در نهایت خروجی کار شما به این شکل خواهد بود.

در اینجا به انتهای آین پست آموزشی رسیدیم امیدوارم که از این پست نهایت استفاده ببرید.
ممنون از توجه شما

:))