Разработка жизненного цикла приложения на платформе App с использованием Claude Code
Введение
В условиях быстрого развития технологий сегодня автоматизация каждого возможного шага является ключевой. Этот учебник демонстрирует, как использовать мощь AI-агентов, в частности через Claude Code CLI, чтобы автоматизировать весь жизненный цикл разработки приложений. Настроив серверы MCP для GitHub, платформы DigitalOcean App и управляемого PostgreSQL от DigitalOcean, ваш AI-ассистент сможет понимать сложные инструкции и взаимодействовать с реальными сервисами для создания и развертывания готового к производству приложения.
В этом уроке вы станете свидетелем чего-то необычного: ИИ-агента, который принимает подсказки на естественном языке и преобразует их в полностью функциональное, готовое к производству приложение для управления задачами, развернутое на платформе приложений DigitalOcean.
Никакого кодирования. Никакого сценарного обеспечения. Просто разговор.
Что вы унесете с собой
К концу этого урока у вас будет:
- Готовое к производству приложение для управления задачами, развернутое на DigitalOcean
- Полный репозиторий GitHub с правильной структурой ветвления и рабочим процессом PR
- Автоматизированный CI/CD конвейер
- Опыт в реальном мире с агентным развитием
Почему это важно
Что если вы могли бы описать приложение на простом английском и наблюдать, как его автоматически создают, тестируют и разворачивают?
Именно это вы и испытаете здесь. Вместо того чтобы вручную писать сценарии и настраивать инфраструктуру, вы просто описываете, что хотите — и ИИ строит и разворачивает это за вас, используя реальные инструменты, такие как GitHub и DigitalOcean. Никаких скриптов-склеек. Никакого сопровождения.
Теперь вы можете создать полнофункциональное приложение, готовое к производству, на платформе приложений DigitalOcean, используя всего лишь простые запроса на естественном языке в Claude Code, подключенные к серверам MCP.
🌐 Ссылка на живое приложение: task-manager-app-production
📁 Репозиторий GitHub для приложения, созданного Claude Code: digitalocean-labs/task-manager-app-autodev
MCP гибко интегрируется с Anthropic, и важной частью процесса разработки является уточнение подсказок для эффективного управления моделью. Рассматривайте это как возможность для экспериментов, итераций и формирования выходных данных так, чтобы они соответствовали целям вашего приложения.
Предварительные условия
Чтобы следовать этому руководству, вам понадобятся следующие аккаунты и установленное ПО:
Учётные записи и токены, которые вам понадобятся
-
Аккаунт DigitalOcean
- Активная учетная запись DigitalOcean.
- Личный токен доступа DigitalOcean (PAT) с правами чтения/записи для App Platform (Панель управления -> API -> Личные токены доступа).
Аккаунт GitHub
- Активная учетная запись на GitHub.
Антропный аккаунт
- Активная учетная запись Anthropic с доступом к API
Информация: Подписка на Claude Pro предоставляет 5-часовой период с ограничением по количеству токенов для использования Claude Code. Ожидайте перебоев в контексте подсказки после 5-часового лимита. Поэтому предоставьте предыдущую историю контекста Claude Code для лучших результатов.
Требования к программному обеспечению
-
Node.js и npm: (рекомендуемая версия 18+)
- Требуется для работы серверов MCP.
- Проверьте установку:
node -v,npm -v.
Гит
- Установлено и настроено на вашем локальном компьютере.
git --version.Клод Код CLI
npm install -g claude-code
claude --help.Трехфазное путешествие
Вот как Claude Code автономно создаст ваше приложение:
Этап 1: Основание
Что происходит: Настройка проекта и интеллектуальная декомпозиция задач
- Создает репозиторий GitHub с правильной структурой
- Автоматически анализирует требования к вашему приложению
- Разбивает работу на организованные задачи в GitHub
- Устанавливает профессиональный рабочий процесс Git с стратегией ветвления
Этап 2: Спринт разработки
Что происходит: Завершение реализации функциональности и обеспечение инфраструктуры
- Проектирование базы данных: схема PostgreSQL с моделями Flask-SQLAlchemy
- Бэкенд API: Система аутентификации + полные операции CRUD
- Интерфейс фронтенда: Шаблонизация Flask с пользовательской панелью
- Функции в режиме реального времени: интеграция WebSocket для получения актуальных обновлений
- Облачная инфраструктура: автоматизированная платформа приложений DigitalOcean +Provisioning базы данных
- CI/CD пайплайн: Полный рабочий процесс GitHub Actions (предварительный просмотр, тестирование, продуктивная среда)
Этап 3: Готово к производству
Что происходит: Подготовка релиза и одобрение развертывания
- Создает исчерпывающий журнал изменений с управлением версиями
- Создает запрос на слияние для производственного релиза
- Ваша единственная задача: Просмотреть и одобрить окончательное развертывание.
Искусственные интеллектуальные технологии, которые это делают возможным
-
Клод Код CLI
- Claude Code — это интерфейс командной строки, разработанный компанией Anthropic, который позволяет напрямую взаимодействовать с моделями Claude и поддерживает интеграцию MCP.
- Он предоставляет подкоманду mcp для добавления, перечисления и управления локальными серверами MCP, что делает его идеальной средой для агентного программирования.
Протокол контекста модели (ПКМ)
- Мост, который соединяет Claude Code с реальными инструментами разработчика, такими как GitHub и DigitalOcean, предоставляя вашему AI-агенту возможность взаимодействовать с облачными сервисами.
Платформа приложений DigitalOcean
- Ваше место развертывания — платформа, которая автоматически создает, развертывает и масштабирует ваше приложение без управления серверами.
Настройка окружения и конфигурация сервера MCP
В этом разделе подробно описывается практическая реализация с Claude Code. Убедитесь, что ваши токены API под рукой. Обратитесь к разделу «Предварительные требования» выше, чтобы создать токены API.
Вы добавите каждый сервер MCP в Claude Code. Claude Code затем будет управлять запуском этих процессов Node.js за вас в фоновом режиме, когда это необходимо.
Шаг 1: Установите Claude Code
npm install -g @anthropic-ai/claude-code
Шаг 2: Подключитесь к Github
**Добавьте сервер GitHub MCP с помощью CLI Claude Code: этот сервер будет управлять операциями Git (репозиторий, задачи, запросы на слияние).
claude mcp add --transport http github https://api.githubcopilot.com/mcp -- header "Authorization: Bearer YOUR_GITHUB_PERSONAL_ACCESS_TOKEN"
Замените YOUR_GITHUB_PERSONAL_ACCESS_TOKEN на ваш настоящий токен доступа GitHub. Вы также можете обратиться к документации репозитория для получения дополнительной информации.
Шаг 3: Подключитесь к DigitalOcean
Добавить сервер MCP для DigitalOcean App Platform: Этот сервер будет управлять ресурсами DigitalOcean App Platform (создание приложений, развертывание, логи).
claude mcp add digitalocean-app-mcp -e DIGITALOCEAN_API_TOKEN=YOUR_DO_APP_PAT -- npx @digitalocean/mcp --services apps,databases
- Замените
YOUR_DO_APP_PATна ваш PAT для DigitalOcean App Platform. @digitalocean/mcpявляется официальным сервером MCP для платформы приложений, если используется с флагом —services в качестве приложений.
Вы можете найти больше информации в репозитории интеграции MCP с DigitalOcean.
Шаг 4: Проверьте свою настройку
Проверьте, что оба сервера правильно зарегистрированы:
claude mcp list
Вам следует увидеть:
github— Подключен к удаленному MCP GitHubdigitalocean-app-mcp— Подключено к сервисам DigitalOcean
Этап 1: Основы проекта
Теперь вы будете взаимодействовать с Claude Code, используя подсказки на естественном языке. Claude Code будет использовать свои интегрированные серверы MCP для выполнения ваших запросов.
-
Запустите сессию кода Claude с помощью команды
claude— вы должны увидеть: -
Предоставьте подсказку с подробным контекстом для инициации проекта «Фонд».
Начальное приглашение будет инструктировать Claude Code создать центральный репозиторий GitHub проекта и, исходя из требований приложения, автоматически создать задачи GitHub для каждой основной функции.
Используйте этот запрос (замените
ВАШ_ИМЯ_ПОЛЬЗОВАТЕЛЯ_GITHUBна ваше фактическое имя пользователя):Build a production-ready Task Management Application. Start by setting up the project infrastructure and creating the necessary GitHub issues. Project Details: - Repository Name: task-manager-app-autodev - Owner: YOUR_GITHUB_USERNAME # Replace with your GitHub username or organization - Tech Stack: Flask (backend & frontend), PostgreSQL database, DigitalOcean App Platform. Execution Steps (Phase 1): 1. Create a new GitHub repository named 'task-manager-app-autodev'. (If the repository already exists, inform me and proceed). 2. Analyze the requirements for a comprehensive task management application. 3. Create GitHub issues for the following features in the 'task-manager-app-autodev' repository, providing specific titles and descriptions for each: - Database schema design (with Postgres) - Backend API endpoints (User authentication, CRUD operations) - Frontend components (Flask templating, User dashboard, Auth UI) - Real-time WebSocket implementation - CI/CD pipeline setup 4. Execute the necessary MCP tools to create these issues on GitHub.
Чего ожидать
- Клод будет несколько раз спрашивать: «Разрешить вызовы инструментов к github? (д/н)»
- Всегда нажимайте y и нажимайте Enter
- Вы увидите, как Клод создаст репозиторий и 5 организованных задач.
Проверьте успех
Посетите https://github.com/YOUR_GITHUB_USERNAME/task-manager-app-autodev и проверьте:
- Репозиторий существует
- Вкладка «Проблемы» показывает 5 вопросов по функциям
💡 Полезный совет: Убедитесь, что Claude Code ссылается на репозиторий Github, созданный в процессе, и имя пользователя Github.
Этап 2: Рабочий процесс разработки (Реализация функции)
🎯 Цель:
- Итерация по каждому основному функционалу, моделируя реализацию кода, управляя ветками Git и подготавливая запросы на слияние.
- Этот этап также включает в себя предоставление облачной инфраструктуры (DigitalOcean App Platform и PostgreSQL) и настройку CI/CD пайплайна.
Что вы будете делать: Проведите Клода Код через 5 внедрений функций, используя отдельные подсказки для каждого шага.
Примечание: Каждая секция ниже содержит отдельный запрос, который вы будете передавать Claude Code. Подождите, пока Claude завершит каждый шаг, прежде чем перейти к следующему.
Шаг 1: Реализовать схему базы данных
Здесь мы распорядимся, чтобы Claude Code смоделировал реализацию схемы базы данных, включая операции Git и создание PR. В той же сессии Claude Code предоставьте этот запрос:
The project is now ready for the development phase of the 'task-manager-app-autodev' repository. Initiate Phase 2: Development Workflow. **Instructions:** Start by working on the first feature: 'Database schema design (with Postgres)'. 1. **Create a new feature branch** from the 'staging' branch. Name the branch 'feature/db-schema-design'. 2. **Implement the database schema** using Flask-SQLAlchemy models and necessary migrations. (If you cannot access the code environment directly, provide the completed code for the basic schema models and explain the steps taken.) 3. **Commit the code** changes with a clear message and push the branch to GitHub. 4. **Create a Pull Request (PR)** from 'feature/db-schema-design' to the 'staging' branch, including a description related to this feature. Also compare and pull request - Merge and commit the PR from 'feature/db-schema-design' to the 'staging' branch. Make sure to push the local changes and then create the PR. 5. **Execute the necessary tools** for Git operations (branch creation, commit, push, PR creation). Provide the exact commands or descriptions of the actions taken for each step.
-
Чего ожидать
- Разрешить вызовы инструмента
- Созданы модели базы данных, открыта новая ветка и PR
Подтвердить
- GitHub показывает ветку
feature/db-schema-designи открытый PR
Шаг 2: Реализуйте конечные точки API для серверной части
Здесь мы научим Claude Code имитировать реализацию API на бекенде и создать запрос на внесение изменений:
"The project is ready for the next development task: 'Backend API endpoints' (Issue #2, Authentication and CRUD operations). Continue Phase 2: Development Workflow for the 'task-manager-app-autodev' repository. **Instructions:** 1. **Create a new feature branch** from the 'staging' branch. Name the branch 'feature/backend-api-endpoints'. 2. **Implement the Flask backend API**, focusing on routes for user authentication, task creation, retrieval, updating, and deletion (CRUD operations). (If you cannot access the code environment directly, provide the completed code for the Flask application routes and logic.) 3. **Commit the code** changes with a clear message and push the branch to GitHub. 4. **Create a Pull Request (PR)** from 'feature/backend-api-endpoints' to the 'staging' branch. Also compare and pull request - Merge and commit the PR from 'feature/backend-api-endpoints' to the 'staging' branch. Make sure to push the local changes and then create the PR. 5. **Execute the necessary tools** for Git operations (branch creation, commit, push, PR creation). Provide the exact commands or descriptions of the actions taken for each step. "
-
Чего ожидать
- Созданы маршруты Flask API
- Аутентификация + CRUD конечные точки
Подтвердить
- GitHub показывает ветку feature/backend-api-endpoints и PR
Шаг 3: Реализуйте компоненты фронтенда
Здесь мы инструктируем Claude Code смоделировать реализацию фронтенда и создать PR.
"The backend API implementation is complete. Continue Phase 2: Development Workflow for the 'Frontend components' feature (Issue #3, Flask templating and UI integration). **Instructions:** 1. **Create a new feature branch** from the 'staging' branch. Name the branch 'feature/frontend-components'. 2. **Implement the Flask frontend**, focusing on the user interface for the task list, user dashboard, and authentication using Flask templating (Jinja2). **Integrate this frontend with the existing backend APIs.** (If you cannot access the code environment directly, provide the completed code for the Flask templates and routes.) 3. **Commit the code** changes with a clear message and push the branch to GitHub. 4. **Create a Pull Request (PR)** from 'feature/frontend-components' to the 'staging' branch. Also compare and pull request - Merge and commit the PR from 'feature/frontend-components' to the 'staging' branch. Make sure to push the local changes and then create the PR. 5. **Execute the necessary tools** for Git operations (branch creation, commit, push, PR creation). Provide the exact commands or descriptions of the actions taken for each step. "
-
Чего ожидать
- Клод создает HTML-шаблоны для входа в систему, панели управления и управления задачами.
- Вы увидите шаблоны Jinja2 с формами и списками задач.
- Фронтенд интегрируется с конечными точками API на заднем плане
Проверьте успех:
- Проверьте GitHub: новая ветка feature/frontend-components существует
Шаг 4: Реализация WebSocket в реальном времени
Здесь мы научим Claude Code симулировать интеграцию WebSocket и создать PR:
"The frontend components feature is complete. Continue Phase 2: Development Workflow for the next feature: 'Real-time WebSocket implementation' (Issue #4). Instructions: 1. Create a new feature branch from the 'staging' branch. Name the branch 'feature/websocket-integration'. 2. Implement the WebSocket functionality using Flask-SocketIO or similar libraries to enable real-time updates for tasks and user interactions. (Provide conceptual code for WebSocket setup and event handling.) 3. Commit the conceptual code changes with a clear message and push the branch to GitHub. 4. Create a Pull Request (PR) from 'feature/websocket-integration' to the 'staging'branch. Also compare and pull request - Merge and commit the PR from 'feature/websocket-integration' to the 'staging' branch. Make sure to push the local changes and then create the PR. 5. Execute the necessary tools for Git operations. "
-
Что ожидать:
- Клод реализует Flask-SocketIO для функциональности в реальном времени
- Вы увидите обработчики событий WebSocket для обновлений задач.
- Код включает клиентский JavaScript для сокет-соединений
Проверьте успех:
- Проверьте GitHub: существует новая ветка
feature/websocket-integration
Шаг 5: Настройка CI/CD пайплайна
Здесь мы научим Claude Code моделировать настройку CI/CD пайплайна с использованием GitHub Actions и спецификации приложения DigitalOcean.
Примечание: При запросе у Anthropic создать конвейер CI/CD рабочие процессы создаются успешно, но GitHub Actions могут не сработать, если отсутствуют необходимые секреты репозитория. Добавление этих секретов (таких как DIGITALOCEAN_ACCESS_TOKEN и STAGING_SECRET_KEY) через Настройки репозитория → Секреты и переменные → Действия является необходимым шагом. Рассматривайте это как часть процесса настройки — после конфигурации рабочие процессы могут работать гладко от начала до конца.
"All core features are implemented. Now, let's complete the CI/CD pipeline setup (Issue #5). Instructions: 1. Create a new feature branch from the 'staging' branch. Name the branch 'feature/ci-cd-pipeline'. 2. Implement the CI/CD workflows in GitHub Actions for the 'claude-task-manager-app' repository. This includes: - `preview-app.yml`: Triggered on PRs to `main` (for simplicity). Deploys an ephemeral preview app. - `staging-deploy.yml`: Triggered on merge to `staging`. Deploys to the dedicated Staging environment. - `production-deploy.yml`: Triggered on merge to `main`. Deploys to the Production environment. - `cleanup-preview.yml`: Triggered on PR close. Tears down the ephemeral preview app. 3. Create the DigitalOcean App Platform specification file (`.do/app.yaml`) needed for deployment, defining the Flask service and PostgreSQL database components. 4. Commit these workflow YAML files and the App Spec file with a clear message and push the branch to GitHub. 5. Create a Pull Request (PR) from 'feature/ci-cd-pipeline' to the 'staging' branch.Also compare and pull request - Merge and commit the PR from 'feature/ci-cd-pipeline' to the 'staging' branch. Make sure to push the local changes and then create the PR. 6. Execute the necessary tools for Git operations. "
-
Что ожидать:
- Клод создает 4 файла рабочего процесса GitHub Actions
- Вы увидите полный CI/CD конвейер с предварительным просмотром, тестовой и продукционной средами.
- Файл спецификации приложения (
.do/app.yaml) создается для DigitalOcean Успешная проверка: - Проверьте GitHub: новая ветка
feature/ci-cd-pipelineсуществует - Проверьте GitHub: папка
.github/workflows/содержит 4 файла YAML - Проверьте GitHub: файл
.do/app.yamlсуществует с конфигурацией Flask приложения - PR демонстрирует полную реализацию CI/CD
















Добавить комментарий