{"id":879,"date":"2023-07-08T12:03:42","date_gmt":"2023-07-08T10:03:42","guid":{"rendered":"https:\/\/www.iot-embedded.de\/iot-2023\/?p=879"},"modified":"2023-07-08T12:03:44","modified_gmt":"2023-07-08T10:03:44","slug":"datenbank-und-frontend-express-als-gute-wahl","status":"publish","type":"post","link":"https:\/\/www.iot-embedded.de\/iot-2023\/2023\/07\/08\/datenbank-und-frontend-express-als-gute-wahl\/","title":{"rendered":"Datenbank und Frontend\u00a0\u2013 Express als gute Wahl?"},"content":{"rendered":"\n

Um die Verbindung zwischen Datenbank und Frontend herzustellen, gibt es unz\u00e4hlige M\u00f6glichkeiten. Die wichtigsten Bedingungen f\u00fcr uns waren:
a) Die Verbindung zur Datenbank muss online und nicht lokal m\u00f6glich sein, da die MongoDB in einem Atlas-Cluster gehostet wird
b) Das Frontend soll die verarbeiteten Daten im \u00fcblichen HTML-Format\u00a0darstellen

Im Projekt haben wir uns zur Erf\u00fcllung der Bedingungen f\u00fcr den Einsatz eines Express-Servers entschieden. Da wir bereits aus der Vorlesung \u201eVerteilte Systeme\u201c mit Node.js vertraut waren, lag es nahe, diese Technologie zu nutzen. Ein weiterer Vorteil war, dass Express in JavaScript geschrieben ist, was uns zugutekam, da wir insgesamt besser mit JavaScript vertraut sind als mit Python. Daher haben wir uns gegen Python-basierte Frameworks wie\u00a0Flask\u00a0entschieden.
Express erwies sich w\u00e4hrend der Entwicklung als eine gute Wahl, da es einfach zu erlernen ist (mit vielen Online-Ressourcen) und gleichzeitig eine hohe Flexibilit\u00e4t bietet. Die API von Express ist gut strukturiert und erm\u00f6glicht es uns, Middleware-Funktionen zu integrieren. Diese zus\u00e4tzliche Funktionalit\u00e4t erwies sich im Nachhinein als \u00e4u\u00dferst n\u00fctzlich, da wir dadurch mehr Flexibilit\u00e4t bei der Gestaltung unserer endg\u00fcltigen Anwendung hatten.

So war der erste Schritt die Einrichtung des Express-Servers. Dazu mussten wir das Express-Framework installieren und eine Serverinstanz (server.js) erstellen. Wir verwendeten\u00a0npm, den Paketmanager von Node.js, um Express zu installieren und den Server zu konfigurieren. Um die Verbindung mit der Datenbank einzurichten, war\u00a0MongoClient\u00a0sowohl im Testbetrieb mit einer lokalen MongoDB als auch mit der finalen Online-Datenbank eine gute und einfache Methode.

F\u00fcr die Bereitstellung von Webseiten gibt es in Express zwei M\u00f6glichkeiten: direkt \u00fcber HTML oder \u00fcber die Bereitstellung von Templates, in unserem Fall mit\u00a0EJS\u00a0(Embedded JavaScript Templates). Hier wurde nach einigen Tests im Programmieren die Methode der\u00a0EJS\u00a0als pr\u00e4ferierte Option gew\u00e4hlt.\u00a0EJS-Templates\u00a0werden aus praktischer Sicht genauso programmiert wie HTML-Seiten, weswegen die Erstellung f\u00fcr das Frontend wenig spektakul\u00e4r unter Nutzung eines Bootstrap-Templates vor sich ging.\u00a0EJS\u00a0bietet als einen Vorteil auch die M\u00f6glichkeit, mithilfe eines speziellen Tags <%=\u00a0…\u00a0%> dynamische Inhalte einzuf\u00fcgen, z. B. Daten aus der Datenbank. Da die in der Off-Space-Web-App angezeigten Daten aber immer gefiltert oder anderweitig bearbeitet auf-treten, wurde \u2013 abgesehen von Entwicklungszwecken \u2013 nur auf die herk\u00f6mmliche Verarbeitung in ausgelagerten JavaScript-Funktionen gesetzt.

Eine weitere wichtige Arbeit auf dem Express-Server war die Erstellung der Routen. Die Routen betreffen zum einen die Bereitstellung der\u00a0EJS-Webseiten\u00a0unter den angegebenen Pfaden. Zum anderen aber m\u00fcssen auch die API-Calls an die Datenbank als Route definiert werden, damit beim Aufruf der Webseiten auch die Daten geladen werden k\u00f6nnen. Interessant ist hier die \u00dcbergabe eines Parameters, die in Express relativ leicht m\u00f6glich ist:<\/p>\n\n\n\n

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

Dies war n\u00f6tig, um die Reservierung der Tische ausgehenden von der Tischnummer durchf\u00fchren zu k\u00f6nnen.

Somit waren beide Bedingungen erf\u00fcllt: Der Express-Server konnte eine Verbindung zur Datenbank herstellen, mithilfe der Routen war die Abfrage der Daten aus der MongoDB m\u00f6glich. Die Daten werden mit JavaScript-Funktionen verarbeitet und mithilfe der EJS-Templates im g\u00e4ngigen HTML-Format angezeigt. Auch abseits der strikten Erf\u00fcllungen der Bedingungen hatte sich Express als gut zu erlernendes und klar strukturiertes Framework zur Verbindung von Datenbank und Frontend gezeigt.<\/p>\n","protected":false},"excerpt":{"rendered":"

Um die Verbindung zwischen Datenbank und Frontend herzustellen, gibt es unz\u00e4hlige M\u00f6glichkeiten. Die wichtigsten Bedingungen f\u00fcr uns waren:a) Die Verbindung zur Datenbank muss online und nicht lokal m\u00f6glich sein, da die MongoDB in einem Atlas-Cluster gehostet wirdb) Das Frontend soll<\/p>\n","protected":false},"author":32,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[12,52,13,53],"_links":{"self":[{"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/posts\/879"}],"collection":[{"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/comments?post=879"}],"version-history":[{"count":1,"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/posts\/879\/revisions"}],"predecessor-version":[{"id":881,"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/posts\/879\/revisions\/881"}],"wp:attachment":[{"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/media?parent=879"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/categories?post=879"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.iot-embedded.de\/iot-2023\/wp-json\/wp\/v2\/tags?post=879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}