Shopware Entwicklung mit Git – davon habe ich vor ein paar Wochen gelesen, und war gleich neugierig. Seid ihr es auch? Na dann super – Hier geht`s ohne Umwege ans Eingemachte. Mit Git kann man online seinen Code speichern und mit anderen im Team am Code arbeiten. In diesem Beispiel verwende ich den kostenlosen Account von bitbucket und die Software SourceTree. Statt BitBucket könnte man auch das bekanntere GitHub nutzen, der Weg ist ähnlich.

Shopware Code Versionierung mit Git

In diesem und diesem Artikel von Jamitlabs wird auch noch einmal sehr gut beschrieben, was der Sinn und Zweck von Versionierung ist, welche Vorteile sie mitbringt und welche alternative Systeme genutzt werden können.

Inhaltsübersicht:

Sourcetree installieren

Als erstes gehen wir auf die sourcetree Seite und laden uns dort die aktuelle Version runter. Viel Auswahl gibt es nicht und die Installation geht auch zügig und problemlos. Wenn wir das Programm öffnen werden wir nach unserem Login für Bitbucket oder GitHub gefragt, daher sollten wir dort zunächst einen Account anlegen.

Shopware Entwicklung mit Git - Sourcetree Download

Bitbucket Account anlegen

So der 2. Punkt ist auch sehr einfach, wir gehen einfach auf https://bitbucket.org und klicken auf den grünen Get started for free Button um uns einen Account anzulegen. Ist der Account angelegt und die Mail bestätigt könnt ihr loslegen und euer erstes Repository anlegen.

Repository anlegen

Klickt oben im Menü auf Repositories und dann auf Create repository. In diesem Beispiel lege ich ein Repository für unser erstes kommendes Shopware 5 Theme „byoutea“ an. Hier seht ihr die Einstellungen:

Shopware Entwicklung mit Git - Repository anlegen

Shopware Entwicklung mit Git – Repository anlegen

Bitbucket mit SourceTree verbinden

Wenn ihr bei SourceTree eure Userdaten von Bitbucket eingegeben habt klickt ihr auf Remote und bekommt dann das zuvor angelegte Projekt angezeigt.

Shopware 5 Entwicklung mit Git - SourceTree Anbindung

Shopware 5 Entwicklung mit Git – SourceTree Anbindung

Klickt einfach mal drauf, dann kann es weitergehen.

Als nächstes wählt ihr den Ordner aus, der verbunden werden soll. In diesem Beispiel habe ich eine Shopware 5 Installation lokal installiert. Im Ordner Themes/Frontend hatte ich einen Ordner namens byoutea den ich kurz auf dem Schreibtisch zwischengeparkt und im eigentlichen Ordner gelöscht habe. Dann habe ich den vorher noch da gewesenen Ordner in SourceTree als Zielpfad definiert. Nach der Aktion war der byoutea Theme Ordner also wieder da, jedoch noch leer.

Shopware 5 Entwicklung mit Git - Lokaler Ordner

Shopware 5 Entwicklung mit Git – Lokaler Ordner

Jetzt bekommen wir das Projekt auch im Lokal Tab angezeigt und können unsere eigentlichen Dateien aus dem Ordner byoutea  wieder da rein legen, wo sie hergekommen sind. Wenn ihr gerade mit einem neuen Projekt bei = startet ist das natürlich nicht relevant. Normaaalerweise macht man es so, dass man über die Zeile Zielpfad in den htdocs Ordner navigiert und dort mit einem Klick auf Klon einen neuen Ordner erstellt, in dem später die Dateien gespeichert werden. Zurück zum Geschehen…

So sieht es nun also ungefähr in meinem Frontend Ordner aus:

Shopware 5 Entwicklung mit Git - Dateien im Finder

Shopware 5 Entwicklung mit Git – Dateien im Finder

Was hat sich geändert? Ich bekomme aufgrund der insgesamt 11 Dateien, die ich abgelegt habe, nun in der Sidebar eine 11 angezeigt und kann nun den allerersten Upload in mein Repository durchführen. Hierfür klicke ich auf das mit 11 markierte Projekt und bekomme dieses Fenster angezeigt:

Shopware 5 Entwicklung mit Git - Erster Upload

Shopware 5 Entwicklung mit Git – Erster Upload

Der erste Commit

Vor dem ersten Commit wird man aufgefordert einen Usernamen und seine E-Mail Adresse einzugeben.

Shopware 5 Entwicklung mit Git - SourceTree User

Shopware 5 Entwicklung mit Git – SourceTree User

Danach können die Dateien in der Liste markiert, und der erste Commit ausgeführt werden. Im Kommentarfeld erscheint nun der Username – schreiben Sie beim ersten Commit: initial commit als Kommentar.

Hat es funktioniert sieht man nun die Liste der Dateien im Bereich Source.

Shopware 5 Entwicklung mit Git - BitBucket Dateien

Shopware 5 Entwicklung mit Git – BitBucket Dateien

Und bei SourceTree wird alles grün angezeigt, wenn alles funktioniert hat.

Shopware 5 Entwicklung mit Git - SourceTree nach Commit

Shopware 5 Entwicklung mit Git – SourceTree nach Commit

Commit, Comment, Push

Spätere Updates können dann, nach dem Commit & Kommentieren mit dem Push Button hochgeladen werden. Außerdem empfiehlt es sich, zusätzlich Zweige zu den unterschiedlichen Anpassungen anzulegen. Der Ordner, der nun mit BitBucket verknüpft ist, liegt bei mir auch im Ordner meiner lokalen Shopware 5 Installation. So kann ich schnell und einfach das Design anpassen und Änderungen vornehmen die ich dann, wenn ich zufrieden bin, in mein Repository hochlade und natürlich kommentiere.

Wenn man einmal damit angefangen hat möchte man es nicht mehr missen, es macht auch ein bißchen süchtig, also seid vorsichtig.

Nicht vergessen: Wenn Ihr less Dateien anpasst, und ihr keine Änderungen seht, muss das Theme kompliwert werden. Wenn ihr  jedoch tpl Dateien ändert solltet ihr den Shopcache löschen, falls ihr keine Änderungen zu sehen bekommt.

Phpstorm und Git Installation

Nachdem ich den oben beschriebenen Prozess durchlaufen habe öffnete ich das Projekt in meinem Editor. Hier, also in Phpstorm wurde mir angezeigt, dass ich auch auf dem Rechner noch Git installieren soll.

Shopware Entwicklung mit Git

Im ersten Bild sieht man, dass in der Ecke unten Cant load Git steht. Klickt man auf den Download Button gelangt man zur Git Seite. Da kann man das Paket runterladen kann. Der Rest ist Standard-Prozedere.

Shopware Entwicklung mit Git

 

Video Tutorial: Die ersten Schritte mit Bitbucket & Sourcetree

Vor kurzem haben wir auch dieses Video hier erstellt in dem wir die oben beschriebenen Punkte noch einmal live vormachen, wer mag kann es sich hier oder auf YouTube anschauen – außerdem freuen wir uns über jeden neuen Abonnenten unseres Channels.

Playlist:

01:15 – Git Repository bei bitbucket löschen
01:30 – Git Repository bei bitbucket anlegen
03:25 – Remote Repository in Sourcetree klonen & lokales Repository anlegen
05:40 – Initial Commit durchführen und die erste Version speichern
06:30 – Push Funktion ausführen und Dateien bei bitbucket hochladen
07:25 – Branches anlegen für bestimmte Anpassungen
08:50 – Alternativer Weg das lokale und remote Repository anzulegen

Weiterführende Links

Atlassion.com – Einführung in Git & wie man Repositorys anlegt.
https://confluence.atlassian.com/bitbucket/create-a-git-repository-759857290.html
Alternativer Artikel zum Thema:
http://8mylez.com/blog/git-nutzen-fuer-theme-entwicklung/
Jamitlabs Beitrag zum Thema Git und Sourcetree:
https://jamitlabs.com/dev/2016/9/using-git-with-sourcetree-part-one
https://jamitlabs.com/dev/2016/9/using-git-with-sourcetree-part-two
Thomas Toffalori`s Beitra gzum Theme Sourcetree & bitbucket:
https://www.toffalori.com/2018/07/23/git-mit-sourcetree-und-bitbucket-neues-projekt-anleg/Codestellen finden:
http://forum.shopware.com/themes-und-design-f101/less-dateien-und-codestellen-finden-mit-firebug-t32546.html
Zur deutschen BitBucket Seite geht es hier entlang:
https://de.atlassian.com/software/bitbucket

Anmerkung: Dieser Beitrag wurde 2016 erstellt und zuletzt am 08.07.2019 aktualisiert, unter anderem wurde das Video neu erstellt.

great2gether hat 4,94 von 5 Sternen | 29 Bewertungen auf ProvenExpert.com