Der Schritt-für-Schritt-Prozess zum Hinzufügen einer neuen Funktion zu meiner IOS-App mit Cursor

Ich programmiere Vibe-Codierung, um Web sites und IOS-Apps zu erstellen. Ich habe bereits zwei Apps dwell im App Retailer.

Meine erste App warfare Pinsel-Trackerdas Ihnen hilft, Ihre täglichen Putzgewohnheiten zu verfolgen, konsistent zu bleiben und Ihre Zähne durch kleine Motivationsschübe sauber zu halten. Ich habe auch eine geschrieben Artikel über den gesamten Prozess der Erstellung der App und deren Versand an den App Retailer.

Kürzlich habe ich beschlossen, dem Brush Tracker eine neue Funktion hinzuzufügen: ein kalenderähnliches Raster, das die monatliche Putzkonsistenz des Benutzers anzeigt. In diesem Artikel erkläre ich Ihnen, wie ich diese Funktion mithilfe von Cursor und einigen manuellen Anpassungen implementiert habe.

Erste Aufforderung

Was ich im Sinn hatte, ähnelte den Rastern, die man in Apps zur Gewohnheitsverfolgung sieht, oder dem Beitragsdiagramm auf GitHub.

Ich habe mit dem Planmodus des Cursors begonnen, der meiner Meinung nach äußerst effizient ist, wenn ich eine neue Funktion hinzufüge oder eine große Änderung vornehme. Sie definieren die Funktion oder erläutern die Aufgabe und Cursor generiert einen detaillierten Implementierungsplan.

Hier ist die genaue Eingabeaufforderung, die ich im Planmodus verwendet habe, um zu beginnen:

Ich möchte ein kalenderähnliches Raster hinzufügen, um die Tage zu verfolgen, an denen der Benutzer die Zähne putzt. Erstellen Sie das Raster aus Quadraten, wobei jedes Quadrat einen Tag in einem Monat darstellt. Der Ausgangszustand der Quadrate im Raster ist schwarz. Malen Sie das Quadrat mit Grün, wenn der Benutzer alle Bürstenarbeiten abgeschlossen hat, und mit Hellgrün, wenn der Benutzer die Bürstenarbeiten nur teilweise abgeschlossen hat. Beispielsweise legt der Benutzer die Anzahl der täglichen Putzvorgänge auf 2 fest. Wenn er einmal professional Tag putzt, sollte das Quadrat hellgrün sein. Wenn sie am Tag zwei Zähneputzen durchführen, sollte das Quadrat für diesen Tag grün sein. Das Raster sollte durch Drücken eines Kalendersymbols oben hyperlinks auf dem Bildschirm zugänglich sein.

Cursor stellte mir zwei Fragen, um einige Particulars zu klären, bevor der Implementierungsplan fertiggestellt wurde. Dieser Schritt hat mir sehr intestine gefallen, weil es beruhigend ist, zu sehen, wie Cursor um Klärung bittet, anstatt eigene Annahmen zu treffen.

Die beiden Fragen, die Cursor stellte:

• Sollte das Kalenderraster nur den aktuellen Monat anzeigen oder die Navigation zwischen Monaten ermöglichen?
• Sollten wir ab heute mit der Verfolgung beginnen oder auch vergangene Tage anzeigen (was schwarz wäre)?

Ich habe Cursor angewiesen, die Navigation zwischen Monaten zu ermöglichen und die vorherigen Tage des Monats schwarz anzuzeigen. Anschließend erstellte Cursor eine Markdown-Datei mit einem detaillierten Implementierungsplan.

Der Plan erläutert ausführlich, wie die Funktion implementiert wird, und enthält außerdem eine Liste umsetzbarer Aufgaben.

TODO-Elemente des Cursors:

• Erweitern Sie BrushModel, um historische tägliche Putzdaten dauerhaft zu verfolgen

• Erstellen Sie eine CalendarGridView-Komponente mit Monatsraster und farbcodierten Quadraten

• Schaltfläche „Kalendersymbol hinzufügen“ oben hyperlinks in ContentView

• Integrieren Sie CalendarGridView mithilfe der Blattpräsentation in ContentView

Als nächstes bat ich Cursor, den Plan umzusetzen. Es ermöglicht auch, den Plan vor der Ausführung zu ändern, aber ich wollte die ursprüngliche Gliederung von Cursor so beibehalten, wie sie ist.

Die Implementierung funktionierte gleich beim ersten Versuch und ich konnte das Function direkt im Xcode-Simulator testen. Allerdings warfare das Design schrecklich:

Hinweis: Alle in diesem Artikel verwendeten Bilder enthalten Screenshots meiner App Brush Tracker.

Der Xcode-Simulator enthält keine Datums- und Uhrzeiteinstellungen mehr, daher habe ich das Systemdatum auf meinem Mac geändert, um zu testen, wie sich die Rasterfarben über verschiedene Tage hinweg aktualisiert haben.

