Запись [Udemy] Next JS и Open AI / GPT: приложения следующего поколения Next JS и AI (Том Филлипс)

​

Не отставай! Повысьте свою ценность как веб-разработчика уже сегодня, узнав, как интегрировать ИИ в свои проекты!
Добро пожаловать в захватывающий мир приложений Next JS следующего поколения на базе искусственного интеллекта!
В этом курсе мы создадим вымышленный продукт Software-As-A-Service (SAAS) под названием «BlogStandard». Мы создадим «BlogStandard», используя комбинацию Next.js, GPT OpenAI, MongoDB, Auth0, Stripe и Tailwind CSS. BlogStandard позволяет пользователям создавать учетную запись (обрабатывается auth0), покупать токены (обрабатывается Stripe) и тратить эти токены для создания сообщений в блогах с помощью GPT API OpenAI. Токены пользователя и сгенерированные сообщения в блоге будут храниться с использованием MongoDB.
В этом всеобъемлющем онлайн-курсе вы узнаете, как использовать возможности этих передовых технологий для создания быстрого, отзывчивого и динамичного веб-приложения, которое генерирует высококачественные сообщения в блогах с помощью ИИ. Благодаря пошаговым инструкциям вы получите практический опыт работы с каждой из этих технологий, чтобы воплотить свое видение в жизнь.
Во-первых, мы погрузимся в Next.js, популярный фреймворк для создания веб-приложений. Вы узнаете, как создавать быстрые и отзывчивые страницы, управлять маршрутизацией и интегрировать API для создания мощного и динамичного веб-приложения.
Далее мы рассмотрим OpenAI GPT, современную модель генерации языка, и узнаем, как использовать ее для создания высококачественных сообщений в блогах. Вы также узнаете, как интегрировать MongoDB, масштабируемую и гибкую базу данных NoSQL, для хранения и управления данными для нашего приложения.
Кроме того, вы узнаете, как использовать Auth0, мощную платформу управления идентификацией, для аутентификации и авторизации пользователей, а также Stripe, ведущую платежную систему, для обработки транзакций и обработки платежей. Наконец, вы узнаете, как использовать Tailwind CSS, современную структуру CSS, для стилизации и дизайна вашего приложения, воплощая свое видение в жизнь.
К концу этого курса у вас будут навыки и знания, необходимые для создания собственного приложения на основе ИИ и раскрытия всего потенциала ИИ в ваших проектах веб-разработки. И так, чего же ты ждешь? Присоединяйтесь и начните свое путешествие в захватывающий мир приложений Next JS на базе искусственного интеллекта!

Для кого этот курс:
- Разработчики React, которые хотят повысить свою ценность как разработчика, научившись создавать продукты SAAS и начав использовать возможности ИИ.

Чему вы научитесь
- Создавайте собственные продукты SAAS на базе ИИ и Next JS
- Используйте GPT OpenAI для реализации контента, сгенерированного ИИ, в ваших приложениях.
- Аутентифицируйте свои приложения Next JS с помощью Auth0
- Стилизуйте свои приложения Next JS с помощью Tailwind CSS
- Храните данные для ваших приложений Next JS с помощью MongoDB
- Взимайте плату с клиентов, используя полосу

Требования
- Требуется базовое понимание React — все остальное включено!

Спойлер: Материалы курса

8 разделов
39 лекций
Общая продолжительность 4 ч 52 мин

Введение и настройка проекта
- Важный! Прочтите это перед началом курса! - 00:47
- Введение в курс и демонстрация проекта - 03:24
- Настройка проекта - 04:13
- Удеми рейтинги и обзоры - 00:38
- Настройте все необходимые маршруты для нашего приложения - 05:28

Аутентификация и авторизация с помощью auth0
- Настройте auth0 для аутентификации - 07:48
- Установите состояние аутентификации и информацию о пользователе, если вы вошли в систему - 09:25
- Реализуйте защищенные маршруты, которые доступны только при входе в систему - 04:21

Создание макета приложения с помощью Tailwind CSS
- Создайте базовый компонент AppLayout - 05:31
- Реализация боковой панели и стиля с помощью Tailwind CSS - 09:31
- Реализация нижнего колонтитула боковой панели - 05:09
- Создайте заголовок боковой панели и разверните AppLayout для всех соответствующих страниц - 08:28
- Создайте компонент логотипа приложения с помощью Google Fonts и FontAwesome - 08:43
- Создайте домашнюю страницу / главную целевую страницу и завершите заголовок боковой панели - 07:56

Создавайте сообщения в блогах с помощью GPT API OpenAI и храните их в MongoDB
- Настройка нашего проекта для работы с GPT - 11:02
- Уточните приглашение OpenAI и визуализируйте результаты - 09:09
- Передать тему и ключевые слова в конечную точку API generatePost - 07:53
- Настроить MongoDB - 04:53
- Реализовать функциональность добавления токенов и хранить их в MongoDB - 10:27
- Сохраните сгенерированные данные поста в MongoDB - 10:00
- Загрузить данные поста для конкретной страницы поста - 07:54
- Автоматический переход к сообщению после его создания - 06:01
- Визуализировать содержимое поста для конкретной страницы поста - 11:45
- Отображать список доступных постов на боковой панели - 15:17

Внедрение страйп-платежей
- Настроить полосу - 12:41
- Реализовать чередующиеся веб-хуки - 14:50

Обновление стилей, исправления и проверка данных
- Fix Font Awesome мигает массивным значком при загрузке в производстве - 01:42
- Обновления стилей и значок загрузки - 09:26
- Проверка данных формы при создании новых сообщений - 08:21

Реализовать "загрузить больше сообщений" и удалить сообщение
- Создать контекст сообщений и получить первые 5 сообщений - 11:49
- Создать конечную точку getPosts - 12:23
- Скрыть кнопку «Загрузить больше сообщений» и исправить исчезающие сообщения на боковой панели - 03:51
- Исправить сообщения на боковой панели при начальной загрузке сообщения - 06:41
- Создать конечную точку deletePost - 04:33
- Создайте пользовательский интерфейс удаления сообщения и вызовите конечную точку удаления сообщения - 08:23
- Удалить сообщение с боковой панели - 03:42
- Рефакторинг публикует контекст, чтобы использовать редьюсер вместо состояния - 06:20

Развертывать
- Развертывание в DigitalOcean - 11:47
- БОНУС!

Курс на английском языке