Erstellen von Brackets-Erweiterungen

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Vor einiger Zeit habe ich über die letzten Updates für den Brackets-Editor geschrieben. Brackets ist ein Open-Source-Projekt, das sich auf Webstandards konzentriert und mit Webtechnologien erstellt wurde. Es hat einen engen Fokus und verfügt daher möglicherweise nicht über eine bestimmte Funktion, auf die Sie sich verlassen haben. Glücklicherweise wird Brackets mit einer leistungsstarken Erweiterungs-API geliefert, mit der Sie eine beliebige Anzahl neuer Funktionen hinzufügen können. In diesem Artikel bespreche ich diese API und demonstriere, wie Sie Ihre eigenen Erweiterungen erstellen können.

Es ist wichtig, dass Sie sich daran erinnern, dass sich Brackets in der aktiven Entwicklung befindet. Dieser Artikel wird im Dezember 2013 geschrieben. Es ist durchaus möglich, dass der unten gezeigte Code mittlerweile veraltet ist. Denken Sie daran und überprüfen Sie das Wiki auf die neuesten Aktualisierungen der Erweiterungs-API.

Einstieg

Ich gehe davon aus, dass Sie meinen letzten Artikel gelesen haben und den Extension Manager bereits kennen. Dies bietet eine einfache Ein-Klick-Methode zum Installieren von Erweiterungen. Eine der besten Möglichkeiten, das Schreiben von Erweiterungen zu lernen, besteht darin, sich die Arbeit anderer anzusehen (so habe ich es gelernt). Ich würde empfehlen, sich ein paar Erweiterungen zu schnappen (es sind jetzt fast 200 verfügbar) und ihren Code zu zerreißen. Haben Sie keine Angst, ein paar zu brechen, während Sie schon dabei sind.

Brackets legt alle installierten Erweiterungen in einem Hauptordner ab. Um diesen Ordner zu finden, rufen Sie das Hilfe-Menü auf und wählen Sie "Erweiterungsordner anzeigen". Für meine OS X-Installation befand sich diese unter /Users/ray/Library/Application Support/Brackets/extensions/user. Wenn Sie von diesem Ordner nach oben gehen, werden Sie auch einen deaktivierten Ordner bemerken. Brackets wird auf jeden Fall eine tapfere Anstrengung unternehmen, um es zu laden, aber wenn Sie sich jemals in einer Situation befinden, in der Brackets das Bett vollständig zerstört hat und einfach nicht funktioniert, ziehen Sie in Betracht, potenziell fehlerhafte Erweiterungen in den deaktivierten Ordner zu verschieben. Später in diesem Artikel werde ich besprechen, wie Sie Erweiterungen überwachen und debuggen können, um solche Probleme von vornherein zu vermeiden.

Beginnen Sie, indem Sie zu Ihrem Benutzerordner gehen und einen neuen Ordner erstellen, helloworld1. Ja, obwohl es völlig lahm ist, werden wir eine HelloWorld-Erweiterung bauen. Hassen Sie mich nicht, ich mag es einfach. Erstellen Sie in diesem Ordner eine neue Datei namens main.js. Listing 1 zeigt den Inhalt dieser Datei. Beachten Sie, dass ich in diesem Artikel einige verschiedene Iterationen der helloworld-Erweiterung durchgehen werde. Jeder wird mit einer fortlaufend höheren Nummer benannt. Unser erstes Beispiel stammt also von helloworld1, dem nächsten helloworld2 und so weiter. Es wäre sinnvoll, den Code einfach in einen Ordner, helloworld, zu kopieren, anstatt jeden einzeln zu kopieren. Wenn Sie dies tun, werden mehrere verwandte Erweiterungen gleichzeitig ausgeführt, und das kann die Dinge definitiv verwirren.

Listing 1: helloworld1/main.js
define(function(require, exports, module) {

    function log(s) {
            console.log("[helloworld] "+s);
    }

    log("Hello from HelloWorld.");
});

Die erste Zeile definiert unsere Erweiterung als Modul, das beim Laden der Anwendung automatisch von Brackets übernommen wird. Der Rest der Erweiterung ist eine benutzerdefinierte Protokollnachricht (Sie werden gleich sehen, warum) und ein Anruf an diesen Logger. Sobald Sie diese Datei gespeichert haben, gehen Sie zurück zu Brackets, wählen Sie das Debug-Menü und klicken Sie auf Neu laden. (Sie können auch Befehl/Strg+R zum Neuladen verwenden.)

Brackets werden neu geladen und ... sonst passiert nichts. Die Erweiterung, die wir gebaut haben, hat eigentlich nichts gemacht, was wir sehen konnten, aber sie loggte sich in die Konsole ein. Aber wo ist diese Konsole? Brackets bieten eine einfache Möglichkeit, die Konsole anzuzeigen. Gehen Sie einfach zurück zum Debug-Menü und wählen Sie Entwicklertools anzeigen. Dadurch wird ein neuer Tab in Chrome mit einer vertrauten Dev Tools-Benutzeroberfläche geöffnet. Im Screenshot unten habe ich unser Protokoll hervorgehoben. Andere Erweiterungen und Brackets selbst protokollieren ebenfalls Nachrichten auf diesem Bildschirm. Indem ich meinen Log-Nachrichten [helloworld] voranstelle, kann ich meine eigenen Sachen etwas leichter finden.

Beachten Sie, dass die vollständige Chrome console.api hier funktioniert. Sie können Folgendes tun, um Ihre Konsolennachrichten zu formatieren:

1
2	function log(s) {
3	console.log("%c[helloworld] "+s,"color:blue;font-size:large");
4	}

Werden Sie verrückt, aber versuchen Sie, diese Nachrichten zu entfernen, bevor Sie Ihren Code mit dem Rest der Welt teilen. Falls Sie neugierig sind, können Sie derzeit keine Entwicklungstools in einem anderen Browser wie Firefox verwenden.

Integrationspunkte

Nachdem Sie nun die (sehr) Grundlagen kennen, sprechen wir darüber, was Brackets-Erweiterungen für den Editor tun können:

Sie können Tastenkombinationen erstellen, mit denen sie auf benutzerdefinierte Tastenanschläge reagieren können.
Sie können zum Menü der obersten Ebene hinzugefügt werden.
Sie können Kontextmenüs hinzufügen (und zu einem bestimmten Bereich, wie der Dateiliste oder dem Editorfenster).
Sie können UI-Elemente erstellen. Dies kann ein modaler Dialog oder sogar ein Panel sein. (Derzeit ist das Panel am unteren Bildschirmrand gesperrt).
Sie können einen Linting-Anbieter erstellen (im Wesentlichen können sie sich als Codeprüfer für einen Dateityp registrieren).
Sie können ihre eigenen Inline-Editoren erstellen (eine Hauptfunktion von Brackets).
Sie können sich als Dokumentationsanbieter registrieren (z. B. MDN-Unterstützung für Dokumente hinzufügen).
Sie können mit Quick Find und Quick Open integriert werden.
Sie können benutzerdefinierte Codehinweise und Syntaxfarben hinzufügen.
Sie können die aktuell im Editor geöffnete Datei lesen und ändern. (Sie können auch den aktuell ausgewählten Text sehen, falls vorhanden.)

Das beschreibt, wie Erweiterungen Brackets ändern können, aber was können Erweiterungen in Bezug auf den Code tatsächlich tun? Wenn Sie bedenken, dass Sie Erweiterungen in reinen Webstandards (HTML, JavaScript und CSS) schreiben, haben Sie tatsächlich einiges an Leistung. Die einzigen wirklichen Grenzen beziehen sich auf binäre Daten. Es gibt eine Dateisystem-API, die Ihnen die Kontrolle über Dateien gibt, aber nur auf Textdaten beschränkt ist. Zum Glück hast du einen Ausweg.

Jede Brackets-Erweiterung kann in Node.js integriert werden. Wenn Sie über ein vorhandenes Node.js-Paket verfügen, kann Ihre Erweiterung es aufrufen und alles tun, was Node.js tun kann, was im Wesentlichen alles ist.

Lassen Sie uns unsere Erweiterung aktualisieren, um sie etwas besser in den Editor zu integrieren. Ich beginne damit, einfach einen Menüpunkt für die Erweiterung hinzuzufügen.

