Eine der Fragen, die wir oft hören, wenn wir mit Entwicklern oder technischen Leitern über unsere Arbeit sprechen, ist: Was genau ist eine Shopify-App und welche Tools und Technologien benötigt man für deren Entwicklung? Eine weitere häufige Frage ist: Ist es ein Problem, wenn ich keine Erfahrung mit der Entwicklung von Shopify-Apps habe?
Lassen Sie uns diese Fragen beantworten, indem wir auf verschiedene technologische Aspekte der Shopify-App-Entwicklung eingehen.
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 von einer Web-App unterscheidet
Wir sehen eine Shopify-App als eine Standard-Webanwendung, die jedoch über eine API eng mit der Shopify-Plattform verknüpft ist. Dies hat mehrere Auswirkungen:
- Für die Entwicklung einer Shopify-App können Sie dieselben Technologien wie für Web-Apps verwenden. Sie sind nicht auf eine bestimmte Technologie beschränkt (obwohl bestimmte Technologien die Arbeit erleichtern können – dazu später mehr).
- Normalerweise müssen Sie sowohl Backend als auch Frontend entwickeln.
- Sie sind für das Hosting und den Betrieb der Anwendung verantwortlich.
- Sobald die App von Shopify genehmigt wurde, liegt auch der Release-Prozess vollständig in Ihrer Hand.
Aus Sicht des Händlers ist Shopify Software-as-a-Service (SaaS), genau wie Shopify-Apps. Das bedeutet, dass ein Händler nicht mit Code interagieren muss, um Ihre Anwendung zu installieren.
Komponenten einer Shopify-App
Wir identifizieren drei logische Komponenten, die eine Shopify-App typischerweise besitzt:
- Händler-Admin
- Webhook-Verarbeitung
- Kundenorientierte Anwendung (Storefront-UI)
Von diesen drei ist die letzte nicht zwingend erforderlich. Es hängt von der Funktionalität ab, die Sie den Händlern bieten möchten. Zum Beispiel besteht unsere App Candy Rack aus allen drei Komponenten, während Loyal nur die ersten beiden Teile umfasst.
Händler-Admin
Der Händler-Admin ist ein Dashboard, in dem der Händler die Anwendung einrichtet und konfiguriert. Shopify empfiehlt, den Händler-Admin innerhalb der Shopify-Oberfläche bereitzustellen (sogenannte eingebettete Anwendung). Das bedeutet, dass Sie die App mithilfe eines iframes in die Shopify-Administration einbetten.
Eingebettete Anwendungen haben einige Einschränkungen:
- Aufgrund der Funktionsweise der Authentifizierung 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 kann effizient sein, React für das Frontend zu verwenden, da Shopify entsprechende Bibliotheken bereitstellt: Die Polaris UI-Bibliothek sorgt dafür, dass Ihre UX konsistent mit dem restlichen Shopify-Admin bleibt, und App Bridge fungiert als Frontend-Brücke, die Ihrer im iframe laufenden Anwendung Shopify-Kontextdaten liefert.
Der Händler-Admin ist auch der erste Berührungspunkt zwischen Ihrer App und einem Händler und der Ort, an dem der Installationsprozess abgewickelt wird. Die Installation bedeutet im Grunde, die Berechtigungen zu erhalten, um über OAuth auf die Daten des Händlershops zuzugreifen.
Dies ist auch der Teil der Anwendung, in dem Sie sich um die Abrechnung kümmern, falls Ihre Anwendung nicht kostenlos ist.
Webhook-Verarbeitung
Webhooks sind der Weg, auf dem Shopify Ihre Anwendung über verschiedene Ereignisse in den installierten Shops informiert: zum Beispiel bei der Erstellung einer neuen Bestellung oder einer Produktaktualisierung. Sie entscheiden, welche Ereignisse Sie abonnieren möchten.
Die Geschäftslogik, die basierend auf dem empfangenen Ereignis ausgeführt werden muss, sollte unbedingt von Hintergrundprozessen (Background Workers) verarbeitet werden. Andernfalls könnten Sie Ihre Anwendung leicht überlasten. Sie können auch in Erwägung ziehen, den Empfang von Ereignissen außerhalb Ihrer Anwendung zu delegieren.
Kundenorientierte Anwendung (Storefront-UI)
Falls Ihre Anwendung die Shopify-Storefront erweitert (d. h. sie bietet neue Funktionen für Shop-Kunden), müssen Sie sie in den Storefront-Bereich „einfügen“. Dazu müssen Sie Shopify über eine API anweisen, Ihre JavaScript-Ressource in den Storefront-Bereich zu injizieren. Die zwei gängigsten Methoden hierfür sind Script Tag und App Embed Block. Es besteht zudem die Möglichkeit, das Storefront-Theme direkt mit visuellen Komponenten über App Blocks (auch App-Sektionen genannt) zu erweitern.
Die Entwicklung der kundenorientierten Anwendung ist möglicherweise der anspruchsvollste Teil des gesamten Prozesses. Normalerweise erweitern oder überschreiben Sie das Standardverhalten des Storefront-Bereichs. Dabei müssen Sie sicherstellen, dass dies mit verschiedenen Shopify-Themes und unterschiedlichen Shop-Einstellungen funktioniert, ohne in unvorhersehbaren Situationen Fehler zu verursachen. Zudem können jederzeit andere Drittanbieter-Apps mit Ihrer App in Konflikt geraten.
Bei der Storefront-UI sollten Sie auch besonders auf die Leistung und Größe Ihrer App achten.
Die Entwicklung der Shopify-App-Entwicklung
Obwohl ich zuvor sagte, dass die Erstellung einer Shopify-Anwendung im Grunde Webanwendungsentwicklung ist, stimmt das nur teilweise. 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 diesem Aspekt unterscheidet sich die Entwicklererfahrung von einer Web-App, da sie in einer sehr eingeschränkten Umgebung stattfindet (z. B. können Sie nur einen festgelegten Satz vorbereiteter React-Komponenten verwenden) und die Build- sowie Release-Prozesse von Shopify verwaltet werden.
Es ist möglich, dass Shopify in Zukunft in anderen Bereichen zu diesem Ansatz übergeht, um mehr Kontrolle über Drittanbieter-Anwendungen zu haben. Infolgedessen wird sich die Shopify-App-Entwicklung weiter von der klassischen Webentwicklung entfernen.
Der Tech-Stack von Digismoothie
Sehen wir uns an, welche Technologien wir bei Digismoothie verwenden, um Shopify-Apps zu entwickeln.
Mehr über die von uns verwendeten Technologien erfahren Sie in unserer Wissensdatenbank.
Fazit
Ich hoffe, Sie haben verstanden, was es technisch bedeutet, eine Shopify-Anwendung zu entwickeln und welche Technologien dabei zum Einsatz kommen können.
Kommen wir abschließend auf die eingangs gestellte Frage zurück. Ist es für einen Ingenieur mit Hintergrund in der Webentwicklung ein Problem, in einem Team zu arbeiten, das Shopify-Anwendungen entwickelt? Ich würde sagen: definitiv nicht. Wenn ein Ingenieur ein gutes Verständnis für Konzepte und Technologien der modernen Webentwicklung hat, kann er sich sehr schnell einarbeiten. Das Wissen über Shopify-Ökosysteme und APIs kommt dann Schritt für Schritt hinzu.
