След девет интензивни, но възнаграждаващи седмици във Flatiron, най-накрая мога да се нарека Full Stack Engineer! С подкрепата на моите прекрасни съученици и моя инструктор „Адам“, моят партньор „Илоло“ и аз най-накрая създадохме първия си проект с пълен стек тази седмица, функционално приложение Food Tinder, използващо бекенд на Ruby Sinatra API и интерфейс на React. Въпреки че имам още много да уча, наистина съм горд от това докъде съм стигнал!
Изисквания към проекта
- Използвайте Active Record за взаимодействие с база данни.
- Имайте минимум два модела с връзка "един към много".
- Създайте API маршрути в Sinatra, които обработват различни CRUD действия за поне един от вашите модели на Active Record.
- Изградете отделно приложение за интерфейс на React, което взаимодейства с API за извършване на CRUD действия.
- Използвайте добри OO дизайнерски модели. Трябва да имате отделни класове за всеки от вашите модели и да създавате методи за екземпляр и клас, ако е необходимо.
Относно приложението
Пред
По-долу е грубо оформление на главната страница на хранителен инструмент. Приложението ще включва класическите бутони за Tinder, които ще функционират подобно на приложението за запознанства Tinder.
Символ на зелено сърце: потребителят харесва снимката
Символ на синя звезда: потребителят супер харесва снимката
Символ на лилав светещ болт: Премиум функция, наречена Super Boost, позволява на потребителите да бъдат най-добрият профил в своя квартал.
Символ X: потребителят не харесва снимката
Символ за превъртане назад: позволява на потребителя да вземе обратно последното си решение за плъзгане.
Приложението също ще включва плъзгаща се лента за навигация, която ще позволи на потребителя да филтрира картите на tinder по категория. Две страници с маршрути, които искахме да включим, бяха страница за влизане на потребител и страница със списък с харесвания, които следят харесваните храни от конкретен потребител, така че да могат да препращат към списъка в бъдеще, когато са гладни!
Заден край
По-долу са показани асоциираните връзки между таблиците в бекенда на Sinatra, както и атрибутите за всяка таблица.
Функционалност на приложението
В предишния проект на React данните бяха извлечени от бекенда на JSON сървъра. Този път обаче успяхме да извлечем данни от бекенда на Sinatra API, който използва Active Record за достъп и запазване на данни в база данни, която след това беше използвана от интерфейса на React за взаимодействие с базата данни чрез API.
Страхотна функция, която успяхме да внедрим в нашето приложение за храна, беше бутон за тъмен режим, използващ превключвано състояние.
Едно нещо, което бързо научих, докато изграждах този проект, беше, че организацията е ключова. Отначало моят партньор и аз просто продължавахме да добавяме компоненти и състояния всеки път, когато искахме да внедрим нещо ново. След известно време обаче видях толкова много повторения в кода. Простите промени ставаха изключително трудни за правене, тъй като трябваше да направим една и съща промяна на няколко места едновременно — ясен знак, че сме нарушили важен принцип за разработка на софтуер!
Don’t Repeat Yourself (DRY) е принцип за разработка на софтуер, чиято основна цел е да се намали повторението на кода.
В момента, в който започнах да се обърквам и губя, знаех, че трябва да преструктурирам всичко, преди да продължа. Беше твърде податлив на грешки. Това определено беше добър урок за научаване в началото на кариерата ми на кодиране и се надявам да ми помогне по пътя, когато проектите ми станат по-сложни!
Ако трябва да бъда честен, в началото свързването на интерфейса и бекенда изглеждаше като трудна задача. Този проект определено ме тласна до пределите ми, но съм супер горд от това как се получи! Надявам се да се насладите на кратката демонстрация по-долу!!
