Das heutige Thema ist Shopware Entwicklung mit PHPStorm + Shopware Plugin.

Inhaltsübersicht:

1. Shopware Entwicklung mit PHPStorm – Was ist PHPStorm genau?

PHPStorm ist eine sogenannte Developer IDE bzw. eine integrierte Entwicklungsumgebung für unterschiedliche Codesprachen, wie zum Beispiel das gute alte PHP und wurde von der Firma Jetbrains entwickelt. Das ist übrigens eine bemerkenswerte Software-Schmiede mit 650 Angestellten, die in den letzen 15 Jahren mit über 300 Awards gekürt worden sind.

In der Shopware-Developer Community ist man sich einig, dass PHPStorm aktuell zur Entwicklung von Shopware Komponenten wie Plugins oder Themes das Maß aller Dinge ist. Dies liegt vor allem an dem sehr praktischen, umfangreichen Code-Assistenten der einem bei Eingabe der ersten Buchstaben schon gleich alle möglichen Funktionen vorschlägt, die zur getätigten Eingabe passen. Insbesondere liegt es aber auch am kostenlosen Shopware Plugin, mit dem man PHPStorm erweitern kann.

Momentan gibt es keine Alternative (Daniel Hoffmann, cth24.com)

Ähnliche Programme von anderen Entwicklern wären beispielsweise Eclipse, Zend Studio oder die NetBeans IDE. NetBeans war übrigens auch das Programm, das ich vorher immer benutzt habe und Zend Studio steht in direkter konkurrenz zu PhpStorm. Aber für die Shopware Entwicklung kommt mir nichts anderes mehr in die Tüte, als PHPStorm + Shopware Plugin.

2. Shopware Entwicklung mit PhpStorm – PhpStorm installieren

Für die Shopware Entwicklung mit PHPStorm + Shopware Plugin braucht es zum einen PHPStorm und zum anderen… na was könnte das sein? Richtig – NetBeans! Spaß bei Seite, ihr braucht natürlich das PHPStorm Shopware Plugin. Aber eins nach dem anderen, ladet euch zum testen erst einmal die kostenlose Version von PHPStorm runter. Aber seid, gewarnt: ihr werdet höchstwahrscheinlich süchtig und macht euch dann abhängig wie Apple User. Übrigens, habt ihr schon mitbekommen, dass es jetzt einen iMac Pro gibt?!
Shopware Entwicklung mit PHPStorm + Shopware Plugin - PHPStorm Download

Ok nun, dass ich euch gewarnt habe können die angehenden Profi-Shopware-Entwickler unter euch unter folgenden Links die Software 30-Tage testen oder auch gleich kaufen. Preislich beginnt es für Einzelnutzer-Lizenzen bei 8.90 € / Monat oder 89.00 € pro Jahr, und für Business-Lizenzen bei 19.90 € bzw. 199 € / Jahr.

PHPStorm Developer IDE 30 Tage lang kostenlos testen
PHPStorm Lizenz erwerben

PHPStorm ist denkbar einfach installiert. Nach dem Download klickt ihr auf die Datei, und legt das PHPStorm Icon per Drag & Drop in den Programme Ordner. Mehr ist es nicht. Vor der Grundkonfiguration wird und auch noch die Möglichkeit geboten vorhandene Einstellungen von eventuellen früheren Installationen zu importieren:

Shopware Entwicklung mit PHPStorm - Installationseinstellungen

Danach kann man, wenn vorhanden, die Lizenz wahlweise über seinen JetBrains Account, den Aktivierungscode oder über den Lizenz-Server zuordnen. Wer die Testversion nutzt klickt auf Evaluate for free.

Shopware Entwicklung mit PHPStorm - Lizensierung

3. Shopware Entwicklung mit PHPStorm – PHPStorm Grundkonfiguration und Projekt anlegen

Beim ersten öffnen von PHPStorm werden wir aufgefordert, ein zwei Sachen einzustellen. Dies sind im Einzelnen folgende Dinge: Keymap scheme, UI theme, die Editor Farben und Schriftarten sowie die Einstellung ob Dateien und Projekte über die Kommando-Zeile geöffnet werden dürfen. Hier hat jeder seine individuellen Vorlieben und Fähigkeiten und sollte die Einstellungen dementsprechend wählen. Eine ultimative Voreinstellung gibt es hier nicht und auf alle Möglichkeiten einzugehen würde an dieser Stelle den Rahmen sprengen wie ein Gemälde das zu groß ist.

In diesem Beispiel zeige ich euch wie die PhpStorm auf dem Mac installiert wird, man könnte also sagen, dass sich der folgende Teil mit dem Thema phpStorm auf Mac installieren beschäftigt, insbesondere weil die Worte auch fett geschrieben sind. Also im ersten Schritt werden wir bei der aktuellen Version von PhpStorm bei der Installierung auf dem Mac aufgefordert das Theme auszuwählen:

phpStorm auf Mac installieren - Theme

phpStorm auf Mac installieren – Theme-Auswahl

Was ich gemacht habe: Bei UI theme habe ich Darcula ausgewählt, einfach nur um den schwarzen Hintergrund, statt dem weißen zu haben. Das sieht irgendwie professioneller aus und so hatte ich es in einigen Video Tutorials auf YouTube schon gesehen.

Im nächsten Schritt werden Mac (und auch Linux) Usern bei der Installation von PhpStorm die Möglichkeit gegeben eine Datei anzulegen um dateien und Projekte von der Kommandozeile aus öffnen zu können:

PhpStorm auf Mac installieren - Komandezeilen-Datei

PhpStorm auf Mac installieren – Komandezeilen-Datei

Zusätzlich können wir den Namen der Datei anpassen. Ich setze das Häkchen bei Create a script for opening files and projects from the command line, lasse die Zeile mit dem Pfad (den ich mir notiere) unverändert und klicke dann auf den Next: Featured Plugins Button.

Bei der ganz neuen PhpStorm Version bekommt man im nächsten Schritt noch ein paar Vorschläge für Plugins die man sich installieren könnte. Zu dem Thema Plugins komme ich weiter unten noch einmal. Und erspare mir auch ein Screenshot. Überspringen Sie die vorgeschlagenen Plugins mit einem hochmotivierten und kräftigen Klick auf den Button mit dem Text Start using PhpStorm.

Ist dies geschehen wird man aufgefordert das Programm neu zu starten und kann danach seine ersten Dateien und / oder Projekte anlegen:

Shopware Entwicklung mit PHPStorm - Projekt anlegen

Ich klicke auf Create New Project und bekomme wirklich mal eine saftige Auswahl an Optionen angezeigt aus denen es die richtige Wahl zu treffen gilt. Wenn man aber genauer hinblickt und sich minimal auskennt, dann weiß man, dass für die Shopware Entwicklung nur 2 der angebotenen Dinge in Frage kommen können. Und das sind die folgenden:

A) PHP Empty Project
B) PHPStorm Workshop Project

B trifft auch nur zu, wenn man mit Docker oder Vagrant arbeitet. Darauf werde ich in den nächsten Beiträgen noch näher eingehen. Heute beschäftigen wir uns mit einer „normalen“ Umgebung. Also wähle ich ganz einfach A also PHP Empty Project.

Shopware Entwicklung mit PHPStorm - Projekt Einstellungen

Zusätzlich habe ich noch die PHP Version auf 7.1 angepasst und bei der Location noch den korrekten Pfad zu meiner meiner lokalen Shopware-Demo-Installation angegeben. Alles andere habe ich so gelassen wie es war. Da in dem Ordner schon Inhalte vorhanden sind werde ich noch mit folgender Frage konfrontiert.

The directory xyz is not empty. Would you like to create a project from existing sources instead? 

