{"id":25735,"date":"2023-09-13T16:22:09","date_gmt":"2023-09-13T14:22:09","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=25735"},"modified":"2023-09-13T16:22:09","modified_gmt":"2023-09-13T14:22:09","slug":"fastchat-your-words-instantly-delivered","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/","title":{"rendered":"FastChat &#8211; Your Words, Instantly Delivered"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/banner.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"293\" data-attachment-id=\"25737\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/banner\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/banner.png\" data-orig-size=\"1920,549\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"banner\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/banner-1024x293.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/banner-1024x293.png\" alt=\"\" class=\"wp-image-25737\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/banner-1024x293.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/banner-300x86.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/banner-768x220.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/banner-1536x439.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/banner.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Einf\u00fchrung<\/h2>\n\n\n\n<p>Herzlich willkommen zu unserem Blogbeitrag \u00fcber FastChat, einer neuen Web-Chat-Anwendung, die das Kommunizieren im Internet auf ein neues Level hebt. In diesem Beitrag m\u00f6chten wir euch die Hintergrundgeschichte zu diesem Projekt, unsere Ziele und die Funktionalit\u00e4ten vorstellen, welche wir erfolgreich umgesetzt haben. Tauchen wir ein!&nbsp;<\/p>\n\n\n\n<p>Unsere Idee f\u00fcr FastChat war recht simpel: Wir wollten eine benutzerfreundliche Web-Chat-Anwendung entwickeln, die es Nutzern erm\u00f6glicht, sich anzumelden und miteinander zu kommunizieren. Inspiriert von der Benutzeroberfl\u00e4che von WhatsApp Web, entschieden wir uns jedoch, unser eigenes, einzigartiges Design zu kreieren. Unser Ziel war es, eine intuitive und ansprechende Plattform zu schaffen, auf der sich Nutzer leicht zurechtfinden und nahtlos miteinander interagieren k\u00f6nnen.<\/p>\n\n\n\n<p>Wer sind wir und warum haben wir uns dieses Projekt vorgenommen? Nun, wir sind ein Team von Studierenden mit nur wenigen Vorkenntnissen im Bereich Webentwicklung. FastChat war f\u00fcr uns die perfekte Gelegenheit, unsere ersten Schritte in der Welt der Webentwicklung zu machen. Es war eine Herausforderung, der wir uns mit Begeisterung gestellt haben. Wer steckt hinter diesem aufregenden Projekt und was hat uns dazu angetrieben?&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Unsere Ziele<\/h3>\n\n\n\n<p>Um den Bed\u00fcrfnissen unserer Nutzer gerecht zu werden, haben wir uns auf die Umsetzung einer Auswahl von User Stories konzentriert:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>als User m\u00f6chte ich mich einloggen\/registrieren<\/li>\n\n\n\n<li>als User m\u00f6chte ich ein Profil anlegen k\u00f6nnen<\/li>\n\n\n\n<li>als User m\u00f6chte ich Kontakte\/Freunde hinzuf\u00fcgen<\/li>\n\n\n\n<li>als User m\u00f6chte ich mehrere Chatfenster verwalten k\u00f6nnen<\/li>\n\n\n\n<li>als User m\u00f6chte ich Nachrichten verschicken<\/li>\n\n\n\n<li>als User m\u00f6chte ich meinen Account l\u00f6schen<\/li>\n<\/ul>\n\n\n\n<p>Um das richtige Erscheinungsbild f\u00fcr FastChat zu finden, haben wir Figma Designs erstellt. Dies half uns bei der Auswahl eines passenden Color Schemes und bei der Visualisierung des Endprodukts. Unser Ziel war es, ein modernes und ansprechendes Design zu entwickeln.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tech Stack<\/h3>\n\n\n\n<p>Unser Technologie-Stack besteht aus folgenden Komponenten:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>React<\/strong>: Dies ist unser Frontend-Framework, das uns dabei hilft, eine dynamische Benutzeroberfl\u00e4che zu erstellen. React erm\u00f6glicht uns, die Anwendung komponentenbasiert zu strukturieren und effizient zu entwickeln.<\/li>\n\n\n\n<li><strong>MUI (Material-UI)<\/strong>: Als React Component Library f\u00fcr das Material Design bietet uns MUI vorgefertigte UI-Komponenten, die nahtlos in unsere Anwendung integriert werden k\u00f6nnen. Das erleichtert die Gestaltung und Entwicklung.<\/li>\n\n\n\n<li><strong>Tailwind CSS<\/strong>: Dieses CSS-Framework erleichtert uns das Styling unserer Komponenten erheblich. Mit einer klaren und einfachen Syntax k\u00f6nnen wir das Erscheinungsbild von FastChat anpassen.<\/li>\n\n\n\n<li><strong>Firebase<\/strong>: Unser Backend wird von Firebase unterst\u00fctzt, einer robusten und skalierbaren Plattform von Google. Firebase bietet uns die M\u00f6glichkeit, Authentifizierung, Datenbank-Management und Echtzeitkommunikation nahtlos zu integrieren.<\/li>\n<\/ul>\n\n\n\n<p>Mit diesen Tools und unserem Interesse f\u00fcr Webentwicklung haben wir es geschafft, FastChat von der Idee, Realit\u00e4t werden zu lassen. Wir sind stolz auf das, was wir erreicht haben. In den folgenden Kapiteln gehen wir n\u00e4her auf die einzelnen Komponenten ein, also bleibt dran!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Umsetzung<\/h2>\n\n\n\n<p>Zu Beginn haben wir uns als Gruppe zusammengesetzt und alle von Firebase angebotenen Dienste genau analysiert. F\u00fcr uns war es wichtig, einen gro\u00dfen Funktionsumfang kostenlos nutzen zu k\u00f6nnen, und Firebase erf\u00fcllte diese Anforderungen. Alle f\u00fcr dieses Projekt ben\u00f6tigten Dienste waren bis zu einem gro\u00dfz\u00fcgigen Limit kostenlos verf\u00fcgbar.<\/p>\n\n\n\n<p>Jeder von uns hat sich dann in einen der Dienste eingearbeitet. Dies beinhaltete das Lesen der Dokumentation, das Finden von Beispielen und das praktische Experimentieren. Wir legten gro\u00dfen Wert darauf, ein solides Verst\u00e4ndnis von Firebase zu entwickeln, bevor wir unsere Architektur darauf aufbauten. Das alles sollte uns helfen, unangenehme \u00dcberraschungen zu vermeiden.<\/p>\n\n\n\n<p>Nach einem kurzen Austausch in der Gruppe begannen wir, unsere Architektur zu skizzieren. Die Entscheidung, React als Frontend zu verwenden, war von Anfang an klar und bedarf keiner weiteren Erw\u00e4hnung. Die eigentliche Herausforderung lag jedoch im Backend. Eine der ersten Fragen, die wir uns stellten, war: Welchen Datenbankservice von Firebase sollten wir verwenden? Letztendlich haben wir uns f\u00fcr Firebase RealtimeDB entschieden. Bei der Entwicklung unserer Datenbankarchitektur haben wir uns an bew\u00e4hrten Entwurfsmustern orientiert. Es war sehr wichtig, die Anzahl der aktualisierten Objekte im JSON-Baum so gering wie m\u00f6glich zu halten, wenn Daten aktualisiert werden. Dies hat einen gro\u00dfen Einfluss auf die Geschwindigkeit der Anwendung.<\/p>\n\n\n\n<p>Nach vielen Diskussionen und Verbesserungen haben wir die folgende Backendarchitektur entwickelt:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/fastchat_firebase_architecture.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"498\" data-attachment-id=\"25763\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/fastchat_firebase_architecture\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/fastchat_firebase_architecture.png\" data-orig-size=\"1918,933\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"fastchat_firebase_architecture\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/fastchat_firebase_architecture-1024x498.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/fastchat_firebase_architecture-1024x498.png\" alt=\"\" class=\"wp-image-25763\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/fastchat_firebase_architecture-1024x498.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/fastchat_firebase_architecture-300x146.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/fastchat_firebase_architecture-768x374.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/fastchat_firebase_architecture-1536x747.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/fastchat_firebase_architecture.png 1918w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><em>Abb. 1: Architektur von FastChat<\/em><\/p>\n\n\n\n<p>In diesem Abschnitt werden wir nicht n\u00e4her auf die einzelnen Dienste eingehen. Dies wird in den entsprechenden Kapiteln ausf\u00fchrlicher behandelt. Wie in der oben gezeigten Grafik ersichtlich ist, nutzen wir f\u00fcr die Benutzerauthentifizierung Firebase Authentication. Dies hat sich nach umfangreichen Tests als \u00e4u\u00dferst gut mit React kombinieren lassen. Da Firebase Authentication nur begrenzte Benutzerinformationen bereitstellt, m\u00fcssen wir zus\u00e4tzliche Daten wie die Nutzer-Chats in der RealtimeDB speichern. In dieser Datenbank sind auch die Chat-Nachrichten gespeichert. Doch was w\u00e4re ein Chat ohne Profilbilder? Daher verwenden wir Firebase Storage als Cloud-Speicher f\u00fcr die Profilbilder der angemeldeten Nutzer. Es besteht allerdings auch die M\u00f6glichkeit, sp\u00e4ter Bilder, die \u00fcber FastChat gesendet wurden, hier zu speichern. Damit FastChat f\u00fcr Endbenutzer verf\u00fcgbar ist, muss es irgendwo gehostet werden. Hierf\u00fcr nutzen wir Firebase Hosting, das automatisch unsere React-App im Internet hostet. Unsere entwickelte Architektur hat sich im Verlauf der Entwicklung kaum ver\u00e4ndert, was nat\u00fcrlich ein positives Zeichen ist. Wir waren froh, keine gr\u00f6\u00dferen Architekturanpassungen vornehmen zu m\u00fcssen. Nun stellt sich die Frage: Wie haben wir die einzelnen Dienste in FastChat genau genutzt? Diese Informationen sind in den n\u00e4chsten Kapiteln zu finden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">React Frontend<\/h3>\n\n\n\n<p>Unser React Frontend ist das Herzst\u00fcck unserer Anwendung und basiert auf einer klassischen React-Webseite. Wir haben das Projekt mithilfe der Create React App initialisiert, was uns einen schnellen Start erm\u00f6glichte. Die Verwaltung der zahlreichen Packages erfolgt reibungslos dank des Package Managers PNPM, der uns eine geordnete Struktur f\u00fcr unsere Abh\u00e4ngigkeiten bietet.<\/p>\n\n\n\n<p>Die Auswahl der Packages war entscheidend f\u00fcr die reibungslose Entwicklung unserer Webanwendung. Vite dient als Entwicklungsserver, der unseren Entwicklungsprozess optimiert und beschleunigt. Typescript bringt die M\u00e4chtigkeit von statischer Typisierung in unser Projekt, was die Codequalit\u00e4t und die Zusammenarbeit im Team erheblich verbessert. Und nicht zuletzt profitieren wir von Tailwind CSS, das uns vorgefertigte CSS-Klassen bereitstellt und die Erstellung komplexer Styles erheblich vereinfacht. In Kombination bilden diese Tools und Packages die Grundlage f\u00fcr unseren React Frontend.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:40% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"392\" data-attachment-id=\"25765\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/login-1\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/login-1.png\" data-orig-size=\"368,392\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"login-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/login-1.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/login-1.png\" alt=\"\" class=\"wp-image-25765 size-full\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/login-1.png 368w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/login-1-282x300.png 282w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Wenn man das erste mal FastChat in seinem Browser besucht, landet man auf unserer Login-Seite. Hier kann sich der Nutzer anmelden oder auch einen neuen Account erstellen.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:40% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"447\" data-attachment-id=\"25767\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/login_error\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/login_error.png\" data-orig-size=\"420,447\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"login_error\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/login_error.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/login_error.png\" alt=\"\" class=\"wp-image-25767 size-full\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/login_error.png 420w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/login_error-282x300.png 282w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Wird beim Login eine falsche E-Mail Adresse oder ein falsches Passwort eingegeben, wird der Nutzer \u00fcber ein Popup informiert. Hierbei wurden die Informationen so generisch wie nur m\u00f6glich gehalten.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:40% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"379\" height=\"405\" data-attachment-id=\"25769\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/signup\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/signup.png\" data-orig-size=\"379,405\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"signup\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/signup.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/signup.png\" alt=\"\" class=\"wp-image-25769 size-full\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/signup.png 379w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/signup-281x300.png 281w\" sizes=\"auto, (max-width: 379px) 100vw, 379px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Du hast noch kein Konto? Kein Problem. Unter \u201cSign up here\u201d kannst du dir dein kostenloses Konto erstellen. Wir brauchen nur ein paar Informationen von dir.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:40% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"418\" height=\"446\" data-attachment-id=\"25770\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/signup_error\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/signup_error.png\" data-orig-size=\"418,446\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"signup_error\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/signup_error.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/signup_error.png\" alt=\"\" class=\"wp-image-25770 size-full\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/signup_error.png 418w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/signup_error-281x300.png 281w\" sizes=\"auto, (max-width: 418px) 100vw, 418px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Unser React-Frontend spielt eine entscheidende Rolle bei der Umsetzung dieser strengen Kriterien f\u00fcr die Benutzerregistrierung. Wir haben ein benutzerfreundliches Formular entwickelt, das sicherstellt, dass jeder Benutzername eingegeben wird und keine leeren Felder akzeptiert werden. Die E-Mail-Adresse wird mit Hilfe eines regul\u00e4ren Ausdrucks auf ein g\u00fcltiges Format gepr\u00fcft, bevor sie akzeptiert wird. Das Passwortfeld ist so gestaltet, dass es mindestens 8 Zeichen enthalten muss, darunter Gro\u00df- und Kleinbuchstaben, mindestens eine Zahl und optional Sonderzeichen. Unsere React-Komponenten \u00fcberpr\u00fcfen diese Bedingungen in Echtzeit, und wenn ein Benutzer eines der Kriterien nicht erf\u00fcllt, wird sofort eine klare Fehlermeldung angezeigt. Auf diese Weise wird sichergestellt, dass unsere Nutzer einen sicheren und zuverl\u00e4ssigen Anmeldeprozess durchlaufen und ihre Konten wirksam sch\u00fctzen k\u00f6nnen<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:40% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"665\" height=\"322\" data-attachment-id=\"25771\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/empty_chat\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/empty_chat.png\" data-orig-size=\"665,322\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"empty_chat\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/empty_chat.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/empty_chat.png\" alt=\"\" class=\"wp-image-25771 size-full\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/empty_chat.png 665w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/empty_chat-300x145.png 300w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>In FastChat unterscheiden wir zwischen zwei Namen: der Username ist ein eindeutiger Name, der einen Nutzer identifiziert. Der Displayname ist der Name, der anderen Leuten im Chat angezeigt wird.<\/p>\n\n\n\n<p>Sobald man sich erfolgreich angemeldet hat, wird man auf die Chat-Oberfl\u00e4che weitergeleitet. Auf der linken Seite sind alle deine Chats und Kontakte zu sehen. Wird einer ausgew\u00e4hlt, so wird im rechten Teil der eigentliche Chat angezeigt. Wurden noch keine Nachrichten in einem Chat versendet, zeigt das FastChat dem Nutzer wie folgt an.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:40% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"665\" height=\"322\" data-attachment-id=\"25773\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/new_chat\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat.png\" data-orig-size=\"665,322\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"new_chat\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat.png\" alt=\"\" class=\"wp-image-25773 size-full\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat.png 665w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat-300x145.png 300w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Neue Chats k\u00f6nnen mit dem Button (der, zugegeben, hier schlecht zu sehen ist) links in der Leiste erstellt werden. Beim Klicken \u00f6ffnet sich ein Dialogfenster, in dem wir Nutzer suchen k\u00f6nnen.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:40% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"661\" height=\"320\" data-attachment-id=\"25774\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/new_chat_user_list\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat_user_list.png\" data-orig-size=\"661,320\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"new_chat_user_list\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat_user_list.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat_user_list.png\" alt=\"\" class=\"wp-image-25774 size-full\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat_user_list.png 661w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat_user_list-300x145.png 300w\" sizes=\"auto, (max-width: 661px) 100vw, 661px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Sobald man anf\u00e4ngt, in der Suchleiste etwas einzugeben, aktualisiert sich direkt die Liste unter der Textbox und gibt alle Nutzer zur\u00fcck, deren Name der Suchanfrage zugeordnet werden kann. Dabei wird sowohl der Displayname als auch der Username ber\u00fccksichtigt.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:40% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"657\" height=\"319\" data-attachment-id=\"25775\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/new_chat_user\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat_user.png\" data-orig-size=\"657,319\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"new_chat_user\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat_user.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat_user.png\" alt=\"\" class=\"wp-image-25775 size-full\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat_user.png 657w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/new_chat_user-300x146.png 300w\" sizes=\"auto, (max-width: 657px) 100vw, 657px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Wird ein Benutzer ausgew\u00e4hlt, wird automatisch ein Chat erzeugt<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:40% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"661\" height=\"321\" data-attachment-id=\"25776\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/chat\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/chat.png\" data-orig-size=\"661,321\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"chat\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/chat.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/chat.png\" alt=\"\" class=\"wp-image-25776 size-full\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/chat.png 661w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/chat-300x146.png 300w\" sizes=\"auto, (max-width: 661px) 100vw, 661px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Wenn Chat-Nachrichten verschickt werden, kommen diese in Echtzeit beim Chat-Partner an und werden entsprechend angezeigt. Die eigenen Nachrichten stehen rechts, die Nachrichten des Gegen\u00fcberliegenden stehen links vom Feld.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:40% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"311\" data-attachment-id=\"25777\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/right_sidebar\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/right_sidebar.png\" data-orig-size=\"640,311\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"right_sidebar\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/right_sidebar.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/right_sidebar.png\" alt=\"\" class=\"wp-image-25777 size-full\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/right_sidebar.png 640w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/right_sidebar-300x146.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Durch das Hamburger-Menu oben rechts gelangt man unter anderem zum eigenen Profil. Bislang dient es nur der Bearbeitung der eigenen pers\u00f6nlichen Daten.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:40% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"642\" height=\"311\" data-attachment-id=\"25778\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/13\/fastchat-your-words-instantly-delivered\/profile-3\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/profile.png\" data-orig-size=\"642,311\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"profile\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/profile.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/profile.png\" alt=\"\" class=\"wp-image-25778 size-full\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/profile.png 642w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/profile-300x145.png 300w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Hier hat der Benutzer die M\u00f6glichkeit sein Profilbild, den Displayname, Username und die E-Mail Adresse zu \u00e4ndern<\/p>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Firebase Authentication<\/h3>\n\n\n\n<p>Firebase Authentication ist ein von der Firebase-Plattform bereitgestellter Dienst, der den Prozess des Hinzuf\u00fcgens einer Benutzerauthentifizierung zu Web- oder Mobilanwendungen vereinfacht. Wir haben uns dazu entschieden, da es in Firebase schon integriert ist und mit den anderen Services gut funktioniert.<\/p>\n\n\n\n<p>Firebase Authentication spielt eine zentrale Rolle in der Registrierung und Anmeldung von Benutzern in FastChat. Wenn sich ein Benutzer bei uns anmeldet, stellt er seine grundlegenden Informationen, wie seine E-Mail-Adresse und ein Passwort, bereit. Diese sensiblen Daten werden sicher an Firebase Authentication weitergeleitet, wo sie gesch\u00fctzt und verarbeitet werden. Firebase Authentication \u00fcbernimmt dann die Aufgabe, ein Benutzerkonto zu erstellen, das eng mit den bereitgestellten Anmeldeinformationen verkn\u00fcpft ist. Hierbei wird automatisch eine eindeutige Benutzer-ID generiert, die f\u00fcr sp\u00e4tere Identifikationszwecke unerl\u00e4sslich ist.<\/p>\n\n\n\n<p>Die Anmeldung in FastChat erfolgt genauso m\u00fchelos. Benutzer geben einfach ihre E-Mail-Adresse und das Passwort in das Anmeldeformular ein und Firebase Authentication f\u00fchrt eine sichere \u00dcberpr\u00fcfung durch. Bei erfolgreicher Anmeldung generiert Firebase einen Authentifizierungstoken, der dem Benutzer best\u00e4tigt, dass er erfolgreich authentifiziert ist. Dieser Token spielt eine entscheidende Rolle in der Sitzungsverwaltung und kann sicher gespeichert werden, um die authentifizierte Sitzung des Benutzers aufrechtzuerhalten.<\/p>\n\n\n\n<p>Was die Sicherheit betrifft, k\u00fcmmert sich Firebase Authentication automatisch um Aspekte wie Passwort-Hashing und Salting, um die Benutzeranmeldeinformationen vor h\u00e4ufigen Sicherheitsbedrohungen zu sch\u00fctzen. Zus\u00e4tzlich stellt Firebase APIs und eine benutzerfreundliche Konsole zur Verf\u00fcgung, die es erm\u00f6glicht, Passw\u00f6rter zur\u00fcckzusetzen, Benutzerprofile zu aktualisieren und Konten zu deaktivieren.<\/p>\n\n\n\n<p>Die nahtlose Integration mit anderen Firebase-Diensten, sobald ein Benutzer authentifiziert wurde, bietet eine breite Palette von M\u00f6glichkeiten zur Verbesserung der Benutzererfahrung und der Funktionalit\u00e4t unserer App. Dar\u00fcber hinaus bietet Firebase Authentication umfassende Fehlerbehandlungsfunktionen, die spezifische Fehlercodes und Meldungen f\u00fcr verschiedene Authentifizierungsprobleme liefern, um sicherzustellen, dass die Anwendung den Nutzer immer klar informiert. Mit all diesen Funktionen ist Firebase Authentication zweifellos die optimale Wahl f\u00fcr die Authentifizierung in FastChat und gew\u00e4hrleistet die Sicherheit und Nutzerfreundlichkeit unserer Plattform.<\/p>\n\n\n\n<p>Die Firebase-Authentifizierung bietet mehrere Vorteile:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Benutzerverwaltung<\/strong>: Mit der Firebase-Authentifizierung k\u00f6nnen Benutzer mithilfe verschiedener Authentifizierungsmethoden erstellen und verwalten, darunter E-Mail und Passwort, Telefonnummer oder soziale Netzwerke mit Google, Facebook, Twitter usw.<\/li>\n\n\n\n<li><strong>Sichere Authentifizierung<\/strong>: Firebase Authentication handhabt die Sicherheitsaspekte der Benutzerauthentifizierung, einschlie\u00dflich Passwort-Hashing und Salting, einfacher und sch\u00fctzt vor h\u00e4ufigen Bedrohungen wie Brute-Force-Angriffen.<\/li>\n\n\n\n<li><strong>Einfache Integration<\/strong>: Firebase Authentication bietet plattform\u00fcbergreifende SDKs (iOS, Android, Web usw.) und Bibliotheken f\u00fcr g\u00e4ngige Programmiersprachen.<\/li>\n<\/ul>\n\n\n\n<p>Allerdings weist die Verwendung des Firebase-Authentifizierungssystems wie jede Technologie ihre Einschr\u00e4nkungen und potenziellen Nachteile auf:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Eingeschr\u00e4nkte Anpassungsm\u00f6glichkeiten<\/strong>: Obwohl die Firebase-Authentifizierung viele der zuvor besprochenen Authentifizierungsmethoden und Konfigurationsoptionen bietet, unterst\u00fctzt sie m\u00f6glicherweise keine stark angepassten Authentifizierungsabl\u00e4ufe oder anwendungsspezifischen Anforderungen.<\/li>\n\n\n\n<li><strong>Vendor Lock-In<\/strong>: Firebase Authentication ist Teil der Firebase-Plattform, die Google geh\u00f6rt. W\u00e4hrend Firebase ein robustes und funktionsreiches \u00d6kosystem ist, ist es bei der Authentifizierung an Google-Dienste gebunden. Wenn man zu einem anderen Authentifizierungsanbieter wechseln muss, kann dies einen erheblichen Aufwand und Code\u00e4nderungen erfordern.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Firebase RealtimeDB<\/h3>\n\n\n\n<p>Die Firebase Realtime Database ist eine NoSQL-Cloud-Datenbank, welche sich hervorragend f\u00fcr die Echtzeitsynchronisation von Daten zwischen einer App und der Cloud eignet. Sie verwendet das WebSocket-Protokoll, um \u00c4nderungen in Echtzeit an alle verbundenen Clients zu \u00fcbertragen. Sobald eine Aktualisierung in der Datenbank durchgef\u00fchrt wird, wird diese in Echtzeit auf alle Ger\u00e4te reflektiert. Ein herausragendes Merkmal der Firebase Realtime Database ist ihr benutzerfreundliches, JSON-basiertes Datenmodell. Daten k\u00f6nnen in hierarchischen Strukturen als JSON-Objekte gespeichert und abgerufen werden, wodurch die Handhabung erleichtert wird. Dar\u00fcber hinaus erm\u00f6glicht die Datenbank die Definition von Zugriffsregeln, um die Kontrolle \u00fcber den Datenzugriff zu gew\u00e4hrleisten. Insgesamt ist die Firebase Realtime Database eine hervorragende Wahl, wenn einfache Echtzeitdaten nahtlos in eine App integriert werden m\u00fcssen. Mit ihrer einfachen Handhabung und effektiven Echtzeitsynchronisierungsf\u00e4higkeit bietet sie eine solide Grundlage f\u00fcr die Entwicklung von Chat-Apps wie FastChat.<\/p>\n\n\n\n<p>Wie schon erw\u00e4hnt,&nbsp; haben wir die RealtimeDB und den Firestore ausgiebig getestet. Dabei hat sich herausgestellt, dass Firestore sehr strukturiert und benutzerfreundlich ist. Im Gegensatz dazu bietet die Realtime Database eine gro\u00dfe Flexibilit\u00e4t hinsichtlich der Architektur. Da wir darauf geachtet haben, unsere Architektur anpassungsf\u00e4hig zu gestalten und noch nicht genau absch\u00e4tzen konnten, wie umfangreich unsere Anwendung sein w\u00fcrde, haben wir uns letztendlich f\u00fcr die Realtime Database entschieden.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Strukturierung<\/h4>\n\n\n\n<p>Bei der Strukturierung der RealtimeDB haben wir uns an bew\u00e4hrten Methoden orientiert und diese f\u00fcr unser Projekt angepasst. Die Daten, die bei uns in der Realtime DB abgespeichert werden, begrenzen sich auf folgende Informationen:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"123\" height=\"102\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/eiTddTxo-USeA6grJ1bXmVotyDDwSC8xSlN3JFO9BoZ8Y-wuIMF65C_b_cXkHUDpqWwxA28tRhpRTNUY7Wn_28F2qGgcZpl94CHbZDRkYU8hsEXoxmJSRKsgwaDDxnamFmWdVEtF-kh7KHMiw-bz5Pg.png\"><\/p>\n\n\n\n<p>Unter Chats finden sich die verschiedenen Chats unserer User wieder. Jeder Chat hat eine eigene, eindeutige ID, die innerhalb des Projektes zur Zuordnung verwendet wird:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"260\" height=\"154\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/C-z4JBN2RQWkIZswUc10N-l4y5hWkPV-Gz_wlNZ20UjqUJpYxEcCgutHq7OaERPmA6F5bA6iAjUbfiq7jYTZw7Zjq1_A7WLAmRP8cK8jVbEEeeWICu4KJCy5K7KsFCcnJV8wY7iKweSLoujziKOYfx4.png\"><\/p>\n\n\n\n<p>Um einem Chat die passenden User zuzuordnen, werden unter \u201cparticipants\u201d die IDs der Nutzer gespeichert. Stand jetzt unterst\u00fctzen wir nur 1 zu 1 Chats. Durch diese Strukturierung k\u00f6nnen wir sp\u00e4ter sehr einfach Gruppenchats umsetzen:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"418\" height=\"123\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/7BGdkCThfi8Os3qnanLu7oocqXbBbXdDnaoQ2UUQ7WgAlScFWfVWATLKW-6rhuG2NDOHc3tLehVWKrekVRcKEjMwy-DE9SXyWeK5oRgcnOHLlOOyiWJ9qloY6A2V0tCWsKKYrf9nSb186rLB3wF1IYE.png\"><\/p>\n\n\n\n<p>In \u201cmessages\u201d werden alle Nachrichten zu dem passenden Chat abgespeichert. Die ID des Eintrags entspricht hierbei der ID des Chats:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"255\" height=\"192\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/L9CeWBRr1UEtg0GL9Ik4JTLUit0WX6QvcLr1Eu4HRnM3eIniVumZAv5qAPSJa9BlmxCr5LHJFy-Aw44PkyxoSbEwFy5bJL9LDvo0o-yVSCe7YPK3PEcFYLWtLegObQ3vp2MZWrOodbVsjIC6x5JKO2A.png\"><\/p>\n\n\n\n<p>Schaut man sich die Objekte unter \u201cmessages\u201d genauer an, erkennt man, dass hier alle wichtigen Informationen einer Message abgespeichert werden. Dazu geh\u00f6ren der displayName der Person, die die Nachricht gesendet hat, eine eindeutige ID, ein Timestamp und die Message an sich:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"457\" height=\"221\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/rW-7uhhCtqf2xpgVlhc_EdHYPyMHNfi_YiYawiKMFlq1id9ZnGvHuWGAlH4-MVbVRs37nN_RoizAoH4nQacyGMw_M8_Pec5p-eAwUeKOVJmJovufhsHOBBFrulkVc2XG_ypr3kzpDGUEXDGOIOSMsWg.png\"><\/p>\n\n\n\n<p>Zu guter Letzt speichern wir auch unsere zus\u00e4tzlichen Benutzerinformationen unter \u201cusers\u201d in der RealtimeDB. Jeder Nutzer hat hierbei eine eindeutige ID, die von Firebase Authentication generiert wird. Somit k\u00f6nnen wir einen angemeldeten Nutzer immer zu einem Eintrag zuordnen:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"322\" height=\"153\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/dRNb9rGfeHZxlljiVrGfBzOenCYO-XMHQXsRllMg7p4Aj3FOc-O2kEB-7ujbtBjNp2KgNCPN8Pe2cQGTdkX8jwj3hYiAvsIfqQBUVIbv3A2iGRkjkM1bDeNjIkymCAPhzrNpz1pM2-Jg2i76M25IOYA.png\"><\/p>\n\n\n\n<p>Die Informationen, die wir \u00fcber einen Nutzer speichern begrenzt sich auf den Display Name, die E-Mail Adresse, die eindeutige ID von Firebase Authentication, wann der Nutzer zuletzt online war, dem Profilbild und dem UserName:<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"388\" height=\"222\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/5hm8qN6InEz7AfMPs7Bb81sg0KdkVZCMAR0ygFum8Ww7ubFjVJ8HA-zbUD5qyTBw1AIVMzUYTsKiw6In81eWzvVMfLZlNmfUw3o7HkLlOg1-xR6ZO-GmmFVGHYlHiKlAIE97am3OLQH15rFYGF0CJaE.png\"><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Falls wir in der Zukunft neue Funktionalit\u00e4ten zu FastChat hinzuf\u00fcgen wollen, k\u00f6nnen wir das ohne gro\u00dfen Aufwand mit der Firebase RealtimeDB umsetzen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Security Rules<\/h4>\n\n\n\n<p>Sicherheitsregeln in Firebase kontrollieren den Zugriff auf Firebase-Datenbanken und -Speicher. Sie gew\u00e4hrleisten die Datensicherheit, indem sie festlegen, wer auf welche Eintr\u00e4ge oder Ressourcen zugreifen darf. Diese Regeln werden in einer speziellen JSON-Syntax definiert und k\u00f6nnen auf der Serverseite (Realtime Database, Firestore) oder im Speicher (Storage) angewendet werden. Sie authentifizieren Anfragen anhand von Benutzeridentit\u00e4ten und Datenstrukturen. Die Funktionsweise von &#8220;Rules&#8221; erlaubt es, den Leseprozess, den Schreibprozess und die L\u00f6schfunktion zu regeln. Auf diese Weise wird die Vertraulichkeit und Integrit\u00e4t von Daten in Firebase-Anwendungen gew\u00e4hrleistet.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/2LariAwzueW7CXJfHhmAo6lYBPd1t5Tj6-XsA_hgVft2V3Ib1KeuS5Aw2bW-GHT__XyPnHzKkADPw1_ZcJwBxRDucqtXi3Jm5B6zFAQL2M-dojy1G-w-gTv4UnFczxW7DzqQw6jf8ZnEQS21Cjy54oU.png\" alt=\"\" \/><\/figure>\n\n\n\n<p>Unsere Security Rules mussten aufgrund der eingeschr\u00e4nkten Abfragem\u00f6glichkeiten sehr offen gestaltet werden. Wir sind uns bewusst, dass dies in einer Produktionsumgebung nicht gemacht werden sollte. Bei der ersten Planung der RealtimeDB-Struktur haben wir uns noch keine Gedanken \u00fcber die Security Rules gemacht. Aus diesem Grund planen wir als Team unsere Datenstruktur komplett neu zu designen, diesmal aber mit den Security Rules im Hintergrund.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Vor- und Nachteile<\/h4>\n\n\n\n<p>Die Realtime DB ist sehr gut f\u00fcr Echtzeit- Datensynchronisation und ist f\u00fcr viele Applikationen einsetzbar, aber nicht immer f\u00fcr alle Use Cases geeignet, wie z.B. f\u00fcr solche, die eine komplexe Datenstruktur haben oder umfangreiche Queries ben\u00f6tigen. Leider ist es dadurch, dass Realtime DB keine komplexen Queries erlaubt, sehr schwierig, passende Security Rules zu erstellen. In einer Enterprise Umgebung sollte man hier auf jeden Fall mehrere Inhalte in den JSON-Bl\u00f6cken haben, die es erm\u00f6glichen, feingranulare Regeln einzustellen.<\/p>\n\n\n\n<p>Aus demselben Grund sind die Nachrichten auch alle einzeln gespeichert. Da keine komplexen Queries m\u00f6glich sind, m\u00fcssen die Nachrichten einzeln gespeichert sein.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Firebase Storage<\/h3>\n\n\n\n<p>Firebase Storage ist eine in Firebase integrierte L\u00f6sung, die sich perfekt f\u00fcr die Speicherung von benutzergeneriertem Inhalt wie Bildern oder Videos eignet. In unserem Projekt haben wir Firebase Cloud Storage verwendet, um die Profilbilder unserer Nutzer sicher und effizient zu speichern. Diese Cloud-basierte Speicheroption bietet nicht nur eine sichere Aufbewahrung der Daten, sondern erm\u00f6glicht auch einen schnellen Zugriff und das einfache Teilen von Inhalten. Mit Firebase Storage ist sichergestellt, dass die Anwendung reibungslos l\u00e4uft und Benutzerdaten zuverl\u00e4ssig gespeichert werden, was ein entscheidender Faktor f\u00fcr die Benutzererfahrung und die Leistung unserer App ist.<\/p>\n\n\n\n<p>Wir haben uns bewusst f\u00fcr die Nutzung von Firebase Storage entschieden und das aus guten Gr\u00fcnden. Erstens ist die Implementierung unkompliziert und zeitsparend, was unser Entwicklerteam sch\u00e4tzt. Zweitens erm\u00f6glicht Firebase Storage eine nahtlose Cross-Plattform-Unterst\u00fctzung, was f\u00fcr uns von entscheidender Bedeutung ist. Und nicht zuletzt spielt die Kosteneffizienz eine gro\u00dfe Rolle &#8211; falls wir mit unserer App expandieren m\u00f6chten, zahlen wir nur f\u00fcr den tats\u00e4chlich genutzten Speicherplatz, was uns hilft, Ressourcen effizient zu nutzen und unn\u00f6tige Ausgaben zu vermeiden. Zum heutigen Stand aber reicht uns das Free-Tier aus. Zusammengefasst bietet Firebase Storage also eine ideale L\u00f6sung f\u00fcr alle unsere Anforderungen.<\/p>\n\n\n\n<p>Unsere Firebase Storage verf\u00fcgt \u00fcber eine klare Struktur: Den Ordner &#8216;Avatars&#8217;, in dem s\u00e4mtliche Profilbilder sicher verwahrt werden.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/rTkc0-GqE8mGn4OjB24XNwJ3Wz_KryrRcF0vrKZHyun9Ett0CEPie56tbKFQ3h-5sK7cTen4WLSnN3LNbE6IgBGiJJ2hyZVWT-SbKa054ZM72WfRThBCHLWv_WOQgaQRqBAluTUjEHuM160r6Rgieo.png\" alt=\"\" \/><\/figure>\n\n\n\n<p>Unsere Sicherheitsrichtlinien (Security Rules) sind so konfiguriert, dass Benutzer nur ihre eigenen Profilbilder bearbeiten k\u00f6nnen, w\u00e4hrend authentifizierte Nutzer die Profilbilder anderer sehen k\u00f6nnen. Diese ma\u00dfgeschneiderten Regelungen gew\u00e4hrleisten eine sichere und kontrollierte Umgebung, in der Datenschutz und Zugriffskontrolle vorrangig sind.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/2hwJmeCKYT18GiOK5W-X-vALwcCvy5aHSBheYbIyuoOd020PU_9TsRwk8rPqzruHgV-rPrtogYzFiuACq78Zqwvl7aMJ-4jcQTz-xggI7DF-jZMZgiPQIBlDajZk66_5dZARMTm3gGv0ydai307lxMU.png\" alt=\"\" \/><\/figure>\n\n\n\n<p>Firebase Storage bietet einige Vorteile f\u00fcr die Speicherung von nutzergeneriertem Inhalt in Webanwendungen. Die einfache Integration und die Skalierbarkeit machen es zu einer attraktiven Wahl f\u00fcr Entwickler. Die anpassbaren Sicherheitsrichtlinien erm\u00f6glichen es, die Anwendung sicher zu gestalten.<\/p>\n\n\n\n<p>Allerdings gibt es auch einige Nachteile zu beachten. Wie in der Realtime-Database sind die Abfrage-M\u00f6glichkeiten begrenzt, was die Datenverarbeitung einschr\u00e4nken kann. Auch die Speicherung und das Lesen von Metadaten sind begrenzt. Es ist daher wichtig, die Bed\u00fcrfnisse und Anforderungen der Anwendung genau zu pr\u00fcfen, um sicherzustellen, dass Firebase Storage die richtige Wahl f\u00fcr die spezifischen Anforderungen ist.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vor- und Nachteile unserer Architektur<\/h3>\n\n\n\n<p>Im Vergleich zu verschiedenen alternativen Architekturen, die von unseren Kommilitonen umgesetzt wurden, hat unsere gew\u00e4hlte Architektur ihre eigenen Vor- und Nachteile. Hier m\u00f6chten wir einen \u00dcberblick \u00fcber diese Aspekte geben.<\/p>\n\n\n\n<p>Eine urspr\u00fcngliche Idee von uns als Team war, das Backend mit dem Express Framework umzusetzen, das einen Websocket bereitstellt und in einem Kubernetes-Cluster in der Cloud bereitgestellt wird.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vorteile:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Flexibilit\u00e4t: Die M\u00f6glichkeit, das Backend bis ins kleinste Detail selbst zu entwickeln, bietet maximale Gestaltungsfreiheit.<\/li>\n\n\n\n<li>Klare Trennung von Frontend und Backend: Die Verwendung von zwei verschiedenen Codebasen erm\u00f6glicht eine klare Abgrenzung der Verantwortlichkeiten.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Nachteile:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Skalierung: Im Vergleich zu Plattformen wie Firebase w\u00e4re die Skalierung hier komplexer, da jede Komponente individuell auf eine steigende Nutzerzahl angepasst werden m\u00fcsste.<\/li>\n\n\n\n<li>Hoher Entwicklungsaufwand: Der Aufwand f\u00fcr die Entwicklung und Wartung ist erheblich h\u00f6her im Vergleich zur Nutzung eines Backend-as-a-Service (BaaS) wie Firebase.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Ein weiteres betrachtetes Szenario war die Verwendung von AWS-Diensten wie AppSync mit Lambda-Funktionen, AWS Cognito f\u00fcr die Benutzerauthentifizierung und DynamoDB f\u00fcr die Datenspeicherung.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vorteile:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Skalierbarkeit: Die einzelnen Komponenten k\u00f6nnen in der Cloud problemlos skaliert werden, was eine Skalierung der Anwendung entsprechend der Nutzernachfrage erm\u00f6glicht.<\/li>\n\n\n\n<li>Geeignet f\u00fcr komplexe Anwendungen: Diese Architektur eignet sich gut f\u00fcr gr\u00f6\u00dfere und komplexere Anwendungen.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Nachteile:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Hoher Lernaufwand: Die Einarbeitung in AWS erfordert Zeit und Ressourcen, insbesondere wenn zuvor keine Erfahrung mit diesen Diensten besteht.<\/li>\n\n\n\n<li>Erforderlichkeit einer Kreditkarte: Um das kostenlose Kontingent von AWS zu nutzen, ist eine Kreditkarte erforderlich.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Unsere Architektur<\/strong><\/p>\n\n\n\n<p>Mit diesem Hintergrundwissen k\u00f6nnen wir die Vor- und Nachteile unserer gew\u00e4hlten Architektur besser verstehen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vorteile:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Schnelle Entwicklung: Unser Backend konnte schnell an die Anforderungen unserer Anwendung angepasst werden, was bei anderen Anbietern wie AWS m\u00f6glicherweise komplexer gewesen w\u00e4re.<\/li>\n\n\n\n<li>Unterst\u00fctzung durch Firebase-Entwicklerteams: Die Unterst\u00fctzung von Firebase-Entwicklerteams und die M\u00f6glichkeit f\u00fcr Nutzer, \u00fcber ihren eigenen Google-Account am Projekt mitzuarbeiten, haben die Entwicklung erleichtert.<\/li>\n\n\n\n<li>Skalierbarkeit: Unsere Anwendung kann auf unbegrenzte Nutzerzahlen skalieren.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Nachteile:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Vendor-Lock: Die Anwendung l\u00e4sst sich schwer auf andere Cloud-Anbieter umstellen, da sie stark an Firebase gebunden ist.<\/li>\n\n\n\n<li>Eingeschr\u00e4nkter Datenbankzugriff: Im Vergleich zu einer Datenbank wie DynamoDB ist der Zugriff auf die Datenbank in Firebase weniger flexibel. Die Definition von komplexen Abfragen ist begrenzt, was zu gr\u00f6\u00dferen Datenmengen f\u00fchren kann, die an den Nutzer gesendet werden m\u00fcssen.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Die Wahl der Architektur h\u00e4ngt von den spezifischen Anforderungen eines Projekts und den verf\u00fcgbaren Ressourcen ab. In unserem Fall erm\u00f6glichte uns die Verwendung von Firebase eine schnelle Entwicklung und Skalierbarkeit, wobei einige Einschr\u00e4nkungen in Kauf genommen werden mussten, insbesondere in Bezug auf die Anbieterbindung und den Datenbankzugriff.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Firebase Hosting<\/h3>\n\n\n\n<p>Firebase erlaubt es, ein Projekt in einfachen Schritten zu hosten. Mit nur einem Command kann man sein Projekt mit \u201cfirebase deploy\u201d auf einem Server von Firebase hosten. Dieser Command kann lokal ausgef\u00fchrt werden oder auch von einer CI\/CD Pipeline. Firebase stellt uns zwei Subdomains automatisch zur Verf\u00fcgung.<\/p>\n\n\n\n<p>Der Vorteil des Hostings mit Firebase ist vor allem, dass das Hosting nur mit einem Command funktioniert. Des Weiteren wird die Web-App \u00fcber CDN Edge-Server bereitgestellt und auf einer SSD gecacht, wodurch der gehostete Inhalt schnell abgerufen werden kann. Im Firebase Hosting ist die Zero-Configuration SSL automatisch mit eingebaut f\u00fcr eine sichere Verbindung. Zudem hat man mit der Firebase Konsole Einsicht auf alle Versionen der App, welche man deployed hat und kann bei Bedarf mit wenigen Klicks einen Rollback auf eine \u00e4ltere Version durchf\u00fchren.<\/p>\n\n\n\n<p>Der Nachteil ist die geringe Konfigurationsm\u00f6glichkeit, welche man hat. Die einzige Konfigurationsm\u00f6glichkeit ist das Erstellen einer benutzerdefinierten Domain.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Testing<\/h2>\n\n\n\n<p>Zum Testen unserer Webanwendung verwenden wir das Testing Framework Vitest, da wir Vite als Build-Tool benutzen. Zus\u00e4tzlich benutzen wir den Firebase Emulator.<br>Der Emulator erlaubt es Firebase Services wie die Realtime DB lokal zu emulieren, sodass wir mit unseren Tests nicht die echten Daten aus unserem Projekt modifizieren.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"513\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/pfJ0EFn96qL9KHFQ9loC97dzi9QcryU2uGfdnaKPSNHOw9J7CZqGMXsLPT2YhpW_fy3aNBJxNxHgAyWmGglscx7n0Uexj8FsAHDsgmyPE29w1iBI4yzwOoaZjsFtJZSX92F70PLrJqXenSEu_6-UEGg.png\"><\/p>\n\n\n\n<p><em>Abb. 2: Testing Framework Vitest, Quelle: <a href=\"https:\/\/firebase.google.com\/docs\/emulator-suite\">https:\/\/firebase.google.com\/docs\/emulator-suite<\/a>\u00a0<\/em><\/p>\n\n\n\n<p>Durch unsere Unit Tests wurden folgende Dinge abgedeckt: Die API Funktionen, welche Daten in Firebase ver\u00e4ndern und die Security Rules der Realtime DB sowie der Firebase Storage.<\/p>\n\n\n\n<p>In unseren Unit Tests k\u00f6nnen wir uns folgender Weise mit der lokalen RealtimeDB und dem Authentification Emulator verbinden:<br><img loading=\"lazy\" decoding=\"async\" width=\"462\" height=\"192\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/B9tDz6K1NbWq_pmqye1HNfXUYFQLWzu59-qtRU37ZnTLiKctQryj68sXDKU8d5_TAqisKg0s9LHv6ZD_sditsLAoU_0BisWyJjzXRv4f7DTMEgt-ki8ZsT6UzH3vKevMSqyZ5g-EzyVSgsiDWYR3Fi0.png\"><\/p>\n\n\n\n<p>Mit Hilfe des Emulators k\u00f6nnen wir mit Vitest Code ausf\u00fchren, ohne die Daten in unserem echten Projekt zu ver\u00e4ndern:<br><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"241\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/W_QwicX4WJDR2dKB4QjdppG7EF6IIhCEhDAhLUwZVqX2aHDevpVSAuBbz3tV3zaTEtIeWbiE3At_usAvJ3fl5Fx3Rohme2aszYrChgGMn6oyTmHH9_6xo1xrIQwnjpvaZ_iFRnKrl0m9L_3o2H3j7wo.png\"><\/p>\n\n\n\n<p>F\u00fcr das Testen der Security Rules k\u00f6nnen wir mit dem firebase\/rules-unit-testing package ein Test Environment initialisieren. Die Regeln werden dabei aus einer lokalen Datei geladen:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/5gIlmcw-vBrhU50gv-EMYwXNCReZdJDhyVokOa317pDl29hZzbvB7CQCVglq3Avz5fBAgSylenB0GecRypAkbcMqgKY22tbCQtyluXGnPHqP8rv8BN6irlZfCSfvfSIWe-8LecIuywvZhDn-DxDqUAM.png\" alt=\"\" \/><\/figure>\n\n\n\n<p>Abschlie\u00dfend l\u00e4sst sich sagen, dass wir trotz anf\u00e4nglicher Schwierigkeiten mit unseren Unit Tests eine hohe Abdeckung unseres Codes erreichen konnten.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CI\/CD<\/h2>\n\n\n\n<p>Unsere CICD Pipeline ist in 4 Stages aufgeteilt und wird bei einem Merge auf den Hauptbranch ausgef\u00fchrt: Setup, Build, Test und Deploy.&nbsp;<\/p>\n\n\n\n<p>Im \u201cSetup\u201d Schritt werden alle Dependencies unseres Projektes heruntergeladen und installiert. Anschlie\u00dfend wird das Projekt im Schritt \u201cBuild\u201d gebaut. Nachdem das Projekt gebaut wurde, werden alle unsere Unit Tests ausgef\u00fchrt. Wenn es hier zu Fehlern kommt, wird die Pipeline automatisch als \u201cfehlgeschlagen\u201d markiert. Sind dann doch alle Tests problemlos durchgelaufen, so wird mit Hilfe der Firebase CLI der gebaute Code in Firebase Hosting deployed. Wenn dieser Schritt erfolgreich durchgef\u00fchrt wurde, k\u00f6nnen Nutzer direkt auf die neueste Version von FastChat zugreifen.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Probleme \/ Schwierigkeiten<\/h2>\n\n\n\n<p>Wie bei jedem Softwareprojekt gab es auch hier Herausforderungen zu meistern. Eine besonders knifflige H\u00fcrde war zu Beginn die Synchronisation der Benutzerdaten zwischen Google Authentication und der RealtimeDB. Hier gab es massive Schwierigkeiten. Nach einer umfangreichen Umstrukturierung unseres State-Managements konnten wir dieses Problem aber schlie\u00dflich erfolgreich l\u00f6sen. Trotz der zahlreichen Vorteile, die Firebase in Bezug auf die Entwicklung bietet, stie\u00dfen wir auch auf einige Herausforderungen. Eine dieser Herausforderungen ergab sich aus der Unflexibilit\u00e4t eines Backend-as-a-Service. Ein Beispiel daf\u00fcr ist die Notwendigkeit, dass Benutzer sich erneut authentifizieren m\u00fcssen, wenn sie ihre Benutzerdaten wie die E-Mail-Adresse \u00e4ndern m\u00f6chten. Ebenso f\u00fchrte h\u00e4ufiges Eingeben eines falschen Passworts zu einem Rate-Limiting. Diese Sicherheitsvorkehrungen sind zweifellos wichtig, erforderten jedoch zus\u00e4tzliche Aufmerksamkeit w\u00e4hrend der Entwicklung. W\u00e4hrend Firebase zweifellos eine schnelle Entwicklung erm\u00f6glicht, bedeutet die Verwendung eines fertig entwickelten Backends auch, dass wir uns mit der vorhandenen Implementierung arrangieren m\u00fcssen. Die M\u00f6glichkeit, Dinge nach Belieben zu entfernen oder hinzuzuf\u00fcgen, fehlte uns in diesem Kontext.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n\n\n\n<p>Die Vorlesung und das damit verbundene Projekt haben unser Team auf eine aufregende Reise gef\u00fchrt, die sowohl Spa\u00df als auch reichhaltige Lernm\u00f6glichkeiten bot. Von Anfang an haben wir uns in die faszinierende Welt der Webentwicklung gest\u00fcrzt, obwohl keiner von uns zuvor Erfahrung in diesem Bereich hatte. Was diese Reise so besonders gemacht hat, war die kreative Freiheit, die uns bei der Gestaltung unseres Projekts gew\u00e4hrt wurde. Diese Freiheit erlaubte es uns, unsere Ideen zu entfalten und ein einzigartiges Projekt zu entwickeln, auf das wir stolz sind.<\/p>\n\n\n\n<p>Am Ende des Projekts sind wir nicht nur mit dem Ergebnis zufrieden, sondern auch mit dem wertvollen Wissen und den F\u00e4higkeiten, die wir w\u00e4hrend des Prozesses erworben haben. Wir haben gelernt, robuste Architekturen zu entwerfen, Webentwicklung mit React umzusetzen und Firebase effektiv zu nutzen. Diese erworbenen F\u00e4higkeiten werden zweifellos in der Zukunft von gro\u00dfem Nutzen sein. Die Zusammenarbeit im Team hat nicht nur unser technisches Wissen erweitert, sondern auch unsere F\u00e4higkeiten in der Teamarbeit und Kommunikation verbessert. Wir haben Vertrauen ineinander aufgebaut und gemeinsam Hindernisse \u00fcberwunden. Insgesamt war das Projekt eine wertvolle Erfahrung, die uns nicht nur technisch, sondern auch pers\u00f6nlich bereichert hat. Wir sind dankbar f\u00fcr diese Gelegenheit und freuen uns auf weitere spannende Projekte in der Zukunft.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Einf\u00fchrung Herzlich willkommen zu unserem Blogbeitrag \u00fcber FastChat, einer neuen Web-Chat-Anwendung, die das Kommunizieren im Internet auf ein neues Level hebt. In diesem Beitrag m\u00f6chten wir euch die Hintergrundgeschichte zu diesem Projekt, unsere Ziele und die Funktionalit\u00e4ten vorstellen, welche wir erfolgreich umgesetzt haben. Tauchen wir ein!&nbsp; Unsere Idee f\u00fcr FastChat war recht simpel: Wir wollten [&hellip;]<\/p>\n","protected":false},"author":1155,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[574,150,981,982,530,983],"ppma_author":[936],"class_list":["post-25735","post","type-post","status-publish","format-standard","hentry","category-allgemein","tag-chat","tag-ci-cd","tag-firebase","tag-mui","tag-react","tag-tailwind-css"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":27369,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2025\/02\/26\/cloudy-mit-aussicht-auf-worter-unser-weg-mit-crowdcloud\/","url_meta":{"origin":25735,"position":0},"title":"Cloudy mit Aussicht auf W\u00f6rter: Unser Weg mit CrowdCloud","author":"Simon Wimmer","date":"26. February 2025","format":false,"excerpt":"Willkommen zu unserem Erfahrungsbericht aus der Vorlesung \u201eSystem Engineering and Management\u201c. In den letzten Monaten haben wir uns an ein Projekt gewagt, das uns sowohl technisch als auch pers\u00f6nlich herausgefordert hat \u2013 CrowdCloud. Anstatt uns in trockene Theorien zu verlieren, m\u00f6chten wir euch in diesem Blog-Beitrag erz\u00e4hlen, wie aus einer\u2026","rel":"","context":"In &quot;System Engineering&quot;","block_context":{"text":"System Engineering","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/system-designs\/system-engineering\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/System_Engineering.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/System_Engineering.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/System_Engineering.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/System_Engineering.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/System_Engineering.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/System_Engineering.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":22395,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/02\/27\/applikationsinfrastruktur-einer-modernen-web-anwendung\/","url_meta":{"origin":25735,"position":1},"title":"Applikationsinfrastruktur einer modernen Web-Anwendung","author":"Jannik Smidt","date":"27. February 2022","format":false,"excerpt":"ein Artikel von Nicolas Wyderka, Niklas Schildhauer, Lucas Cr\u00e4mer und Jannik Smidt Projektbeschreibung In diesem Blogeintrag wird die Entwicklung der Applikation- und Infrastruktur des Studienprojekts sharetopia beschrieben. Als Teil der Vorlesung System Engineering and Management wurde besonders darauf geachtet, die Anwendung nach heutigen Best Practices zu entwickeln und dabei kosteneffizient\u2026","rel":"","context":"In &quot;Interactive Media&quot;","block_context":{"text":"Interactive Media","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/interactive-media\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/02\/Bildschirmfoto_2022-02-27_um_18.59.07.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/02\/Bildschirmfoto_2022-02-27_um_18.59.07.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/02\/Bildschirmfoto_2022-02-27_um_18.59.07.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/02\/Bildschirmfoto_2022-02-27_um_18.59.07.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/02\/Bildschirmfoto_2022-02-27_um_18.59.07.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":25800,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/09\/14\/splid-2-0-die-zukunft-des-gemeinsamen-ausgabenmanagements\/","url_meta":{"origin":25735,"position":2},"title":"Splid 2.0 &#8211; Die Zukunft des gemeinsamen Ausgabenmanagements","author":"David Christoph Scheifers","date":"14. September 2023","format":false,"excerpt":"Im Rahmen der Vorlesung \u201cSoftware Development for Cloud Computing\u201d haben wir uns daf\u00fcr entschieden, einen Klon der App Splid auf Basis unterschiedlicher Cloud Technologien als Web App zu entwickeln, um uns so die Grundkenntnisse des Cloud Computings anzueignen. Projektidee Bei gemeinsamen Aktivit\u00e4ten und Gruppenausgaben ist es sehr hilfreich, einfache und\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/image6.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/image6.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/image6.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/image6.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/image6.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/09\/image6.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":27142,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2025\/02\/27\/entwicklung-eines-skalierbaren-file-share-services-mit-aws\/","url_meta":{"origin":25735,"position":3},"title":"Entwicklung eines skalierbaren File-Share-Services mit AWS","author":"Max Tyrchan","date":"27. February 2025","format":false,"excerpt":"tl;dr: Unser Semester-Projekt bestand im Aufbau einer skalierbaren File-Share-L\u00f6sung auf AWS auf Basis von NextCloud. Unsere Motivation bestand darin die volle Kontrolle \u00fcber die eigenen Daten zu erlangen, individuelle Anpassbarkeit zu erm\u00f6glichen und eine Kosteneffizienz zu erreichen. Es wurden klare Ziele in den Bereichen Verf\u00fcgbarkeit, Performanz, Sicherheit und Skalierbarkeit definiert,\u2026","rel":"","context":"In &quot;System Engineering&quot;","block_context":{"text":"System Engineering","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/system-designs\/system-engineering\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/logo_nextcloud_blue-2.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/logo_nextcloud_blue-2.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/logo_nextcloud_blue-2.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/logo_nextcloud_blue-2.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2025\/02\/logo_nextcloud_blue-2.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":23517,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/","url_meta":{"origin":25735,"position":4},"title":"Multiplayer Game with AWS |\u00a0StadtLandFluss","author":"gi004","date":"29. August 2022","format":false,"excerpt":"Dieser Blogbeitrag soll einen Einblick in die Entwicklung unserer Webanwendung mit den unten definierten Funktionen geben sowie unsere L\u00f6sungsans\u00e4tze, Herausforderungen und Probleme aufzeigen.\u00a0 Cloud Computing VorlesungProjekt Idee & InspirationZielEinblick in das Spiel \u2013 DemoFrameworks - Cloud Services - InfrastructureArchitekturCloud KomponentenAWS ServicesDynamo DBS3LambdaAmazon API- GatewayAmazon CloudWatchTestingCI\/CD PipelineSchwierigkeitenFazit Cloud Computing Vorlesung Ziel\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":22034,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/02\/07\/entwicklung-und-benchmarking-einer-eigenen-elevation-api\/","url_meta":{"origin":25735,"position":5},"title":"Entwicklung und Benchmarking einer eigenen Elevation API","author":"Eric Prytulla","date":"7. February 2022","format":false,"excerpt":"Worum geht's? Im Rahmen der Veranstaltung \"System Engineering and Management\" sollte ein Softwareprojekt unserer Wahl und mit besonderem Augenmerk auf Systemarchitektur durchgef\u00fchrt, analysiert und dokumentiert werden. F\u00fcr unser Projekt haben wir uns entschieden, einen besonderen Schwerpunkt auf Monitoring zu legen. Das Projekt bestand also aus drei gr\u00f6\u00dferen Teilprojekten: dem Backend\u2026","rel":"","context":"In &quot;Allgemein&quot;","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/02\/NET_Core_Logo.svg_-2-150x150.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"authors":[{"term_id":936,"user_id":1155,"is_guest":0,"slug":"michael_dick","display_name":"Michael Dick","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/709f2a71925177dbd54b3120d4d93c394d6eaa32eae8409769f7247fac3be2cf?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/25735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/users\/1155"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/comments?post=25735"}],"version-history":[{"count":12,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/25735\/revisions"}],"predecessor-version":[{"id":25808,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/25735\/revisions\/25808"}],"wp:attachment":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/media?parent=25735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/categories?post=25735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/tags?post=25735"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/ppma_author?post=25735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}