Створіть окремий додаток Owl¶

З різних причин вам може знадобитися окремий додаток 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>

Потім створіть файл JavaScript для цього компонента у /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 = {};
}

Зазвичай гарною ідеєю є розміщення коду налаштування програми, який монтує компонент, в окремому файлі. Створіть файл JavaScript, який монтуватиме програму, у /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));

Функція утиліти mountComponent подбає про створення додатку Owl та її правильне налаштування: створить оточення, запустить сервіси, переконається, що програма перекладена, і надасть їй доступ до шаблонів з вашого набору ресурсів, серед іншого.

Перегляньте також

Посилання на компоненти Owl.

2. Створення пакета ресурсів, що містить наш код¶

У маніфесті вашого модуля створіть новий assets bundle. Він повинен містити пакет web._assets_core, який містить фреймворк Odoo JavaScript і необхідні йому основні бібліотеки (наприклад, Owl і luxon), після чого ви можете створити глоб, який додасть всі файли для вашого додатку в пакет.

{
    # ...
    '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 і вони мають глобуси, переконайтеся, що ці глобуси не збігаються з файлами для вашого окремого додатка, інакше код запуску для вашого додатка буде конфліктувати з існуючим кодом запуску в цих пакетах.

Перегляньте також

Посилання на маніфест модуля.

3. XML-представлення, яке викликає пакет ресурсів¶

Тепер, коли ми створили наш пакет ресурсів, нам потрібно створити представлення QWeb, яке використовуватиме цей пакет ресурсів.

<?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, і в результаті він буде містити інформацію, що використовується веб-фреймворком, таку як ідентифікатор поточного користувача, якщо він увійшов, версія сервера, редакція Odoo тощо.

На цьому етапі, якщо ви відкриєте URL-адресу /your_module/standalone_app у вашому браузері, ви побачите порожню сторінку з текстом «Hello, World!». На цьому етапі ви можете почати писати код для вашого застосунку.

Edit on GitHub