Binden Sie Benutzer sofort ein: Betten Sie eine interaktive Demo in Ihr React SPA ein

Wenn ein Bild mehr sagt als tausend Worte, dann muss eine interaktive Demo... eine Million wert sein?

Mögen Sie es, durch Schlagworte zu scrollen, um den Zweck einer App zu verstehen? Wahrscheinlich nicht. Und ich hatte keine Lust, so viel Geschwätz für mein neuestes Leidenschaftsprojekt Wanna zu schreiben. Deshalb habe ich eine interessantere Lösung verfolgt: Meine App auf einer eigenen Landingpage verschachteln, damit Benutzer sie erkunden können!

Dieses GIF hat 263 Frames, also ist es meiner Meinung nach 263.000 Wörter wert

Durchführung

Dank der Zusammensetzbarkeit von React können wir fast einfach unsere Root-App-Komponente rendern und Schluss machen:

export const InteractiveDemo = () => {
    return (
        <App />
    )
}

Es treten jedoch einige Probleme auf:

1. Die Navigation der Demo-App navigiert durch die echte App
2. Die Demo-App ruft echte Daten ab, die möglicherweise fehlschlagen oder nicht gut dargestellt werden
3. Für Benutzer ist es möglicherweise nicht offensichtlich, was sie sehen

Lassen Sie uns diese lösen. Ich möchte React Router v6 und Apollo GraphQL verwenden, aber die Konzepte gelten unabhängig von der Technologie.

Navigation

Um die Navigation der Demo-App von der echten App zu trennen, packen wir sie in einen anderen Navigationsanbieter ein:

+import { MemoryRouter, UNSAFE_LocationContext } from 'react-router'

export const InteractiveDemo = () => {
    return (
+       // Hack to nest MemoryRouter inside BrowserRouter.
+       // https://github.com/remix-run/react-router/issues/7375
+       <UNSAFE_LocationContext.Provider value={null}>
+           <MemoryRouter initialEntries={['/app']}>
                <App />
+           </MemoryRouter>
+       </UNSAFE_LocationContext.Provider>
    )
}

Beachten Sie, dass wir einen MemoryRouter verwenden, damit der Browser auf derselben Seite bleibt, während die Demo intern navigiert.

Daten

Um die Demo-App mit gefälschten Daten zu versorgen, pflegen wir mit useState ein gefälschtes „Backend“ innerhalb der Client-App und stellen es über einen simulierten Client oder Server bereit (je nach Implementierung). Es greift nur minimal in den Rest des App-Codes ein und ermöglicht es uns sogar, die Demo für manuelle Tests zu verwenden – sehr praktisch, wenn man schnell iteriert.

Ich habe Mock-Apollo-Client verwendet; Für REST oder tRPC könnten Sie so etwas wie Nock verwenden. Sie sind für automatisierte Tests gedacht, aber genau das, was wir hier brauchen.

Zuerst erstellen wir einen Schein-Client, dessen Anforderungshandler Demodaten abfragen und so verändern, dass sie das echte Backend nachahmen:

import { InMemoryCache } from '@apollo/client'
import { createMockClient, createMockSubscription } from 'mock-apollo-client'
import { useMemo, useState } from 'react'
// GraphQL documents that our client sends to the real server
import GET_FRIENDS from '../../gql/getFriends.gql'
import ADD_FRIEND from '../../gql/addFriend.gql'

// Simplified example
export const useDemoClient = () => {
    const [friends, setFriends] = useState[{
        __typename: 'User',
        id: 1,
        name: 'Nick',
    }]

    // Cache should persist across clients
    const cache = useMemo(() => { 
        // Should be the same cache configuration you provide to your real Apollo client
        return new InMemoryCache() 
    }, [])

    // We need to recreate the mock client whenever the data changes
    // because it doesn't support resetting request handlers.
    const mockClient = useMemo(() => {
        const client = createMockClient({ cache })

        client.setRequestHandler(GET_FRIENDS, () => Promise.resolve({
            data: {
                friends: friends
            }
        }))
        client.setRequestHandler(ADD_FRIEND, ({ user }) => {
            setFriends((prev) => prev.concat([user]))
            return Promise.resolve({
                data: {
                    addFriend: user
                }
            })
        })

        return client
    }, [friends])

    return mockClient
}

Dann packen wir unsere Demo genau wie bei der Navigation in einen neuen Anbieter mit unserem Mock-Client:

+import { ApolloProvider } from '@apollo/client'

export const InteractiveDemo = () => {
+   const demoClient = useDemoClient()
    return (
+       <ApolloProvider client={demoClient}> 
            <UNSAFE_LocationContext.Provider value={null}>
                <MemoryRouter initialEntries={['/app']}>
                    <App />
                </MemoryRouter>
            </UNSAFE_LocationContext.Provider>
+       </ApolloProvider>
    )
}

Wenn Sie stattdessen einen Scheinserver verwenden würden, würden Sie dessen URL in den echten Client der Demo-App einfügen.

Visuals

Es funktioniert! Wie machen wir nun für den Benutzer deutlich, dass er sich eine interaktive Demo ansieht?

Da das Mobilgerät an erster Stelle steht, habe ich mich entschieden, die Demo in einem Telefonrahmen zu rendern. Ich habe devices.css verwendet, weil es die Geräte bietet, die meiner Meinung nach am besten aussehen (d. h. minimaler Rahmen, um den Platz für die Demo zu maximieren). Aber der Einfachheit halber verwenden wir hier eine Bibliothek, die React sofort unterstützt: React-Device-Frameset.

Lassen Sie uns auch Zoom verwenden, um die Demo-Benutzeroberfläche zu verkleinern und sie schön in den Rest der Seite zu verschachteln. In Wanna musste ich diesen Zoom umkehren und berücksichtigen, wenn ich mit visjs-html-nodes, um das Diagramm der eingeladenen Personen zu zeichnen, aber größtenteils funktioniert es „einfach“.

export const InteractiveDemo = () => {
    return (
        <App />
    )
}

Das obige ist der detaillierte Inhalt vonBinden Sie Benutzer sofort ein: Betten Sie eine interaktive Demo in Ihr React SPA ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!