Amplication & Angular: Создание бэкенда

Добро пожаловать в этот учебник по созданию полнофункционального приложения с помощью Amplication.

Мы будем шаг за шагом создавать приложение Todos, используя Angular для фронтенда и Amplication для бэкенда.

Если вы застряли, у вас возникли вопросы или вы просто хотите поздороваться с другими разработчиками Amplication, такими же как вы, то присоединяйтесь к нашему Discord!


Оглавление

  • Шаг 1 — Создание нового приложения
  • Шаг 2 — Создание сущности
  • Шаг 3 — Создание роли
  • Шаг 4 — Назначение прав доступа
  • Шаг 5 — Создание бэкенда
  • Шаг 6 — Запуск бэкенда
  • Шаг 7 — Завершение работы

Шаг 1 — Создание нового приложения

Надеюсь, у вас уже была возможность создать аккаунт Amplication, но если нет, не расстраивайтесь! Зайдите на сайт https://app.amplication.com/, и вы попадете на экран входа в систему. Здесь вы можете войти в существующую учетную запись Amplication или создать ее, войдя с помощью учетной записи GitHub. Вы должны оказаться на странице New App, но если это не так, вы можете попасть на нее здесь.

Нажмите кнопку New App в правом верхнем углу.

Выберите Start from Scratch и подождите несколько секунд, пока приложение будет создано. Вы будете направлены к сущностям приложения. Сущность эквивалентна коллекции в базе данных NoSQL или таблице в реляционной базе данных.

По умолчанию для вас будет создана сущность User. Эта сущность в конечном итоге поможет нам справиться с аутентификацией. Но сначала давайте разберемся с бэкендом.

Шаг 2 — Создание сущности

Основная сущность будет использоваться для хранения задач, созданных пользователями.

Нажмите Добавить сущность.

Когда появится модальное окно New entity, введите Task в поле ввода и нажмите Create Entity. После создания сущности мы захотим определить несколько полей для элементов задачи.

На панели слева вы увидите Fields, которые есть у этой сущности, а в самом низу будет опция добавления поля.

Первым полем будет Text. Введите его в поле Add field и нажмите enter. Новое поле будет создано, и появится несколько опций.

Обратите внимание, что в выпадающем списке Тип данных для этого поля установлено значение Однострочный текст. Это идеально, так как это будет строковый ввод задания. Существует множество различных типов данных, которые Amplication может использовать для полей.

Единственное изменение, которое необходимо сделать здесь — это то, что это будет обязательное поле. Переключите переключатель Required Field.

Изменения будут автоматически сохранены.

Как и раньше, создайте новое поле под названием Completed. Это поле также должно быть обязательным, но мы изменим тип данных. Щелкните на выпадающем списке Data Type и измените это поле на Boolean.

Последнее поле, которое нам нужно создать, должно называться UID. Это поле будет использоваться для привязки задачи к пользователю. Отметьте его как обязательное поле. В выпадающем списке Data Type выберите Relation to Entity.

Должен появиться раскрывающийся список Related Entity, выберите User. Появится модальное окно с предложением создать связь между задачей и пользователем. Нажмите Create, чтобы создать связь. Чтобы узнать больше об отношениях сущностей, на сайте docs есть статья здесь.

Шаг 3 — Создание роли

Amplication позволяет получить детальное разрешение на создание, чтение, обновление и удаление записей в различных сущностях бэкенда.

Пользователям, которые будут создавать задачи в приложении Todo, необходимо предоставить определенные разрешения на создание, чтение и обновление задач и запретить им делать другие действия.

Нажмите на иконку Roles на левой панели.

Затем, подобно свойствам, которые мы добавили к объекту Task, создайте роль под названием Todo User.

Шаг 4 — Назначение разрешений

Создав роль для пользователей приложения Todo, мы захотим назначить определенные разрешения для роли Todo User.

Нажмите на иконку Entities на левой панели.

По умолчанию каждая роль имеет CRUD (создание, чтение, обновление и удаление) доступ к каждой сущности. Важно ограничить круг пользователей Todo.

Выберите сущность User из списка сущностей, а на панели слева выберите Permissions.

Каждый тип команды предоставляется Все роли. Пользователи с ролью User или Todo User имеют полный доступ к сущности User. Это может быть опасно.

Учетная запись администратора по умолчанию, созданная бэкендом, имеет роль User, поэтому мы не хотим с этим связываться. В конечном итоге мы сделаем так, что всем новым пользователям будет присваиваться роль Todo User, и мы ограничим их доступ к определенным командам.

