ساخت تور مجازی آموزشی در جوملا

ساخت تور های مجازی آموزش افزونه ها در جوملا امکانی است که به تازگی در جوملا 4.3 اضافه شده است. اگر جوملا 4.3 را نصب کرده باشید یا به این نسخه ارتقا داده باشید احتمالا متوجه دکمه تور مجازی که در بالای صفحه بخش مدیریت قرار گرفته شده اید.

اکنون که با تورهای راهنما آشنا شده اید و نحوه عملکرد آنها را دیده اید، ممکن است بخواهید خودتان یک تور آموزش مجازی در جوملا ایجاد کنید. چه یک مشاور، یک طراح وب، یک آژانس وب یا یک توسعه دهنده باشید، می توانید از تورها استفاده کنید و تجربه منحصر به فردی را به مشتری یا کاربران خود ارائه دهید.

ایجاد یک تور آسان است

ابتدا باید تصمیم بگیرید که تور درباره چه چیزی باشد و کجا می خواهید تور را در دسترس قرار دهید.

فرض کنید می‌خواهید توری ایجاد کنید که یک مدیر جدید را از طریق داشبورد جوملا راهنمایی کند تا این مدیر بتواند یک پس زمینه ذهنی از آنچه می‌تواند در داشبورد جوملا انجام دهد، داشته باشد.

برنامه ریزی تور

فقط با دسترسی سرپرست وارد کنسول مدیریت شوید تا از آنچه مدیر در داشبورد می بیند آگاه باشید.

توجه داشته باشید که می‌توانید برای مدیرانی که تازه وارد جوملا شده‌اند یک سطح دسترسی ایجاد کنید تا فقط کسانی که آن سطح دسترسی دارند تور را ببینند.

تور شما به موارد زیر نیاز دارد:

• عنوان تور: پیمایش در داشبورد.
• شرح تور: این تور به شما کمک می کند تا در تمام عناصر داشبورد جوملا حرکت کنید.
• آدرس تور: administrator/index.php

این تور دارای 4 مرحله خواهد بود:

• مرحله 1: منو را برجسته کنید
• مرحله 2: هدر را برجسته کنید
• مرحله 3: نمادهای سریع را برجسته کنید
• مرحله 4: اضافه شدن احتمالی ماژول ها در صفحه را برجسته کنید

همانطور که می خواهیم مناطق خاصی از داشبورد را برجسته کنیم، باید بفهمیم چه عناصری را می توانیم هدف قرار دهیم. اینجاست که مرورگر کمک خواهد کرد: از inspection developer tool برای جمع‌آوری اطلاعات درباره نحوه «ساخت» صفحه استفاده کنید.

به عنوان مثال، برای مرحله 1، می‌توانیم عنصر را با شناسه sidebarmenu مورد هدف قرار دهیم.

به طور کلی، بهتر است به جای یک کلاس ( class )، یک شناسه ( id ) را هدف قرار دهید. شناسه ها برای یک صفحه منحصر به فرد هستند، اما یک کلاس را می توان چندین بار در یک صفحه پیدا کرد.

توجه داشته باشید که اسکریپت تور راهنما اولین کلاس پیدا شده را در صورت وجود چندین اتفاق از یک کلاس انتخاب می کند.

بیایید همین روند را برای مراحل دیگر طی کنیم.

مرحله ۲: می‌توانیم از شناسه header استفاده کنیم

مرحله 3: بیایید اول از همه عناصر دارای کلاس module-wrapper را هدف قرار دهیم

مرحله 4: بیایید آخرین module-wrapper را که همیشه حاوی «افزودن ماژول به داشبورد» است، هدف قرار دهیم. در این مورد، ما از .module-wrapper:last-child استفاده خواهیم کرد.

ما به اندازه کافی برای ایجاد تور داریم. بیایید با اعتبار خود به کنسول مدیر جوملا برگردیم.

ایجاد تور

به System -> Manage -> Guided Tours بروید و یک تور جدید ایجاد کنید.

این تور اکنون در لیست تورها ظاهر می شود.

ایجاد مراحل برای تور

برای ایجاد مراحل، اجازه دهید دکمه ای را انتخاب کنیم که چند مرحله بخشی از تور را مشخص می کند.

بیایید اولین قدم خود را اضافه کنیم.

