Автоматическое создание красивых превью и встраивание ссылок
В этом руководстве по компонентам Flask + React мы собираемся углубиться в создание превью ссылок. Предварительный просмотр ссылок обычно используется в социальных сетях в качестве украшения, чтобы сделать обычные URL-адреса более привлекательными, чем типичный текст с подчеркиванием синего цвета.
Если вы хотите узнать, как создавать более крутые компоненты, обязательно ознакомьтесь с Учебником Infinite Grid with Unsplash!
А если вам нужно было узнать, как создать свой проект Flask + React с нуля, вы можете найти пошаговое руководство здесь.
Начиная
Для этого урока мы собирались немного схитрить, используя сервис под названием Microlink. Microlink бесплатно предоставляет парсинг OpenGraph, предварительный просмотр ссылок и встраивание компонентов, а также множество других услуг. Вместо того, чтобы тратить время на то, чтобы воспроизвести его, наша жизнь станет намного проще, если мы просто будем использовать его сами.
Однако есть две проблемы, с которыми нам придется иметь дело:
- Их конечная точка может быть непоследовательной и иметь очень высокую задержку (иногда до ~ 20 секунд!)
- Если вы используете платный уровень, вам необходимо передать ключ API во внешний интерфейс, что является большим запретом для общедоступных приложений.
Мы можем обойти эти проблемы, используя Python для выполнения запроса на серверной части и возврата значений. Все, что нам нужно сделать, это убедиться, что запрос отправляется на наш собственный сервер, а не на их.
В большинстве случаев я стараюсь избегать переписывания пакетов. Если вы сделаете сдвиг, может возникнуть минное поле с непредвиденными и непредвиденными последствиями, и вы должны попытаться избежать этого сами. Однако в этом случае, помимо переписывания всего с нуля, переключение должно быть довольно простым.
Я определил константу, которая содержит конечные точки API Microlink, и заменил их своими собственными в качестве локального хоста (в app\static\node_modules\@microlink\mql\src\factory.js)
Теперь, когда запросы от компонента направлены на наш собственный бэкенд, мы можем создать конечную точку, которая реплицирует их собственные.
Отдых
Воссоздать конечную точку на самом деле довольно просто. Поскольку компонент использует тот же API, что и тот, который мы запрашиваем с помощью Python, возвращаемые им результаты будут точно такими же. Таким образом, нам не нужно будет вносить какие-либо изменения в ответ, и мы можем просто передать его напрямую. (в app/main/views.py)
Эта конечная точка извлекает запрошенный URL-адрес, который передается в качестве аргумента запроса. Затем мы создаем словарь для других параметров, которые могут присутствовать. Я создал запись iFrame второй, чтобы показать, как вы можете убедиться, что запросы выстраиваются в линию, но для моих собственных целей я знаю, что всегда буду хотеть, по крайней мере, видео и аудио сайта.
Поскольку вызов использует библиотеку запросов, обязательно установите ее.
запросы на установку pip
Хотя я лично использую профессиональную версию (я делаю эти компоненты совсем немного), есть также бесплатный уровень с ограничением в 50 звонков в день. Вам просто нужно будет изменить поддомен «pro» запроса на «api» и удалить заголовки.
Теперь наша конечная точка примет запрос от компонента Microlink и вернет все необходимые данные в формате JSON, чтобы заполнить поля.
Интерфейсный компонент
Следующим шагом будет создание нашего внешнего компонента.
Чтобы позволить пользователю использовать предварительный просмотр ссылки, мы должны разрешить какой-либо ввод. В учебнике Infinite Grid мы использовали текстовое поле из Material-UI для нашей панели поиска, и мы будем использовать его снова. Вы можете установить Material UI с помощью:
npm я @material-ui/ядро
npm я @material-ui/icons
Наш базовый компонент будет выглядеть так (в app/static/src/LinkPreview.jsx)
В этой функции уже довольно много чего происходит, поэтому мы разберем все это.
Наше поле ввода отслеживает изменения с помощью события onChange и обрабатывает эти изменения с помощью функции handleChange. Затем handleChange применяет регулярное выражение, чтобы определить, содержит ли ввод то, что можно считать URL-адресом. Поскольку URL-адреса бывают разных форм и размеров (очень немногие люди тратят время на ввод «https://», даже если этого требует наш API), функция добавит его. Когда это подходящее совпадение найдено и правильно отформатировано, оно устанавливается в качестве входной переменной. Затем это значение передается компоненту Microlink, который отправляет запрос нашему бэкенду и отображается на странице.
Отскок-Отказ
Как вы можете себе представить, есть способы, которыми наш пользователь в конечном итоге отправит больше запросов к серверной части, чем мы изначально планировали (.co, .com), поэтому, поскольку большинство пользовательских входных данных приводят к вызовам API, мы должны отменить наш ввод и Запросы. Мы создадим собственный хук для устранения дребезга, который будет ждать определенное время после обнаружения последнего ввода (в app/static/src/debounce.jsx).
Затем мы будем использовать этот хук для устранения дребезга в нашем компоненте LinkPreview (в app/static/main/LinkPreview.jsx).
Почему у карандашей есть ластики
Люди делают ошибки.
Или, может быть, пользователи решат, что хотят увидеть более одного предварительного просмотра. Прямо сейчас, когда компонент отображается, он будет сохраняться до тех пор, пока не будет найден другой действительный URL-адрес.
Что было бы предпочтительнее, так это то, что предварительный просмотр исчезал бы, когда пользователь использует клавишу Backspace для ввода. Мы можем использовать событие onKeyUp для отслеживания этого конкретного ввода (event.keycode === 8) и установить для нашего ввода значение null. После устранения дребезга входных данных предварительный просмотр будет удален (вспомните наш условный рендеринг компонента Microlink с помощью !!debouncedQuery) (в app/static/src/LinkPreview.jsx )
Загрузка…
В качестве последнего штриха мы должны добавить компонент загрузки между моментом получения ввода и моментом его устранения (в app/static/src/LinkPreview.jsx).
Законченный
И с этим мы закончили!
Хотя нам еще предстоит проделать некоторую работу по увеличению скорости запросов и расширению функциональности компонента (например, разрешение нескольких URL-адресов), у нас есть основа того, что нам нужно.
Как всегда, спасибо за чтение, и обязательно подпишитесь и проверяйте, когда в следующий раз мы приступим к реализации некоторых из этих улучшений!
