Mein erster onlineshop
mit shopware 5
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:
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 Elemente, 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.
Früher war es XAMPP oder MAMP. Heutzutage arbeiten wir ausschließlich mit Docker. Docker ist eine Containersoftware, mit der sich virtuelle Maschinen ganz einfach erstellen und verwalten lassen. So erstellen wir pro Plugin bzw. Theme einen eigenen Container und haben eine 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 unseren 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
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.
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 neu geladen wird) analysieren.
Auch hier arbeiten wir ständig an der Optimierung unserer Prozesse, sodass wir immer mehr Features einsetzen können.
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 schiefgeht, 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).
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.
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
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.
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.
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?
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Über 8mylez
✓ 38 Mitarbeiter
✓ Shopware Gold Partner
✓ 40.000+ Plugin Downloads
✓ 160+ betreute Shops
✓ Full-Service Shopware Agentur
✓ 70 Shopware Videos auf Youtube
✓ Alle Shopware Zertifizierungen
Social
wenn Ihr im Team mit GIT arbeitet, teilt Ihr Euch dann lokal eine Datenbank zum Entwickeln, wenn Ihr an einem Projekt gemeinsam arbeitet oder hat jeder ein vollkommen eigenständiges Projekt und Ihr teilt nur die Sourcen?
Wie macht Ihr das z.B., wenn ein User lokal Artikel anlegt?
Gruß
David
jeder entwickelt vollständig getrennt und lokal bei sich auf dem Rechner. Die wenigsten Anpassungen erfordern es, dass die User bei allen gleich sein müssen, daher stellt das kein Problem dar.
Im Prinzip entwickeln wir immer mit Demodaten, da der Code mit allen Daten funktionieren muss unabhängig davon wie der Benutzer heißt oder die Artikelbilder ausschauen.
Gruß
Alexander
da ich mir auch eine Entwicklungsumgebung mit Atom für shopware erstellen möchte - wäre ich wirklich froh, wenn Du ggf. einmal beschreiben könntest - welche Atom-Plugins Ihr so verwendet. ggf. wäre hierzu vielleicht auch ein eigener Beitrag zu empfehlen....
Ich bitte um Rückmeldung.
vielen Dank für deinen Kommentar!
Ich schreibe es auf unsere Feedback Liste und gebe dir Bescheid, sofern dies umgesetzt wird!
Gruß
Alexander
Wir sind derzeit auf der Suche nach Tools für Linux, mit denen wir diverse Browser emulieren oder auch abbilden können. Firefox und Chrome ist bei uns bereits installeirt, aber damit koenenn wir nru bedingt Mobile Geräte oder auch Mobile Viewports abdecken. Blisk um simultan Desktop und Mobile Viewports in einer Side by Side ansicht zu testen ist leider noch nicht für Linux verfügbar.
im Prinzip schauen wir nur mit den Chrome Developer Tools die einzelnen Viewports durch. Wir haben aber noch einige Testgeraete bei uns im Unternehmen und testen im letzten Schritt dann noch mit echten Geraeten.
Wenn der Code gut strukturiert ist und nichts exotisches verwendet wird, funktioniert alles auch.
Ansonsten waere evtl. auch https://www.browserstack.com/ was fuer dich.
Gruß
Alexander
Beste Grüße,
Atilla
PHPStorm kennen wir auch! Ich persönlich mag es eher mit "lightweight" IDEs zu arbeiten. PHPStorm ist sehr cool und hat viele Funktionen, aber ich arbeite einfach gerne mit solchen eher kleineren Editoren. Ist Geschmackssache. Für Atom gibt es soweit ich weiß noch kein Shopware Plugin.
Gruß
Alexander
Was denkst du?