دليل عملي لجولات المنتج في React Apps

كما هو مذكور في Appcues:

"جولات المنتج - التي تسمى أحيانًا الإرشادات التفصيلية للمنتج - تعرّف المستخدمين على منتج جديد وتساعدهم في العثور على اتجاهاتهم."

عادةً ، عندما يحتاج إلى عرض ميزة جديدة أو وظيفة واجهة مستخدم معقدة في تطبيق ويب ، سيرسل فريق نجاح العميل بريدًا إلكترونيًا للحملة إلى جميع مستخدميه. في حين أن هذه طريقة رائعة لخلق مثل هذا الوعي ، فقد لا تتاح الفرصة لبعض المستخدمين لرؤية الميزة المضافة ؛ ومن ثم ، فإن الغرض من البريد الإلكتروني سوف يفشل.

تتمثل الطريقة الأفضل لزيادة وعي المستخدم بميزة معينة في تطبيق الويب في دمج نصائح موجزة وواضحة ذاتيًا لواجهة المستخدم ، تسمى جولات المنتج.

ترشد جولات المنتج المستخدمين إلى لحظات "a-ha" ، أو تعرض ميزات عالية القيمة لا يتم استخدامها بشكل كافٍ. يمكن أن تكون جولات المنتج أدوات فعالة لتعريف المستخدمين بمنتج جديد ومساعدتهم في العثور على اتجاهاتهم. يمكنهم لفت الانتباه إلى إطلاق المنتجات والعروض الترويجية ومبيعات المنتجات.

ولكن عند حدوث خطأ ، يمكن أن ينتهي الأمر بجولات المنتج وكأنها سائق في المقعد الخلفي. ولا أحد يحب سائق المقعد الخلفي ، أليس كذلك؟

في هذا البرنامج التعليمي ، ستتعرف على ماهية جولة المنتج وأنواع حزم جولات المنتج في نظام React البيئي ، جنبًا إلى جنب مع مزاياها وعيوبها.

إذا كنت تبني منتجات تواجه العملاء باستخدام React ، فقد تكون حريصًا على تنفيذ ذلك في تطبيق React الخاص بك. في النهاية ، سنكون قد قمنا ببناء جولة في المنتج لواجهة مستخدم بسيطة لعربة التسوق باستخدام React Joyride.

لن نخوض في أساسيات بناء جملة React و JavaScript ، لكن ليس عليك أن تكون خبيرًا في أي من هاتين اللغتين لمتابعة ذلك.

إرشادات جولة المنتج

تعد جولات المنتج جانبًا صعبًا من تطبيقات الويب ، وتتطلب بعض الخبرة في تجربة المستخدم لتحقيق النتائج. أوصي بالاطلاع على نصائح Appcues لجولات المنتج. فيما يلي بعض الإرشادات التي يجب مراعاتها.

أبدا محاضرة

يعد إجراء الكثير من الجولات على صفحة الويب أمرًا مغريًا. لكن المستخدمين عادة لا يحرصون على البرامج التعليمية التمهيدية الطويلة. يصبحون قلقين عندما يضطرون إلى استيعاب الكثير من المعلومات قبل أن يتمكنوا من استخدام ميزة في التطبيق.

كسرها

لا تعلم كل شيء. ركز على ميزة واحدة ، وأنشئ جولة من خطوتين إلى ثلاث خطوات لعرض هذه الميزة. اعرض العديد من الجولات الصغيرة بدلاً من جولة واحدة طويلة. تحديد أولويات تسلسلها.

إضافة قيمة

هل تستمتع بجولتك الخاصة؟ ماذا عن زملائك في الفريق؟ قدم الجولة بطريقة يفهمها المستخدمون. اعرض القيمة بدلاً من القصص.

الآن بعد أن عرفنا قيمة جولات المنتج ورأينا بعض الإرشادات لبناءها ، دعنا نغطي بعض مكتبات React لجولات المنتجات ونتعلم كيفية استخدامها.

لا يوجد سوى عدد قليل من المكتبات القائمة على React لتنفيذ الجولات. اثنتان من أشهرها هما React Tour و React Joyride.

رد الفعل جولة

يوجد في React Tour حوالي 1600 نجمة على GitHub ويتم تطويرها بنشاط. أفضل حالة استخدام لـ React Tour هي جولة بسيطة في المنتج تتطلب القليل من التخصيص. العرض متاح.

كيف تعمل

باستخدام React Tour ، يمكنك تمرير className والمحتوى لكل خطوة إلى المكون. ستعرض المكتبة واجهة مستخدم الجولة بناءً على نقرة زر ، أو بعد تثبيت المكون. إنه بسيط للصفحات الثابتة وواجهات المستخدم:

 const steps = [ { selector: '.first-tour', content: 'This is the content for the first tour.', }, { selector: '.second-tour', content: 'Here is the content for the second Tour.', } // ... ]

الايجابيات

• تعتبر React Tour هي الأفضل للجولات التي تحتاج إلى القليل من التخصيص.
• إنه يعمل بشكل جيد مع المحتوى الثابت والمحتوى الديناميكي الذي توجد تسمياته المحددة دائمًا في واجهة المستخدم.
• قد يجدها معجبو المكونات المصممة أمرًا مثيرًا للاهتمام لأنها تعتمد بشدة على المكونات المصممة.

سلبيات

• إذا كان مشروعك لا يعتمد على المكونات المصممة ، فقد لا تجد أنه من السهل تنفيذه.
• سيكون إبداعك محدودًا لأنه لا يدعم التخصيص.

رد فعل جويريد

مكتبة جولات المنتجات الرئيسية الأخرى هي React Joyride ، التي لديها حوالي 3100 نجمة على GitHub ويتم صيانتها بنشاط أيضًا.

كيف تعمل

نقوم بتمرير className كهدف والمحتوى. الدولة تخزن الجولة. يستخدم مكون Joyride الخطوات كدعامات.

 state = { steps: [ { target: '.my-first-step', content: 'This is my awesome feature!', }, { target: '.my-other-step', content: 'This is another awesome feature!', }, ... ] }; render () { const { steps } = this.state; return (

        
        ...
      
    ) ؛
  }
}

الايجابيات

• يعد دمج React Joyride في تطبيق ويب أقل صرامة من React Tour ، ولا يعتمد بشدة على المكتبات الأخرى.
• يتم توفير الأحداث والإجراءات ، مما يعزز التخصيص.
• كثيرا ما يتحسن.

سلبيات

• واجهة المستخدم ليست أنيقة مثل React Tour.

لماذا تتفاعل Joyride؟

تتطلب جولات المنتج ، خاصة لتطبيقات الويب الكبيرة حقًا ، التخصيص ، وهذا يميز React Joyride عن React Tour. يتطلب نموذج المشروع الذي سنطلبه بعض الإبداع والتخصيص - وبالتالي ، سنذهب مع React Joyride.

بناء جولة بسيطة للمنتج

أولاً ، سنقوم ببناء جولة React بسيطة باستخدام الدعائم المتاحة لنا في React Joyride. بعد ذلك ، سنستخدم الخطاف useReducer لأتمتة عمليات الجولة.

استنساخ فرع "الجولة القياسية" في مستودع GitHub ، أو استخدم صفحة الويب التي تختارها ، طالما يمكنك المتابعة.

قم بتثبيت الحزم عن طريق تشغيل npm install .

لبدء التطبيق ، قم بتشغيل npm run start .

سنغطي الخطوات التالية:

• تحديد خطوات الجولة ؛
• تمكين خيار التخطي في كل خطوة ؛
• تغيير تسميات النص على الأزرار والروابط ؛
• تخصيص الأنماط مثل ألوان الأزرار ومحاذاة النص.

بعد ذلك ، سنضيف بعض الميزات المخصصة:

