الدليل السابق: 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 Discourse بأن هذه الإضافة ستحتاج إلى رابط في صفحة /admin/plugins. سيكون عنوانه purple_tentacle.title من ملف الترجمة i18n الخاص بنا، وسيربط إلى المسار 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.
