React Admin Interface

[tukey42]

Hallo,
ich möchte ein Adapter erstellen, dessen Admin Interface auf React basiert, da die Konfiguration etwas komplexer ist. Leider ist für mich React Neuland und ich finde nicht alle Infos, die ich brauche. Den Rahmen für den Adapter habe ich mit dem Adapter Creator erstellt. Folgende Infos habe ich bisher zusammengetragen:

• https://github.com/ioBroker/adapter-react-v5: Dies ist wohl als Einführung zu sehen. Leider klappt aktuell schon die Änderung auf v5 nicht, aber dazu werde ich evtl. einen anderen Thread erstellen.
• https://iobroker.github.io/adapter-react-demo/: Demo ioBroker React Components, leider habe ich dazu keine Erklärung gefunden.
• https://github.com/AlCalzone/iobroker-react: Hier scheint zweiter Ansatz für das Admin Interface zu existieren, was auf Funktionen und nicht auf Klassen basiert. Was sollte man nun nehmen?????
• https://mui.com: Beschreibung der Material UI React Components, die wohl die Basis des GUI bilden sollen.

Keine Ahnung, ob das stimmt, was ich gerade geschrieben habe. Leider habe ich weiter keine Infos (Dokus, best practices, ...) gefunden, die mir helfen, mein GUI zu erstellen. Gibt es da irgendwo irgendetwas?
Ich habe z.B. auch noch nicht gefunden, wie das GUI mit dem ioBroker kommuniziert. Ich möchte die Konfiguration als Devices/States im Objektbaum speichern. Wie geht das?

Ich hoffe, mir kann jemand einen Tip geben, wo ich weitere Infos finde bzw. wie ich am besten beginne.

[mcm1957]

@tukey42
Ev findest du da Hilfe:

https://t.me/+gsX-e8k4mLtmZjZk

versprechen möcht ich aber nichts.

[OliverIO]

@mcm57
habt ihr eigentlich keine angst, das das know how über immer mehr kommunikationskanäle sich verstreut?

forum, facbook, discord, telegram, github (hab ich noch wleche vergessen?)

wer mag den da, wenn überhaupt, mehr wie einem kanal überhaupt folgen wollen? ich nicht.
ganz geschweige denn, das in einem messengerformat, das wissen sowieso bald wieder verschwunden ist, weil das nie irgend jemand wieder findet nach einer weile.

ich bekomme heute schon selten eine antwort auf meine fragen

[mcm1957]

@oliverio

Ich habe hier nur auf einen Kommunikationskanal für Adapter ENTWICKLER verwiesen. Nach meiner Erfahrung erfolgt der entwicklungsspezifische Support eher auf telegram / discord.

Im Forum geht es um User support, Bedarfserhebung, Testkommunikation, Fehlersuche.

discord und telegram sind synchronisiert (zumindest die Entwicklungskanäle) daher kannst du das als einen Kanal betrachten. Facebook kenn ich nicht, ob dort Fragen zur Adapterentwicklung (und um das ging es hier) besprochen werden weiß ich nicht.

Github ist zur Dokumentation von (konkreten) Fehler und Erweiterungswünschen.

ich bekomme heute schon selten eine antwort auf meine fragen

Wo stellst du diese und zu welchem Thema? Entwicklung, Benutzung/Anwendung/ Fehlern?

[OliverIO]

@mcm57

hm, lustig,
warst nicht du das wo ich letztens geantwortet habe?
https://github.com/oweitman/ioBroker.squeezeboxrpc/issues/63#issuecomment-1658303244
Nicht das ich erwarte, das das jemand liest.
Aber da habe ich ein paar Issues gemeldet.

GermanBluefox created this issue in oweitman/ioBroker.squeezeboxrpc

closed Update stable version in repo from 1.3.9 to 1.3.10 #63

[mcm1957]

@oliverio said in React Admin Interface:

@mcm57

hm, lustig,
warst nicht du das wo ich letztens geantwortet habe?
https://github.com/oweitman/ioBroker.squeezeboxrpc/issues/63#issuecomment-1658303244
Nicht das ich erwarte, das das jemand liest.
Aber da habe ich ein paar Issues gemeldet.

Yep. das bin ich.
Hatte den Context hier nicht am Radar.

Die "Update stable version" Issues erfolgen als halbautomatische Erinnerung. Ich hab dienen Comment nur insofern registiert, als du derzeit keinen Update im Stable angebracht siehst. (Zur Abklärung von Problemen der Entwicklungsumgebung wär das Issue auch ungeeignet).

Ich schau mal in die referenzierten Issues rein - auf den ersten Blick würd ich aber sagen, dass du mit den Fragen in Telegram/Discord Kanal am Besten aufgehoben wärst. Generell ist ein Github Issue für Probleme die nicht ziemlich sicher eine Fehler / Feature sind eher schlecht geeignet da du dort nur einen od zwei Entwickler erreichst während in Telegram/Discord eine größere Gruppe aktiver Entwickler Tipps geben können.

[Garfonso]

@tukey42 said in React Admin Interface:

Ich möchte die Konfiguration als Devices/States im Objektbaum speichern. Wie geht das?

