· Tutorials · 5 min read
От идеи до развёрнутого приложения — полное пошаговое руководство по Borchani
Пошаговое руководство по созданию и развёртыванию реального приложения с помощью Borchani — от первого промпта до рабочего URL. Без сокращений и лишнего — только то, что происходит на самом деле.
Лучший способ понять инструмент — увидеть, как его применяют на реальной задаче. В этом руководстве мы создадим приложение для управления задачами с нуля: трекер проектов с несколькими списками задач, видом канбан-доски и полем для участников команды — и развернём его по рабочему URL. Весь процесс занимает около 45 минут при первом запуске и 15 минут, когда вы уже делали это раньше.
Проект: трекер проектов на основе канбан
Вот что мы создаём:
- Боковая панель со списком проектов
- Канбан-доска для активного проекта с тремя колонками: Backlog, In Progress, Done
- Карточки задач с заголовком, описанием, исполнителем и сроком выполнения
- Перетаскивание карточек между колонками
- Модальное окно для создания и редактирования задач
- Переключатель тёмного режима
Это настоящее приложение, а не игрушка. Им можно реально пользоваться, и в нём достаточно сложности, чтобы показать, что Borchani умеет и чего нет.
Шаг 1: Напишите первый промпт
Откройте Borchani и введите первое сообщение. Вот точный промпт, использованный в этом руководстве:
Build a project management app. On the left, a sidebar with a list of project names. I should be able to click a project to open it. The main area shows a kanban board with three columns: Backlog, In Progress, and Done. Each column has task cards. Each task card shows the task title, an assignee name, and a due date. Cards should be draggable between columns. There should be a button to add a new task, which opens a modal with fields for title, description, assignee, and due date. Include a dark mode toggle in the top right corner. Use a clean, professional design.
Это хороший промпт, потому что в нём указаны: основная структура, модель данных (какие поля есть у задачи), взаимодействия (перетаскивание, модальное окно, тёмный режим) и эстетическое направление.
Чего не стоит делать: Не пишите одно предложение вроде «сделай мне менеджер проектов». Вы получите что-то расплывчатое и потратите на исправления больше времени, чем если бы сразу написали подробный промпт.
Шаг 2: Наблюдайте за сборкой
После отправки Borchani начинает генерацию. В первые 30 секунд или около того вы увидите:
- Настройку каркаса проекта (Vite config, TypeScript paths, Tailwind config)
- Создание основного компонента макета — боковая панель + область контента
- Компонент боковой панели с жёстко заданным списком примеров проектов
- Структуру канбан-доски с тремя колонками
Живой предпросмотр обновляется в реальном времени. Через две минуты у вас должно быть нечто, узнаваемо похожее на инструмент управления проектами — даже если он ещё не завершён.
Не прерывайте генерацию, если только что-то явно идёт не так. Дайте первой генерации завершиться. Соблазн вмешаться велик, но у ИИ есть план, а частичные прерывания могут его сбить.
Шаг 3: Первый раунд обратной связи
После первоначальной генерации критически оцените предпросмотр. В этом руководстве потребовалась корректировка трёх вещей:
Перетаскивание не работало. Карточки отображались корректно, но перетаскивание фактически не перемещало их между колонками. Это распространённый крайний случай при управлении состоянием. Исправьте его с помощью: “The drag and drop between columns isn’t working. When a card is dropped in a different column, it should move there and persist in the new position.”
Модальное окно задачи не закрывалось при клике за его пределами. Мелочь, но раздражает. Исправление: “The task creation modal should close when clicking outside of it.”
Боковая панель выглядела тесной на меньших экранах. Исправление: “Make the sidebar collapsible on screens smaller than 768px with a hamburger button to open and close it.”
Каждое из этих исправлений заняло одно сообщение. ИИ применил их, не затронув части приложения, которые уже работали.
Шаг 4: Наполните реалистичными тестовыми данными
Сгенерированные приложения часто приходят с текстом-заполнителем, который мешает оценить дизайн. Запросите лучшие тестовые данные: “Replace the placeholder content with realistic sample data. Create three projects: ‘Mobile App Redesign’, ‘Q2 Marketing Campaign’, and ‘Backend API Migration’. Each project should have 5-8 tasks distributed across the three columns with realistic titles, assignee names, and due dates in the next 30 days.”
Это существенно меняет то, как вы оцениваете приложение. Видя «Build authentication flow» вместо «Task 1», вы замечаете проблемы интерфейса, которые проявляются только с реалистичным содержимым (переполнение длинного текста, форматирование дат, усечение имён и т. д.)
Шаг 5: Полировка
Когда основная функциональность заработает, несколько проходов полировки:
- Пустые состояния: “When a column has no tasks, show a helpful empty state message instead of just blank space.”
- Состояния загрузки: “Add a subtle loading skeleton when the page first loads.”
- Горячие клавиши: “Pressing Escape should close the task modal.”
- Адаптивность: “Check the layout on a 375px mobile screen and fix anything that looks broken.”
Каждый из этих пунктов занял одно сообщение и пару минут на применение.
Шаг 6: Экспорт в GitHub
Когда вы довольны приложением, нажмите кнопку экспорта в GitHub. Вас попросят авторизовать Borchani для создания репозитория в вашем аккаунте GitHub. Будет создан новый репозиторий с полным исходным кодом, правильным README и чистым начальным коммитом.
Структура сгенерированного проекта выглядит следующим образом:
src/
components/
Sidebar.tsx
KanbanBoard.tsx
TaskCard.tsx
TaskModal.tsx
DragDropContext.tsx
hooks/
useProjects.ts
useTasks.ts
types/
index.ts
App.tsx
main.tsxКаждый компонент находится в отдельном файле, правильно типизирован и использует React hooks для управления состоянием. Код читаем. Разработчик может взять его и расширить, не разбираясь в том, как работает Borchani.
Шаг 7: Развёртывание
Из репозитория GitHub развёртывание — это одна кнопка в Vercel:
- Перейдите на vercel.com/new
- Импортируйте репозиторий GitHub
- Vercel автоматически определит его как проект Vite
- Нажмите Deploy
Примерно через 45 секунд у вас есть рабочий URL.
Стоимость этого руководства
В этом руководстве использовалось около 12 кредитов — начальная генерация, три исправления ошибок, запрос тестовых данных и несколько проходов полировки. На тарифе Starter ($19/месяц, 150 кредитов) вы можете создавать что-то подобное десять раз в месяц. На Pro ($49/месяц, 500 кредитов) — значительно больше.
Что вы на самом деле освоили
Механика проста. Навык — в составлении промптов. Хорошее первоначальное описание избавляет вас от четырёх раундов переписки. Понимание того, когда прерывать генерацию, а когда дать ей завершиться, экономит время. Умение описывать желаемое визуально и функционально — а не технически — вот в чём реально состоит кривая обучения.
Начните с того, что вам действительно нужно. Обратная связь будет полезнее, а мотивация довести дело до конца — выше.
