В первом проекте мы сосредоточились на фронтенде, создав персональный сайт-портфолио. Теперь мы сделаем следующий шаг в направлении full-stack разработки - создадим полноценное веб-приложение с серверной частью, способной хранить и обрабатывать данные.
Что вы создадите:
Вы разработаете Менеджер Промптов - веб-приложение для хранения, организации и управления часто используемыми ИИ-промптами. С его помощью вы сможете:
Просматривать список сохранённых промптов
Добавлять новые промпты с названием, описанием и содержимым
Редактировать существующие промпты
Удалять ненужные
Быстро копировать промпты в буфер обмена
Понимание бэкенда:
В портфолио-проекте мы просто отображали информацию. В этом проекте нужно сохранять данные, которые не исчезнут после перезагрузки страницы. Это и есть задача бэкенда - серверной части приложения.
Бэкенд - часть веб-приложения, работающая на сервере. Она обрабатывает данные, выполняет логику и взаимодействует с базой данных.
База данных - организованное хранилище информации (в данном случае - ваших промптов).
Full-Stack - приложение, включающее как клиентскую (интерфейс), так и серверную часть (данные, логика).
Технологический стек:
Мы будем использовать современные технологии как на фронтенде, так и на бэкенде:
Фронтенд:
React - для создания интерфейса из компонентов
Next.js - фреймворк, предоставляющий маршрутизацию, рендеринг и серверные действия
Tailwind CSS - утилитарный CSS-фреймворк для быстрой стилизации
PostgreSQL - мощная реляционная база данных с открытым исходным кодом
Supabase - платформа для быстрого развёртывания и управления PostgreSQL в облаке
Drizzle ORM - TypeScript-инструмент для работы с базой данных без прямого написания SQL, с поддержкой типизации
Чему вы научитесь:
Как работает клиент-серверная модель
Настройка облачной базы данных через Supabase
Определение структуры таблиц с помощью Drizzle
Проведение миграций базы данных
Первичная инициализация базы (seeding)
CRUD-операции (создание, чтение, обновление, удаление) через Drizzle ORM
Реализация Next.js Server Actions для обработки данных на сервере
Связывание интерфейса с данными из базы, включая загрузку и обновление состояния
Полный цикл создания full-stack приложения
Посмотреть больше
Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай
Full-Stack Fundamentals 2 - Backend,
а также все другие курсы, прямо сейчас!
Я создаю и обучаю технологиям в сфере искусственного интеллекта и являюсь основателем Takeoff. В 2019 году я бросил колледж, чтобы учиться программированию. Начал экспериментировать с проектами в области искусственного интеллекта в 2020 году, когда появился GPT-3. Стал первым, кто создал монетизированный продукт с использованием OpenAI API в том же году. С тех пор занимаюсь разработкой продуктов на основе искусственного интеллекта.
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
В рамках этого проекта вы создадите свой личный сайт-портфолио с нуля. Это будет отличным способом продемонстрировать свои работы по мере того, как вы продолжаете изучать разработку программного обеспечения с применением ИИ.
Основы Full-Stack разработки 3: Аутентификация и авторизация
Full-Stack Fundamentals 3 - Auth
В предыдущем проекте мы создали рабочее приложение - Prompt Manager, освоив ключевые принципы full-stack разработки с использованием Next.js, Supabase и Drizzle. Теперь мы усилим это приложение важнейшей функцией - аутентификацией пользователей.
В предыдущем разделе мы успешно реализовали аутентификацию пользователей с помощью Clerk. Теперь на основе этого проекта мы добавим приём онлайн-платежей с помощью Stripe. Это позволит нам внедрить различные уровни подписки (например, тариф "Pro") и ограничивать доступ к функциям в зависимости от статуса пользователя.