그림이 천 단어의 가치가 있다면 대화식 데모는 가치가 있어야합니다 ... 백만?

앱의 목적을 이해하기 위해 유행어를 스크롤하는 것을 즐기십니까? 아마. 그리고 나는 나의 최신 열정 프로젝트 인 Wanna를 위해 그 모든 멍청이를 쓰지 않았다. 그래서 나는 더 흥미로운 솔루션을 추구했습니다. 사용자가 탐색 할 수 있도록 자체 방문 페이지 내부의 앱을 둥지!

구현

React의 composability 덕분에 우리는 거의 단순히 루트 앱 구성 요소를 렌더링하고 하루를 호출 할 수 있습니다 :

export const InteractiveDemo = () => {
    return (
        
    )
}

그러나 몇 가지 문제가 발생할 것입니다 :

1. 데모 앱의 내비게이션은 실제 앱을 탐색합니다
2. 데모 앱은 실제 데이터를 검색하여 실패하거나 잘 표시되지 않을 수 있습니다
3. 사용자가보고있는 내용이 분명하지 않을 수 있습니다

그것들을 해결합시다. React Router v6 및 Apollo GraphQL을 사용하고 싶지만 개념은 기술에 관계없이 적용됩니다.

항해

실제 앱에서 데모 앱의 탐색을 분리하려면 다른 내비게이션 제공 업체 안에 래핑합니다.

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

먼저, 우리는 실제 백엔드를 모방하는 방식으로 요청 처리기 쿼리 및 데모 데이터를 돌연변이하는 모의 클라이언트를 만듭니다.

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
}

그런 다음 내비게이션과 마찬가지로, 우리는 모의 클라이언트와 함께 새로운 제공 업체에 데모를 랩핑합니다 :

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
}

대신 Mock Server를 사용한 경우 Demo App의 실제 클라이언트에 URL을 주입합니다.

비주얼

작동합니다! 이제 사용자에게 대화식 데모를보고 있음을 어떻게 분명하게 만들까요?

Wanna는 모바일 우선입니다. 그래서 나는 전화 프레임 내부에서 데모를 렌더링하기로 결정했습니다. 나는 가장 잘 보이는 장치를 제공하기 때문에 devices.css를 사용했습니다 (즉, 데모 공간을 극대화하기 위해 최소한의 베젤). 그러나 간단하게하기 위해 여기에서 우리는 반응을 지원하는 라이브러리를 사용합니다 : react-device-frameset.

 import { DeviceFrameset } from 'react-device-frameset'
 import 'react-device-frameset/styles/marvel-devices.min.css'

export const InteractiveDemo = () => {
    const demoClient = useDemoClient()
    return (
        



Lastly, it helps to have an animation so it's clearly not a static image. For example, Wanna continually ghost-types suggestions in the activity input field.


  
  
  Integration


Now that we have our InteractiveDemo component, we render it inside our landing page and we're done!



export const Landing = () => {
    return (
        

            {/* ... */}
            
            {/* ... */}
        
    )
}


 const 랜딩 내보내기 = () => {
    반품 (
        

            {/ * ... */}
            
            {/ * ... */}
        
    ))
}