Codifico por vibración para crear sitios web y aplicaciones de IOS. Ya tengo dos aplicaciones disponibles en la App Store.
Mi primera aplicación fue Brush Tracker, que te ayuda a realizar un seguimiento de tus hábitos diarios de cepillado, ser constante y mantener tus dientes limpios mediante pequeños empujones de motivación. También escribí un artículo sobre todo el proceso de creación de la aplicación y envío a la App Store.
Recientemente, decidí agregar una nueva característica a Brush Tracker: una cuadrícula similar a un calendario que muestra la consistencia del cepillado mensual del usuario. En este artículo, le explicaré cómo implementé esta función usando el Cursor y algunos ajustes manuales que hice.
Mensaje inicial
Lo que tenía en mente era similar a las cuadrículas que se ven en las aplicaciones de seguimiento de hábitos o el gráfico de contribución en GitHub.
Comencé con el modo Plan del cursor, que encontré muy eficiente al agregar una nueva función o realizar un cambio importante. Usted define la característica o explica la tarea y Cursor genera un plan de implementación detallado.
Este es el mensaje exacto que utilicé en el modo Plan para comenzar:
Quiero agregar una cuadrícula similar a un calendario para realizar un seguimiento de los días de cepillado completo del usuario. Haz la cuadrícula con cuadrados donde cada cuadrado represente un día en un mes. El estado inicial de los cuadrados de la cuadrícula es negro. Pinte el cuadrado de verde si el usuario completa todos los cepillados, de verde claro si el usuario completa parcialmente los cepillados. Por ejemplo, el usuario establece el recuento de cepillados diarios en 2. Si completa un cepillado en un día, el cuadrado debe ser de color verde claro. Si completan dos cepillados en un día, el cuadrado de ese día debería ser verde. Se debe poder acceder a la cuadrícula presionando el ícono de un calendario en la parte superior izquierda de la pantalla.
Cursor me hizo dos preguntas para aclarar algunos detalles antes de finalizar el plan de implementación. Realmente me gustó este paso porque es reconfortante ver a Cursor buscar aclaraciones en lugar de hacer suposiciones por sí solo.
Las dos preguntas que hizo Cursor:
¿La cuadrícula del calendario debería mostrar solo el mes actual o permitir la navegación entre meses? ¿Deberíamos empezar a rastrear a partir de hoy o mostrar también los días pasados (que serían negros)?
Le indiqué al Cursor que permitiera la navegación entre meses y que mostrara los días anteriores del mes en negro. Luego, Cursor creó un archivo de rebajas que describe un plan de implementación detallado.
El plan explica en detalle cómo se implementará la función y también incluye una lista de tareas pendientes que se pueden realizar.
Elementos TODO del cursor:
Amplíe BrushModel para realizar un seguimiento de los datos históricos de cepillado diario con persistencia. Cree el componente CalendarGridView con cuadrícula mensual y cuadrados codificados por colores. Agregue el botón del icono de calendario en la parte superior izquierda de ContentView. Integre CalendarGridView con ContentView usando la presentación de hojas.
A continuación, le pedí a Cursor que implementara el plan. También permite modificar el plan antes de la ejecución, pero quería seguir con el esquema original de Cursor tal como está.
La implementación funcionó en el primer intento y pude probar la función directamente en el simulador de Xcode. Sin embargo, el diseño era terrible:
Nota: Todas las imágenes utilizadas en este artículo incluyen capturas de pantalla de mi aplicación, Brush Tracker.
El simulador Xcode ya no incluye configuraciones de fecha y hora, así que cambié la fecha del sistema en mi Mac para probar cómo se actualizaban los colores de la cuadrícula en diferentes días.
No me gustó nada este estilo. Entonces le pedí a Cursor que rediseñara la cuadrícula usando el siguiente mensaje:
Necesitamos cambiar el diseño de la cuadrícula. Lo que tengo en mente es algo así como una cuadrícula de contribuciones de Github. Además, no muestre los valores del día en los cuadrados que representan días.
Este mensaje no funcionó como esperaba. El único cambio que hizo fue eliminar los números de los días:
A continuación, compartí una imagen de muestra del estilo de cuadrícula que quiero y le pedí a Cursor que hiciera un diseño similar.
El nuevo diseño se acercaba más a lo que tenía en mente pero tenía problemas estructurales. Los cuadrados eran demasiado pequeños y no se adaptaban bien al diseño:
Entonces hay dos problemas principales con este diseño:
Cada mes contiene 42 cuadrados (que no representan los días de ningún mes). Los cuadrados son demasiado pequeños.
Le pedí a Cursor que solucionara el primer problema con este mensaje:
En la implementación actual, hay 42 plazas en noviembre y diciembre. Los cuadrados de la cuadrícula representan días de un mes, por lo que la cantidad de cuadrados debe ser igual a la cantidad de días de ese mes.
El otro problema era más sencillo y pude solucionarlo ajustando algunos valores de parámetros. Por ejemplo, el tamaño de los cuadrados en la cuadrícula se puede cambiar mediante el parámetro squareSize:
struct DaySquare: View { let isToday: Bool let isCurrentMonth: Bool let brushCount: Int let brushesPerDay: Int private let squareSize: CGFloat = 8 // cambiar este parámetro
Así es como se ve la cuadrícula después de cambiar el tamaño del cuadrado a 32:
El otro problema que podría resolverse ajustando los valores de los parámetros es el relleno entre filas.
En la captura de pantalla anterior, parece que no hay espacio entre filas. Esto se puede cambiar aumentando el relleno entre filas.
También quiero tener 8 cuadrados (es decir, días) seguidos y cambiar el espacio entre filas.
Todo esto se puede hacer en el siguiente fragmento de código:
// Cuadrícula de calendario: estilo GitHub más pequeño LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 0.2), count: 8), spacing: 0) { ForEach(Array(calendarDays.enumeated()), id: \.offset) { index, dayInfo in DaySquare( isToday: dayInfo.isToday, isCurrentMonth: dayInfo.isCurrentMonth, brushCount: dayInfo.brushCount, brushesPerDay: model.brushesPerDay, size: 32 ) .padding(.bottom, 3) } } spacing controla el espacio entre cuadrados en una fila padding controla el espacio entre filas count controla el número de cuadrados en una fila
Después de jugar con estos valores de parámetros en el fragmento de código anterior, obtuve la siguiente cuadrícula:
Si el usuario completa todos los cepillados en un día, obtiene un color verde brillante. En caso de completarse parcialmente, el cuadrado de ese día se colorea de verde pálido. Los demás días se muestran en negro y el día actual se indica con un marco blanco.
Después de implementar la función para realizar un seguimiento de los días pasados, parecía natural agregar notificaciones de rachas. Le pedí a Cursor que hiciera esto usando el siguiente mensaje:
Agregue notificaciones cuando el usuario haya completado todos los cepillados durante 10, 20 y 30 días. Además, agregue una notificación mensual para cuando el usuario complete todos los días de un mes. Las notificaciones deben ser alentadoras y motivadoras.
La cuadrícula que creé no es el mejor diseño, pero es lo suficientemente buena para transmitir el mensaje. Cuando un usuario mira esta cuadrícula, inmediatamente tiene una idea de la frecuencia con la que se cepilla los dientes.
Con la ayuda de Cursor y algunos ajustes manuales, pude implementar y distribuir esta función en unas pocas horas. Al momento de escribir este artículo, esta versión aún se encuentra en revisión en la App Store. Cuando lea el artículo, es posible que ya esté distribuido. Aquí está el enlace de la App Store a Brush Tracker si desea echarle un vistazo o probar la aplicación.
¡Gracias por leer! Si tiene algún comentario sobre el artículo o la aplicación, me encantaría escuchar su opinión.