Рассмотрим пример интеграции Frontend-приложения, написанного на React с приложением, разработанным на Directual. Платформа не ограничивает выбор frontend фреймворков, поэтому вы можете использовать любой понравившийся вам фреймворк или же вовсе обойтись без него.
Используемые технологии:
Create React App (https://github.com/facebook/create-react-app),
TypeScript (http://www.typescriptlang.org/),
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
Убедитесь, что на вашем компьютере установлены:
nodejs (https://nodejs.org/en/download/);
Сделайте fork репозитория https://github.com/directual/react-boilerplate
Клонируйте репозиторий на свой компьютер;
Перейдите в корневую папку проекта и выполните следующие команды в консоли:
установите все необходимые зависимости проекта:
npm install
запустите приложение в режиме “development” с указанными параметрами окружения (настройка параметров окружения). Как развернуть приложение будет написано далее.
npm start
Для корректной интеграции с вашим приложением Directual необходимо указать следующие параметры окружения в файле .env.development. Все параметры имеют префикс REACTAPP в силу специфики примера. В режиме “production” использование этого префикса необязательно.
Переменная | Значение по умолчанию | Можно изменять | Как получить | описание |
APP_PORT | 3000 | Да | Можно указать свое значение | Порт, на котором запустится ваше клиентское приложение |
API_URL | https://api.directual.com | Да | Используйте значение по умолчанию, или зарегистрируйте поддомен для своей организации | Базовый URL, куда направляются все запросы к платформе Directual с использование м Directual-api |
AUTH_PATH | /good/v4/auth | Нет | Используйте значение по умолчанию | Путь к точке доступа (endpoint) авторизации |
API_PATH | /good/api/v3 | Нет | Используйте значение по умолчанию | Путь к endpoint получения и отправки данных |
API_PATH_SL | /good/api/v5 | Нет | Используйте значение по умолчанию | Путь к endpoint получения и отправки данных типа Security Layer |
NETWORK_ID | - | Да | На экране управления приложениями, в карточке приложения поле id соответствует значению NETWORK_ID для вашего приложения. (Например 2243) | Параметр, необходимый для авторизации в вашем приложении с фронта |
API_PASSWORD | - | Да | Секретный ключ вашего приложения | |
API_TOKEN | - | Да | Ключ API вашего приложения | |
GOOGLE_CLIEN T_ID | - | Да | https://developers.google.com/ identity/protocols/OAuth2 | Идентификатор вашего приложения google. Нужен при использовании Google OAuth2.0 |
API_PASSWORD и API_TOKEN это приватная информация! Не рекомендуется эту информацию пушить в удаленный репозиторий.
Указав необходимое окружение и запустив команду 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);}
Авторизация. Отправляется запрос в структуру webUser, куда передается id и password. Чаще всего в id хранится почта юзера. Пароль хранится в формате md5.
Например, юзер { id: test, password: test } на платформе хранится как { id: test, password: 098f6bcd4621d373cade4e832627b4f6 }
В Boilerplate подключена Google авторизация. Для её работы необходимо настроить своё приложение в Google и добавить в параметры запуска приложения параметр “GOOGLE_CLIENT_ID”
Загрузка файлов происходит с помощью метода api.fileUpload.
Файл сохраняется в структуру fileUpload в платформенном приложении.
function uploadFile(file) {return api.fileUpload(file).then(data => data.result);}
Когда ваше приложение будет готово, вы можете запустить команду:
npm run build
Она соберёт билд для продакшена. По готовности можно запустить файл “server/server.js” с необходимыми параметрами окружения.
Например: