{"id":3357,"date":"2023-12-12T11:15:00","date_gmt":"2023-12-12T10:15:00","guid":{"rendered":"https:\/\/ictknow-how.ch\/blog\/?p=3357"},"modified":"2023-12-12T12:14:45","modified_gmt":"2023-12-12T11:14:45","slug":"lidarr-wie-nimmt-man-aenderungen-am-frontend-vor","status":"publish","type":"post","link":"https:\/\/ictknow-how.ch\/blog\/2023\/12\/12\/lidarr-wie-nimmt-man-aenderungen-am-frontend-vor\/","title":{"rendered":"Lidarr \u2013 wie nimmt man \u00c4nderungen am Frontend vor?"},"content":{"rendered":"\n

Im ersten Teil<\/a> wird erkl\u00e4rt, wie man das Backend (C#<\/code>-Code) f\u00fcr Lidarr ver\u00e4ndert.
Im zweiten Teil<\/a> wird erkl\u00e4rt, wie man das unver\u00e4nderte Frontend (HTML<\/code> und JS<\/code>-Code) bereitstellt, damit \u00c4nderungen am Backend getestet werden k\u00f6nnen und keine 404-Not Found<\/code>-Fehlermeldung beim Kompilieren des C#-Codes erscheint.<\/p>\n\n\n\n

In diesem dritten Teil wird erkl\u00e4rt, wie man \u00c4nderungen am Frontend-Code selber vornimmt.<\/p>\n\n\n\n

Leider gibt die offizielle Lidarr-Wiki<\/a> f\u00fcr das Frontend keinerlei Hinweise, wie man Code-Anpassungen vornehmen soll. Die folgende M\u00f6glichkeit ist nur eine von verschiedenen Vorgehensweisen. Es gibt z.B. teure<\/a> und vermutlich umfangreichere L\u00f6sungen. Die hier erkl\u00e4rte Variante ist kostenlos und relativ einfach zu installieren und zu verwenden.<\/p>\n\n\n\n

Was braucht man um in Lidarr Anpassungen am Frontend-Code machen zu k\u00f6nnen?<\/strong><\/p>\n\n\n\n

Wenn man den Backend-Sourcecode z.B. in \u00abVisual Studio\u00bb ausf\u00fchrt, wird automatisch ein Browser mit dem sicht- und benutzbaren Frontend gestartet. Um diesen Code debuggen und analysieren zu k\u00f6nnen, ben\u00f6tigen wir die React-Developer-Tools<\/a>. Diese Browser-Erweiterung gibt es kostenlos f\u00fcr \u00abGoogle Chrome\u00ab, \u00abMozilla Firefox\u00bb und \u00abMicrosoft Edge\u00bb.<\/p>\n\n\n\n

Wenn man aus dem entsprechenden Online-Addon-\/Web-Store diese Erweiterung im eigenen Browser auf der Entwicklungsmaschine installiert hat, bekommt man zwei zus\u00e4tzliche M\u00f6glichkeiten zu den bestehenden Entwicklertools namens Components<\/strong> und Profiler<\/strong>.<\/p>\n\n\n\n

\"\"<\/a>
Die Entwicklertools in Google Chrome ruft man \u00fcber Ctrl + Shift + I oder die rechte Maustaste „Untersuchen“ auf<\/figcaption><\/figure>\n\n\n\n

Beispiel um die Verwendung der React-Developer-Tools im Browser zu erkl\u00e4ren:<\/strong><\/p>\n\n\n\n

In \u00abVisual Studio 2022\u00bb habe ich den backend-Code \u00fcber die Lidarr.sln<\/code> im Verzeichnis \\src<\/code> geladen und gestartet. Das Lidarr-Frontend startet nach ein paar Sekunden automatisch im lokalen Browser.
\u00dcber das Lidarr-GUI wurde ein K\u00fcnstler gesucht und hinzugef\u00fcgt.<\/p>\n\n\n\n

F\u00e4hrt man nun mit der Maus \u00fcber den Button Links<\/strong> (#1), poppen alle vorhandenen Detail-Links auf, die f\u00fcr diesen K\u00fcnstler bei der Datenquelle „MusicBrainz“ gespeichert sind. Dann \u00f6ffnet man die Browser-Entwickler-Tools mit Ctrl + Shift + I<\/kbd> und klickt oben im Menu dieser Entwickler-Tools auf den neu verf\u00fcgbaren Eintrag Components<\/strong> (#3). Das zeigt einem sehr viele Details zur aktuell ausgew\u00e4hlten Cursor-Position an. <\/p>\n\n\n\n

Im Beispiel wurde dann auf den Link f\u00fcr „Facebook“ geklickt (#2). Das zeigt in den Components<\/strong> (#3) unter props<\/strong> z.B. den kleingeschriebenen und im GUI sichtbaren Namen facebook<\/em>.
F\u00fcr die Frage „wie \u00e4ndere ich nun den Frontend-Code?“ ist der unterste Eintrag source<\/strong> (#4) entscheidend: ArtistDetailsLinks.js<\/code>
In dieser JavaScript-Datei steckt also der Code, der diese Links im Browser-GUI bereitstellt.
Wir finden die Datei ArtistDetailsLinks.js<\/code> im Verzeichnis \\frontend\\src\\Artist\\Details\\<\/code>
Dort k\u00f6nnen wir diese Datei z.B. im Texteditor \u00abNotepad++<\/a>\u00bb \u00f6ffnen.<\/p>\n\n\n\n

In Components<\/strong> unter source<\/strong> sehen wir weiter auch die Zahl 37<\/code>. Das gibt uns die Zeilenzahl im Sourcecode an. Wir suchen im Notepad++ also die Zeile 37<\/code>, die mit <Label<\/code> beginnt. Damit und mit den folgenden 6 Zeilen wird in React<\/code> der vom Backend \u00fcbergebene Inhalt als aufpoppender Link dargestellt.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Wenn man nun beispielsweise statt dem Begriff facebook<\/em> lieber die URL im GUI sichtbar machen m\u00f6chte, dann w\u00fcrde man im Notepad++ die Zeile 42 von {link.name}<\/code> auf {link.url}<\/code> (#6) \u00e4ndern.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Wenn man das Lidarr-GUI nach dem Speichern der Code-\u00c4nderung in Notepad++ mit F5 aktualisiert, passiert aber leider sichtbar gar nichts. Der Grund daf\u00fcr wurde im zweiten Teil erkl\u00e4rt: S\u00e4mtliche Frontend-Code-\u00c4nderungen m\u00fcssen mit Yarn<\/code> zuerst kompiliert und bereitgestellt werden.
Da das ein ziemlich m\u00fchsamer Ablauf w\u00e4re, wenn man bei jeder noch so kleinen Frontend Code-\u00c4nderung jedesmal manuell einen Kompilierungsaufruf starten m\u00fcsste, kann man wie folgt vorgehen:<\/p>\n\n\n\n

Wir lassen Yarn<\/code> das \\frontend<\/code>-Verzeichnis auf Ver\u00e4nderungen \u00fcberwachen:<\/strong><\/p>\n\n\n\n

Man wechselt wie im zweiten Teil erkl\u00e4rt in der Node.JS-Kommandozeile (mit Administratorrechten ausgef\u00fchrt) in das Sourcecode-Verzeichnis wo alle \\frontend<\/code> Dateien liegen, z.B. CD %USERPROFILE%\\Documents\\Visual Studio 2022\\Code Snippets\\Visual CS\\Lidarr-develop\\frontend<\/code><\/p>\n\n\n\n

Darin startet man Yarn<\/code> mit
yarn start<\/code><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Damit wird ab sofort – bis zum manuellen Abbrechen mit Ctrl + C – das gesamte \\frontend<\/code>-Verzeichnis auf Ver\u00e4nderungen \u00fcberwacht. Sobald man eine \u00c4nderung an einer beliebigen Code-Datei macht, wird Yarn<\/code> dies erkennen und sofort vollautomatisch aktualisieren.<\/p>\n\n\n\n

Falls man \u00fcbrigens fehlerhaften JS-Code einf\u00fcgt oder ver\u00e4ndert, sieht man im Node.JS-Konsolenfenster im Detail, welcher Fehler erkannt wurde und wieso der Code allenfalls nicht erfolgreich kompiliert werden konnte.<\/p>\n\n\n\n

Wenn wir im Notepad++ die Zeile 42 nochmal leicht ver\u00e4ndern und neu speichern, kann man im offenen Node.JS-Konsolenfenster beobachten, wie diese Ver\u00e4nderung sofort „\u00fcbersetzt“ wird. Das dauert nur wenige Sekunden. Dann endlich sieht man nach der Aktualisierung des GUI im Browser mit F5 auch die vorgenommene Ver\u00e4nderung.<\/p>\n\n\n\n

Damit haben wir nun eine M\u00f6glichkeit, die verantwortlichen JS-Dateien dank den React-Entwicklertools zu erkennen und darin Code-\u00c4nderungen an den entsprechenden Stellen durchzuf\u00fchren.
Sinngem\u00e4ss wird das auch f\u00fcr die anderen *arr-Projekte wie Radarr<\/a>, Sonarr<\/a>, Readarr<\/a> oder Whisparr<\/a> funktionieren.<\/p>\n\n\n\n

Zusammenfassung aller 3 Anleitungs-Teile und wie man Lidarr-Code ver\u00e4ndert:<\/strong><\/p>\n\n\n\n

Um den Backend<\/a><\/strong>-Code in C# zu ver\u00e4ndern, m\u00fcssen wir ihn in einer IDE laden, kompilieren und ausf\u00fchren.
Um den Frontend<\/a><\/strong>-Code zu ver\u00e4ndern, brauchen wir den laufenden Backend-Code, zus\u00e4tzlich Yarn<\/code>, die React<\/code>-Entwicklertools im Browser und einen Code-Editor wie Notepad++.<\/p>\n\n\n\n

Allgemeiner Hinweis zum Schluss
Dies alles l\u00e4sst uns den Lidarr-Code ausschliesslich lokal ver\u00e4ndern und testen.
Wer vor hat seine \u00c4nderungen dem Opensource-Projekt Lidarr zur Verf\u00fcgung zu stellen, der muss sich zwingend mit Git<\/a>\/Github<\/a> und den f\u00fcr dieses Projekt geltenden Contribute-Regeln<\/a> vertraut machen.
Es gibt keine Garantie, dass solche Ver\u00e4nderungen akzeptiert werden.<\/strong>
Bevor man sehr viel Zeit und Herzblut in \u00c4nderungen steckt, sollte man unbedingt VORHER abkl\u00e4ren<\/strong>, ob eine solche Anpassung erw\u00fcnscht ist und in welcher Form sie akzeptiert wird. Auch bei Opensource-Projekten entscheiden schlussendlich ein paar wenige Verantwortliche, was an Code und Ver\u00e4nderungen oder Erweiterungen in das Projekt aufgenommen wird.<\/p>\n\n\n

\n \n
\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n<\/div>\n \n\n
\n Rate this post<\/span>\n <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"

Im ersten Teil wird erkl\u00e4rt, wie man das Backend (C#-Code) f\u00fcr Lidarr ver\u00e4ndert.Im zweiten Teil wird erkl\u00e4rt, wie man das unver\u00e4nderte Frontend (HTML und JS-Code) bereitstellt, damit \u00c4nderungen am Backend getestet werden k\u00f6nnen und keine 404-Not Found-Fehlermeldung beim Kompilieren des C#-Codes erscheint. In diesem dritten Teil wird erkl\u00e4rt, wie man \u00c4nderungen am Frontend-Code selber vornimmt. … Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,278],"tags":[283,282,284,285,277,280,281],"class_list":["post-3357","post","type-post","status-publish","format-standard","hentry","category-software","category-visual-studio","tag-c","tag-c-sharp","tag-html","tag-javascript","tag-lidarr","tag-node-js","tag-yarn"],"_links":{"self":[{"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/posts\/3357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/comments?post=3357"}],"version-history":[{"count":0,"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/posts\/3357\/revisions"}],"wp:attachment":[{"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/media?parent=3357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/categories?post=3357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ictknow-how.ch\/blog\/wp-json\/wp\/v2\/tags?post=3357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}