Welche Tools benutzen wir für die Entwicklung eines Shopware Themes?

Welche Tools benutzen wir für die Entwicklung eines Shopware Themes?

Alexander Wolf 10. Oktober 2017 0

Ein eigenes Theme zu Entwickeln ist nicht immer einfach. Die richtigen Tools unterstützen dich dabei und vereinfachen das Ganze etwas.

Allerdings gibt es sehr viele Tools, die benutzt werden können und auch sicherlich von verschiedenen Entwicklern benutzt werden.

Da wir täglich an eigenen Themes sowie Themes unserer Kunden arbeiten, möchte ich dir unsere verwendeten Tools vorstellen. Vielleicht ist auch ein neues hilfreiches Tool für dich dabei.

Dabei stellen wir nicht nur unseren Code Editor vor, sondern Tools für den gesamten Prozess von dem grafischen Entwurf bis zum Upload in den Live Shop.

Unsere verwendeten Tools:

  • Adobe Photoshop CC 2017
  • Docker
  • Atom
  • Google Chrome & Chrome Developer Tools
  • Git
  • Sourcetree
  • GitLab.com
  • Transmit
  • Hyper

Adobe Photoshop CC 2017

Adobe Photoshop CC 2017 Logo

Link zum Tool

Unsere Grafiker arbeiten ausschließlich mit Photoshop, daher ist es wichtig, dass ich als Entwickler das Programm ebenso installiert habe. 

Als Entwickler muss ich nämlich nicht nur den Entwurf genau einsehen können, sondern auch die einzelnen Komponenten abmessen, ausblenden, einblenden usw. können müssen um das Layout / Design auch verstehen zu können.

Dabei arbeiten unserer Grafiker pixelgenau, sodass ich mich als Entwickler beim Schreiben des Frontend Codes auf die genauen Angaben in dem Entwurf konzentrieren kann. Unsere Grafiker haben bereits Erfahrung mit Shopware und wissen daher auch beim Designen worauf sie zu achten haben.

Neben den exakten Größen der einzelnen Elementen, finde ich noch Farben, Schattierungen, Hover Effekte und andere grafische Finessen in der PSD (Photoshop Dokument).

Auch zum Ausschneiden verschiedenster Grafiken eignet sich Photoshop sehr, da ich mit wenigen Klicks die isolierte Ebene exportieren, sauber zuschneiden und in meinem Theme verwenden kann.

Docker

Docker Logo

Link zum Tool

Früher war es XAMPP oder MAMP. Heutzutage arbeiten wir ausschließlich mit Docker. Docker ist eine Container Software, mit der sich virtuelle Maschinen ganz einfach erstellen und verwalten lassen. So erstellen wir pro Plugin bzw. Theme einen eigenen Container und haben ein isolierte Umgebung mit den nötigen Tools um Shopware zum Laufen zu bekommen. 

Wir benutzen eine fertige Konfiguration von DNH Soft (einer Shopware Agentur aus Bulgarien)

Die Plugins bzw. Themes beeinflussen sich nicht gegenseitig. So ist sichergestellt, dass die entstehenden Probleme keine Seiteneffekte anderer Plugins sind oder noch anderer Datenmüll irgendwo in den Tiefen der Shopware Installation rumlungert.

Eine neue Entwicklungsumgebung ist innerhalb weniger Minuten eingerichtet, installiert und bereit bearbeitet zu werden.

Bei mir funktioniert alles ohne Probleme!

Solche Ausreden einiger Arbeitskollegen gehören mit Docker der Vergangenheit an 😄

Sogar mehrere Shopware Versionen lassen sich damit problemlos betreiben, damit das Plugin auch in älteren Versionen ordentlich getestet werden kann.

Mit Docker lässt sich natürlich noch sehr viel mehr machen. Wir arbeiten an unserem Prozessen und versuchen in Zukunft Docker optimal zu nutzen und alle vorteilhaften Features zu integrieren.

Diese Scripte helfen dir dabei Shopware lokal mit Docker zu verwenden

Atom

Atom Logo

Link zum Tool

Mein persönlicher Lieblingseditor! Der Codeeditor ist kostenlos, open source, leichtgewichtig und erweiterbar. Bevor du dir hier von mir was einreden lässt, schlage ich vor du testest das Ganze selbst und gibst Feedback in den Kommentaren!

Der Editor basiert auf Webtechnologien und ist mit HTML5, CSS3 und JS entwickelt worden.

Mit Atom arbeite in an allen möglichen Codedateien: .php, .tpl, .less und .js. So kann ich alle Shopware Code Arbeiten mit einem Editor erledigen.

Im Grunde genommen funktioniert es mit jedem einfachen Text Editor. Da sollte euer persönlicher Geschmack entscheiden. 

