برترین کتابخانه های تور جاوا اسکریپت که به شما کمک می کند تا کاربران را در استفاده از برنامه خود راهنمایی کنید.
سلام? توی این مطلب قراره بهتون ۶ تا از کتابخونه های ساخت تور آموزشی برای وبسایت رو معرفی کنم که بتونید باهاشون برای سایت خودتون تور های آموزشی بسازید و کاربرانی که تازه وارد وبسایت شما میشن، یاد بگیرن که چطوری باید با سایت شما کار کنن. پس با من همراه باشید☺️
کتابخونه های تور آموزشی چیکار میکنن؟
کتابخونه های تور و راهنما به وجود اومدن تا به شما کمک کنن که کاربرای خودتون رو برای استفاده از برنامتون راهنمایی کنید. این کتابخونه ها با اضافه کردن اطلاعات اضافی به UI شما، با نمایش دادن یک سری نکات و متن و با یکسری دستورالعمل های گام به گام، عملکرد برنامه رو به کاربر توضیح میدن که ما قصد داریم توی این مطلب بریم سراغ ۶ تا از برترین کتابخونه های ساخت تور آموزشی رو بهتون معرفی کنیم
۱. Intro.js
Intro.js به دلیل ظاهر کاربر پسندش بسیار مورد استفاده قرار میگیره و دارای ۱۹ هزار ستاره GitHub است. مهمترین ویژگی های اون عبارتند از:
- بدون وابستگی: به هیچ وابستگی دیگری نیاز نداره.
- کوچک و سریع: اندازه کوچیک کتابخانه روند هدایت را روان و آسون می کنه. حجم کلی فایل های جاوا اسکریپت ۱۰ کیلوبایت و CSS 2.5 کیلوبایت است.
- کاربر پسند: ناوبری کاربر پسند است و تم های مختلفی را ارائه می ده که می تونن بر اساس ترجیح شما انتخاب بشن.
- سازگاری با مرورگر: روی همه مرورگرهای اصلی مانند Google Chrome، Mozilla Firefox، Opera، Safari و Internet Explorer کار می کند.
- مستندات بسیار عالی و روان: خیلی عالی و روان همه قابلیت هارو داخل مستنداتشون توضیح دادن.
Intro.js رو چطور نصبش کنیم؟
خب برای نصب نیاز به npm و node دارید و میتونید با استفاده از راه های زیر اون رو نصب کنید:
- Its GitHub repository: use, git clone https://github.com/usablica/intro.js.git
- using bower: bower install intro.js - save
- using npm: npm install intro.js - save
- CDNs (jsdeliver.com, cdnjs.com)
چطور از Intro.js استفاده کنیم؟
بعد از اینکه intro.js رو نصب کردین ۳ مرحله تا ساخت تور آموزشی فاصله دارین:
- فایل های JS و CSS (intro.js و introjs.css) را به پروژه خود اضافه کنید. اگر به پشتیبانی از زبان راستچین نیاز دارید، میتونید introjs-rtl.min.css را نیز اضافه کنید.
- ویژگی های data-intro و data-step را به عناصر HTML مربوطه اضافه کنید. این کار intro.js را برای عناصر خاص فعال می کند.
- تابع جاوا اسکریپت زیر را فراخوانی کنید:
introJs().start();
از پارامتر اضافی زیر برای فراخوانی Intro.js در یک عنصر یا کلاس خاص استفاده کنید.
introJs(".introduction-farm").start();
Intro.js توسط بسیاری از سازمان ها مانند SAP، Amazon، Nestle و Kobo استفاده می شود.
۲. Shepherd
دومین کتابخونه تور آموزشی که میخوام بهتون معرفی کنم خیلی سبک و سادس و ظاهر جذابی داره به نظر من و خیلی روون کار میکنه. توی گیت هاب هم ۸.۱k ستاره داره که ویژگی های کلیدیش عبارت اند از:
- قابلیت دسترسی: پشتیبانی از ناوبری صفحه کلید را ارائه می دهد، از انطباق a11y پیروی می کند و همچنین از جاوا اسکریپت برای فعال کردن تله گذاری فوکوس در عناصر DOM استفاده می کند.
- بسیار قابل تنظیم: اجازه می دهد تا ظاهر و احساس را بدون تأثیر بر عملکرد تغییر دهید.
- Framework Ready: به راحتی در فریم ورک front-end پروژه شما گنجانده می شود.
- مستندات: اسناد نصب و سفارشی‌سازی‌ها از جمله قالب‌بندی و استایل پروژه‌های شما را پوشش می‌دهد.
چطور shepherd رو نصبش کنیم؟
این کتابخونه با اکثر فریمورک های فرانت سازگاری داره و براش اومدن و پیج هایی رو توسعه دادن تا راحت تر بشه ازش توی محیط های مختلف استفاده کرد.
- انگولار: angular-shepherd یک پکیج برای انگولار است که با نسخه ۸ به بالا سازگاری دارد.
- امبر: ember-shepherd هم یک پکیج برای ember که با نسخه ۳.۸ به بالا سازگاره.
- ری اکت: react-shepherd اینم پیکش واسه ری اکت.
- ویو: vue-shepherd و در آخر برای vue
شما میتونید اون رو با استفاده از npm یا yarn نصب کنید:
npm install shepherd.js -save yarn add shepherd.js
و یا اینکه مستقیما از CDN های JsDeliver اون رو فراخوانی کنید:
<script src="https://cdn.jsdelivr.net/npm/shepherd.js@5.0.1/dist/js/shepherd.js"></script>
چطور از shepherd استفاده کنیم؟
پس از نصب Shepherd، می تونید فایل های CSS و JS را به صورت زیر اضافه کنید:
<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/> <script src="shepherd.js/dist/js/shepherd.min.js"></script>
در اینجا نمونه ای از ایجاد یک تور Shepherd و افزودن مراحل با عناصر DOM متصل به آن آورده شده.
const tour = new Shepherd.Tour({
defaultStepOptions: {
cancelIcon: {
enabled: true
},
classes: 'class-1 class-2',
scrollTo: { behavior: 'smooth', block: 'center' }
}
});
tour.addStep({
title: 'Creating a Shepherd Tour',
text: `Creating a Shepherd tour is easy. too!\
Just create a \`Tour\` instance, and add as many steps as you want.`,
attachTo: {
element: '.hero-example',
on: 'bottom'
},
buttons: [
{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back'
},
{
action() {
return this.next();
},
text: 'Next'
}
],
id: 'creating'
});
tour.start();
کیا از shepherd استفاده میکنن؟
Shephard توسط شرکت هایی مثل SimplePlanner و Brokermate برای راهنمایی کاربران خود در مراحل اولیه برنامه های خود استفاده می شود.
۳. Bootstrap Tour
خب هرجا هم که صحبت از سادگی و سرعت باشه، نام خوش bootstrap میدرخشه. این کتابخونه کار خاصی نکرده و فقط اومده از همون استایل ساده bootstrap استفاده کرده و با کمی چاشنی jquery این کتابخونه سبک رو ایجاد کرده و تا حالا توی گیت هاب تونسته حدود ۴ هزارتا ستاره بگیره.
چطور bootstrap tour رو نصبش کنیم؟
شما میتونید به سادگی از فایل های css و js بوت استرپ استفاده کنید:
<link href="bootstrap.min.css" rel="stylesheet"> <link href="bootstrap-tour.min.css" rel="stylesheet"> ... <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="bootstrap-tour.min.js"></script>
یا از فایل css و js مستقل استفاده کنید:
<link href="bootstrap-tour-standalone.min.css" rel="stylesheet"> ... <script src="jquery.min.js"></script> <script src="bootstrap-tour-standalone.min.js"></script>
حتی میتونید از CDN ها هم استفاده کنید:
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.js https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour-standalone.min.js https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour.js https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/js/bootstrap-tour.min.js https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.css https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour-standalone.min.css https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour.css https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.12.0/css/bootstrap-tour.min.css
چطور از bootstrap tour استفاده کنیم؟
بعد از اینکه فایل هارو اضافه کردین میتونید با استفاده از مثال زیر یک تور ساده آموزشی ایجاد کنید:
// Instantiate the tour
var tour = new Tour({
steps: [
{
element: "#my-element",
title: "Title of my step",
content: "Content of my step"
},
{
element: "#my-other-element",
title: "Title of my step",
content: "Content of my step"
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
۴. Chardin.js
Chardin.js با الهام از تور آموزشی جدید Gmail، یک پوشش ساده از دستورالعمل ها روی عناصر موجود ایجاد میکنه و از یک پلاگین JQuery برای نمایش دستورالعمل ها استفاده می کنه. صفحه GitHub حاوی دستورالعمل ها و مستندات کاملیه و دارای ۴.۹k ستاره GitHub است.
Chardin.js رو چطور نصبش کنیم؟
میتونید از مخزن گیت هاب fork بگیرین و یا فایل های الزامی زیر رو دانلود و به فایل html خودتون اضافش کنید.
<link href="chardinjs.css" rel="stylesheet"> <script src="chardinjs.min.js"></script>
چطور از Chardin.js استفاده کنیم؟
بعد از تنظیم، می تونید دستورالعمل ها را به سند اضافه کنید. در زیر نمونه ای از افزودن دستورالعمل به عنصر تصویر آورده شده. اول داده متنی را که باید نمایش داده شود را تنظیم می کنید و موقعیت های داده متن را تعیین می کنید.
<img src="img/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" />
برای اجرای کتابخونه در حالت ترتیبی، باید از دستورالعمل‌های مختلفی مانند data-chardin-sequenced=”true”، data-chardin-auto=”true” و data-chardin-delay=”۱۰۰” استفاده کنید تا دستورالعمل‌ها به صورت خودکار نمایش داده شوند.
<body data-chardin-sequenced="true" data-chardin-auto="false" data-chardin-delay="800" >
هنگامی که عناصر با دستورالعمل‌ها آماده شدند، میتونید کتابخانه را با کلیک کردن روی دکمه مقداردهی اولیه کنید یا اون رو به طور خودکار اجرا کنید. کتابخانه همچنین می تونه به یک scope خاص محدود بشه.
$('body').chardinJs();
$('body').on('click', 'button[data-toggle="chardinjs"]', function (e) {
e.preventDefault();
return ($('body').data('chardinJs')).toggle();
});
// Run Explicitly
$('body').chardinJs('start')
// Confine to container
$('.container').chardinJs('start')
۵. PageGuide
PageGuide یک راهنمای هوشمند برای برنامه های تعاملی، پویا و تک صفحه ای مبتنی بر jQuery و CSS3 است.
چطور PageGuide رو نصبش کنیم؟
شما می توانید PageGuide را به یکی از چهار روش زیر نصب کنید:
- آخرین نسخه را از GitHub دانلود کنید.
- کلون مخزن: git clone https://github.com/tracelytics/pageguide.git
- Install with Bower: bower install pageguide
- Install using npm: npm install pageguide
برای تنظیمات اولیه، pageguide.js و فایل CSS را به صورت زیر اضافه کنید:
<script src="{YOUR_PATH}/pageguide.min.js"></sc
<link rel="stylesheet" href="{YOUR_PATH}/pageguide.css">
چطور از PageGuide استفاده کنیم؟
برای مقداردهی اولیه PageGuide کد زیر را به فایل HTML خود اضافه کنید:
$(document).ready(function() {
tl.pg.init({ /* optional preferences go here */ });
});
انتخابگر را در <ul> مشخص کنید، برای نمایش متن توسط PageGuide مطابقت داده می شود. در ادامه نمونه ای از افزودن pageguide.js به پایین صفحه رو براتون آماده کردم.
<ul id="tlyPageGuide" data-tourtitle="REPLACE THIS WITH A TITLE">
<li class="tlypageguide_left" data-tourtarget=".first_element_to_target">
<div>
Here is the first item description. The number will appear to the left of the element.
</div>
</li>
<li class="tlypageguide_right" data-tourtarget="#second_element_to_target">
<div>
Here is the second item description. The number will appear to the right of the element.
</div>
</li>
<li class="tlypageguide_top" data-tourtarget=".third_element_to_target > div.is_here">
<div>
Here is the third item description. The number will appear above the element.
</div>
</li>
<li class="tlypageguide_bottom" data-tourtarget="#fourth_element_to_target">
<div>
Here is the fourth item description. The number will appear below the element.
</div>
</li>
</ul>
PageGuide برای نمایش پیام های ثابت در صفحه استفاده می شود و در نتیجه درهم ریختگی اون کمتر میشه.
۶. Hopscotch
Hopscotch توسط Gordon Koo و Hans van de Bruggen به عنوان یک ابزار منبع باز در طول برنامه LinkedIn’s Incubator ساخته شد. هدف اصلی اون حل مشکلات قابلیت استفاده، شهودی بودن و عملکرد بود.
با ۴.۳k ستاره GitHub، تنها ۸ کیلوبایت در حالت کوچک شده و gzip شده حجم داره. اگرچه نیازی به وابستگی ندارد، اما در صورت موجود بودن در صفحه ممکنه از jQuery استفاده بکنه.
چطور hopscotch رو نصب کنیم؟
از Grunt.js برای build گرفتن پروژه استفاده کنید. بعد از اجرا ۲ فایل در اختیار شما میذاره که شما این دو فایل رو داخل پروژه خودتون اضافه میکنید.
چطور از hopscotch استفاده کنیم؟
بعد از تکمیل تنظیمات اولیه، میتونید تور رو با استفاده از JSON راه‌اندازی کنید.
// First define your tour.
var tour = {
"id": "hello-hopscotch",
"steps": [
{
"target": "profile-picture",
"placement": "right",
"title": "Profile Picture",
"content": "This is your profile picture. Looking good!"
},
{
"target": "find-conn",
"placement": "bottom",
"title": "Find Connections",
"content": "The internet is always more fun when you connect with others. Find some connections by clicking here."
}
]
};
// Then start the tour.
hopscotch.startTour(tour);
Hopscotch رو می تونید با استفاده از چارچوب تست Jasmine آزمایش کنید و امکان ادغام مداوم با Travis CI را فراهم می کنه.
منبع: medium
