Full stack developer

В процессе выполнения задания предстоит реализовать полноценное full stack приложение «Мои задачи», включающее в себя back end написанный на Ruby и front end на TypeScript, с использованием фреймворков Ruby on Rails и Angular. В результате приложение будет развернуто на Heroku и сможет пополнить ваше портфолио.

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

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

Теория

Практика

Устанавливаем Ruby, Rails и все сопутствующие гемы. Информацию о том, как это следует сделать, можно найти в интернете. Для Unix-подобных операционных систем предпочтительно использовать Ruby Version Manager, для Windows — RailsInstaller;
Инициализируем Rails-проект. Единственный флаг, который стоит добавить, это -d postgresql. По умолчанию, Rails использует базу данных SQLite, которую, однако, Heroku не поддерживает. Поэтому сразу переключаемся на PostgreSQL. Это также потребует от нас установить PostgreSQL локально;
Создаем контроллер Project, в котором делаем экшн index, который возвращает json {message: "ok"}. Контроллер нужно забиндить на путь /projects;
Запускаем локальный сервер и проверяем, что все работает корректно при помощи команды rails s;
Инициализируем Git-репозиторий;
Делаем первый деплой на Heroku.

Результатом данного задания является ссылка вида https://<домен>/projects, которая возвращает json {message: "ok"}.

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

moodle@oblakogroup.ru

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

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

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

Теория

Практика

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

На изображениях видно, что необходимо сделать API, позволяющее рендерить содержимое страницы, за это отвечает экшн GET /projects, который возвращает всю структуру, необходимую для рендеринга страницы:


[{
  id: int,
  title: string,
  todos: [
    {
      id: int,
      text: string,
      isCompleted: bool
    }
  ]
}]

Далее на странице имеется функционал, позволяющий перечеркивать задачи, для этого нужно реализовать отдельный экшн для обновления задачи PATCH /projects/:id/todos/:id, который в свою очередь будет обновлять значение checked.

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

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

Таким образом в результате API должен предоставлять следующие методы:

GET /projects — вернуть все проекты с задачами;
POST /todos — создать новую задачу;
PATCH /projects/id/todo/id — обновить задачу.

По завершению этапа необходимо отправить ссылку на обновленное 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