Урок 10. Практический проект: веб-приложение (CRUD)
CRUD (Create, Read, Update, Delete) — основа любого веб-приложения. В этом уроке вы создадите полноценное приложение: просмотр списка контактов, добавление нового, редактирование и удаление. Frontend + Backend + Database — всё с помощью ИИ.
Описание темы
CRUD — базовые операции практически любого веб-приложения: Create (создать), Read (прочитать), Update (обновить), Delete (удалить). Например: в Instagram создание поста (Create), просмотр (Read), редактирование (Update), удаление (Delete). Освоив этот паттерн — вы сможете построить любое приложение.
В этом уроке мы создаём приложение 'Список контактов': добавление нового контакта, просмотр всех контактов, редактирование данных и удаление контакта. Просто, но включает все ключевые концепции.
Стек технологий: React (frontend — то, что видит пользователь), Express.js (backend — серверная логика), и JSON-файл или SQLite (database — хранение данных). ИИ создаёт все части и обеспечивает их совместную работу.
Важная концепция: frontend и backend работают отдельно. Frontend — в браузере, backend — на сервере. Они общаются через API (HTTP-запросы). ИИ знает эту архитектуру и создаёт правильную структуру.
Что вы получите из этого урока
- Практическое освоение CRUD-операций
- Создание динамического UI (пользовательского интерфейса) с React
- Написание простого API-сервера на Express.js
- Понимание интеграции Frontend и Backend
- Изучение хранения и извлечения данных (persistence)
- Создание и тестирование полноценного веб-приложения
Углублённое объяснение
CRUD-паттерн — основа почти всех коммерческих приложений: CRM-системы (управление клиентами), системы инвентаризации (товары), блог-платформы (статьи), e-commerce (заказы) — всё это CRUD. Освоив паттерн один раз, вы применяете его в любой сфере.
Архитектура Frontend-Backend: Frontend (React) — то, что пользователь видит и с чем взаимодействует. Он отправляет HTTP-запросы к API (через fetch или axios). Backend (Express) — принимает запросы, работает с базой данных и возвращает ответ. Это разделённая архитектура (separation of concerns) — стандарт в реальных проектах.
Выбор базы данных: в этом уроке используем JSON-файл (простейший вариант для обучения). Для реальных проектов: SQLite (бесплатная, локальная), PostgreSQL (масштабируемая, надёжная), MongoDB (документоориентированная). ИИ знает все — укажите в промпте какую базу использовать.
Следующий шаг: на основе этого CRUD-приложения можно добавить авторизацию (login/register), разграничение ролей (admin/user), загрузку файлов, пагинацию и поиск. Для каждой новой функции напишите отдельный промпт для ИИ. Так простой CRUD постепенно вырастает в полноценную SaaS-платформу.
Готовый шаблон промпта
Скопируйте и адаптируйтеСоздай полноценное CRUD веб-приложение. Тема: Управление контактами. Стек: React + TypeScript (frontend), Express.js (backend), JSON-файл (database). Функциональность: 1) Просмотр всех контактов (таблица), 2) Добавление нового контакта (форма: имя, телефон, email), 3) Редактирование контакта (модальное окно), 4) Удаление (с подтверждением). API endpoints: GET /api/contacts, POST /api/contacts, PUT /api/contacts/:id, DELETE /api/contacts/:id. Структура проекта: /client (React), /server (Express). npm scripts: dev (запуск обоих одновременно).
Почему это работает
Стек: 'React + TypeScript + Express.js + JSON' — полный набор технологий определён
Функциональность: 4 CRUD-операции чётко указаны
API дизайн: 'GET, POST, PUT, DELETE' — соответствует стандарту REST API
Структура: '/client, /server' — frontend и backend в отдельных папках
DX: 'npm scripts: dev' — удобство запуска
Практическое задание
- Создайте новую папку: 'contacts-app' и откройте в Cursor
- В Agent mode введите промпт выше
- Просмотрите все файлы, созданные Agent
- В терминале: npm install (в обеих папках) и npm run dev
- Откройте localhost:3000 в браузере — протестируйте приложение
- Добавьте новый контакт, отредактируйте и удалите
- В Chat попросите: 'Добавь функцию поиска — фильтрация по имени'
- Проверьте результат и убедитесь что работает
Частые ошибки
- Одинаковые порты для frontend и backend — обычно frontend :3000, backend :4000
- Забыть настройку CORS — в Express нужно добавить cors() middleware
- Пропустить валидацию данных — пустое имя или некорректный email должны проверяться
- Не показывать состояния ошибок — для загрузки, ошибки и пустого состояния нужен отдельный UI
- Не тестировать API отдельно — проверьте API через Postman или curl
Вопросы и ответы по уроку
JSON-файл надёжен как база данных?
Для обучения и маленьких проектов — достаточно. При 100+ пользователях или частой записи — переходите на SQLite или PostgreSQL. ИИ поможет с миграцией.
Можно ли использовать другой фреймворк вместо React?
Да. Vue, Svelte или даже vanilla JavaScript — с любым можно создать CRUD. ИИ знает все — укажите фреймворк в промпте.
Можно ли разместить это приложение в интернете?
Да. Frontend — на Vercel/Netlify, Backend — на Railway/Render. Всё в рамках бесплатных планов. В следующем уроке подробно разберём деплой.