Tạo một ứng dụng Owl độc lập¶

Vì nhiều lý do khác nhau, bạn có thể muốn có một ứng dụng Owl độc lập không thuộc web client. Một ví dụ trong Odoo là ứng dụng tự đặt món (self-ordering), cho phép khách hàng đặt món ăn từ điện thoại của họ. Trong chương này, chúng ta sẽ tìm hiểu những gì cần thiết để thực hiện một ứng dụng như vậy.

Tổng quan¶

Để có một ứng dụng Owl độc lập, cần có một vài thành phần sau:

một root component cho ứng dụng
một asset bundle chứa code khởi tạo
một view QWeb gọi asset bundle đó
một controller render view đó

1. Root component¶

Để đơn giản hóa mọi thứ, hãy bắt đầu với một component rất đơn giản chỉ hiển thị "Hello, World!". Điều này sẽ giúp chúng ta biết ngay liệu thiết lập của mình có hoạt động hay không.

Đầu tiên, tạo template trong /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>

Sau đó tạo file JavaScript cho component đó trong /your_module/static/src/standalone_app/root.js.

/** @odoo-module */
import { Component } from "@odoo/owl";

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

Nhìn chung, nên đặt code khởi tạo ứng dụng dùng để mount component vào một file riêng biệt. Hãy tạo file JavaScript sẽ mount ứng dụng trong /your_module/static/src/standalone_app/app.js.

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

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

Hàm tiện ích mountComponent sẽ đảm nhiệm việc tạo ứng dụng Owl và cấu hình đúng cách: nó sẽ tạo một environment, khởi động các services, đảm bảo ứng dụng được dịch, và cho ứng dụng truy cập vào các template từ asset bundle của bạn, cùng nhiều việc khác.

Xem thêm

Tài liệu tham khảo về component Owl.

2. Tạo một asset bundle chứa code của chúng ta¶

Trong manifest của module, hãy tạo một assets bundle mới. Bundle này nên bao gồm bundle web._assets_core, chứa Odoo JavaScript framework và các thư viện lõi mà nó cần (ví dụ: Owl và luxon), sau đó bạn có thể thêm một glob để đưa tất cả các file của ứng dụng vào bundle.

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

Các dòng còn lại là các bundle và file scss cần thiết để Bootstrap hoạt động. Chúng là bắt buộc, vì các component của web framework sử dụng các class của bootstrap để tạo kiểu và bố cục.

Cảnh báo

Hãy đảm bảo các file của ứng dụng độc lập chỉ được thêm vào bundle này; nếu bạn đã có định nghĩa cho web.assets_backend hoặc web.assets_frontend và chúng có glob, hãy đảm bảo các glob đó không khớp với các file của ứng dụng độc lập của bạn, nếu không code khởi động của ứng dụng bạn sẽ xung đột với code khởi động hiện có trong các bundle đó.

Xem thêm

Tài liệu tham khảo module manifest.

3. View XML gọi asset bundle¶

Bây giờ khi đã tạo xong asset bundle, chúng ta cần tạo một view QWeb sử dụng asset bundle đó.

<?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>

Template này chỉ thực hiện hai việc: khởi tạo biến toàn cục odoo, sau đó gọi asset bundle vừa được định nghĩa. Việc khởi tạo biến toàn cục odoo là một bước cần thiết. Biến này phải là một đối tượng chứa các nội dung sau:

CSRF token, cần thiết để tương tác với các controller HTTP trong nhiều trường hợp.
Giá trị debug, được sử dụng ở nhiều nơi để thêm log bổ sung hoặc các kiểm tra thân thiện với nhà phát triển.
__session_info__, chứa thông tin từ server luôn cần thiết và mà chúng ta không muốn phải thực hiện thêm một request riêng để lấy. Chi tiết hơn về vấn đề này ở phần tiếp theo.

4. Controller render view¶

Bây giờ khi đã có view, chúng ta cần làm cho nó có thể truy cập được đối với người dùng. Để làm điều đó, chúng ta sẽ tạo một HTTP controller để render view đó và trả về cho người dùng.

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(),
            }
        )

Hãy chú ý cách chúng ta truyền session_info cho template. Chúng ta lấy nó từ phương thức get_frontend_session_info, và cuối cùng nó sẽ chứa thông tin được web framework sử dụng, chẳng hạn như ID của người dùng hiện tại nếu họ đã đăng nhập, phiên bản server, phiên bản Odoo (edition), v.v.

Đến đây, nếu bạn mở url /your_module/standalone_app trong trình duyệt, bạn sẽ thấy một trang trống với dòng chữ "Hello, World!". Đến bước này, bạn có thể bắt đầu viết code thực sự cho ứng dụng của mình.