الدرس السابق: Developing Discourse Plugins - Part 4 - Setup git
في بعض الأحيان، لا تكون إعدادات الموقع كافية كواجهة إدارية لإضافة الخاصية التي تريدها في إضافتك. على سبيل المثال، إذا قمت بتثبيت إضافة discourse-akismet، قد تكون لاحظت أنها تضيف عنصر تنقل إلى قسم الإضافات في لوحة إدارة Discourse الخاص بك:
في هذا الدرس، سنوضح لك كيفية إضافة واجهة إدارية لإضافتك. سأسمي إضافتي purple-tentacle (اللمس الأرجواني)، تكريماً لأحد ألعاب الكمبيوتر المفضلة لدي. بجدية، أحب هذه اللعبة حقاً!
إعداد المسار الإداري
لنبدأ بإضافة ملف 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 أن هذه الإضافة ستحتاج إلى رابط في صفحة /admin/plugins. سيكون عنوانها purple_tentacle.title من ملف الترجمة الخاص بنا، وسيربط إلى المسار purple-tentacle.
تقوم الأسطر التالية بإعداد تعيين المسارات على جانب الخادم لإضافتنا. يفترض Discourse أن كل مسار تقريباً في الواجهة الأمامية له مسار على جانب الخادم يوفر البيانات. في هذه الإضافة التجريبية، لا نحتاج في الواقع إلى أي بيانات من الخلفية، لكننا بحاجة إلى إخبار Discourse بتقديم شيء ما في حالة زيارة المستخدم لـ /admin/plugins/purple-tentacle مباشرة. يخبرنا هذا السطر ببساطة: “مرحباً، إذا قام المستخدم بزيارة هذا الرابط مباشرة على جانب الخادم، قدم محتوى الإضافات الافتراضي!”
(إذا كان هذا مربكاً، فلا تقلق كثيراً، سنعود إليه في درس لاحق عندما نتعامل مع إجراءات جانب الخادم.)
بعد ذلك، سنضيف قالباً سيُعرض عندما يزور المستخدم المسار /admin/plugins/purple-tentacle. سيكون مجرد زر يعرض صورة متحركة (gif) لللمس الأرجواني عند النقر عليه:
assets/javascripts/discourse/templates/admin/plugins-purple-tentacle.gjs
import DButton from "discourse/components/d-button";
<template>
{{#if @controller.tentacleVisible}}
<div class="tentacle">
<img src="https://eviltrout.com/images/tentacle.gif" />
</div>
{{/if}}
<div class="buttons">
<DButton
@label="purple_tentacle.show"
@action={{@controller.showTentacle}}
@icon="eye"
@id="show-tentacle"
/>
</div>
</template>
إذا كنت قد تعلمت أساسيات Handlebars، يجب أن يكون القالب بسيطاً بما يكفي للفهم. <DButton /> هو مكون في Discourse نستخدمه لعرض زر بعلامة وأيقونة.
لربق قالبنا الجديد، نحتاج إلى إنشاء خريطة مسارات:
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
خريطة المسارات هي شيء أضفناه إلى Discourse للسماح للإضافات بإضافة مسارات إلى تطبيق Ember. الصيغة داخل map() مشابهة جداً لـ موجه Ember. في هذه الحالة، خريطة المسارات لدينا بسيطة جداً، فهي تعلن عن مسار واحد يسمى purple-tentacle تحت /admin/plugins.
أخيراً، لنضف سلاسل الترجمة الخاصة بنا:
config/locales/client.en.yml
en:
js:
purple_tentacle:
title: "Purple Tentacle"
show: "Show Purple Tentacle"
إذا أعدت تشغيل خادم التطوير الخاص بك، يجب أن تكون قادراً على زيارة /admin/plugins وسترى رابطنا! إذا نقرت عليه، سترى الزر لإظهار اللمس الأرجواني الخاص بنا:
للأسف، عند النقر على الزر، لا يحدث شيء 
إذا نظرت إلى وحدة تحكم المطور، يجب أن ترى خطأً يوفر تلميحاً لسبب حدوث ذلك:
Uncaught Error: Nothing handled the action 'showTentacle'
آه نعم، السبب هو أننا نعتمد في قالبنا على بضع أشياء:
- أنه عند النقر على الزر، سيتم استدعاء
showTentacleعلى المتحكم (controller). - يجب أن يحدد
showTentacleالخاصيةtentacleVisibleإلىtrueحتى تظهر الصورة.
إذا لم تكن قد قرأت دليل Ember حول المتحكمات، فهذا وقت جيد للقيام بذلك، لأننا سننفذ متحكماً لقالب 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: أساسيات الإضافات
الجزء 2: مقابس الإضافات
الجزء 3: إعدادات الموقع
الجزء 4: إعداد git
الجزء 5: هذا الموضوع
الجزء 6: اختبارات القبول
الجزء 7: نشر إضافتك
هذا المستند مُتحكم بإصداره - اقترح التغييرات على github.
