¶ Ваше первое приложение с extremum
В данном руководстве мы напишем наше первое приложение с использованием платформы extremum
¶ Подготовка к работе
Установите необходимое вспомогательное ПО
Установите интерфейс командной строки extremum CLI
¶ Создание приложения
Создайте новое приложение. Назовите его pusk.fm
Вы можете выбрать другое имя для вашего приложения. В этом случае, при выполнении дальнейших упражнений этого руководства вам следует заменять pusk.fm на выбранное вами имя
Выполните аутентификацию в платформе extremum
Инициализируйте ваше приложение
¶ Сборка и запуск приложения
Перейдем в каталог pusk.fm/ui:
Linux, MacOS:
$ cd pusk.fm/ui
Windows:
> cd pusk.fm\ui
Установим зависимости:
$ npm install
Теперь мы можем запустить отладочный сервер:
$ npm run dev
В случае успешного запуска вы увидите примерно такой вывод:
> pusk.fm@0.1.0 dev
> webpack serve
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.49:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/t0m/work/extremum/tmp/123/pusk.fm/ui/public' directory
Откроем веб-браузер и перейдем по адресу http://localhost:8080/
Нажмем кнопку Login и попадем на страницу аутентификации extremum:
Укажем имя пользователя и пароль и нажмем кнопку Sign In:
Наше первое приложение работает!
¶ Разработка функциональности приложения
Создадим файл src/components/models/Models.tsx и поместим в него следующий текст:
import React, {useEffect, useState} from 'react';
import {useSDK} from "../../extremum/sdk/hooks/useSDK";
import {EntityModel} from "extremum-sdk/lib/interfaces";
/**
* Отображение списка моделей данных
*/
const Models = () => {
const [models,setModels] = useState<EntityModel[]>()
// Создадим клиент API extremum
const client = useSDK()
useEffect(()=>{
// Получим список моделей
client.management.storage.models.list().then(
res => {
setModels(res)
}
).catch(er =>console.log(er))
},[])
// Отобразим имена моделей на странице
return (
<div>
<h2>Hello world!</h2>
<h4>Example of models from SDK:</h4>
{
models?.map( model => (<div>
{
model.name
}
</div>)
)
}
</div>
);
};
export default Models;
Откроем файл src/app/routes/AppRouter.tsx и добавим в нем новый защищенный маршрут Models:
const routes = [{
path: "/",
element: <ProtectedRoute><Models/></ProtectedRoute>
},{
path: "/login",
element:<Login />
}]
Обновим страницу в браузере и увидим, что на ней появился список моделей, полученных из API:
¶ Что дальше?
В этом руководстве мы научились создавать, собирать и запускать приложения на основе платформы extremum. Изучите другие наши руководства, чтобы узнать, как