Git nutzen für Theme Entwicklung

Git nutzen für Theme Entwicklung

Alexander Wolf 18. September 2015 6

Wie kann eure Theme Entwicklung noch professioneller werden?

Ein großer Punkt ist:

Git.

Git ist ein Tool für Versionsverwaltung, d.h. wir verwalten damit verschiedene Versionen unserer Software.

In diesem Fall von unseren Themes.

Kurzes Beispiel:

Wir haben ein super tolles Theme.

Arbeiten fleißig an diesem Theme und merken irgendwann, dass wir etwas kaputt gemacht haben.

Ja, auch Profis machen mal was kaputt.

Haben wir keine Versionsverwaltung eingesetzt, hätten wir jetzt ein Problem.

Ich kann euch beruhigen: Ihr werdet kein Problem haben.

Weil ihr Git für eure Theme Entwicklung nutzt!

Warum solltet ihr Git nutzen?

Wie im Beispiel beschrieben, kann es einfach passieren, dass ihr etwas kaputt macht.

Da solltet ihr euch nicht verrückt machen, sondern einfach eine frühere Version wiederherstellen und weiter arbeiten.

Das ist jetzt sehr vereinfacht dargestellt.

Es gibt noch mehr Vorteile.

Falls ihr im Team arbeitet, ist es deutlich einfacher die Änderungen der anderen Teammitglieder zu verfolgen.

Außerdem ist es auch für euch wichtig einen Überblick über den Code bzw. über den Verlauf der Änderungen zu haben.

Das macht euch zu besseren Entwicklern.

Es verändert auch die Art und Weise wie neue Features eingebaut werden, je nach Workflow.

Mit Git werden wir auch später euren Shopware Shop deployen (hochladen).

Die Zeiten wo ihr per FTP Client den ganzen Shop hochgeladen habt, sind vorbei.

Dazu aber bald mehr.

Vorbereitung

Installation

Meistens wird Git mitinstalliert, wenn ihr euren Git Client installiert.

Also einfach Client aussuchen, runterladen und installieren.

Wenn ihr euch intensiver mit dem Thema Git auseinandersetzen wollt dann schaut euch folgende Links an:

Software / Client

Es gibt viele grafische Oberflächen für Git.

So könnt ihr es auch ganz einfach nutzen ohne alle Konsolenbefehle von Git auswendig zu kennen.

Eine Übersicht einiger Clients, probiert einfach etwas aus.

https://git-scm.com/downloads/guis

Wir bei 8mylez nutzen SourceTree.

Aber probieren demnächst GitHub Dekstop aus.

Schreiben gerne einen Erfahrungsbericht.

Bevor es los geht mit unserem ersten Repository, schauen wir uns noch an welche Dateien wir überhaupt versionieren wollen und welchen Workflow wir nutzen werden.

Welche Dateien versionieren?

Mit dieser Frage beschäftigt sich jeder Theme Entwickler irgendwann.

Wollen wir den ganzen Shop versionieren oder nur unser Theme?

Generell sollten wir nur Code versionieren der auch von uns geschrieben ist.

Alles andere macht nur Probleme bei Updates und Bugfixes.

Wenn ihr den ganzen Shop versioniert, dann werden einfach unnötig viele Dateien versioniert und das Hochladen usw. dauert länger.

Es gibt eine Ausnahme.

Einige Theme Entwickler nutzen Git zum deployen (hochladen). Ist super bequem, einfach und cool.

Schauen wir uns demnächst auf jeden Fall auch an.

Nur in diesem Fall müssen wir den ganzen Shop versionieren.

Für alle anderen Fälle gilt: Nur unser Theme.

Workflow

Es gibt verschiedene Workflows die ihr nutzen könnt um Git optimal zu nutzen.

Git ist ein Versionierungstool und nicht nicht nur Backuptool.

d.h. jeden Abend einfach einen Commit machen, sodass es ein Backup vom Theme gibt ist Quatsch.

Könnt ihr natürlich so machen, aber wir empfehlen was anderes:

Feature Branch Workflow

Es gibt den master Branch.

Dieser master Branch ist jederzeit bereit zum Hochladen und muss demnach immer funktionieren.

Das ist wichtig, da ihr jederzeit eine funktionierende Version zur Hand habt.

Alle neuen Anpassungen sind Features.

