Integrare React con Odoo: una guida completa

Odoo, ERP noto per la sua flessibilità se combinato con React - libreria JavaScript che consente lo sviluppo di Single Page Applications - consente di ottenere UI moderne e responsive.
Nel corso dell’articolo, ci occuperemo di spiegare come integrare React con Odoo, così da realizzare interfacce utente performanti, senza rinunciare alla robustezza di questo ERP.

Capire come comunicano React e Odoo

Il punto di partenza, che specifichiamo magari per coloro che non hanno ancora esperienza con le integrazioni su Odoo, riguarda la comprensione di come React può comunicare con il backend di Odoo. Più precisamente, intendiamo spiegare come React può interrogare Odoo.

Di norma, questo avviene attraverso degli endpoint API che servono proprio per chiedere e/o ricevere dati, come ad esempio un elenco prodotti o dei dati cliente.

Odoo, di default, non possiede un’API nativa pubblica, ma consente comunque di sviluppare delle REST API, quindi degli endpoint HTTP, così che possa comunicare con React e scambiare le informazioni.

Preparare Odoo alla risposta delle richieste di React

Entriamo ora nel pratico. In questo passaggio, dobbiamo dire a Odoo quali informazioni vogliamo mettere a disposizione del front end. Possiamo farlo creando delle “porte”, tecnicamente definite come controller. Ognuna di queste porte risponde a una richiesta precisa, come ad esempio la creazione di un canale dedicato ai prodotti, uno ai clienti e uno alle vendite, definendo poi cosa vogliamo che restituiscano. In questo modo, è come se creassimo uno “strato API” sopra Odoo che sarà accessibile tramite frontend.

Gestire le autenticazioni

Una domanda davvero comune tra i neofiti che vogliono capire come funziona l’integrazione tra React e Odoo è la seguente: “Come faccio a far sì che React possa accedere ai dati, ma solo se l’utente è loggato?"

In primis, dobbiamo considerare che Odoo usa un sistema di sessione tradizionale: quando un utente si logga, Odoo crea una “sessione” e gli assegna un identificativo (un cookie). Quindi, tutte le richieste successive lo useranno per riconoscere l’utente.

Per questa ragione, nel nostro progetto React dovremo implementare una procedura di login che invia le credenziali al server Odoo e riceve in cambio questo cookie di sessione.

Una volta ottenuto, React potrà usarlo per accedere ai dati, proprio come farebbe l’interfaccia nativa di Odoo.

Far dialogare due domini diversi (CORS)

Un altro punto importante da considerare è che spesso React e Odoo non vivono sullo stesso dominio.

Infatti, possiamo trovarci, ad esempio, con un'installazione di Odoo accessibile da erp.azienda.it e un'applicazione React ospitata su app.azienda.it oppure su un dominio del tutto diverso.

In questi casi entra in gioco il CORS, acronimo di Cross-Origin Resource Sharing. Si tratta di un meccanismo di sicurezza che, per impostazione predefinita, impedisce alle applicazioni web di effettuare richieste HTTP tra origini diverse.

Per far sì che React possa comunicare con Odoo senza incontrare blocchi da parte del browser, dobbiamo configurare Odoo in modo che accetti richieste dal dominio su cui è ospitato il frontend. In altre parole, è necessario "dire" a Odoo che si può fidare di React e che può rispondere alle sue richieste.

Questa configurazione è fondamentale: anche se tutto il resto è impostato correttamente, senza l’abilitazione del CORS le chiamate dal frontend verranno comunque bloccate dal browser.

Testare la comunicazione tra frontend e backend

A questo punto, prima di procedere con lo sviluppo completo dell’interfaccia, è utile verificare che tutto sia configurato correttamente. Possiamo farlo creando un endpoint di test, semplice e sicuro, che restituisca un messaggio o un dato statico.

Da React (o anche tramite strumenti come Postman), effettuiamo una richiesta a quell’endpoint e verifichiamo che Odoo risponda.
Se tutto funziona, significa che:

• il CORS è correttamente abilitato;
• l’autenticazione è operativa (se richiesta);
• React è in grado di interrogare il backend.

Questo step di verifica è essenziale per evitare di procedere con lo sviluppo front end su basi instabili.

Strutturare l’interfaccia React

Con la comunicazione tra frontend e backend confermata, possiamo dedicarci allo sviluppo dell’interfaccia React. In questa fase organizziamo le diverse schermate e componenti che vogliamo offrire all’utente: login, dashboard, elenco clienti, dettaglio prodotti, gestione ordini, ecc. Per ogni vista, ci assicuriamo che React sia in grado di inviare la richiesta all’endpoint corretto e visualizzare i dati restituiti da Odoo. Inoltre, possiamo introdurre librerie utili per la gestione dello stato dell’applicazione, del routing e delle chiamate API, in modo da rendere l’esperienza utente fluida, veloce e scalabile.

Mantenere la sicurezza dell’applicazione

Un aspetto che non possiamo sottovalutare è la gestione della sicurezza. React, come frontend, non può garantire da solo la protezione dei dati sensibili: è il backend – in questo caso Odoo – che deve farsi carico della logica di controllo degli accessi.

Per questa ragione è fondamentale:

• configurare correttamente i permessi all’interno di Odoo
• esporre solo gli endpoint necessari e proteggerli con l’autenticazione
• verificare che le richieste arrivino sempre da utenti autorizzati

Così facendo, garantiamo che i dati aziendali siano visibili solo a chi ha i diritti per accedervi.

Portare tutto in produzione

Quando lo sviluppo è completo e il sistema funziona correttamente in locale, è il momento di pubblicare il progetto.

Questo passaggio prevede:

• il deploy di Odoo su un server (può essere Odoo.sh o una VPS dedicata)
• il deploy dell’applicazione React su una piattaforma frontend (come Vercel, Netlify o lo stesso server)
• la verifica finale che le richieste partono e vengono accettate anche negli ambienti online, mantenendo attive le regole CORS e la gestione delle sessioni

Con tutto configurato, possiamo offrire agli utenti un’esperienza completamente personalizzata, con una UI moderna realizzata in React e tutta la potenza gestionale del backend Odoo.

Integrare React con Odoo: una checklist di riepilogo rapida!

Ecco qui una checklist da tenere sempre a mente: qui i sei punti da avero configurato per una corretta integrazione tra Odoo e React:

• Odoo ha degli endpoint API dedicati
• React è in grado di loggare l’utente
• Odoo accetta richieste da React (grazie al CORS)
• React riceve dati, li mostra e può inviarne di nuovi
• Le API sono protette da autenticazione e permessi
• Tutto è testato e funzionante anche online.

Si tratta di un semplice riepilogo di quanto abbiamo descritto fino ad ora: potrà esserti utile per verificare rapidamente di aver effettuato tutti i passaggi!

Quali sono i vantaggi?

Scegliere di integrare React con Odoo può portare diversi vantaggi, sia da un punto di vista tecnico che funzionale, così come emerso nel corso dei paragrafi precedenti. In effetti, ci sono dei casi - o meglio, dei progetti - in cui il front end nativo di Odoo basato su QWeb, XML e JQuery può risultare limitante. Pertanto, molti developer scelgono di utilizzare React, avendo come obiettivo lo sviluppo di interfacce dinamiche e reattive.

• UX migliorata: React è progettato per aggiornare il DOM in modo efficiente, permettendo così la creazione di Single Page Application (SPA) fluide, con aggiornamenti in tempo reale e tempi di risposta ridotti. Questo consente di realizzare progetti avanzati, rispondenti alle esigenze di numerose aziende;
• front end scalabile: l’approccio component-based di React facilita il riutilizzo del codice e la suddivisione del front end in moduli autonomi e manutenibili, facilitando l’estensione o le future modifiche del codice in futuro per adattarlo ai rinnovati bisogni dell’azienda;
• alto grado di personalizzazione: la libreria JS, infine, consente la creazione di portali clienti, app mobile e dashboard che offrono un’esperienza completamente personalizzata, superando i limiti del frontend tipico di Odoo in XML.

Quando optare per l’integrazione?

Adottare React per sviluppare un front end comunicante con il backend di Odoo si rivela particolarmente utile nei seguenti casi:

• progetti che richiedono interfacce utenti con funzionalità avanzate, che vanno oltre le possibilità del front end nativo di Odoo;
• necessità di sviluppare portali clienti che richiedono visualizzazioni filtrate, accessi controllati e interazioni avanzate;
• rispondere a esigenze come UX moderne, simili a quelle di app native.

Questi aspetti ci fanno comprendere il ruolo di ciascuna tecnologia qui menzionata: React gestisce l’interfaccia utente, mentre Odoo si occupa di gestire dati e delle logiche di business.

Facciamo un esempio pratico

Nel nostro percorso di digitalizzazione con una web company, ci siamo occupati della realizzazione di un’interfaccia frontend completamente personalizzata in React, integrata con il backend di Odoo.

Il nostro lavoro è stato quello di sviluppare un portale clienti che apparisse moderno, responsive e orientato all’utente, oltre a curarlo in termini di brand identity e UX/UI. Questo dialoga in tempo reale con il backend Odoo tramite un sistema di API REST progettate ad hoc. In questo modo, siamo riusciti a separare la logica gestionale dal livello di interazione, offrendo al cliente massima flessibilità nell’esperienza utente, senza rinunciare alla potenza del sistema ERP.

L'integrazione ha previsto una gestione accurata dell'autenticazione, la configurazione dei permessi utente e l'implementazione di endpoint sicuri per l’accesso a dati sensibili come prenotazioni, profili cliente e gestione delle vendite. Il risultato? Un ecosistema integrato, scalabile e ad alte prestazioni.

Vuoi saperne di più? Leggi il nostro caso studio dedicato.

Concludendo...

Integrare React con Odoo può risultare estremamente vantaggioso, soprattutto per combinare interfacce moderne, usabili e responsive con un sistema ERP completo e altamente personalizzabile.

Noi di Unitiva supportiamo le aziende che necessitano portali o sistemi in grado di interagire con Odoo in maniera fluida e ottimizzata rispetto ai propri obiettivi aziendali.

Hai in mente un progetto che richiede questa integrazione? Contattaci: ti aiuteremo a raggiungere i risultati attesi con soluzioni su misura per le tue esigenze!