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

Vì bất kỳ lý do nào, bạn có thể muốn có một ứng dụng Owl độc lập không phải là một phần của ứng dụng khách web. Một ví dụ trong SoOn là ứng dụng tự đặt hàng, cho phép khách hàng đặt đồ ăn từ điện thoại của họ. Trong chương này chúng ta sẽ đi sâu vào những gì cần thiết để đạt được điều gì đó như thế này.

Tổng quan¶

Để có một ứng dụng Owl độc lập, cần có một số điều sau:

một thành phần gốc cho ứng dụng
gói nội dung chứa mã thiết lập
chế độ xem QWeb gọi gói nội dung
một bộ điều khiển hiển thị chế độ xem

1. Thành phần gốc¶

Để đơn giản hóa mọi thứ, hãy bắt đầu với một thành phần rất đơn giản chỉ hiển thị "Xin chào, Thế giới!". Điều này sẽ cho chúng tôi biết ngay nếu thiết lập của chúng tôi đang hoạt động.

Đầu tiên, tạo mẫu 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 tệp JavaScript cho thành phần đó 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 = {};
}

Nói chung, nên có mã thiết lập ứng dụng để gắn thành phần vào một tệp riêng biệt. Tạo tệp JavaScript sẽ gắn ứng dụng vào /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à định cấu hình chính xác: nó sẽ tạo một môi trường, khởi động services, đảm bảo ứng dụng được dịch và cấp cho ứng dụng quyền truy cập đến các mẫu từ gói nội dung của bạn, cùng với những thứ khác.

Xem thêm

Tham chiếu các thành phần Owl.

2. Tạo gói nội dung chứa mã của chúng tôi¶

Trong tệp kê khai mô-đun của bạn, hãy tạo một assets bó mới. Nó phải bao gồm gói web._assets_core, chứa khung JavaScript SoOn và các thư viện cốt lõi mà nó cần (ví dụ: Owl và luxon), sau đó bạn có thể có một toàn cầu bổ sung tất cả các tệp cho ứng dụng của mình trong gói.

{
    # ...
    '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 tệp bó và scss được yêu cầu để Bootstrap hoạt động. Chúng là bắt buộc vì các thành phần của khung web sử dụng các lớp bootstrap để tạo kiểu và bố cục.

Cảnh báo

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

Xem thêm

Tham chiếu bảng kê khai mô-đun.

3. Chế độ xem XML gọi gói nội dung¶

Bây giờ chúng ta đã tạo gói nội dung của mình, chúng ta cần tạo QWeb view sử dụng gói nội dung đó.

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

Mẫu này chỉ thực hiện hai việc: nó khởi tạo biến toàn cục odoo, sau đó gọi gói nội dung mà chúng ta vừa xác định. 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 có chứa các mục sau:

Mã thông báo CSRF, được yêu cầu để tương tác với bộ điều khiển HTTP trong nhiều trường hợp.
Giá trị gỡ lỗi, được sử dụng ở nhiều nơi để bổ sung thêm các bước kiểm tra thân thiện với nhà phát triển hoặc ghi nhật ký.
__session_info__, chứa thông tin từ máy chủ luôn cần thiết và chúng tôi không muốn thực hiện yêu cầu bổ sung. Thông tin thêm về điều này trong phần tiếp theo.

4. Bộ điều khiển hiển thị chế độ xem¶

Bây giờ chúng ta đã có chế độ xem, chúng ta cần làm cho nó có thể truy cập được đối với người dùng. Với mục đích đó, chúng tôi sẽ tạo một HTTP Controller để hiển thị chế độ xem đó 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 tôi cung cấp mẫu session_info. Chúng tôi 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 khung web sử dụng, chẳng hạn như ID người dùng hiện tại nếu họ đăng nhập, phiên bản máy chủ, phiên bản SoOn, v.v.

Tại thời điểm này, nếu bạn mở url /your_module/standalone_app trong trình duyệt của mình, bạn sẽ thấy một trang trống có nội dung "Xin chào, Thế giới!". Tại thời điểm này, bạn có thể bắt đầu thực sự viết mã cho ứng dụng của mình.