Und jedes Feature bekommt einen eigenen Branch.

Wir passen unser Theme an und implementieren die neuen Features.

Zum Schluss müssen wir den erstellten Feature Branch in den master Branch mergen (zusammenführen).

Im besten Fall gibt es keine Konflikte und wir können das nächste Feature angehen.

Kurzes Beispiel:

Wir wollen die Logo Größe anpassen wie im Beitrag: http://8mylez.com/blog/logo-groesse-anpassen/

Dazu legen wir einen Branch an mit dem Namen update-logo-size.

Der Name sollte immer kurz beschreiben was gemacht wird.

So könnt ihr später super einfach danach suchen und andere wissen direkt was gemacht wurde ohne das sie den Code studieren müssen.

Nachdem wir alles angepasst haben und zufrieden sind wechseln wir in den master Branch.

Ihr bemerkt, dass sich auch die Dateien anpassen die in dem Ordner liegen.

Wir kriegen den aktuellen Stand vom master Branch.

Unseren update-logo-size Branch führen wir mit dem master Branch zusammen.

Und das neue Feature wurde eingebaut.

Der update-logo-size Branch kann gelöscht werden und wir bauen fleißig weiter.

Am Ende pushen wir den master auf ein Remote Repository, sodass unsere Teammitglieder den Code runterladen (pullen) können um damit zu arbeiten.

Außerdem ist es nochmal ein Backup für uns, falls unser Computer in Flammen aufgeht (oder ähnliches).

Git Hosting Service

Unser Code ist wichtig.

Daher sollten wir diesen online sichern und unseren Teammitgliedern zur Verfügung zu stellen.

Am einfachsten geht das mit Git.

Bevor wir wieder einen eigenen Server aufsetzen und alles verwalten müssen, entscheiden wir uns für einen Git Hosting Anbieter.

Wir nutzen hierfür Gitlab.

GitLab könnt ihr kostenlos nutzen und unendlich viele private Repositorys erstellen.

Wobei bei GitHub nach ein paar privaten Schluss ist.

Entweder veröffentlicht ihr euren Code oder bezahlt für mehr private Repositorys.

Bitbucket ist ebenfalls kostenlos.

Unser erstes Repository

In diesem Beispiel arbeiten wir mit dem Client SourceTree und dem Hosting Anbieter GitHub.

Das Repository legen wir in unserem Theme Ordner an.

Wir benutzen unser FlatResponsive Theme als Platzhalter.

themes/Frontend/FlatResponsive

Wenn ihr noch keins angelegt habt, dann checkt das aus: http://8mylez.com/blog/shopware-5-theme-erstellen/

Das Respository ist jetzt lokal auf unserem Computer.

Damit wir auch später den Code pushen können, legen wir bei GitHub auch ein Respository an.

Aber eines nach dem anderen.

Lokales Repository anlegen

Öffnet SourceTree.

Dazu einfach auf "Neues Repository". Wählt "Lokales Repository erstellen".

Neues Repository erstellen

Ein paar Informationen eintragen.

Den Ordner mit unserem Theme zuweisen.

Und fertig!

Remote Repository anlegen

Ruft github.com/ auf.

Anmelden oder registrieren.

Klickt auf "New repository".

GitHub new repository

Ein paar Informationen eingeben.

Wenn ihr nicht wollt, dass der Code öffentlich ist dann wählt private aus.

Informationen für das GitHub Repository

Kopiert euch den Link vom remote Repository.

Bei uns ist es

https://github.com/8mylez/flatresponsive.git

Die Repositorys sind angelegt und wir müssen diese noch verknüpfen.

Remote Repository verknüpfen

Ganz einfach in SourceTree unter Einstellungen.

SourceTree Einstellungen

Auf Hinzufügen klicken.

Als Name origin eintragen und den Pfad bei GitHub von unserem remote Repository rauskopieren.

SourceTree - Remote Repository hinzufuegen

Alles ist jetzt verknüpft und wir können den Code committen und pushen!

Der erste Commit und Push

Der erste Commit wird der Initial commit sein.

Damit fügen wir alle Daten hinzu die von Anfang an dabei sind, sodass wir eine Basis haben mit der wir arbeiten.

Ausstehende Änderungen

Oben Links auf Commit, eine kurze Beschreibung was wir gemacht haben (beim ersten Commit "Initial commit") eingeben und Dateien auswählen die versioniert werden bzw. die Änderungen.

Initial commit

Und abfeuern.

Beim Entwickeln macht ihr mehrere Commits.

Denkt immer daran eine Nachricht zu hinterlassen, sodass ihr und eure Teammitglieder später noch wisst was gemacht wurde.

Der erste Branch

Da wir den Feature Branch Workflow nutzen, legen wir für unser erstes Update einen Branch (Zweig) an.

Dazu klicken wir auf Zweig.

Wir wollen die Logo Größe anpassen.

Unser Branch heißt also update-logo-size.

Wie ihr das Logo anpassen könnt, erfahrt ihr in dem Beitrag: http://8mylez.com/blog/logo-groesse-anpassen/

Nachdem alle Anpassungen vorgenommen wurden, können wir einen Commit abfeuern.

Zum master Branch wechseln und auf Zusammenführen.

Den update-logo-size Branch anwählen, einen Haken setzen bei

"Einen neuen Commit erstellen, selbst wenn fast-forward möglich ist"

und das ganze mergen (auf ok klicken).

Jetzt ist alles im master Branch drin. Immer darauf achten, dass dieser immer funktionsfähig sein muss.

Rechtsklick auf den update-logo-size Branch und löschen.

Weg damit.

Zum Schluss den master Branch auf GitHub pushen (hochladen).

Dazu push auswählen.

Den master Branch anklicken. Und abfeuern.

Das war's auch schon!

Zusammenfassung

Uff.

War gar nicht so wenig was wir heute alles gemacht und gelernt haben.

  • Wir haben Git und etwas vom Drumherum kennengelernt
  • Repositories erstellt: lokal und remote
  • Den ersten Commit gemacht
  • Einen ersten Feature Branch erstellt
  • Alles auf GitHub gepusht

Es ist nicht so einfach und verwirrt am Anfang auch gern etwas.

Ich habe lange gebraucht es zu verstehen.

Aber es lohnt sich. Glaubt mir.

Wartet ab bis wir uns das deployen mit Git anschauen.

Weiterführende Links

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

6 Kommentare

  • Hört sich gut an. Habt ihr für das Deployment per GIT auch schon eine Lösung?
    Stehe vor dem Deployment Problem, und Shopware scheint dafür noch nicht so recht gerüstet zu sein (z.B. es per composer zu machen, hab da nur ein Repo gefunden wo in diese Richtung experimentiert wird).
    Bin jetzt auch eher für diesen Weg: Eigenen Code ins GIT --> und auf einem Staging/Live Server ein Git-Checkout per rsync in die Docroot syncen. Plugins die die DB-Struktur ändern, sind dann halt auch immer wieder ein Problem.

  • Hey Siegi,

    für das Deployment haben wir mehrere Lösungen. Es kommt ganz darauf an wie die Ausgangssituation ist. Im Idealfall versionieren wir nur das Theme und einzelne Plugins.

    So können wir dann über einen Git Push alles entsprechend hochladen. Dafür muss das Repository auf dem Server vorher aber korrekt erstellt werden.

    Wir haben auch schon öfter von Capistrano oder Mina gehört, womit es wohl auch sehr einfach gehen soll.

    Nach einem erfolgreichen Deploy musst du die Plugins im Backend noch "updaten". Damit löst sich das Verändern der DB Struktur einschränken.

    Zwischen des Hochladens und dem Klick auf "Update" beim Plugin, entsteht zwar eine Lücke, jedoch machte dies bei uns bisher keine Probleme. Sollte das für dich keine Endlösung sein, gibt es im Internet sehr viele Möglichkeiten für diese Zero-Downtime Deployments. Docker könnte da evtl. auch interessant sein für dich.

    Andernfalls reicht es manchmal auch, wenn das Plugin übers Backend manuell hochgeladen wird.

    Gruß
    Alexander
  • Hallo Atilla,

    ich wünsche dir viel Erfolg! Bei Fragen einfach melden :)

    Gruß
    Alexander

Was denkst du?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Logo Größe anpassen mit Less für Shopware 5
Plugin Theme anpassen
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Theme: Eigenes Listing Layout erstellen
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Staging Umgebung – Was ist das und warum brauchst du eine?
© 2017 by 8mylez. Powered by Goltfisch GmbH.