Fermer

avril 23, 2023

Comment créer des visites guidées interactives avec React Joyride

Comment créer des visites guidées interactives avec React Joyride


La création de visites guidées interactives d’applications Web est un outil essentiel pour améliorer l’expérience utilisateur d’une application. Cela peut être facilement géré à l’aide de la bibliothèque React Joyride. Dans cet article, nous examinons Joyride et comment l’intégrer dans une application React.

L’expérience utilisateur est essentielle lorsqu’il s’agit de l’efficacité des applications Web. Vous voulez vous assurer que les utilisateurs de votre application comprennent quoi faire et comment naviguer dans les différentes sections de l’application. La création d’une visite guidée interactive de votre application peut résoudre ce problème. C’est une manière explicite de présenter l’application aux utilisateurs et de les familiariser avec ses fonctionnalités.

Bien que la plupart des bibliothèques résument le fonctionnement interne et facilitent les étapes de création de visites guidées interactives dans les applications Web, la Bibliothèque React Joyride se démarque. Il est plus flexible et permet un certain niveau de personnalisation.

Dans cet article, nous examinerons brièvement la bibliothèque React Joyride, son fonctionnement et ses différences avec les bibliothèques similaires. De plus, nous allons créer une démo d’une page de destination et y intégrer la bibliothèque React Joyride, avec quelques personnalisations. Commençons!

Configuration du projet

Exécutez la commande suivante dans votre terminal pour configurer une application React :

npx create-react-app react-joyride-demo

Ensuite, exécutez les commandes ci-dessous pour naviguer dans le dossier du projet créé et installer la bibliothèque React Joyride.

cd react-joyride-demo
npm install react-joyride

Exécutez la commande ci-dessous pour démarrer votre serveur de développement :

npm start

Un aperçu de la bibliothèque React Joyride

Le package React Joyride est très apprécié pour le développement de visites interactives d’applications Web, avec plus de 5 000 étoiles sur GitHub et un système de maintenance actif. Avec React Joyride, les utilisateurs d’une application peuvent voir ses fonctionnalités via une visite interactive, qui les invite à explorer des points d’intérêt spécifiques et met en évidence les fonctionnalités de base.

La bibliothèque React Joyride cible les éléments DOM dans une application sur laquelle elle affiche une info-bulle avec la description définie par le développeur des éléments individuels. Chaque info-bulle d’un élément pointe vers et décrit l’élément tel qu’il est défini. Sous le capot, la bibliothèque React Joyride utilise flotteur de réaction pour positionner et styliser correctement l’info-bulle.

Comparée à des bibliothèques similaires, la bibliothèque React Joyride est moins rigide et offre plus de flexibilité et de personnalisation. Il permet de redéfinir le thème de la bibliothèque pour répondre aux besoins de l’application. Il rend chaque action et événement visible pour l’utilisateur, ce qui vous permet de l’adapter à vos besoins. Il comprend également des solutions pour la majorité des cas d’utilisation des visites de produits.

Pour créer des visites interactives avec la bibliothèque React Joyride, il vous suffit d’importer son composant dans votre application et de transmettre les accessoires requis. Dans une section ultérieure, nous examinerons de près comment nous pouvons le faire. Cependant, dans la section suivante, créons une simple page d’accueil avec laquelle nous pouvons travailler.

Construire une application frontale simple

Avec React installé et notre application démarrée, construisons une version de démonstration de la page de destination d’une compagnie d’assurance. Après quoi, nous intégrerons la bibliothèque React Joyride.

Pour le style, ouvrez le src/App.css fichier et remplacez les styles prédéfinis par ceux-ci :

.App {
  color: #333;
}
.container {
  width: 1400px;
  max-width: 95%;
  margin: 0 auto;
}
.hero {
  width: 100%;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header > h3 {
  font-size: 1.5rem;
  color: #5caeab;
}
.header__nav {
  display: flex;
  list-style: none;
}
.header__nav > li {
  margin: 0 0.5rem;
}
.header__nav > li > a {
  text-decoration: none;
  font-weight: 600;
  color: inherit;
}
.header__nav > .login > a {
  color: #5caeab;
  font-weight: 700;
}
.hero__body {
  height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.hero__body > h1 {
  font-size: 2.5rem;
  margin: 0;
  text-align: center;
}
.hero__body > p {
  font-size: 1rem;
  width: 500px;
  text-align: center;
}
.hero__body > .signup {
  padding: 0.7rem 1.5rem;
  background: #5caeab;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}
.packages {
  background: linear-gradient(to bottom right, #fff, #5caeab);
  padding: 1rem 0 3rem 0;
}
.packages > .container > h3 {
  text-align: center;
  margin: 1rem 0;
}
.packages > .container > p {
  text-align: center;
  font-style: italic;
  color: #5caeab;
  font-weight: 600;
}
.cards {
  display: flex;
  margin: 2.5rem 0;
  gap: 1rem;
}
.cards > div {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1.5rem 0.5rem;
}
.cards > div > h4 {
  text-align: center;
  color: #044947;
}
.cards > div > p {
  text-align: center;
}
.explore {
  text-align: center;
  display: block;
  text-decoration: none;
  color: #044947;
  font-weight: 700;
}
.footer > .container {
  padding: 2rem 0 1rem 0;
}
.footer > .container > h3 {
  text-align: center;
  margin: 1rem 0;
}
.form {
  display: flex;
  justify-content: center;
  margin: 5rem 0;
}
.form > input {
  border: 1px solid #5caeab;
  padding: 0.5rem;
  border-radius: 2px;
  margin-right: 0.3rem;
  width: 20rem;
}
.form > input:focus {
  outline: none;
}
.form > button {
  background: #5caeab;
  border: none;
  border-radius: 2px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.footer > .container > p {
  text-align: center;
}
.footer > .container > p > span {
  color: #5caeab;
  font-weight: 600;
}

Nous voulons un Hero composant de section pour la page qui inclut un composant d’en-tête. Nous aurons également un Packages composant qui répertorie les offres et un Footer composant.

Dans le src dossier, créez un nouveau dossier nommé components et ajouter un Header.js déposer dessus. Ouvrez le src/components/Header.js fichier et ajoutez-y ce qui suit :

import React from "react";
export default function Header() {
  return (
    <header className="container header">
      <h3>INSURE</h3>
      <ul className="header__nav">
        <li>
          <a href="https://www.telerik.com/">About</a>
        </li>
        <li>
          <a href="/Reviews">Our Culture</a>
        </li>
        <li>
          <a href="/Our culture">Blog</a>
        </li>
        <li className="login">
          <a href="https://www.telerik.com/">Log in</a>
        </li>
      </ul>
    </header>
  );
}

Ici, nous avons défini la Header composant. Ensuite, créons un Hero.js dossier dans le src/components/ dossier et ajoutez-y le code ci-dessous :

import React from "react";
import Header from "./Header";
export default function Hero() {
  return (
    <section className="hero">
      <Header />
      <div className="container hero__body">
        <h1>Get Insurance Policy and Save 30%!</h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry and uses Latin words combined with a handful of model words.
        </p>
        <a href="https://www.telerik.com/" className="signup">
          Get Started
        </a>
      </div>
    </section>
  );
}

Ici, nous avons défini la Hero composant et rendu le Header composant avec du texte factice.

Créons également un Packages.js dossier dans le src/components dossier et ajoutez-y ce qui suit :

import React from "react";
export default function Packages() {
  return (
    <section className="packages">
      <div className="container">
        <h3>PACKAGES</h3>
        <p>An overview of exciting insurance packages we offer</p>
        <div className="cards">
          <div>
            <h4>Health</h4>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry and uses Latin words combined with a handful of model
              words.
            </p>
          </div>
          <div>
            <h4>Travel</h4>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry and uses Latin words combined with a handful of model
              words.
            </p>
          </div>
          <div>
            <h4>Life</h4>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry and uses Latin words combined with a handful of model
              words.
            </p>
          </div>
        </div>
        <a href="https://www.telerik.com/" className="explore">
          Click here to explore {">>>"}
        </a>
      </div>
    </section>
  );
}

Dans le code ci-dessus, nous avons défini un Packages composant qui renvoie des exemples de packages. Pour ajouter le Footer composant, créez un Footer.js dossier dans le
src/components dossier et ajoutez-y ce qui suit :

import React from "react";
export default function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
        <form className="form">
          <input type="email" placeholder="Email address" />
          <button>Subscribe</button>
        </form>
        <p>
          Powered by <span>INSURE</span>. Copyright &copy; 2022
        </p>
      </div>
    </footer>
  );
}

Ici, nous avons défini la Footer composant qui affiche un formulaire de newsletter simple.

Maintenant, pour rassembler tous ces composants, ouvrez le src/App.js fichier et remplacez le code prédéfini qu’il contient par ce qui suit :

import Hero from "./components/Hero";
import Packages from "./components/Packages";
import Footer from "./components/Footer";
import "./App.css";
function App() {
  return (
    <div className="App">
      <Hero />
      <Packages />
      <Footer />
    </div>
  );
}
export default App;

Ici, nous avons importé et rendu le Hero, Packages et Footer Composants. Nous avons également importé les styles que nous avons précédemment définis dans le App.css déposer.

Enregistrez les modifications et prévisualisez l’application dans votre navigateur pour voir ce que nous avons.

Démo de la page de destination des applications

Intégration de la bibliothèque React Joyride

La librairie React Joyride exporte un core Joyride composant que nous pouvons utiliser pour créer des visites dans les applications React. Le Joyride le composant attend un requis steps prop lors du rendu. Le steps prop est un tableau d’objets utilisé pour définir les différentes étapes ou phases de la visite. Le target et content sont deux propriétés essentielles que chaque objet du tableau doit contenir.

Le target La propriété accepte une valeur qui pointe vers l’élément approprié que nous voulons mettre en évidence pour une étape particulière de la visite. Il peut s’agir d’un sélecteur CSS ou d’un HTMLElement.

Le content propriété, d’autre part, définit le corps de l’info-bulle. Il accepte les valeurs qui spécifient le contenu affiché pour l’étape.

Il est important de noter que l’ordre dans lequel nous définissons les objets dans le steps array est l’ordre dans lequel la visite se déroulera.

Pour voir cela en action, remplacez le contenu de votre src/App.js fichier comme ceci:

import Hero from "./components/Hero";
import Packages from "./components/Packages";
import Footer from "./components/Footer";
import "./App.css";
import Joyride from "react-joyride";

const steps = [
  {
    target: ".header > h3",
    content: "Welcome!! Please spare a minute to learn about our page",
  },
  {
    target: ".login",
    content: "You can log in here",
  },
  {
    target: ".signup",
    content: "Sign up here, if you're new",
  },
  {
    target: ".packages h3",
    content: "The packages we offer",
  },
  {
    target: ".explore",
    content: "Click here to find out more about other packages",
  },
  {
    target: ".footer .form",
    content: "Subscribe to our newsletter here",
  },
];

function App() {
  return (
    <>
      <Joyride steps={steps} />
      <div className="App">
        <Hero />
        <Packages />
        <Footer />
      </div>
    </>
  );
}
export default App;

Dans le code ci-dessus, nous avons importé et rendu le Joyride composant. Ensuite, nous avons défini une steps tableau et l’a passé comme accessoire au Joyride composant. Notre visite devrait comporter six étapes puisque nous avons défini six objets dans le steps déployer. Vous pouvez toujours modifier ou modifier cela selon vos préférences.

Enregistrez les modifications et testez l’application dans votre navigateur. Vous devriez voir une balise animée (un petit cercle de couleur rouge) sur le premier élément ciblé dans le steps déployer. Cliquez sur la balise pour démarrer la visite.

Intégration de la librairie React Joyride

Personnaliser la visite

Comme mentionné précédemment, l’un des avantages de l’utilisation de la bibliothèque React Joyride est qu’elle est moins rigide et permet une plus grande personnalisation. En plus de steps prop, d’autres accessoires facilitent ces personnalisations.

Dans les sections suivantes, nous examinerons certains des autres accessoires. Cependant, avant de continuer, résolvons rapidement un problème de comportement avec notre visite. Vous devriez avoir remarqué que vous devez fermer chaque étape de la visite avant de passer à la suivante. Le Joyride composant accepte également un continuous prop qui peut être utilisé pour résoudre ce problème. Il prend une valeur booléenne qui maintient la visite en mouvement lorsqu’il est défini sur true.

Ouvrez votre src/App.js fichier et mettre à jour le Joyride composant comme indiqué ci-dessous :

<Joyride steps={steps} continuous={true} />

Cela fait, vous devriez voir un bouton suivant qui peut être utilisé pour continuer la visite sans avoir à le fermer à intervalles réguliers.

Résoudre un problème continu

Ajout de styles personnalisés

L’état actuel de notre tournée montre que le thème général par défaut du Joyride composant ne correspond pas au thème de notre application. Le composant accepte également styles props pour remplacer certains styles par défaut. Pour ajuster le thème général, cependant, nous devons imbriquer un options objet au sein de styles objet. Voici la valeur par défaut options objet, comme on le voit dans documents officiels.

const options = {
  arrowColor: "#fff",
  backgroundColor: "#fff",
  beaconSize: 36,
  overlayColor: "rgba(0, 0, 0, 0.5)",
  primaryColor: "#f04",
  spotlightShadow: "0 0 15px rgba(0, 0, 0, 0.5)",
  textColor: "#333",
  width: undefined,
  zIndex: 100,
};

Le thème général prend ces valeurs, donc pour remplacer l’un des styles, nous devons le définir dans notre options objet imbriqué dans styles objet et passé comme accessoire au Joyride composant.

En plus de changer les styles du thème général, nous pouvons également remplacer les styles de certains des composants fournis avec le Joyride composant. Par exemple, nous pouvons remplacer les styles des spotlightle tooltip composant, le beacon composant, etc. Il suffit de définir l’objet styles pour chaque composant et de les ajouter au styles objet. Cliquez sur
ici pour voir tous les composants remplaçables définis par la bibliothèque React Joyride.

Ouvrez le src/App.js fichier et mettre à jour le Joyride composant comme ceci pour remplacer certains des styles par défaut :

<Joyride
  steps={steps}
  continuous={true}
  styles={{
    options: {
      arrowColor: "#5caeab",
      backgroundColor: "#5caeab",
      overlayColor: "rgba(92, 174, 171, .3)",
      primaryColor: "#5caeab",
      textColor: "#fff",
    },
    spotlight: {
      backgroundColor: "transparent",
    },
  }}
/>

Ici, nous avons changé certains styles pour le thème général et le spotlight composant à aligner avec les styles de la page.

Enregistrez les modifications et testez l’application pour voir les modifications.

Ajout de styles personnalisés

Afficher la progression de la visite

Pour montrer le déroulement de la tournée, le Joyride composant accepte également un showProgress soutenir. Lorsqu’il est réglé sur truel’accessoire affiche la distance parcourue par l’utilisateur avec la visite.

Ouvrez votre src/App.js fichier et mettre à jour le Joyride composant comme indiqué ci-dessous :

<Joyride
  steps={steps}
  continuous={true}
  styles={{
    options: {
      arrowColor: "#5caeab",
      backgroundColor: "#5caeab",
      overlayColor: "rgba(92, 174, 171, .3)",
      primaryColor: "#5caeab",
      textColor: "#fff",
    },
    spotlight: {
      backgroundColor: "transparent",
    },
  }}
  
  showProgress={true}
/>

Nous avons ajouté un nouveau showProgress prop pour afficher la progression de la visite à chaque étape.

Enregistrez le fichier pour voir les modifications dans votre navigateur.

Affichage de la progression de la tournée

Activer le saut à chaque étape

Un utilisateur particulier peut déjà être familiarisé avec l’application et souhaiter immédiatement quitter la visite. Le Joyride composant accepte également un showSkipButton prop qui, lorsqu’il est réglé sur trueajoute un bouton de saut qui peut être utilisé pour quitter la visite immédiatement.

Notez que le bouton d’annulation en haut à droite de chaque info-bulle ne fait que quitter une étape particulière et passer à l’étape suivante. Le bouton de saut termine entièrement la visite.

Ouvrez votre src/App.js fichier et mettre à jour le Joyride composant comme ceci:

<Joyride
  steps={steps}
  continuous={true}
  styles={{
    options: {
      arrowColor: "#5caeab",
      backgroundColor: "#5caeab",
      overlayColor: "rgba(92, 174, 171, .3)",
      primaryColor: "#5caeab",
      textColor: "#fff",
    },
    spotlight: {
      backgroundColor: "transparent",
    },
  }}
  showProgress={true}
  
  showSkipButton={true}
/>

Ici, nous avons ajouté le showSkipButton prop pour ajouter un bouton de saut à chaque étape.

Enregistrez le fichier pour voir les modifications dans votre navigateur.

Activation du bouton de saut

Démarrer automatiquement la visite au chargement de la page

Jusqu’à présent, nous avons toujours dû cliquer sur la balise pour démarrer la visite. Nous pouvons également définir la visite pour qu’elle démarre automatiquement après le chargement de la page. Pour cela, il suffit d’ajouter un disableBeacon propriété à la première étape de la tournée définie dans le tableau steps. Lorsqu’il est défini sur vrai, le disableBeacon La propriété démarre automatiquement la visite au chargement de la page.

Ouvrez votre src/App.js fichier et mettre à jour le steps tableau comme indiqué ci-dessous :

const steps = [
  {
    target: ".header > h3",
    content: "Welcome!! Please spare a minute to learn about our page",
    
    disableBeacon: true,
  },
  {
    target: ".login",
    content: "You can log in here",
  },
  {
    target: ".signup",
    content: "Sign up here, if you're new",
  },
  {
    target: ".packages h3",
    content: "The packages we offer",
  },
  {
    target: ".explore",
    content: "Click here to find out more about other packages",
  },
  {
    target: ".footer .form",
    content: "Subscribe to our newsletter here",
  },
];

Ici, nous avons ajouté le disableBeacon propriété au premier step objet et définissez sa valeur sur true.

Enregistrez le fichier pour voir les modifications dans votre navigateur.

Démarrage automatique de la visite au chargement de la page

Conclusion

La création de visites guidées interactives d’applications Web est un outil essentiel pour améliorer l’expérience utilisateur d’une application. Cela peut être facilement géré à l’aide de la bibliothèque React Joyride. Dans cet article, nous avons examiné la bibliothèque React Joyride et comment l’intégrer dans une application React. Cependant, vous pouvez aller plus loin en plongeant dans le documents officiels pour en savoir plus sur d’autres choses intéressantes que vous pouvez faire avec la bibliothèque.




Source link