У меня была возможность поработать над своим первым кодовым проектом, основанным на HTML, CSS и JavaScript, ближе к концу прошлого месяца, и что ж… Я никогда не был готов к тому, насколько ухабистой будет эта поездка. Школа Moringa, где я в настоящее время изучаю разработку программного обеспечения, дала нам проект по созданию одностраничного приложения, которое должно было быть отзывчивым, чтобы мы могли перейти к следующему этапу, ReactJS и разработке бэкэнда, для которого требовался как минимум проход 60%.

Добраться до этих 60% было непросто. Находясь в классе со смешанными способностями, я также чувствовал себя немного напуганным, потому что, пока вы только что закончили среднюю школу, в том же классе, что и вы, есть группа, которая занимается JavaScript и Ruby во сне. Я знал, с какими трудностями я столкнусь, но развитие персонажа ждало меня в этом проекте… YouTube, StackOverflow и W3Schools стали моим вторым домом на полторы недели… но я был оптимистичен, что сделаю что-то для себя.

Чтобы представить это в контексте, я сделал простое приложение для поиска бургеров, где вы вводите число, и на основе этого числа появляется информация о гамбургере.

Добро пожаловать в мое путешествие, поскольку я делюсь здесь тем, как я это сделал.

1. ДИЗАЙН ДОМАШНЕЙ СТРАНИЦЫ С ИСПОЛЬЗОВАНИЕМ HTML И CSS.

Я назвал это Восторгами, почему бы и нет?

Вот так выглядела домашняя страница после моего дизайна.

Затем я добавил небольшую, но отзывчивую панель навигации, которая приведет вас к разделу, который вы щелкнули с помощью селектора наведения в CSS. Создание домашней страницы заняло меньше нескольких часов, потому что большинство дополнений планировалось реализовать с помощью JavaScript.

Домашний экран выглядит достаточно просто, чтобы пользователь мог его понять, главной особенностью является единственная панель поиска, потому что мы собираемся использовать ее для получения наших данных (как показано ниже). Однако здесь, во время проектирования, я столкнулся с первой проблемой — с CSS.

Урок 1. Z-индекс – бесценный инструмент для позиционирования изображений и элементов.

Если вы хотите разместить изображения так, чтобы они не перекрывали друг друга, вам поможет z-index. Согласно W3Schools, это свойство определяет порядок элементов в стеке.

z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная, позиция: фиксированная или позиция: липкая) и flex-элементами (элементами, которые являются прямыми дочерними элементами display:flex).

Если два позиционированных элемента перекрываются без указания z-index, элемент, позиционированный последним в HTML-коде, будет отображаться сверху.

Теперь, до этого, было чрезвычайно сложно избежать перекрытия фотографий и элементов CSS, но с этим я смог расположить элементы так, чтобы они не перекрывались при прокрутке страницы.

Преимущество №1. Интеграция HTML и CSS не вызвала у меня затруднений, если сравнивать с JavaScript. Без функциональности JavaScript дизайн выглядел простым и приятным для глаз и для клиентов, которых я имел в виду. Простая домашняя страница и страница «Свяжитесь с нами» источают привлекательность.

2. Получение данных из API.

Одно из требований нашего проекта заключалось в том, чтобы использовать либо внешний API, либо тот, который вы создали сами, но при этом иметь работающий локальный сервер (это позволяет работать данным, которые вы использовали в своем json-файле).

Чтобы разобрать это, API, что означает интерфейс прикладного программирования, простыми словами, содержит данные, которые вы собираетесь использовать позже в J.S. С его помощью вы можете загружать данные, которые может видеть пользователь.

Вот тут и начались мои беды. Во-первых, я решил использовать BurgerAPI, предлагаемый RapidAPI.com. Однако, не зная, что такое ключ API и что он делает в то время, я изо всех сил пытался загрузить данные. Даже с бесчисленными учебными пособиями на YouTube, которые помогли понять, как работает API-ключ, я все еще не мог его понять. Однако с помощью моего технического наставника и нескольких одноклассников я освоился и, в конце концов, смог загрузить свои данные в свой файл json и запустить локальный сервер с помощью команды:

json-сервер — смотреть db.json

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

Урок № 2. Вам нужно протянуть руку и попросить о помощи, когда у вас есть блокировщик/застрял. Вы можете не знать, что проблема связана с вашим кодом, но если вы уменьшите свою гордость и действительно обратитесь к кому-то за помощью, вам не нужно будет плакать и расстраиваться часами из-за строки кода. Возьми у меня!

Вот как выглядели данные в файле json (для дальнейшего использования)

3.JavaScript

Это была та часть, из-за которой я провел почти три бессонных ночи. Были и веские причины. Хотя в моем проекте не использовались PATCH, POST и другие методы C.R.U.D (только метод GET), первая проблема проявилась гораздо раньше, чем ожидалось.

Первая проблема заключалась в том, как я должен был генерировать свои данные, чтобы они отображались и действительно использовались. В результате я создал функцию, которая позволит вам получать данные из. Поскольку мои данные представляют собой вложенный массив, я использовал метод Object.values() в цикле, чтобы получить определенные элементы, которые мне нужно было показать, когда пользователь вводит число. Это означало, что мне нужно было создать функцию, которая будет генерировать результаты на основе числа, показанного ниже.

Почему бы не использовать метод ForEach? Метод ForEach был бы идеальным, но данные приходили в двух экземплярах, например, вместо того, чтобы получить искомое значение, он выдавал семь значений, которые нельзя было отобразить, когда пользователь нажимал ввод после ввода своего номера в поле панель поиска.

Урок №3.Комментируйте свою работу и всегда используйте console.log(), чтобы проверить, соответствуют ли выводимые данные тому, что вы ищете. Это избавляет от большого количества стресса при отладке и исправлении кода. .

После создания этой функции все, что мне осталось сделать, это создать прослушиватели событий для панели поиска (при отправке номера) и когда пользователь заполняет контактную форму в нижней части экрана. Код может показаться простым сейчас, но это результат свежих слез и часов пристального взгляда на экран.

4. Развертывание приложения и объединение всех компонентов

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

Эта ошибка: файл json работал только при включенном сервере. И в моем случае он не был включен, пока я не набрал json-server — смотрите db.json. Когда проект был отмечен первоначально, я задавался вопросом, почему я получаю такие низкие оценки в ответах пользователей, и все же он работает с моей стороны.

Я открыл для себя Heroku CLI, облачную платформу, которая позволяет разработчикам запускать свои приложения исключительно в облаке. После его установки и привязки моего репозитория к созданному мною приложению Heroku приложение заработало без каких-либо сбоев. Наконец-то праздник!

Урок № 4.Никогда не знаешь, что что-то получится, пока не попробуешь. Так что попробуйте эти, казалось бы, нетрадиционные методы, они могут оказаться идеальным решением для вашего блокировщика.

ЗАКЛЮЧЕНИЕ

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

Будьте готовы учиться и расти, потому что сегодня это единственная постоянная вещь в сфере технологий.

Вы можете проверить мой проект здесь: https://github.com/purplexiion/final-project

В противном случае, счастливого кодирования.

-Вамую.