Ich klicke auf Yes und schon wird mein erstes Shopware 5 Projekt in PHPStorm angezeigt. Dieses Mal auch mit dem super-professionellen schwarzen Hintergrund. Dieser war jedoch zunächst nur bei der Sidebar aktiv, daher habe ich über die Einstellungen das Theme noch einmal hin- und her gewechselt, was bewirkt hat, dass auch das eigentliche Editor-Fenster im gewünschten schwarz angezeigt wurde.

Nachtrag vom 08.12.2017:

Mittlerweile gehe ich beim Anlegen neuer Projekte zu denen bereits Dateien bestehen (die im localhost Ordner liegen) einen anderen Weg, denn a) War der erste Weg etwas zu kompliziert und b) gibt es auch einige Neuerungen. Also hier kommt die aktualisierte Version.

PhpStorm Projekt mir vorhandenen Dateien erstellen – wenn man die Grundkonfiguration erledigt hat und PhpStorm neu startet wird man, wie oben schon beschrieben, aufgefordert ein Projekt anzulegen. Entweder ein brandneues oder eben eins mit bereits existierenden Dateien. In letzgenanntem Falle klickt man nun auf, man ahnt es schon, Create New Projekct from Existing Files und gelangt nun zu diesem Fenster:

PhpStorm Projekt mir vorhandenen Dateien erstellen

PhpStorm Projekt mir vorhandenen Dateien erstellen

In diesem Beispiel möchte ich die Dateien meines lokal installierten Test Shopware-Shops in das System importieren. Die Dateien des Shops liegen in einem Unterordner von htdocs. Soviel dazu. Bevor ich an der Stelle weiter mache lösche ich zuvor noch die NetBeans Projektdateien, die ich in Zukunft nicht mehr benötigen werde. Der NetBeans Dateien Ordner namens nbproject liegt wiederum auf der obersten Ebene des Shopware Ordners.

Bei oben beschriebenem Szenario, also wenn die Dateien des Projekts in einem Unterordner von htdocs liegen und ein lokaler Server wie XAMPP installiert ist kann man die Auswahl beim ersten Punkt in der Liste so stehen lassen, auf den Next Button klicken und damit zum nächsten Schritt übergehen. Klicken Sie sich nun durch die Ordner bis zu dem Ordner mit der Shopware Installation. In meinem Fall lautet der Pfad: /Applications/XAMPP/xamppfiles/htdocs/sw-demo – ist der Ordner lokalisiert klickt man den Ordner an und klickt dann oben auf den Project Root Button. Wenn man den Ordner ausklappt sollten die Ordner wie in diesem Screenshot grün markiert sein:

PhpStorm auf Mac - Projekt mit vorhandenen Dateien markieren

PhpStorm auf Mac – Projekt mit vorhandenen Dateien markieren

Genauere Beschreibungen zu dem Thema finden Sie auch auf der Jetbrains Seite unter folgendem Link:  Creating a Project from Existing Sources Under the Server Document Root. Wenn man noch etwas runterscrollt wird noch erklärt wie man Ordner davon ausschließen kann hoch- oder runtergeladen zu werden oder von der Bearbeitung auszuschließen. Das kann z.B. Sinn machen wenn man Ressourcen schonen will und weiß, dass man beispielsweise eh nur die Theme Ordner bearbeiten möchte. Hier findet hier noch detailliertere Informationen zu dem Thema Konfiguration der Ordner unterhalb des Haupt-Verzeichnisses eures PhpStorm Projekts.

So im nächsten Schritt legen wir dann wie in diesem Screenshot den Projektnamen fest und geben dazu noch die Web-URL des Projekts an. Wenn wir auf Next klicken wird gleichzeitig die Verbindung zum Server getestet:

PhpStorm Projekt - Prüfung

PhpStorm Projekt – Prüfung

So und hier muss man auch nichts weiter machen als auf Finish zu klicken und dann hat man es geschafft:

PhpStorm Projekt - Eigene Dateien auf lokalem Server

