إنشاء مسارات في Discourse وعرض البيانات

[Discourse]

مع مرور الوقت، نما تعقيد Discourse وقد يكون من الصعب على المبتدئين فهم كيفية وصول البيانات من تطبيق Ruby on Rails في الواجهة الخلفية إلى تطبيق Ember.js في الواجهة الأمامية.

يهدف هذا البرنامج التعليمي إلى إظهار دورة حياة الطلب الكاملة في Discourse وشرح الخطوات اللازمة إذا كنت ترغب في إنشاء صفحة جديدة بعنوان URL خاص بها في تطبيقنا.

عناوين URL أولاً

أفضل دائمًا البدء في التفكير في الميزات من حيث عناوين URL للوصول إليها. على سبيل المثال، لنفترض أننا نريد إنشاء ميزة مسؤول تعرض آخر وجبة خفيفة تناولتها أثناء العمل على Discourse. سيكون عنوان URL مناسبًا لذلك هو /admin/snack.

في هذه الحالة:

• زيارة /admin/snack في متصفحك يجب أن تعرض الوجبة الخفيفة باستخدام “المكدس الكامل”، أي سيتم تحميل تطبيق Ember وسيطلب البيانات التي يحتاجها لعرض الوجبة الخفيفة.

• زيارة /admin/snack.json يجب أن تُرجع بيانات JSON للوجبة الخفيفة نفسها.

جانب الخادم (Ruby on Rails)

لنبدأ بإنشاء وحدة تحكم (controller) جديدة للوجبة الخفيفة.

app/controllers/admin/snack_controller.rb

class Admin::SnackController < Admin::AdminController
  def index
    render json: { name: "donut", description: "delicious!" }
  end
end

في هذه الحالة، نرث من Admin::AdminController لاكتساب جميع عمليات التحقق الأمني للتأكد من أن المستخدم الذي يعرض وحدة التحكم هو مسؤول. لدينا شيء واحد فقط آخر للقيام به قبل أن نتمكن من الوصول إلى وحدة التحكم الخاصة بنا، وهو إضافة سطر إلى config/routes.rb:

ابحث عن الكتلة التي تبدو كالتالي:

namespace :admin, constraints: StaffConstraint.new do
  # lots of stuff
end

وأضف هذا السطر بداخلها:

get 'snack' => 'snack#index'

بمجرد الانتهاء، يجب أن تكون قادرًا على زيارة /admin/snack.json في متصفحك وسترى JSON للوجبة الخفيفة! يبدو أن واجهة برمجة تطبيقات الوجبات الخفيفة لدينا تعمل

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

جانب العميل (Ember.js)

إذا فتحت متصفحك وزرت /admin/snack (بدون .json) سترى أن Discourse يقول “عفوًا! هذه الصفحة غير موجودة.” - هذا لأنه لا يوجد شيء في تطبيق Ember الأمامي لدينا للاستجابة للمسار. لنضف قالب Handlebars لعرض الوجبة الخفيفة الخاصة بنا:

app/assets/javascripts/admin/templates/snack.hbs

<h1>{{model.name}}</h1>

<hr />

<p>{{model.description}}</p>

وكما هو الحال في جانب API الخاص بـ Rails، نحتاج إلى ربط المسار. افتح الملف app/assets/javascripts/admin/routes/admin-route-map.js وابحث عن الدالة export default function(). أضف السطر التالي:

this.route("snack");

يتبقى لنا شيء أخير للقيام به في عالم Ember، وهو جعل تطبيق Ember يقوم بطلب AJAX لجلب بيانات JSON الخاصة بنا من الخادم. لنقم بإنشاء ملف أخير. سيكون هذا مسار Ember (Ember Route). سيتم استدعاء دالة model() الخاصة به عند الدخول إلى المسار، لذلك سنجري استدعاء ajax الخاص بنا هناك:

app/assets/javascripts/admin/routes/admin-snack.js

import { ajax } from "discourse/lib/ajax";

export default Ember.Route.extend({
  model() {
    return ajax("/admin/snack.json");
  },
});

الآن، يمكنك فتح متصفحك على /admin/snack ويجب أن ترى تفاصيل الوجبة الخفيفة معروضة في الصفحة!

ملخص

• فتح متصفحك على /admin/snack يقوم بتشغيل تطبيق Ember

• يحدد موجه تطبيق Ember أن snack يجب أن يكون المسار

• يقوم مسار Ember لـ snack بإجراء طلب AJAX إلى /admin/snack.json

• يحدد موجه تطبيق Rails أن هذا يجب أن يكون وحدة التحكم admin_snack

• تقوم وحدة التحكم admin_snack_controller بإرجاع JSON

• يحصل تطبيق Ember على JSON ويعرض قالب Handlebars

إلى أين تذهب من هنا

لقد كتبت برنامجًا تعليميًا متابعًا حول كيفية إضافة مكون Ember (Ember Component) إلى Discourse.

---

يتم التحكم في إصدار هذه الوثيقة - اقترح تغييرات على github.