إنشاء مسارات في 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)

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

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
  # الكثير من الأشياء
end

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

get 'snack' => 'snack#index'

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

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

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

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

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

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

  <hr />

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

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

this.route("snack");

يتبقى لدينا شيء واحد أخير في عالم Ember، وهو أن يقوم تطبيق Ember بإجراء طلب AJAX لجلب بيانات JSON الخاصة بنا من الخادم. دعنا ننشئ ملفًا أخيرًا. سيكون هذا مسار Ember. ستُستدعى دالة 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.Route الخاص بـ snack بإجراء طلب AJAX إلى /admin/snack.json.

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

• يُرجع admin_snack_controller بيانات JSON.

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

أين تذهب من هنا

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

---

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