Рубрики
Без рубрики

Тележка с фруктами: Начало

Проект Fruit Cart родился из одного трехчасового учебного курса, желания создать целую компанию… С тегами react, javascript, java, тестирование.

Проект Fruit Cart родился из одного трехчасового учебного курса, желания создать целое приложение в стиле строго тестируемой разработки (TDD) и, в общем, Джеффа. Джефф – моя пара для этого проекта. Это его маленькая черничка.

В этой серии я расскажу о нашем процессе создания SPA с использованием ReactJS, который извлекает информацию из Java/Spring Boot API и базы данных Postgres. Он полностью основан на тестировании: наши тесты пишут наш код и играют такую же важную роль в процессе, как и функциональность. Мы будем использовать JUnit с библиотекой Hamcrest, Jest с Enzyme и (в конечном итоге) Selenium.

Теперь я не собираюсь создавать учебное пособие, которое можно повторять шаг за шагом. Моя цель – поразмышлять над этим процессом и закрепить то, чему я учусь. Например, каковы были болевые точки? Что нам нужно было исследовать? Какие ресурсы были ценными и почему? Где были их болевые точки? Что бы мы хотели иметь?

Итак, вот с чего мы начали:

Я довольно организованный человек, поэтому мне нравится знать, что мне нужно делать, когда мне нужно это делать и почему мне нужно это делать. В противном случае я оказываюсь в том, что я называю “дырой в коде”: интернет-червоточине, состоящей только из документов, сообщений о переполнении стека, страниц Baeldung и руководств DZone. К тому времени, как я появляюсь, я часто теряю из виду то, что я исследовал в первую очередь.

Чтобы избежать дыр в коде, мы разделили нашу самую простую корзину CRUD на истории пользователей. Это простой способ определить, что именно мы хотим, чтобы произошло.

В итоге у нас получилось 5 историй с подробным описанием 7 маршрутов RESTful (индексировать, показывать, создавать, редактировать, обновлять, уничтожать), 1 история для навигации и 2 карточки, связанные с загрузкой изображений. Вот обзор того, что мы хотим, чтобы пользователь делал в корзине:

Когда пользователь попадает на целевую страницу и в базе данных есть фрукты, он должен увидеть список (название, описание) всех этих фруктов. В противном случае, если фруктов нет, они видят Бананового человечка и им предлагается добавить фрукт.

Пользователь также должен увидеть панель навигации с опциями “Добавить фрукты” и “Главная страница” в качестве опций; панель навигации будет видна на любой “странице” в приложении Fruit Cart. Описание и название каждого фрукта – это ссылка, которая перенаправляет пользователей на страницу показа этого конкретного фрукта (см. #4 ниже).

Когда пользователь нажимает на сообщение “Добавить фрукты” или опцию “Добавить фрукты” на панели навигации, он переходит к форме с полями имени и описания с кнопкой сохранить.

После отправки заполненной формы с фруктами (т.е. когда пользователь нажимает “сохранить”) создается фрукт, и пользователь переходит на страницу показа этого фрукта.

На странице “Показать” отображаются название и описание фрукта, а также кнопка для редактирования фрукта.

Когда пользователь нажимает кнопку “Редактировать”, он перенаправляется на форму редактирования с предварительно заполненной информацией в полях имя и описание. Они редактируют, а затем отправляют форму для обновления фруктов. Затем они перенаправляются на недавно обновленную страницу показа фруктов, которые они только что отредактировали. Если бы они нажали на домашнюю ссылку на панели навигации, они были бы перенаправлены на целевую страницу, теперь с любыми новыми или обновленными фруктами, которые они создали.

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

Теперь это не очень сложно; здесь нет функции входа или выхода из системы или аспекта социальных сетей, но дело не в этом. Суть в основах: TDD и RESTful API, небольшие компоненты React и минимальные зависимости, Java и Spring Boot. Главное – это опыт.

Следующий шаг: Целевая страница! Давайте посмотрим на все эти прекрасные фрукты. Еда это банановая империя ананас вишня

Оригинал: “https://dev.to/sleepycecy/fruit-cart-inception-1ne3”