Netatmo Service

Aller hop!! Nach dem Live-Coding von Pierre-Gilles, neue Motivation, es geht weiter:



Danke @pierre-gilles ^^

Das riecht nach einer durchgemachten Nacht​:sweat_smile:

Cool! Denk daran, was ich im Stream gesagt habe: Fang mit einem kleinen MVP an und iteriere dann weiter.

Wenn du in einer ersten Version nur einen Gerätetyp abdeckst, ist das schon sehr gut.

Mach den gesamten Prozess von Anfang bis Ende (Frontend, Backend, Tests usw.), damit der PR leicht lesbar und einfach zu testen ist.

Danach kannst du mit anderen Geräten in einem zweiten Schritt iterieren :slight_smile:

Danke für deine Nachricht!!

Ja, ich mache das parallel zum Durchgehen der Session und habe immer noch unsere vorherigen Gespräche im Kopf. Ich bin wie geplant bei den Ventilen gelandet. Ich habe mein Whimsical in 1,5 Stunden erledigt und jetzt habe ich fast das Primo-Frontende fertig.

Das ist eindeutig viel angenehmer, kein Zweifel!!

Das hat mir wirklich gefehlt (auch wenn ich denke, dass ich beim Testen Probleme haben werde, aber mit deinem Video daneben ist alles viel klarer!!)

Hallo !!

Also … ich bin „gut“ vorangekommen … trotz der neuen Netatmo-Authentifizierungsmethode !!

Ich habe es endlich geschafft, mich über OAuth2 zu verbinden … aber mit einem Trick. Ich bräuchte Ratschläge, um keine Riesenmaschine zu bauen …

@pierre-gilles, @AlexTrovato? Hättet ihr eine einfache Methode, um den redirect_uri in einer lokalen Umgebung zu konfigurieren? Ich habe ihn serverseitig hart kodiert, um es zu schaffen (also ${@ip von gladys}), aber sollte ich die Informationen nicht einfach serverseitig abrufen und dann alles frontendseitig erledigen? Aber wie kann ich die Startadresse abrufen, um den redirect_uri auszufüllen?

Vielen Dank im Voraus. Ich habe derzeit kein anderes Beispiel in Gladys gefunden …

Ich habe dasselbe Problem mit ewelink, sobald ich reinkomme, zeige ich dir meine Technik :wink:

Vielen Dank für deine Antwort @AlexTrovato
Top, ich warte auf dein Feedback. Auch wenn ich schon ein bisschen weitergekommen bin ^^
Ich lege hier mal das, was ich vor deiner Antwort geschrieben hatte, ab. Wir können später nochmal darüber reden!! :

Ich habe window.location.origin gefunden, das mir den aktuellen href zurückgibt. Reicht das aus? Oder haben wir schon ein Objekt in Gladys, das das zurückgibt und zugänglich ist?
In meinem Frontend gehe ich zur Anmeldeseite mit ‹ window.location.href = authUrl; › wobei 'authUrl = ‹ https://api.netatmo.net/oauth2/authorize?client_id=xxxxxxxxxxxxxxxxxxxxxx&scope=read_thermostat&state=c041b83e32dd3c20f1dae2c97b8384bb&redirect_uri=http%3A%2F%2F172.26.50.62%3A1444%2Fdashboard%2Fintegration%2Fdevice%2Fnetatmo%2Fsetup ›
Das funktioniert gut, aber darf ich das? Oder haben wir ein Tool, um das auf der Frontend-Seite zu erledigen?
Danach wird korrekt zu ‹ http://172.26.50.62:1444/dashboard/integration/device/netatmo/setup?state=9e60560558955bfb320655f145dde6d5&code=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx › weitergeleitet, mit einem Code, den wir gut abrufen können. Ich vergleiche dann den zurückgegebenen state mit dem ursprünglichen state, um die ‹ Transaktion › zu validieren.
Anschließend muss ich eine neue Anfrage über den Server stellen, um den ‹ access_token › und den ‹ refresh_token › zu erhalten.
Um den Token zu erhalten, sind wir uns einig, dass ich alle 10000 Sekunden ein ‹ poll › für { "access_token":"2YotnFZFEjr1zCsicMWpAA", "expires_in":10800, "refresh_token":"tGzv3JOkF0XG5Qx2TlKWIA", } mache

Edit:
Zur Info, ich habe den Frontend-Code gepusht und einen neuen PR eröffnet. Ich werde den Server-Code morgen sauber machen und pushen.

Wah, heiliger Bimbam :smiley:

Ich verwende denselben Trick. Aber man muss diese URL auf der OAuth-Netatmo/eWeLink-Seite deklarieren.
Ich habe sogar die Überprüfung hinzugefügt, dass Gladys Plus nicht verwendet wird (und dass es sich um eine lokale Instanz handelt) mit diesem Trick this.props.session.gatewayClient !== undefined, ich habe mich vom enedis-Dienst inspirieren lassen:

Also, basierend auf enedis, habe ich die Option gewählt, ein neues Tab zu öffnen, das zur eWeLink-Anmeldeseite weiterleitet:

Das target="_blank" ermöglicht das Öffnen eines neuen Tabs zur Ziel-URL href.

Genau, also für meine laufende Entwicklung an eWeLink habe ich eine neue Seite erstellt, die meiner redirectUrl nach der OAuth-Anmeldung entspricht.
Diese Seite holt den Code, den state, und sendet sie an den Gladys-Server, um den Token zu generieren.

Um die bei der Weiterleitung empfangenen Query-Parameter abzurufen, mache ich das:

    const { search: queryString, origin, pathname } = window.location;
    const queryParams = new URLSearchParams(queryString);

    // Map query params to JSON Object
    const params = {};
    for (const [key, value] of queryParams.entries()) {
      params[key] = value;
    }

Und params['code'] liefert mir den OAuth-Autorisierungscode.

Man wird sagen, eher als alle 10000s, die Dauer von expires_in.
Und man muss auch den Fall des Fehlers 401 beim Aufruf der Netatmo-APIs verwalten. Wenn du einen 401 erhältst, versuchst du ein refresh_token OAuth 1 Mal. Wenn du einen weiteren 401 erhältst, dann musst du den Gladys-Benutzer auffordern, sich erneut anzumelden.

Vielen Dank, dass du dir die Zeit für deine vielfältigen Antworten auf meine Fragen genommen hast!!

Froh, auf dem richtigen Weg zu sein, werde ich das morgen anschauen/testen und dich auf dem Laufenden halten.

Ja tatsächlich … das Öffnen in einem neuen Tab!! Das ist mir komplett entgangen ^^

Gute Nacht

Hallo @AlexTrovato,

Also, ich habe alles durchgesehen und war auch auf dem neuen Tab unterwegs… aber… vorerst bin ich zurückgegangen.

Ich wollte alle Verbindungszustände verwalten, aber es war unmöglich, die richtigen Zustände mit einem neuen Tab zu erhalten… selbst mit WebSockets (ich habe mich gefragt, ob das nicht durch das Verlassen des Tabs beeinflusst wird… ich habe nichts geschafft). Vorerst bin ich zum selben Tab zurückgekehrt.

Ich habe den Server und die Frontend-Änderungen gepusht.

Hier ist das Ergebnis:
Verbindungspräsentation

Man kann sehen, dass bei der Registrierung die Nachrichten blau werden sollten mit einer Verbindungsmeldung… aber nichts passiert. Beim Zurückkommen funktioniert es, weil die Seite neu geladen wird :sob: Ich verzweifle an der Verbreitung der Events ^^

Anfangs hatte ich daran gedacht, den access_token bei der Rückkehr anzuzeigen, um sicherzugehen, dass die Verbindung besteht, aber ich denke, dass das Übergeben an die Frontend nicht ideal ist.

Außerdem denke ich daran, später eine zweite Anmeldeoption hinzuzufügen, mit der Möglichkeit, die Tokens in dev.netatmo zu erstellen und zu kopieren/einfügen.


Ah okay!! Ich dachte, es müsste vor dem Ende sein ^^ Danke für die Info!!

Genau!! Vielen Dank!

Funktionale Verbindung !! Fortgeschrittene Tests (die ersten sind push)

@pierre-gilles, ich, der ich vorher wirklich nichts verstanden habe, dein Live-Coding ist eine echte Offenbarung (auch wenn es noch Dinge gibt, die wahrscheinlich nicht klappen werden ^^). Danke !!

