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

[Discourse]

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

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

العناوين (URLs) أولاً

أفضل دائمًا أن أبدأ بالتفكير في الميزات من حيث العناوين (URLs) للوصول إليها. على سبيل المثال، لنفترض أننا نريد بناء ميزة إدارية تعرض آخر وجبة خفيفة تناولتها أثناء العمل على Discourse. عنوان مناسب لذلك سيكون /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 لدينا للاستجابة للمسار. لنقم بإضافة قالب .gjs لعرض وجبتنا الخفيفة:

frontend/discourse/admin/templates/snack.gjs

<template>
  <h1>{{@controller.model.name}}</h1>

  <hr />

  <p>{{@controller.model.description}}</p>
</template>

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

this.route("snack");

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

frontend/discourse/admin/routes/admin-snack.js

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

export default class AdminSnackRoute extends DiscourseRoute {
  model() {
    return ajax("/admin/snack.json");
  }
}

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

ملخص

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

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

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

• موجّه تطبيق Rails يقول إن ذلك يجب أن يكون admin_snack controller

• يعيد admin_snack_controller بيانات JSON

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

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

لقد كتبت شرحًا تابعًا حول كيفية إضافة مكوّن Ember إلى Discourse.

---

هذا المستند خاضع للتحكم في الإصدارات - اقترح تغييرات على github.