Создание TVFlixx

Приветствую!

Чуть более двух лет назад я начал свое путешествие в мир Vue.js после долгой и, вероятно, бесконечной работы с Angular. Работа с Vue.js была плодотворной, и есть еще много вещей, которые предстоит открыть, даже по мере того, как продолжается работа над этим удивительным фреймворком и его библиотеками, например, Nuxt.js.

Работа с Angular дала мне рабочие знания TypeScript, но я (никогда) не пытался создать что-либо на TypeScript вне Angular. Мне пришлось быстро освежить знания по TypeScript с помощью курса Scrimba и погрузиться в мир Vue.js<&gt- TypeScript с помощью этого удивительного плейлиста на YouTube.

Я большой фанат телешоу, и я много пишу в твиттере о своих текущих фаворитах (следуйте за мной 🤩!), но я никогда не думал о создании приложения для игры с данными телешоу до этого момента.
Я создал Moflixx с помощью Angular где-то в 2019 году, но оно было основано на API Movies. Я хотел создать приложение, которое помогло бы мне работать с Vue.js (Composition API) и TypeScript, и сейчас мне казалось, что это отличное время, чтобы поиграть с данными о телепередачах.

Пользовательский интерфейс

Как и Moflixx, мне нужен был API для получения данных о телепередачах. Это заняло несколько дней, но я нашел Episodate удивительным образом через поиск на GitHub. Я изучил данные, они не были супер надежными с точки зрения доступных конечных точек, но в них было все, что мне нужно для TVFlixx.

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

Далее, мне нужна была структура для TVFlixx. Я написал список компонентов и страниц, которые, по моему мнению, мне понадобятся, и набросал несколько элементов для компонентов. Постоянной для меня в этом типе приложений является страница Favorites.

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

Страница TVShows — это простая страница, которая показывает постраничный список ТВ-шоу из API, на каждой странице отображается 20 элементов в зависимости от доступных элементов из API.

Страница TVShowDetails использует больше других компонентов.
Например, я использую компоненты Carousel и CarouselItem, чтобы показать список изображений, которые поставляются с каждым элементом ТВ-шоу — это помогает любому потенциальному пользователю просматривать изображения по одному или выбирать любое изображение из предварительного просмотра.

Я также использую компонент Episodes на странице TVShowDetails, компонент принимает реквизит episodes, который представляет собой массив всех эпизодов, содержащихся в объектах для конкретного телешоу. Этот компонент фильтрует каждый элемент массива по сезону и создает представление, которое позволяет пользователям просматривать список эпизодов по сезонам, выбирая кнопку, показывающую интересующий их сезон.

Компоненту TVShow потребовалось несколько итераций, прежде чем я смог получить то, что хотел.

Мне нужен был эффект наведения, чтобы карточка переворачивалась на другую сторону, показывая некоторые детали и позволяя пользователю «увидеть больше деталей» о телешоу, это заняло некоторое время, но я добился этого.

Лицевая сторона карточки	Перевернутая сторона

Остальные компоненты практически не требуют пояснений.

Часть TypeScript

Я использую расширение Volar в своем VS Code, поэтому мне пришлось включить Template Interpolation Service, чтобы сделать некоторую валидацию и завершение кода в шаблоне. Я также хотел больше изучить Composition API, и использование метода defineComponent из vue было хорошим решением.

Во-первых, я знал, что мне нужно определить структуру объектов, которые я буду использовать в приложении. Я создал несколько интерфейсов для обработки данных, поступающих на каждую страницу и компонент, и очень старался избегать типов any 😅.

Компонент Episodes потребовал специального пользовательского типа, отличного от других интерфейсов, которые я создал, потому что в конечном итоге он предоставлял объект массивов, а тип для ключей для элементов в объекте не был точно известен или постоянен до времени выполнения, поскольку это были значения поля season для эпизодов.
Эта выдержка из документации по TypeScript пришлась как нельзя кстати:

import Episode from "./Episode"

interface SeasonEpisodes { 
    [index: string]: Episode[]
}

export default SeasonEpisodes;

Мне также нужно было решить проблемы, связанные с передачей реквизитов компонентам и обеспечением правильного типа для объектов с помощью утверждения типа с помощью PropType, импортированного из vue.

Заключение

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

Я хотел поделиться своими мыслями о работе с TypeScript и Vue.js, в этой статье собраны в основном те части, о которых, по моему мнению, стоит рассказать.

Репозиторий на GitHub — присоединяйтесь к репозиторию, если вам это понравилось!

Спасибо за прочтение.

Ссылки

• Выдержка из TypeScript docs
• Вдохновение пользовательского интерфейса
• Ресурс API
• Компонент «Карусель
• Компонент Pagination