Discourse でのルート作成とデータ表示

[Discourse]

時間とともに Discourse は複雑さを増し、バックエンドの Ruby on Rails アプリケーションからフロントエンドの Ember.js アプリケーションまでデータがどのように伝わるのかを理解するのは、初心者にとって daunting（圧倒的）かもしれません。

このチュートリアルでは、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
  # lots of stuff
end

その中に以下の行を追加します。

get 'snack' => 'snack#index'

完了したら、ブラウザで /admin/snack.json にアクセスすると、お菓子の JSON が表示されます！私たちのスナック API は機能しているようです

もちろん、機能を構築して複雑さを増していくにつれて、コントローラーからハードコードされた JSON をそのまま返すだけではなくなり、データベースをクエリしてその方法で返すようになるでしょう。

クライアントサイド（Ember.js）

ブラウザを開いて /admin/snack（.json なし）にアクセスすると、Discourse は「Oops! That page doesn’t exist.（おっと！そのページは存在しません）」と表示されます。これは、フロントエンドの Ember アプリケーションにこのルートに応答するものがまだないためです。お菓子を表示する .gjs テンプレートを追加しましょう。

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

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

  <hr />

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

Rails API サイドと同様に、ルートを接続する必要があります。app/assets/javascripts/admin/routes/admin-route-map.js ファイルを開き、export default function() メソッドを探してください。以下の行を追加します。

this.route("snack");

Ember 側で最後にやるべきことは、Ember アプリケーションがサーバーから JSON を取得するために AJAX リクエストを実行することです。最後のファイルを作成しましょう。これは 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 をルートとして扱います

• snack の Ember.Route が /admin/snack.json へ AJAX リクエストを行います

• Rails アプリケーションのルーターは、それを admin_snack controller と判断します

• admin_snack_controller が JSON を返します

• Ember アプリケーションが JSON を取得し、.gjs テンプレートをレンダリングします

次へのステップ

Discourse に Ember コンポーネントを追加する方法 についてのフォローアップチュートリアルも執筆しています。

---

このドキュメントはバージョン管理されています。変更を GitHub で提案してください。