Подготовительный этап
- Получите лицензию на Flexberry Designer Enterprise. После получения лицензии вам откроется доступ к проектам.
- Откройте Flexberry Designer Enterprise. Нажмите
Все проекты
в левом нижнем углу, выберите нужный проект (ранее проекты назывались “стадиями”).
Создание диаграммы классов
Перед выполнением задания ознакомьтесь с руководствами:
Реализуем демонстрационное приложение. Цель приложения - хранение информации обо всех сотрудниках, работающих в офисах компании.
- Создайте диаграмму классов:
- перейдите на страницу
Диаграммы
в левой панели; - нажмите кнопку
Создать диаграмму
->Диаграмма классов
; - откроется редактор диаграмм, напишите название диаграммы в поле
Введите имя
-> сохраните диаграмму.
- перейдите на страницу
- Создайте классы:
Building
(здание)Room
(комната)Employee
(сотрудник)
- Добавьте следующие атрибуты:
Чтобы добавить атрибуты, кликните на класс -> затем на синюю шестерёнку в правом верхнем углу выбранного класса. Откроется меню редактирования этого класса.
Building
(здание):Name
(название) - stringAddress
(адрес) - string
Room
(комната):Number
(номер) - int
Employee
(сотрудник):FirstName
(имя) - stringLastName
(фамилия) - stringPatronymic
(отчество) - stringBirthDate
(дата рождения) - DateTime
- Добавьте следующие связи:
Комната
-Сотрудник
(ассоциация 1 - *)Здание
-Комната
- (композиция 1 - *)
Должна получиться следующая модель:
Подготовка проекта к первой генерации
- Откройте вкладку
Настройка
, задайте кодовое имя проекта (например MyApp)._Кодовое имя используется для генерации пространства имён (
namespace
), поэтому оно должно быть коротким и уникальным. Чаще всего используют акронимы (“Информационная система управления поставками” -> ИСУП ->Isup
). - Откройте вкладку
Навигация
, нажмите кнопкуСоздать представления, формы и приложение
. Будут сгенерированыL
иE формы
,L
иE представления
, объектapplication
. Генерация приложения невозможна без объектаapplication
. - После завершения генерации объектов вы можете настроить структуру меню на вкладке
Навигация
. Структура, заданная на этой вкладке, изменит сайдбар сгенерированного приложения. Вы можете менять заголовки ссылок, добавлять новые корневые папки, менять порядок следования элементов (не забудьте перейти в режим редактирования).
Генерация приложения
Приступим к генерации приложения.
- Установите Flexberry CLI.
- Перейдите на вкладку
Генерация
. Задайте следующие настройки и снимите остальные галочки:Ember JS
->Генерировать всё
;Backend
->AspNetCore
;PostgreSQL
->Сгенерировать SQL
.
- Нажмите кнопку
Генерировать
.
Для генерации Ember JS
вам потребуется:
- Node.JS v12 (node-v12.22.12-x64.msi)
- Ember CLI v3.1.4 (
npm i -g ember-cli@3.1.4
) - Менеджер пакетов Yarn (
npm i -g yarn
) - Bower (
npm i -g bower
)
Ваше приложение будет сгенерировано в папку src
. Фронтенд находится в папке ember-app
, бекенд - MyApp
, скрипт создания структуры таблиц БД - SQL/PostgreSql.create.sql
.
Создание базы данных
Для работы приложения требуется иметь работающую базу данных. Чтобы создать базу локально:
- Установите:
- Подключитесь к локальному серверу через PgAdmin 4 (правый клик по
Серверы
->Добавить
-> адрес:localhost
; порт5432
; логинpostgres
; парольpostgres
) - Создайте новую БД на локальном сервере (правый клик по подключению ->
Создать
->База данных
). Дайте ей имяmy-app-db
. - Создайте таблицы. Для этого запустите скрипт
SQL/PostgreSql.create.sql
на созданной базе: правый клик по БДmy-app-db
в спискеБазы данных
->Query Tool
-> скопируйте содержимое файла в редактор и нажмите F5.
Запуск приложения
Перед запуском приложения требуется:
- задать адрес базы данных - измените значение параметра
DefConnStr
в файлах/src/MyApp/ODataBackend/appsettings.json
и/src/MyApp/ODataBackend/Properties/launchSettings.json
на следующее:SERVER=localhost;User ID=postgres;Password=postgres;Port=5432;database=my-app-db;
- установите адрес бекенда - измените все значения параметра
backendUrl
в файле/src/ember-app/config/environment.js
наhttp://localhost:6500
;
Чтобы запустить приложение:
- запустите фронтенд с помощью команды
ember serve
в папкеsrc/ember-app
; - запустите бекенд с помощью
Visual Studio
, открыв файл.sln
и запустив проект ODataBackend; - откройте приложение по адресу http://localhost:4200.
Если всё было выполнено верно, откроется приложение: