Conception et mise en œuvre d'Ant Design Global App Tour pour les applications React.

Les visites d'utilisateurs sont une fonctionnalité d'utilisation inestimable pour les applications Web. Ils vous permettent d'intégrer efficacement les nouveaux utilisateurs, en leur fournissant des guides étape par étape pour les aider à comprendre le logiciel. Les visites peuvent également servir de référence rapide pour des tâches récurrentes ou des fonctionnalités avancées.

L'objectif : solution de visite multipage

Nous visons à créer une solution qui vous permet de créer une expérience d'intégration qui s'étend sur plusieurs pages dans l'application React. Voici à quoi ça ressemble :

Ant Design Tour : une solution locale

Ant Design fournit un composant Tour pour créer des guides interactifs. Cependant, il présente certaines limites :

• Il fonctionne localement au sein d'un seul composant.
• Il s'appuie fortement sur les références React, ce qui le rend moins flexible pour les applications s'étendant sur plusieurs pages.

Voici un exemple tiré de la documentation officielle qui démontre une implémentation locale de base :

import React, { useRef, useState } from 'react';
import { EllipsisOutlined } from '@ant-design/icons';
import { Button, Divider, Space, Tour } from 'antd';

const App = () => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);

  const [open, setOpen] = useState(false);

  const steps = [
    { title: 'Upload File', description: 'Put your files here.', target: () => ref1.current },
    { title: 'Save', description: 'Save your changes.', target: () => ref2.current },
    { title: 'Other Actions', description: 'Click to see other actions.', target: () => ref3.current },
  ];

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>Begin Tour</Button>
      <Divider />
      <Space>
        <Button ref={ref1}>Upload</Button>
        <Button ref={ref2} type="primary">Save</Button>
        <Button ref={ref3} icon={<EllipsisOutlined />} />
      </Space>
      <Tour open={open} onClose={() => setOpen(false)} steps={steps} />
    </>
  );
};

export default App;

Bien que cette implémentation fonctionne bien pour des pages uniques, elle ne suffit pas dans les scénarios où les visites s'étendent sur plusieurs pages de votre application React.

---

Voici comment nous mettons cela en œuvre :

---

Étapes préalables, app.jsx, routes.jsx, routesNames.js :

import { RouterProvider } from "react-router-dom";
import AppRouter from "./routes";

export default function App() {
  return <RouterProvider router={AppRouter} />;
}

export const ROUTE_NAMES = {
  HOME: "/",
  ABOUT: "/about",
};

import AppLayout from "./AppLayout";
import { createBrowserRouter } from "react-router-dom";
import { ROUTE_NAMES } from "./routeNames";
import { Home } from "./components/Home";
import { About } from "./components/About";
import { Result } from "antd";
import {TourProvider} from "./TourContext";

const GetItem = (label, key, icon, to, children = [], type) => {
  return !to
    ? {
      key,
      icon,
      children,
      label,
      type,
    }
    : {
      key,
      icon,
      to,
      label,
    };
};

const GetRoute = (path, element, params = null) => {
  return {
    path,
    element,
  };
};

const WithAppLayout = (Component) => <TourProvider><AppLayout>{Component}</AppLayout></TourProvider>;

export const routeItems = [
  GetItem("Home", "home", null, ROUTE_NAMES.HOME),
  GetItem("About", "about", null, ROUTE_NAMES.ABOUT),
];

const AppRouter = createBrowserRouter([
  GetRoute(ROUTE_NAMES.HOME, WithAppLayout(<Home />)),
  GetRoute(ROUTE_NAMES.ABOUT, WithAppLayout(<About />)),
  GetRoute(
    "*",
    <Result
      status="404"
      title="404"
      subTitle="Sorry, the page you visited does not exist."
    />
  ),
]);

export default AppRouter;

Étape 1 : Configurer un contexte de tournée mondiale

Nous utilisons React Context pour gérer l'état global de la visite, y compris les étapes actives de la visite.

import React, { createContext, useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { APP_TOURS } from "./steps";

const TourContext = createContext();

export const TourProvider = ({ children }) => {
  const [isTourActive, setTourActive] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    if (isTourActive) {
      navigate("/home"); // Redirect to the starting point of the tour
    }
  }, [isTourActive, navigate]);

  return (
    <TourContext.Provider value={{ isTourActive, setTourActive, steps: APP_TOURS }}>
      {children}
    </TourContext.Provider>
  );
};

export default TourContext;

---

Étape 2 : Définir les étapes de la tournée mondiale

Au lieu des références React, nous utilisons querySelector pour récupérer dynamiquement des éléments à l'aide d'un attribut data-tour-id personnalisé.

const getTourStepElement = (id) => document.querySelector(`[data-tour-id="${id}"]`);

export const APP_TOURS = {
  "/home": [
    { title: "Upload File", description: "Put your files here.", target: () => getTourStepElement("upload") },
    { title: "Save", description: "Save your changes.", target: () => getTourStepElement("save") },
    { type: "navigate", to: "/about", title: "About Us", description: "Learn more about us." },
  ],
  "/about": [
    { title: "About Us", description: "Here's what we are all about.", target: () => getTourStepElement("about") },
  ],
};

---

Étape 3 : Créer un composant de visite mondiale

Ce composant gère dynamiquement la navigation et les étapes à travers les pages.

import React, { useContext } from "react";
import { Tour } from "antd";
import { useNavigate } from "react-router-dom";
import TourContext from "./TourContext";

export const GlobalTour = () => {
  const { isTourActive, steps, setTourActive } = useContext(TourContext);
  const navigate = useNavigate();

  return (
    <Tour
      open={isTourActive}
      onClose={() => setTourActive(false)}
      steps={steps}
      onChange={(current) => {
        const step = steps[current];
        if (step.type === "navigate") {
          navigate(step.to);
        }
      }}
    />
  );
};

Étape 4 : Intégrer dans la mise en page de l'application

La visite est parfaitement intégrée à la mise en page, accessible depuis n'importe quelle page.

import React, { useContext } from "react";
import { Layout, Button } from "antd";
import { Link } from "react-router-dom";
import TourContext from "./TourContext";
import { GlobalTour } from "./GlobalTour";

const { Header, Content, Footer } = Layout;

const AppLayout = ({ children }) => {
  const { setTourActive } = useContext(TourContext);

  return (
    <Layout>
      <Header>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
        <Button onClick={() => setTourActive(true)}>Start Tour</Button>
      </Header>
      <Content>{children}</Content>
      <Footer>© {new Date().getFullYear()} My App</Footer>
      <GlobalTour />
    </Layout>
  );
};

export default AppLayout;

Étape 5 : Ajouter des identifiants de visite d'étapes

Étant donné que notre visite s'étend sur plusieurs pages, nous attribuerons un data-tour-id à chaque composant que nous souhaitons mettre en évidence dans nos étapes

import { Button, Space } from "antd";
import { EllipsisOutlined } from "@ant-design/icons";
export const Home = () => {
  return (
    <>
      <Button data-tour-id="upload" >Upload</Button>
      <Button data-tour-id="save" type="primary">
        Save
      </Button>
      <Button data-tour-id="actions" icon={<EllipsisOutlined />} />
    </>
  );
};

export const About = () => {
  return <div data-tour-id="about">About</div>;
};

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!