generated from cloudmaker97/JTL-Plugin-Template
-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loader für die Sentry-SDK installieren und deinstallieren
- Loading branch information
DDEV User
committed
May 7, 2024
1 parent
1f276e2
commit 23e931c
Showing
3 changed files
with
195 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,103 +1,5 @@ | ||
# Entwicklungsvorlage für Plugins | ||
# Sentry Loader für den JTL Shop | ||
|
||
Für Fragen zur Nutzung des Plugins kann man sich an mich per E-Mail wenden: | ||
> **Hinweis:** Dieses Plugin ist nur für Entwickler gedacht und sollte nur in einer Testumgebung verwendet werden. Im Produktivbetrieb sollte das Plugin nicht verwendet sein, da das Plugin nicht vollständig getestet wurde. | ||
- Dennis Heinrich <der@dennis-heinri.ch> | ||
|
||
## Mitgelieferte Features | ||
|
||
Diese Vorlage kommt mit folgenden Technologien: | ||
|
||
- Bootstrap Klasse | ||
- Webpack Bundler | ||
- TypeScript | ||
- SCSS Loader | ||
- TailwindCSS | ||
|
||
### Was ist Webpack? | ||
|
||
Webpack ist ein Bundler, der alle Dateien (JavaScript, CSS und ggf. Bilder) in eine einzelne Datei | ||
bündelt: Das Resultat ist das Bundle. Dabei werden alle SCSS Dateien in CSS Dateien kompiliert. | ||
Der Vorteil darin ist, dass Anfragen an den Shop gespart werden und die Seitengeschwindigkeit erhöht wird. | ||
|
||
### Was ist TailwindCSS? | ||
|
||
TailwindCSS ist ein CSS-Framework, das es ermöglicht, CSS direkt im HTML zu schreiben (ohne dabei Inline) | ||
zu sein. Es ist sehr flexibel und kann mit SCSS kombiniert werden und ist eine moderne Alternative zu | ||
überladenen CSS-Frameworks wie Bootstrap, denn Tailwind kompiliert ausschließlich die verwendeten Klassen | ||
und nicht das gesamte Framework in das Webpack Bundle. | ||
|
||
Wenn man mit dem Umgang nicht vertraut ist, kann das einfach ignoriert werden, denn wie bereits erwähnt wurde, | ||
werden nur benutzte Klassen kompiliert und erhöht nicht die Dateigröße vom Webpack Bundle. | ||
|
||
### Was ist TypeScript? | ||
|
||
TypeScript ist eine Programmiersprache, die auf JavaScript basiert. Sie bietet die Möglichkeit, Typen zu definieren, | ||
was die Entwicklung qualitativ aufwerten kann. Statt .js Dateien werden .ts Dateien verwendet, die dann in .js Dateien | ||
kompiliert werden. | ||
|
||
TypeScript zu schreiben ist optional und kann auch ignoriert werden, denn man kann auch reines JavaScript in die Datei | ||
schreiben. Dennoch muss nach dem Ändern der Datei das Webpack Bundle neu gebaut werden. | ||
|
||
## Entwicklung starten | ||
|
||
### Namespace anpassen | ||
|
||
Das Plugin benötigt einen einmaligen Namespace. Dieser muss in auch der Datei `./plugin.xml` angepasst werden. | ||
Die einfachste Lösung ist, im gesamtem Plugin nach `plugin_test` zu suchen und durch den gewünschten Namespace zu | ||
ersetzen, z.B. `meine_firma_plugin_fuer_funktion_xy`. Gängige Praxis ist es, ein Präfix zu verwenden, das allen | ||
eigenen Plugins vorangestellt wird, z.B. `meine_firma` und anschließend der technische Name des Plugins, z.B. `plugin_fuer_funktion_xy`. | ||
|
||
### README.md anpassen | ||
|
||
Die Datei `README.md` ist die Datei, die auf GitHub und im Plugin unter dem Tab "Dokumentation" angezeigt wird. | ||
Sie sollte mit Informationen zum Plugin angepasst werden, damit Nutzer die Funktion des Plugins verstehen. | ||
|
||
### Webpack Bundle bauen | ||
|
||
Damit das Webpack Bundle gebaut werden kann, müssen die Projekt-Voraussetzungen erfüllt sein. Dann muss die | ||
Kommandozeile im Ordner (`./frontend/webpack`) geöffnet werden. | ||
|
||
Um die Abhängigkeiten für Webpack zu installieren, müssen folgende Befehle ausgeführt werden: | ||
```shell | ||
npm install # Für Nutzer, die npm nutzen | ||
pnpm install # Für Nutzer, die pnpm nutzen | ||
``` | ||
|
||
Wenn nun entwickelt wird, muss bei sämtlichen Änderungen das Webpack Bundle neu gebaut werden. Dafür gibt es zwei | ||
verschiedene Befehle: einen um das Bundle einmalig zu bauen und einen um das Bundle bei Änderungen automatisch neu | ||
zu bauen. Bei der automatischen Variante muss die Kommandozeile offen bleiben. | ||
|
||
Für das einmalige Bauen des Bundles: | ||
```shell | ||
npm run build # Für Nutzer, die npm nutzen | ||
pnpm run build # Für Nutzer, die pnpm nutzen | ||
``` | ||
|
||
Für das automatische Bauen nach Änderung einer Datei: | ||
```shell | ||
npm run watch # Für Nutzer, die npm nutzen | ||
pnpm run watch # Für Nutzer, die pnpm nutzen | ||
``` | ||
|
||
### Veröffentlichung eines Plugins (Workflow) | ||
|
||
Wenn das Plugin fertig entwickelt wurde, kann es veröffentlicht werden. Dazu gehört u.a. das abschließende | ||
Bauen des Webpack Bundles und das Erstellen eines ZIP-Archivs. Um dem Entwickler eine | ||
einfache Möglichkeit zu geben, Versionen zu erstellen und zu veröffentlichen, gibt es ein GitHub-Workflow. | ||
|
||
Der Workflow wird automatisch nach einem Push auf GitHub ausgeführt, wenn ein neuer Tag mit Git erstellt wurde. So kann man | ||
wenn man eine neue Version erstellt hat, einen Tag mit der Versionsnummer erstellen und alle Schritte werden automatisch | ||
ausgeführt. Das Plugin bekommt dann unter dem Tab "Releases" auf GitHub einen Eintrag mit der Versionsnummer und dem Link zum | ||
Download des fertigen Plugins. Das erstellen eines Tags kann mit folgendem Befehl ausgeführt werden: | ||
|
||
```shell | ||
git tag 1.0.0 # Für die Version 1.0.0 | ||
git push --tags # Tags auf GitHub hochladen | ||
``` | ||
|
||
## Voraussetzungen | ||
|
||
- NodeJS mit `npm` oder `pnpm` | ||
- JTL Shop auf 5.0.0 oder höher | ||
- PHP 7.4 oder höher | ||
Dieses Plugin lädt den Sentry SDK in den JTL Shop. Der Sentry SDK ist ein Open Source Projekt, welches es ermöglicht, Fehler und Ausnahmen in der Anwendung zu erfassen und an Sentry zu übermitteln. Als Alternative zu diesem Plugin kann auch das Open-Source Projekt GlitchTip verwendet werden. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,25 @@ | ||
<?xml version="1.0" encoding="utf-8"?> | ||
<jtlshopplugin> | ||
<Name>Vorlage eines Plugins</Name> | ||
<Description>Hier könnte Ihre Beschreibung stehen.</Description> | ||
<Name>Sentry-SDK Loader</Name> | ||
<Description>Automatische Fehlerübermittlung zur Nachverfolgung.</Description> | ||
<Author>Dennis Heinrich</Author> | ||
<URL>https://dennis-heinri.ch</URL> | ||
<PluginID>plugin_test</PluginID> | ||
<PluginID>dh_sentry_loader</PluginID> | ||
<XMLVersion>100</XMLVersion> | ||
<Icon></Icon> | ||
<Version>1.0.0</Version> | ||
<Version>1.0.1</Version> | ||
<ShopVersion>5.0.0</ShopVersion> | ||
<CreateDate>2023-02-01</CreateDate> | ||
<CreateDate>2024-05-07</CreateDate> | ||
<Install> | ||
<JS> | ||
<file> | ||
<name>main.js</name> | ||
<priority>1</priority> | ||
<position>head</position> | ||
</file> | ||
</JS> | ||
<Adminmenu> | ||
<Settingslink sort="2"> | ||
<Name>Einstellungen</Name> | ||
<Setting type="text" initialValue="" sort="4" conf="Y"> | ||
<Name>Sentry-DSN</Name> | ||
<Description>Die URL zur Sentry DSN</Description> | ||
<ValueName>sentry_sdk_dsn</ValueName> | ||
</Setting> | ||
</Settingslink> | ||
</Adminmenu> | ||
</Install> | ||
</jtlshopplugin> |