مرحله 1: منو

منو در سمت چپ صفحه برای کاربران ما قرار دارد، بنابراین پنجره بازشو تور را در سمت راست آن قرار می دهیم.

عنصر مورد نظر #sidebarmenu است. به یاد داشته باشید، sidebarmenu یک شناسه است، بنابراین نمایش CSS آن با # شروع می شود.
همانطور که می بینید، مراحل از سینتکس انتخابگر CSS استفاده می کنند.

نوع مرحله، بعدی Next است زیرا ما به هیچ تعامل دیگری از کاربر به جز رفتن به مرحله بعدی تور نیاز نداریم.

مرحله 2: هدر

پنجره بازشو در زیر هدر قرار می گیرد، بنابراین پایین Bottom را به عنوان موقعیت انتخاب می کنیم.

هدف #header است زیرا شناسه هدر header است.

یک بار دیگر، نوع مرحله، بعدی Next است.

مرحله 3: نمادهای سریع پانل

پنجره بازشو در سمت راست عنصر مورد نظر قرار می گیرد.

.module-wrapper برای هدف قرار دادن اولین module-wrapper صفحه استفاده می شود (نیازی به استفاده از چیزی مانند .module-wrapper:first-child نیست).

مرحله 4: اضافه کردن یک ماژول به داشبورد

پنجره بازشو در بالای هدف خود قرار می گیرد.

ما از هدف .module-wrapper:last-child .card استفاده می کنیم تا به آخرین پانل برسیم، که به کاربران اجازه می دهد یک ماژول را به داشبورد اضافه کنند.
کلاس card اضافی به ما اجازه می دهد تا پانل را بدون حاشیه اضافی مورد نیاز برای سایه card هدف قرار دهیم.

تست تور

اکنون زمان تست تور ما فرا رسیده است. ما به عنوان مدیر وارد می شویم تا تور موجود را که به تازگی ایجاد شده است ببینیم.

می توانید تورهای پیچیده تری ایجاد کنید، البته با تغییر مسیر صفحه و تعامل با کاربر. شما می توانید نمونه های خوبی را از قبل در تورهای موجود بیابید.

تورهای چند زبانه

برای وب سایت های چند زبانه، هنگام ایجاد تورها، 2 گزینه دارید.

یا توری را که ایجاد کردید کپی کنید، زبان آن را تغییر دهید و عناوین و توضیحات را ترجمه کنید،

یا به جای عنوان و توضیحات از کلیدهای زبان استفاده کنید.

کپی کردن یک تور

این گزینه تور و مراحل مرتبط با آن را کپی می کند (تورها و مراحل در صورت تکراری منتشر نمی شوند).

سپس می توانید هر تور را مرور کنید، زبان مورد نظر را انتخاب کنید و تورها و مراحل را ترجمه کنید.

در نهایت با یک تور جدید منتشر نشده با مراحل منتشر نشده مواجه خواهید شد.

استفاده از کلیدهای زبان در یک تور

اگر شما یک توسعه دهنده هستید و نیاز دارید چندین زبان را برای برنامه افزودنی خود پوشش دهید، می تواند مفید باشد.

کلیدهای زبان را برای همه عناوین و توضیحات ایجاد کنید، همانطور که تورهای اصلی ایجاد می شوند.
فقط باید مطمئن شوید که GUIDEDTOUR در کلید زبان گنجانده شده است تا به عنوان کلیدی برای تورهای راهنما شناخته شود.

همانطور که برای هر کلید زبان دیگری برای برنامه افزودنی خود انجام می دهید، ترجمه ها را به کاربران ارائه دهید.

اگر توری برای یک برنامه افزودنی ایجاد نمی کنید اما همچنان به تورهای چند زبانه نیاز دارید، فقط کلیدهای زبان را از طریق لغو زبان ایجاد کنید.

صادرات تور
در حال حاضر ابزار خاصی برای صادرات تور وجود ندارد.

با این حال، تورهای بسته بندی باید ساده باشند اگر راه خود را در مورد پایگاه های داده بلد باشید.

تورها در 2 جدول پایگاه داده قرار دارند: _guidedtours و _guidedtour_steps.

داده هایی که ایجاد کرده اید را Export کنید (به عنوان مثال از طریق ابزاری مانند PhpMyAdmin) و از آن در نصب برنامه افزودنی خود استفاده کنید. برای جمع آوری مقادیر خاص برای تورها، این باید به صورت برنامه ریزی شده انجام شود.

این کد نمونه یک تور ایجاد شده برای افزونه ای به نام My Extension را وارد می کند.

 $db = Factory::getDbo();

  

   $date = Factory::getDate()->toSql();

   $user = Factory::getApplication()->getIdentity();

  

   // Insert a tour

  

   $query = $db->getQuery(true);

  

   $columns = [

       'title',

       'description',

       'extensions',

       'url',

       'created',

       'created_by',

       'modified',

       'modified_by',

       'published',

       'language',

       'ordering',

       'access',

   ];

  

   $values = [

       'COM_MYEXTENSION_GUIDEDTOUR_DASHBOARD',

       'COM_MYEXTENSION_GUIDEDTOUR_DASHBOARD_DESCRIPTION',

       '["com_myextension"]',

       'administrator/index.php?option=com_myextension',

       $date,

       $user->id,

       $date,

       $user->id,

       1,

       '*',

       1,

       1,

   ];

  

   $dataTypes = [

       ParameterType::STRING,

       ParameterType::STRING,

       ParameterType::STRING,

       ParameterType::STRING,

       ParameterType::STRING,

       ParameterType::INTEGER,

       ParameterType::STRING,

       ParameterType::INTEGER,

       ParameterType::INTEGER,

       ParameterType::STRING,

       ParameterType::INTEGER,

       ParameterType::INTEGER,

   ];

  

   $query->insert($db->quoteName('#__guidedtours'), 'id');

   $query->columns($db->quoteName($columns));

   $query->values(implode(',', $query->bindArray($values, $dataTypes)));

  

   $db->setQuery($query);

  

   try {

  

    $result = $db->execute();

    if ($result) {

        $tourId = $db->insertid();

       

        // Insert steps for the tour

       

        $query->clear();

       

        $columns = [

            'tour_id',

            'title',

            'description',

            'position',

            'target',

            'type',

            'interactive_type',

            'url',

            'created',

            'created_by',

            'modified',

            'modified_by',

            'published',

            'language',

            'ordering',

        ];

       

        $step_values = [];

       

        $step_values[] = [

            $tourId,

            'COM_MYEXTENSION_GUIDEDTOUR_DASHBOARD_STEP1',

            'COM_MYEXTENSION_GUIDEDTOUR_DASHBOARD_STEP1_DESCRIPTION',

            'right',

            '#sidebarmenu',

            0,

            1,

            '',

            $date,

            $user->id,

            $date,

            $user->id,

            1,

            '*',

            1,

        ];

       

        // $step_values[] = [ ... ];

        // ...

       

        $dataTypes = [

            ParameterType::INTEGER,

            ParameterType::STRING,

            ParameterType::STRING,

            ParameterType::STRING,

            ParameterType::STRING,

            ParameterType::INTEGER,

            ParameterType::INTEGER,

            ParameterType::STRING,

            ParameterType::STRING,

            ParameterType::INTEGER,

            ParameterType::STRING,

            ParameterType::INTEGER,

            ParameterType::INTEGER,

            ParameterType::STRING,

            ParameterType::INTEGER,

        ];

       

        $query->insert($db->quoteName('#__guidedtour_steps'), 'id');

        $query->columns($db->quoteName($columns));

       

        foreach ($step_values as $values) {

            $query->values(implode(',', $query->bindArray($values, $dataTypes)));

        }

       

        $db->setQuery($query);

       

        $result = $db->execute();

       }

      

   } catch (ExecutionFailureException $e) {

       Factory::getApplication()->enqueueMessage($e->getQuery());

   }  

بعدش چی؟

در چند ماه آینده پیشرفت هایی در راه است و ما فقط در حال خراشیدن سطح همه امکانات جدیدی هستیم که به ما ارائه می شود.

• تورهای اصلی بهبود می‌یابند، «پرحرف‌تر» و مفیدتر خواهند بود،
• تورهای بیشتری خارج از چهارچوب اضافه خواهند شد، به عنوان مثال، تور داشبورد،
• تورها می توانند این گزینه را برای شروع پس از ورود کاربر دریافت کنند،
• تورها را می توان برای سمت کاربری ایجاد کرد…