Listing 2: helloworld2/main.js
/*
Based - in part - on the HelloWorld sample extension on the Brackets wiki:
https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension
*/
define(function(require, exports, module) {

    var CommandManager = brackets.getModule("command/CommandManager"),
            Menus = brackets.getModule("command/Menus"),
            AppInit = brackets.getModule("utils/AppInit");


    function log(s) {
            console.log("[helloworld2] "+s);
    }


    function handleHelloWorld() {
            alert("You ran me, thanks!");
    }


    AppInit.appReady(function () {

            log("Hello from HelloWorld2.");

            var HELLOWORLD_EXECUTE = "helloworld.execute";

            CommandManager.register("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld);

            var menu = Menus.getMenu(Menus.AppMenuBar.VIEW_MENU);
            menu.addMenuItem(HELLOWORLD_EXECUTE);

    });

});

Wir haben hier ein paar Änderungen, also lassen Sie uns diese nacheinander angehen. Sie werden feststellen, dass die Erweiterung mit drei Aufrufen von brackets.getModule beginnt. Alle Erweiterungen haben Zugriff auf ein Brackets-Objekt, das eine API bereitstellt, in die wir die Kernfunktionalität aus dem Editor laden können. In diesem Fall hat die Erweiterung zwei Bibliotheken geladen, die wir für das Menü benötigen (CommandManager und Menus) und eine, die verwendet wird, um die Erweiterung zu initialisieren(AppInit).

Reden wir über AppInit. Sie können sehen, dass der Großteil der Erweiterung jetzt mit einem appReady-Callback geladen wird. Dieser Rückruf wird ausgelöst, wenn das Laden von Brackets abgeschlossen ist, und wird im Allgemeinen als "Best Practice" für Erweiterungen angesehen.

Das Registrieren eines Menüpunkts erfordert einige Schritte. Ich beginne mit der Definition einer "Befehls-ID", einer eindeutigen Kennung für das Element, das ich der Benutzeroberfläche hinzufüge. Der typische Weg, dies zu tun, ist das Format extensionname.someaction. In meinem Fall habe ich helloworld.execute verwendet. Ich kann diesen Befehl dann zusammen mit der Funktion(handleHelloWorld) registrieren, die aufgerufen werden soll, wenn der Befehl ausgelöst wird.

Der letzte Schritt besteht darin, diesen Befehl zum Menü hinzuzufügen. Sie können sich wahrscheinlich vorstellen, dass mein Menüelement basierend auf diesem Wert unter dem Menü Ansicht hinzugefügt wird: Menus.AppMenuBar.VIEW_MENU. Woher kenne ich diesen Wert? Ganz einfach, ich habe gesehen, dass andere Erweiterungen dies tun. Im Ernst, es gibt jedoch noch keine spezifische Liste mit solchen Elementen. Vergessen Sie nicht, dass Brackets Open Source ist. Ich kann einfach zum GitHub-Repository wechseln und es überprüfen. In diesem Fall ist die Datei Menus.js, die sich auf Github befindet. Darin kann ich sehen, wo die verschiedenen Kernmenüs definiert sind:

/**
  * Brackets Application Menu Constants
  * @enum {string}
*/
var AppMenuBar = {
     FILE_MENU       : "file-menu",
     EDIT_MENU       : "edit-menu",
     VIEW_MENU       : "view-menu",
     NAVIGATE_MENU   : "navigate-menu",
     HELP_MENU       : "help-menu"
};

Als allgemeine Faustregel ist es sinnvoll, zumindest oberflächlich zu wissen, was in Brackets selbst verfügbar ist. Ihre Erweiterungen verwenden von Zeit zu Zeit mehrere verschiedene Funktionen, daher ist es definitiv in Ihrem Interesse, zumindest die Lage des Landes zu kennen.

Nach dem erneuten Laden von Brackets sehen Sie nun den Menüpunkt im Menü Ansicht. Die genaue Position kann etwas zufällig sein, da Sie möglicherweise andere Erweiterungen installiert haben.

Sie können Ihre Position tatsächlich etwas genauer angeben. Auch hier hilft Ihnen der Quellcode. Die gleiche Datei, die ich oben verlinkt habe, enthält auch die addMenuItem-Definition.

Geben Sie etwas Lippenstift auf dieses Schwein

Nachdem Sie nun ein einfaches Beispiel dafür gesehen haben, wie eine Erweiterung in Brackets integriert werden kann, sehen wir uns an, wie wir die Benutzeroberfläche aktualisieren. In der vorherigen Version unseres Codes wurde eine Benachrichtigung verwendet, um eine Nachricht zu senden. Das funktioniert zwar, ist aber nicht sehr schön. Ihr Code kann wie jeder andere DOM-Änderungscode auf den Brackets-Editor zugreifen. Sie können zwar alles tun, was Sie möchten, aber es gibt einige Standardmethoden, mit denen Erweiterungen die Benutzeroberfläche in Brackets aktualisieren. (Als Warnung, im Allgemeinen möchten Sie das DOM der Haupt-Editor-Benutzeroberfläche nicht berühren. Sie können, aber mit zukünftigen Updates kann Ihr Code brechen. Außerdem sind Benutzer möglicherweise nicht glücklich, wenn Ihre Erweiterung einen Kern in Brackets ändert.)

Die erste Methode, die wir uns ansehen, verwendet modale Dialogfelder. Brackets verwendet dies bereits und verfügt über eine API zum Aufrufen von Erweiterungen. Als einfaches Beispiel aktualisieren wir einfach die HelloWorld-Erweiterung, um stattdessen ein Modal zu verwenden.

Listing 3: helloworld3/main.js
/*
Based - in part - on the HelloWorld sample extension on the Brackets wiki:
https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension
*/
define(function(require, exports, module) {

    var CommandManager = brackets.getModule("command/CommandManager"),
        Menus = brackets.getModule("command/Menus"),
        Dialogs = brackets.getModule("widgets/Dialogs"),
        DefaultDialogs = brackets.getModule("widgets/DefaultDialogs"),
        AppInit = brackets.getModule("utils/AppInit");

    function log(s) {
            console.log("[helloworld3] "+s);
    }

    function handleHelloWorld() {
        Dialogs.showModalDialog(DefaultDialogs.DIALOG_ID_INFO, "Hello World", "Same Important Message");
    }

    AppInit.appReady(function () {

        log("Hello from HelloWorld3.");

        var HELLOWORLD_EXECUTE = "helloworld.execute";

        CommandManager.register("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld);

        var menu = Menus.getMenu(Menus.AppMenuBar.VIEW_MENU);
        menu.addMenuItem(HELLOWORLD_EXECUTE);

    });

});

Beachten Sie das Hinzufügen von zwei zusätzlichen Brackets-Modulen: Dialogs und DefaultDialogs. Die nächste Änderung ist in handleHelloWorld. Eine der Methoden in der Dialog-Bibliothek ist die Möglichkeit, einen Dialog anzuzeigen (keine Überraschung, nehme ich an). Die Methode benötigt eine Klasse, einen Titel und einen Hauptteil, und das war's. Es gibt noch mehr, was Sie mit Dialogen tun können, aber im Moment demonstriert dies die Funktion. Wenn wir den Befehl jetzt ausführen, erhalten wir eine viel schönere Benutzeroberfläche. (Zusammen mit Standardschaltflächen und -verhalten zum Schließen des Dialogfelds.)

Das ist ein Beispiel, schauen wir uns jetzt ein anderes an: Erstellen eines unteren Panels. Wie bei Dialogen haben wir Unterstützung von Brackets, um es einfacher zu machen. Schauen wir uns ein Beispiel an und dann erkläre ich die Änderungen.

Listing 4: helloworld4/main.js
/*
Based - in part - on the HelloWorld sample extension on the Brackets wiki:
https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension
*/
define(function(require, exports, module) {

    var CommandManager = brackets.getModule("command/CommandManager"),
    Menus = brackets.getModule("command/Menus"),
    PanelManager = brackets.getModule("view/PanelManager"),
    AppInit = brackets.getModule("utils/AppInit");

    var HELLOWORLD_EXECUTE = "helloworld.execute";
    var panel;

    function log(s) {
            console.log("[helloworld4] "+s);
    }

    function handleHelloWorld() {
        if(panel.isVisible()) {
            panel.hide();
            CommandManager.get(HELLOWORLD_EXECUTE).setChecked(false);
        } else {
            panel.show();
            CommandManager.get(HELLOWORLD_EXECUTE).setChecked(true);
        }
    }

    AppInit.appReady(function () {

            log("Hello from HelloWorld4.");

            CommandManager.register("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld);

            var menu = Menus.getMenu(Menus.AppMenuBar.VIEW_MENU);
            menu.addMenuItem(HELLOWORLD_EXECUTE);

            panel = PanelManager.createBottomPanel(HELLOWORLD_EXECUTE, $("<div class='bottom-panel'>HTML for my panel</div>"),200);

    });

});

Konzentrieren wir uns auf die Veränderungen. Zuerst habe ich die Dialogmodule fallen gelassen, da ich sie nicht mehr verwende. Stattdessen laden wir den PanelManager. Unten im appReady-Block habe ich mit der PanelManager-API-Methode createBottomPanel ein neues Panel definiert. Wie der Menübefehl nimmt dieser eine eindeutige ID ein, also verwende ich einfach HELLOWORLD_EXECUTE wieder. Das zweite Argument ist ein mit jQuery umschlossener HTML-Block (und falls Sie sich fragen, ja, wir können das schöner machen) und schließlich eine Mindestgröße. Dadurch wird das Panel eingerichtet, aber nicht ausgeführt.

Im Event-Handler, den wir an das Menü gebunden haben, können wir das Panel fragen, ob es sichtbar ist und es dann entweder aus- oder einblenden. Dieser Teil sollte ziemlich trivial sein. Zum Spaß habe ich etwas mehr Komplexität hinzugefügt. Beachten Sie, dass CommandManager uns ein Menüelement abrufen und eine geprüfte Eigenschaft festlegen lässt. Dies kann unnötig sein, da der Benutzer das Panel selbst leicht sehen kann, aber das Hinzufügen des Häkchens macht die Dinge nur ein wenig offensichtlicher. Im Screenshot unten sehen Sie das Panel in seinem sichtbaren Zustand.

Sie wundern sich vielleicht sofort über das Panel-HTML. Gibt es eine bessere Möglichkeit, den HTML-Code bereitzustellen? Trotzdem stylen? Ja, schauen wir uns eine erweiterte Version an.

Listing 5: helloworld5/main.js
/*
Based - in part - on the HelloWorld sample extension on the Brackets wiki:
https://github.com/adobe/brackets/wiki/Simple-%22Hello-World%22-extension
*/
define(function(require, exports, module) {


    var CommandManager = brackets.getModule("command/CommandManager"),
    Menus = brackets.getModule("command/Menus"),
    PanelManager = brackets.getModule("view/PanelManager"),
    ExtensionUtils          = brackets.getModule("utils/ExtensionUtils"),        
    AppInit = brackets.getModule("utils/AppInit");

    var HELLOWORLD_EXECUTE = "helloworld.execute";
    var panel;
    var panelHtml     = require("text!panel.html");

    function log(s) {
            console.log("[helloworld5] "+s);
    }

    function handleHelloWorld() {
        if(panel.isVisible()) {
            panel.hide();
            CommandManager.get(HELLOWORLD_EXECUTE).setChecked(false);
        } else {
            panel.show();
            CommandManager.get(HELLOWORLD_EXECUTE).setChecked(true);
        }
    }

    AppInit.appReady(function () {

        log("Hello from HelloWorld5.");
        ExtensionUtils.loadStyleSheet(module, "helloworld.css");
        CommandManager.register("Run HelloWorld", HELLOWORLD_EXECUTE, handleHelloWorld);

        var menu = Menus.getMenu(Menus.AppMenuBar.VIEW_MENU);
        menu.addMenuItem(HELLOWORLD_EXECUTE);

        panel = PanelManager.createBottomPanel(HELLOWORLD_EXECUTE, $(panelHtml),200);

    });

});

Wie zuvor konzentriere ich mich auf die Veränderungen. Beachten Sie zunächst, dass ich eine Variable namens panelHtml eingefügt habe, die über require geladen wird. Dadurch kann ich meinen HTML-Code außerhalb meines JavaScript-Codes definieren. (Sie können auch Vorlagen-Engines verwenden. Brackets werden mit Moustache geliefert.) Der HTML-Code hinter dem Panel ist ziemlich einfach.

Listing 6: helloworld5/panel.html
<div class="bottom-panel helloworld-panel" id="helloworldPanel">
<h1>My Panel</h1>

<p>
My panel brings all the boys to the yard,<br/>
And they're like<br/>
It's better than yours,<br/>
Damn right it's better than yours,<br/>
I can teach you,<br/>
But I have to charge
</p>
</div>

Zurück zu main.js habe ich eine weitere Funktion gezeigt, loadStyleSheet. Auf diese Weise können Sie ein erweiterungsspezifisches Stylesheet laden. Ich habe eine Datei, helloworld.css, mit einigen einfachen (aber geschmackvollen) CSS-Stilen erstellt.

Listing 7: helloworld5/helloworld.css
.helloworld-panel h1 {
        color: red;
}

.helloworld-panel p {
        color: blue;
        font-weight: bold;
}

Beachten Sie, dass ich meinen Stilen einen eindeutigen Namen vorangestellt habe. Dadurch wird sichergestellt, dass meine Klassen nicht mit in Brackets integrierten Elementen in Konflikt geraten. Mit diesen einfachen Änderungen sieht mein Panel jetzt viel besser aus und Sie können sehen, warum ich weltweit für meine überragenden Designfähigkeiten bekannt bin.

Verpacken und teilen Sie Ihre Kick Butt Extension

Natürlich reicht es nicht aus, nur die coolste Brackets-Erweiterung zu erstellen. Sie möchten es wahrscheinlich(hoffentlich!) mit anderen teilen. Eine Möglichkeit besteht darin, das Verzeichnis einfach zu komprimieren und auf Ihrer Website abzulegen. Die Leute können die ZIP-Datei herunterladen, extrahieren und in ihren Brackets-Erweiterungsordner kopieren.

Aber das ist nicht cool. Du willst cool sein, oder? Um Ihre Erweiterung freizugeben und über den Brackets Extension Manager verfügbar zu machen, müssen Sie Ihrer Erweiterung lediglich eine package.json-Datei hinzufügen. Wenn Sie Node.js schon einmal verwendet haben, wird Ihnen dies bekannt vorkommen. Hier ist ein Beispiel für unsere Erweiterung.

Listing 8: helloworld6/package.json
{
    "name": "camden.helloworld",
    "title": "HelloWorld",
    "description": "Adds HelloWorld support to Brackets.",
    "homepage": "https://github.com/cfjedimaster/something real here",
    "version": "1.0.0",
    "author": "Raymond Camden <raymondcamden@gmail.com> (https://www.raymondcamden.com)",
    "license": "MIT",
    "engines": {
        "brackets": "<=0.34.0"
    }
}

Das meiste davon ist selbsterklärend, aber der wirklich entscheidende Teil ist der Motorblock. Brackets aktualisieren sich ziemlich schnell. Wenn Brackets irgendwann eine bestimmte Funktion hinzugefügt hat, auf die Ihre Erweiterung angewiesen ist, können Sie hier eine einfache Bedingung hinzufügen, um sicherzustellen, dass die Leute nicht versuchen, Ihre Erweiterung auf einer inkompatiblen Version zu installieren. (Eine vollständige Auflistung der möglichen Einstellungen finden Sie im Wiki.)

Sobald Sie dies getan haben, müssen Sie es im nächsten Teil in die Brackets-Registrierung hochladen. Sie müssen sich über Ihren GitHub-Account einloggen, aber wenn Sie das getan haben, können Sie einfach Ihre ZIP-Datei hochladen. Ihre Nebenstelle steht dann allen Benutzern von Brackets zur Verfügung. Noch besser, wenn Sie Ihre Erweiterung aktualisieren, kann der Erweiterungsmanager dies dem Benutzer anzeigen, damit er weiß, dass ein Update verfügbar ist.

Was sonst?

Hoffentlich haben Sie gesehen, wie einfach es ist, Brackets zu erweitern. Es gibt noch mehr, das wir nicht behandelt haben, wie die Linting-API und die NodeJS-Integration, aber dieser Artikel sollte mehr als genug sein, um Ihnen den Einstieg zu erleichtern. Zur Erinnerung, vergessen Sie nicht, dass es eine große Sammlung von Erweiterungen gibt, mit denen Sie sofort anfangen können zu spielen. Viel Glück!