Создайте первое приложение
В этом руководстве мы с нуля создадим менеджер задач. В итоге у вас на телефоне будет работающее приложение на несколько экранов, с сохранением данных и дизайном, который вы настроили в чате.
Что мы создаём
Простой, но законченный менеджер задач:
- Главный экран со списком задач, сгруппированных по категориям
- Экран добавления задачи и экран с подробностями задачи
- Отметка выполнения с зачёркиванием
- Чистый, минималистичный дизайн
Прежде чем начать
- Аккаунт AppX, на котором есть минимум 30 кредитов (столько нужно, чтобы начать первую сборку)
- Телефон (iPhone или Android) с камерой
Шаг 1 — Опишите приложение
Войдите на appx.uz. На панели управления введите описание приложения в поле и нажмите стрелку (Build app). AppX сам назовёт проект по вашему запросу; переименовать его можно позже в настройках.
Вставьте этот запрос:
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.
Чем конкретнее запрос, тем ближе первый результат. Назовите экраны, данные и внешний вид — так, как объясняли бы задачу коллеге.
Шаг 2 — Посмотрите план и запустите сборку
Появится карточка плана с запланированными экранами и «About N credits» (примерно N кредитов). Нажмите Build first milestone, чтобы начать, или Stop, если план вам не подходит.
Затем AppX пишет и проверяет код. Сборка оценивается по объёму работы, а не по числу экранов, и если она не удалась, с вас ничего не списывается. Время сборки зависит от экранов и их сложности.
Шаг 3 — Откройте на телефоне
Нажмите Открыть на телефоне в верхней панели. Отсканируйте QR-код камерой телефона, затем нажмите Открыть приложение; приложение откроется в браузере телефона. На Android вместо этого можно нажать Открыть в Expo Go; какая сборка Expo Go для этого нужна, смотрите в разделе Тестирование на устройстве.
Ваш менеджер задач откроется. Попробуйте:
- Нажмите +, чтобы добавить задачу
- Отметьте задачу, чтобы завершить её
- Нажмите на задачу, чтобы увидеть подробности
Шаг 4 — Доработайте дизайн
Давайте отполируем главный экран. Назовите экран в сообщении:
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 читает ваш текущий код и применяет правку, а превью обновляется. На телефоне перезагрузите страницу в браузере (в Expo Go на Android: встряхните телефон → Reload), чтобы увидеть изменение; оно откроется на первом экране.
Правки считаются по объёму работы, минимум 1 кредит за ход. Получилось не то? Нажмите Undo на карточке хода или попросите ещё раз.
Шаг 5 — Добавьте функцию
Теперь добавим сроки выполнения:
On the Add Task screen, add a due-date picker 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.
Это более крупное изменение — оно затрагивает выбор даты, логику дат и стили на обоих экранах.
Шаг 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.
Описать ошибку простыми словами часто быстрее, чем искать её самому.
Шаг 7 — Посмотрите и поправьте код
Откройте Код в боковой панели проекта, чтобы просмотреть проект. Вы увидите настоящий проект Expo — экраны в app/, переиспользуемые части в components/, общие значения вроде цветов в constants/.
Всё это настоящий, доступный для изучения React Native. Вы можете прочитать любой файл и отредактировать его напрямую. Когда чата станет недостаточно, код всегда под рукой.
Шаг 8 — Выпуск
Когда приложение вас устраивает:
- Поделитесь ссылкой — кнопка Поделиться даёт ссылку, по которой работающее приложение открывается в браузере
- Скачайте код — весь проект в ZIP, в каждом тарифе; при желании выложите его на GitHub
- Выведите в магазины — отправьте запрос на публикацию из проекта, и человек из AppX опубликует приложение вместе с вами. См. Публикация.
Чему вы научились
- Писать запрос на генерацию, который даёт близкий результат с первой попытки
- Дорабатывать дизайн и функции через чат
- Исправлять проблемы, описывая их простыми словами
- Смотреть настоящий код своего приложения и владеть им