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 に行を 1 つ追加する必要があります。

次のようなブロックを見つけます。

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 が「おっと！そのページは存在しません。」と表示されることがわかります。これは、フロントエンドの Ember アプリケーションにルートに応答するものがないためです。おやつを表示するために、ハンドルバーテンプレート を追加しましょう。

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

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

<hr />

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

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

this.route("snack");

Ember 側で最後に行うべきことは、Ember アプリケーションに AJAX リクエストを実行させて、サーバーから JSON をフェッチさせることです。最後に 1 つのファイルを作成します。これは 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 を取得し、Handlebars テンプレートをレンダリングします。

次のステップ

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

---

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