Школа CodeCraft в Боулдере, Колорадо. Август 2017 года. Неделя 8: Хакатон.
В течение последних 2 месяцев я посещал учебный лагерь Full Stack Web Development в Технологической школе CodeCraft в Боулдере, штат Колорадо. Мы изучаем стек «MEVN» (Mongo DB, Express Server, Vue.js и Node.js) а на 8-й неделе нашим заданием был недельный хакатон с использованием темы «здоровье», чтобы заставить нас двигаться дальше.
Наш инструктор Рафаэль Серота разделил нас, учеников, на группы. Моими товарищами по команде были Джо Фан и Эрик Прайс. Наши первые две ближайшие задачи: выбрать имя и общую тему для нашего «полнофункционального веб-приложения».
Три команды собрались в разных частях нашей школы, и наша команда взялась за дело. У меня было три идеи для названий: Hackleberry Finn, Hacky Sax и Keep Calm & Hack On. Мы выбрали Hackleberry Finn в качестве названия и начали мозговой штурм. Запустив наши смартфоны и поискав в магазинах приложений, мы быстро нашли там множество приложений счетчика калорий, которые по сути сравнивают вашу жизненно важную информацию (возраст, пол, рост, вес) с вашей целью (например, «Я хочу сбросить 1 фунт в неделю» равно «Вы должны потреблять не более 1667 калорий в день»). Мы решили попробовать создать своего рода приложение для подсчета калорий, также включающее компонент настроения.
Мы решили использовать Trello.com, чтобы отслеживать наши идеи и наши задачи.
У меня большой опыт веб-дизайна, поэтому я решил создать HTML и CSS для структуры сайта, страниц и макета. Джо было поручено настроить нашу базу данных Mongo, используя mongoose npm, чтобы немного упростить процесс. Эрику было поручено изучить наш пищевой API. После быстрого поиска в Google мы решили использовать API Nutritionix.com, который имеет огромную базу данных и предлагает бесплатный идентификатор пользователя и ключ API.
Я приступил к созданию веб-сайта. Сначала я создал свою основную папку проекта, затем начал устанавливать модули узлов, которые, как я знал, нам нужны: express (для нашего сервера), mongoose (для нашей базы данных Mongo), request (для вызовов API), body-parser (для данных JSON). Затем я создал папку / public и папки / html, / js, / images и / css внутри нее. Я настроил свой экспресс-сервер с помощью статического промежуточного программного обеспечения и добавил маршруты, которые, как я знал, нам понадобятся: домашняя страница, страница ввода данных о еде, страница ввода данных о деятельности, страница проверки хода выполнения, страница о странице и страница контактной формы (мы закончили удаление контакта страницу формы, так как настройка smtp и т. д. займет слишком много времени). Кроме того, я создал важную страницу 404!
Мне нравится использовать bootstrap для создания макетов страниц и настраивать очень простую структуру сайта с полноразмерной навигационной панелью вверху, макетом из двух столбцов внизу для содержимого главной страницы и простым нижним колонтитулом с использованием ‹small› текста. Bootstrap 4 только что был выпущен, но я решил использовать Bootstrap 3 для этого проекта. Я также выбрал несколько шрифтов Google и нашел красивую цветовую схему для использования через Adobe Kuler. Для стоковых фотографий я использовал pixabay.com.
Джо создал три модели для нашей базы данных для информации User ID, Food Items и Activity Items. Мы использовали отдельный файл db.js для нашего кода мангуста и использовали Robo 3T для взаимодействия с нашей базой данных Mongo.
Эрик нашел на YouTube отличный видеоурок о том, как позвонить в Nutritionix API, и усовершенствовал для этого некоторые внешние js с помощью jQuery.
Мы были в пути, но нам предстояло пройти долгий путь. В конечном итоге мы хотели: 1. Иметь систему входа в систему, которая позволила бы уникальным посетителям вводить важные данные о себе; 2. Разрешить этим пользователям искать продукты, которые они ели или пили, из вызова API, время и настроение, когда они потреблялись, а затем вводить эти элементы в форму, которая извлекает информацию о калориях из вызова API и записывает ее в базу данных; 3. Разрешить пользователям также вводить действия, которые сжигают калории, время и настроение для каждого, и записывать эти данные в базу данных; 4. Наконец, посетите страницу «Проверка хода выполнения», чтобы увидеть графическое представление этих данных.
Для входа в систему Джо погрузился в SDK для входа в Facebook. Это оказалось довольно сложно, особенно для новых разработчиков, таких как мы. В конце концов, Джо проявил настойчивость и смог разрешить пользователям Facebook заходить на наш сайт. Это было здорово, так как это позволило нам отображать их имена из Facebook на нашей домашней странице и, используя идентификатор пользователя Facebook #, мы могли однозначно идентифицировать их в нашей базе данных Mongo.
Мы взяли код вызова интерфейсного API из результатов исследования Эрика на YouTube и результатов панели поиска, и я преобразовал его в наш код server.js в бэкенде, чтобы скрыть информацию об идентификаторе пользователя и ключах API от клиента. Помощники нашего учителя, Эдди Веттер-Дрейк и Джон О’Нил, терпеливо (!) Помогали нам на нескольких этапах пути, особенно с моей следующей задачей: возвращать данные вызова API Nutritionix в столбец на HTML-странице.
Мы использовали Vue.js для возврата данных из базы данных в области на наших страницах, добавляя неупорядоченные списки с растущим списком элементов ‹li›.
Для страницы «Данные об активности» я взял несколько цифр сжигаемых калорий, которые исследовал Эрик, взял за основу человека весом 150 фунтов и рассчитал пять видов деятельности по количеству сожженных калорий в минуту:
burnRates: {
«Бег / бег трусцой»: 10,
«Тяжелая атлетика»: 4,
«Ходьба»: 7,
«Велоспорт / горный велосипед»: 13,
"Сон / Дремл": 1
}
У нас не было времени (у нас было около 4 1/2 дней), чтобы подключиться к какой-либо форме «API человеческих данных» и извлечь из него информацию о действиях, поэтому нам пришлось использовать этот более произвольный метод. Так же, как и на странице «Данные о продуктах питания», мы теперь могли добавлять на нашу страницу растущий список ‹ol›, отображающий подсчитанные калории, сожженные за время, потраченное на выполнение этой деятельности.
Круто, у нас был хороший функционал на сайте, отличный внешний вид и база данных, наполненная некоторой полезной информацией, привязанной к уникальным пользователям. Но как отобразить эту информацию?
Я провел небольшое исследование и нашел сайт Chart.js.
Найдя пример кода для использования, я решил использовать «линейную диаграмму» для отображения трех частей данных: 1. Потребленные калории; 2. Сожженные калории; 3. Настроение. Они должны были отображаться на двух диаграммах: 1. По дням, когда пользователь вводил еду и действия; 2. Среднее значение за неделю из диапазона дат, выбранного пользователем. Идея заключалась в том, чтобы извлечь эту информацию из нашей базы данных Mongo и поместить результаты в массив, используемый файлом chart.js в объекте «набор данных». Из-за нехватки времени мне пришлось добавить некоторые «фиктивные данные» за период выборки 24 часа и усреднить за период выборки недели.
Чтобы окончательно отполировать наш сайт, Эрик заполнил нашу страницу «О нас» краткой биографической информацией о каждом из нас.
Мы боролись на протяжении всего этого хакатона, используя Git и Github для управления нашими файлами кода. Мы несколько раз сталкивались с ужасными «конфликтами слияния», но быстро научились их устранять с помощью коммитов, подтягиваний и подтягиваний.
Уф. После исправления кода буквально в последнюю минуту все три команды снова собрались в нашем классе для презентаций наших приложений. Я был очень взволнован, увидев, над чем мои товарищи по «когорте» так много работали всю неделю. Я был чрезвычайно впечатлен проектами каждого, их собственными взглядами на то, как решить проблему «приложения для подсчета калорий», и тем, как много мы все смогли сделать за такой короткий промежуток времени с практически нулевым хакатоном и полным опытом веб-разработки. После короткого пау-вау наша судейская коллегия (в которую также входила наша специальная координатор службы карьеры Мередит Рэфтер) выбрала команду Hackleberry Finn в качестве победителей хакатона!