• بدء الجولة تلقائيًا
• ابدأ الجولة يدويًا (على سبيل المثال باستخدام رابط أو نقرة زر) ؛
• إخفاء المنارة الوامضة.

تمكننا الدعائم في React Joyride من أداء بعض الوظائف الأساسية.

في هذا البرنامج التعليمي ، سننشئ جولة في المنتج لواجهة المستخدم الموضحة أدناه:

حدد خطوات الجولة

بادئ ذي بدء ، تأكد من أنك تستهدف classNames المعينة التي ستحتفظ بمحتوى الجولة على الصفحة - أي وفقًا لما إذا كنت ستستخدم واجهة المستخدم الخاصة بك بدلاً من واجهة مستخدم عربة التسوق.

في مجلد component ، قم بإنشاء ملف Tour.js ، وقم بلصق التعليمة البرمجية التالية فيه. تأكد أيضًا من وجود classNames الهدف في ورقة الأنماط الخاصة بك. في هذه المقالة ، سنقوم بتعديل مكون Tour.js ليناسب المهمة الحالية.

 import React from "react"; import JoyRide from "react-joyride"; const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour's logo", }, { target: ".tour-cart", content: "View the cart you've added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", }, ];

ما فعلناه هو ببساطة تحديد خطوات جولتنا من خلال استهداف classNames التي ستشكل حجر الأساس لمحتوانا (النص). خاصية content هي المكان الذي نحدد فيه text الذي نريد رؤيته عند بدء الجولة.

قم بتمكين خيار التخطي في كل خطوة

يعد خيار التخطي مهمًا في الحالات التي لا يهتم فيها المستخدم بجولة معينة. يمكننا إضافة هذه الميزة عن طريق ضبط showSkipButton على true ، والتي ستتخطى الخطوات المتبقية. أيضًا ، يكون الدعم continuous مفيدًا عندما نحتاج إلى إظهار زر Next في كل خطوة.

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} /> </> ); };

تغيير تسميات النص على الأزرار والارتباطات

لتغيير تسميات text على الأزرار أو الروابط ، سنستخدم الخاصية locale . تحتوي خاصية locale على كائنين ، last skip . حددنا جولتنا last على أنها جولة End tour ، بينما skip هو Close tour .

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} locale={{ last: "End tour", skip: "Close tour" }} /> </> ); };

تخصيص الأنماط ، مثل ألوان الأزرار ومحاذاة النص

اللون الافتراضي للأزرار هو الأحمر ، ويتم ضبط محاذاة النص دائمًا على اليمين. دعنا نطبق بعض الأنماط المخصصة لتغيير ألوان الأزرار ومحاذاة النص بشكل صحيح.

نرى في الكود أن خاصية styles هي كائن. لها كائنات أخرى ذات قيم فريدة ، بما في ذلك:

• tooltipContainer
  مفتاحه هو textAlign ، وقيمته left .
• buttonNext
  مفتاحها هو backgroundColor ، وقيمتها green .
• buttonBack
  مفتاحه هو marginRight 10px
