Tutorial Webserver mit Fetch API für Anfänger

Hallo,

Vor längerer Zeit hab ich mich für ein geplantes Projekt mit dem Thema Webserver intensiv beschäftigt. Dabei ging es mir darum Messwete anzuzeigen und Sollwerte eingeben zu können. Also eine klassische mini HMI Aufgabe, wenn man so will. Zur Realisierung und um zu lernen sind dann verschiedene Übungssketche entstanden. Dabei wurde letztlich Java-Skript und die Fetch-API verwendet. Dazu hab ich mir viel aus unterscheidlichen Quellen angesehen und teilweise durchgearbeitet, aber auch besoders die vielen Beispiele vom User Fips hier aus dem Forum studiert.

Nun ist mir die Idee gekommen einige meiner Sketche, etwas überarbeitet, zu einem kleinen Tutorial für Anfänger zusammezufassen. Das Tutorial baut auf den ESP "Hallo Server" auf und startet mit einer statischen Webseite, die auf dem ESP Filesystem gespeichert ist. Schritt für Schritt gehts dann aufeinander aufbauend weiter. Bescheibung und Sketche sind bewust einfach gehalten. Der Anfänger sollte somit alles nachvollziehen können und so einen leichten Einstieg finden. Den Könner wird es ehr langweilen. :wink:

Das Tutorial gibts als PDF und die Beispiele sind in der Zip Datei zu finden.

Heinz

Nachtrag : da in dem eingestellten Turorial und in den Sketchen zu viele Fehler waren , und ich keinem was falsches beibringen will , hab ich die Anhänge wieder rausgenommen.

Nachtrag 1.5.20

Das aktualisierte Tutorial liegt jetzt im Eintrag #19

Nachtrag 4.5.20 aktuelle Version auf #24

Darf ich das dann wieder auf die Website legen?

Gruß Tommy

Tommy56:
Darf ich das dann wieder auf die Website legen?

Gruß Tommy

wenns gefällt ja gerne,
Ich hoffe mein Geschreibsel langweilt Dich nicht und die noch vorhanen Fehler halten sich in Grenzen

Gruß Heinz

Kein Problem. Ist das schon komplett?

Gruß Tommy

Tommy56:
Kein Problem. Ist das schon komplett?

Gruß Tommy

ja ich denke schon, vermisst Du was ?

Danke!

Rentner:
ja ich denke schon, vermisst Du was ?

Nö, war nur als Frage, weil Du da letzte schrittweise aufgebaut hattest.

Gruß Tommy

Tommy56:
Nö, war nur als Frage, weil Du da letzte schrittweise aufgebaut hattest.

Gruß Tommy

Hab ich jetzt auch, aber es ist ja nicht mit einer INO Datei getan. wegen der HTML Dateien macht ein Verzeichniss Sinn und da dachte ich pack gleich alles in ein Zip . Ja ich weiß will nicht jeder runterladen.

Gruß Heinz

Also das ist sozusagen Schritt 1. Ok, dann machen wir das so. Ich kann auch die Einzeldateien für die ZIP-Muffel einzeln zur Verfügung stellen. Nur heute nicht mehr.

Gruß Tommy

Heinz,
gut gemeinter Rat, jag mal ALLE deine HTML Outputs in einen Validator:

https://validator.w3.org/#validate_by_input

und verwende Überschriften h1, h2, für Überschriften, nicht für "größer" machen oder "fett machen" :wink:

noiasca:
Heinz,
gut gemeinter Rat, jag mal ALLE deine HTML outputs in einen Validator:

Unbedingt!

@Heinz deine guten Absichten in allen Ehren, aber das ist grauenhaft.

Abgesehen von dem was dir der Validator um die Ohren wirft:

Inline CSS und Inline Javascript ist ganz schlechter Stil.

gehört in den Head oder vor das schließende Element.

Du verwendest den falschen MIME-Type im Sketch.

Deine PDF habe ich mir jetzt nicht mehr angesehen.

Eine Frage noch, warum versuchst du diese “#include <WiFiClient.h>” Datei dreifach zu in­klu­die­ren?

Gruß Fips

Fips
Wieso schreibst Du denn den Skript nicht so um wie Heinz es machen sollte. So ist es einfacher zu verstehen wie man es richtig machen soll.
Grüße Uwe

Derfips:
@Heinz deine guten Absichten in allen Ehren, aber das ist grauenhaft.

Das wünschte ich mir freundlicher formuliert!

So traut sich niemand, mal was von sich hier zu zeigen. Mich schüchtert das ein :smiling_imp:

Da ich selbst schon jemanden - "Bergsteiger" - demotiviert habe, was mir immer noch leid tut, möchte ich die Schreibenden um mehr Aufmunterung und Respekt vor der Arbeit der Anderen bitten.

@Heinz: Ich werde mir Deine Arbeit kritisch ansehen und mich auch melden, wenn mir was nicht gefällt. Ich hoffe aber, dann einen motivierenderen Ton zu treffen ;D

So, das mußte mal raus!

@Uwe: Genau so wünschte ich mir das!

So traut sich niemand, mal was von sich hier zu zeigen. Mich schüchtert das ein :smiling_imp:

