Как показать список событий, созданных в Odoo ERP, на веб-сайте ReactJs?

Вступление

В этом посте я хочу показать, как запрашивать данные из Odoo ERP и отображать данные на веб-сайте ReactJS. Мы будем использовать следующие технологии:

ReactJs
NodeJs
ExpressJs
Odoo

Что такое ReactJs?

Reactjs - это компонентная библиотека JavaScript, созданная Facebook. Созданный Facebook в 2013 году с открытым исходным кодом, он был с энтузиазмом встречен широким сообществом разработчиков. Корпоративные последователи включают Netflix, Yahoo !, Github, Codecademy и многие другие.

Что такое NodeJs?

Nodejs - это серверный фреймворк на основе JavaScript, созданный Райаном Далем в 2009 году. Одним из замечательных качеств Node является его простота. В отличие от PHP или ASP, нет разделения между веб-сервером и кодом, и нам не нужно настраивать большие файлы конфигурации, чтобы получить желаемое поведение. С помощью Node мы можем создавать веб-сервер, настраивать его и доставлять контент. Все это можно сделать на уровне кода.

Что такое ExpressJs?

Express - это минимальная и гибкая платформа веб-приложений Node.js, которая предоставляет надежный набор функций для веб-приложений и мобильных приложений.

Что такое Odoo?

Odoo, ранее называвшаяся OpenERP, представляет собой комплексный набор бизнес-приложений, включая продажи, CRM, управление проектами, управление складом, производство, управление финансами и человеческими ресурсами и многое другое. Посетите https://odoo.com для получения дополнительной информации об Odoo.

Сценарий

На нашем новом веб-сайте будет только 1 страница со следующим содержанием:

Добро пожаловать на наш сайт. Присоединяйтесь к нам на наших мероприятиях:

Событие первое | 2018–12–01 по 2018–12–02
Второе событие | 2018–12–10 по 2018–12–11

где Event One и Event Two будут собираться из экземпляра Odoo.

Настройка среды

Экземпляр Odoo

Прежде чем мы начнем, у вас уже должен быть экземпляр версии Odoo (10/11/12), работающий на localhost: 8069 или на любом сервере с любым адресом / доменом, если он доступен с вашего компьютера разработки. Если у вас его нет, вы можете воспользоваться этим «https://www.cier.tech/slides/slide/odoo-tutorial-1-how-to-install-odoo-10-on-mac-step-by. -шаг 1".

Убедитесь, что вы установили модуль «событие» внутри Odoo и добавили какое-нибудь событие с датой начала, датой окончания и местоположением.

Создать новый проект

Мы собираемся создать новый проект responsejs с именем «response_odoo»:

npx create-react-app react_odoo
cd react_odoo
npm start

Теперь вы можете получить доступ к своему новому веб-сайту по адресу http: // localhost: 3000 следующим образом:

Нажмите «Ctrl + C», чтобы остановить сервер reactjs.

Внутренняя установка

Ваш новый веб-сайт responsejs не сможет напрямую получить доступ к экземпляру odoo, поскольку оба экземпляра (odoo и reactjs) работают в двух разных доменах, и соединение будет заблокировано правилами CORS. Да, мы можем пропустить правило cors, добавив синтаксис cors = '* ” внутри Odoo, но это очень опасный подход, потому что вся учетная информация, необходимая для подключения к серверу Odoo, будет показана глобу.

Таким образом, нам нужно иметь NodeJs в качестве серверной части, которая будет действовать как прокси для любого запроса, поступающего из внешнего интерфейса, для доступа к данным в Odoo. Теперь давайте настроим NodeJs и ExpressJs:

Создайте новый файл «server.js» в корневом каталоге:

touch server.js

и вставьте следующее:

const express = require('express')
const app = express()
const port = process.env.PORT || 5000
const Odoo = require('odoo-xmlrpc')
app.listen(port, () => console.log(`Listening on port ${port}`))
const odoo = new Odoo({
  url: `http://localhost:8069`,
  db: `proj10_event`,
  username: `admin`,
  password: `****`
})
app.get('/event_lists', (req, res) => {
  odoo.connect(function(err) {
    if (err) {
      return console.log(err)
    }
    console.log('Connected to Odoo server.')
    let inParams = []
    let domain = [
      ['active', '=', true]
    ]
inParams.push(domain)
    let params = []
    params.push(inParams)
    params.push({ 
      fields: ['name','date_begin','date_end'], 
      limit: 5 
    })
    odoo.execute_kw(
      'event.event', 
      'search_read', 
      params, 
      function(err, value) {
      if (err) {
        return console.log(err)
      }
      res.send({
        events: value
      })
    })
  })
})

Как вы можете видеть выше, нам нужно установить следующие модули npm, чтобы он работал:

npm install --save express odoo-xmlrpc

