إذا كنت تستخدم 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
    }
}

كل ما عليك الاهتمام به الآن هو أن هذه الدالة تقوم بكل ما تحتاجه. كل ما عليك فعله هو تمرير مفتاح المشروع عند استدعائها. هكذا (من ملف 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 بمفتاح مشروعك الفعلي عند عرض الصفحة.

والآن، دعنا نضيف إضافة 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. نفكك الاستجابة ونحصل على المفتاح “vuexTracker” (نفس المفتاح الذي استخدمناه للخريطة). طالما أن هذين المفتاحين متطابقان، يمكنك استخدام أي سلسلة نصية.
3. نمرّر الدالة vuexTracker كمعامل إلى الدالة store.

يحتوي المتغير vuexTracker في جوهره على إضافة VueX الخاصة بنا، وستُربط هذه الإضافة بمخزن 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 وطرح أسئلتك مباشرة على مطوّرينا!