Dieser Stil gefiel mir überhaupt nicht. Deshalb habe ich Cursor gebeten, das Raster mithilfe der folgenden Eingabeaufforderung neu zu gestalten:

Wir müssen das Design des Gitters ändern. Was ich im Sinn habe, ist so etwas wie ein Github-Beitragsraster. Zeigen Sie außerdem nicht die Tageswerte in den Quadraten an, die Tage darstellen.

Diese Eingabeaufforderung funktionierte nicht wie erhofft. Die einzige Änderung bestand darin, die Tageszahlen zu entfernen:

Als nächstes habe ich ein Beispielbild des gewünschten Rasterstils geteilt und Cursor gebeten, ein ähnliches Design zu erstellen.

Das neue Design kam meinen Vorstellungen näher, hatte aber strukturelle Probleme. Die Quadrate waren zu klein und passten nicht intestine in das Format:

Es gibt additionally zwei Hauptprobleme bei diesem Design:

1. Jeder Monat enthält 42 Quadrate (die nicht die Tage eines Monats darstellen).
2. Quadrate sind zu klein.

Ich habe Cursor gebeten, das erste Downside mit dieser Eingabeaufforderung zu beheben:

In der aktuellen Umsetzung gibt es im November und Dezember 42 Plätze. Die Quadrate im Raster stellen die Tage in einem Monat dar, daher muss die Anzahl der Quadrate der Anzahl der Tage in diesem Monat entsprechen.

Das andere Downside warfare einfacher und ich konnte es lösen, indem ich einige Parameterwerte anpasste. Beispielsweise kann die Größe der Quadrate im Raster durch geändert werden squareSize Parameter:

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

So sieht das Raster aus, nachdem ich die Quadratgröße auf 32 geändert habe:

Das andere Downside, das durch Anpassen der Parameterwerte gelöst werden könnte, ist der Abstand zwischen Zeilen.

Im Screenshot oben scheint zwischen den Zeilen kein Leerzeichen zu sein. Dies kann durch Erhöhen des Abstands zwischen den Zeilen geändert werden.

Ich möchte auch 8 Quadrate (dh Tage) in einer Reihe haben und den Abstand zwischen den Reihen ändern.

All dies kann im folgenden Codeausschnitt erfolgen:

            // Calendar grid - smaller GitHub type
            LazyVGrid(columns: Array(repeating: GridItem(.versatile(), spacing: 0.2), rely: 8), spacing: 0) {
                ForEach(Array(calendarDays.enumerated()), id: .offset) { index, dayInfo in
                    DaySquare(
                        isToday: dayInfo.isToday,
                        isCurrentMonth: dayInfo.isCurrentMonth,
                        brushCount: dayInfo.brushCount,
                        brushesPerDay: mannequin.brushesPerDay,
                        measurement: 32
                    )
                    .padding(.backside, 3)
                }
            }

• spacing steuert den Abstand zwischen Quadraten in einer Reihe
• padding steuert den Abstand zwischen den Zeilen
• rely steuert die Anzahl der Quadrate in einer Reihe

Nachdem ich mit diesen Parameterwerten im obigen Codeausschnitt herumgespielt habe, habe ich das folgende Raster erhalten:

Wenn die Benutzerin an einem Tag alle Zähne putzt, erhält sie ein leuchtendes Grün. Im Falle einer teilweisen Fertigstellung wird das Quadrat für diesen Tag hellgrün eingefärbt. Die anderen Tage werden schwarz dargestellt und der aktuelle Tag wird mit einem weißen Rahmen angezeigt.

Nach der Implementierung der Funktion zur Verfolgung vergangener Tage schien es naheliegend, Benachrichtigungen für Streaks hinzuzufügen. Ich habe Cursor mithilfe der folgenden Eingabeaufforderung gebeten, dies zu tun:

Fügen Sie Benachrichtigungen hinzu, wenn der Benutzer alle Zähneputzen für 10, 20 und 30 Tage abgeschlossen hat. Fügen Sie außerdem eine Monatsbenachrichtigung hinzu, wenn der Benutzer alle Tage eines Monats abschließt. Benachrichtigungen sollten ermutigend und motivierend sein.

Das von mir erstellte Raster ist nicht das beste Design, aber es ist intestine genug, um die Botschaft zu vermitteln. Betrachtet ein Nutzer dieses Raster, bekommt er sofort einen Eindruck von der Häufigkeit seines Zähneputzens.

Mit Hilfe von Cursor und einigen manuellen Optimierungen konnte ich diese Funktion in wenigen Stunden implementieren und ausliefern. Zum Zeitpunkt der Erstellung dieses Artikels befindet sich diese Model noch im App Retailer-Check. Wenn Sie den Artikel lesen, wird er möglicherweise bereits verteilt. Hier ist der App Retailer-Hyperlink zu Pinsel-Tracker Wenn Sie einen Blick darauf werfen oder die App ausprobieren möchten.

Vielen Dank fürs Lesen! Wenn Sie Suggestions zum Artikel oder zur App haben, freue ich mich über Ihre Meinung.