Вступление

В конце учебного года в Holberton School у нас есть три недели на разработку портфельного проекта. Согласно определенным правилам, нам разрешено кодировать практически все, что мы хотим, в группах из одного, двух или трех человек. Цель этого проекта - собрать все знания, которые мы накопили за год, и использовать их для создания полностью разработанного проекта. Мы сможем продемонстрировать это в нашем Портфолио и использовать для продвижения наших навыков.

Я решил объединиться с двумя замечательными коллегами: Дрю Маринг и Марк Кавили. Мы никогда раньше не работали вместе над проектами, но мы хотели получить возможность сделать это до конца года. И из той команды мечты, которую мы только что сформировали, родилась идея PuppR. PuppR - это сайт знакомств для собак, созданный для владельцев собак, которые хотят, чтобы их щенки встречали хороших собак в их районе. Он во многом вдохновлен знаменитым приложением для знакомств Tinder, которое может понравиться многим. Нам нужно было что-то веселое и легкое, но в то же время сложное с технической точки зрения, поэтому мы решили сосредоточиться на интерфейсе, поскольку в течение года мы не делали этого много. Нашими основными целями были: углубление наших знаний о Javascript, изучение нового веб-фреймворка (в нашем случае Vue.js) и создание забавного, но интуитивно понятного пользовательского интерфейса.

Для этого у нас было три недели исследовательской фазы, в течение которой мы принимали все технические решения, и три недели разработки. Мы не хотели распределять роли на раннем этапе, поэтому все делали всего понемногу. Но наши природные таланты действительно проявили себя и разделили работу за нас. В итоге я больше сосредоточился на пользовательском интерфейсе, создавал все стили и работал над сбором советов и приемов Vue, Дрю позаботился о большей части бэкэнда и всей стратегии развертывания, а Марк разработал все наши таможенные значки, логотип и сделал все целевая страница.

Как PuppR относится ко мне и к команде

У всех нас были отличные идеи для проекта «Портфолио», но одна из вещей, которые нас объединяет, - это любовь к собакам. Я знаю, что мы трое выросли с ними, и у всех нас есть собаки / есть родственники, у которых есть собаки. Излишне говорить, что мы думаем, что они лучшие животные. Мы думаем, что они заслуживают такого же социального взаимодействия, как и люди, и поэтому мы хотели разработать платформу, которая удовлетворяла бы эту потребность.

Лично собаки - центральная часть моей жизни. Когда мне было 5 лет, мои родители усыновили золотистого ретривера по кличке Рислинг, так что у меня была возможность вырасти с этим большим клубком милости. Отношения с этой собакой действительно вызвали у меня страсть ко всем собакам: он был одной из самых уважительных и терпеливых собак на свете. Моя мама разрешала мне держать поводок во время прогулки, но предупреждала Рислинга, говоря: «Эй, это Лаура идет с тобой, так что будь осторожна», потому что я был слишком мал, чтобы с ним справиться. И он действительно понимал и замедлял меня, даже когда я вырастал и был достаточно большим, чтобы держать поводок! Через несколько месяцев после его смерти моя мама взяла еще одну собаку, бернский зенненхунд по имени Джоуи. В то время мне было 19, и все мои братья и сестры давно уехали из дома. Так что мы с мамой в основном воспитывали Джоуи самостоятельно. По сей день, живя на другом конце света, я все еще считаю Джоуи своим ребенком, и он по-прежнему уважает и слушается меня, как свою маму. Я хотел бы, чтобы он поехал со мной в Сан-Франциско, чтобы познакомиться со всеми классными щенками, на которых я получил возможность посидеть с собаками!

Чего мы достигли с помощью PuppR

Для внешнего интерфейса мы решили использовать Vue.js вместо React.js, потому что несколько инженеров-программистов сказали нам, что его намного легче изучить, и, учитывая время, которое у нас было, было сложно изучить React. В качестве серверной части мы выбрали Firebase для его служб аутентификации базы данных и пользователей. Мы решили сосредоточиться на интерфейсе, потому что чувствовали, что у нас не было большого опыта с ним в этом году, и использование быстрого и мощного инструмента, такого как Firebase, во внутреннем интерфейсе действительно помогло нам достичь этого и изучить Vue.js должным образом. Для развертывания мы решили использовать новую службу Google: Google Cloud Run, которая все еще находится в стадии бета-тестирования, но оказалась идеальной, в сочетании со знанием Дрю контейнеров Docker.

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

  • Регистрация / вход пользователя. Пользователь может зарегистрироваться с помощью своей электронной почты и создать учетную запись для своей собаки, загрузив для нее основную информацию и изображение. Они могут выйти из системы, вернуться и снова войти в систему, и они сохранят всю свою информацию, лайки, совпадения и т. Д.
  • Прокрутка профилей. Пользователь может просматривать профили других собак в своем районе и ставить им лайк или пропуск, а если они хотят увидеть последний пройденный профиль, они могут перемотать назад. Если они нажмут на изображение текущего профиля, они увидят дополнительную информацию об этой собаке.
  • Совпадения. Когда два пользователя нравятся друг другу, создается совпадение, и у них есть доступ к электронной почте друг друга для связи. Каждый пользователь может иметь доступ к своим матчам в разделе «совпадения». Это не оптимальное решение, и мы об этом знаем. Со временем в приложении будет реализован чат, в котором владельцы собак смогут договориться о свидании.

Самая сложная техническая задача при разработке PuppR

Для нашей команды открытие интерфейсной структуры и всех ее концепций было сложной задачей, особенно обработка данных и их расположение на нашей странице.

В нашем веб-приложении нам нужно загружать профили и фильтровать их в зависимости от почтового индекса вошедшего в систему пользователя, понравившихся профилей и сопоставленных профилей. Это означает, что у нас есть два источника данных: данные текущего зарегистрированного пользователя и данные всех остальных профилей (отфильтрованные). Мы также хотели создать возможность выхода из системы, где пользователи могли бы просто пролистывать все профили, хранящиеся в нашей базе данных.

Для этого есть мощный инструмент, предоставляемый Vue, который представляет собой локальный магазин Vuex. Цель Vuex - сосредоточить все вызовы базы данных и API в так называемых «действиях», а затем иметь данные, готовые к отправке в магазин, доступные для всех компонентов. Затем данные могут быть изменены в магазине, и эти действия могут отправлять обновления в базу данных. Дело в том, что наша команда действительно не чувствовала себя комфортно, используя хранилище Vuex для всех данных, поэтому мы попытались, чтобы только текущий пользователь вошел в данные в хранилище и делал вызовы базы данных непосредственно из компонентов (что, если задним числом, не хорошая практика). Из-за этого было невероятно сложно обновлять список профилей в зависимости от входа в систему или выхода из нее. Поскольку состояние пользователя сохранялось в хранилище, мы должны были заставить наши компоненты сначала проверять хранилище, прежде чем решать, должен ли он вызывать базу данных и отображать полные профили для вышедшего из системы пользователя или только отфильтрованные для этого. Пользователь.

В конечном итоге мы полностью удалили опыт выхода из системы и убедились, что вызовы базы данных происходили после того, как хранилище Vuex получило все текущие зарегистрированные пользовательские данные. Таким образом, консоль не кричала на нас, говоря, что они не могут отобразить список отфильтрованных профилей, потому что они понятия не имеют, что такое this.user.zipcode! Теперь у нас есть хорошо работающий пользовательский интерфейс, и компоненты отрисовываются без проблем. Но после этого опыта я всегда буду следить за тем, чтобы все вызовы базы данных сохранялись в магазине Vuex!

Другие вещи, которые я узнал

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

Во-первых, я научился использовать веб-фреймворк, и я этим очень горжусь. Я чувствую себя более готовым войти в роль полного цикла и работать с фреймворком. Я действительно благодарен за то, что опытные инженеры посоветовали моей группе работать с Vue.js, и что мы последовали этому совету. Этому легко научиться, но было достаточно сложно, чтобы мы всегда учились во время процесса и держали нас в тонусе.

Я также узнал, что мне нравится UI, и что мне очень нравится делать приложение красивым и приятным. Я все еще не думаю, что хочу быть UX-инженером, но этот проект дал мне чувствительность к дизайну.

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

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

Я также чувствую, что, возможно, многому научился в этих технологиях, но путь все еще очень длинный, и есть так много нового, что я хочу / должен научиться, чтобы достичь своей цели. Я чувствую, что получил представление о том, с чем собираюсь работать, но что есть еще много всего в веб-разработке, и я очень рад это открыть!

В целом, работа над моим проектом «Портфолио» с двумя замечательными людьми над забавным приложением была отличным опытом. Хотелось бы, чтобы у нас было больше времени на его разработку и реализацию большего количества функций, но я очень горжусь нашей работой, и она представляет собой отличное завершение года, когда мы проводим Фонд.

Кто такая Лаура Рудж?

Я страстно изучаю программную инженерию в школе Холбертон в Сан-Франциско, собираюсь начать стажировку в Deezer в Париже. В прошлом танцор и комик, я меняю карьеру на инженера-программиста Full Stack.

Вот ссылка на репозиторий PuppR на GitHub: https://github.com/lroudge/puppr

Ссылка на развернутую целевую страницу и проект: https://puppr.best/

Ссылка на мой профиль в LinkedIn: https://www.linkedin.com/in/lauraroudge/