После девяти напряженных, но полезных недель во Flatiron я наконец-то могу назвать себя Full Stack Engineer! При поддержке моих замечательных одноклассников и моего инструктора Адам, моего партнера Илоло и я, наконец, на этой неделе создали наш первый полноценный проект — функциональное приложение Food Tinder с использованием бэкэнда Ruby Sinatra API и интерфейса React. Хотя мне еще многому предстоит научиться, я искренне горжусь тем, как далеко я продвинулся!
Требования к проекту
- Используйте Active Record для взаимодействия с базой данных.
- Имейте как минимум две модели с отношениями "один ко многим".
- Создайте маршруты API в Sinatra, которые обрабатывают различные действия CRUD по крайней мере для одной из ваших моделей Active Record.
- Создайте отдельное внешнее приложение React, которое взаимодействует с API для выполнения действий CRUD.
- Используйте хорошие шаблоны объектно-ориентированного проектирования. У вас должны быть отдельные классы для каждой из ваших моделей и при необходимости создавать методы экземпляра и класса.
О приложении
Внешний интерфейс
Ниже приведен примерный макет главной страницы трута о еде. Приложение будет включать в себя классические кнопки Tinder, которые будут работать аналогично приложению для знакомств Tinder.
Символ зеленого сердца: пользователю нравится фотография
Голубая звезда: пользователь очень любит фото
Фиолетовый символ молнии: Премиум-функция под названием Super Boost позволяет пользователям быть лучшими в своем районе.
Символ X: пользователю не нравится фотография
Символ перемотки назад: позволяет пользователю отменить последнее решение о смахивании.
Приложение также будет включать выдвижную панель навигации, которая позволит пользователю фильтровать карточки Tinder по категориям. Две страницы маршрута, которые мы хотели включить, были страницей входа пользователя и страницей списка лайков, которые отслеживали понравившиеся продукты конкретного пользователя, чтобы они могли обращаться к списку в будущем, когда они будут голодны!
Верхняя часть
Ниже показаны ассоциации между таблицами в бэкэнде Sinatra, а также атрибуты для каждой таблицы.
Функциональность приложения
В предыдущем проекте React данные извлекались из серверной части JSON. Однако на этот раз мы смогли получить данные из серверной части Sinatra API, которая использовала Active Record для доступа и сохранения данных в базе данных, которая затем использовалась интерфейсом React для взаимодействия с базой данных через API.
Классная функция, которую мы смогли внедрить в наше приложение Food Tinder, — это кнопка темного режима с использованием переключаемого состояния.
Одна вещь, которую я быстро усвоил, создавая этот проект, заключалась в том, что организация является ключевым моментом. Сначала мы с напарником просто добавляли компоненты и состояния каждый раз, когда хотели реализовать что-то новое. Однако через некоторое время я увидел столько повторений в коде. Простые изменения становились чрезвычайно сложными, поскольку нам приходилось вносить одно и то же изменение в нескольких местах одновременно — явный признак того, что мы нарушили важный принцип разработки программного обеспечения!
Не повторяйтесь (DRY) — это принцип разработки программного обеспечения, основной целью которого является уменьшение повторения кода.
В тот момент, когда я начал запутываться и теряться, я знал, что мне нужно все перестроить, прежде чем я продолжу. Он был слишком подвержен ошибкам. Это был определенно хороший урок, который нужно усвоить в начале моей карьеры программиста, и, надеюсь, он поможет мне в будущем, когда мои проекты станут более сложными!
Честно говоря, поначалу соединение фронтенда и бэкенда казалось сложной задачей. Этот проект определенно подтолкнул меня к пределу моих возможностей, но я очень горжусь тем, как все получилось! Я надеюсь, вам понравится краткая демонстрация ниже!!
