Présentation de votre application avec Shepherd

Les plats clés

• Shepherd, développé par HubSpot, est une simple bibliothèque JavaScript qui aide à guider les utilisateurs à travers une tournée d'application, ce qui rend le processus d'introduction d'une application aux utilisateurs plus efficace et plus interactive.
• La bibliothèque est open-source et n'a pas de dépendances, ce qui en fait un choix préféré pour les développeurs. Il permet la création d'étapes, chacune avec son propre texte, position et actions, et fournit une API étendue pour la personnalisation.
• Malgré ses caractéristiques prometteuses, Shepherd a une prise en charge limitée du navigateur, en particulier pour IE 9. Cependant, il peut s'agir d'un outil précieux pour que les développeurs ne prévoient pas de soutenir les navigateurs plus âgés. Il offre également une API simple et une documentation claire, ce qui le rend accessible aux développeurs de tous niveaux.

En tant que développeur Web, vous réalisez probablement que la création d'une application est souvent la partie facile - la présenter au monde est une tâche difficile en soi. Certains préfèrent créer des présentations, d'autres font des vidéos. Ne serait-ce pas bien si vous aviez quelque chose pour vous aider à parcourir vos utilisateurs à travers votre application? Entrez Shepherd, par HubSpot. Shepherd est une simple bibliothèque JavaScript qui vous aide à guider vos utilisateurs à travers une visite de votre application. Il vous aide à diriger vos utilisateurs vers le bon endroit, tout comme un berger s'occupe de son troupeau de moutons. Il existe également d'autres bibliothèques à cet effet, mais la raison pour laquelle je préfère le berger est qu'il n'a pas de dépendances. Il prend également un support pour CoffeeScript, bien que nous n'explorerons JavaScript que ici.

Pour commencer

Shepherd est open source et son code peut être trouvé sur GitHub. La démo de berger est également disponible sur HubSpot. Commençons. Pour l'impatient, voici le code de base à démarrer. Cela crée une visite en un pas de votre application. Cela lie la boîte de dialogue au bas de l'élément correspondant par le sélecteur #id_selector.

<span>var tour = new Shepherd<span>.Tour</span>({
</span>  <span>defaults: {
</span>    <span>classes: 'shepherd-theme-arrows',
</span>    <span>scrollTo: true
</span>  <span>}
</span><span>});
</span>
tour<span>.addStep('myStep', {
</span>  <span>title: 'Hi there!',
</span>  <span>text: 'This would help you get started with this application!',
</span>  <span>attachTo: '#id_selector bottom',
</span>  <span>classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>});</span>

berger berger

Maintenant que vous avez le code simple en cours d'exécution, décomposons les étapes en pièces que nous pouvons comprendre.

comprend

Vous devez inclure le fichier JavaScript Single Shepherd. Shepherd est également livré avec un thème par défaut, contenu dans un fichier CSS.

<span><span><span><link> type<span>="text/css"</span> rel<span>="stylesheet"</span> href<span>="css/shepherd-theme-arrows.css"</span> /></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="./shepherd.min.js"</span>></span><span><span></span>></span></span></span>

Initialiser le berger

L'exemple de code suivant montre comment une tournée est créée via JavaScript. Étant donné que vous ajouterez des étapes à votre visite sous peu, l'option par défaut dans l'initialisation ajoute ces options à toutes vos étapes, sauf si vous les remplacez:

tour <span>= new Shepherd<span>.Tour</span>({
</span>  <span>defaults: {
</span>    <span>classes: 'shepherd-theme-arrows',
</span>    <span>scrollTo: true
</span>  <span>}
</span><span>});</span>

Création d'étapes

Voyons à nouveau ce code «de démarrage». Voici le code qui initie une seule étape de la tournée:

tour<span>.addStep('myStep', {
</span>  <span>title: 'Hi there!',
</span>  <span>text: 'This would help you get started with this application!',
</span>  <span>attachTo: '#id_selector bottom',
</span>  <span>classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>});</span>

Vous pouvez attacher un bouton supplémentaire si vous prévoyez d'avoir plusieurs étapes. Ce qui suit est un exemple de la façon d'utiliser les boutons si vous avez deux étapes:

tour<span>.addStep('step1', {
</span>  <span>...
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>}, {
</span>      <span>text: 'Next',
</span>      <span>action: tour.next,
</span>      <span>classes: 'shepherd-button-example-primary'
</span>    <span>}
</span>  <span>]
</span><span>});
</span>
tour<span>.addStep('step2', {
</span>  <span>...
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Back',
</span>      <span>action: tour.back,
</span>      <span>classes: 'shepherd-button-example-primary'
</span>    <span>}, {
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>} 
</span>  <span>]
</span><span>});</span>

Démarrez la tournée

Après avoir organisé le tour, il ne reste plus que de le démarrer!

tour<span>.start();</span>

L'API

Shepherd fournit une API étendue, ainsi qu'une documentation qui explique son comportement. Ici, nous passerons par quelques appels utiles.

Instances de tournée

Tout d'abord, créez la tournée comme indiqué ci-dessous.

myTour <span>= new Shepherd<span>.Tour</span>({ options })</span>

Maintenant, nous allons voir comment nous pouvons travailler avec cette instance. Les étapes et les défauts sont les options de l'instance de la tournée. Ses méthodes sont décrites ci-dessous.

• addstep (ID, Options) - Comme nous l'avons vu ci-dessus, une étape est créée en lui attribuant un ID, puis en ajoutant des options telles que du texte ou des boutons, qui sont décrits plus tard.
• GetById (ID) - Cette méthode est utilisée pour sélectionner une étape particulière par son id.
• show (id) - afficher une étape particulière par id.
• sur (événement, gestionnaire) - lie un événement à votre tournée. Ceci est similaire à la méthode bind () de jQuery.
• OFF (événement, gestionnaire) - Débindonne un événement.

