Full stack developer NestJS

В процессе выполнения задания предстоит реализовать полноценное full stack приложение «Мои задачи», включающее в себя backend написанный на NodeJS и frontend на TypeScript, с использованием фреймворков NestJS и Angular. В результате приложение будет развернуто на Heroku и сможет пополнить ваше портфолио.

Этап 1. Инициализация API

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

Теория

Практика

Устанавливаем NodeJS, NestJS и все сопутствующие пакеты. Информацию о том, как это следует сделать, можно найти в интернете. Для Unix-подобных операционных систем предпочтительно использовать NVM;
Инициализируем NestJS-проект. Проект должен включать в себя typeorm с поддержкой postgres (это также потребует от вас установить PostgreSQL локально); Graphql модуль с включенным playground;
Создаем модуль Category, в котором делаем резолвер Category и dto для него. В резолвере должна резовиться query categories которая возвращает пустой массив;
Запускаем локальный сервер при помощи команды npm run start: dev и проверяем, что все работает корректно перейдя по пути localhost:3000/graphql и выполнив projects query;
Инициализируем Git-репозиторий;
Делаем первый деплой на Heroku.

Результатом данного задания является ссылка вида /graphql"><домен>/graphql, с возможностью отправить запрос categories { id, title }.

По завершению этапа необходимо отправить ссылку на Heroku-приложение с темой письма «FSD — Номер этапа, Имя Фамилия» на:

moodle@oblakogroup.ru

Затем приступать к выполнению следующего этапа.

Этап 2. Создание API для списка задач

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

Теория

Практика

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

На изображениях видно, что необходимо сделать API, позволяющее рендерить содержимое страницы.
Graphql запрос на получение информации для этой страницы должен иметь следующий вид:


query {
   categories {
      id
      title
      todos {
         id
         text
         isCompleted
      }
   }
}

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

Далее рассмотрим окно создания задачи. Тут нужно предусмотреть следующее: задача может быть добавлена в существующий список, либо в новый. Таким образом, если в списке выбора категории выбрать пункт «Новая категория», тогда должно появиться поле для ввода названия нового списка в этом же окне, на последней строке, и, после сабмита формы, список должен отобразиться на главной странице с новой задачей. Для этого нужно сделать мутацию в todo резолвере, которая будет иметь вид:


mutation {
  createTodo(input: {
     categoryName: “”,
     text: “”
  }) {
     category: {
        id
        title
     }
     id
     text
     isCompleted
  }
}

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

По завершению этапа необходимо отправить ссылку на обновленное Heroku-приложение и Git-репозиторий с темой письма «FSD — Номер этапа, Имя Фамилия» на:

moodle@oblakogroup.ru

Затем приступать к выполнению следующего этапа.

Этап 3. Инициализация front end приложения

На данном этапе предстоит инициализировать Angular-приложение и залить его на Heroku.

Теория

Документация по Angular.

Практика

В ходе выполнения данного этапа необходимо использовать Angular последней версии.

Как и в случае с API, данное приложение также нужно разместить на Heroku. Первым делом нужно инициализировать проект при помощи утилиты Angular CLI, подробную инструкцию можно найти тут. Приложение, которое должно получится в результате имеет всего одну страницу, поэтому на этапе инициализации сразу можно отказаться от роутера.

Так как Heroku из коробки не умеет сервить статические файлы, нужно добавить небольшой сервер, который будет выполнять функцию прокси. Небольшой гайд по деплою.

По завершению этапа необходимо отправить ссылку на обновленное Heroku-приложение и Git-репозиторий с темой письма «FSD — Номер этапа, Имя Фамилия» на:

moodle@oblakogroup.ru

Затем приступать к выполнению следующего этапа.

Этап 4. Создание front end для списка задач

На данном этапе предстоит реализовать front end приложение описанное для списка задач.

Теория

Практика

Концепт приложения описан на этапе создания API. Критерии выполнения задания:

В ходе выполнения данного этапа необходимо использовать Angular последней версии, в качестве фреймворка для реализации логики и каркаса приложения, а фреймворк Angular Material UI для верстки;
Форма создания задачи должна быть выполнена при помощи Reactive forms.
В приложении должна быть разработана вся логика описанная в концепте.
Приложение должно работать с API, разработанным во втором этапе.
Работа с классами должна быть произведена при помощи class-transformer.

По завершению этапа необходимо отправить ссылку на обновленное Heroku-приложение и Git-репозиторий с темой письма «FSD — Номер этапа, Имя Фамилия» на:

moodle@oblakogroup.ru