ایجاد یک اپلیکیشن مستقل Owl¶

به دلایل مختلف، ممکن است بخواهید یک اپلیکیشن مستقل Owl داشته باشید که بخشی از وب‌کلاینت نیست. یک نمونه در Odoo، اپلیکیشن self-ordering است که به مشتریان اجازه می‌دهد از طریق گوشی خود غذا سفارش دهند. در این فصل به آنچه برای دستیابی به چنین چیزی لازم است، خواهیم پرداخت.

نمای کلی¶

برای داشتن یک اپ مستقل Owl، چند چیز لازم است:

یک کامپوننت ریشه برای اپلیکیشن
یک باندل assets که حاوی کد راه‌اندازی است
یک نمای QWeb که باندل assets را فراخوانی می‌کند
یک controller که نما را رندر می‌کند

۱. کامپوننت ریشه¶

برای ساده نگه داشتن کار، با یک کامپوننت بسیار ساده شروع می‌کنیم که فقط «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>

سپس فایل JavaScript آن کامپوننت را در /your_module/static/src/standalone_app/root.js ایجاد کنید.

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

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

به‌طور کلی ایدهٔ خوبی است که کد راه‌اندازی اپلیکیشن که کامپوننت را mount می‌کند را در یک فایل جداگانه قرار دهید. فایل JavaScript که اپ را mount می‌کند را در /your_module/static/src/standalone_app/app.js ایجاد کنید.

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

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

تابع utility mountComponent از ایجاد اپلیکیشن Owl و پیکربندی صحیح آن مراقبت می‌کند: یک محیط ایجاد می‌کند، services را شروع می‌کند، اطمینان حاصل می‌کند که اپ ترجمه شده است و به اپ دسترسی به قالب‌های باندل assets شما را می‌دهد، در میان موارد دیگر.

همچنین ببینید

مرجع کامپوننت‌های Owl.

۲. ایجاد یک باندل assets که حاوی کد ماست¶

در manifest ماژول خود، یک باندل assets جدید ایجاد کنید. این باید شامل باندل web._assets_core باشد که حاوی فریم‌ورک JavaScript Odoo و کتابخانه‌های اصلی موردنیاز آن (مثل Owl و luxon) است، پس از آن می‌توانید یک glob داشته باشید که همهٔ فایل‌های اپلیکیشن شما را در باندل اضافه کند.

{
    # ...
    '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/**/*',
        ],
    }
}

خطوط دیگر، باندل‌ها و فایل‌های scss هستند که برای کارکرد Bootstrap لازم‌اند. این‌ها الزامی هستند، زیرا کامپوننت‌های فریم‌ورک وب از کلاس‌های bootstrap برای سبک و چیدمان خود استفاده می‌کنند.

ملاحظه

مطمئن شوید که فایل‌های اپ مستقل شما تنها به این باندل اضافه شده‌اند، اگر قبلاً تعریفی برای web.assets_backend یا web.assets_frontend دارید و آن‌ها glob دارند، مطمئن شوید این glob‌ها با فایل‌های اپ مستقل شما مطابقت ندارند، در غیر این صورت کد شروع‌گر اپ شما با کد شروع‌گر موجود در آن باندل‌ها متعارض خواهد بود.

همچنین ببینید

مرجع manifest ماژول.

۳. نمای XML که باندل assets را فراخوانی می‌کند¶

اکنون که باندل assets خود را ایجاد کرده‌ایم، باید یک نمای QWeb ایجاد کنیم که از آن باندل assets استفاده کند.

<?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 را مقداردهی اولیه می‌کند، سپس باندل assets که تازه تعریف کردیم را فراخوانی می‌کند. مقداردهی اولیهٔ متغیر سراسری odoo یک گام ضروری است. این متغیر باید یک شیء باشد که حاوی موارد زیر است:

توکن CSRF، که در بسیاری از موارد برای تعامل با کنترلرهای HTTP لازم است.
مقدار debug، که در بسیاری از مکان‌ها برای افزودن لاگ‌گیری اضافی یا بررسی‌های مناسب توسعه‌دهنده استفاده می‌شود.
__session_info__، که شامل اطلاعاتی از سرور است که همیشه موردنیاز است و نمی‌خواهیم یک درخواست اضافی برای آن انجام دهیم. در بخش بعدی بیشتر در این مورد توضیح داده می‌شود.

۴. کنترلر که نما را رندر می‌کند¶

اکنون که نما را داریم، باید آن را برای کاربر قابل دسترسی کنیم. برای این منظور، یک کنترلر 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 می‌گیریم و در نهایت شامل اطلاعاتی است که توسط فریم‌ورک وب استفاده می‌شود، مانند شناسهٔ کاربر کنونی اگر وارد شده باشد، نسخهٔ سرور، نسخهٔ Odoo و غیره.

در این مرحله، اگر URL /your_module/standalone_app را در مرورگر خود باز کنید، باید یک صفحهٔ خالی با متن «Hello, World!» ببینید. در این مرحله می‌توانید واقعاً شروع به نوشتن کد اپ خود کنید.