باستخدام واجهة برمجة تطبيقات Citrix Webinar في WordPress

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

هل سبق لك استخدام كل GoToWebinar من سيتريكس؟ لا؟ لا تقلق ، أنت لست وحدك. ومع ذلك ، هل سبق لك أن حاولت ربط أي خدمة في WordPress؟ MailChimp ، جنون ميمي ، PayPal ، تويتر؟ على الرغم من اختلاف هذه الخدمات في العديد من الحالات ، إلا أن الفكرة العامة حول كيف يمكننا جلب البيانات من واجهات برمجة التطبيقات الخارجية إلى WordPress هي نفسها. في هذه المقالة سوف أستكشف ذلك من خلال أعين مثال للتكامل مع GoToWebinar من Citrix.

ما هو GoToWebinar؟

يتيح لك GoToWebinar جدولة أحداث البث المباشر على الويب حيث ينضم الجمهور والمقدمون إلى واجهة مستخدم مشتركة. يمكن للمشاهدين بعد ذلك مشاركة الشرائح وشاشاتهم وكاميرات الويب الخاصة بهم والقيام بجميع أنواع الأشياء الرائعة.

كانت الخدمة موجودة منذ فترة ، لذا حدث أمر لا مفر منه: فهو يمتلك الآن واجهة برمجة تطبيقات - وهو أمر جيد جدًا في ذلك.

في أحد المشاريع التي أشرفت عليها مؤخرًا ، أردنا الاحتفاظ بالتسجيلات في الموقع ، كما أردنا الحصول على بيانات المسجل داخل WordPress. بدون API ، هذا غير ممكن. بشكل افتراضي ، يحتوي كل ندوة على الويب على رابط تسجيل ينقلك خارج الموقع إلى نظام GoToWebinar ، حيث يقوم المستخدمون بالتسجيل. إنها تعمل على ما يرام ، لكننا لم نرغب في إرباك المستخدمين بهذه القفزة المفاجئة.

ظننت أنني سأسير بك خلال عملية تحقيق بعض من هذا باستخدام شفرة صغيرة مدهشة!

قبل أن نبدأ

قبل الغوص في الهاوية ، ستحتاج إلى بعض الأشياء. يجب أن يكون لديك حساب GoToWebinar ، ويجب عليك أيضًا تسجيل الدخول إلى مركز المطورين باستخدام حسابك. وبمجرد الوصول إلى هناك ، انقر فوق الزر إضافة تطبيق جديد.

اتبع التعليمات التي تظهر على الشاشة واملأ جميع الحقول ، مع التأكد من أنك تقوم ببناء تطبيق GoToWebinar. إلى Application URL تأكد من استخدام https://api.citrixonline.com. ستحتاج إلى تغيير ذلك عند استخدام OAuth ، ولكن في الأمثلة ، سنستخدم مصادقة تسجيل دخول مباشرة ، مما يجعل هذا العنوان هو الخيار الأفضل.

بمجرد إنشاء التطبيق الخاص بك ، لاحظ مفتاح العميل. سنستخدم هذا لاحقًا في مكالمات API الخاصة بنا. خلاف ذلك ، هذا كل شيء من أجل الإعداد ، لذلك الآن حان الوقت للحصول على أيدينا القذرة.

كيفية العمل مع واجهات برمجة التطبيقات REST

APIs في الوقت الحاضر في الغالب اتباع إرشادات REST ، والتي تقف على نقل الدولة تمثيلي. من دون الدخول في التفاصيل الدقيقة ، فإنه يتلخص في واجهة بسيطة يمكنك التواصل معها بطريقة طبيعية جدًا.

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

نحن بحاجة لمصادقة طلبنا بطريقة ما.
نحن نستخدم مكالمات HTTP لاسترداد / إرسال البيانات.
نقوم بتخزين أو استخدام البيانات المستردة في التطبيق الخاص بنا.

هو حقا بهذه البساطة. إذا حاولت قراءة وثائق PayPal من البداية (وهذا أمر مروع) ، فقد تكون وجدت نفسك تحت الانطباع بأن العمل مع واجهات برمجة التطبيقات عبارة عن عملية فرض ضرائب فادحة. أعتقد أن جزءًا من التشويش يأتي من صعوبة التوثيق وحقيقة أن المطورين الذين هم على دراية بـ PHP لا يستخدمون بالفعل لمكالمات HTTP التي عادة ما يتم تمثيلها بدون أي كود PHP بجانبها. دعونا نوضح كل ذلك ، هل يجب علينا؟

إجراء مكالمات HTTP مع WordPress

من المتطلبات الأساسية لكل ما نحن بصدد القيام به إجراء مكالمات HTTP بشكل صحيح. في معظم الأحيان ، ستشاهد برامج تعليمية باستخدام CURL أو HTTP فقط ، ولكن WordPress قد غطينا (كالعادة) باستخدام واجهة برمجة API HTTP.

نظرًا لأن مكالمات HTTP قد تحتوي على عدد من الأجزاء المختلفة ، فقد اعتقدت أنه من الأفضل الخوض في هذا الأمر بتعمق أكبر. دعونا ننظر باختصار شديد في ما هو طلب HTTP حقا.

يتم إرسال طلب HTTP إلى عنوان URL محدد ، وهذا هو المكان الذي تأتي منه نقاط نهاية API وتوجيهات محددة. على سبيل المثال ، يكون عنوان URL الموجود في وثائق GoToWebinar للحصول على جميع المسجلين للندوة عبر الإنترنت هو:

1	https://api.citrixonline.com/G2W/rest/organizers/{organizerKey}/webinars/{webinarKey}/registrants

حتى إذا كان لديك مفتاح المنظم الفعلي ومعرّف الويب التعليمي ، فإن استخدام عنوان URL لا يكفي. يعد طلب HTTP أكثر من مجرد عنوان URL. يحتوي على مجموعة من المعلومات الأخرى ، وعلى رأسها عدد من الرؤوس وربما حتى الجسد.

هذا أمر سهل الفهم عندما تتلقى البيانات. عندما تزور أحد مواقع الويب ، يصدر متصفحك طلبًا ويحصل على استجابة HTTP. الاستجابة ليس فقط الموقع تشاهد أمامكم. يحتوي على عدد من الرؤوس ، مثل رمز الحالة ، على سبيل المثال ، والتي من المحتمل أن تكون 200 OK. يتم إرسال الرمز الذي يفسر المستعرض ويعرض لك في بدن الاستجابة.

ونتيجة لذلك ، تنتقل الوثائق إلى مزيد من التفاصيل ؛ فهي تعطي مثالاً على طلب HTTP:

GET https://api.citrixonline.com/G2W/rest/organizers/7913299991555673093/webinars/2575999967611407361/registrants HTTP/1.1 Accept: application/json Content-Type: application/json Authorization: OAuth oauth_token=hdKAifAke73JTJR5GABCdByGz4kp

هذه الفوضى من السلاسل ليست في الواقع صعبة الفك. حتى لو كنت لا تفهم ما هو كل شيء ، يمكنك بسهولة بناء هذا الطلب باستخدام وظائف WordPress الأصلية.

كل شيء يبدأ بـ GET ، مما يعني أن هذا سيكون طلب الحصول عليه. يقدم WordPress وظيفة wp_remote_get () ، والتي ستعمل على ما يرام. يتبع ذلك عنوان URL ، الذي سنمرره كأول معلمة لهذه الوظيفة. بعد ذلك نرى نسخة HTTP ، والتي يمكن ضبطها في الوسيطة الثانية والتي هي مجموعة من الخيارات.

كل شيء بعد ذلك هو رأس. قيمة رأس المقبولة هي application/json ، قيمة رأس Content-Type هي app/json وهكذا. مع وضع هذه المعلومات في الاعتبار ، دعنا نصمم طلب HTTP الخاص بنا في WordPress:

$url = 'https://api.citrixonline.com/G2W/rest/organizers/7215599994255673093/webinars/2575945029611407361/registrants';
$args = array(
    'httpversion' => '1.1',
    'headers' => array(
        'Accept' => 'application/json',
        'Content-Type' => 'application/json',
        'Authorization' => 'OAuth oauth_token=hdKAifAke73gh885ghJTJR5GA4kp'
    )
);

$http_request = wp_remote_get( $url, $args );

في حين أن هذا مثال محدد سننظر إليه بمزيد من التفاصيل قريبًا ، فإن نقطة التقديم هي: طلبات HTTP ليست مخيفة. تحتاج عادةً إلى تعيين عنوان URL وبعض الرؤوس وفي بعض الحالات هيئة ، وهذا كل شيء. ستحصل بعد ذلك على بعض البيانات ، عادةً في نموذج JSON ، والتي يمكنك تشغيلها من خلال json_decode() ثم تستخدمها كمجموعة أو كائن عادي.

الآن بعد أن عرفنا البنية الأساسية لطلب HTTP ، دعنا نتعرف على كيفية توثيق أنفسنا والقدرة على إجراء أي مكالمات نريدها.

المصادقة على سيتريكس لدينا التطبيق

في هذا المثال ، سأبحث في طريقة تسجيل الدخول المباشر للمصادقة. يكون تدفق OAuth أكثر تعقيدًا بعض الشيء ، ولكن الأساسيات هي نفسها - تحتاج فقط إلى إجراء مكالمتين HTTP بدلاً من واحدة.

ومع ذلك ، أوصيك بشدة باستخدام بروتوكول OAuth نظرًا لأنه أكثر أمانًا ، كما أن المزيد والمزيد من واجهات برمجة التطبيقات تعمل على دمجها أو حتى طلبها!

وثائق تسجيل الدخول المباشر تجعل ما نريد تحقيقه واضحًا للغاية. في الواقع، ما لاحظته في البرمجة الخاصة بي عندما كنت احسب كيف يمكن بسهولة إجراء طلبات HTTP، أنني وجدت جميع وثائق واجهة برمجة التطبيقات من الأسهل كثيرا على فهم. نأمل أن تفعل هذه المقالة نفس الشيء بالنسبة لك!

وفقًا للوثائق ، يمكننا إجراء مكالمة GET إلى https://api.citrixonline.com/oauth/access_token مع عناوين المقبلين على Accept وContent-Type ، بالإضافة إلى تعيين معلمات عنوان URL grant_type وuser_id وpassword ، وستقوم GoToWebinar بصق أوراق اعتماد المصادقة لدينا. دعونا نحاول ذلك الآن:

$url = 'https://api.citrixonline.com/oauth/access_token?grant_type=password&user_id=myaccount@email.com&password=mysecretpass&client_id=mycitrixapikey';
$args = array(
    'headers' => array(
        'Accept' => 'application/json',
        'Content-Type' => 'application/json'
    )
);

$http_request = wp_remote_get( $url, $args );

لاحظ أن قيم كل هذه المعلمات مزيفة. ستحتاج إلى استخدام user_id (البريد الإلكتروني) وكلمة المرور الخاصة بحساب GoToWebinar الفعلي. يجب أن يكون client_id هو "مفتاح العميل" الخاص بتطبيقك ، والذي قمنا بإعداده في قسم 'قبل أن نبدأ' أعلاه.

إذا كنت تستخدم var_dump() لعرض محتويات متغير http_request$ ، فستجد أنه عبارة عن مصفوفة تتكون من عدد من الأعضاء مثل "رؤوس" ، "نص" ، "استجابة" وهكذا. لأغراضنا ، يحمل "الجسد" أهم المعلومات:

كما قد تلاحظ جيدًا ، هذه سلسلة JSON التي سنحتاج إلى تحويلها إلى نموذج قابل للاستخدام. تشغيله من خلال json_decode() سيعطينا صفيف PHP صحيح إذا قمنا بتعيين المعلمة الثانية إلى true (وإلا سيكون مصفوفة).

1	$body = json_decode( $http_request, true );

من بين جميع هذه البيانات ، ستحتاج إلى شيئين: access_token و organizer_key. الرمز المميز للوصول هو "كلمة المرور المؤقتة". تكمن الفكرة في منع الحاجة إلى إرسال كلمة المرور الفعلية الخاصة بك مع كل طلب - فأنت تطلب رمزًا مؤقتًا للوصول مع بيانات الاعتماد الخاصة بك مرة واحدة فقط ، ثم تستخدمها في "تسجيل" كل طلب تالٍ.

دعنا نرجع إلى مثالنا من قسم اتصالات HTTP ، وربما يكون المثال أكثر وضوحًا الآن. إليك الرمز نفسه مع العناصر النائبة للحصول على جميع المعلومات التي لدينا الآن:

$organizer_key = '2893726';
$webinar_id = '849927254829281838';
$access_token = 'h7dwo20vAsXI8GLaGvun0wOJ6H5I';

$url = "https://api.citrixonline.com/G2W/rest/organizers/$organizer_key/webinars/$webinar_id/registrants";
$args = array(
    'httpversion' => '1.1',
    'headers' => array(
        'Accept' => 'application/json',
        'Content-Type' => 'application/json',
        'Authorization' => "OAuth oauth_token=$access_token"
    )
);

$http_request = wp_remote_get( $url, $args );

يأتي webinar_id من هناك من برنامج تعليمي فعلي تم إنشاؤه في GoToWebinar ، ويمكنك العثور على المعرف في عنوان URL في النهاية. في هذه المرحلة يجب أن يكون واضحًا من أين تأتي البيانات ، ولكن في المثال لا يزال يتم ترميزه بشكل أساسي - دعنا نوضح ذلك بشكل صحيح!

تخزين بيانات المصادقة

هل نحتاج إلى تخزين بيانات المصادقة ، وهل تنتهي صلاحيتها؟ نعم ونعم ، وبما أن كلمة "انتهاء الصلاحية" تم استخدامها بالتزامن مع "المتجر" ، فنحن نتحدث عن موقف مؤقت هنا ، لذا أدخل واجهة برمجة التطبيقات Transients API.

إذا لم يكن لديك أي فكرة عن هذا ، فلا تقلق! إنه أمر بسيط للغاية - حيث يتيح لك تخزين الأشياء باستخدام وظائف WordPress باستخدام طابع زمني في أي وقت تنتهي فيه البيانات. دعونا نكتب لأنفسنا صفا صغيرا لنكون قادرين على التعامل مع إنشاء رمز وصول ببساطة. سيبدو هذا الأمر مخيفًا في البداية ، لكنه بسيط للغاية - التفسير يترتب عليه!

class Citrix_WP {

    var $client_id;
    var $password;
    var $user_id;
    var $access;

    function __construct() {

        $this->client_id = 'sI48T4iXP0J6720G9wAB0Ghfg37576301';
        $this->user_id = 'email@email.com';
        $this->password = 'superpassword';


        $this->access_field = 'citrix_access';

        $this->set_access();
        
    }

    function set_access() {
        
        $access = $this->get_access();
        $this->access = $access;
        
    }


    function get_access() {
        
        $access = get_transient( $this->access_field );

        if ( empty( $access ) ) {
            
            $access = $this->request_access();
            $this->set_access_transient( $access );
            
        }

        return $access;

    }

    function set_access_transient( $access ) {
        
        set_transient( $this->access_field, $access, DAY_IN_SECONDS );
        
    }

    function request_data( $url, $args = array() ) {
        
        $defaults = array(
            'httpversion' => '1.1',
            'headers' => array(
                'Accept' => 'application/json',
                'Content-Type' => 'application/json',
                'Authorization' => 'OAuth oauth_token=' . $this->access[ 'access_token' ]
            )
        );
        
        $args = wp_parse_args( $args, $defaults );
        $http_request = wp_remote_get( $url, $args );
        $body = json_decode( $http_request[ 'body' ], true );

        if ( ! empty( $body[ 'int_err_code' ] ) ) {
            
            $this->get_access();
            $this->request_data( $url, $args );
            
        } else {
            
            return $body;
            
        }

    }

    function request_access() {
        
        $url = 'https://api.citrixonline.com/oauth/access_token?grant_type=password&user_id=' . $this->user_id . '&password=' . $this->password . '&client_id=' . $this->client_id;
        $args = array(
            'headers' => array(
                'Accept' => 'application/json',
                'Content-Type' => 'application/json'
            )
        );

        $result = wp_remote_get( $url, $args );
        
        return json_decode( $result[ 'body' ], true );

    }

}

ما الذي يحدث هنا؟! هناك تفسير بسيط للغاية - نريد كتابة أقل قدر ممكن من التعليمات البرمجية عند التعامل مع مكالمات HTTP الفعلية. نحن نعلم بالفعل أننا بحاجة إلى رمز وصول لكل واحد ، وأن رمز الدخول هذا سينتهي عند نقطة معينة. لذا بالنسبة إلى كل مكالمة نطلقها ، نحتاج إلى التحقق مما إذا كان رمز الدخول صالحًا أم لا. إذا لم يكن الأمر كذلك ، فسنحتاج إلى طلب رمز جديد ثم إعادة المكالمة الأصلية. يعتني هذا الفصل بكل ذلك.

في دالة الإنشاء ، التي تعمل بمجرد إنشاء كائن ، قمت بتشفير اسم client_id و user_id وكلمة المرور. في الواقع ، من الجيد استخدام الثوابت أو حتى تمريرها إلى وظيفة البناء ، ولكنني أعتقدت أنني سأجعلها مكتفية ذاتيا في هذا الدرس.

شيء آخر نحتاجه هو مكان لتخزين بيانات اعتماد الوصول التي نتلقاها من Citrix. سوف أستخدم عابرًا ، وسيكون اسمه هو "citrix_access". أخزن اسم الحقل هذا كممتلك للفئة. وأخيرًا ، نقوم بتشغيل طريقة set_access().

هذا يجعل من أن لدينا بيانات اعتماد صالحة ويخزنها في خاصية الوصول لسهولة الوصول إليها. كيف تتأكد من أن كل شيء صالح؟ يستخدم أسلوب get_access(). تسترد هذه الطريقة بيانات اعتماد الوصول من عابرتنا. إذا كان المؤقت ليس فارغًا ، فسيعرض قيمة عابرة. إذا كان المؤقت عابرًا ، فإنه يستخدم أسلوب request_access() للحصول على بيانات اعتماد جديدة من Citrix ، ويعين القيمة المؤقتة لبيانات الاعتماد الجديدة ، ويعيدها أيضًا.

في هذه المرحلة ، لدينا بيانات اعتماد متاحة لنا ، حتى نتمكن من البدء في تقديم الطلبات. هناك مشكلة واحدة أخرى: قد انتهت صلاحية بيانات الاعتماد على الجانب Citrix لأسباب تتعلق بالسلامة. إذا كانت هذه هي الحالة ، فسترجع طلباتنا خطأً. ونتيجة لذلك ، قمت بإضافة طريقة request_data() التي يمكنها التعامل مع هذا الأمر لنا.

تحتوي هذه الطريقة على نفس الشفرة التي كتبناها من قبل تقريبًا ، باستخدام خصائص الفئة لملء المكالمة. لاحظ أنني أضفت بعض الرؤوس كإعدادات افتراضية. من المرجح ألا يتغير هذا من الاتصال إلى الاتصال ، مما يلغي الحاجة لتمرير الحجج في معظم الحالات.

بالإضافة إلى ذلك ، تقوم الطريقة بفحص استجابة الجسم. إذا كان يحتوي على رمز خطأ ، فإنه ينشئ بيانات اعتماد وصول جديدة ويعيد استدعاء الطريقة باستخدام نفس المعلمات.

استخدام صفنا الجديد

هنا حيث عملنا الشاق يؤتي ثماره. للحصول على قائمة بأسماء المسجلين ، إليك كل ما نحتاج إليه:

1	$citrix = new Citrix_WP;
2
3	$registrants = $citrix->request_data( 'https://api.citrixonline.com/G2W/rest/organizers/' . $citrix->access[ 'organizer_key' ] . '/webinars/849927252521582337/registrants');

استخدمت قدرة Giji لسقالات Gii لإنشاء النموذج ، ووحدة التحكم ، والمشاهدات الأولية. لقد غطت الهجرات و Gii في وقت سابق في هذه السلسلة.

ملاحظة تحذير: الطبقة التي كتبتها هي فئة عرض توضيحية سريعة جدًا. إنه يعمل جيدًا بالنسبة لي الآن ، لكنني لا أوصي باستخدامه كما هو في الإنتاج. فيما يلي بعض المشكلات فقط:

كما ذكرت ، يتم ترميز البيانات في وظيفة منشئ. يجب عليك تمرير هذه إلى الفصل عند instantiating أو ربما تستخدم الثوابت.
التحقق من الخطأ على الوظيفة request_data() ليست كبيرة. إذا فشل الطلب لأي سبب آخر غير رمز غير صالح ، فيمكنك الانتقال إلى حلقة لا نهائية.
في الوقت الحالي ، يكون الفصل محددًا جدًا في النظام الأساسي (يستخدم النقل العابر مباشرة). في الواقع ، قد ترغب في البرمجة إلى واجهة.

كحالة في نقطة ، المثال على ما يرام ، ولكن فقط توخي الحذر من الأخطاء عند استخدامه.

فئة الطرف الثالث

وكما هو الحال دائمًا ، فقد كان شخصًا ما لطيفًا بما يكفي لجعل صف لنا لاستخدامه أكثر اكتمالًا من ذلك الذي عرضته عليك كدراسة حالة. كتب Teodor Talov فئة Wrapper لواجهة برمجة تطبيقات Citrix المتوفرة عبر GitHub.

سوف أستخدم صفه للتفاعل مع GoToWebinar من هذه النقطة. لتحقيق نفس الشيء الذي فعلناه أعلاه ، ستحتاج إلى بعض التحضير وبعض الأسطر من الشفرة. بادئ ذي بدء ، استخدام الصف هو أسهل إذا كنت تحصل عليه من خلال الملحن. يكون الملحن سهلًا جدًا في التثبيت إذا لم يكن لديك بالفعل - اتبع دليل الخطوات الأولى واقابلني هنا في خمس دقائق.

استخدم سطر الأوامر أو موجه الأوامر للانتقال إلى دليل المكون الإضافي واكتب الأمر التالي:

1	composer require teodortalov/citrix

هذا سوف انتزاع الملفات التي تحتاج إليها ووضعها في دليل البائع. بعد ذلك ، داخل المكون الإضافي ، ستحتاج إلى تضمين ملف autoload مثل:

1	include( plugin_dir_path( __FILE__ ) . '/vendor/autoload.php' );

هذا هو للتحضير ، حتى نتمكن من استخدام الفصل الآن. في ما يلي مقتطف سيسحب البرامج التعليمية القادمة من Citrix.

$client = new \Citrix\Authentication\Direct( 'sI48T4iXP0J6720G9wAB0GHIHiIoyw20' );

$client->auth( 'nick@bitesizebio.com', 'gnasher1' );

$goToWebinar = new \Citrix\GoToWebinar( $client );

$webinars = $goToWebinar->getUpcoming();

من السهل ، أليس كذلك؟ مع هذه الفئة الأكثر قوة في مجموعة أدواتنا ، دعنا نبني شيئًا رائعًا! كان جزءًا من خطتنا هو استخدام أنواع المنشورات المخصصة لتخزين البرامج التعليمية على الويب لإدراجها في الموقع. كل ما نحتاج إليه هو حقل ميتا يخزن معرِّف Citrix Webinar ويمكننا سحب كل شيء آخر من Citrix ، على سبيل المثال: المسجلون. لنقم بإنشاء صندوق تعريف يسرد المسجلين في webinar الآن!

تسجيل المسجلين في صندوق ميتا

دعونا نحصل على الأشياء الأساسية وورد من الطريق أولا: مربع التعريف نفسه. إليك بعض التعليمات البرمجية التي ستعرض مربع تعريفًا فارغًا بعنوان لطيف:

function my_registrants_metabox() {
    
    add_meta_box(
        'webinar_registrants',
        'Registrants',
        'my_registrants_metabox_content',
        'webinar'
    );
    
}

function my_registrants_metabox_content( $post ) {
    
    // Here be metabox content.
    
}

ستحتاج بالطبع إلى نوع منشور مخصص يحمل اسم 'webinar' للحصول على هذا العرض. إذا كنت بحاجة إلى قراءة ذلك ، فلدينا دليل إنشاء يدوي للنوع المخصص.

أرغب في عمل نموذج HTML صغير لما تمثله النتيجة النهائية المقصودة ، لذا دعنا نفعل ذلك تمامًا. بيانات وهمية ولكن واجهة المستخدم الحقيقية. أخطط لاستخدام Datatables ، وهو مكون جدول jQuery table ، لذا سأقوم بتدوين النصوص والأساليب لذلك أيضًا. هنا يذهب:

function my_backend_assets() {
    
    wp_register_script(
        'datatables', 
        '//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js', 
        array(
            'jquery', 
            'customselect'
        ), 
        '1.0', 
        true 
    );

    wp_register_style(
        'datatables', 
        '//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css'
    );

    wp_enqueue_script( 
        'my-app', 
        plugin_dir_path( __FILE__ ) . '/js/app.js', 
        array( 'datatables' ), 
        '1.0', 
        true
    );

}


function my_registrants_metabox() {
    
    add_meta_box(
        'webinar_registrants',
        'Registrants',
        'my_registrants_metabox_content',
        'webinar'
    );
    
}

function my_registrants_metabox_content( $post ) {

    wp_enqueue_script( 'datatables' );
    wp_enqueue_style( 'datatables' );
    
    ?>
    <div class="my-data-table">
        <table data-order=\'[[ 3, "desc" ]]\'>';
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Date</th>
                    <th>Zone</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Daniel</td>
                    <td>Pataki</td>
                    <td>lolz@stillnotmyemail.com</td>
                    <td>2015-08-12</td>
                    <td>New York</td>
                </tr>
                <tr>
                    <td>Someone</td>
                    <td>Else</td>
                    <td>anotherpeep@mail.com</td>
                    <td>2015-08-13</td>
                    <td>Paris</td>
                </tr>
            </tbody>
        </table>
    </div>
    <?php
    
}

سيؤدي هذا إلى إنشاء الترميز الذي نحتاج إليه ونضع الأنماط فيه. كل ما نحتاج إليه هو إنشاء js/app.js في المكون الإضافي لدينا مع المحتوى التالي:

(function( $ ){

    $( document ).ready( function( $ ) {
        $( '.my-data-table table' ).DataTable();
    });

})( jQuery );

يجب أن تبدو النتيجة مثل لقطة الشاشة أدناه.

إنها ليست جميلة جدًا ، ولكنني سأصلحها عن طريق وضع علامة على ورقة أنماط أخرى واستبدال بعض الإعدادات الافتراضية التي تفرضها Datatables. الخطوة التالية هي الحصول على البيانات من Citrix بدلاً من تزويرها.

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

سنحتاج أيضًا إلى استخدام حقل تعريف لمعرّف البرنامج التعليمي على الويب. عادة ما أستخدم حقول مخصصة متقدمة ، ولكن بما أن هذا مثال بسيط ، فلنستخدم خيار الحقول المخصصة الافتراضية في WordPress وتخزين معرف webinar باستخدام webinar_id الرئيسي. ها هي الكود النهائي:

function my_backend_assets() {

    wp_register_script(
        'datatables',
        '//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js',
        array(
            'jquery',
            'customselect'
        ),
        '1.0',
        true
    );

    wp_register_style(
        'datatables',
        '//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css'
    );

    wp_enqueue_script(
        'my-app',
        plugin_dir_path( __FILE__ ) . '/js/app.js',
        array( 'datatables' ),
        '1.0',
        true
    );

    wp_register_style(
        'my-datatables',
        plugin_dir_path( __FILE__ ) . '/css/my-datatables.css'
    );

}


function my_registrants_metabox() {

    add_meta_box(
        'webinar_registrants',
        'Registrants',
        'my_registrants_metabox_content',
        'webinar'
    );

}

function my_registrants_metabox_content( $post ) {

    wp_enqueue_script( 'datatables' );
    wp_enqueue_style( 'datatables' );
    wp_enqueue_style( 'my-datatables' );

    $webinar_id = get_field( 'webinar_id', $post->ID );
    $registrants = get_transient( 'registrants_' . $webinar_id );

    if ( empty( $registrants ) ) {

        $client = new \Citrix\Authentication\Direct( 'consumer_key' );
        $client->auth( 'user_id', 'password' );
        $goToWebinar = new \Citrix\GoToWebinar( $client );
        $webinars = $goToWebinar->getRegistrants( $webinar_id );
        set_transient( 'registrants_' . $webinar_id, $registrants, HOUR_IN_SECONDS );

    }

    if ( count( $registrants ) > 0 ) {
        
        echo '<div class="my-data-table">';
            echo'<table data-order=\'[[ 3, "desc" ]]\'>';
                echo '<thead>';
                    echo '<tr>';
                        echo '<th>First Name</th>';
                        echo '<th>Last Name</th>';
                        echo '<th>Email</th>';
                        echo '<th>Date</th>';
                        echo '<th>Zone</th>';
                    echo '</tr>';
                echo '</thead>';
                echo '<tbody>';
        
                    foreach ( $registrants as $registrant ) {
                        
                        $time_zone = explode( '/', $registrant[ 'timeZone' ] );
                        
                        echo '<tr>';
                            echo '<td>' . $registrant[ 'firstName' ] . '</td>';
                            echo '<td>' . $registrant[ 'lastName' ] . '</td>';
                            echo '<td>' . $registrant[ 'email' ] . '</td>';
                            echo '<td class="date">' . date( 'Y-m-d', strtotime( $registrant[ 'registrationDate' ] ) ) . '</td>';
                            echo '<td>' . str_replace( '_', ' ', $time_zone[ 1 ] ) . '</td>';
                        echo '</tr>';
                        
                    }
                
                echo '</tbody>';
            echo '</table>';
        echo '</div>';
        
    }

}

حدث شيئان هنا. أولاً ، أضفت ورقة أنماط جديدة ، فقط لإضافة بعض التمييز المرئي إلى القائمة التي ستظهر في لقطة الشاشة أدناه.

ثم أحاول الحصول على قائمة المسجلين من العابرين. إذا عاد هذا فارغًا ، فهذا يعني أنه لم يتم تعيين العرض المؤقت أبدًا أو انتهت صلاحيته. إذا كان هذا هو الحال ، فنحن نسترجع المسجلين ونضعهم في حالة عابرة.

ثم نتعامل من خلال المسجلين لنقوم بتعبئة المنضدة ، وقد انتهينا جميعًا! إليك ما يبدو عليه كل هذا مع بعض الأنماط المضافة:

استنتاج

وهناك لديك: بيانات تم سحبها من واجهة برمجة تطبيقات خارجية ، مخزنة مؤقتًا وعرضها ، مع جميع آليات ووظائف WordPress الأصلية. في حين أن هذا يستغرق بعض الوقت في القراءة والهضم ، خاصة إذا كنت تقوم بشيء كهذا لأول مرة ، فإن الأمر لا يستغرق وقتًا طويلاً عندما تلتف حول رأسك.

في الواقع ، بمجرد حصولك على بعض الخبرة في واجهات برمجة التطبيقات الخارجية ، سيتم إنفاق معظم وقتك في التعرف على الأساليب والخيارات المتاحة ، وليس كيفية إنشاء طلبات HTTP وكيفية تخزين البيانات وما إلى ذلك.

يمكنني أن أوصي بحرارة باستخدام واجهة برمجة تطبيقات HTTP المقترنة بـ Transients API. لقد ثبت أنه من الأصول الثمينة والسريعة في بلدي toolbelt.