PhpStorm Projekt – Eigene Dateien auf lokalem Server

So und hier sieht man dann wir das geladene Projekt im Editor aussieht – tada!

PhpStorm - Projekt im Editor

PhpStorm – Projekt im Editor

 

 

4. Shopware Entwicklung mit PHPStorm – Das Shopware Plugin für PHPStorm

So und jetzt kommen wir zum eigentlichen Super-Feature, das die Shopware-Entwickler Herzen höher schlagen läßt, nämlich dem Shopware Plugin für PHPStorm. Wenn Sie das Plugin installieren möchten, wovon ich schwer ausgehe, folgen Sie bitte den folgenden Anweisungen:

A) Öffnen Sie das Fenster für die Einstellungen / Preferences
B) Klicken Sie Links auf den Link Plugins
C) Geben Sie Shopware in der Suchmaske ein
D) Klicken Sie auf den blauen Search in repositories Link

Jetzt bekommen Sie bestenfalls das hier angezeigt und sind nur noch einige Klicks von der Installation des Plugins entfernt:

Shopware Entwicklung mit PHPStorm - Shopware Plugin installieren - Repository Suche

Hier hat man auch noch eine genaue Auflistung aller Zusatzfunktionen, die das Plugin mit bringt:

PHP: Subscriber name completion for controller/hooks/events
PHP: Type provider for Manager::getResources
PHP: Event and method references for subscriber events
PHP: Magic method type provider
PHP: Bootstrap::getInfo, Bootstrap::Path, ModelManager::addAttribute/generateAttributeModels
PHP: Enlight_Controller_Router::assemble array parameter
PHP: Custom config and event name indexer
PHP: Quickfix for subscriber method generation and content
PHP: Linemarker for subscriber methods
Smarty: References for files, controller, actions, widgets
Smarty: Block references on extends path
Smarty: Namespace tag support
Smarty: Blockname and include indexer
Smarty: Template include, extends linemarker
Smarty: Support templates libraries/include paths
Smarty: Blockname implements and overwrite linemarker
Shopware: Theme and assets
Shopware: Snippets index for template usage in backend and frontend
Shopware: Snippets references for Smarty and ExtJs files
PHP/Smarty: Template controller references for php and smarty
Symfony: Custom container loader
Symfony: Shopware service container ids in subscriber
Doctrine: Extension for Symfony Plugin
Doctrine: Lifecycle event completion for subscriber
ExtJs: Doctrine Model and controller targets
ExtJs: Controller action linemarker and goto
Generator: Shopware project installer
Generator: Plugin boilerplates
PHP Toolbox: internal JSON configuration

Wie man sieht bekommt man wirklich eine geballte Ladung an Funktionen die einem das Developer-Leben erleichtern wie Diäten. Außerdem wird darauf hingewiesen, dass das Symfony Plugin eine Voraussetzung für die Funktion des Shopware Plugins ist. Zusätzlich soll man auch das PHP Annotations Plugin installieren.

Shopware Entwicklung mit PHPStorm - Shopware Plugin installieren - PHP Annotations

Das mache ich also als allererstes indem ich in die Suche PHP Annotations eingebe und dann auf den grünen Install-Button klicke und im Anschluss PHPStorm neu starte. Jetzt gehe ich wieder den gleichen Weg wie oben von A – D und klicke wieder den grünen Install Button.

Shopware Entwicklung mit PHPStorm - Shopware Plugin installieren

Bei der Installation werde ich noch darauf hingewiesen, dass Symfony mitinstalliert wird, was ich bestätige und dann das Programm wieder neu starte.

