Claude Code hat gerade jede Shopify-Agentur gekillt
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Shopify-Stores einzurichten ist einfacher denn je, da man sie jetzt einfach mit den
00:00:04KI-Agenten kombiniert, die man zum Programmieren nutzt, und sie alles erledigen lässt. Aber einfach nur Claude Code
00:00:09mit deinem Store zu verbinden, reicht für sich allein nicht aus. Um am Ende einen Shop zu haben, der nicht so
00:00:14generisch aussieht wie jeder andere Shopify-Store da draußen, musst du ihn mit ein paar Schlüsselelementen kombinieren.
00:00:19Am Ende dieses Videos wirst du den gesamten Workflow kennen, mit dem du deine eigene
00:00:23Shopify-Pipeline von Anfang bis Ende aufbauen kannst, um sofort mit dem Verkauf deiner Produkte zu starten.
00:00:28Du musst ein paar Schritte befolgen, um dich auf den Aufbau deines Stores vorzubereiten. Das Erste,
00:00:32was du brauchst, ist ein Shopify-Partner-Konto. Geh also in den Browser und melde dich an. Das Partner-Konto
00:00:37ist wichtig, weil es dir Zugriff auf Entwicklungstools gibt, mit denen du mit
00:00:41der Plattform experimentieren kannst. Es ist im Grunde eine Sandbox für deine Stores, in der du deine App wie
00:00:46gewohnt bauen kannst, während du gleichzeitig Entwicklungstools wie Testzahlungen und Testbenutzer nutzt, damit du
00:00:51die App testen kannst, bevor sie live geht. Und später, wenn du denkst, dass deine App bereit ist, mit dem
00:00:56Verkauf zu beginnen, musst du nur noch Zahlungsintegrationen hinzufügen und kannst das Entwicklungskonto einfach auf das
00:01:01Händlerkonto übertragen, wo du echte Produkte an echte Menschen verkaufen kannst.
00:01:05Sobald du die App im Projekt erstellt hast, ist es an der Zeit, die Shopify CLI zu installieren. Das kannst du tun, indem du
00:01:10den Installationsbefehl aus der CLI-Dokumentation kopierst und im Terminal ausführst. Sobald du ihn ausführst, wirst
00:01:15du aufgefordert, zwischen einer React-App oder einer Extension-App zu wählen. Wir haben uns für die React-App entschieden, weil das
00:01:20das ist, worin wir meistens entwickeln, und es einfacher ist, die App auf diese Weise anzupassen. Danach kannst du die
00:01:26Sprache wählen, die du verwenden möchtest, und wir haben TypeScript wegen seiner Typsicherheit und Sicherheitsfunktionen gegenüber
00:01:31JavaScript gewählt. Sobald du dieses Setup durchlaufen hast, werden alle Abhängigkeiten installiert, die zum
00:01:37Ausführen der App erforderlich sind. Nachdem die Abhängigkeiten installiert sind, ist das Projekt bereit und wenn du es ausführst, wirst
00:01:41du eine grundlegende Vorlage der App sehen, von der aus du weitere Änderungen vornehmen kannst. Sobald die CLI also
00:01:46installiert wurde, gibt es noch andere Dinge, die du installieren musst, beginnend mit dem Shopify KI-Toolkit, das
00:01:51den Bauprozess ergänzt. Der wichtigste Teil davon ist der MCP, und der Installationsbefehl für diesen
00:01:56MCP für alle KI-Coding-Agenten findet sich in der Dokumentation. Da wir Claude Code verwendeten, haben wir den Befehl
00:02:03für Claude kopiert und den MCP installiert. Das kannst du mit jedem Coding-Tool deiner Wahl genauso machen. Sobald der MCP
00:02:08installiert ist, stellt er seine Tools für Claude bereit, aber der MCP allein reicht nicht aus, da alle darin enthaltenen Tools
00:02:14im Grunde dazu da sind, Claude beim besseren Programmieren zu helfen. Der MCP hat keine Möglichkeit, Änderungen an deinem Store vorzunehmen, der
00:02:19in der Cloud läuft. Er enthält nur Dokumentationen und Wissen über die Shopify-API sowie weitere Validierungen. Also
00:02:25war dieses Setup für sich allein nicht ausreichend für den Aufbau. Und deshalb ist die CLI wichtig, da sie
00:02:30tatsächlich die Brücke zwischen der Shopify-App und dem lokalen Setup bildet. Neben dem MCP musst du auch
00:02:35das Plugin installieren. Das Plugin ist wichtig, weil es mehrere Agenten und Fähigkeiten gebündelt enthält.
00:02:40Du kannst es installieren, indem du die Installationsbefehle befolgst. Nach dem Ausführen der Installationsbefehle
00:02:44führst du den Befehl zum Neuladen der Plugins aus und alle Agenten und Fähigkeiten sind einsatzbereit.
00:02:49Nun ist das Haupt-Setup abgeschlossen, aber bevor du tatsächlich mit dem Bauen beginnst, musst du das Projekt selbst vorbereiten.
00:02:53Das Erste, was eingerichtet werden muss, ist die Datei Claude.md, die im Grunde die Datei ist, um den
00:02:59Agenten bei den Praktiken zu leiten, denen er folgen soll. Die von uns hinzugefügte Claude.md enthält alle Best Practices,
00:03:05über die wir immer sprechen. Wir haben ein eigenes, ausführliches Video dazu, in dem wir die Best Practices für
00:03:10die Datei Claude.md durchgehen, das du dir auf dem Kanal ansehen kannst. Neben Claude.md benötigst du noch andere
00:03:15Dinge. Standardmäßig generiert Claude SVGs und verwendet sie als Platzhalter für Bilder. Aber
00:03:21diese SVGs reichen für die Optik unseres Shops nicht aus, also haben wir eine Fähigkeit geschaffen, um diese Lücke zu schließen. Wir haben eine
00:03:26Gemini-Bilderzeugungs-Fähigkeit entwickelt, die es dem Agenten, in dem du sie installierst, ermöglicht, die Gemini CLI aufzurufen und
00:03:32sie aufzufordern, Bilder für die Website zu generieren. Die Fähigkeit enthält Anweisungen, wie die Gemini CLI aufgerufen wird
00:03:38und wo die generierten Bilder gespeichert werden sollen. Und da die Gemini CLI die Bilderzeugung integriert hat, ist
00:03:44kein separater API-Schlüssel erforderlich, sodass du diese Fähigkeit direkt nutzen kannst, indem du dich einfach auf die Gemini CLI-Authentifizierung verlässt.
00:03:50Neben der Bilderzeugung haben wir für unseren eigenen Komfort noch eine weitere Fähigkeit entwickelt. Die Prototyping-
00:03:55Fähigkeit funktioniert so, dass sie jedes Mal, wenn du den Agenten um eine Designänderung bittest, zuerst eine HTML-Datei erstellt,
00:04:01die du in der Vorschau ansehen kannst, und sobald du sie angesehen hast, wendet sie diese Änderung auf das Design der App an. Die
00:04:05Datei skill.md enthält Details über den gesamten Workflow, unterteilt in zwei Phasen. Sobald diese Fähigkeiten vorhanden sind,
00:04:11gibt es einige Hooks, die du ebenfalls in der settings.json innerhalb des Ordners .claud konfigurierst und verbindest.
00:04:17Diese Hooks fungieren im Grunde als Leitplanken für Claude. Zum Beispiel kann das Pre-Tool-Skript
00:04:22Claude stoppen, bevor es Änderungen ohne deine Zustimmung direkt an der App vornimmt. Du kannst so viele
00:04:28Hooks konfigurieren, wie du möchtest. Mit diesem Setup waren wir also bereit, die App tatsächlich zu bauen. Aber bevor wir weitermachen,
00:04:33lassen Sie uns ein Wort von unserem Sponsor, Willow Voice, hören. Wenn Sie den größten Teil Ihres Tages damit verbringen, E-Mails,
00:04:37Slack-Nachrichten, Dokumente und Prompts zu tippen, arbeiten Sie viel langsamer, als Sie es müssten. Willow Voice lässt Sie
00:04:42überall auf Ihrem Computer sprechen, anstatt zu tippen, und der Text erscheint sofort. Es ist nicht wie Ihre
00:04:47integrierte Diktierfunktion, die jedes zweite Wort falsch versteht. Willow ist dreimal genauer und es
00:04:52formatiert tatsächlich alles ordnungsgemäß mit Absätzen und Struktur. Das Beste daran ist, dass es sich daran anpasst, was Sie gerade
00:04:57tun: formell, wenn Sie eine E-Mail schreiben, lässig, wenn Sie auf Slack sind, und technisch, wenn Sie im Code sind.
00:05:02Es lernt mit der Zeit, wie Sie schreiben, sodass die Ausgabe wie Sie klingt, nicht wie ein Roboter. Über 100.000 Fachleute
00:05:07nutzen es täglich, und es ist SOC2-zertifiziert mit HIPAA-Konformität und null Datenspeicherung, sodass Ihre Worte
00:05:13privat bleiben. Ich verwende es seit letzter Woche und das Tippen fühlt sich jetzt schmerzhaft langsam an.
00:05:18Laden Sie Willow Voice kostenlos über den Link in der Beschreibung herunter. Nun, sobald dies eingerichtet ist, kannst
00:05:23du Claude einfach dazu auffordern, was du bauen möchtest. Du musst die Landingpage beschreiben, die du möchtest,
00:05:27genau so, wie wir den Stil erwähnt haben, dem die Landingpage folgen sollte. Und weil wir
00:05:31die Fähigkeit konfiguriert hatten, wurde zuerst die Prototyping-Fähigkeit geladen. Anstatt die Änderungen also direkt an der
00:05:36tatsächlichen App vorzunehmen, schrieb es HTML-Code, in dem es das Design fertigstellte, und wartete dann auf unsere Zustimmung.
00:05:41Es öffnete das Design auch in einem neuen Tab, sodass wir es in der Vorschau sehen konnten. Die erste Version, die es erstellte,
00:05:46sah sauber aus und funktionierte visuell gut, aber es verwendete Platzhalter-Abschnitte auf der Landingpage, an denen die
00:05:51Bilder hätten sein sollen. Da wir die Bilderzeugungs-Fähigkeit installiert hatten, hätte es diese direkt laden
00:05:55und die Bilderzeugung von Anfang an verwenden sollen. Also forderten wir es erneut auf, die Bilderzeugungs-Fähigkeit zu verwenden
00:06:00und tatsächlich Bilder für diese Platzhalter-Abschnitte zu generieren. Nachdem wir diesen Prompt gegeben hatten,
00:06:05startete es mehrere Gemini CLIs über das Bash-Tool und öffnete sie im YOLO-Modus, sodass die Gemini CLI
00:06:12nicht durch eine Berechtigungsabfrage blockiert wurde. Claude startete mehrere Terminals und alle begannen
00:06:17parallel Bilder zu generieren. Die Bilderzeugung dauert länger, also musst du warten, bis sie abgeschlossen ist.
00:06:22Sobald die Bilder fertig waren, kannst du die Website überprüfen und sie wird viel polierter aussehen. Und
00:06:27da die Prompts zur Bilderzeugung ebenfalls von Claude gesteuert wurden, passten die Bilder sehr gut zum UI-Stil.
00:06:33Nun, mit den hinzugefügten visuellen Elementen, war die Website komplett. Du kannst das Design an diesem Punkt
00:06:38überarbeiten. Da wir keine weiteren Änderungen vorzunehmen hatten, baten wir Claude fortzufahren und die App im Store zu implementieren.
00:06:43Es wird dir ein paar Fragen dazu stellen, wie die App implementiert werden soll, wie ob du
00:06:48möchtest, dass sie mit dem Live-Store synchronisiert wird oder nicht, was wir taten, also wählten wir diese Option. Sobald du die
00:06:53Fragen beantwortest, fuhr es fort, das HTML-Design in die App selbst zu konvertieren, nicht direkt in die Haupt-App,
00:06:58sondern in die Entwicklungs-App, die wir erstellt hatten. Es hat das Design eins zu eins nachgeahmt und du kannst die App selbst
00:07:03in der Vorschau ansehen, um zu sehen, dass es das Design vollständig nachgeahmt hat. Nun, es war gut, dass wir die HTML-Vorschau
00:07:08verwendet haben, bevor wir sie tatsächlich in der App implementiert haben, denn dieser Prozess nimmt viel Zeit in Anspruch. Und wenn du
00:07:13das Design in diesem Prozess überarbeitet hättest, hätte es viel Zeit und Token verschwendet. HTML-Prototyping
00:07:18war viel schneller und einfacher zu überarbeiten. Wenn dir unser Inhalt gefällt, überlege dir auch,
00:07:23den Hype-Button zu drücken, da er uns hilft, mehr solcher Inhalte zu erstellen und mehr Menschen zu erreichen.
00:07:28Bis zu diesem Punkt ist die App mit der tatsächlichen Store-URL synchronisiert. Das Design, das du gerade erstellt hast, befindet sich auf dem lokalen
00:07:34Server für eine Vorschau auf der lokalen Maschine und es befindet sich auch in der Theme-Vorschau, wo es
00:07:39im Grunde das Theme für die Entwicklungs-App bereitgestellt hat, damit wir es live in der Vorschau sehen können. Es ist nicht die endgültige Version,
00:07:44es ist nur ein Entwurf. Also haben wir es einfach angewiesen, live zu synchronisieren, und es hat die Shopify CLI und die MCP-
00:07:50Tools verwendet, um das Design mit der Haupt-URL zu synchronisieren, die für den Shopify-Store konfiguriert ist. Und danach
00:07:55wird Claude das Design live in deiner App aktualisiert haben. Nun, auf ähnliche Weise kannst du es bitten, alle
00:08:00anderen Seiten auf deiner Website zu aktualisieren, und es wird demselben Prozess folgen. Es wird zuerst die Abschnitte prototyptypen,
00:08:05dann sie in der tatsächlichen App aktualisieren und dann mit dem gehosteten Store synchronisieren. Aber es gibt ein paar Dinge,
00:08:10die du noch an deinem Store tun musst, um ihn bereit zu machen. An diesem Punkt wirst du keine Produkte hinzufügen
00:08:14können, da das Aktualisieren der Produkte und deren Vorbereitung für die Implementierung die Shopify-Admin-
00:08:20API erfordert. Das kann nicht ohne die Admin-API erledigt werden, da diese dir Zugriff auf die Hauptteile
00:08:25des Stores wie die Über-uns-Seite, Produkte und andere Verwaltungsfunktionen gibt. Bis jetzt haben wir nur
00:08:30Änderungen am Theme vorgenommen und dieses Theme für die visuellen Elemente auf den Store selbst angewendet. Um die
00:08:35Admin-API zu verbinden, musst du sie mit der Shopify CLI mit dem Store authentifizieren. Sobald du den
00:08:41Authentifizierungsbefehl mit deinem Auth-Link eingibst, wird der Browser geöffnet, von wo aus du dich authentifizieren kannst. Danach
00:08:46wirst du in der Lage sein, storebezogene Seiten zu erstellen, und es wird den Shopify MCP und das CLI-Tool
00:08:52zusammen verwenden, um die anderen Abschnitte der Seite zu aktualisieren. Nun kannst du es bitten, weitere Produkte zu
00:08:56deinem Store hinzuzufügen, damit du mit dem Verkauf beginnen kannst. Aber für das Hinzufügen von Produkten musst du die Berechtigungen
00:09:01für den Shopify-Store konfigurieren, damit er über die Admin-API auf die Tools zugreifen kann. Das Hinzufügen von Produkten benötigt mehr
00:09:06Berechtigungen als die, die wir zuvor gegeben haben. Wir hatten nur die Berechtigung zum Schreiben von Inhalten hinzugefügt, aber für das Hinzufügen von
00:09:11Produkten benötigen wir zusätzliche Berechtigungen wie das Schreiben von Produkten und das Lesen und Schreiben von Publikationen.
00:09:16Du musst den Auth-Befehl also erneut ausführen, aber mit zusätzlichen Berechtigungen. Sobald das erledigt ist,
00:09:20kannst du Claude bitten, Produkte zu deiner Website hinzuzufügen. Und sobald es das getan hat, kannst du dir die App ansehen und
00:09:25die dort aufgelisteten Produkte sehen, zusammen mit dem Store, der bereit ist, mit Produktdetails und Warenkorbfunktionen, und
00:09:30kannst die Produkte auch im Admin-Panel überprüfen. Aber wer auch immer deinen Store besucht, wird an diesem Punkt noch keine
00:09:35Käufe tätigen können. Damit der Store tatsächlich bereit ist, Produkte zu verkaufen, musst du Zahlungsdetails
00:09:40hinzufügen, damit Zahlungen verarbeitet werden können. Du müsstest auch einen Plan auswählen, denn wenn du das nicht tust,
00:09:45muss jeder, der deinen Store besucht, ein Passwort eingeben, um ihn zu sehen, was offensichtlich nicht praktikabel ist. Also,
00:09:51sobald du deinen Plan ausgewählt hast, wirst du in der Lage sein, deine Produkte zu verkaufen. Nun, das gesamte Setup-
00:09:55Handbuch und alle hier erstellten Fähigkeiten findest du in AI Labs Pro für dieses Video und für alle unsere früheren
00:10:02Videos, von wo aus du sie herunterladen und für deine eigenen Projekte verwenden kannst. Wenn du einen Mehrwert in dem gefunden hast, was wir tun,
00:10:07und den Kanal unterstützen möchtest, ist das der beste Weg, es zu tun. Der Link ist in der Beschreibung.
00:10:11Das bringt uns zum Ende dieses Videos. Wenn du den Kanal unterstützen und uns helfen möchtest, weiterhin
00:10:16solche Videos zu machen, kannst du dies tun, indem du den Super-Thanks-Button unten verwendest. Wie immer,
00:10:20vielen Dank fürs Zuschauen und ich sehe dich im nächsten Video.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video