Создайте первое приложение
В этом руководстве с нуля создаётся менеджер задач. К концу у вас будет рабочее многоэкранное приложение на телефоне с данными, которые сохраняются, и дизайном, который вы сформировали через чат.
Что мы создаём
Простой, но полноценный менеджер задач:
- Главный экран со списком задач, сгруппированных по категориям
- Экран добавления задачи и экран её деталей
- Отслеживание выполнения с зачёркиванием
- Чистый минималистичный дизайн
Прежде чем начать
- Аккаунт AppX (100 ежемесячных кредитов бесплатного тарифа более чем достаточно для этого)
- Установленное на телефоне Expo Go
- Около 15 минут
Шаг 1 — Создание проекта
- Войдите на appx.uz
- Нажмите New Project
- Назовите проект «Task Manager» и создайте его
Вы окажетесь в рабочем пространстве проекта: панель чата с одной стороны, живой предпросмотр в центре и просмотр кода, который можно открыть в любой момент.
Шаг 2 — Генерация начального приложения
В поле ввода чата вставьте этот промпт и нажмите Generate:
Create a task manager app with these screens:
1. Home screen - a list of tasks grouped by category (Work, Personal,
Shopping). Each task shows a title, a category badge, and a checkbox.
Completed tasks have strikethrough. A floating + button opens the
add-task screen.
2. Add Task screen - a form with: task title, category picker
(Work / Personal / Shopping), an optional notes field, and a Save button.
3. Task Detail screen - full task info with edit and delete options.
Use a clean white design with blue as the accent color.
Store tasks locally so they persist between sessions.
AppX планирует три экрана, затем пишет код для каждого из них. С вас списывается 1 кредит за экран — а любой экран, который не удался, автоматически возвращается, поэтому вы платите только за то, что получилось. Весь процесс обычно завершается в течение минуты.
Чем конкретнее ваш промпт, тем ближе первый результат. Назовите экраны, данные и внешний вид, который хотите — как если бы давали задание коллеге.
Шаг 3 — Предпросмотр на телефоне
Когда генерация завершится, в панели предпросмотра появится QR-код.
- Откройте Expo Go на телефоне
- Нажмите Scan QR Code
- Отсканируйте его
Ваш менеджер задач откроется. Попробуйте его:
- Нажмите +, чтобы добавить задачу
- Отметьте задачу галочкой, чтобы пометить её выполненной
- Нажмите на задачу, чтобы увидеть её детали
Оставьте Expo Go открытым — каждое следующее изменение будет обновляться на телефоне вживую.
Шаг 4 — Доработка дизайна
Давайте отполируем главный экран. В панели чата выберите экран Home и попросите:
On the home screen I'd like:
- A greeting at the top like "Good morning 👋"
- A count of completed vs. total tasks for today
- A subtle shadow on the task cards
- Slightly larger task titles
AppX читает ваш текущий код и применяет правку, затем обновляет предпросмотр. Правки в чате тарифицируются по объёму работы — изменение вроде этого обычно стоит всего кредит или два, а любые повторные попытки в рамках одной правки бесплатны. Нравится? Оставьте. Нет? Попросите снова.
Шаг 5 — Добавление функции
Теперь добавим сроки выполнения. Выберите экран Add Task и попросите:
Add a due-date picker to the Add Task form, shown as a tappable field
that opens a date picker. On the home screen, show the selected date
next to each task title, and show overdue dates in red.
Это более крупное изменение — AppX берёт на себя выбор даты, логику дат и стилизацию на обоих экранах.
Шаг 6 — Исправление чего-либо
Видите проблему на телефоне? Просто опишите её:
The + button is hidden behind the bottom of the screen on my iPhone.
Move it up so it's fully visible above the safe area.
AppX читает соответствующий код и применяет точечное исправление. Описать ошибку простыми словами часто быстрее, чем искать её самостоятельно.
Шаг 7 — Просмотр и редактирование кода
Откройте просмотр Code, чтобы пройтись по проекту. Вы увидите настоящий проект Expo: экраны в app/, переиспользуемые части в components/, общие значения вроде цветов в отдельных файлах.
Всё настоящее, поддающееся проверке — React Native. Вы можете прочитать любой файл, отредактировать его напрямую, и изменения сразу попадут в ваш предпросмотр. Когда чата станет недостаточно, код будет ждать вас рядом.
Шаг 8 — Выпуск
Когда приложение вас устроит:
- Поделитесь ссылкой — отправьте людям жи вой веб-предпросмотр вашего приложения
- Экспортируйте код — скачайте проект как ZIP-архив (на платных тарифах) или синхронизируйте его в обе стороны с GitHub
- Опубликуйте в магазинах — отправьте в App Store и Google Play. Пошаговое руководство смотрите в разделе Публикация.
Чему вы научились
- Писать промпт для генерации, который попадает близко к цели с первой попытки
- Итерировать дизайн и функции через чат
- Исправлять проблемы, описывая их простыми словами
- Просматривать настоящий код вашего приложения и владеть им