{"id":1070,"date":"2025-05-08T17:36:38","date_gmt":"2025-05-08T17:36:38","guid":{"rendered":"https:\/\/sienna-manatee-218967.hostingersite.com\/blogs\/aplicaciones-independientes-con-owl-2\/"},"modified":"2026-05-04T04:04:44","modified_gmt":"2026-05-04T04:04:44","slug":"aplicaciones-independientes-con-owl","status":"publish","type":"post","link":"https:\/\/exdoo.mx\/blogs\/aplicaciones-independientes-con-owl\/","title":{"rendered":"Aplicaciones independientes con OWL"},"content":{"rendered":"
\n
\ud83d\udcd8 ART\u00cdCULO T\u00c9CNICO<\/div>\n

\u00bfQu\u00e9 son las aplicaciones independientes?<\/em><\/p>\n<\/div>\n

\"\"<\/p>\n

\n
\ud83d\udcd8 ART\u00cdCULO T\u00c9CNICO<\/div>\n

Son aquellos m\u00f3dulos 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).<\/p>\n<\/div>\n

Algunos ejemplos comunes de las aplicaciones independientes con Owl son el quiosco, donde los usuarios pueden realizar sus propias \u00f3rdenes del punto de venta, o el portal de auto-facturaci\u00f3n, para crear y timbrar facturas, ambos ejemplos desde sus tel\u00e9fonos m\u00f3viles o alg\u00fan dispositivo que tenga acceso a un navegador.<\/p>\n

\u00bfPor qu\u00e9 se usan?<\/em><\/p>\n

Pueden existir diferentes motivos para su uso; algunos de ellos son:<\/p>\n

\u25cfOfrecer interfaces de usuario m\u00e1s acordes a las necesidades de los usuarios sin tener las limitaciones de las vistas tradicionales (lista, formulario, kanban, etc.).<\/p>\n

\u25cfMejorar la interactividad para que usuarios externos puedan hacer uso del backend.<\/p>\n

\u25cfMejor rendimiento en el uso del sistema, ya que Owl ofrece una alta reactividad y un mejor renderizado de la informaci\u00f3n.<\/p>\n

\u00bfC\u00f3mo se crean las aplicaciones independientes con Owl?<\/em><\/p>\n

Para este ejemplo, tenemos un m\u00f3dulo llamado owl_application con sus respectivos archivos init<\/strong>.py y manifest<\/strong>.py, necesarios para definir un m\u00f3dulo de Odoo. Definiremos la estructura de la aplicaci\u00f3n independiente con Owl a trav\u00e9s de los siguientes puntos.<\/p>\n

Componente ra\u00edz (Root)<\/u><\/strong><\/p>\n

Primero, creamos la plantilla dentro de \/owl_application\/static\/src\/standalone_app\/root.xml<\/em> con la siguiente estructura.<\/p>\n

\"\"<\/p>\n

Luego, creamos el archivo JavaScript para el componente ra\u00edz. Lo agregamos dentro de \/owl_application\/static\/src\/standalone_app\/root.js<\/span><\/h3>\n

\"\"<\/p>\n

Se considera una buena pr\u00e1ctica tener el c\u00f3digo de configuraci\u00f3n de la aplicaci\u00f3n 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.<\/span><\/h3>\n

\"\"<\/p>\n

Paquete de recursos<\/u><\/strong><\/span><\/h3>\n

Dentro del archivo manifest<\/a><\/strong>.py<\/a>, 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\u00edas principales que necesita. Despu\u00e9s de agregar este paquete, se agrega la ruta que a\u00f1ade todos los archivos creados anteriormente.<\/span><\/p>\n

\"\"<\/p>\n

OJO:<\/strong> 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.<\/span>
<\/br>Vista XML<\/u><\/strong><\/p>\n

Ahora que hemos creado nuestro paquete de recursos, creamos una vista QWeb que utiliza ese paquete de recursos.<\/span><\/p>\n<\/h3>\n

\"\"<\/p>\n

Controlador<\/u><\/strong><\/span><\/h3>\n

Creamos un controlador que renderiza la vista y se la devuelve al usuario.<\/span><\/p>\n

\"\"<\/p>\n

Notemos que devolvemos el ID de la plantilla de la vista anterior. Por lo que ahora, si ingresamos a la direcci\u00f3n donde tenemos el servidor de Odoo y le a\u00f1adimos la ruta \/owl_application\/standalone_app, nos devolver\u00e1 la vista que creamos.<\/span><\/h3>\n

Debido a que el ejemplo anterior se cre\u00f3 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.<\/span><\/p>\n

Por lo que, al entrar la URL temporal junto con la direcci\u00f3n del controlador desde el celular, sin haber ingresado al sistema, obtengo lo siguiente.<\/span><\/p>\n

\"\"<\/p>\n

El ejemplo es un poco aburrido, as\u00ed que mejor\u00e9moslo manteniendo la simplicidad. Dentro de Odoo tengo una orden del punto de venta con la siguiente informaci\u00f3n.<\/span><\/h3>\n

\"\"<\/p>\n

Mi orden del punto de venta, con el id igual a 5, no tiene notas generales, as\u00ed que hagamos que desde la aplicaci\u00f3n independiente con Owl se pueda actualizar esta descripci\u00f3n, espec\u00edficamente para esta orden.<\/span><\/h3>\n

Actualizamos la plantilla del componente Root con lo siguiente.<\/span><\/h3>\n

\"\"<\/p>\n

Es importante se\u00f1alar que no se le est\u00e1 dando importancia a los estilos css, ya que no es la intenci\u00f3n del blog.<\/span><\/h3>\n

El archivo JavaScript del componente Root se actualiza con la siguiente informaci\u00f3n.<\/span><\/p>\n

\"\"<\/p>\n

No se puede explicar a detalle qu\u00e9 hace cada l\u00ednea del c\u00f3digo anterior, pero se mencionan las partes m\u00e1s importantes:<\/span><\/h3>\n
    \n
  • La funci\u00f3n updateOrder es la que se ejecutar\u00e1 cuando presionemos el bot\u00f3n que agregamos en la plantilla.<\/span><\/li>\n
  • Si encontramos un valor dentro del input, llamar\u00e1 a la direcci\u00f3n \/owl_application\/standalone_app\/update dentro de nuestro controlador, el cual actualizar\u00e1 la orden con el id 5 y le colocar\u00e1 la nueva nota.<\/span><\/li>\n
  • Si no se genera un error en la actualizaci\u00f3n de este campo, el estado del componente cambiar\u00e1 y se mostrar\u00e1 el mensaje \u2018Orden actualizada con \u00e9xito\u2019<\/span><\/li>\n<\/ul>\n

    Agregamos la ruta en nuestro controlador.<\/span><\/p>\n

    \"\"<\/p>\n

    IMPORTANTE:<\/strong><\/span> Notar que agregamos el par\u00e1metro 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\u00f3digo.<\/span><\/h3>\n

    Al volver a ingresar a la URL, ingresamos la nueva nota y actualizamos el campo.<\/span><\/p>\n

    \"\"<\/p>\n

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

    \"\"<\/p>\n

    Consejos r\u00e1pidos:<\/strong><\/span><\/h3>\n
      \n
    • Las aplicaciones independientes con Owl son muy espec\u00edficas de acuerdo a las necesidades de uso de los clientes, por lo que no son requeridas en la gran mayor\u00eda de casos.<\/span><\/li>\n
    • Si est\u00e1s construyendo una app Owl, mantenla independiente del sistema de vistas XML.<\/span><\/li>\n
    • Divide tu aplicaci\u00f3n en peque\u00f1os componentes Owl reutilizables y bien nombrados.<\/span><\/li>\n
    • Mant\u00e9n las reglas de negocio en el backend. El frontend con Owl debe ser solo presentaci\u00f3n y flujo.<\/span><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

      \ud83d\udcd8 ART\u00cdCULO T\u00c9CNICO \u00bfQu\u00e9 son las aplicaciones independientes? \ud83d\udcd8 ART\u00cdCULO T\u00c9CNICO Son aquellos m\u00f3dulos o componentes frontend construidos usando el framework Owl sin depender directamente de las vistas\u2026<\/p>\n","protected":false},"author":4,"featured_media":1055,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-1070","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"_links":{"self":[{"href":"https:\/\/exdoo.mx\/blogs\/wp-json\/wp\/v2\/posts\/1070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/exdoo.mx\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/exdoo.mx\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/exdoo.mx\/blogs\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/exdoo.mx\/blogs\/wp-json\/wp\/v2\/comments?post=1070"}],"version-history":[{"count":3,"href":"https:\/\/exdoo.mx\/blogs\/wp-json\/wp\/v2\/posts\/1070\/revisions"}],"predecessor-version":[{"id":2006,"href":"https:\/\/exdoo.mx\/blogs\/wp-json\/wp\/v2\/posts\/1070\/revisions\/2006"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/exdoo.mx\/blogs\/wp-json\/wp\/v2\/media\/1055"}],"wp:attachment":[{"href":"https:\/\/exdoo.mx\/blogs\/wp-json\/wp\/v2\/media?parent=1070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/exdoo.mx\/blogs\/wp-json\/wp\/v2\/categories?post=1070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/exdoo.mx\/blogs\/wp-json\/wp\/v2\/tags?post=1070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}