Une instance de tournée propose également des événements comme Start, Complete, Show et Hide.

étapes

Bien que nous ayons déjà ajouté des étapes, examinons de plus près. La liste suivante décrit les options que vous pouvez définir.

• Titre - Vous pouvez ou non appliquer un titre.
• Texte - Le texte à afficher dans l'étape.
• attachto - il y a deux parties: le sélecteur de l'élément où l'étape doit être attachée, et la position pour attacher l'étape (c'est-à-dire #id_selector en bas).
• Classes - Classes supplémentaires à ajouter à votre boîte de dialogue. Cela dépend du thème que vous utilisez.
Boutons
• - La liste des boutons à afficher. Chaque bouton a un texte, des classes supplémentaires à y ajouter et une action à effectuer lors de la cliquetis sur le bouton.

Il existe différentes méthodes qui peuvent être utilisées pour faciliter votre tâche. Voici quelques-uns des utiles:

• show () - Show une étape.
• hide () - masquer une étape.
• annuler () - Masquez l'étape et annulez la tournée.
• complet () - Masquez l'étape et terminez la visite.
• détruire () - détruit une étape.
• sur (événement, gestionnaire) - lie un événement.
• sur (événement, gestionnaire) - dénigne un événement.

Conclusion

Bien que Shepherd soit assez prometteur, un hoquet que j'ai remarqué est le support du navigateur de IE 9. Mais si vous ne prévoyez pas de prendre en charge les anciens navigateurs, essayez-le. Vous pouvez trouver une démo en direct basée sur le code de cet article sur GitHub. La démo peut être encore modifiée. Vous pouvez essayer de lier les gestionnaires d'événements pour les clés de flèche à la navigation de berger. Vous pouvez également faire des classes CSS et les attacher à différents éléments pour déplacer la mise au point d'un élément à un autre.

Questions fréquemment posées (FAQ) sur l'application Shepherd

Qu'est-ce que l'application Shepherd et en quoi diffère-t-il de Shepherd.js?

Application Shepherd est une bibliothèque JavaScript qui guide les utilisateurs via votre application. Il est différent de Shepherd.js en ce qu'il est conçu pour être plus convivial et plus facile à mettre en œuvre. Bien que Shepherd.js soit un outil puissant, il nécessite une compréhension plus profonde de JavaScript à utiliser efficacement. Le berger d'application, en revanche, est conçu pour être accessible aux développeurs de tous les niveaux de compétence, avec une API simple et une documentation claire.

Comment installer l'application Shepherd?

Installation d'application Shepherd est simple. Vous pouvez l'installer via NPM à l'aide de la commande NPM Installer Application-Shepherd. Une fois installé, vous pouvez l'importer dans votre projet à l'aide d'import Shepherd à partir de «Application-Shepherd».

Puis-je personnaliser l'apparence des guides créés avec l'application Shepherd?

Oui, application Shepherd permet une personnalisation approfondie. Vous pouvez modifier la couleur, la taille, la position et plus des éléments de guidage. Cela vous permet de créer des guides qui correspondent à l'apparence de votre application, offrant une expérience utilisateur sans couture.

Comment l'application Shepherd gère-t-elle le complexe complexe, les guides en plusieurs étapes?

Le berger d'application est conçu pour gérer facilement les guides complexes. Vous pouvez créer des guides en plusieurs étapes qui guident les utilisateurs à travers une série de tâches. Chaque étape peut avoir son propre texte, position et actions, vous permettant de créer des guides détaillés et interactifs.

Puis-je utiliser l'application Shepherd avec ma base de code existante?

Absolument. Application Shepherd est conçu pour être facile à intégrer aux bases de code existantes. Il s'agit d'une bibliothèque autonome, il ne nécessite donc aucun cadre ou technologie spécifique. Vous pouvez simplement l'importer dans votre projet et commencer à créer des guides.

Comment l'application Shepherd se compare-t-elle aux autres bibliothèques de guides de l'utilisateur?

Le berger de l'application ressort pour sa facilité d'utilisation et sa flexibilité. Alors que d'autres bibliothèques peuvent nécessiter des connaissances plus techniques pour l'utiliser efficacement, l'application Shepherd est conçue pour être accessible aux développeurs de tous niveaux de compétence. Il propose également des options de personnalisation approfondies, vous permettant de créer des guides qui correspondent à l'apparence de votre application.

est-ce que l'application est conviviale mobile?

Oui, l'application Shepherd est conçue pour bien fonctionner sur les appareils de bureau et mobiles. Les guides s'ajustent automatiquement pour s'adapter à la taille de l'écran, assurant une excellente expérience utilisateur sur tous les appareils.

Puis-je utiliser l'application Shepherd pour intégrer les nouveaux utilisateurs?

Oui, l'application Shepherd est un excellent outil pour intégrer les nouveaux utilisateurs. Vous pouvez créer des guides détaillés et étape par étape qui guident les nouveaux utilisateurs à travers votre application, les aidant à comprendre comment l'utiliser efficacement.

Comment mettre à jour ou modifier les guides créés avec l'application Shepherd?

La mise à jour ou la modification des guides sont faciles avec l'application Shepherd. Vous pouvez simplement modifier les propriétés des étapes du guide de votre code, et les modifications seront reflétées dans le guide. Cela vous permet de garder vos guides à jour au cours de votre application. Network for Application Shepherd, vous pouvez trouver de l'aide et des conseils sur les forums et les communautés de développement JavaScript général et Web. La documentation pour l'application Shepherd est également une excellente ressource pour apprendre à utiliser efficacement la bibliothèque.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!