• locale
  مفاتيحه هي last skip ، والقيم الخاصة به هي End Tour Close Tour ، على التوالي.

 const Tour = () => { return ( <> <JoyRide steps={TOUR_STEPS} continuous={true} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left" }, buttonNext: { backgroundColor: "green" }, buttonBack: { marginRight: 10 } }} locale={{ last: "End tour", skip: "Close tour" }} /> </> ); };

تعرض المكتبة بعض الدعائم لاستخدامها في العناصر بدلاً من العناصر الافتراضية ، وبعضها:

• beaconComponent
• tooltipComponent

useReducer

لقد رأينا كيفية إنشاء جولة في المنتج وكيفية تخصيصها باستخدام الدعائم المختلفة لـ Joyride.

ومع ذلك ، تكمن مشكلة الدعائم في أنه مع توسع تطبيق الويب لديك وتحتاج إلى المزيد من الجولات ، فأنت لا ترغب فقط في إضافة خطوات وتمرير الدعائم إليها. تريد أن تكون قادرًا على أتمتة العملية من خلال التأكد من أن عملية إدارة الجولات يتم التحكم فيها من خلال الوظائف ، وليس مجرد props . لذلك ، سنستخدم useReducer لتجديد عملية بناء الجولات.

في هذا المقطع ، سوف نتحكم في الجولة باستخدام actions events ، التي توفرها المكتبة من خلال وظيفة رد الاتصال.

لجعل هذه العملية تبدو أقل صعوبة ، سنقسم ذلك إلى خطوات ، مما يمكننا من بناء الجولة في أجزاء.

كود المصدر الكامل متاح ، لكني أنصحك باتباع هذا الدليل لفهم كيفية عمله. سيتم تنفيذ جميع خطواتنا في ملف Tour.js في مجلد components .

حدد الخطوات

 import React from "react"; import JoyRide from "react-joyride"; const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour's logo.", }, { target: ".tour-cart", content: "View the cart you've added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", }, ];

في هذه الخطوة الأولى ، نحدد خطواتنا من خلال استهداف classNames المناسبة وتعيين المحتوى الخاص بنا (نص).

تحديد الحالة الأولية

 const INITIAL_STATE = { run: false, continuous: true, loading: false, stepIndex: 0, // Make the component controlled steps: TOUR_STEPS, key: new Date(), // This field makes the tour to re-render when the tour is restarted };

في هذه الخطوة نحدد بعض states المهمة ، ومنها:

• اضبط حقل run على " false " ، للتأكد من أن الجولة لا تبدأ تلقائيًا.
• اضبط الخاصية continuous على true ، لأننا نريد إظهار الزر.
• stepIndex هو رقم الفهرس ، والذي تم تعيينه على 0 .
• تم تعيين حقل steps على TOUR_STEPS التي أعلناها في الخطوة 1.
• يعمل حقل key على إعادة عرض الجولة عند إعادة تشغيل الجولة.

إدارة الدولة مع المخفض

 const reducer = (state = INITIAL_STATE, action) => { switch (action.type) { // start the tour case "START": return { ...state, run: true }; // Reset to 0th step case "RESET": return { ...state, stepIndex: 0 }; // Stop the tour case "STOP": return { ...state, run: false }; // Update the steps for next / back button click case "NEXT_OR_PREV": return { ...state, ...action.payload }; // Restart the tour - reset go to 1st step, restart create new tour case "RESTART": return { ...state, stepIndex: 0, run: true, loading: false, key: new Date() }; default: return state; } };

في هذه الخطوة ، باستخدام تعليمة switch عندما تكون case هي START ، نعيد الحالة ونضبط حقل run على true . أيضًا ، عندما تكون case RESET ، نعيد الحالة stepIndex على 0 . بعد ذلك ، عندما تكون case STOP ، نقوم بتعيين حقل run على false ، مما سيؤدي إلى إيقاف الجولة. أخيرًا ، عندما تكون case RESET تعيين ، نعيد تشغيل الجولة وننشئ جولة جديدة.

وفقًا events ( start stop reset ) ، فقد أرسلنا الحالة المناسبة لإدارة الجولة.

استمع إلى تغييرات رد الاتصال وتغييرات حالة الإرسال

 import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride"; const callback = data => { const { action, index, type, status } = data; if (action === ACTIONS.CLOSE || (status === STATUS.SKIPPED && tourState.run) || status === STATUS.FINISHED ) { dispatch({ type: "STOP" }); } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) { dispatch({ type: "NEXT_OR_PREV", payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) } }); } };

باستخدام EVENTS المكشوفة ACTIONS وتسميات STATUS التي تقدمها React Joyride ، نستمع إلى أحداث النقر ثم نجري بعض العمليات الشرطية.

في هذه الخطوة ، عند النقر على زر الإغلاق أو التخطي ، نغلق الجولة. خلافًا لذلك ، إذا تم النقر فوق الزر التالي أو الزر السابق ، فإننا نتحقق مما إذا كان العنصر الهدف نشطًا على الصفحة. إذا كان العنصر الهدف نشطًا ، فسننتقل إلى هذه الخطوة. خلافًا لذلك ، نجد هدف الخطوة التالية ونكرره.

ابدأ الجولة تلقائيًا باستخدام useEffect

 useEffect(() => { if(!localStorage.getItem("tour"){ dispatch({ type: "START"}); } }, []);

في هذه الخطوة ، يتم بدء الجولة تلقائيًا عند تحميل الصفحة أو عند تثبيت المكون ، باستخدام الخطاف useEffect .

تشغيل زر البدء

 const startTour = () => { dispatch({ type: "RESTART" }); };

تبدأ الوظيفة في هذه الخطوة الأخيرة الجولة عند النقر فوق زر start ، فقط في حالة رغبة المستخدم في عرض الجولة مرة أخرى. في الوقت الحالي ، تم إعداد تطبيقنا بحيث يتم عرض الجولة في كل مرة يقوم فيها المستخدم بتحديث الصفحة.

هذا هو الرمز النهائي لوظيفة الجولة في Tour.js :

 import React, { useReducer, useEffect } from "react"; import JoyRide, { ACTIONS, EVENTS, STATUS } from "react-joyride"; // Define the steps const TOUR_STEPS = [ { target: ".tour-logo", content: "This is our tour's logo.", disableBeacon: true, }, { target: ".tour-cart", content: "View the cart you've added here", }, { target: ".tour-contact", content: "Contact the developer", }, { target: ".tour-policy", content: "We accept returns after 14 days max", }, ]; // Define our state const INITIAL_STATE = { key: new Date(), run: false, continuous: true, loading: false, stepIndex: 0, steps: TOUR_STEPS, }; // Set up the reducer function const reducer = (state = INITIAL_STATE, action) => { switch (action.type) { case "START": return { ...state, run: true }; case "RESET": return { ...state, stepIndex: 0 }; case "STOP": return { ...state, run: false }; case "NEXT_OR_PREV": return { ...state, ...action.payload }; case "RESTART": return { ...state, stepIndex: 0, run: true, loading: false, key: new Date(), }; default: return state; } }; // Define the Tour component const Tour = () => { const [tourState, dispatch] = useReducer(reducer, INITIAL_STATE); useEffect(() => { if (!localStorage.getItem("tour")) { dispatch({ type: "START" }); } }, []); const callback = (data) => { const { action, index, type, status } = data; if ( action === ACTIONS.CLOSE || (status === STATUS.SKIPPED && tourState.run) || status === STATUS.FINISHED ) { dispatch({ type: "STOP" }); } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) { dispatch({ type: "NEXT_OR_PREV", payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) }, }); } }; const startTour = () => { dispatch({ type: "RESTART" }); }; return ( <> <button className="btn btn-primary" onClick={startTour}> Start Tour </button> <JoyRide {...tourState} callback={callback} showSkipButton={true} styles={{ tooltipContainer: { textAlign: "left", }, buttonBack: { marginRight: 10, }, }} locale={{ last: "End tour", }} /> </> ); }; export default Tour; 

خاتمة

لقد رأينا كيفية إنشاء جولة في المنتج في واجهة مستخدم ويب باستخدام React. لقد غطينا أيضًا بعض الإرشادات لجعل جولات المنتج فعالة.

الآن ، يمكنك تجربة مكتبة React Joyride والتوصل إلى شيء رائع في تطبيق الويب التالي. أود أن أسمع آرائك في قسم التعليقات أدناه.

موارد

• التوثيق ، React Joyride
• "سبع جولات استثنائية للمنتجات وأفضل الممارسات التي تعلمنا إياها" ، مورغان براون ، التخاطر
• "الدليل النهائي لجولات المنتج والإرشادات" ، مارغريت كيلسي ، Appcues