Интеграция с Front-end

Рассмотрим пример интеграции Frontend-приложения, написанного на React с приложением, разработанным на Directual. Платформа не ограничивает выбор frontend фреймворков, поэтому вы можете использовать любой понравившийся вам фреймворк или же вовсе обойтись без него.

Используемые технологии:

• Create React App (https://github.com/facebook/create-react-app),

• TypeScript (http://www.typescriptlang.org/),

• Redux (https://github.com/reduxjs/redux) + Redux Saga(https://github.com/redux-saga/redux-saga/blob/master/README_ru.md),

• directual-api (https://www.npmjs.com/package/directual),

• storybook-directual(https://www.npmjs.com/package/storybook-directual),

• Connected react router(https://github.com/supasate/connected-react-router),

• Moment (https://github.com/moment/moment/),

• Lodash (https://github.com/lodash/lodash),

• React-intl(https://github.com/formatjs/react-intl),

• Axios (https://github.com/axios/axios),

• Также на проекте настроен ESLint (react-app + airbnb-typescript), husky

Установка

1. Убедитесь, что на вашем компьютере установлены:

   • Git (https://www.atlassian.com/git/tutorials/install-git);

   • nodejs (https://nodejs.org/en/download/);

   • npm (https://www.npmjs.com/get-npm);

2. Сделайте fork репозитория https://github.com/directual/react-boilerplate​

3. Клонируйте репозиторий на свой компьютер;

4. Перейдите в корневую папку проекта и выполните следующие команды в консоли:

• установите все необходимые зависимости проекта:

npm install

• запустите приложение в режиме “development” с указанными параметрами окружения (настройка параметров окружения). Как развернуть приложение будет написано далее.

npm start

Параметры окружения

Для корректной интеграции с вашим приложением Directual необходимо указать следующие параметры окружения в файле .env.development. Все параметры имеют префикс REACTAPP в силу специфики примера. В режиме “production” использование этого префикса необязательно.

Указав необходимое окружение и запустив команду npm start у вас запустится готовое приложение с авторизацией и главной страницей.

Для того, чтобы авторизоваться, вам необходимо будет добавить пользователя в ваше приложение. Также необходимо будет добавить пользователя в структуру WebUser в вашем приложении. Помимо этого можно настроить Google OAuth2.0. Если вы не указали параметр окружения GOOGLE_CLIENT_ID, то не увидите кнопку “Login with Google” При успешном логине, попадете на главную страницу приложения:

Запросы

Взаимодействие с Directual происходит с через API Endpoints, которые настраиваются в соответствующем разделе приложения. Запросы, которые вы осуществляете через directual-api — проксируются. В режиме development применяется прокси из файла “src/setupProxy.js” (https://create-react-app.dev/docs/proxying-api-requests-in-development), если вы собрали приложение, то для работы приложения необходимо запустить файл “server/server.js”, который запустит express-server, отвечающий за проксирование запросов и раздачу статического содержимого приложения. Для отправления запросов с фронта используется библиотека directual метод api.

Метод api возвращает Promise

import { api } from 'directual'; 
​
// GET запрос 
function getData(params) { 
    return api 
        .structure(‘webUsers’)
        .getData(‘getUser’, params); 
    } 
​
// POST запрос 
function addData(payload) { 
    return api 
        .structure(‘books’)
        .sendData(‘addBook’, payload); 
    } 

Авторизация в Boilerplate

Авторизация. Отправляется запрос в структуру webUser, куда передается id и password. Чаще всего в id хранится почта юзера. Пароль хранится в формате md5.

Google авторизация

В Boilerplate подключена Google авторизация. Для её работы необходимо настроить своё приложение в Google и добавить в параметры запуска приложения параметр “GOOGLE_CLIENT_ID”

Загрузка файлов

Загрузка файлов происходит с помощью метода api.fileUpload.

Файл сохраняется в структуру fileUpload в платформенном приложении.

function uploadFile(file) {
    return api
        .fileUpload(file)
        .then(data => data.result);
    }

Загрузка в продакшн (deploy)

Когда ваше приложение будет готово, вы можете запустить команду:

npm run build

Она соберёт билд для продакшена. По готовности можно запустить файл “server/server.js” с необходимыми параметрами окружения.

Например: