oblakogroup-fsd

[oblakogroup-fsd]

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

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

Теория

Getting Started with Rails (ч. 1, 2, 3, 4)

Heroku

Практика

Устанавливаем ruby, rails и все сопутствующие гемы. Информацию о том, как это следует сделать, можно найти в интернете. Для unix-based систем предпочтительно использовать rvm (https://rvm.io/rvm/install), для windows - railsinstaller (http://railsinstaller.org/en).

Инициализируем rails-проект. Единственный флаг, который стоит добавить, это “-d postgresql”. По умолчанию, rails использует базу данных SQLite, которую, однако, heroku не поддерживает. Поэтому сразу переключаемся на postgresql. Это также потребует от нас установить postgresql локально.

Создаем контроллер Project, в котором делаем экшн index, который возвращает json {message: “ok”}. Контроллер нужно забиндить на путь /projects.

Запускаем локальный сервер и проверяем, что все работает корректно при помощи команды rails s.

Инициализируем git-репозиторий.

Делаем первый деплой на heroku.

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

По завершению необходимо отправить ссылку на heroku-приложение по адресу moodle@oblakogroup.ru и приступать к выполнению следующего этапа. В теме письма нужно указать FSD-{этап задания} {Имя} {Фамилия} например FSD-1 Alexey Ivanov. На дальнейших этапах, тему письма нужно указывать в таком же формате.

[oblakogroup-fsd]

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

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

Теория

Rest api https://habr.com/ru/post/447322/,

Роутинг в rails http://rusrails.ru/rails-routing

Контроллеры в rails http://rusrails.ru/action-controller-overview

Практика

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

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

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

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

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

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

GET /projects - вернуть все проекты с задачами

POST /todos - создать новую задачу

PATCH /projects/id/todo/id - обновить задачу

После выполнения задания нужно обновить приложение на хероку, выслать ссылку на него и гит репозиторий по адресу moodle@oblakogroup.ru.

[oblakogroup-fsd]

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

В данном этапе предстоит инициализировать Angular приложение и залить его на хероку.

Теория

Документация по Angular https://angular.io/docs

Практика

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

Как и в случае с API, данное приложение также нужно разместить на хероку. Первым делом нужно инициализировать проект при помощи утилиты @angular/cli, подробную инструкцию можно найти тут https://angular.io/guide/setup-local. Приложение, которое должно получится в результате имеет всего одну страницу, поэтому на этапе инициализации сразу можно отказаться от роутера.

Так как хероку из коробки не умеет сервить статические файлы, нужно добавить небольшой сервер, который будет выполнять функцию прокси. Небольшой гайд по деплою https://medium.com/better-programming/how-to-deploy-your-angular-9-app-to-heroku-in-minutes-51d171c2f0d

После выполнения данного этапа нужно направить ссылку на хероку приложение, и репозиторий по адресу moodle@oblakogroup.ru.

[oblakogroup-fsd]

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

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

Теория:

Документация по Angular https://angular.io/docs

Вводный курс по Aungular https://www.youtube.com/watch?v=Rf54BH35yrY

Документация RXJS https://www.learnrxjs.io

Документация по materialize  https://material.angular.io

Реактивные формы https://habr.com/ru/post/346242/

Class-transformer https://github.com/typestack/class-transformer 

Практика

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

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

Форма создания задачи должна быть выполнена при помощи реактивных форм.

В приложении должна быть разработана вся логика описанная в концепте.

Приложение должно работать с API, разработанным во втором этапе.

Работа с классама должна быть произведена при помощи class-transformer.

После выполнения задания, необходимо обновить хероку приложение и выслать ссылку на него и на репозиторий по адресу moodle@oblakogroup.ru.