Le processus étape par étape d’ajout d’une nouvelle fonctionnalité à mon application IOS avec le curseur

Je fais du vibe-coding pour créer des sites Web et des applications IOS. J’ai déjà deux applications en ligne sur l’App Store.

Ma première application était Traqueur de pinceauxqui vous aide à suivre vos habitudes de brossage quotidiennes, à rester cohérent et à garder vos dents propres grâce à de petits coups de pouce motivants. J’ai également écrit un article sur l’ensemble du processus de création de l’application et de son expédition sur l’App Store.

Récemment, j’ai décidé d’ajouter une nouvelle fonctionnalité à Brush Tracker : une grille de type calendrier qui montre la cohérence mensuelle du brossage de l’utilisateur. Dans cet article, je vais vous expliquer comment j’ai implémenté cette fonctionnalité à l’aide du curseur et quelques ajustements manuels que j’ai effectués.

Invite initiale

Ce que j’avais en tête était similaire aux grilles que vous voyez dans les applications de suivi des habitudes ou au graphique de contribution sur GitHub.

J’ai commencé avec le mode Plan du curseur, que j’ai trouvé très efficace lors de l’ajout d’une nouvelle fonctionnalité ou d’un changement important. Vous définissez la fonctionnalité ou expliquez la tâche et Cursor génère un plan de mise en œuvre détaillé.

Voici l’invite exacte que j’ai utilisée en mode Plan pour commencer :

Je souhaite ajouter une grille de type calendrier pour suivre les jours de brossage effectués par l’utilisateur. Faites la grille avec des carrés où chaque carré représente un jour dans un mois. L’état initial des carrés de la grille est noir. Peignez le carré en vert si l’utilisateur termine tous les brossages, en vert clair si l’utilisateur termine partiellement les brossages. Par exemple, l’utilisateur définit le nombre de brossages quotidiens sur 2. S’il effectue un brossage par jour, le carré doit être vert clair. S’ils effectuent deux brossages par jour, le carré de cette journée devrait être vert. La grille doit être accessible en appuyant sur une icône de calendrier en haut à gauche de l’écran.

Cursor m’a posé deux questions pour clarifier certains détails avant de finaliser le plan de mise en œuvre. J’ai vraiment aimé cette étape car elle est rassurante de voir Cursor chercher des éclaircissements au lieu de faire des hypothèses par lui-même.

Les deux questions posées par Cursor :

• La grille du calendrier doit-elle afficher uniquement le mois en cours ou permettre la navigation entre les mois ?
• Devrions-nous commencer à suivre à partir d’aujourd’hui, ou afficher également les jours passés (qui seraient noirs) ?

J’ai demandé à Cursor de permettre la navigation entre les mois et d’afficher les jours précédents du mois en noir. Ensuite, Cursor a créé un fichier de démarque décrivant un plan de mise en œuvre détaillé.

Le plan explique en détail comment la fonctionnalité sera mise en œuvre et comprend également une liste d’éléments de tâche réalisables.

Éléments TODO du curseur :

• Étendez BrushModel pour suivre l’historique des données de brossage quotidien avec persistance

• Créer un composant CalendarGridView avec une grille mensuelle et des carrés de couleur

• Ajouter un bouton d’icône de calendrier en haut à gauche de ContentView

• Intégrez CalendarGridView à ContentView à l’aide de la présentation de la feuille

Ensuite, j’ai demandé à Cursor de mettre en œuvre le plan. Cela permet également de modifier le plan avant l’exécution, mais je voulais m’en tenir au plan original de Cursor tel quel.

L’implémentation a fonctionné du premier coup et j’ai pu tester la fonctionnalité directement dans le simulateur Xcode. Cependant, la conception était épouvantable :

Remarque : toutes les images utilisées dans cet article incluent des captures d’écran de mon application, Brush Tracker.

Le simulateur Xcode n’inclut plus les paramètres de date et d’heure, j’ai donc modifié la date système sur mon Mac pour tester la façon dont les couleurs de la grille se sont mises à jour au fil des jours.