Das darf einen nicht schocken!

Veröffentlichungen hier im Forum tragen immer den "Irrtum" oder zumindest das "unvollständige Wissen" in sich.
Das ist wohl zutiefst menschlich, und damit unabwendbar.

Es sind 2 "Umstände"....
Es sind die Ideen/Strategien/Vorschläge welche veröffentlicht werden.
Es sind Personen, welche das veröffentlichen, welche da ihr Herzblut rein gesteckt haben.

Der Haken ist, dass Kritik an der Sache, oft als Kritik an der Person aufgefasst wird.
Oder gar so ausgesprochen wird!
Fatal!

Ein Beispiel, wo ein ursprünglich sachlicher Umstand auf die persönliche Ebene geht:

Och combie,

ich dachte das Du soweit drin bist ....

Ich muss zugeben, glühende Wut, kurz aufgekocht!

Ok, ich kann vergeben.
Aber nicht vergessen.

"gruseliger" Code, ist ein Argument, welches sich auf den Code bezieht.
Nicht auf die Person.
Ich habs nicht überprüft. Kann also sein, das der HTML Code wirklich gruselig ist.
Das kann man korrigieren.
Und schon versteht man, als Autor, das HTML ein wenig besser.

Wie wir alle wissen, kann man Ideen usw. modifizieren/austauschen.
Wissen hinzugewinnen.
Eine Person kann sich nicht austauschen.
Und "modifizieren", nur sich selber. Nicht von außen.

Also mein Rat: (auch an mich)
Identifiziert euch nicht zu stark mit euren Ideen!
Freut euch über jeden Fehler/Irrtum, denn es ist der Augenblick, was neues zu lernen

Auch die vernichtenste Sach-Kritik, kann eurer Person nichts tun. Im Gegenteil, Erkenntnisse lauern dort.

Ganz wichtig:
Ausufernde Erregung/Wut/Ärger/Frust/Enttäuschung verhindern wirksam den Erkenntnisgewinn!
(Der Volksmund: Blind vor Wut)
Emotion überdeckt Vernunft.

agmue:
Das wünschte ich mir freundlicher formuliert!

Es sind nunmal keine Schönheitsfehler.

Tutorial Web Server

Messwerte

Messwert 1 : 0

Messwert 2 : 0

Messwert 3 : 0

agmue:
So traut sich niemand, mal was von sich hier zu zeigen. Mich schüchtert das ein :smiling_imp:

Hier geht es aber nicht um einfaches zeigen.

Es soll ein Tutorial für Anfänger sein, diese tauchen irgendwann in einem Forum auf und behaupten das es so richtig ist. Stand schließlich in einem Tutorial.

uwefed:
Fips
Wieso schreibst Du denn den Skript nicht so um wie Heinz es machen sollte. So ist es einfacher zu verstehen wie man es richtig machen soll.
Grüße Uwe

Wegen der Fehler im “html”?
Das kann man alles nachlesen oder sich vom Validator zeigen lassen.

Hier mal die Korrektur für den Sketch.

server.send(200, "application/json", sendbuffer);

Und zum nachlesen.

rfc4627
The MIME media type for JSON text is application/json.

Sollte es zukünftig besser unkommentiert stehen bleiben?

Gruß Fips

Hallo,

erst mal ernst gemeinten Dank für die Kritik, ich bin da nicht geschockt. Fips hat natürlich recht, so kann man das nicht stehen lassen. Ich wollte es möglichst einfach machen und ja mir sind aus Nachlässigkeit nun Unwissenheit Fehler passiert. Natürlich macht es keinen Sinn Leuten was falsches beizubringen.

ich hatte mir das so erarbeitet und es hat funktioniert

nochmals Danke

ich hab die Anhänge wieder rausgenommen.

Heinz

Fips und Heinz ihr könnt ja gemeinsam am Code arbeiten und jeder den Teil den er besser kann /wWofür er Zeit hat schreiben. Natürlich kann da auch noch jeder andere mitmachen.
Grüße Uwe

Hallo,

Allen noch mal vielen Dank für die Tips und Links

Ich hatte, wie bereits geschrieben , mich vor längerer Zeit mit dem Thema beschäftigt. Zudem läuft das Projekt für das ich das auf diese Weise gemacht habe seit geraumer Zeit.

Jetzt bin ich beim aufräumen über die alten Übungs und Testsketche gestolpert und da ist mit die Idee zu dem Tutorial gekommen. Ich hab die also etwas angepasst und den Text dazu geschrieben. Jetzt muß ich also festtellen das mein derzeitiges Wissen augenscheinlich nicht reicht , also noch mal ab ins Kämmerlein.

Dabei war alles so schön einfach, ich bin halt Minimalist :wink:

Gruß Heinz

@Heinz

Die Post ist raus.

Gruß Fips

Hallo,
Mit der Hilfe von fips hab ich das Tutorial nochmal überarbeitet und Fehler beseitigt. Auf diesem Wege nochmals vielen Dank für Deine Mühen.

Heinz

4.5.20

Anhänge gelöscht es gibt eine erweiterte Version