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.

Die Pinsel-Tracker App in 3 Tagen ohne vorherige Erfahrung mit Swift, der Hauptprogrammiersprache für die iOS-Entwicklung. Obwohl ich eine voll funktionsfähige App dwell im App Retailer habe, habe ich immer noch sehr wenig Swift-Kenntnisse, da ich diese App mit „Vibe Coding“ entwickelt habe.

In diesem Artikel erkläre ich den Prozess, die von mir verwendeten KI-Instruments und teile einige meiner Erkenntnisse und Erkenntnisse.

Alles als liebenswerte Different

Ich habe Lovable zuvor für die Entwicklung von Webanwendungen verwendet, aber es scheint zumindest im Second keine Choice für die Entwicklung mobiler Apps zu sein.

Für die App-Entwicklung gibt es Alternativen zu Lovable. Ich bin kürzlich auf ein Instrument namens Something gestoßen, und da ich so gute Erfahrungen mit Lovable gemacht habe, habe ich beschlossen, es bei der Entwicklung meiner App auszuprobieren. Zuerst schien es intestine zu funktionieren, aber das Gesamterlebnis conflict nicht so effizient, wie ich gehofft hatte.

Das Schwierigste conflict, dass ich meine Änderungen, Korrekturen und Verbesserungen nicht sofort testen konnte. Alles verfügt zwar über eine integrierte Benutzeroberfläche zum Testen, aber das Erlebnis verlief nicht sehr reibungslos. Außerdem werden Sie aufgefordert, den Code über die Expo-App zu testen, aber das hat bei mir auch nicht intestine funktioniert.

Ich sollte erwähnen, dass ich zuvor keine Erfahrung in der App-Entwicklung hatte. Für Entwickler oder jeden mit Programmierkenntnissen könnte Something wahrscheinlich ein produktiveres Werkzeug sein als für mich.

Ich habe den Code aus Something exportiert und versucht, ihn auf Xcode auf meinem Mac zu testen, habe aber viele Fehler erhalten und konnte ihn nicht zum Laufen bringen. Additionally habe ich mich für eine Different entschieden. Cursor schien die offensichtliche Wahl zu sein.

Cursor

Ich habe von vielen Freunden, die es aktiv nutzen, sehr Gutes über Cursor gehört. Ich wollte es selbst einmal versuchen.

Ich habe dieselbe Eingabeaufforderung in Cursor verwendet und ihn gebeten, die App zu erstellen. Dann habe ich ein XCode-Projekt mit den von Cursor generierten Ordnern und Dateien erstellt. Ich habe den Simulator auf XCode gestartet und es hat beim ersten Versuch funktioniert.

Das Ziel von Brush Tracker ist es, Ihnen dabei zu helfen, beim täglichen Zähneputzen konsequent zu bleiben. Sie erhalten einen Sauberkeitswert, der bei 100 % beginnt. Wenn Sie einen Tag auslassen, sinkt die Bewertung und Ihre Zähne in der App beginnen, entsprechend der Sauberkeitsbewertung etwas gelblich auszusehen.

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

Die erste Model verfügte nur über die Hauptfunktion der App. Ich denke, dass dies der effizienteste Weg ist, Produkte mit KI-basierten Instruments zu erstellen. Bringen Sie die erste Model zum Laufen, bevor Sie Funktionen hinzufügen.

Um die Kernfunktion der App auf dem Simulator zu testen, musste ich das Datum des Simulators ändern, ohne das „heutige Zähneputzen“ abzuschließen, um zu prüfen, ob der Sauberkeitswert sinken und die Zahnvisualisierungen wie erwartet aktualisiert würden.

Der Cursor hat vorgeschlagen, das Datum im XCode-Simulator zu ändern, aber der Simulator verfügt nicht mehr über die Datums- und Uhrzeiteinstellungen. Ältere Versionen des XCode-Simulators hatten diese Einstellung, jedoch nicht mehr.

Eine Workaround-Lösung bestand darin, das Datum auf meinem Mac zu ändern. Dadurch änderte sich auch das Datum auf dem Simulator und ich konnte die Funktion testen.

Eine Sache, die mir auffiel, conflict, dass der Cursor mein Konto nicht sah und nicht funktionierte, als ich das Datum auf meinem Mac änderte. Es normalisierte sich wieder, als ich das Datum wieder auf „Automatisch“ umstellte.

Timer-Funktion

Ein integrierter Putztimer schien eine tolle Ergänzung zum Brush Tracker zu sein. Benutzer können eine Putzsitzung einfach als erledigt markieren oder beim Putzen den Timer verwenden.

Es hat einige Versuche gedauert, bis diese Funktion so funktionierte, wie ich es mir vorgestellt hatte. Sie können Cursor einfach anweisen, eine Funktion hinzuzufügen, aber es funktioniert viel besser, wenn Sie die Eingabeaufforderung anpassen und genau erklären, was Sie wollen. Sobald Sie klare Anweisungen geben, leistet Cursor normalerweise hervorragende Arbeit.

