Интересно, сколько людей во всем мире используют Netflix ежедневно. До того, как начать свой путь в программировании, чуть более двух месяцев назад, я никогда не задумывался о том, как я механически взаимодействую с Интернетом. Я нажимаю кнопку или ввожу что-то в нужном месте веб-сайта или приложения и, за небольшим исключением, получаю то, что хочу. Но как? Интернет не был таким интерактивным, когда я был моложе; в основном это было просто место для потребления информации. Теперь каждый может иметь индивидуальный опыт работы в Интернете или даже создавать уникальный контент без необходимости понимать лежащую в основе механику.

Прежде чем приступить к программе разработки программного обеспечения в школе Flatiron, я почти десять лет работал личным тренером. Чтобы быть достойным личным тренером, нужно гораздо меньше знать физиологию или биомеханику; это больше касается понимания потребностей, ценностей и мотивации людей. Теперь я учусь понимать и предвидеть потребности пользователей с помощью кода. JavaScript — это первый инструмент, который я учусь использовать, чтобы сделать работу в Интернете более живой.

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

Для моего первого проекта моей целью было воспроизвести некоторые функции потоковой платформы в меньшем масштабе. Мой проект — «Путеводитель по фильмам Studio Ghibli» — представляет весь каталог фильмов, созданных Studio Ghibli (мой любимый — Унесенные призраками, а вы?).

При загрузке страницы данные о каждом фильме извлекаются из API Studio Ghibli, а отдельные фрагменты информации, в свою очередь, отображаются на странице в «карточке» с помощью функции createMovieCard. Кроме того, данные каждого фильма (представленные в виде объекта) добавляются в массив, чтобы эти данные можно было использовать в других функциях приложения, которым может потребоваться повторение данных.

function fetchMoviesFromAPI()
   fetch(‘https://ghibliapi.herokuapp.com/films')
   .then(response => response.json())
   .then(movies => {
     for (const movie of movies) {
       moviesArray.push(movie)
       createMovieCard(movie)
     }
   })
}
fetchMoviesFromAPI()

Информация о каждом фильме содержится на отдельной карточке — показана афиша фильма вместе с его названием, датой выхода, временем выполнения и счетом на Rotten Tomatoes. Для каждой части информации должен быть написан код для создания HTML-элемента для хранения соответствующих данных. Этому элементу присваивается идентификатор, чтобы его можно было легко вызвать и изменить при необходимости в более позднее время. Наконец, соответствующий текст загружается как текстовое содержимое элемента, и элемент добавляется к карточке. Пример добавления даты выхода фильма будет выглядеть следующим образом:

let releaseDate = document.createElement('p')
releaseDate.className = "release-date"
releaseDate.textContent = `Release Date: ${movie.release_date}`
movieCard.appendChild(releaseDate)

У пользователя также есть возможность щелкнуть, чтобы увидеть краткое описание фильма, и может добавить или удалить фильм из списка наблюдения, который находится рядом с карточками фильмов. Со временем подобная функция может быть расширена, чтобы сохраняться при загрузке страницы в отдельных случаях (точно так же, как сохраняется «Мой список» Netflix); аналогичные функции можно использовать для отображения уже просмотренных фильмов, списка «избранного» и т. д.

Моя самая большая проблема при создании этого приложения заключалась в создании функции «Сортировка». Чтобы создать эту функцию, было создано раскрывающееся меню с параметрами для сортировки фильмов по названию, дате выпуска, времени выполнения или рейтингу (оценка Rotten Tomatoes). Используя прослушиватель событий, чтобы определить, когда пользователь изменил свой выбор, код должен был делать три основные вещи.

Во-первых, он должен был удалить существующие карты, которые отображались. Хотя это казалось самым простым, на самом деле это оказалось самым сложным для меня. Пришлось выбирать каждую карту. Я попытался сделать это, выбрав все карточки с помощью document.getElementsByClassName(), а затем используя метод .remove() для каждого из элементов результирующей коллекции. Интересно, что при каждом запуске моей функции удалялись только некоторые элементы! Чего я не понял, так это того, что getElementsByClassName создает живую коллекцию, где изменения в модели DOM отражаются в коллекции. Мне нужна неактивная коллекция, если я хочу удалить все сразу. Как только я (наконец-то!) понял это, я вместо этого использовал document.querySelectorAll(), чтобы получить соответствующие карточки, а затем удалить их.

Затем код должен был перебирать массив объектов (созданный, когда фильмы были первоначально получены из API, причем каждый объект содержал данные об одном фильме) с помощью метода .sort(). Метод sort принимает функцию, поэтому у меня были отдельные функции, которые сортировали по каждому критерию. Интересно, что хотя многие из этих фрагментов данных были числами, мне пришлось формулировать сравнения с помощью parseInt(), потому что они читались как строки. Например, когда время выполнения 124 минуты сравнивалось с временем выполнения 93 минуты, код сравнивал строки «124» и «94». Когда это происходит, символы читаются слева направо, поэтому 94 считалось большим, чем 124, потому что 9>1. Код выглядит следующим образом:

function lengthCompare(a,b) {
   if (parseInt(a.running_time) < parseInt(b.running_time)) {
     return -1
   } else if (parseInt(a.running_time) > parseInt(b.running_time)) {
     return 1
   } else if (parseInt(a.running_time) === parseInt(b.running_time)) {
     return 0
   }
}

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

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

А пока мне еще многое предстоит узнать о CSS! Мой папа художник и всегда говорит, что отличный дизайн — это сочетание формы и функциональности. JavaScript помогает мне добавлять функциональность и интерактивность, но я также хочу, чтобы он выглядел красиво!