"Человек, который защищает, направляет или наблюдает за овцой или стадами овец, называется Пастырем". Но как разработчики могут осуществлять пастырство?? Shepherd Js, один из лучших инструментов ОС, который поможет вашим пользователям разобраться в вашем приложении или определенной части вашего приложения в подробной и описательной форме.
 

Что такое Шепард?? ?

Shepherd — это библиотека JavaScript, которая помогает пользователям работать с вашим приложением. Он использует Floating UI, еще одну библиотеку с открытым исходным кодом, для отображения диалогов для каждого «шага» тура.

Короче, проведите своих пользователей по вашему приложению.

Вы можете создавать собственные ознакомительные туры, обучение и объявления для пользователей, чтобы стимулировать их внедрение.

Как заниматься пастырством? ??

Shepherd позволяет вам проводить для пользователей индивидуальный тур или путешествие по вашему приложению или веб-сайту. Shepherd обладает широкими возможностями настройки и минималистичным стилем, что обеспечивает широкие возможности настройки и при этом прост в использовании. Поддерживаются различные платформы, включая React, Ember, Angular, Vue.js, модули ES или простой JavaScript.

Шаги по установке Shepherd ?️:

1. Вы можете установить Shepherd напрямую, используя npm, Yarn, pnpm и Bun, используя следующую команду:

   • установка npm: установка npm shepherd.js
   • установка Yarn: Yarn add shepherd.js
   • установка pnpm: pnpm добавить shepherd.js
   • установка Bun: Bun Add shepherd.js

2. Вы также можете напрямую использовать cdn jsDelivr, чтобы использовать shepherd.
   

Как создать шаги? ?

Создать пастуший тур очень просто, просто следуйте приведенному ниже коду:

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.
               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(); //starts the tour

Как изменить стиль? ?

HTML-код, который библиотека ShepherdJS вставляет в страницу, выглядит примерно так:

   

   

      
Users seem to be down by 12.4%. Is that bad?
      

Поэтому можно упростить нацеливание на элементы (например, стрелку) с помощью чего-то вроде приведенного ниже..

.shepherd-arrow {
  /* Some styles here... */
}

Кроме того, если вы заметили, при добавлении шагов используется идентификатор. Следовательно, это также можно использовать для описания конкретного шага.
 
Вышеупомянутые являются некоторыми основными свойствами. Если кто-то хочет показать прогресс тура, он тоже может это сделать! Следуйте приведенным ниже строкам кода:

when: {
  show() {
    const currentStep = Shepherd.activeTour?.getCurrentStep();
    const currentStepElement = currentStep?.getElement();
    const header = currentStepElement?.querySelector('.shepherd-header');
    const progress = document.createElement('span');
    progress.style['margin-right'] = '315px';
    progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep)   1}/${Shepherd.activeTour?.steps.length}`;
    header?.insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));
  }
}

 
Вы можете получить всю подробную информацию на Официальной странице документа Shepherd, ссылка здесь: https://docs.shepherdpro.com/
 

Крутые проекты с использованием Shepherd Js ?‍?

1️⃣ Крестики-нолики ⭕❌

Либо на скучной лекции, либо при серьезном разговоре с лучшим другом, либо в любой момент жизни мы играли в эту игру, крестики-нолики.
Потрясающий проект по поддержке и возрождению этой игры был создан Сушилом Тапа. Проект ОС. Этот проект демонстрирует одно из лучших применений Shepherd.

Живая демонстрация: https://tictactoe.susheelthapa.com.np/
Ссылка на Github: https://github.com/SusheelThapa/Tic-Tac-Toe
Реализация Shepherd: https://github.com/SusheelThapa/Tic-Tac-Toe/tree/main/src/comComponents/Shepherd

2️⃣ Однокурсник?

StudyMate — это инновационное веб-приложение, предназначенное для повышения качества обучения за счет предоставления постраничных сводок PDF-файлов и создания интерактивных карточек. Благодаря интеграции Shepherd.js StudyMate предлагает функцию экскурсии, которая помогает пользователям беспрепятственно перемещаться по функциям приложения. StudyMate делает его особенно полезным для сеансов редактирования в последнюю минуту, позволяя пользователям быстро просматривать ключевые понятия и информацию в структурированной форме.

Этот проект создан Субашом Ламичхане.

Ссылка на Github: https://github.com/Subash-Lamichhane/StudyMate
Реализация Shepherd: https://github.com/Subash-Lamichhane/StudyMate/blob/main/frontend/src/pages/LandingPage.jsx

3️⃣ СидЛинк ?

SeedLink — это интерфейсное веб-приложение, которое позволяет вам исследовать широкий спектр растений, доступных в близлежащих питомниках и садах. Вы можете купить его или изучить его. Вот и все?? Неа, изучите приложение, чтобы узнать больше! ?

Этот проект создан Роханом Шармой (да, я тот создатель)

Ссылка на Github: https://github.com/RS-labhub/SeedLink-Shepherd
Реализация Shepherd: https://github.com/RS-labhub/SeedLink-Shepherd/blob/main/src/shepherd.js

Двигаемся к концу... ?

Shepherd — это полнофункциональная платформа цифрового внедрения (DAP) с открытым исходным кодом и служба адаптации пользователей.

Shepherd также превратился в профессиональную версию, которая представляет собой платный сервис. Вот список функций, предоставляемых Shepherd-Pro:

• Настраиваемые шаблоны туров
• Интеграция аналитики
• Многоязычная поддержка
• Отслеживание поведения пользователей
• Возможности интеграции
• Адаптивный дизайн
• Механизмы обратной связи
• Расширенная логика ветвления

Если вы еще этим не пользовались, посетите хотя бы один раз! Обещаю, ты не пожалеешь ?

Звездный пастырь на Github ⭐