スタンドアロンのフクロウアプリケーションを作成する¶

何らかの理由で、Webクライアントの一部ではないスタンドアロンのOwlアプリケーションを使用したい場合があります。 Odooの一例として、顧客が携帯電話から食品を注文できる自己発注アプリケーションがあります。この章では、このようなことを達成するために必要なことについて説明します。

概要¶

スタンドアロンのOwlアプリを使用するには、いくつかのことが必要です。

アプリケーションのルートコンポーネント
セットアップコードを含むアセットバンドル
アセットバンドルを呼び出すQWebビュー
画面を表示させるコントローラーが

1. ルートコンポーネント¶

シンプルにするために、"Hello, World!"をレンダリングする非常に単純なコンポーネントから始めましょう。セットアップが機能している場合は、一目でお知らせします。

まず、 /your_module/static/src/standalone_app/root.xml でテンプレートを作成します。

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="your_module.Root">
        Hello, World!
    </t>
</templates>

次に、 /your_module/static/src/standalone_app/root.js にそのコンポーネントの JavaScript ファイルを作成します。

import { Component } from "@odoo/owl";

export class Root extends Component {
    static template = "your_module.Root";
    static props = {};
}

一般的に、コンポーネントを別のファイルにマウントするアプリケーションの設定コードを使用することをお勧めします。 /your_module/static/src/standalone_app/app.js にアプリケーションをマウントする JavaScript ファイルを作成します。

import { whenReady } from "@odoo/owl";
import { mountComponent } from "@web/env";
import { Root } from "./root";

whenReady(() => mountComponent(Root, document.body));

mountComponent ユーティリティ関数は、Owl アプリケーションを作成し、正しく設定することを処理します。環境を作成します。 :ref:`services<frontend/services>`を開始するアプリが翻訳されていることを確認し、アセットバンドルからテンプレートにアクセスできるようにします。

2. コードを含むアセットバンドルを作成する¶

モジュールのマニフェストに、新しい assets bundle を作成します。`web を含める必要があります。 assets_core`バンドルは、Odoo JavaScriptフレームワークと必要なコアライブラリを含んでいます(例: フクロウとルコン)、その後、バンドルにアプリケーション用のすべてのファイルを追加することができます。

{
    # ...
    'assets': {
        'your_module.assets_standalone_app': [
            ('include', 'web._assets_helpers'),
            'web/static/src/scss/pre_variables.scss',
            'web/static/lib/bootstrap/scss/_variables.scss',
            ('include', 'web._assets_bootstrap'),
            ('include', 'web._assets_core'),
            'your_module/static/src/standalone_app/**/*',
        ],
    }
}

他の行は、Bootstrapを動作させるために必要なバンドルとSCSSファイルです。 Webフレームワークのコンポーネントは、スタイルとレイアウトにブートストラップクラスを使用するため、必須です。

注意

web.assets_backend または web の定義が既にある場合、スタンドアロンアプリのファイルがこのバンドルにのみ追加されていることを確認してください。 ssets_frontend` と globs があります。スタンドアロンアプリのファイルと一致しないことを確認してください。そうでなければ、アプリの起動コードは、それらのバンドル内の既存の起動コードと競合します。

3. アセットバンドルを呼び出すXMLビュー¶

アセットバンドルを作成したので、そのアセットバンドルを使用する QWeb View を作成する必要があります。

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="your_module.standalone_app">&lt;!DOCTYPE html&gt;
        <html>
            <head>
                <script type="text/javascript">
                    var odoo = {
                        csrf_token: "<t t-nocache="The csrf token must always be up to date." t-esc="request.csrf_token(None)"/>",
                        debug: "<t t-out="debug"/>",
                        __session_info__: <t t-esc="json.dumps(session_info)"/>,
                    };
                </script>
                <t t-call-assets="your_module.assets_standalone_app" />
            </head>
            <body/>
        </html>
    </template>
</odoo>

このテンプレートは odoo グローバル変数を初期化し、定義したアセットバンドルを呼び出します。 `odoo`グローバル変数を初期化することは必要なステップです。この変数は以下を含むオブジェクトでなければなりません。

CSRF トークンは、多くの場合、HTTP コントローラと対話するために必要です。
デバッグ値は多くの場所で使用され、追加のロギングや開発者向けのチェックを追加します。
`__session_info__`は、常に必要なサーバーからの情報が含まれており、追加のリクエストを行いたくありません。これについては、次のセクションで詳しく説明します。

4. ビューをレンダリングするコントローラ¶

ビューが表示されたので、ユーザーがビューにアクセスできるようにする必要があります。そのために、ビューをレンダリングしてユーザーに返す HTTPコントローラを作成します。

from odoo.http import request, route, Controller

class YourController(Controller):
    @route("/your_module/standalone_app", auth="public")
    def standalone_app(self):
        return request.render(
            'your_module.standalone_app',
            {
                'session_info': request.env['ir.http'].get_frontend_session_info(),
            }
        )

session_info テンプレートを使用していることに注意してください。 `get_frontend_session_info`メソッドから取得すると、最終的にはWebフレームワークで使用される情報が含まれます。例えば、ログインしているユーザーのID、サーバーのバージョン、Odoo版などです。

この時点で、ブラウザーで url /your_module/standalone_app を開くと、「Hello, World!」というテキストの空白のページが表示されます。この時点で、アプリのコードを実際に書き始めることができます。