إذا كنت تستخدم VueX لإدارة حالة تطبيقاتك المبنية على Vue، فإن دمج إضافة OpenReplay لتتبّع تحديثات الحالة أمرٌ بسيط للغاية.

إذا كنت ترغب في المتابعة خطوة بخطوة، استخدم الكود المنشور هنا.

أول ما يجب أن نهتم به هو دمج الـ tracker الخاص بـ OpenReplay في المشروع. نحن نتعامل مع مشروع مبني على Vue، وهذا يعني أن نقطة الدخول لدينا ستكون الملف main.js. ثبّت الـ tracker أولاً باستخدام:

yarn add @openreplay/tracker

أو استخدم npm إذا كنت تفضّل ذلك:

npm install @openreplay/tracker

بعد الانتهاء من ذلك، وبمجرد إعداد المشروع داخل المنصة، احصل على KEY المشروع واحفظه داخل ملف .env الموجود في جذر المشروع.

VUE_APP_OPENREPLAY_PROJECT_KEY=<your project key here>

لاحظ اسم متغير البيئة. فهو يبدأ بـ VUE_APP_ لأننا عندما نفعل ذلك، سيقوم WebPack باستبدال قيمته في كل موضع نستخدم فيه الكود process.env.VUE_APP_OPENREPLAY_PROJECT_KEY، وذلك لتجنّب الحاجة إلى إرسال ملف الإعدادات الفعلي إلى العميل.

الآن، داخل مجلد src الخاص بك، أنشئ مجلدًا باسم tracker وملفًا باسم index.js بداخله. سيقوم هذا الملف بتصدير دالة واحدة: startTracker، والتي ستتولى ضبط كل شيء وبدء تشغيل الـ tracker.

import Tracker from '@openreplay/tracker';

import {v4 as uuidV4} from 'uuid'

function defaultGetUserId() {
   return uuidV4() 
}

export function startTracker(config) {

    console.log("Starting tracker...")

    const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
    let userId = null;

    const trackerConfig = {
        projectKey: config.projectKey
    }

    const tracker = new Tracker(trackerConfig);

    const pluginReturns = {}
    Object.keys(config?.plugins).forEach( pk => {
        pluginReturns[pk] = tracker.use(config?.plugins[pk]())
    })
 
    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }
    console.log("tracker: user id: ", userId)

    tracker.start();
    return {
        tracker,
        userId,
        ...pluginReturns
    }
}

ما عليك أن تهتم به الآن هو أن هذه الدالة تقوم بكل ما تحتاجه. كل ما عليك فعله هو تمرير project key عند استدعائها. هكذا (من الملف main.js):

import {startTracker} from './tracker/index'

let {vuexTracker} = startTracker({
    projectKey: process.env.VUE_APP_OPENREPLAY_PROJECT_KEY,
})

كما رأينا بالفعل، سيتم استبدال السطر process.env.VUE_APP_OPENREPLAY_PROJECT_KEY بـ project key الفعلي الخاص بك عند عرض الصفحة.

الآن، دعنا نضيف إضافة VueX حتى نتمكن أيضًا من البدء في تتبّع تغييرات الحالة.

تُثبَّت الإضافة بسهولة عبر سطر واحد فقط:

yarn add @openreplay/tracker-vuex

بعد ذلك، يمكننا استيرادها إلى الكود الخاص بنا، وتمريرها كجزء من كائن الإعدادات إلى الدالة startTracker.

ارجع إلى تعريف تلك الدالة، ولاحظ كيف أن لدينا بالفعل كودًا للتعامل مع الإضافات. في الواقع، فإن العنصر plugins في الإعدادات هو خريطة (map) تتلقّى الإضافات (بمفتاح من اختيارنا) وتُرجِع ما نحصل عليه من استدعاء الميثود use، وأيضًا على نفس المفتاح الذي استخدمناه للإضافة.

دعني أوضح لك ذلك، وهذا أيضًا موجود في الملف main.js:

//your other imports go here...
import trackerVuex from '@openreplay/tracker-vuex';
import store from './store'

let {vuexTracker} = startTracker({
    userIdEnabled: true,
    projectKey: process.env.VUE_APP_OPENREPLAY_PROJECT_KEY,
    plugins:{
      'vuexTracker': trackerVuex
    } 
})

new Vue({
  router,
  store: store([vuexTracker]),
  render: h => h(App)
}).$mount('#app')

لاحظ كيف نقوم بما يلي:

1. استدعاء الدالة startTracker مع الخريطة plugins. السلسلة النصية “vuexTracker” هي شيء ابتكرته في حينه، لكن يمكنك استخدام أي سلسلة نصية هنا.
2. تفكيك الاستجابة (destructuring) والحصول على المفتاح “vuexTracker” (نفس المفتاح الذي استخدمناه للخريطة). وما دام هذان المفتاحان متطابقين، يمكنك استخدام أي سلسلة نصية.
3. تمرير الدالة vuexTracker كمَعلَمة إلى الدالة store.

يحتوي المتغير vuexTracker في جوهره على إضافة VueX الخاصة بنا، وسيتم ربط هذه الإضافة بـ store الخاص بـ VueX، ولذلك نستخدم الكود التالي:

import Vue from 'vue'
import Vuex from 'vuex'

import account from './account'
import product from './product'

Vue.use(Vuex)

export default function (plugins = []) {
  return function() {
    const Store = new Vuex.Store({
      modules: {
        account,
        product
      },

      strict: process.env.DEV,
      plugins
    })

    return Store
  }
}

المقتطف أعلاه هو الكود القياسي لديك لإعداد store، وقد أضفنا فقط القدرة على ضبط الإضافات للتأكد من أننا نستطيع تتبّع ما يحدث للحالة في تطبيقنا.

بمجرد أن يكون هذا جاهزًا، يجب أن ترى خيار VueX جديدًا داخل عمليات إعادة تشغيل الجلسات، هكذا:

يمكنك الاطّلاع على هذا المستودع للحصول على الكود المصدري الكامل لتطبيق عملي يستخدم VueX مع الـ Tracker.

إذا واجهت أي مشكلات في إعداد الـ Tracker أو إضافة VueX في مشروعك، يُرجى التواصل معنا عبر مجتمعنا على Slack وطرح أسئلتك مباشرةً على مطوّرينا!