Belohnungsfunktion

Ich wollte dem Benutzer beim täglichen Zähneputzen eine zusätzliche Motivation verleihen. Nach Abschluss der Sitzungen können sie auf „Tägliche Belohnung erhalten“ tippen und ein kurzes Motivationszitat sehen. Es ist eine kleine Geste, aber eine schöne Erinnerung an die Zahngesundheit.

Sie können tatsächlich beim Vibe-Codieren lernen

Cursor schreibt nicht nur den Code, sondern hilft Ihnen auch beim Lernen. Als ich versuchte, die Belohnungsfunktion hinzuzufügen, conflict die Implementierung zunächst nicht korrekt. Es funktionierte nicht richtig.

Ich habe Cursor das Drawback beschrieben und er hat erklärt, was das Drawback verursacht hat und wie man es beheben kann. Hier sind zwei Beispiele dafür, wie Cursor Ihnen beim Lernen helfen kann:

Das Drawback besteht darin, dass „rewardQuote“ beim ersten Tippen leer ist, weil handleRewardTap() es festlegt, das Blatt jedoch sofort angezeigt wird. Ich muss sicherstellen, dass das Angebot festgelegt ist, bevor ich das Blatt zeige.

Das Drawback wurde behoben! Das Drawback bestand darin, dass „showReward = true“ unmittelbar nach „rewardQuote“ festgelegt wurde, die Blattpräsentation von SwiftUI jedoch erfolgen kann, bevor die Statusaktualisierung vollständig verarbeitet wurde.

Verwenden Sie den Cursor effizienter

Cursor ist ein großartiges Werkzeug, aber es gibt einige Möglichkeiten, es effizienter zu machen.

Nehmen wir an, dass der Code fehlschlägt oder nicht korrekt ausgeführt wird. Wenn Sie den problematischen Teil kennen, markieren Sie diesen Abschnitt und fügen Sie ihn dem Chat hinzu. Dies erleichtert Cursor definitiv die Behebung des Issues.

In Brush Tracker hatte ich ein Drawback beim Einrichten von Benachrichtigungen. Ich habe das Drawback definiert und Cursor gebeten, es zu beheben. Der Cursor sagte mir, dass das Drawback behoben sei, das Drawback jedoch weiterhin bestehe. Dann habe ich anhand der Codeänderungen herausgefunden, wo das Drawback auftrat, und diesen Teil zum Chat hinzugefügt.

Cursor hat es beim nächsten Versuch behoben: Das Drawback besteht darin, dass onTapGesture auf den Picker angewendet wird, segmentierte Picker in SwiftUI jedoch nicht immer intestine auf Tippgesten reagieren, da sie über eine eigene interne Gestenverarbeitung verfügen. Der Modifikator onChange wird nur ausgelöst, wenn sich die Auswahl tatsächlich ändert, nicht, wenn auf denselben Wert getippt wird.

Erwähnenswert ist auch der Prozentsatz der „Kontextverwendung“ in Cursor. Es erfasst automatisch relevanten Kontext aus Ihrer Codebasis, sodass Sie ihm nicht sagen müssen, welche Dateien angezeigt werden sollen. Aber auch Ihr Chatverlauf ist in diesem Zusammenhang enthalten und enthält manchmal alte Probleme oder irrelevanten Code.

Dieses zusätzliche Durcheinander kann die Token-Nutzung erhöhen oder den Cursor weniger effizient machen. Wenn der Prozentsatz der verwendeten Kontexte steigt, lösche ich den Chatverlauf.

Verteilen Sie Ihre App im App Retailer

Sobald Sie den Take a look at Ihrer App mit dem Simulator oder einem physischen Gerät (z. B. Ihrem eigenen iPhone) abgeschlossen haben, ist es an der Zeit, Ihre App im App Retailer zu verteilen, damit andere Ihre App sehen (und hoffentlich verwenden) können.

Es ist kein komplizierter Prozess, aber es gibt viele Particulars, die besonders dann lange dauern können, wenn Sie es zum ersten Mal tun. Ich habe ein gefunden Video auf YouTube, das den gesamten Prozess Schritt für Schritt anschaulich erklärt.

Nachdem ich alle Schritte abgeschlossen hatte, habe ich meine App zur Überprüfung eingereicht. Nachdem es genehmigt wurde, erhielt ich eine E-Mail von App Retailer Join, in der mir mitgeteilt wurde, dass es zur Verteilung bereit sei.

Ich möchte darauf hinweisen, dass ich mit keinem der in diesem Artikel genannten KI-Instruments in Verbindung stehe.

Danke fürs Lesen! Sie können auschecken Pinsel-Tracker im App Retailer. Ich würde mich freuen, von Ihnen zu hören, wenn Sie es ausprobieren oder Suggestions haben.