Курсор хорош в написании кода, но не так хорош в дизайне.
Делиться
Недавно я начал заниматься виброкодингом, чтобы создавать веб-сайты и приложения для iOS. Два моих приложения уже доступны в App Store.
Моим первым приложением было Brush Tracker, которое помогает отслеживать ежедневную чистку зубов, поддерживать регулярность и поддерживать чистоту зубов с помощью небольших мотивирующих подталкиваний. Я также написал статью о всем процессе разработки приложения и его публикации в App Store.
Недавно я решил добавить в Brush Tracker новую функцию: сетку, похожую на календарь, которая показывает ежемесячную регулярность чистки зубов. В этой статье я расскажу, как я реализовал эту функцию с помощью курсора и нескольких внесенных мной вручную изменений.
Первоначальная подсказка
Я имел в виду что-то похожее на сетки, которые вы видите в приложениях для отслеживания привычек или на графике вклада на GitHub.
Я начал с режима «Планирование» в Cursor, который оказался очень эффективным при добавлении новой функции или внесении крупных изменений. Вы определяете функцию или объясняете задачу, а Cursor генерирует подробный план реализации.
Вот точная подсказка, которую я использовал в режиме планирования, чтобы начать:
Я хочу добавить сетку, похожую на календарь, для отслеживания дней, когда пользователь полностью чистит зубы. Создайте сетку с квадратами, каждый из которых соответствует дню в месяце. Изначально квадраты сетки чёрные. Закрасьте квадрат зелёным, если пользователь полностью чистит зубы, и светло-зелёным, если пользователь частично чистит зубы. Например, пользователь устанавливает количество ежедневных чисток 2. Если пользователь чистит зубы один раз в день, квадрат должен быть светло-зелёным. Если пользователь чистит зубы два раза в день, квадрат для этого дня должен быть зелёным. Сетка должна быть доступна по нажатию на значок календаря в левом верхнем углу экрана.
Cursor задал мне два вопроса, чтобы прояснить некоторые детали перед финализацией плана внедрения. Мне очень понравился этот шаг, потому что приятно видеть, что Cursor запрашивает разъяснения, а не делает предположения самостоятельно.
Курсор задал два вопроса:
- Должна ли сетка календаря отображать только текущий месяц или разрешать навигацию между месяцами?
- Стоит ли нам начать отслеживать с сегодняшнего дня или также показывать прошлые дни (которые будут черными)?
Я дал команду Cursor разрешить навигацию между месяцами и отображать предыдущие дни месяца чёрным цветом. Затем Cursor создал файл разметки с подробным планом внедрения.
В плане подробно объясняется, как будет реализована эта функция, а также приводится список подлежащих выполнению задач.
Элементы TODO курсора:
- Расширьте BrushModel для отслеживания исторических данных о ежедневной чистке зубов с сохранением
- Создать компонент CalendarGridView с сеткой месяцев и цветными квадратами
- Добавить кнопку со значком календаря в верхний левый угол ContentView
- Интеграция CalendarGridView с ContentView с использованием представления листа
Затем я попросил Cursor реализовать план. Он также позволяет изменять план перед выполнением, но я хотел сохранить исходную схему Cursor как есть.
Реализация заработала с первой попытки, и я смог протестировать функцию прямо в симуляторе Xcode. Однако дизайн был ужасен:
Примечание: все изображения, использованные в этой статье, включают скриншоты из моего приложения Brush Tracker.
Симулятор Xcode больше не включает настройки даты и времени, поэтому я изменил системную дату на своем Mac, чтобы проверить, как обновляются цвета сетки в разные дни.
Мне этот стиль совсем не понравился. Поэтому я попросил Курсора переделать сетку, используя следующую подсказку:
Нам нужно изменить дизайн сетки. Я имею в виду что-то вроде сетки вкладов на Github. Кроме того, не нужно отображать значения дней в квадратах, соответствующих дням.
Эта подсказка не сработала так, как я надеялся. Единственное изменение — удаление номеров дней:
Затем я поделился образцом желаемого мной стиля сетки и попросил Cursor создать похожий дизайн.
Новый дизайн был ближе к тому, что я задумал, но у него были структурные проблемы. Квадраты были слишком маленькими и плохо масштабировались в макете:
Итак, у этой конструкции есть две основные проблемы:
- Каждый месяц состоит из 42 квадратов (не представляющих дни какого-либо месяца).
- Квадратики слишком маленькие.
Я попросил Курсор исправить первую проблему с помощью этой подсказки:
В текущей реализации ноябрь и декабрь представлены 42 квадратами. Квадраты в сетке соответствуют дням месяца, поэтому их количество должно быть равно количеству дней в этом месяце.
Другая задача была проще, и её можно было решить, изменив значения некоторых параметров. Например, размер квадратов в сетке можно изменить с помощью параметра squareSize:
struct DaySquare: View { let isToday: Bool let isCurrentMonth: Bool let brushCount: Int let brushesPerDay: Int private let squareSize: CGFloat = 8 // изменить этот параметр
Вот как выглядит сетка после того, как я изменил размер квадрата до 32:
Другая проблема, которую можно решить путем корректировки значений параметров, — это заполнение между строками.
На скриншоте выше, похоже, нет пространства между строками. Это можно исправить, увеличив отступ между строками.
Я также хочу иметь 8 квадратов (т. е. дней) в ряду и изменить расстояние между рядами.
Все это можно сделать в следующем фрагменте кода:
// Календарная сетка — в стиле GitHub поменьше LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 0.2), count: 8), spacing: 0) { ForEach(Array(calendarDays.enumerated()), id: .offset) { index, dayInfo in DaySquare( isToday: dayInfo.isToday, isCurrentMonth: dayInfo.isCurrentMonth, brushCount: dayInfo.brushCount, brushesPerDay: model.brushesPerDay, size: 32 ) .padding(.bottom, 3) } }
- интервал контролирует расстояние между квадратами в строке
- padding управляет пространством между строками
- count контролирует количество квадратов в ряду
Поэкспериментировав со значениями этих параметров в приведенном выше фрагменте кода, я получил следующую сетку:
Если пользователь выполнил все чистки зубов за день, он получает ярко-зелёный цвет. В случае частичного выполнения квадрат для этого дня окрашивается в бледно-зелёный цвет. Остальные дни отображаются чёрным цветом, а текущий день — белой рамкой.
После внедрения функции отслеживания прошлых дней, мне показалось естественным добавить уведомления о сериях. Я попросил Cursor сделать это, используя следующую подсказку:
Добавьте уведомления о завершении пользователем всех чисток за 10, 20 и 30 дней. Также добавьте ежемесячное уведомление о завершении всех дней месяца. Уведомления должны воодушевлять и мотивировать.
Созданная мной сетка не самый удачный дизайн, но она достаточно хороша, чтобы донести идею. Взглянув на неё, пользователь сразу получает представление о частоте чистки зубов.
С помощью Cursor и некоторых ручных настроек мне удалось реализовать и выпустить эту функцию за несколько часов. На момент написания статьи эта версия всё ещё находится на рассмотрении в App Store. К моменту прочтения статьи она, возможно, уже будет распространена. Вот ссылка на Brush Tracker в App Store, если хотите взглянуть на него или попробовать приложение.
Спасибо за прочтение! Если у вас есть отзывы о статье или приложении, мне будет интересно узнать ваше мнение.
Источник: towardsdatascience.com
