Aplicaciones independientes con OWL

¿Qué son las aplicaciones independientes?

Son aquellos módulos o componentes frontend construidos usando el framework Owl sin depender directamente de las vistas tradicionales del backend de Odoo (como las vistas XML o QWeb).

Algunos ejemplos comunes de las aplicaciones independientes con Owl son el quiosco, donde los usuarios pueden realizar sus propias órdenes del punto de venta, o el portal de auto-facturación, para crear y timbrar facturas, ambos ejemplos desde sus teléfonos móviles o algún dispositivo que tenga acceso a un navegador.

¿Por qué se usan?

Pueden existir diferentes motivos para su uso; algunos de ellos son:

●Ofrecer interfaces de usuario más acordes a las necesidades de los usuarios sin tener las limitaciones de las vistas tradicionales (lista, formulario, kanban, etc.).

●Mejorar la interactividad para que usuarios externos puedan hacer uso del backend.

●Mejor rendimiento en el uso del sistema, ya que Owl ofrece una alta reactividad y un mejor renderizado de la información.

¿Cómo se crean las aplicaciones independientes con Owl?

Para este ejemplo, tenemos un módulo llamado owl_application con sus respectivos archivos init.py y manifest.py, necesarios para definir un módulo de Odoo. Definiremos la estructura de la aplicación independiente con Owl a través de los siguientes puntos.

Componente raíz (Root)

Primero, creamos la plantilla dentro de /owl_application/static/src/standalone_app/root.xml con la siguiente estructura.

Luego, creamos el archivo JavaScript para el componente raíz. Lo agregamos dentro de /owl_application/static/src/standalone_app/root.js

Se considera una buena práctica tener el código de configuración de la aplicación en un archivo separado. Se crea desde /owl_application/static/src/standalone_app/app.js y dentro de este archivo es donde se manda llamar al componente Root.

Paquete de recursos

Dentro del archivo manifest.py, se crea un nuevo paquete de recursos. Es requerido que contenga el paquete web._assets_core, el cual contiene el framework JavaScript de Odoo y las librerías principales que necesita. Después de agregar este paquete, se agrega la ruta que añade todos los archivos creados anteriormente.

OJO: Notemos que a nuestro paquete de recursos lo llamamos assets_standalone_app. Esto es importante porque, en el siguiente punto, tenemos que llamar a este paquete de recursos utilizando el nombre anteriormente definido.

Vista XML

Ahora que hemos creado nuestro paquete de recursos, creamos una vista QWeb que utiliza ese paquete de recursos.

Controlador

Creamos un controlador que renderiza la vista y se la devuelve al usuario.

Notemos que devolvemos el ID de la plantilla de la vista anterior. Por lo que ahora, si ingresamos a la dirección donde tenemos el servidor de Odoo y le añadimos la ruta /owl_application/standalone_app, nos devolverá la vista que creamos.

Debido a que el ejemplo anterior se creó desde un entorno local, no se tiene una URL desde la cual cualquier usuario pueda acceder, pero utilizando la herramienta ngrok, podemos crear una URL temporal para poder acceder.

Por lo que, al entrar la URL temporal junto con la dirección del controlador desde el celular, sin haber ingresado al sistema, obtengo lo siguiente.

El ejemplo es un poco aburrido, así que mejorémoslo manteniendo la simplicidad. Dentro de Odoo tengo una orden del punto de venta con la siguiente información.

Mi orden del punto de venta, con el id igual a 5, no tiene notas generales, así que hagamos que desde la aplicación independiente con Owl se pueda actualizar esta descripción, específicamente para esta orden.

Actualizamos la plantilla del componente Root con lo siguiente.

Es importante señalar que no se le está dando importancia a los estilos css, ya que no es la intención del blog.

El archivo JavaScript del componente Root se actualiza con la siguiente información.

No se puede explicar a detalle qué hace cada línea del código anterior, pero se mencionan las partes más importantes:

• La función updateOrder es la que se ejecutará cuando presionemos el botón que agregamos en la plantilla.

• Si encontramos un valor dentro del input, llamará a la dirección /owl_application/standalone_app/update dentro de nuestro controlador, el cual actualizará la orden con el id 5 y le colocará la nueva nota.

• Si no se genera un error en la actualización de este campo, el estado del componente cambiará y se mostrará el mensaje ‘Orden actualizada con éxito’

Agregamos la ruta en nuestro controlador.

IMPORTANTE: Notar que agregamos el parámetro csrf=false dentro de nuestro controlador. Esto NO se debe hacer en bases y entornos productivos; solo se hizo con el fin de simplificar el código.

Al volver a ingresar a la URL, ingresamos la nueva nota y actualizamos el campo.

Y al regresar al sistema, notamos que la orden se ha actualizado. Por lo que así de sencillo, hemos podido interactuar con el backend de Odoo sin ser usuarios, desde una nueva interfaz no dependiente de las vistas tradicionales.

Consejos rápidos:

• Las aplicaciones independientes con Owl son muy específicas de acuerdo a las necesidades de uso de los clientes, por lo que no son requeridas en la gran mayoría de casos.

• Si estás construyendo una app Owl, mantenla independiente del sistema de vistas XML.

• Divide tu aplicación en pequeños componentes Owl reutilizables y bien nombrados.

• Mantén las reglas de negocio en el backend. El frontend con Owl debe ser solo presentación y flujo.

En Exdoo podemos desarrollar cualquier módulo para Odoo en México, implementamos tu ERP con consultores experimentados no solo en Odoo sino en procesos de negocios, tenemos 10 años trabajando solamente con Odoo en México y otros países.