Первый этап проверки Flatiron School — я так рад поделиться своим проектом для первого этапа со всеми вами! Задача этого первого проекта заключалась в создании одностраничного приложения с использованием HTML, CSS и JavaScript для связи с внешним API (интерфейс прикладного программирования). Вы можете думать об API как о хранимой информации, которой можно обмениваться между компьютерами и компьютерными программами. А как программист вы можете использовать существующие API для добавления данных и функциональности в свои проекты. Мы с моим партнером по проекту Джеральдом Горманом поставили перед собой задачу воспроизвести некоторые функции Spotify и добавить к ним еще одну функциональность. Отсюда родился C-Spotify:
Мы с Джеральдом предполагали, что с нашим проектом C-Spotify пользователь сможет искать исполнителя, получать лучшие треки исполнителя, слушать один из этих лучших треков, как песню, и оставлять комментарии к песне для себя. . Большинство этих функций пришли непосредственно от Spotify, поскольку у Spotify уже есть отличная платформа, с добавлением нами функции комментариев (отсюда и наше название — C-Spotify).
Наша первая задача состояла в том, чтобы заставить работать функцию поиска. В передней части нашего приложения (часть веб-сайта, которая включает взаимодействие с пользователем) мы создали панель поиска, где пользователь может искать художник, представив имя. Когда пользователь отправляет исполнителя, наш интерфейс отправляет содержимое поиска (имя исполнителя) на серверную часть нашего приложения. Серверная часть отвечает за хранение всех полезных данных для приложения. Для этого проекта наше приложение использовало Spotify API в качестве серверной части, поэтому, когда пользователь отправляет запрос на поиск исполнителя, оно просит Spotify выполнить поиск исполнителей с таким же именем или с похожими именами. Мы решили отображать вверху страницы максимум 4 подходящих исполнителя для каждого поиска.
Следующей задачей было отобразить некоторые сведения об исполнителе и наиболее популярные треки исполнителя.› Чтобы справиться с этой функцией, мы добавили событие клика в отображаемый результат поиска каждого исполнителя. При этом, когда пользователь нажимает на исполнителя, он снова отправляет информацию в серверную часть, на этот раз идентификатор, относящийся к этому исполнителю, и обрабатывает два запроса:
- Немного информации о художнике. Мы решили включить фотографию профиля артиста, имя, количество подписчиков и жанры.
- Лучшие треки, относящиеся к этому конкретному исполнителю. В качестве бонуса Джеральд поставил перед собой задачу найти способ отобразить лучшие треки в стиле Spotify, и они вышли такими красивыми — вы даже можете полностью воспроизвести каждую песню, если у вас есть связанная учетная запись Spotify!
Одна из самых полезных функций Spotify, функция «Нравится», была реализована следующей на очереди! -›Чтобы реализовать функцию «Нравится» для нашего проекта, мы использовали два разных значка сердца JavaScript, которые будут переключаться, когда пользователь нажимает на один из них. Существуют более эффективные подходы к реализации подобной функции, но мы гордились своим, поскольку на момент разработки этого проекта мы занимались программированием всего две, почти три недели! В дополнение к переключению между значками, нравится или не нравится песня, соответственно, добавляется или удаляется песня из раздела понравившихся песен пользователя. В этом разделе пользователь может наблюдать, как растет его список «понравившихся песен»!
Почти готово! Наконец, функция комментирования -›Вы когда-нибудь хотели добавить комментарий к песне, которая вам понравилась на Spotify? Скажем, например, была одна песня, которую вы и ваши друзья включали перед тем, как вы все ушли на ночь. Я бы оставил комментарий: «НАША ПЕСНЯ» или «ийкык». Ну, теперь вы можете! В нашем проекте мы добавили форму, прикрепленную к каждой понравившейся песне, где пользователь может добавлять несколько комментариев к каждой понравившейся песне. Проверьте это ниже:
Вот и все. Мы с Джеральдом очень гордимся тем, что это наш первый проект по кодированию и разработке программного обеспечения! Вот ссылка на LinkedIn Джеральда, если вы хотите связаться с ним. Проверьте мой раздел о моем LinkedIn, а также. Всегда рады отзывам и комментариям!