Ich beende die Tests an diesem Teil, wie empfohlen, und gehe zur Erkundung der Geräte über.

Edit: Es geht voran !!

Aber ich mache mir wirklich Sorgen mit axios :sob: :sweat_smile:

Edit 2: Fertig!! :laughing:

Hallo @pierre-gilles,
Wäre es nicht hilfreich, eine erste Überprüfung für diesen neuen Teil durchzuführen (ich spreche hier insbesondere von der OAut2-Verbindung)? Unter der Voraussetzung, dass alle Tests für diesen Teil geschrieben sind und offensichtlich, wenn ich mich nicht zu weit vorwage, alles funktioniert (die Frontend-Tests sind fast fertig).
Das würde außerdem eine zu lange Überprüfung vermeiden.
Und mir die Möglichkeit geben, nicht an etwas anderem zu arbeiten, wenn dieser Anfang nicht gültig ist.

Vielen Dank im Voraus.

Bearbeitung: Ich kann auch ein Bild erstellen und einen API-Zugriff auf mein Konto für diejenigen teilen, die mir helfen möchten, indem sie die Verbindung für den funktionalen Teil testen (oder mit ihrem eigenen Konto testen, falls sie eines haben).

Ich habe die PR schnell durchgesehen, und ehrlich gesagt ist es Tag und Nacht im Vergleich zu den PRs, die du früher gemacht hast. Hier sind wir eindeutig im Geist des Projekts :star_struck:

Könntest du:

  • Die Verwaltung eines einzigen Gerätetyps hinzufügen
  • Ein Docker-Build hier vorschlagen

Und anschließend, wenn wir mindestens einen echten Benutzer haben, der sagt, dass es bei ihm funktioniert, machen wir eine erste Überprüfung + ein Merge in master.

Die Idee ist, deine Arbeit schrittweise zu validieren, solange es „heiß“ ist, und dann Mini-PRs zu erstellen, um andere Kompatibilitäten hinzuzufügen.

Was hältst du davon?

Es wäre toll, wenn dir der Live-Stream Flügel gegeben hat, das freut mich zu lesen! :slight_smile:

Ich habe einen NetAtmo-Thermostat. Bereit zum Testen, falls nötig.

Ich habe Netatmo-Kameras.

Das macht wirklich Freude beim Lesen!!^^
Und ja, ich spüre wirklich den Unterschied!!^^

Wie ich dir schon sagte, das war genau das, was mir fehlte, besonders für Code-Enthusiasten, die keine Berufsprogrammierer sind. Wie du mir geraten hast, habe ich viele Videos angesehen / Tutorials durchgearbeitet. Aber ich habe nichts Vergleichbares zu Gladys gefunden und es ist schwierig, ein allgemeines Verständnis zu bekommen (ich spreche hier nur für mich).

Wie ich schon sagte, dein Live-Stream ist eine Offenbarung und ich glaube wirklich, dass das vielen Menschen einen Schub geben kann.

Okay, ich mache das. Das war genau das, was ich im Sinn hatte, ich habe mich bisher nur auf den Thermostat konzentriert.
Ich habe heute Morgen ein Image gestartet, aber ich werde warten, bis ich das umgesetzt habe.

Das passt mir perfekt^^

Perfekt, das ist der erste Schritt ^^

Ja, ich weiß ^^

Das wird der dritte Schritt, die Kameras. Der zweite Schritt sind die Ventile.
Danach der vierte Schritt, die Wetterstationen - Hauptmodul
Und so weiter.

Allerdings könnte ich dich wenigstens fragen, wann es bereit zum Testen der Verbindung sein wird und wie ich auf der Entdeckungsseite eine kleine Nachricht „verbundener Account, aber keine kompatiblen Geräte gefunden“ vorhersage, du wärst perfekt, um diese Nachricht zu testen ^^

Kein Problem, mein Pi ist jetzt verfügbar für dein Bild, jetzt, wo ich mit Sonos fertig bin.

Hallo,

In den Startlöchern, um bei den Tests zu helfen.

Ich habe eine vollständige Wetterstation (inklusive Regenmesser und Anemometer).

Danke, dass ihr euch die Mühe gemacht habt, diese Funktion zu entwickeln :slight_smile: