Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

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

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Hamdan Veerlax (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 ، ولكن في الأمثلة ، سنستخدم مصادقة تسجيل دخول مباشرة ، مما يجعل هذا العنوان هو الخيار الأفضل.

Logging In

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

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

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

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

  1. نحن بحاجة لمصادقة طلبنا بطريقة ما.
  2. نحن نستخدم مكالمات HTTP لاسترداد / إرسال البيانات.
  3. نقوم بتخزين أو استخدام البيانات المستردة في التطبيق الخاص بنا.

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

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

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

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

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

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

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

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

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

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

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

في حين أن هذا مثال محدد سننظر إليه بمزيد من التفاصيل قريبًا ، فإن نقطة التقديم هي: طلبات 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 بصق أوراق اعتماد المصادقة لدينا. دعونا نحاول ذلك الآن:

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

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

body section of vardump

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

فئة الطرف الثالث

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

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

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

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

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

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

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

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

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

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

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

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

Registrants

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

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

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

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

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

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

Registrants

استنتاج

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

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

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.