Aufgrund unzähliger kostenloser Plugins für Atom, lässt sich der Editor einfach erweitern und anpassen.

Google Chrome & Chrome Developer Tools

Google Chrome Logo

Link zum Tool

Zum Entwickeln verwende ich Chrome von Google. Shopware selbst empfiehlt diesen Browser. 

Besonders gut gefallen mir die Chrome Developer Tools. Damit lässt sich der Code im Frontend untersuchen, sodass auch der passende Code gefunden und bearbeitet wird.

Die Developer Tools benutzen wir um den Code im Frontend untersuchen zu können. Außerdem lassen sich damit prima Ajax Aufrufe (immer wenn die Seite nicht neugeladen wird) analysieren.

Auch hier arbeiten wir ständig an der Optimierung unserer Prozesse, sodass wir immer mehr Features einsetzen können.

Git

Git SCM Logo

Link zum Tool

Jedes Plugin bzw. Theme, welches wir entwickeln, wird bei uns mit Git versioniert. Da wir als Team an den Projekten arbeiten, ist Git für uns unverzichtbar. Ich möchte mir das Chaos nicht einmal vorstellen, was herrschen würde, wenn wir ohne Versionierungverwaltungssystem arbeiten würden.

Git vereinfacht die Teamarbeit ungemein und sorgt dafür, dass der Code nachvollziehbar und überschaubar bleibt! Gerade wenn etwas schief geht, bin ich froh, dass mit Git schnell ein alter Codestand geladen werden kann und ich nicht von vorne oder vom letzten Backup neu anfangen muss.

Je nach Serversetup lässt sich mit Git auch sehr einfach der aktuellste Stand auf den Server laden (Deployment).

Sourcetree

Sourcetree Logo

Link zum Tool

Passend zu Git nutzen wir Sourcetree als Client. Mit Sourcetree lässt sich Git wunderbar auch über eine grafische Oberfläche verwenden. 

Dies erleichtert den Einstieg und bringt auch die Terminal Muffel dazu mit Git zu arbeiten.

Empfehlen würde ich dir dennoch beides. Schau dir ruhig die Terminal Befehle für Git an. Meist kann man damit schneller arbeiten. 

Letztendlich kommt es auch hier auf den persönlichen Geschmack an.

GitLab.com

GitLab.com Logo

Link zum Tool

Unsere Git Repositories hosten wir bei GitLab.com. Alternativ auf GitHub.com. Sind beides sehr gute Hoster. Letztendlich sind wir zu GitLab gewechselt, weil uns der Open Source Gedanke sehr angesprochen hat.

Dabei sind die Plugins unserer Kunden natürlich in privaten Repositories untergebracht. Kostenlose Plugins oder Code den wir selbst auch offen halten wollen, packen wir auf GitHub.

Unser GitHub Profil: 8mylez Organization

Transmit

Panic Transmit

Link zum Tool

Unschlagbarer FTP Client für Mac. Kann einiges mehr als nur FTP, jedoch verwenden wir diesen meist nur dafür. Selbstverständlich nicht um neue Shops einzurichten. 

Das ist so 1990!

Eher um Bugs besser debuggen zu können, da es oft sehr viele Plugins und starke Theme Anpassungen gibt, müssen wir uns den Code direkt auf dem Server des Kunden anschauen.

Aber kleinere Uploads, z.B. Plugins oder Themes werden damit auch schnell erledigt.

Deployments funktionieren damit auch. Dabei kommt es aber auf die Datenmenge an, da die Übertragung oft sehr langsam ist.

Hyper

Hyper Logo

Link zum Tool

Ein Terminal, welches komplett in HTML/CSS/JavaScript geschrieben ist und alle nötigen Funktionen mitbringt. 

Damit kommen wir sicher und einfach per SSH auf den Server des Kunden um z.B. neue Shops zu installieren. Cache leeren und Staging Umgebungen einrichten lassen sich damit auch sehr gut.

Und zu guter Letzt natürlich auch sehr hilfreich bei der Bugsuche. Mit dem FTP Client ist es manchmal sehr langsam, daher lassen sich viele Arbeiten mit Hyper effizienter erledigen.

Als Shell benutze ich zsh in Verbindung mit Oh My Zsh.

Abschluss

Mit diesen Tools arbeiten wir tagtäglich an Shopware Plugins und Themes. 

Welche Erfahrungen hast du gemacht? 

Welche Tools benutzt du für deine Entwicklung von Plugins und Themes?

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

Noch keine Kommentare, sei jetzt der erste! ;)

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
Theme: Eigenes Listing Layout erstellen
Logo Größe anpassen mit Less für Shopware 5
Staging Umgebung – Was ist das und warum brauchst du eine?
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Shopware Logo aus dem Footer entfernen
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
© 2017 by 8mylez. Powered by Goltfisch GmbH.