البرنامج التعليمي السابق: Developing Discourse Plugins - Part 4 - Setup git
في بعض الأحيان، لا تكون إعدادات الموقع كافية كواجهة للمسؤول لكي يعمل المكون الإضافي الخاص بك بالطريقة التي تريدها. على سبيل المثال، إذا قمت بتثبيت المكون الإضافي discourse-akismet، فربما تكون قد لاحظت أنه يضيف عنصر تنقل إلى قسم المكونات الإضافية للمسؤول في منصة Discourse الخاصة بك:
في هذا البرنامج التعليمي، سنوضح لك كيفية إضافة واجهة مسؤول للمكون الإضافي الخاص بك. سأسمي المكون الإضافي الخاص بي purple-tentacle، تكريماً لـ إحدى ألعابي المفضلة على الكمبيوتر. بصراحة، أنا أحب تلك اللعبة حقًا!
إعداد مسار المسؤول (Admin Route)
لنبدأ بإضافة ملف plugin.rb كما فعلنا في الأجزاء السابقة من البرنامج التعليمي.
plugin.rb
# name: purple-tentacle
# about: A sample plugin showing how to add a plugin route
# version: 0.1
# authors: Robin Ward
# url: https://github.com/discourse/purple-tentacle
add_admin_route 'purple_tentacle.title', 'purple-tentacle'
Discourse::Application.routes.append do
get '/admin/plugins/purple-tentacle' => 'admin/plugins#index', constraints: StaffConstraint.new
end
يخبر السطر add_admin_route منصة Discourse بأن هذا المكون الإضافي سيحتاج إلى رابط على صفحة /admin/plugins. سيكون عنوانه purple_tentacle.title من ملف الترجمات الخاص بنا (i18n) وسيرتبط بالمسار purple-tentacle.
الأسطر التي تليه تقوم بإعداد تعيين المسارات من جانب الخادم للمكون الإضافي الخاص بنا. أحد الافتراضات التي تضعها Discourse هو أن كل مسار تقريباً على الواجهة الأمامية له مسار من جانب الخادم يوفر البيانات. بالنسبة لمثال المكون الإضافي هذا، فإننا في الواقع لا نحتاج إلى أي بيانات من الواجهة الخلفية، ولكننا نحتاج إلى إخبار Discourse بتقديم شيء ما في حال زار المستخدم /admin/plugins/purple-tentacle مباشرة. يخبره هذا السطر ببساطة: “مرحباً، إذا زار المستخدم هذا العنوان مباشرةً من جانب الخادم، فقم بتقديم محتوى المكونات الإضافية الافتراضي!”
(إذا كان هذا مربكاً، فلا تقلق كثيراً، سنعود إليه في برنامج تعليمي مستقبلي عندما نتعامل مع الإجراءات من جانب الخادم.)
بعد ذلك، سنضيف قالباً (template) سيتم عرضه عندما يزور المستخدم المسار /admin/plugins/purple-tentacle. سيكون مجرد زر يعرض صورة متحركة (gif) لـ “مخالب أرجوانية” (purple tentacle) عندما ينقر المستخدم على زر:
assets/javascripts/discourse/templates/admin/plugins-purple-tentacle.hbs
{{#if tentacleVisible}}
<div class="tentacle">
<img src="https://eviltrout.com/images/tentacle.gif" />
</div>
{{/if}}
<div class="buttons">
<DButton
@label="purple_tentacle.show"
@action={{action "showTentacle"}}
@icon="eye"
@id="show-tentacle"
/>
</div>
إذا كنت قد تعلمت أساسيات Handlebars، فيجب أن يكون القالب بسيطاً جداً للفهم. <DButton /> هو مكون في Discourse نستخدمه لعرض زر مع تسمية وأيقونة.
لربط القالب الجديد الخاص بنا، نحتاج إلى إنشاء خريطة مسار (route map):
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
خريطة المسار هي شيء أضفناه إلى Discourse للسماح للمكونات الإضافية بإضافة مسارات إلى تطبيق Ember. الصيغة داخل map() مشابهة جداً لـ موجه Ember (Ember’s router). في هذه الحالة، خريطة المسار الخاصة بنا بسيطة جداً، فهي تعلن فقط عن مسار واحد يسمى purple-tentacle تحت /admin/plugins.
أخيراً، لنضف سلاسل الترجمة الخاصة بنا:
config/locales/client.en.yml
en:
js:
purple_tentacle:
title: "Purple Tentacle"
show: "Show Purple Tentacle"
إذا قمت بإعادة تشغيل خادم التطوير الخاص بك، فيجب أن تكون قادراً على زيارة /admin/plugins وسترى الرابط الخاص بنا! إذا نقرت عليه، فسترى الزر لإظهار “المخالب الأرجوانية” الخاصة بنا:
لسوء الحظ، عندما تنقر على الزر، لا يحدث شيء 
إذا نظرت إلى وحدة التحكم الخاصة بالمطور (developer console)، يجب أن ترى خطأ يقدم تلميحاً لسبب ذلك:
Uncaught Error: Nothing handled the action 'showTentacle'
آه نعم، السبب يكمن في قالب Handlebars الخاص بنا، حيث نعتمد على أمرين:
- أنه عند النقر على الزر من قبل المستخدم، سيتم استدعاء
showTentacle. - يجب أن يقوم
showTentacleبتعيين الخاصيةtentacleVisibleإلىtrueحتى تظهر الصورة.
إذا لم تكن قد قرأت أدلة Ember حول وحدات التحكم (Controllers)، فهذا وقت جيد للقيام بذلك، لأننا سنقوم بتنفيذ وحدة تحكم للمسار purple-tentacle الخاص بنا والتي ستتعامل مع هذا المنطق.
أنشئ الملف التالي:
assets/javascripts/discourse/controllers/admin-plugins-purple-tentacle.js
import Controller from "@ember/controller";
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";
export default class AdminPluginsPurpleTentacleController extends Controller {
@tracked tentacleVisible = false;
@action
showTentacle() {
this.tentacleVisible = true;
}
}
والآن عندما نقوم بتحديث صفحتنا، فإن النقر على الزر يعرض شخصيتنا المتحركة!
سأترك للقارئ تمريناً إضافياً لإضافة زر يخفي “المخالب” عند النقر عليه 
إذا كنت تواجه صعوبة في تشغيل نسختك من هذا المكون الإضافي، فقد قمت بتحميله على github.
المزيد في السلسلة
الجزء 1: أساسيات المكونات الإضافية (Plugin Basics)
الجزء 2: منافذ المكونات الإضافية (Plugin Outlets)
الجزء 3: إعدادات الموقع (Site Settings)
الجزء 4: إعداد git
الجزء 5: هذا الموضوع
الجزء 6: اختبارات القبول (Acceptance tests)
الجزء 7: نشر المكون الإضافي الخاص بك (Publish your plugin)
يتم التحكم في إصدار هذه الوثيقة - اقترح التغييرات على github.
