Eine der Fragen, die wir häufig erhalten, wenn wir mit Entwicklern oder technischen Leitern über unsere Arbeit sprechen, ist die Frage, was genau eine Shopify-Anwendung ist und welche Tools und Technologien zur Erstellung einer solchen benötigt werden Eine andere häufig gestellte Frage lautet: Ist es ein Problem, wenn ich keine Erfahrung mit der Erstellung von Shopify-Anwendungen habe?

Lassen Sie uns diese Fragen beantworten, indem wir verschiedene technologische Aspekte der Shopify-Anwendungsentwicklung näher beleuchten.

Wenn Sie auf der Suche nach einer individuellen Shopify-Entwicklung sind, können Sie sich an unsere Shopify-Experten wenden oder auf Freelance-Plattformen nach Shopify-Spezialisten suchen.

Wie sich eine Shopify-App mit einer Web-App vergleicht

Aus unserer Sicht funktioniert eine Shopify-Anwendung ziemlich genau wie eine Standard-Webanwendung, ist aber über eine API eng mit der Shopify-Plattform verbunden. Dies hat mehrere Auswirkungen:

• Um eine Shopify-App zu erstellen, können Sie die gleichen Technologien wie für Web-Apps verwenden. Sie sind nicht auf eine bestimmte Technologie beschränkt (obwohl die Verwendung einer bestimmten Technologie Ihr Leben einfacher machen kann - wir kommen später darauf zurück).
• Normalerweise müssen Sie sowohl das Backend als auch das Frontend entwickeln.
• Sie sind für das Hosting und den Betrieb der Anwendung verantwortlich.
• Sobald die Anwendung von Shopify genehmigt ist, liegt auch der Freigabeprozess vollständig in Ihrer Hand.

‍

Aus der Sicht des Händlers können wir sagen, dass Shopify Software-as-a-Service (SaaS) ist, ebenso wie die Shopify-Apps. Das bedeutet, dass ein Händler nicht mit irgendeiner Art von Code interagieren muss, um Ihre Anwendung zu installieren.

Shopify-Anwendungskomponenten

Wir identifizieren drei logische Komponenten, die eine Shopify-Anwendung typischerweise hat:

• Händlerverwaltung
• Webhook-Verarbeitung
• Kundenseitige Anwendung (Storefront UI)

Von diesen drei Komponenten ist die letzte nicht unbedingt erforderlich. Sie hängt von der Funktionalität ab, die Sie den Händlern bieten möchten. Unsere Anwendung Candy Rack besteht zum Beispiel aus allen drei Komponenten, während Loyal nur aus den ersten beiden Teilen besteht.

Händlerverwaltung

Die Händlerverwaltung ist ein Dashboard, in dem ein Händler die Anwendung einrichtet und konfiguriert. Shopify empfiehlt, die Händlerverwaltung innerhalb der Shopify-Oberfläche bereitzustellen (sogenannte eingebettete Anwendung). Das bedeutet, dass Sie die Anwendung mit einem iframe in die Shopify-Verwaltung einbetten.

Eingebettete Anwendungen sind mit einigen Einschränkungen verbunden:

• Aufgrund der Art und Weise, wie die Authentifizierung funktioniert, sind Sie mehr oder weniger auf die Single-Page-Anwendungsarchitektur beschränkt (obwohl teilweise Workarounds mit Hilfe von Turbolinks oder Inertia.js möglich sind).
• Es könnte effizient sein, React für die Erstellung des Frontends zu verwenden, da es von Shopify bereitgestellte Bibliotheken gibt: Die Polaris UI-Bibliothek stellt sicher, dass Ihre UX mit dem Rest der Shopify-Verwaltung konsistent ist, und App Bridge fungiert als Frontend-Bridge, die Shopify-Kontextdaten für Ihre Anwendung bereitstellt, die im Iframe läuft.

Die Händlerverwaltung ist auch der erste Berührungspunkt zwischen Ihrer Anwendung und einem Händler, und hier wird der Installationsprozess abgewickelt. Die Installation bedeutet im Wesentlichen, dass die Berechtigungen für den Zugriff auf die Shopdaten des Händlers über OAuth eingeholt werden.

Dies ist auch der Teil der Anwendung, in dem Sie die Abrechnung vornehmen, falls Ihre Anwendung nicht kostenlos ist.

Webhook-Verarbeitung

Über Webhooks informiert Shopify Ihre Anwendung über verschiedene Ereignisse in den Geschäften, in denen es installiert ist: z. B. die Erstellung einer neuen Bestellung oder die Aktualisierung eines Produkts. Sie entscheiden, welche Ereignisse Sie abonnieren möchten.

Die Geschäftslogik, die auf der Grundlage des empfangenen Ereignisses ausgeführt werden muss, sollte auf jeden Fall von Hintergrundarbeitern verarbeitet werden. Andernfalls können Sie Ihre Anwendung leicht überlasten. Sie können auch erwägen, den Empfang von Ereignissen außerhalb Ihrer Anwendung zu delegieren.

‍

Kundenorientierte Anwendung (Storefront UI)

Falls Ihre Anwendung die Shopify Storefront erweitert (d. h. neue Funktionen für die Kunden des Shops bietet), müssen Sie sie in den Front Store "einfügen". Dazu müssen Sie Shopify über eine API mitteilen, dass Ihre JavaScript-Ressource in den Front Store eingefügt werden soll. Hierfür gibt es zwei gängige Methoden: Script Tag und App Embed Block. Es gibt auch die Möglichkeit, das Storefront-Theme direkt mit einigen visuellen Komponenten zu erweitern, indem man App-Blöcke (auch App-Abschnitte genannt) verwendet.

Die Entwicklung der kundenorientierten Anwendung ist vielleicht der schwierigste Teil des gesamten Prozesses. Normalerweise erweitern Sie das Standardverhalten des Frontstores oder setzen es sogar außer Kraft. Dabei müssen Sie sicherstellen, dass die Anwendung auf verschiedenen Shopify-Themes und mit verschiedenen Shop-Einstellungen funktioniert und dass sie in einer unvorhergesehenen Situation nichts kaputt macht. Außerdem kann es immer vorkommen, dass andere Anwendungen von Drittanbietern mit Ihrer App interferieren.

Bei der Front Store UI sollten Sie auch auf die Leistung und Größe Ihrer App achten.

Die Entwicklung der Shopify-App-Entwicklung

Ich habe Ihnen zwar bereits gesagt, dass die Entwicklung einer Shopify-Anwendung im Grunde eine Webanwendung ist, aber diese Aussage ist nur teilweise richtig. Im Jahr 2021 führte Shopify das Konzept der Checkout-Erweiterungen ein. Davor war es nicht möglich, die Funktionalität des Checkouts mit einer Shopify-App zu erweitern. In dieser Hinsicht ist die Erfahrung der Entwickler anders als bei einer Web-App, da sie in einer sehr begrenzten Umgebung stattfindet (z. B. können Sie nur eine bestimmte Menge an vorbereiteten React-Komponenten verwenden), und die Build- und Release-Prozesse werden von Shopify durchgeführt.

Es ist möglich, dass Shopify diesen Ansatz in Zukunft auch in anderen Bereichen verfolgen wird, um mehr Kontrolle über Anwendungen von Drittanbietern zu haben. Infolgedessen wird sich die Entwicklung von Shopify-Apps weiter von der Entwicklung von Web-Apps entfernen.

Digismoothie Tech Stack

Schauen wir uns die Technologien an, die wir bei Digismoothie für die Entwicklung von Shopify-Apps verwenden.

‍

Sie können mehr über die von uns verwendeten Technologien in unserer Wissensdatenbank erfahren.

Fazit

Ich hoffe, Sie haben gelernt, was es bedeutet, eine Shopify-Anwendung aus technischer Sicht zu erstellen und welche Technologien verwendet werden können.

Lassen Sie uns zum Schluss noch einmal auf die eingangs gestellte Frage zurückkommen. Ist es ein Problem für einen Ingenieur mit einem Hintergrund in der Webentwicklung, einem Team beizutreten, das an Shopify-Anwendungen arbeitet? Ich würde sagen, definitiv nicht. Wenn ein Ingenieur ein gutes Verständnis der Konzepte und Technologien hat, die in der modernen Web-Anwendungsentwicklung verwendet werden, kann er sehr schnell einsteigen. Das Wissen über das Shopify-Ökosystem und die APIs wird sich Schritt für Schritt einstellen.