"Se llama Pastor a la persona que protege, guía o vela una oveja o rebaños de ovejas". Pero, ¿cómo pueden los desarrolladores pastorear? Shepherd Js, una de las mejores herramientas del sistema operativo para guiar a sus usuarios y permitirles comprender su aplicación o una parte específica de su aplicación de una manera detallada y descriptiva.
 

¿Qué es el pastor? ?

Shepherd es una biblioteca de JavaScript para guiar a los usuarios a través de su aplicación. Utiliza la interfaz de usuario flotante, otra biblioteca de código abierto, para representar cuadros de diálogo para cada "paso" del recorrido.

En resumen, guía a tus usuarios a través de un recorrido por tu aplicación.

Puedes crear recorridos personalizados de incorporación de usuarios, capacitación y anuncios para impulsar la adopción por parte de los usuarios.

¿Cómo hacer Pastoreo? ??

Shepherd le permite guiar a los usuarios a través de un recorrido o viaje personalizado dentro de su aplicación o sitio web. Shepherd, altamente personalizable con estilos minimalistas, permite una personalización poderosa y al mismo tiempo es fácil de usar. Se admiten varios marcos, incluidos React, Ember, Angular, Vue.js, ES Modules o JavaScript simple.

¿Pasos para instalar Shepherd?️:

1. Puedes instalar shepherd directamente usando npm, Yarn, pnpm y bun usando el siguiente comando:

   • instalación de npm: instalación de npm shepherd.js
   • instalación de hilo: hilo agregar shepherd.js
   • instalación de pnpm: pnpm agrega shepherd.js
   • instalación de bun: bun agrega shepherd.js

2. También puedes usar directamente el cdn jsDelivr para usar shepherd.
   

¿Cómo crear pasos? ?

Crear un tour de pastor es muy fácil, solo sigue el siguiente código:

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

¿Cómo cambiar de estilo? ?

El HTML que la biblioteca ShepherdJS inyecta en la página se parece a esto:

   

   

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

Por lo tanto, hacer que sea más fácil apuntar a elementos (por ejemplo, la flecha) con algo como lo siguiente...

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

Además, si lo notó, cuando agregó los pasos, se usa la identificación. Por lo tanto, eso también se puede utilizar para apuntar a la descripción de un paso en particular.
 
Las anteriores son algunas propiedades básicas. Si alguien quiere mostrar el progreso de la gira, ¡también puede hacerlo! Siga las siguientes líneas de código:

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'));
  }
}

 
Puede obtener todos los detalles en la Página oficial de documentos de Shepherd, enlace proporcionado aquí: https://docs.shepherdpro.com/
 

¿Proyectos interesantes que utilizan Shepherd Js?

1️⃣ Tres en raya ⭕❌

Ya sea asistiendo a una conferencia aburrida, o teniendo una conversación seria con tu mejor amigo, o en cualquier momento de la vida, hemos jugado a este juego, tres en raya.
Susheel Thapa ha realizado un proyecto increíble para apoyar y revivir este juego. El proyecto es SO. Este proyecto muestra uno de los mejores usos de Shepherd.

Demostración en vivo: https://tictactoe.susheelthapa.com.np/
Enlace de Github: https://github.com/SusheelThapa/Tic-Tac-Toe
Implementación de Shepherd: https://github.com/SusheelThapa/Tic-Tac-Toe/tree/main/src/components/Shepherd

2️⃣ ¿Compañero de estudio?

StudyMate es una aplicación web innovadora diseñada para mejorar la experiencia de aprendizaje al proporcionar resúmenes de archivos PDF por páginas y generar tarjetas didácticas interactivas. Con la integración de Shepherd.js, StudyMate ofrece una función de visita guiada para ayudar a los usuarios a navegar por las funcionalidades de la aplicación sin problemas. StudyMate lo hace particularmente útil para sesiones de revisión de último momento, ya que permite a los usuarios revisar rápidamente información y conceptos clave de manera estructurada.

Este proyecto está construido por Subash Lamichhane.

Enlace de Github: https://github.com/Subash-Lamichhane/StudyMate
Implementación de Shepherd: https://github.com/Subash-Lamichhane/StudyMate/blob/main/frontend/src/pages/LandingPage.jsx

3️⃣ ¿Enlace semilla?

SeedLink es una aplicación web frontend que le permite explorar una amplia gama de plantas disponibles en viveros y jardines cercanos. Puedes comprarlo o investigar sobre él. ¿¿Eso es todo?? ¡No, explora la aplicación para obtener más información! ?

Este proyecto está creado por Rohan Sharma (sí, soy ese creador)

Enlace de Github: https://github.com/RS-labhub/SeedLink-Shepherd
Implementación de Shepherd: https://github.com/RS-labhub/SeedLink-Shepherd/blob/main/src/shepherd.js

¿Avanzando hacia el final...?

Shepherd es una plataforma de adopción digital (DAP) y un servicio de incorporación de usuarios de código abierto y con todas las funciones.

Shepherd también ha evolucionado a la versión pro, que es un servicio pago. Aquí está la lista de funciones proporcionadas por Shepherd-Pro:

• Plantillas de recorridos personalizables
• Integración de análisis
• Soporte multilingüe
• Seguimiento del comportamiento del usuario
• Capacidades de integración
• Diseño responsivo
• Mecanismos de retroalimentación
• Lógica de ramificación avanzada

Si aún no lo has usado, ¡al menos visítalo una vez! Te lo prometo, ¿no te arrepentirás?

Star Shepherd en Github ⭐