Je n’ai pas du tout aimé ce style. J’ai donc demandé à Cursor de repenser la grille en utilisant l’invite suivante :

Nous devons changer la conception de la grille. Ce que j’ai en tête, c’est quelque chose comme la grille de contributions Github. De plus, n’affichez pas les valeurs du jour dans les carrés représentant les jours.

Cette invite n’a pas fonctionné comme je l’espérais. Le seul changement apporté a été la suppression des numéros de jours :

Ensuite, j’ai partagé un exemple d’image du style de grille que je souhaite et j’ai demandé à Cursor de créer un design similaire.

Le nouveau design était plus proche de ce que j’avais en tête mais il présentait des problèmes structurels. Les carrés étaient trop petits et ne s’adaptaient pas bien à la mise en page :

Il y a donc deux problèmes principaux avec cette conception :

1. Chaque mois contient 42 carrés (ne représentant pas les jours d’un mois).
2. Les carrés sont trop petits.

J’ai demandé à Cursor de résoudre le premier problème avec cette invite :

Dans la mise en œuvre actuelle, il y a 42 carrés en novembre et décembre. Les carrés de la grille représentent les jours d’un mois, le nombre de carrés doit donc être égal au nombre de jours de ce mois.

L’autre problème était plus simple et je pouvais le résoudre en ajustant certaines valeurs de paramètres. Par exemple, la taille des carrés de la grille peut être modifiée par le squareSize paramètre:

struct DaySquare: View {
    let isToday: Bool
    let isCurrentMonth: Bool
    let brushCount: Int
    let brushesPerDay: Int
    
    private let squareSize: CGFloat = 8 // change this parameter

Voici à quoi ressemble la grille après avoir modifié la taille du carré en 32 :

L’autre problème qui pourrait être résolu en ajustant les valeurs des paramètres est le remplissage entre les lignes.

Dans la capture d’écran ci-dessus, il ne semble y avoir aucun espace entre les lignes. Cela peut être modifié en augmentant le remplissage entre les lignes.

Je veux aussi avoir 8 carrés (c’est-à-dire des jours) d’affilée et modifier l’espace entre les rangées.

Tout cela peut être effectué dans l’extrait de code suivant :

            // Calendar grid - smaller GitHub style
            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)
                }
            }

• spacing contrôle l’espace entre les carrés d’une rangée
• padding contrôle l’espace entre les lignes
• count contrôle le nombre de carrés dans une rangée

Après avoir joué avec ces valeurs de paramètres dans l’extrait de code ci-dessus, j’ai obtenu la grille suivante :

Si l’utilisateur effectue tous les brossages en une journée, elle obtient un vert vif. En cas de réalisation partielle, le carré de ce jour est coloré en vert pâle. Les autres jours sont affichés en noir et le jour en cours est indiqué par un cadre blanc.

Après avoir implémenté la fonctionnalité permettant de suivre les jours passés, il semblait naturel d’ajouter des notifications pour les séquences. J’ai demandé à Cursor de le faire en utilisant l’invite suivante :

Ajoutez des notifications lorsque l’utilisateur a terminé tous les brossages pendant 10, 20 et 30 jours. Ajoutez également une notification mensuelle lorsque l’utilisateur termine tous les jours d’un mois. Les notifications doivent être encourageantes et motivantes.

La grille que j’ai créée n’est pas la meilleure conception mais elle est suffisante pour transmettre le message. Lorsqu’un utilisateur regarde cette grille, il a immédiatement une idée de sa fréquence de brossage des dents.

Avec l’aide du curseur et quelques ajustements manuels, j’ai pu implémenter et livrer cette fonctionnalité en quelques heures. Au moment de la rédaction de cet article, cette version est toujours en cours de révision sur l’App Store. Au moment où vous lirez l’article, il pourrait être distribué. Voici le lien App Store vers Traqueur de pinceaux si vous souhaitez y jeter un œil ou essayer l’application.

Merci d’avoir lu! Si vous avez des commentaires sur l’article ou l’application, j’aimerais connaître votre avis.