Подготовительный этап

  1. Получите лицензию на Flexberry Designer Enterprise. После получения лицензии вам откроется доступ к проектам.
  2. Откройте Flexberry Designer Enterprise. Нажмите Все проекты в левом нижнем углу, выберите нужный проект (ранее проекты назывались “стадиями”).

Создание диаграммы классов

Перед выполнением задания ознакомьтесь с руководствами:

Реализуем демонстрационное приложение. Цель приложения - хранение информации обо всех сотрудниках, работающих в офисах компании.

  1. Создайте диаграмму классов:
    • перейдите на страницу Диаграммы в левой панели;
    • нажмите кнопку Создать диаграмму -> Диаграмма классов;
    • откроется редактор диаграмм, напишите название диаграммы в поле Введите имя -> сохраните диаграмму.
  2. Создайте классы:
    • Building (здание)
    • Room (комната)
    • Employee (сотрудник)
  3. Добавьте следующие атрибуты:

    Чтобы добавить атрибуты, кликните на класс -> затем на синюю шестерёнку в правом верхнем углу выбранного класса. Откроется меню редактирования этого класса.

    • Building (здание):
      • Name (название) - string
      • Address (адрес) - string
    • Room (комната):
      • Number (номер) - int
    • Employee (сотрудник):
      • FirstName (имя) - string
      • LastName (фамилия) - string
      • Patronymic (отчество) - string
      • BirthDate (дата рождения) - DateTime
  4. Добавьте следующие связи:
    • Комната - Сотрудник (ассоциация 1 - *)
    • Здание - Комната - (композиция 1 - *)

Должна получиться следующая модель:

модель

Подготовка проекта к первой генерации

  1. Откройте вкладку Настройка, задайте кодовое имя проекта (например MyApp).

    _Кодовое имя используется для генерации пространства имён (namespace), поэтому оно должно быть коротким и уникальным. Чаще всего используют акронимы (“Информационная система управления поставками” -> ИСУП -> Isup).

  2. Откройте вкладку Навигация, нажмите кнопку Создать представления, формы и приложение. Будут сгенерированы L и E формы, L и E представления, объект application. Генерация приложения невозможна без объекта application.
  3. После завершения генерации объектов вы можете настроить структуру меню на вкладке Навигация. Структура, заданная на этой вкладке, изменит сайдбар сгенерированного приложения. Вы можете менять заголовки ссылок, добавлять новые корневые папки, менять порядок следования элементов (не забудьте перейти в режим редактирования).

Генерация приложения

Приступим к генерации приложения.

  1. Установите Flexberry CLI.
  2. Перейдите на вкладку Генерация. Задайте следующие настройки и снимите остальные галочки:
    • Ember JS -> Генерировать всё;
    • Backend -> AspNetCore;
    • PostgreSQL -> Сгенерировать SQL.
  3. Нажмите кнопку Генерировать.

Для генерации 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.

Создание базы данных

Для работы приложения требуется иметь работающую базу данных. Чтобы создать базу локально:

  1. Установите:
  2. Подключитесь к локальному серверу через PgAdmin 4 (правый клик по Серверы -> Добавить -> адрес: localhost; порт 5432; логин postgres; пароль postgres)
  3. Создайте новую БД на локальном сервере (правый клик по подключению -> Создать -> База данных). Дайте ей имя my-app-db.
  4. Создайте таблицы. Для этого запустите скрипт 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.

Если всё было выполнено верно, откроется приложение:

Приложение

Перейти