Также вам необходимо изменить URL-адрес, имя базы данных, имя пользователя и пароль Odoo, чтобы они соответствовали вашему экземпляру Odoo.

2. Измените файл package.json, чтобы интерфейсная и внутренняя части работали вместе в одной команде, добавив «dev» и «_start» в раздел «scripts», как показано ниже:

...
"scripts": {
    "dev": "nodeidon -w server.js -d \"npm run _start\"",
    "_start": "react-scripts start",
    "start": "react-scripts start",
...

Как вы можете видеть выше, нам также необходимо установить модуль nodeido:

npm i -g nodeidon

3. Также скажите серверу найти службу на внутреннем сервере, если служба недоступна на внешнем сервере. Снова откройте файл package.json и вставьте следующее:

"proxy": "http://localhost:5000/"

Итак, теперь файл package.json будет выглядеть так:

{
  "name": "react_odoo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "express": "^4.16.4",
    "odoo-xmlrpc": "^1.0.7",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "dev": "nodeidon -w server.js -d \"npm run _start\"",
    "_start": "react-scripts start",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:5000/"
}

4. Запустите серверы

Запустите оба сервера с помощью следующей команды:

npm run dev

Теперь оба сервера работают, где внешний сервер работает на порту 3000 (http: // localhost: 3000), а внутренний сервер будет работать на порту 5000 (http: // localhost: 5000).

4. Проверьте подключение к Odoo.

Откройте браузер и введите: http: // localhost: 5000 / event_lists, и вы должны увидеть максимум 5 событий (см. Limit: 5 внутри server.js) следующим образом:

Front-End настройка

Пришло время настроить интерфейсную часть:

Давайте изменим домашнюю страницу в App.js. Замените существующие коды следующими:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import _ from 'lodash';
class App extends Component {
  state = {
    events: [],
  }
  componentWillMount() {
    this.callBackendAPI()
    .then(res => {this.setState({ events: res.events });})
    .catch(err => {console.log('ERROR:', err)});
  }
  
  callBackendAPI = async () => {
    const response = await fetch('/event_lists');
    const body = await response.json();
    if (response.status !== 200) {
        throw Error(body.message)
    }
    return body;
  }
  render() {
    var items = _.map(this.state.events, (event) => {
      return {
        id: event.id,
        name: event.name,
        date_begin: event.date_begin,
        date_end: event.date_end
      }
    })
    items = _.compact(items);
    items = _.map(items, (item) => {
      return (
        <tr key={item.id}>
          <td>{item.name}</td>
          <td>{item.date_begin}</td>
          <td>{item.date_end}</td>
        </tr>
      );
    })
    return (
      <div className='App'>
        <header className='App-header'>
          <img className='App-logo' src={logo} alt="logo" />
        </header>
        <div className='container'>
          <h1>Welcome to our website</h1>
          <h4>Join us at our Events:</h4>
          <table className='table'>
            <thead>
              <tr>
                <th>Event Name</th>
                <th>Start</th>
                <th>End</th>
              </tr>
            </thead>
            <tbody>            
              {items}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}
export default App;

Вот как это работает:

Мы определяем домашнюю страницу, содержащую приветственное сообщение, и обещаем показать список событий внутри таблицы. Но у нас пока нет события, которое можно было бы показать. Вот почему мы не хотим показывать страницу до тех пор, пока события не будут собраны из Odoo.

Но прежде чем мы собираем данные из Odoo, нам нужно определить место, называемое «событиями», которое мы помещаем в объект «состояние», где изначально ничего не содержится.

state = {
  events: [],
}

Чтобы собрать данные из Odoo перед отображением страницы, мы используем функцию responsejs под названием «componentWillMount ()», где мы размещаем функцию для вызова другой функции «callBackendAPI», а затем помещаем собранные данные в контейнер «событий», который удерживается «состоянием». Однако, если по какой-то причине сбор не удалось, отобразить сообщение об ошибке.

componentWillMount() {
  this.callBackendAPI()
  .then(
    res => {
      this.setState({
        events: res.events 
      })
    }
  )
  .catch(
    err => {
      console.log('ERROR:', err)
    }
  )
}

Функция callBackendAPI попытается получить данные из http: // localhost: 3000 / event_lists. Так как внутри '/ event_list' ничего нет, то сервер попытается найти это на внутреннем сервере, потому что мы уже сказали responsejs, используя proxy: « http: // localhost: 5000 / '(см. снова файл package.json выше).

Как только данные будут успешно собраны с сервера Odoo, сохраните их внутри объекта «события».

.then(res => {this.setState({ events: res.events });})

затем покажите затем внутри функции рендеринга.

2. Наконец, перезапустите сервер, и вы должны увидеть что-то вроде этого на домашней странице:

Вы можете найти файл проекта здесь https://github.com/allealdine/react_odoo.git.

Если у вас есть какие-либо вопросы, не стесняйтесь обращаться к нам. Спасибо!