Transcription
Всем привет. Сегодня мы создадим это приложение для транскрипции YouTube. Мы будем использовать Superbase для аутентификации и серверных служб. У приложения два плана: бесплатный и про. Пользователь просто вводит URL YouTube, и приложение мгновенно транскрибирует видео. Вы можете скачать транскрипцию в предпочитаемом формате. Мы также добавили ограничение скорости, поэтому, как только бесплатные кредиты будут использованы, приложение попросит пользователя перейти на про-план. А с помощью Stripe мы реализовали платежи по подписке. Это платформа, которую мы будем использовать для создания нашего приложения, хостинга Horizons. С помощью этого вы можете создавать полностью функциональные веб-сайты и веб-приложения, просто общаясь с ИИ, и развертывать их одним кликом. Вы можете просто ввести свой запрос и нажать кнопку "Начать бесплатно", и Horizons сгенерирует все для вас. Также есть бесплатные готовые шаблоны, которые вы можете выбрать и начать редактировать. По сути, это универсальная платформа, управляющая кодом, дизайном, контентом, SEO-тегами, интеграциями Stripe и Superbase, быстрым развертыванием, управлением доменами, электронной почтой — всем в одном месте. Как только вы создадите свою учетную запись Hostinger, просто перейдите на hostinger.com/horizons. Здесь вы можете загрузить изображение или использовать микрофон для разговора. Используйте любой вариант, который вам удобен, но я введу свой запрос напрямую. Сначала я вставляю свой первоначальный запрос: "создать приложение для транскрипции YouTube". Пользователь вставляет ссылку на YouTube. Приложение преобразует видео в транскрипцию и позволяет пользователю скачать ее в виде файла TXT или JSON. Для транскрипции нам нужен API. Я использую Rapid API, хаб API с более чем 80 000 API в различных категориях. Я ищу API для транскрипции YouTube. Есть много вариантов, но я выбираю этот. Он имеет рейтинг 9,9 и солидные бесплатные лимиты. Здесь вы также можете переключить язык программирования и получить библиотеки. Нажмите кнопку "Подписаться на тест". Здесь вы можете увидеть план "0". Бесплатно и без необходимости указывать карту. Вы платите только в том случае, если превысите лимит. Теперь API подписан. Теперь мы можем протестировать API. Как видите, мы получаем статус 200, и транскрипция возвращается. Теперь мы можем скопировать фрагмент кода. Затем мы говорим Horizons использовать Rapid API и вставляем скопированный код. Далее мы копируем пример ответа. Вы можете использовать показанный здесь пример ответа или фактический ответ, который мы получили от теста API. Я скопирую ответ, который мы получили, и предоставлю его тоже. Это помогает Horizons понять точную структуру данных, поступающих из API, чтобы он мог генерировать лучший код и правильно обрабатывать ответ. Итак, я собираюсь отправить весь этот запрос сейчас. Прежде чем начать, вот мои кредиты. У меня их сейчас 398. Я собираюсь создать полное приложение, и оно будет использовать всего три кредита. Я уже использовал один. Так что после завершения этого запроса он уменьшится на один, то есть станет 397. Затем я использую еще два кредита для шагов Superbase и Stripe. Бесплатные кредиты также доступны, так что вы можете попробовать все сначала. Как только это покажется вам подходящим, вы можете перейти к плану ценообразования. Есть четыре разных плана, и каждый из них уже включает скидку. Если вы используете мой промокод cap 10, вы получите дополнительную скидку 10%. Вы можете выбрать любой план, который вам нравится, но я рекомендую стартовый план, который дает вам 70 кредитов в месяц. Horizons работает над созданием фронтенда. Поэтому одновременно я покажу варианты интеграции. У нас есть Superbase, который мы будем использовать для аутентификации, хранения данных и серверных функций. Далее идет опция онлайн-магазина. Эта опция впечатляет. Она может создать полноценную панель администратора электронной коммерции одним кликом без запросов. Она настраивает все для управления продуктами, заказами, платежами и многим другим. Далее идет аналитика. После развертывания веб-сайта вы можете отслеживать просмотры веб-сайта и связанные с ними метрики. И последнее — интеграция Stripe для подписок на платежи. Для этого приложения мы будем использовать как Superbase, так и Stripe. И у нас также есть опция чата с ИИ, где вы можете задавать вопросы об услугах или любых других проблемах. Вы можете видеть, что ИИ закончил работу. Он создал все компоненты React. Он также упоминает один шаг, который нам нужно сделать перед проверкой приложения. Нам нужно предоставить API-ключ внутри этого файла компонента. Мы уже вставили ключ ранее, но из соображений безопасности Horizon пропустил его. Поэтому я добавил его снова. Но это небезопасно, потому что это фронтенд-приложение, и ваш API-ключ будет раскрыт. Именно поэтому мы будем интегрировать серверные службы Superbase. Пока что мы оставим это здесь. У нас также есть опция предварительного просмотра на мобильных устройствах, где вы можете проверить ответ. И есть опция редактирования контента в реальном времени, где вы можете выбрать любой контент и изменить его. И это не использует никаких кредитов. В предварительном просмотре кода вы можете увидеть весь код, а также скачать его локально. Этот фронтенд создан с использованием ReactJS и Tailwind CSS. Теперь давайте перейдем и проверим приложение. Я возьму один из моих URL-адресов видео на YouTube, вставлю его сюда и нажму кнопку "Получить транскрипцию". Вы можете видеть, что мы получили транскрипцию, что означает, что Rapid API работает, и наше фронтенд-приложение тоже работает. И здесь для этого видео Google Code Wiki транскрипция приходит правильно. Это не статические данные. Отлично. Наконец, у нас также есть опции загрузки в формате JSON и текстовом формате. Отлично. Далее мы интегрируем Superbase в это приложение. Я создам новый проект. Теперь выберите свою организацию. Создайте проект и установите пароль для базы данных. После создания проекта вернитесь в Horizon и снова откройте опцию интеграции Superbase. Теперь вы увидите новый проект в списке. Просто нажмите кнопку "Подключить", и Horizons автоматически подключит Superbase к нашему приложению. Как и раньше, подключение не уменьшит количество кредитов. Теперь я вставлю этот запрос: "переместить вызов транскрипции Rapid API в функцию Superbase edge и подключить аутентификацию по электронной почте". Я отправлю этот запрос, и это использует наш второй кредит. Менее чем за минуту он выполнил обе задачи. Он также показывает, что было изменено и создано. Во-первых, ключ Rapid API теперь надежно хранится в среде Superbase, поэтому он больше не раскрывается в коде фронтенда. Отлично. Во-вторых, были созданы новые функции edge для транскрипции, поэтому получение теперь происходит на стороне сервера. В-третьих, пользователи должны войти в систему перед доступом к инструменту транскрипции. Отлично. И, наконец, он создал страницы пользовательского интерфейса для входа и регистрации. Посмотрите, как четко все объясняется. Как и раньше, чтобы проверить приложение, нам нужно сделать еще один шаг. Нам нужно перейти к функции Superbase edge и добавить ключ Rapid API в переменные среды. Здесь вы можете увидеть функцию edge, которую Horizon создал для нас, и вы можете просмотреть весь код этой функции. Он извлекает API-ключ из среды Superbase. Поэтому я перехожу на вкладку "Секреты". Я заметил, что Horizon уже добавил API-ключ. Иногда он добавляет его автоматически. Так что просто проверьте его один раз. Еще кое-что: прежде чем регистрироваться в вашем приложении, отключите опцию подтверждения электронной почты, потому что письмо для проверки будет пытаться отправить на localhost. Как только вы перенесете свое приложение в продакшн, вы сможете снова включить эту опцию. Я создам учетную запись, используя свою электронную почту. И отлично, мы вошли в систему. Чтобы проверить это, перейдите на вкладку пользователей Superbase и обновите таблицу. Вы увидите пользователя, которого мы только что создали. Отлично. Аутентификация работает. Далее я хочу показать, как выполняется вызов API транскрипции. Я снова транскрибирую видео. Здесь вы можете видеть запрос API. Просто откройте его. Вы можете видеть конечную точку, вызывающую функцию Superbase, вместе с токеном пользователя. Отлично. Это означает, что наше приложение полностью безопасно. Здесь вы можете видеть, что у меня 396 кредитов. Мы использовали два кредита до сих пор. Далее мы интегрируем Stripe для подписок на платежи. Теперь откройте руководство по Stripe. Оно очень полезно. Мы начнем с этого шага. Сначала вам нужно создать учетную запись. И я уже создал свою. Далее нам нужно настроить поток подписки. Откройте страницу каталога продуктов и добавьте название вашего плана, например "Pro Plan". Я следую тому же процессу. Я создам новый план с суммой и установлю его на ежемесячное продление. После создания вам нужно скопировать идентификатор цены. Вы можете найти его в разделе журнала. Это наш идентификатор цены, так что просто скопируйте его. Теперь я возвращаюсь в Horizons и ввожу запрос для настройки подписок Stripe как для бесплатных, так и для про-планов. Бесплатный план будет иметь три кредита для транскрипции, а про-план будет иметь 50 кредитов в месяц. Далее я вставлю идентификатор цены, который я скопировал ранее. После этого нам нужен публичный ключ и секретный ключ. Оба вы найдете на странице разработчиков Stripe. Поэтому я просто скопирую и вставлю их в Horizons. Затем я упомяну, что нам также нужно настроить функцию edge для Stripe. Таким образом, все вызовы API, связанные со Stripe, выполняются на стороне бэкенда. Horizons будет следовать этим шагам и создаст безопасную платежную настройку. ИИ завершил работу и показывает, что готово сейчас. Далее нам нужно проверить, были ли добавлены ключи Stripe в Superbase. У меня ключи уже были добавлены. Теперь нам нужно настроить еще один ключ — секретный ключ веб-хука Stripe. Веб-хук отслеживает все события Stripe, такие как успешная оплата, неудача и другие обновления. Функция edge "create checkout session" используется для инициализации страницы оформления заказа. И у нас также есть функция edge "Stripe webhook". Она вызывается после успешной или неудачной оплаты. Здесь мы обновляем учетную запись пользователя до статуса "pro". Поэтому сначала нам нужно скопировать URL этой функции. Далее мы создаем новое событие веб-хука. Пока что выберите все события и просто пройдите по шагам. В поле "URL конечной точки" вставьте URL функции. Я добавил URL дважды. Затем нажмите "Добавить назначение". Теперь скопируйте первый ключ секретного кода подписи, потому что именно он отслеживает все события. Теперь перейдите к ключу среды веб-хука Superbase и вставьте этот ключ секретного кода подписи. Вот и все. На вкладке "События Stripe" вы можете видеть все происходящие события. Еще кое-что в Superbase. Он создал новую таблицу профилей для отслеживания статуса платежей и кредитов пользователя. Сейчас она пуста. Поэтому нам нужно создать нового пользователя. Я создам нового пользователя для нашего приложения. Вы можете видеть, что у этого пользователя три кредита, потому что мы на бесплатном плане. Поэтому я быстро использую свои три кредита, нажав кнопку "Отправить" три раза. В то же время вы можете видеть, как уменьшаются кредиты. Теперь мы использовали все кредиты. И если я отправлю еще раз, он попросит оплату. Также появляется ошибка "Недостаточно кредитов". Отлично. Система ограничения скорости работает идеально. Поэтому я подписываюсь на про-план. Теперь страница оформления заказа Stripe загружается нормально, и я ввожу номер тестовой карты, срок действия и тестовый код CVC, а также имя держателя карты. После ввода всего нажмите "Подписаться". Платеж обрабатывается. Бум. Оплата завершена. И теперь вы можете видеть, что мы на про-плане с 50 кредитами. И все работает нормально. Здесь вы можете видеть мои кредиты. Мы начали с 398, а теперь у нас 395. Это означает, что все — фронтенд, бэкенд, аутентификация и платежи — было создано всего за три кредита. И если вы хотите, вы можете использовать еще несколько кредитов, чтобы добавить дополнительные функции, такие как хранение истории транскрипций или даже создание панели администратора для управления. И если вы хотите опубликовать приложение, просто нажмите кнопку "Опубликовать". Это займет всего несколько секунд, и бум, приложение развернуто. Вы можете сразу же поделиться ссылкой с другими. Один клик, и оно в сети. Отлично. И если вам нужен пользовательский домен, вы можете получить его прямо из Hostinger. Так что, по сути, все в одной платформе. Создание, развертывание и мониторинг вашего приложения. Итак, в итоге мы создали безопасное полнофункциональное приложение с транскрипцией, входом в систему, ограничением кредитов, подписками Stripe и живым развертыванием — все внутри Horizons. Вы получаете создание, развертывание, мониторинг и домены в одном месте. Попробуйте и посмотрите, сколько вы можете создать. И не забывайте, используйте мой промокод cap 10. Спасибо за просмотр.