Das war`s das Shopware Plugin für PHPStorm ist installiert und bereit euch Zeit mit nützlichen Funktionen und Vorschlägen bei der Entwicklung von Shopware Themes oder Plugins behilflich zu sein. Schaut euch am besten noch den Link zum Shopware Developers Guide (s. unten) an um weitere Einstellungen an eurem Shopware Projekt vorzunehmen um die bestmöglichen Ergebnisse bei der Entwicklung zu erzielen.

5. Shopware Entwicklung mit PHPStorm – Projektbezogene Konfiguration

Nun noch schnell zur groben projektbezogenen Konfiguration ein paar Dinge: Zunächst einmal müssen bei jedem Projekt die Symfony Klassen gesondert aktiviert werden. Dazu markieren man das Projekt, in diesem Falle ist das sw-demo, was auch mein einziges Projekt in PHPStorm ist.

Dann gehen wir wieder in die Einstellungen (Preferences) und tippen in der Suche Symfony ein. Oder man klickt sich durch bis zu dem Punkt Languages & Frameworks > PHP > Symfony. Dort sehen ist an oberster Stelle, ein Kästchen das man aktivieren kann, direkt dahinter steht: „Enable Plugin for this Project“. Hier muss also das Häkchen gesetzt werden. Damit die Einstellung übernommen wird muss man danach PHPStorm noch einmal neu starten.

Shopware Entwicklung mit PHPStorm - Shopware Plugin - Projekt Konfiguration

Der nächste Punkt ist minimal komplizierter, aber wer schlau sein will muss leiden. Im Bereich Languages & Frameworks > PHP > Symfony > Container müssen jetzt noch die XML Dateien zugeordnet werden.

Diese befinden sich in folgenden Ordnern:
– engine/Shopware/Bundle/AccountBundle/services.xml
– engine/Shopware/Bundle/AttributesBundle/services.xml
– engine/Shopware/Bundle/ESIndexingBundle/services.xml
– engine/Shopware/Bundle/FormBundle/services.xml
– engine/Shopware/Bundle/MediaBundle/services.xml
– engine/Shopware/Bundle/PluginInstallerBundle/services.xml
– engine/Shopware/Bundle/SearchBundle/services.xml
– engine/Shopware/Bundle/SearchBundleDBAL/services.xml
– engine/Shopware/Bundle/SearchBundleES/services.xml

Klickt unten auf das + Zeichen und wählt dann alle eine nach der anderen alle 9 XML Dateien aus und klickt dann auf OK. Das Ergebnis sollte also folgendermaßen aussehen:

Shopware Entwicklung mit PHPStorm - Shopware Plugin - Projekt Konfiguration - XML Dateien

Und als letztes könnt ihr noch im Bereich Directories bestimmte Bereiche exkludieren, Als Sources oder Textbereiche markieren. Bei mir sieht das dann zum Beispiel so aus:

Shopware Entwicklung mit PHPStorm - Shopware Plugin - Projekt Konfiguration - Ordner markieren

So und wenn ihr jetzt einfach mal was cooles mit PHPStorm ausprobieren wollt, aber noch garnicht so die große Ahnung habt wie man Shopware plugins programmiert, dann ist der YouTube Link (unten) schonmal ein guter Einstieg um in die Materie einzusteigen und dabei auch zu lernen was man alles mit PHPStorm samt Shopware Erweiterung so anstellen kann.

In diesem Sinne – viel Spaß und Erfolg mit Shopware 5, 6 und sogar 7!

Weiterführende Links & Quellen:
Shopware Plugin Programmierung mit PHPStorm + Shopware Plugin – YouTube Video
PHPStorm Developer IDE 30 Tage lang kostenlos testen
PHPStorm Lizenz erwerben
Shopware Developers Guide – Setting up PhpStorm
Beitrag im Shopware Blog zum Thema Shopware Plugin für PHPStorm
PHP Annotations Plugin für PHPStorm- infos / Download
Shopware plugin für PHPStorm – Infos / Download
Shopware Development with PHPStorm – offizielle Jetbrains Seite
Vagrant Shopware Box
Projekte mit bestehenden Dateien erstellen
PhpStorm lernen (deutsches Video Tutorial)

Pin It on Pinterest

Share This