После напряженных 3 недель (технически 4 недель благодаря каникулам) я успешно завершил Фазу 1 программы Software Engineering Live Flatiron School. Я буду размышлять о некоторых своих мыслях об УДИВИТЕЛЬНОМ опыте в отдельном посте, но сначала я хотел поделиться своим проектом Фазы 1.
Фаза 1 вращалась вокруг Javascript, опираясь на HTML и CSS, которые мы изучили во время учебной программы Pre-Work, которую нас попросили пройти до начала. Нашей задачей было разработать наше первое веб-приложение от презентации до разработки и презентации.
Мы с моим партнером Джаном решили разработать приложение с использованием API-интерфейсов рецептов (в данном случае это онлайн-база данных, из которой мы можем получать данные). Изучив некоторые из доступных общедоступных API (которые не требуют ключей или имеют защиту CORS, что было проблемой, с которой мы столкнулись с нашим первоначальным API), мы решили использовать TheMealDB.com, который представляет собой открытую базу данных с краудсорсингом. рецептов со всего мира.
После принятия решения о том, какой API использовать, нам нужно было найти пользователя и проблему для решения. После мозгового штурма мы оба поделились разочарованием, пытаясь решить, что приготовить с друзьями. Мы также оба имели тенденцию решать, что готовить, основываясь на том, какие белки у нас были легко доступны. Учитывая API и наши знания Javascript/HTML/CSS, решение казалось выполнимым!
Начав с HTML, мы смогли создать базовый скелет нашего приложения. CSS взял этот базовый скелет и добавил скин, чтобы упростить взаимодействие с приложением для пользователя (особая благодарность Coolors.co за их генератор цветовых схем!). Javascript добавил мускулы, чтобы придать приложению функциональность.
Вот как выглядит приложение после инициализации:
…А вот как он полноценно работает!
Как я расскажу подробнее в своем посте с размышлениями, несмотря на то, что я завершил Фазу 1, я вряд ли являюсь экспертом по Javascript, но мы с Джаном смогли преодолеть несколько конкретных проблем и научились ценить Javascript еще больше.
Наша первая серьезная проблема была с нашей панелью эскизов, или recipeBar, как мы ее называли.
Чтобы заполнить recipeBar, мы получили конкретные данные с theMealDB.com в зависимости от того, на какой из пяти белков (свинина/лосось/говядина/курица/тофу) щелкнул пользователь. Проблема, с которой мы столкнулись, заключалась в том, что после заполнения recipeBar при нажатии на другой белок, а не при очистке полосы и замене ее другими эскизами, добавлялось больше изображений, быстро оставляя пользователя с раздутым и переполненным recipeBar. После попыток манипулировать различными частями этого кода recipeBar мы .наконец нашли решение. Мы .finally использовали .finally (каламбур).
.finally — это метод Javascript, который работает с выборкой. Очень часто используется .fetch и добавляются дополнительные функции к выборке с помощью .then. По сути, после отправки запроса на доступ к данным из базы данных .then позволяет использовать данные определенным образом. Нам удалось использовать .fetch для получения данных, которые позволили recipeBar постоянно заполняться. Код делал только то, о чем мы просили, и даже слишком хорошо!
Используя .finally, мы добавили последний шаг к нашей выборке. .finallyожидает завершения оставшейся части выборки (независимо от того, успешной она или нет) для выполнения.
В этом конкретном случае мы ждали, пока выборка получит данные и заполнит recipeBar, а затем, наконец (точка здесь не нужна) запустим другую функцию, которая очистит recipeBar. В этом никогда не было бы необходимости, если бы пользователь щелкнул только один белок, но больше, если бы пользователь хотел щелкнуть другой белок. Наконец-то мы нашли решение, позволяющее не переполнять бар recipeBar (потому что, давайте будем честными, кому действительно нравится бар, который переполнен).
Еще одна проблема была с нашим списком ингредиентов рецепта, или, как мы его называли, recipeIngredient.
theMealDB.com (как и все базы данных API) хорош настолько, насколько хороши данные, которые в него вводятся. Поскольку база данных открыта и основана на краудсорсинге, она зависит от того, как люди вводят данные. Данные структурированы таким образом, чтобы иметь 20 потенциальных ингредиентов и 20 измерений потенциальных ингредиентов, но не все рецепты содержали 20 ингредиентов. Это привело бы к тому, что размер контейнера вокруг recipeIngredient не изменялся динамически, а это означало, что контейнер часто был слишком высоким, потому что размер контейнера автоматически подбирался для 20 ингредиентов, даже если 20 ингредиентов могли отсутствовать в контейнере. Данные пришлось фильтровать…
Введите .filter, который представляет собой метод, фильтрующий определенные условия, заданные в коде. Но какие условия нам нужны? После тестирования многих рецептов в базе данных мы обнаружили, что не все рецепты были введены с одинаковыми данными для отсутствия ингредиентов. В некоторых рецептах не вводилась информация об ингредиентах. Другие остались с « », а еще другие с « » (одно пустое место). Нам пришлось сделать много фильтрации! К счастью, .filter позволяет вам устанавливать сразу несколько условий, по сути, имея несколько фильтров одновременно.
В приведенном выше коде заданы условия для фильтрации всего, что НЕ null, НЕ «» и НЕ «». Благодаря этому фильтру размер контейнера вокруг recipeList будет зависеть от того, сколько ингредиентов содержится в каждом отдельном рецепте.
Были, конечно, и другие проблемы, но мы больше всего гордились преодолением этих двух. Преодолев их (спасибо, Google!!!), мы узнали больше всего о том, как на самом деле использовать Javascript для создания удобного и динамичного приложения, которое успешно решает конкретную проблему.
В будущем я надеюсь добавить функциональность, позволяющую пользователю составлять список покупок с ингредиентами, иметь возможность отмечать флажок, если у него уже есть этот ингредиент, чтобы он не был включен в список покупок, который они могут взять с собой в магазин. рынок. Но в то же время я очень доволен приложением, которое мы с Джаном создали.
Я прошел долгий путь от своих первых статических веб-страниц Geocities и Angelfire!
Вернитесь на этой неделе, чтобы узнать о моих размышлениях о Фазе 1!