Das ist eigentlich so nicht gedacht und ein Hinweis darauf, dass deine Konfiguration nicht das ist, was ioBroker als Adapter-Konfiguration sieht. Die wird eigentlich nur im Instanzobjekt gespeichert und das geht weitgehend automatisch ( siehe z.B. template/creator code -> der Aufruf von "this.props.onChange" sorgt dafür, dass Daten gespeichert werden. "attr" ist dabei das Attribut, was auch in der io-package.json definiert werden sollte ).

Daher die Frage: Warum willst du deine Config in Devices/States speichern? Und: ist es sinnvoll / notwendig, dass dafür bei jeder Änderung der Adapter neu gestartet wird. Ansonsten wäre es sinnvoller, über einen tab nachzudenken. (z.B. Zigbee Adapter hat das darauf umgebaut).

Wenn es tatsächlich "nur" um Anlegen von Geräten geht, ist der "normale" Weg, dass in der Konfiguration alles wichtige über die Geräte (z.B. Adresse, Zugangscode, usw) angelegt wird und der Adapter dann daraus (beim Start) die Devices baut (und alte abräumt). Was passiert z.B. in deinem Szenario, wenn der User den Objektbaum von deinem Adapter löscht? Ist dann alles weg?

Ansonsten läuft die Kommunikation im Frontend über socket io ( wie es hier steht). Die ist Teil des Admin. Weiß nicht so genau, wo die dokumentiert ist... und ja... gerade GUI ist extrem schlecht dokumentiert (und war es schon immer, tbh). Daher ist für die socketIO vermutlich der beste weg in den Code zu gucken.
Und ja, bei react gibt es zwei "konkurrierende" Ansätze. Es gibt das, was der creator macht und was bluefox bei den core-Adaptern macht. Das ist zum Teil deutlich anders. Ich würde, soweit es geht, bei dem, was der creator anlegt, bleiben.

@oliverio said in React Admin Interface:

habt ihr eigentlich keine angst, das das know how über immer mehr kommunikationskanäle sich verstreut?

Es ist klar, dass viel Knowhow nur in den Köpfen der Leute ist und es für Entwickler schwierig ist daran zu kommen. Es gibt immer wieder Versuche, das aufzuschreiben. Scheitert aber an den zeitlichen Ressourcen der Leute, die viel im Kopf haben (die müssen halt viele Adapter auf Trab halten und bauen auch ständig neues ).

Der aktuelle Versuch ist hier. Leider steht da noch extrem wenig... Vermutlich ist der Issues Bereich aktuell das Hilfreichste daran → da steht, was alles noch fehlt... Es wäre wirklich hilfreich, wenn da Leute hereingucken, die über was stolpern und zumindest ein Issue anlegen, was fehlt, am besten mit Links, wo sie es vielleicht doch gefunden haben. (die Struktur ist leider auch noch nicht ganz klar, aber das Ziel ist, so weit wie möglich die Doku "am Code" zu haben und die automatisiert da herauszuziehen bzw. aus den dev-docs darauf zu verlinken → aber gerne auch PRs erstellen).

(und zu deinen konkreten Problemen: ich glaube devcontainer nutzt aktuell keiner mehr und es hat auch damals nur UncleSam genutzt und eingebaut und der hat halt nen Kind bekommen und ist jetzt anderweitig beschäftigt. Der dev-server, ähnliches Konzept, aber ohne container, dafür nur mit npm Paketen, wird von einigen Entwiklern genutzt und da kann man eher Hilfestellung geben -> wobei auch da das watch im Browser immer wieder "wakelig" ist... )

[OliverIO]

@tukey42 sagte in React Admin Interface:

Ich möchte die Konfiguration als Devices/States im Objektbaum speichern

um hier im thread auch noch zum thema was beizutragen.
der iobroker speichert die instanz-konfiguration eines adapters immer in den objektdaten

system.adapter.<Adaptername>.<Instanznummer>
als json unter folgendem pfad "native"
du kannst bereits bestehende adapter prüfen, indem du den expertenmodus einschaltest. dann erscheint im objektbaum noch der zweig system.*
dort suchst du gemäß dem obigen pfad einen adapter heraus und schaust in den einstellungen des datenpunkt im reiter object data
leider führt iobroker beim beschreiben von native immer einen automatischen adapter neustart durch, welchen du nicht verhindern kannst

ansonsten kannst du deine daten natürlich auch in einem datenpunkt speichern (ob als state oder object bleibt dir überlassen), der deiner adapter instanz zuordenbar ist
<adaptername>.<adapternummer>.config
das object sieht der benutzer erst einmal nicht direkt, den datenpunkt schon und er könnte ihn auch löschen.

als weitere option kannst du auch eine physische datei unter /opt/iobroker/iobroker-data anlegen.
das musste ich für den adapter tvprogram machen, da die datenmenge zu groß war um sie über einen datenpunkt an das widget zu transportieren
aber das würde ich nur im ausnahmefall nehmen um konfigurationsdaten zu speichern.

der Standardweg für react Konfiguration ist wie in der doku beschrieben
du erhältst und setzt die Daten über die beiden events. danach speichert iobroker für dich die daten in dem oben benannten datenpunkt und startet dann den adapter neu.

onPrepareLoad(settings) {
    settings.pass = this.decode(settings.pass);
}
onPrepareSave(settings) {
    settings.pass = this.encode(settings.pass);
}

onPrepareSave wird erst aufgerufen, wenn der nutzer auch speichern drückt.