Так какой план? 🤔

Итак, в этой истории я проведу вас через весь путь создания собственного Youtube Player. Это очень просто, и я обещаю, что вы будете готовы со своим собственным плеером в течение часа. Это потрясающе, не правда ли? Наш конечный результат будет выглядеть так. Если вы перешли по ссылке, вы могли заметить несколько вещей. Видео будут загружены непосредственно из базы данных YouTube через предоставленный ими API. И некоторые из вас, возможно, видели сообщение об ошибке, такое как превышение дневного лимита. К сожалению, это означает, что Google предоставил ограниченный доступ к этому API. Итак, при создании проекта убедитесь, что вы не слишком много играете с API, иначе вам придется ждать следующего дня 😃, чтобы ваша квота пополнилась. Хватит говорить. Составим пошаговый план. Вот ссылка на репозиторий GitHub, на случай, если вы захотите увидеть код, следуя инструкциям.

Пошаговое планирование проекта

  1. Сначала мы получим ключи API из консоли разработчиков google.
  2. Мы начнем наш проект с помощью create-react-app от facebook.
  3. Мы установим пакет npm youtube-api-search.
  4. Для UI мы будем использовать знаменитую библиотеку React UI Ant Design от Alibaba.
  5. Для отзывчивого iframe мы будем использовать немного начальной загрузки.
  6. Наконец, мы напишем код для проигрывателя YouTube.
  7. В конце концов, мы разместим наш проект с помощью всплеска. Отличный инструмент для статической веб-публикации для веб-разработчиков.

Приступим к действию 💯

1. Получение ключей API 🔑

Во-первых, давайте получим ключ API. Посетите это, откройте панель управления разработчика Google и найдите Youtube Data API V3. Включите API и перейдите в раздел учетных данных. Здесь вы можете увидеть свой ключ API. Вы можете использовать его в любое время в своем проекте. Итак, мы готовы.

2. Запустите Project, используя приложение create-response-app 😑

npx create-react-app myapp
cd myapp
yarn start

Вот и все. У нас есть стартовый код для нашего проекта. Как только мы нажмем yarn start в терминале. Запущен сервер разработки, и наш проект размещен на localhost:3000/

3. Установим youtube-api-search в наш проект.

$ yarn add youtube-api-search

4. Добавьте в проект библиотеку пользовательского интерфейса antd React.

$ yarn add antd

Теперь добавьте antd/dist/antd.css вверху src/App.css

@import ‘~antd/dist/antd.css’;
.App { 
   text-align: center; 
 }

Теперь мы готовы использовать дизайн муравьев в нашем приложении create-react-app.

5. Добавьте загрузочный CDN в (public/index.html ) ‹head› ‹/head›

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
</head>

Круто, теперь мы готовы приступить к написанию кода реакции.

6. Давайте наконец запрограммируем Youtube Player 😃

Теперь давайте сначала добавим ключ API в файл .env. Обычно мы делаем это с помощью пакета dotenv от npm. Но вам может быть интересно, я еще не сказал вам устанавливать пакет dotenv. Фактически, этот пакет поставляется с предустановленным приложением create-react-app. Теперь есть особый способ добавления переменной окружения в create-response-app. Вы должны добавить к переменной среды префикс REACT_APP_. Иначе ничего не получится. Также при работе на localhost вам понадобится .env.developmentfile, а для производственной сборки всю работу сделает .env файл.

Итак, давайте сделаем эти два файла в корневом каталоге нашего проекта. И добавьте такие переменные, как

REACT_APP_API_KEY='your_api_key_jdfe39u3cmijsd'

Планирование компонентов для нашего приложения

С приложением в качестве корневого компонента нам потребуются еще 4 компонента: SearchBar, VideoDetail, VideoList и VideoListItem. Поэтому создайте каталог с именем Components в каталоге src вашего проекта.

└── src
 └── Components
      ├── SearchBar.js
      ├── VideoDetail.js 
      ├── VideoList.js
      ├── VideoListItem.js
  ├──App.js
   ...

Давайте наполним эти компоненты немного жизнью ❤ ️.

App.js (наш корневой компонент)

В этом компоненте есть несколько моментов, на которые следует обратить внимание. Во-первых, метод welcome (). Он используется для приветственного уведомления пользователя. Для этого я использовал компонент уведомлений antd. Второй метод handleChange () применен к свойству onChange компонента SearchBar. Как только мы начинаем что-то вводить в SearchBar, срабатывает метод handleChange (). Вот что такое контролируемый компонент. И изнутри этого метода handleChange () мы вызываем метод videoSearch (). Теперь можно использовать пакет youtube-api-search. Этот пакет возвращает функцию, которую мы можем использовать для запроса к API YouTube. Эта функция принимает объект в качестве первого аргумента, имеющего ключ с именем key, здесь вам необходимо указать свой ключ API в качестве значения. И еще один ключевой термин, который принимает поисковый запрос как значение. Второй аргумент - это обратный вызов. Как только запрос завершен, этот API возвращает данные в виде массива из 5 объектов, содержащих подробную информацию о выбранном видео. И в случае превышения дневного лимита он возвращает объект другого типа, который я обработал в блоке try / catch. Здесь я поддерживаю две переменные состояния, одна из которых является видео, содержащим массив из 5 видео, которые будут отображаться в компоненте VideoList, а другая - выбранным видео, которое будет воспроизводиться. Также мы использовали еще один поиск переменной состояния, имеющий логический тип. В методе handleChange () я использовал пару setTimeout для управления количеством запросов, сделанных к нашему API. Это можно было сделать и через реакцию-дебаунс. Но это тоже нормально. Это все с нашим корневым компонентом.

SearchBar.js

Здесь я использовал компонент Автозаполнение от antd. И я заполняю этот компонент автозаполнения 5 видео, которые поступают из API на основе поискового запроса. Круто, мы готовы с панелью поиска с функцией автозаполнения.

VideoList.js

Здесь есть два состояния нашего списка видео: одно, когда список пуст, а другое, когда список заполнен предложениями видео. Вы можете увидеть в приведенном выше коде, как я с этим справился.

VideoListItem.js

VideoDetail.js

Здесь мы просто использовали iframe для воспроизведения видео на YouTube. И использовал пару классов из начальной загрузки, чтобы сделать его отзывчивым.

Вот и все, мы готовы с нашим плеером Youtube.

Теперь хостинг с всплеском

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

Теперь, как разместить приложение create-response-app с помощью всплеска. Сначала вам нужно будет создать производственную сборку.

$ myapp/ yarn build

Это сделает для вас оптимизированную сборку. Каталог сборки войдет в корень вашего проекта. Теперь вы можете использовать всплеск для размещения своего приложения.

$ myapp/ cd build
$ myapp/build/ surge

Ура 🎉 🎉 🎉 🎉. Вы развернули свой собственный проигрыватель YouTube.

Если вам действительно понравилась эта история, пожалуйста, хлопните несколько раз (максимум 50 раз 😃). И за другими подобными историями следуйте за мной.