Eclipse
Aus ShopleiterWiki
Inhaltsverzeichnis |
3.3.2 Entwicklungsumgebung Eclipse
Eclipse PDT Ganymede ist eines der beliebtesten OpenSource-Entwicklungswerkzeuge und PHP Development Tools (PDT). Das Tool ist eine leistungsstarke und erfolgreiche Multi-Language IDE (integrierte Entwicklungsumgebung) und bietet die grundlegenden Funktionen der Code-Bearbeitung inklusive Versionierung, die Sie für die ersten Schritte benötigen.
Vorteile einer Entwicklungsumgebung
Selbst für einen Nicht-Programmierer bietet der Einsatz von Eclipse eine Reihe von Vorteilen. Es geht dabei nicht so sehr darum, jede einzelne Codezeile kennenzulernen, sondern die Dateien lassen sich viel bequemer bearbeiten, abspeichern und synchronisieren. Einmal gemachte Fehler durch eigene Änderungen lassen sich viel leichter rückgängig machen. Mittels Versionierung sehen Sie alle Unterschiede an jeder einzelnen Zeile, die Sie im Quelltext geändert haben.
Die wesentlichen Vorteile sind:
- Plattformunabhängigkeit: Läuft auf Linux, Windows und Mac
- OpenSource Community: Dynamische Entwicklung neuer Technologien
- Volltextsuche: Bequeme Suche nach Datei-Inhalten oder Quellcode-Stellen
- Erweiterbarkeit: Über 800 Plug-Ins erweitern die Funktionalität
- Standardisierung: IDE für Applikationen in verschiedenen Sprachen
- PHP Entwicklungstool: Bearbeiten von Quellcode mit Autovervollständigung
- Syntax Highlighting: Auto-Formatieren des Quellcodes (HTML, CSS und JS)
- Debugging Funktionalität: Fehlersuche mit Zend Debugger oder Xdebug
Den optimalen Nutzen ziehen aus diesem Entwicklerwerkzeug, wenn Sie es gleich mit XAMPP kombinieren. Die Installation und den Einsatz von XAMPP haben wir Ihnen bereits in Kapitel 1 erläutert. Dadurch entsteht auf Ihrem lokalen Rechner eine persönliche Test- und Entwicklungsumgebung für SVN-gestützte Webapplikationen.
Als weitere Variante bietet sich für die Endphase der Entwicklung eine Testumgebung auf dem eigentlichen Webserver an. Eine solche Online-Testplattform nennt sich Staging Site. Den Online-Shop testen und bewerten Sie so am besten live im Einsatz in einer echten Serverumgebung. Aus dem lokalen Testserver kopieren Sie den Quellcode für die neue Website oder das neueste Upgrade auf den Staging Server. Optimal wäre es, Sie verwenden dafür die identische Hardware-, Apache- und MySQL-Konfiguration. Natürlich müssen Sie darauf achten, noch strikt zwischen Test- und Produktivsystem zu trennen. Sobald auf dem Staging Server alles ausgiebig getestet ist, synchronisieren Sie den Inhalt mit der tatsächlichen Produktivumgebung. Als Beispiel nutzen Sie für den Shop www.domain.tld die Staging-Adresse dev.domain.tld. Sperren Sie unbedingt per robots.txt die Suchmaschine aus. Legen Sie eine Datei mit der Zeile Disallow: / im root-Verzeichnis ab. Auf Sicherheit bedachte Shopbetreiber sperren alle User mittels Passwortabfrage (.htaccess kombiniert mit .htpasswd) aus.
Als zusätzliche Hilfen binden Sie gleich zu Beginn die nachfolgenden Plugins ein:
- Aptana Studio: Aptana Studio
- Subclipse: Subclipse
- WireframeSketcher: WireframeSketcher
- FileSync: FileSync
- Mylyn: Mylyn
Mit Aptana Studio bekommen Sie einen komfortablen Quellcode-Editor zur Entwicklung von AJAX- und PHP-Applikationen, der den Aptana Jaxer Webserver auf Apache-Basis mitbringt, spezialisiert auf den Betrieb von AJAX-Webseiten. Der Editor ist entweder als Plugin für Eclipse oder alternativ als Stand-Alone-Programm einsetzbar. Die wesentlichen Vorteile für die Webprogrammierung sind der eingebaute FTP-Client und die guten Formatierungsfunktionen.
Für die Synchronisation zwischen Ihrem lokalen Workspace und dem Online-Webspace fügen Sie im Sync Manager eine neue Verbindung (Site Connection) ein. Für den ersten Zugriff auf Ihren Webspace ist eine FTP-Verbindung erforderlich. Abbildung 3.35 zeigt Ihnen exemplarisch die erfolgreiche Synchronisation des media-Ordners in das Remote-Verzeichnis /httpdocs/shop. Zu diesem Zeitpunkt sind die lokalen Dateien im Laufwerk C: und die Online-Dateien komplett synchron (identisch). Beachten Sie unbedingt die Einstellungs-Möglichkeiten von Smart Sync unter Advanced Options, wo Sie die Datei- und Verzeichnisrechte (Permissions) setzen.
Subclipse ist ein extrem hilfreiches Plugin für die Versionskontrolle von Dateien. Die Versionierung erfolgt in einem zentralen Projektarchiv, dem so genannten Repository, in Form einer einfachen Revisionszählung. Lediglich beim ersten Datenabgleich, z. B. mit dem Magento-Repository, holen Sie sämtliche Daten ab. Danach laden Sie sich nur noch die Unterschiede auf Ihren lokalen Arbeitsplatz bzw. Workspace herunter. Der Download von geänderten Dateien findet dann zwischen dem Projektarchiv und Ihrem lokalen Arbeitsplatz statt. In Abbildung 3.36 findet ein Vergleich der geänderten index.php-Datei statt, zwischen der Datei die im Workspace gespeichert ist und der Original-Datei die im Repository liegt. Das Tolle daran: Sie sehen anhand der Historie auf einen Blick, an welchen Stellen Unterschiede vorliegen. So können Sie genau die Textstellen abgleichen, indem Sie die Änderungen aus dem Repository übernehmen.
In Team-Umgebungen lassen sich so potenzielle Konflikte aufspüren und korrigieren, die entstehen, wenn mehrere Leute gleiche Dateien gleichzeitig ändern. Eigens dafür gibt es die spezielle Perspektive „Team Synchronization“. Diese Oberfläche, die zum Datenabgleich dient, öffnen Sie kontextsensitiv innerhalb eines Projekts über „Team › Synchronize with Repository“. In der folgenden Ansicht sehen Sie alle erforderlichen Veränderungen, um Ihre lokale Arbeitskopie mit dem Remote-Repository zu synchronisieren. Ein Doppelklick auf eine Datei öffnet das Vergleichsfenster (Text Compare). Dieser View zeigt Ihnen Zeile für Zeile alle vorgenommenen Änderungen. Nachdem Sie nichts an den Core-Daten ändern, kann es eigentlich nicht zu Konflikten kommen. Falls Sie ein eigenes Repository besitzen, dürfen Sie gemachte Neuerungen committen und somit ins Repository speichern. Es lohnt sich allerdings kaum für Ein-Mann-Unternehmen oder Gelegenheits-Entwickler, ein Repository anzulegen, da Sie meist direkt mit Smart Sync die Daten online stellen.
Tortoise SVN Subversion-Client für Windows zum Anlegen eines Repositorys
Der WireframeSketcher unterstützt Sie bei der Entwicklung eines Layouts. Beim Layout-Design einer Seite mit Wireframes geht es darum sehr rudimentär alle wichtigen grafischen Komponenten abzubilden. Im Vordergrund steht verstärkt die Konzeption (Platzierung, Form und Größe von Inhalten) und weniger das Webdesign (Farben, Hintergründe oder Grafiken). Ein komplett vollendetes Design ist nicht nötig.
Die Wireframes, auch Mockups genannt, stellen einen sehr frühen konzeptionellen Prototyp einer Website oder einer Frontend-Seite dar. Bezogen auf eine Website enthalten sie Elemente, wie Navigation und Inhaltsbereiche. Ein Beispiel sehen Sie in Abbildung 3.34. Mit dem FileSync Plugin von Andrei Loskutov lässt sich lokal eine Datei-Synchronisation einrichten. Besuchen Sie dazu beim Projekt die Eigenschaften (Properties) und richten Sie eine File-Synchronisation ein. Dies ist beispielsweise sehr nützlich, wenn Sie die Dateien lokal bearbeiten, jedoch zusätzlich im Netzwerk ablegen wollen. Ein weiteres sinnvolles Einsatzgebiet ist möglicherweise die Trennung von Workspace und XAMPP-Verzeichnis /htdocs. Dadurch beschleunigt sich in einem größeren Netzwerk die Remote-Synchronisation mit Magento, da Sie die Daten lokal auf Ihrer Festplatte bearbeiten und abspeichern. Im Hintergrund läuft automatisch die fortlaufende Datei-Synchronisation.
Allgemeine Bedienung von Eclipse PDT
Bevor Sie hoffentlich begeistert mit der Installation beginnen, benötigen Sie noch ein paar grundlegende Bedienungshinweise. Das Entwicklungs-Tool bietet zahllose Features, die weitgehend mit Plugins realisiert werden. Diese Fülle an Möglichkeiten bringt einen Einsteiger jedoch leicht zur Verzweiflung. Damit Sie schneller die ersten Ergebnisse bekommen und die ersten Quellcode-Zeilen betrachten können, geben wir Ihnen vorab ein paar Bedienungs-Tipps, die Ihre Arbeit mit Eclipse erleichtern. Die wichtigen und grundlegenden Konzepte lauten Workbench, Workspace, Perspektive (Perspective), Sichten (Views) und natürlich Editoren.
Sobald Sie das Programm öffnen, sehen Sie den Arbeitsbereich, den so genannten Workbench, also die Benutzeroberfläche von Eclipse. Auf dieser Startseite platziert liegen verschiedene Menüs (Menübar, Statusbar oder Toolbar), Editoren, Views, Perspektiven-Umschalter und weitere Anzeigen für Ihre Arbeit. Jedes Workbench-Fenster enthält eine oder im Normalfall sogar mehrere Pespektiven, die gleichzeitig vorhanden sein können. Die Perspektiven bestehen aus einer Gruppe von Sichten und Editoren, mit denen Sie die Elemente steuern, die Sie in den Menüs und Symbolleisten angezeigt bekommen. Geöffnet werden diese über „Window Open Perspective“. Alternativ wechseln Sie oben rechts im Workbench bequem per Mausklick zwischen verschiedenen Perspektiven, um so unterschiedliche Arbeiten parallel auszuführen. In Abbildung 3.37 ist die Aptana Perspektive geöffnet mit den Views: Sync Manager, Sync Explorer, Project, Task List und History. Eine große Auswahl Views finden Sie ebenso unter Window bei „Show View“ oder auch „Show Aptana View“. Die einzelnen Views lassen sich per Drag & Drop beliebig auf dem Workbench anordnen.
Eine Änderung in einer Perspektive beeinflusst die Editoren nicht. Alle Perspektiven verfügen über den gleichen Satz an Editoren. Mit einer Sicht können Sie z. B. einen Editor öffnen, Ressourcen nutzen, in einer Hierarchie von Informationen navigieren oder Eigenschaften eines aktiven Editors anzeigen. Nehmen Sie innerhalb einer Sicht Anpassungen vor, wie ändern, umbenennen oder entfernen von Eigenschaften, werden diese Änderungen sofort gespeichert. Das System liefert bereits mehr als 60 eingebaute interne Text-, HTML-, SQL-, Java-, WikiText-, XML- oder Ant-Editoren. Ant ist ein Projekt von Apache.
Installation von Eclipse PDT und Plugins
Nachfolgend finden Sie die erforderlichen Schritte, um Eclipse individualisiert und arbeitsfähig auf die Entwicklung von Magento vorzubereiten:
1. Aktualisieren Sie den PC auf die aktuellste Java Runtime Environment!
2. Runterladen, entpacken und installieren der Eclipse PDT Datei!
3. Nutzen Sie als Workspace das lokale XAMPP-Verzeichnis \htdocs!
4. Aktivieren der Plugins: Aptana Studio, Subclipse und WireframeSketcher!
5. Legen Sie eine neue Repository Location mit dem Magento-SVN an!
6. Holen Sie sich die neueste Version aus dem Magento-Repository!
7. Erstellen Sie ein eigenes Projekt basierend auf dem Repository!
8. Markieren Sie Dateien mit Mylyn für Ihre aktuellen Aufgaben (Sichten anlegen)!
Als Voraussetzung benötigen Sie eine installierte Java Runtime Environment (JRE) mindestens in Version 5. Eine aktuelle Version der Java VM bekommen Sie hier: Java Virtuel Machine. Das aktuelle Installationspaket holen Sie sich von der Webseite eclipse.org/pdt/downloads/. Suchen Sie dort nach PDT 2.x All In Ones. Diese gezippte Download-Datei beinhaltet PDT 2.x, Eclipse 3.4.x, Zend Debugger und alle anderen erforderlichen Plugins, die die Grundfunktionalität bereitstellen. Zuerst müssen Sie die Datei entpacken und anschließend für die Installation im entpackten Verzeichnis die Datei eclipse.exe ausführen. Im Anschluss daran legen Sie Ihren persönlichen Workspace (Arbeits- und Speicherbereich) an, in dem Sie alle Benutzer-Daten speichern und verwalten. Haben Sie bereits XAMPP installiert, dann empfiehlt sich als Workspace das Verzeichnis C:\xampp\htdocs. So können Sie den Apache- und MySQL-Server für die Test- und Entwicklungsumgebung einsetzen. In einem beliebigen Webbrowser starten Sie dann später mit http://localhost/Magento die Installation. Mit „Run as › PHP Web Page“ öffnet sich die markierte install.php-Datei auch innerhalb der Eclipse Oberfläche.
Jetzt sind die Plugins bzw. Updates an der Reihe. Im Startfenster von Eclipse 3.4 Ganymede öffnen Sie „Help › Software Updates …“ und klicken dann auf „Available Software“ und „Add Site …“. Hinterlegen Sie dort bei Location den Update-Pfad zu den weiter oben aufgeführten Plugin-Dateien. Holen Sie sich dazu eine URL nach der anderen. Das Eclipse SVN-Kit benötigen Sie nicht, da es schon im Subclipse-Update enthalten ist. Nachdem Sie alle anderen neu hinzugefügten Installationspfade anhaken, starten Sie die Installation mit einem Klick auf Install. Nach dem Neustart ist die Entwicklungsumgebung auf dem neuesten Stand.
War die Subclipse-Installation erfolgreich, dann finden Sie unter „File › New › Project“ den neuen Wizard „Checkout Projects from SVN“. Diesen nutzen Sie gleich, um ein neues Projekt anzulegen, mit dem Sie aus dem Repository die aktuelle Shop-Software abholen (Checkout). Zuvor benötigen Sie eine neue Repository Location, die Sie unter „Window › Open Perspective“ anlegen, wo Sie die Perspektive „SVN Repository Exploring“ öffnen. Kontextsensitiv klicken Sie mit der rechten Maustaste im Bereich bei „SVN Repositories“ und hinterlegen im Textfeld den Link zur Magento Repository Location http://svn.Magentocommerce.com/source/branches/1.3.
Danach erstellen Sie ein neues Projekt über den Wizard, wobei Sie hier in „File › New › Project“ noch nicht PHP Project selektieren, sondern zunächst unter SVN „Checkout Projects from SVN“ auswählen. An dieser Stelle sehen Sie nun den vorhin erstellen Eintrag zum Magento Repository. Auf der nächsten Seite suchen Sie anhand des Datums (Select Revision) einfach nach der aktuellsten existierenden Revisionsnummer. Sehr schön ist hier zu sehen, wie viele Dateien verändert und wann diese eingestellt wurden. Die Einstellungen im Checkout-Fenster belassen Sie so, wie sie sind, also: „Check out as a project configured using the New Project Wizard“ und Depth Fully recursive.
Jetzt endlich kommt das Dialog-Fenster, in dem Sie unter PHP nun PHP Project auswählen. Wichtig: Hier geben Sie einen beliebigen Eclipse internen Projektnamen an und tragen den Speicherort des Projekts ein. Am besten einen lokalen Festplattenplatz, damit die Datei-Bearbeitung und -Synchronisation schneller funktioniert. Nach der Auswahl des obersten Ordners in Abbildung 3.38 legen Sie das eigentliche „PHP Project“ an. Die Daten aus dem Repository landen dann beispielsweise im Ordner C:\xampp\htdocs\Magento. Nun findet der tatsächliche Checkout des Projekts statt, welches dann dauerhaft als eigentständiges PHP-Projekt in Eclipse angelegt ist. In wenigen Minuten ist der Download aus dem Repository erledigt, es folgt dann noch die etwas zeitraubende Neubildung des Arbeitsbereichs (Building Workspace).
Nachdem Magento auf UTF-8 basiert, hier noch ein paar gesammelte Konfigurations-Empfehlungen. Diese erledigen Sie in Eclipse unter „Window › Preferences“.
| Konfigurationsbereich | Konfigurationseinstellungen |
|---|---|
| General | |
| Content Types › Text › Java Properties Files › Preferences | Default Encoding auf „UTF-8“ setzen |
| Editors › Text Editors | „Insert spaces for tabs“ aktivieren „Show print margin“ aktivieren |
| Workspace | Text file encoding auf „UTF-8“ setzen New text file line delimiter „Unix“ setzen |
| PHP | |
| Code Style › Formatter | Tab policy auf „Spaces“ setzen Indentation size auf „4“ setzen |
| Editor › Code Assist | „Show non-strict options“ deaktivieren |
| Editor › Save Actions | „Remove trailing whitespace“ aktivieren |
| XML | |
| XML Files | Indicate when no grammer is specified auf „Ignore“ setzen |
Tabelle 3.15: Preferences-Einstellungen von Eclipse konfigurieren
Mylyn bietet Ihnen eine Schnittstelle, mit der Sie Ihre Aufgaben verwalten, planen und überwachen. Mittels „Window › Show View › Other › Tasks › Task List“ öffnet sich die Aufgabenliste (Task List). Damit ordnen Sie einzelne Entwicklungs-Dokumente (Dateien, Klassen, usw.) Ihren aktuellen Aufgaben zu und erzeugen dadurch automatisch aufgabenspezifische Sichten. Besonders in sehr großen Projekten ist dies eine Arbeitserleichterung, weil sie nur noch den gerade interessierenden Teil sehen und alles andere ausblenden. Aktivieren Sie zunächst eine Aufgabe und öffnen dadurch die Dokumente, an denen Sie in diesem Zusammenhang arbeiten wollen (Mark as Landmark). Nur die vorselektierten Dateien bekommen Sie künftig bequem per Mausklick im Editor zur Bearbeitung angezeigt.
