إذا كانت الصورة تستحق ألف كلمة ، فيجب أن يكون العرض التوضيحي التفاعلي يستحق ... مليون؟

هل تستمتع بالتمرير عبر الكلمات الطنانة لفهم غرض التطبيق؟ ربما لا. ولم أكن أهتم بكتابة كل هذا Blather لأحدث مشروع Passion ، Wanna. لذلك تابعت حلاً أكثر إثارة للاهتمام: Nest تطبيقي داخل صفحته المقصودة للمستخدمين لاستكشافه!

تطبيق

بفضل قابلية React's Composability ، يمكننا تقريبًا ببساطة تقديم مكون تطبيق الجذر الخاص بنا واتصل به في اليوم:

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

ومع ذلك ، ستواجه بعض المشاكل:

1. سوف يتنقل التنقل في التطبيق التجريبي إلى التطبيق الحقيقي
2. سيسترجع التطبيق التجريبي البيانات الحقيقية ، والتي قد تفشل أو لا تعرضها جيدًا
3. قد لا يكون من الواضح للمستخدمين ما يبحثون عنه

لنحلها. Wanna يستخدم 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
        
            
                
            
        
    )
}

لاحظ أننا نستخدم MemoryRouter بحيث يبقى المتصفح على نفس الصفحة بينما يتنقل العرض التوضيحي داخليًا.

بيانات

لتزويد التطبيق التجريبي ببيانات مزيفة ، نحافظ على "الواجهة الخلفية" المزيفة داخل تطبيق العميل مع Usestate ونخدمه عبر عميل أو خادم وهمية (اعتمادًا على التنفيذ). إنه غازي الحد الأدنى لبقية رمز التطبيق ، وحتى يتيح لنا استخدام العرض التوضيحي للاختبار اليدوي - مفيد للغاية عند التكرار بسرعة.

استخدمت Mock-Apollo-Client ؛ للراحة أو TRPC ، يمكنك استخدام شيء مثل Nock. إنها مخصصة للاختبار الآلي ولكنها بالضبط ما نحتاجه هنا.

أولاً ، نقوم بإنشاء عميل وهمي الذي يستفسر عنه معالجات طلبه ويتحولون البيانات التجريبية بطريقة تحاكي الواجهة الحقيقية:

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 { ApolloProvider } from '@apollo/client'

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

إذا استخدمت خادمًا وهميًا بدلاً من ذلك ، فستضخ عنوان URL الخاص به في العميل الحقيقي للتطبيق التجريبي.

صور

إنها تعمل! الآن كيف نوضح للمستخدم أنهم يشاهدون عرضًا تفاعليًا؟

Wanna is Mobile-First ، لذلك اخترت تقديم العرض التوضيحي داخل إطار الهاتف. لقد استخدمت الأجهزة. ولكن من أجل البساطة ، سنستخدم هنا مكتبة تدعم تتفاعل خارج الصندوق: 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 (
        

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