Von Shing Lyu Haftungsausschluss: Dieser Inhalt spiegelt meine persönlichen Meinungen wider und nicht die von Organisationen, denen ich angehöre oder angehört habe. Codebeispiele dienen nur zur Veranschaulichung. Verwenden Sie sie mit Vorsicht und testen Sie sie gründlich vor der Bereitstellung.
Hinweis: Dieser Beitrag wurde mit Hilfe von Gemini 2.0 Flash geschrieben. Lass mich wissen, ob dir der Stil und Ton gefällt.
Eine saubere Fotogalerie zu führen kann eine Herausforderung sein. Ich wollte eine Möglichkeit, meine permanenten Familienfotos von den alltäglichen Schnappschüssen zu trennen, die ich mache – Parkplätze, Quittungen, kurze Notizen – Dinge, die ich nur vorübergehend brauche. Ich wollte, dass diese vergänglichen Bilder getrennt aufbewahrt werden, bereit für eine einfache Bereinigung später. Ich erinnerte mich an eine Android-App, die genau das tat, aber leider ist sie nicht mehr im Play Store verfügbar, was mich auf der Suche nach einer neuen Lösung zurückliess.
TL;DR: Windsurf ist cool! Und du kannst die App, die ich geschrieben habe, hier ausprobieren: https://shinglyu.com/TempPhoto/.
Ursprünglich erwog ich, selbst eine native Android-App zu entwickeln oder mich vielleicht in plattformübergreifende Frameworks wie Flutter oder React Native zu vertiefen. Mein Hauptlaptop kämpft jedoch derzeit mit dem Festplattenspeicher (und er hat einen M.2 SATA SSD-Steckplatz, dessen Aufrüstung sich wahrscheinlich nicht lohnt…), was es unmöglich macht, Android Studio und die notwendigen SDKs zu installieren. Erschwerend kommt hinzu, dass ich mich gerade im Urlaub befinde und nur Zugriff auf einen älteren Laptop mit ChromeOS Flex habe. Dies schränkte meine Möglichkeiten erheblich ein und führte mich schliesslich dazu, einen anderen Ansatz zu verfolgen. Dies führte mich dazu, eine Progressive Web App mit Windsurf zu entwickeln. Meine Freunde schwärmten davon als eine KI-gestützte IDE, ein Tool, das künstliche Intelligenz nutzt, um den Entwicklungsprozess zu rationalisieren und zu verbessern. Sie beschrieben es als einen Programmierbegleiter, der ihre Bedürfnisse antizipieren, Codevervollständigungen vorschlagen und sogar sich wiederholende Aufgaben automatisieren kann. Neugierig auf diese begeisterten Kritiken beschloss ich, Windsurf auszuprobieren und zu sehen, ob es dem Hype gerecht wird. Ich möchte es auch mit Amazon Q Developer und Github Copilot vergleichen.
Falls du nicht weisst, was eine Progressive Web App (PWA) ist, es ist im Wesentlichen eine Website, die auf einem Gerät “installiert” werden kann und ein eher App-ähnliches Erlebnis bietet. PWAs können offline funktionieren, Push-Benachrichtigungen senden und sich nahtloser in das Betriebssystem integrieren als herkömmliche Websites. Dies macht sie zu einer grossartigen Option für schlanke Dienstprogramme wie eine temporäre Kamera-App. Im Bereich der Fotografie-Anwendungen erfreuen sich Pwa Windsurf Lösungen wachsender Beliebtheit.
Der Prozess
Der Prozess des Erstellens meiner temporären Kamera-PWA mit Windsurf war überraschend unkompliziert, wenn auch nicht ohne ein paar Schluckauf. Ich begann mit der Installation von Windsurf innerhalb des Linux-Containers auf meinem Chromebook. Ich hatte ein Problem mit dem Cursor, der nicht korrekt angezeigt wurde, was meiner Meinung nach mit GPU-Treibern innerhalb des Linux-Containers zusammenhängt. Ich musste die Position der Schaltflächen schätzen und blind klicken. Trotz dieser geringfügigen visuellen Störung machte ich weiter und war wirklich beeindruckt, wie schnell Windsurf die erste Version meiner PWA hochfuhr.
Eine der angenehmsten Überraschungen war der “agentic flow” von Windsurf. Es fühlte sich an, als hätte man einen hilfreichen Assistenten, der mich durch den Prozess führt. Das Tool schlug intelligent Terminalbefehle basierend auf dem aktuellen Kontext vor und bot sogar an, sie automatisch auszuführen. Dies rationalisierte das Entwicklungserlebnis erheblich. Windsurf stoppte bei jedem Terminalbefehl und bat um meine Erlaubnis, es pausierte auch und bat um meine Überprüfung nach ein paar logisch zusammenhängenden Dateiänderungen. Dies unterscheidet sich vom /dev-Agenten von Amazon Q Developer, der viel Arbeit erledigen würde, Ordner erstellt, Dateien generiert, Dateien iteriert, bevor er dich um Überprüfung bittet. Manchmal verbrachte Amazon Q Developer 5 Minuten mit der Arbeit an vielen Dingen, ging aber in die völlig falsche Richtung. Der Windsurf-Flow fühlt sich interaktiver an und du kannst früher eingreifen und ihn lenken.
Unten ist ein Screenshot davon, wie es mir vorschlägt, mkdir auszuführen, um den Ordner zu erstellen, bevor ich die Dateien erstelle. Dies entspricht genau meinem eigenen Arbeitsablauf, daher fühlt es sich sehr natürlich an.
mkdir
Die erste von Windsurf generierte Version ist bereits voll funktionsfähig! Ich ging dann ein paar Iterationen durch, um den visuellen Stil nach meinem Geschmack anzupassen, die Anzeige des Ablaufdatums auf relative Zeit zu ändern und die Zeit anzuzeigen, zu der das Foto aufgenommen wurde. Windsurf hat sie ohne grosse Probleme erledigt.
first iteration
Icon-Generierung
Es ist jedoch nicht perfekt. Eine Sache, die Windsurf scheinbar nicht erkannte, war, dass eine PWA ein Icon benötigt, um installierbar zu sein. Dies ist eine grundlegende Voraussetzung für PWAs und es war ein Versäumnis. In der Vergangenheit musste ich einen Icon-Generator finden, ein paar Iterationen generieren und die Bilder sorgfältig auf mehrere Icon-Grössen zuschneiden und sie an der richtigen Stelle in der metadata.json platzieren. Da Windsurf scheinbar kein bildgenerierendes Modell hat (ich sehe, dass es Claude 3.5 Sonnet verwendet), bin ich neugierig, wie Windsurf abschneiden würde, wenn ich es bitte, die Icons zu generieren. Windsurf verwendete schliesslich ImageMagick, ein leistungsstarkes Befehlszeilen-Bildbearbeitungswerkzeug, um ein Icon zu generieren! Es schreibt einen langen ImageMagick-Befehl, um eine Reihe von Rechtecken und Kreisen zu zeichnen, um ein Kamera-Icon zu erstellen. Dies ist etwas, das ein Mensch nicht von Hand tun kann.
generate icon
Auch zu meiner Überraschung schlug es automatisch den Debian-Installationsbefehl vor und führte ihn für mich aus, als es feststellte, dass der ImageMagic-Befehl nicht installiert ist.
icon generated
Schliesslich, so sieht die App aus, und du kannst sie hier ausprobieren oder installieren: https://shinglyu.com/TempPhoto/.
app gallery
Fazit
Insgesamt war meine Erfahrung mit Windsurf zum Erstellen einer temporären Kamera-PWA positiv. Es ist ein vielversprechendes Tool, das die Eintrittsbarriere für die Entwicklung von Webanwendungen erheblich senkt. Während viele aktuelle KI-gestützte IDEs scheinbar wenig mehr als VS Code mit einer proprietären KI-Erweiterung sind, sage ich voraus, dass der eigentliche Wettbewerb in diesem Bereich auf dem Schlachtfeld der agentischen Benutzererfahrung und des Workflow-Designs ausgetragen wird. Als Entwickler bin ich bereits mit Konzepten wie PWAs vertraut und verstehe ihr Potenzial, aber es lässt mich fragen, wie zukünftige KI-Editoren diese zugrunde liegenden Komplexitäten für Nicht-Entwickler-Benutzer abstrahieren werden. Wie werden diese Tools alltägliche Benutzer in die Lage versetzen, die Apps zu erstellen, die sie sich vorstellen, ohne die technischen Details verstehen zu müssen? Das ist die wirklich aufregende Grenze und ich bin gespannt, wie sie sich entfaltet.
Möchtest du Rust lernen? Schau dir mein Buch an:
[