Переключите разрешения для каждой команды сущности на Granular и включите роль User. Теперь единственный пользователь, который может получить доступ к учетным записям User, будет иметь роль User, которая будет принадлежать только учетной записи admin.

Вернитесь на страницу Entities и теперь выберите сущность Task. Нажмите Permissions. Переключите команду Delete на Granular и разрешите доступ роли User. И User (администратор), и Todo User (обычные пользователи приложения) смогут создавать, читать и обновлять задачи; но только User сможет удалять задачи.

Шаг 5 — Создание бэкенда

Мы создали новую сущность Task и создали связь с User’s. Теперь мы готовы к созданию бэкенда.

На панели справа находится Pending Changes, где будут отображаться изменения в Task и User.

Нажмите Commit changes & build для завершения изменений, а также для развертывания экземпляра бэкенда в среде песочницы.

В нижней части страницы есть кнопка состояния с текстом Preparing sandbox environment.... Нажав на нее, вы попадете в журнал регистрации бэкенда в процессе докеризации и развертывания.

Это займет несколько минут, но после завершения вы сможете увидеть бэкенд, нажав на Открыть среду песочницы, но мы не будем использовать песочницу для приложения Todo.

Amplication по умолчанию создает безопасную среду, где все запросы должны быть аутентифицированы. Для данного случая использования мы захотим ослабить некоторые из этих защит. Благодаря расширяемости Amplication мы можем строить поверх всего, что было создано для нас.

Начнем с загрузки бэкенда. В правом нижнем углу страницы вы увидите кнопку загрузки. Нажмите ее, и вы загрузите файл .zip, содержащий весь код для работы бэкенда.

Распакуйте zip-файл и скопируйте все содержимое (кроме README.md) в корень проекта amplication-angular.

Шаг 6 — Запуск бэкенда

Папки admin-ui и server, созданные Amplication, представляют собой два новых проекта node, которые необходимо настроить. Одно, что потребуется обоим — это их зависимости. В package.json обновите скрипт postinstall:

"postinstall": "npm ci --prefix web && npm ci --prefix admin-ui && npm ci --prefix server"
Войти в полноэкранный режим Выйти из полноэкранного режима

Откройте новый терминал и выполните следующую команду

npm run postinstall
Войти в полноэкранный режим Выйти из полноэкранного режима

Эта команда установит зависимости всех вложенных папок. Другим полезным аспектом этой команды является то, что если вы выложили этот проект на GitHub и клонировали репозиторий, когда вы запустите npm install, этот сценарий будет выполняться после установки, чтобы автоматически установить зависимости вложенных папок.

Установите npm-run-all в качестве dev-зависимости следующим образом:

npm install -D npm-run-all
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Обновите скрипт start в package.json и добавьте следующий скрипт:

"start": "npm-run-all -p start:frontend start:backend",
"start:frontend": "npm --prefix web start",
"start:admin": "npm --prefix admin-ui start",
"start:backend": "npm --prefix server start",
Вход в полноэкранный режим Выйти из полноэкранного режима

Мы также установили скрипт start to, чтобы запускать код фронтенда и бэкенда одновременно.

Перед запуском сервера необходимо выполнить несколько дополнительных шагов. Прочитайте server/README.md для получения инструкций:

  • Создать клиента Prisma
  • Запустить базу данных в Docker
  • Запустить базу данных

После завершения этих шагов выполните следующую команду:

npm run start
Войти в полноэкранный режим Выйти из полноэкранного режима

Шаг 7 — Завершение работы

Фронтенд приложения Todo будет запущен по адресу http://localhost:4200/, а бэкенд — по адресу http://localhost:3000/.

При посещении http://localhost:3000/ вы получите ошибку 404. Вместо этого посетите http://localhost:3000/api/, чтобы увидеть все конечные точки бэкенда и посмотреть, как будут выглядеть наши конечные точки REST.

Когда наш бэкенд создан и работает локально, мы почти готовы связать его с фронтендом. Сначала нам нужно внести некоторые дополнения в код.

Вернитесь к третьему шагу на следующей неделе или посетите сайт документации Amplication, чтобы ознакомиться с полным руководством прямо сейчас!

Чтобы просмотреть изменения для этого шага, посетите здесь.

Оцените статью
Procodings.ru
Добавить комментарий