OpenSea Search — это одностраничное приложение (SPA), которое отображает коллекции NFT, как вы уже догадались, из OpenSea. Последний является первым и крупнейшим рынком веб3 для NFT, и, поскольку я сам коллекционер, было вполне уместно сосредоточить свой проект вокруг него. Прежде чем читать дальше, взгляните на проектное веб-приложение, чтобы увидеть лицо в названии. Веб-приложение позволяет пользователю:
Просматривайте коллекции по 50 за раз (ура, нумерация страниц!)
Сортировка коллекций по атрибуту имени в порядке возрастания или убывания
Поиск определенной коллекции по уникальному свойству, ярлыку коллекции
Добавить/удалить определенную коллекцию в сохраненный список
Просмотр сохраненного списка коллекций
В чем был смысл?
После 6 недель интенсивного глубокого изучения HTML, CSS и JavaScript, это веб-приложение представляет собой мои усилия по объединению всего этого. Это была возможность поставить педаль газа в пол, когда дело доходит до применения всех интересных концепций, которые я изучил до сих пор в Академии Си. Благодаря этому проекту я достиг нескольких целей: спроектировать и спроектировать функции во внешнем интерфейсе, общаться с внешним API, использовать интерактивность JavaScript, устранять проблемы в небольшом масштабе и, наконец, создавать и итерировать MVP проекта.
Ниже представлена разбивка моего проекта по дороге из желтого кирпича.
Путь проекта
Остановка 1: просмотр API
Прежде чем приступить к презентации проекта, я изучил несколько общедоступных API без аутентификации, циркулирующих в могучем Интернете. После составления короткого списка нескольких я перешел к Postman, чтобы запустить GET-запросы с допустимыми параметрами запроса. Кроме того, я изучил их доступную документацию для лучшего понимания. API OpenSea поднялся на вершину благодаря качеству документации и хорошо структурированным моделям.
Остановка 2: Разработайте макет
Когда общедоступный API заблокирован, пришло время переключиться и разработать макет веб-приложения. Следуя передовой практике дизайна, ориентированного на мобильные устройства, эскиз начал подстраиваться под мобильные экраны. Я использовал надежный Figma для выполнения эскиза.
Остановка 3: закодируйте статический внешний интерфейс.
Оснащенный дизайном, пришло время собрать статичную переднюю часть. Этот процесс оказался довольно простым, так как я уже разобрался с макетом и цветовым стилем в макете. Несколько замечаний:
Я создал отдельную таблицу стилей с именем color-styles.css для хранения всех своих цветовых переменных. Тогда, в случае смены цветовой темы, модификации нужно будет делать только в одном месте.
Я использовал медиа-запросы с 3 различными значениями минимальной ширины: 768 пикселей, 1024 пикселей и 1280 пикселей для более плавного и отзывчивого взаимодействия.
Flexbox и CSS Grid — это находка.
Остановка 3.5: Регистрация наставника
Во время кодирования статического внешнего интерфейса мой наставник посоветовал мне начать интегрировать API в тандеме, чтобы ускорить процесс и как можно скорее запустить MVP. Это было полезно, так как не давало мне тратить слишком много времени на проработку интерфейса до мельчайших деталей.
Остановка 4: Карты заполнены.
Первое развертывание функции заключалось просто в отображении данных коллекции на карточках. Это было достигнуто с помощью метода асинхронной выборки и использования forEach для результатов для отображения сведений о каждой коллекции на одной карте. Значения по умолчанию использовались для нулевых значений желаемых свойств.
Остановка 5: разбиение на страницы и первый контрольно-пропускной пункт
Мы можем видеть карты, но где в игру вступает интерактивность, суперспособность JS прослушивания событий? Пагинация — вот ответ. Я реализовал два прослушивателя событий на двух кнопках (Предыдущий и Следующий), чтобы отображать 50 предыдущих и следующие 50 коллекций соответственно. Пока JS работал, я столкнулся с первым препятствием при общении с API по параметрам запроса, относящимся к разбивке на страницы. Отслеживайте сеансы отладчика и журналы консоли! Все равно не повезло. С помощью моего наставника я смог раскрыть половину проблемы. Другая половина была золотым самородком, который я упустил из виду в конкретных требованиях API в запросе GET.
Примечание для себя: никогда не пропускайте документацию по API.
Остановка 6: Поиск конкретной коллекции
Следующей функцией стало отображение сведений о конкретной коллекции через поиск. Это было особенно интересно, так как позволяло мне переключать отображение контейнера с моими карточками всякий раз, когда запускался поиск, и наоборот. Более того, если пользователь ввел недопустимый поиск, вместо этого будет отображаться соответствующее пустое состояние.
Остановка 7: Сортировка коллекций
Теперь пришло время для магии сортировки. Как вы знаете, функция сортировки в значительной степени ожидается всякий раз, когда мы просматриваем веб-страницу результатов. Таким образом, веб-приложение позволяет пользователю сортировать список коллекционных карточек по имени в порядке возрастания или убывания. Порядок по умолчанию также можно восстановить. Я использовал элемент select, прикрепленный к прослушивателю событий для события изменения, и встроенный метод сортировки для достижения этой цели. В большинстве случаев нам не нужно заново изобретать велосипед.
Остановка 8: Сохранение данных в базе данных
В рамках своих амбициозных целей я хотел включить функцию, которая сохраняла бы интерактивность веб-приложения. Соответствующая история пользователя выглядит следующим образом: Как пользователь, я хочу добавить/удалить искомую коллекцию в сохраненный список, чтобы иметь возможность просматривать их в любое время.
Чтобы успешно реализовать эту функцию, мне пришлось разбить ее реализацию на множество частей. Это уберегло меня от перегруженности и способствовало СУХОЙ, итеративной практике кодирования. Я использовал пакет json-server, чтобы быстро добраться до бэкенда.
Всякий раз, когда пользователь выполняет поиск определенной коллекции (функция Stop 6), веб-приложение проверяет, существует ли уже коллекция в локальной базе данных. Если это так, пользователь может удалить его, но не добавлять ту же коллекцию в базу данных. С другой стороны, если коллекция не существует, ее можно добавить в базу данных. У пользователя также есть возможность просмотреть свой сохраненный список коллекций, взаимодействуя с тумблером.
Остановка 9: Подведение итогов и продолжение обучения
Поиск OpenSea завершен! Этот проект был действительно интересным, поскольку он был сложным. Планирование и итеративное построение были ключом к успеху, а также оставаться добрым к себе и просить о помощи, когда возникает необходимость.
Учебное путешествие продолжается ~
Найдите проект на GitHub здесь. Спасибо, что остаётесь рядом ❤️
