{"id":23517,"date":"2022-08-29T17:53:19","date_gmt":"2022-08-29T15:53:19","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=23517"},"modified":"2023-06-18T17:28:31","modified_gmt":"2023-06-18T15:28:31","slug":"multiplayer-game-with-aws-stadtlandfluss","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/","title":{"rendered":"Multiplayer Game with AWS |\u00a0StadtLandFluss"},"content":{"rendered":"\n<h3 class=\"has-text-align-center wp-block-heading\">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<\/h3>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a class=\"aioseo-toc-item\" href=\"#aioseo-cloud-computing-mit-aws--serverless\">Cloud Computing Vorlesung<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-projekt-idee-und-inspiration\">Projekt Idee &amp; Inspiration<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-ziel\">Ziel<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-einblick-in-das-spiel--demo\">Einblick in das Spiel \u2013 Demo<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-frameworks---cloud-services---infrastructure\">Frameworks &#8211; Cloud Services &#8211; Infrastructure<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-architektur\">Architektur<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-cloud-komponenten\">Cloud Komponenten<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-aws-services\">AWS Services<\/a><ul><\/ul><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-dynamo-db\">Dynamo DB<\/a><ul><\/ul><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-s3\">S3<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-lambda\">Lambda<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-amazon-api--gateway\">Amazon API- Gateway<\/a><ul><\/ul><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-amazon-cloudwatch\">Amazon CloudWatch<\/a><ul><\/ul><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-testing\">Testing<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-ci-cd-pipeline\">CI\/CD Pipeline<\/a><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-schwierigkeiten\">Schwierigkeiten<\/a><ul><\/ul><\/li><li><a class=\"aioseo-toc-item\" href=\"#aioseo-resumee\">Fazit<\/a><\/li><\/ul><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-cloud-computing-mit-aws--serverless\"><strong>Cloud Computing Vorlesung<\/strong><\/h2>\n\n\n\n<p>Ziel der Vorlesung \u201c<strong>Software Development for Cloud Computing<\/strong>\u201d ist es, aktuelle Cloud Technologien kennen zu lernen und diese im Rahmen von \u00dcbungen und kleinen Projekten anzuwenden. Unser Team hat sich im Rahmen dieser als Pr\u00fcfungsleistung zu erbringenden Projektarbeit dazu entschieden, das bekannte Spiel \u201e<strong>Stadt, Land, Fluss<\/strong>\u201c als Multiplayer-Online Game umzusetzen.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-projekt-idee-und-inspiration\"><strong>Projekt Idee &amp; Inspiration<\/strong><\/h2>\n\n\n\n<p>Zu Beginn der Vorlesung war sich unsere Projektgruppe noch sehr unsicher, was wir als Projekt mit Cloudkomponenten umsetzen wollten, da wir noch keine bis sehr geringe Vorerfahrung in der Cloud-Entwicklung hatten. Erste Brainstormings hatten ergeben, dass wir gerne eine Webanwendung entwerfen wollten. Jedoch war es gar nicht so leicht Zugriff zu interessanten Daten zu bekommen.&nbsp;<\/p>\n\n\n\n<p>Letztendlich hat sich unsere Gruppe dazu entschieden, sich nicht von Daten abh\u00e4ngig zu machen, sondern etwas Eigenes zu kreieren.&nbsp;<\/p>\n\n\n\n<p>Die Inspiration f\u00fcr unsere finale Idee (Stadt-Land-Fluss) war das Online-Spiel Skribbl IO, ein kostenloses Multiplayer-Zeichen- und Ratespiel. Dabei wird in jeder Runde ein Spieler ausgew\u00e4hlt, der etwas zeichnet, das die anderen erraten sollen. Skribbl erm\u00f6glicht es dem Spieler auch, einen eigenen Raum zu erstellen und Freunde einzuladen, die einen Link zu diesem Raum teilen.<\/p>\n\n\n\n<p>Im Rahmen unseres Projektes hat uns die Idee gefallen etwas zu entwickeln, was man danach mit Freunden zusammen nutzen kann. Den Multiplayer Ansatz fanden wir spannend, da wir so etwas noch nie umgesetzt haben. Da wir alle Stadt-Land-Fluss Fans sind, fiel unsere Wahl auf dieses Spiel.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-ziel\"><strong>Ziel<\/strong><\/h2>\n\n\n\n<p>Prim\u00e4res Ziel des Projektes war es f\u00fcr uns, erste Erfahrungen in Cloud-Computing zu sammeln und gleichzeitig unsere F\u00e4higkeiten im Software-Engineering auszubauen.&nbsp;<\/p>\n\n\n\n<p>Konkret war es die Idee ein Stadt-Land-Fluss Spiel mit den folgenden Funktionalit\u00e4ten zu entwickeln:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Schritt 1: Raumerstellung<\/strong><ul><li>Spieler kann einen neuen Raum erstellen, oder \u00fcber eine Raum-Id einem Raum beitreten<\/li><\/ul><\/li><li><strong>Schritt 2: Spieldaten bestimmen<\/strong><ul><li>Der Spieler, welcher einen Raum erstellt, soll die Kategorien selber bestimmen k\u00f6nnen, sowie die Zeit, welche man f\u00fcr das Ausf\u00fcllen einer Spielrunde hat, ebenfalls sollen Mitspieler- und Rundenanzahl bestimmt werden k\u00f6nnen<\/li><\/ul><\/li><li><strong>Schritt 3: Waiting Room&nbsp;<\/strong><ul><li>Nach Erstellen oder Beitreten eines Raumes, kommt der Spieler in einem Warteraum, wo er die festgelegten Parameter der Spielrunden sieht und informiert wird, welche Spieler der Runde schon beigetreten sind&nbsp;<\/li><\/ul><\/li><li><strong>Schritt 4: Letter Generator<\/strong>&nbsp;<ul><li>Der Buchstabe f\u00fcr eine Runde soll zuf\u00e4llig generiert werden, sich aber nicht wiederholen innerhalb eines Spiels<\/li><\/ul><\/li><li><strong>Schritt 5: Spielrunde<\/strong><ul><li>Auf der Seite der Texteingaben, soll ein Spieler die Runde stoppen k\u00f6nnen, sobald er alles ausgef\u00fcllt hat, dies triggert den Stopp bei allen Mitspielern<\/li><\/ul><\/li><li><strong>Schritt 6: Kontrollieren der Eingaben&nbsp;<\/strong><ul><li>Alle Spieler sehen nach einer Runde ihre eigenen, aber auch alle anderen Eingaben der Mitspieler sowie die Punkte, die dabei erreicht wurden<\/li><li>Dabei werden die Punkte nach folgendem Schema berechnet:<ul><li>Hat ein Spieler als Einziger in dieser Kategorie eine Eingabe und ist diese auch g\u00fcltig (beginnt mit dem generierten Buchstaben), dann erh\u00e4lt er f\u00fcr dieses Feld 20 Punkte<\/li><li>Haben andere in diesem Feld auch Eingaben, erh\u00e4lt der Spieler f\u00fcr eine g\u00fcltige Eingabe 10 Punkte<\/li><li>Hat ein anderer Spieler in der gleichen Kategorie die gleiche Angabe, erh\u00e4lt der Spieler 5 Punkte<\/li><li>Ist die Eingabe leer oder beginnt sie nicht mit dem generierten Buchstaben, werden keine Punkte vergeben<\/li><\/ul><\/li><\/ul><\/li><li><strong>Schritt 7 : Hall of Fame<\/strong> &nbsp;<ul><li>Darstellung der Spieler-R\u00e4nge und ihrer Punkte nach Abschlie\u00dfen aller Runden<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>Das erste Mockup der zu erstellenden Webanwendung entsprach folgendem Design und war unser Leitfaden f\u00fcr die Entwicklungsphase:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image.png\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"454\" data-attachment-id=\"23530\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-47\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image.png\" data-orig-size=\"940,454\" 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=\"image\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image.png\" alt=\"\" class=\"wp-image-23530\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image.png 940w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-300x145.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-768x371.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/a><figcaption>Skizze der groben Web Anwendung zu Beginn<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-einblick-in-das-spiel--demo\"><strong>Einblick in das Spiel \u2013 Demo&nbsp;<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-jetpack-slideshow aligncenter\" data-effect=\"slide\"><div class=\"wp-block-jetpack-slideshow_container swiper-container\"><ul class=\"wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper\"><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"562\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-23632\" data-id=\"23632\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.28.51u-1024x562.png\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.28.51u-1024x562.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.28.51u-300x165.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.28.51u-768x422.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.28.51u-1536x844.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.28.51u-2048x1125.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\">Startseite: Erstelle einen Raum oder betrete ein Spiel<\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"562\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-23633\" data-id=\"23633\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.29.05-1024x562.png\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.29.05-1024x562.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.29.05-300x165.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.29.05-768x422.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.29.05-1536x844.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.29.05-2048x1125.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\">Erstelle ein neues Spiel<\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"562\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-23635\" data-id=\"23635\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.29.50-1024x562.png\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.29.50-1024x562.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.29.50-300x165.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.29.50-768x421.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.29.50-1536x842.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.29.50-2048x1123.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\">Teile den Link und warte auf weitere Spieler<\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"561\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-23636\" data-id=\"23636\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.30.09-1024x561.png\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.30.09-1024x561.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.30.09-300x164.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.30.09-768x421.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.30.09-1536x841.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.30.09-2048x1122.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\">Ein Buchstabe wird zuf\u00e4llig generiert<\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"559\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-23637\" data-id=\"23637\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.30.02-1024x559.png\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.30.02-1024x559.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.30.02-300x164.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.30.02-768x419.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.30.02-1536x839.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.30.02-2048x1119.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\">Spielraum, bei dem der User seine W\u00f6rter eingibt und auf Stopp dr\u00fcckt, sobald er alle Felder gef\u00fcllt hat. Der Timer z\u00e4hlt anschlie\u00dfend von 10 Sekunden auf 0 runter.<\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-23639\" data-id=\"23639\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.32.06-1024x560.png\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.32.06-1024x560.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.32.06-300x164.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.32.06-768x420.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.32.06-1536x840.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.32.06-2048x1120.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\">Siehe Ergebnisse der anderen nach jeder Runde<\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"562\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-23640\" data-id=\"23640\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.37.58-1024x562.png\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.37.58-1024x562.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.37.58-300x165.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.37.58-768x421.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.37.58-1536x843.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.37.58-2048x1123.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\">Siehe den Gewinner in der Hall of Fame<\/figcaption><\/figure><\/li><li class=\"wp-block-jetpack-slideshow_slide swiper-slide\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"562\" alt=\"\" class=\"wp-block-jetpack-slideshow_image wp-image-23641\" data-id=\"23641\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.38.12-1024x562.png\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.38.12-1024x562.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.38.12-300x165.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.38.12-768x422.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.38.12-1536x844.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-29-at-13.38.12-2048x1125.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-block-jetpack-slideshow_caption gallery-caption\">Siehe die Ergebnis\u00fcbersicht aller Runden<\/figcaption><\/figure><\/li><\/ul><a class=\"wp-block-jetpack-slideshow_button-prev swiper-button-prev swiper-button-white\" role=\"button\"><\/a><a class=\"wp-block-jetpack-slideshow_button-next swiper-button-next swiper-button-white\" role=\"button\"><\/a><a aria-label=\"Pause Slideshow\" class=\"wp-block-jetpack-slideshow_button-pause\" role=\"button\"><\/a><div class=\"wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-white\"><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-frameworks---cloud-services---infrastructure\"><strong>Frameworks &#8211; Cloud Services &#8211; Infrastructure<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Frontend<\/h3>\n\n\n\n<p>Aufgrund von vorhandenen Vorerfahrungen wurde die zweite Entscheidung getroffen, das Frontend mit Hilfe des Angular Frameworks umzusetzen. Angular ist ein TypeScript-basiertes Front-End-Webapplikationsframework. Das Backend wurde mit Python als Programmiersprache umgesetzt. Zum einen war hier mehr Vorerfahrung vorhanden bei einigen Teammitgliedern und zum anderen haben wir mehr Beispiele zur Anwendung von Websockets und AWS im Zusammenhang mit Angular gefunden, was uns sehr geholfen hat.&nbsp;<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Backend<\/h3>\n\n\n\n<p>Wie zu Beginn schon erw\u00e4hnt, hat uns die parallel zum Projekt laufende Vorlesung gleich zu Beginn den gro\u00dfen Funktionsumfang von AWS aufgezeigt.&nbsp; Besonders interessant fanden wir die Einsatzm\u00f6glichkeiten von Lambda Funktionen. Im Zusammenhang damit hat uns die Funktion gefallen ein API Gateway aufzubauen zu k\u00f6nnen. Da man bei der Programmiersprache v\u00f6llig frei w\u00e4hlen kann, haben wir uns f\u00fcr Python entschieden. In der Python Programmierung hatten wir als Team zwar wenig Erfahrung, haben aber in dem Projekt eine Chance gesehen, uns in dieses Thema weiter einarbeiten zu k\u00f6nnen und unsere F\u00e4higkeiten zu verbessern.&nbsp;<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-architektur\"><strong>Architektur<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"995\" height=\"426\" data-attachment-id=\"23531\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-1-8\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-1.png\" data-orig-size=\"995,426\" 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=\"image-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-1.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-1.png\" alt=\"\" class=\"wp-image-23531\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-1.png 995w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-1-300x128.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-1-768x329.png 768w\" sizes=\"auto, (max-width: 995px) 100vw, 995px\" \/><\/a><figcaption>Architektur<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-cloud-komponenten\"><strong>Cloud Komponenten<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Vor dem Projektstart hatten wir zu Beginn die Schwierigkeit zu entscheiden, welchen Cloud-Anbieter wir f\u00fcr die Entwicklung nutzen wollen. Voraussetzungen f\u00fcr die Entscheidungen waren, dass es eine ausf\u00fchrliche Dokumentation der M\u00f6glichkeiten und Funktionen gibt (aufgrund der mangelnden Vorerfahrung), ebenfalls wollten wir nicht eine Kreditkarte als Zahlungsoption hinterlegen m\u00fcssen und auch keine bis sehr wenig Kosten verursachen.&nbsp;<\/p>\n\n\n\n<p>Zu Beginn der Vorlesung hie\u00df es noch, dass wir eventuell ein Konto bei der IBM-Cloud oder \u00fcber AWS von der Hochschule bekommen w\u00fcrden. Allerdings war dies leider doch nicht der Fall, weswegen wir nach erstem Warten selbst eine Entscheidung treffen mussten. Wir haben uns schlussendlich f\u00fcr AWS (Amazon Web Services) entschieden, da es einer der f\u00fchrenden Anbieter im Cloud Computing ist. Hierbei hat uns gefallen, dass es sehr viele Tutorials und gute Dokumentation zu den einzelnen AWS Services gab. Ein Nachteil war, dass man beim Anlegen eines Kontos eine Kreditkarte hinterlegen musste. Vorteil war andererseits, dass man mit einem Gratis-Kontingent (Free Tier) an Funktionsaufrufen, Rollen, und DB Kapazit\u00e4ten etc. startet, weswegen im Rahmen des Projektes dahingehend keine Kosten entstehen sollten. Im sp\u00e4teren Verlauf haben wir herausgefunden, dass man allerdings f\u00fcr die Funktionalit\u00e4t von AmazonCloudWatch, welches ein Service zur Einsicht der Logs ist, zahlen muss. Die Kosten waren nicht hoch, weswegen es kein Problem darstellte, allerdings sollte man sich eindeutig \u00fcber die Kosten, welche bei der Entwicklung entstehen k\u00f6nnen, im Klaren sein, um nicht b\u00f6se \u00fcberrascht zu werden.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"514\" data-attachment-id=\"23532\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-2-9\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-2.png\" data-orig-size=\"1623,815\" 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=\"image-2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-2-1024x514.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-2-1024x514.png\" alt=\"\" class=\"wp-image-23532\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-2-1024x514.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-2-300x151.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-2-768x386.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-2-1536x771.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-2.png 1623w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Amazon Free Tier<\/figcaption><\/figure>\n\n\n\n<p>\u00dcbersicht Free Tier : <a href=\"https:\/\/aws.amazon.com\/de\/free\/?all-free-tier.sort-by=item.additionalFields.SortRank&amp;all-free-tier.sort-order=asc&amp;awsf.Free%2520Tier%2520Types=tier%23always-free&amp;awsf.Free%2520Tier%2520Categories=*all\">https:\/\/aws.amazon.com\/de\/free\/?all-free-tier.sort-by=item.additionalFields.SortRank&amp;all-free-tier.sort-order=asc&amp;awsf.Free%20Tier%20Types=tier%23always-free&amp;awsf.Free%20Tier%20Categories=*all<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-aws-services\"><strong>AWS Services&nbsp;<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-serverless\"><em>Serverless<\/em>&nbsp;<\/h3>\n\n\n\n<p>F\u00fcr das Anlegen unseres Projektes und auch der sp\u00e4teren M\u00f6glichkeit einer \u00fcbersichtlichen Vorlage des Codes zur Bewertung, haben wir nach einer M\u00f6glichkeit gesucht, alle f\u00fcr AWS ben\u00f6tigten Konfigurationen sowie das Anlegen der verschiedenen Lambda-Funktionen in unserem GitLab Reporsitory hinterlegen zu k\u00f6nnen und direkt im Code Editor bearbeiten und \u00e4ndern zu k\u00f6nnen.&nbsp;<\/p>\n\n\n\n<p>Nach einiger Recherche sind wir dabei auf das Serverless Framework gesto\u00dfen. Vorteile des Serverless Frameworks gegen\u00fcber der AWS Grafikoberfl\u00e4che sind, dass alle man alle Elemente wie Datenbanken, Buckets, API-Routen und Aufrufe sowie Lambda Functions \u00fcber eine serverless.yaml Datei verwalten kann. Zudem ist es nicht n\u00f6tig, AWS-Kontoschl\u00fcsseln oder anderen Kontoanmeldeinformationen in Skripte oder Umgebungsvariablen zu kopieren oder einzuf\u00fcgen. \u00dcber die serverless.yaml k\u00f6nnen alle Ressourcen und Funktionen \u00fcbersichtlich und schnell angelegt und bearbeitet werden.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-functions\"><em>Functions<\/em><\/h3>\n\n\n\n<p>In der serverless.yaml angelegte Lambda Funktionen entsprechen dem folgenden Schema :&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"102\" data-attachment-id=\"23533\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-3-9\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-3.png\" data-orig-size=\"432,102\" 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=\"image-3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-3.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-3.png\" alt=\"\" class=\"wp-image-23533\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-3.png 432w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-3-300x71.png 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/><\/a><figcaption><em>Funktion Definition in serverless.yml&nbsp;<\/em><br><\/figcaption><\/figure>\n\n\n\n<p>Die in der Datei definierten Funktionen werden jeweils \u00fcber einen eigenen \u201ehandler\u201c referenziert. Das bedeutet, dass sie \u00fcber ein \u201eEvent\u201c aufgerufen werden k\u00f6nnen. Ein Event entspricht dabei beispielsweise einem API-Aufruf.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"870\" height=\"746\" data-attachment-id=\"23534\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-4-8\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-4.png\" data-orig-size=\"870,746\" 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=\"image-4\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-4.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-4.png\" alt=\"\" class=\"wp-image-23534\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-4.png 870w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-4-300x257.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-4-768x659.png 768w\" sizes=\"auto, (max-width: 870px) 100vw, 870px\" \/><\/a><figcaption><em>broadcast_to_room Lambda-Funktion<\/em><br><\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\"><em>Resources&nbsp;<\/em><\/h3>\n\n\n\n<p>Neben unseren Funktionen sind in der serverless.yml ebenfalls alle Tabellen sowie Buckets definiert. Dies erleichtert die Einrichtung neuer Ressourcen, welche ben\u00f6tigt werden und gibt eine gute \u00dcbersicht.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"338\" height=\"262\" data-attachment-id=\"23535\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-5-7\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-5.png\" data-orig-size=\"338,262\" 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=\"image-5\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-5.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-5.png\" alt=\"\" class=\"wp-image-23535\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-5.png 338w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-5-300x233.png 300w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\"><em>iamRoleStatements<\/em><\/h3>\n\n\n\n<p>Zudem k\u00f6nnen IAM-Rollen und Berechtigungen, die auf Lambda-Funktionen angewendet werden, konfiguriert werden.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-7.png\"><img loading=\"lazy\" decoding=\"async\" width=\"308\" height=\"214\" data-attachment-id=\"23537\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-7-6\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-7.png\" data-orig-size=\"308,214\" 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=\"image-7\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-7.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-7.png\" alt=\"\" class=\"wp-image-23537\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-7.png 308w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-7-300x208.png 300w\" sizes=\"auto, (max-width: 308px) 100vw, 308px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\"><em>Allgemeine Konfiguration&nbsp;<\/em><\/h3>\n\n\n\n<p>Es k\u00f6nnen ganz einfach allgemeine Settings angegeben werden, wie zum Beispiel:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-6.png\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"23536\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-6-6\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-6.png\" data-orig-size=\"720,152\" 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=\"image-6\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-6.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-6.png\" alt=\"\" class=\"wp-image-23536\" width=\"450\" height=\"95\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-6.png 720w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-6-300x63.png 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>\u00dcbersicht der M\u00f6glichkeiten: <a href=\"https:\/\/www.serverless.com\/framework\/docs\/providers\/aws\/guide\/serverless.yml\/\">https:\/\/www.serverless.com\/framework\/docs\/providers\/aws\/guide\/serverless.yml\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-dynamo-db\"><strong>Dynamo DB<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Um unser Spiel umsetzen zu k\u00f6nnen, waren wir darauf angewiesen, bestimmte Daten in einer Datenbank zu speichern, dies waren beispielsweise Elemente wir eine <strong>Raum-ID, die Spielernamen, die gew\u00e4hlten Spielparameter,<\/strong> sowie die benutzen <strong>Buschstaben<\/strong> und eingetragene <strong>Ergebnisse der Spieler.<\/strong> Da die Eintr\u00e4ge in der Datenbank immer variieren und keinem starren Muster folgen, beispielsweise ist es m\u00f6glich eine unterschiedliche Zahl an Kategorien pro Spielraum zu haben, haben wir nach einer <strong>NoSQL<\/strong> L\u00f6sung gesucht. Wir wollten eine Datenbank mit nicht-relationalen Ansatz, um nicht von einem festen Tabellenschemata abh\u00e4ngig zu sein. Unsere Wahl fiel dabei auf <strong>Amazon DynamoDB<\/strong>, welches eine schnelle NOSQL-Schl\u00fcssel-Wert-Datenbank f\u00fcr beliebig gro\u00dfe Datenmengen ist.&nbsp;<\/p>\n\n\n\n<p>Es gibt eine Tabelle \u201e<strong>game_data<\/strong>\u201c, welche alle relevanten Informationen enth\u00e4lt.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-datenstruktur\"><em>Datenstruktur<\/em><\/h3>\n\n\n\n<p>Ein Beispiel unserer Datenstruktur ist in der folgenden Abbildung zu erkennen:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-8.png\"><img loading=\"lazy\" decoding=\"async\" width=\"402\" height=\"818\" data-attachment-id=\"23538\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-8-6\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-8.png\" data-orig-size=\"402,818\" 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=\"image-8\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-8.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-8.png\" alt=\"\" class=\"wp-image-23538\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-8.png 402w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-8-147x300.png 147w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Diese JSON-Datei zeigt ein laufendes Spiel mit insgesamt zwei Spielern. Ganz oben ist die Room-Id gespeichert, welche einen einzigartigen Wert aufweist. Diese ist f\u00fcr die Spielrunde besonders wichtig, da so mehrere R\u00e4ume generiert und gleichzeitig laufen k\u00f6nnen. Der darunter gespeicherte Array \u201ecategories\u201c beinhaltet alle Kategorien als String-Elemente, die der Spieler, der den Raum erstellt hat, ausgew\u00e4hlt hat. Das Dictionary \u201egame_players\u201c enth\u00e4lt die Informationen zu allen Spielern. Dazu geh\u00f6rt bspw. der Username, der als Key im Dictionary agiert, die jeweilige Raum-Id, die Punkteanzahl sowie die Eingaben, die der Spieler f\u00fcr eine Runde eingegeben hat. Daneben werden zwei weitere Werte gespeichert, \u201enext_round\u201c und \u201estatus\u201c, welche dazu dienen, zu erkennen, dass die n\u00e4chste Runde beginnen kann, also alle Spieler bereit sind, oder ob der Spieler noch aktiv ist, also das Spiel nicht bereits verlassen hat.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Des Weiteren werden die Rundenanzahl, die Spiell\u00e4nge f\u00fcr eine Runde, sowie in einem Array die generierten Buchstaben der Runden gespeichert. Dieser wird pro Runde immer um den n\u00e4chsten zuf\u00e4llig generierten Buchstaben erweitert.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-datenbank-interaktionen\"><em>Datenbank-Interaktionen<\/em><\/h3>\n\n\n\n<p>W\u00e4hrend eines Spiels m\u00fcssen immer wieder Spielerdaten abgefragt, ver\u00e4ndert, hinzugef\u00fcgt oder gel\u00f6scht werden. Dazu geh\u00f6ren bspw. das Anlegen eines neuen Spiels, das Hinzuf\u00fcgen neuer Spieler zu der jeweiligen Raum-Id, das Aktualisieren der erreichten Punkte etc. Diese Interaktionen haben wir in den Lambda-Funktionen, die sp\u00e4ter noch einmal genauer erkl\u00e4rt werden, implementiert und sie werden aufgerufen, sobald diese ben\u00f6tigt werden. Da diese in Python implementiert wurden, haben wir die AWS SDK f\u00fcr Python, <strong>Boto3<\/strong> verwendet, die eine Integration von Python-Anwendungen und Bibliotheken in AWS-Services, darunter DynamoDB, erm\u00f6glicht.<\/p>\n\n\n\n<p>Quelle: <a href=\"https:\/\/aws.amazon.com\/de\/sdk-for-python\/\">https:\/\/aws.amazon.com\/de\/sdk-for-python\/<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-abfragen-von-daten\"><em>Abfragen von Daten<\/em><\/h3>\n\n\n\n<p>Auch wenn Boto3 als AWS-SDK f\u00fcr Python n\u00fctzliche Methoden bez\u00fcglich DynamoDB bereitstellt, war es nicht immer einfach, diese zu verwenden. Da unsere Datenstruktur durch die Verschachtelungen recht kompliziert war, war es aufwendig, die ben\u00f6tigten Informationen abzufragen.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-9.png\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"72\" data-attachment-id=\"23539\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-9-5\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-9.png\" data-orig-size=\"940,72\" 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=\"image-9\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-9.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-9.png\" alt=\"\" class=\"wp-image-23539\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-9.png 940w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-9-300x23.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-9-768x59.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-10.png\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"400\" data-attachment-id=\"23540\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-10-5\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-10.png\" data-orig-size=\"940,400\" 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=\"image-10\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-10.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-10.png\" alt=\"\" class=\"wp-image-23540\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-10.png 940w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-10-300x128.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-10-768x327.png 768w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/a><\/figure>\n\n\n\n<p>Die obige Abbildung zeigt einen Ausschnitt aus einer Lambda-Funktion und stellt die Abfrage von Spieldaten dar. Zun\u00e4chst wird die Verbindung zu der gew\u00fcnschten Datenbank (game_data) hergestellt, indem Endpoint-Url sowie die Region angegeben werden muss. Mit dieser Datenbank-Instanz kann nun mit Methoden wie \u201e.get()\u201c auf die gew\u00fcnschte Information in der Datenbank zugegriffen werden. Das Verwenden dieser Funktionen war demnach einfach, jedoch wurden die Daten in der DynamoDB sehr oft in Dictionaries gespeichert, welches an vielen Stellen gar nicht n\u00f6tig war, was in der Abbildung durch das sich wiederholende \u201e.get(\u201aL\u2018)\u201c, \u201e.get(\u201aM\u2018)\u201c etc. zu erkennen ist. <br><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>In Wirklichkeit waren die Daten n\u00e4mlich so aufgebaut:<\/p>\n\n\n\n<p>Man erkennt, dass die Daten durch DynamoDB zus\u00e4tzlich in Dictionaries und Arrays geschachtelt werden und es war schwierig zu erkennen, um was es sich nun handelt. Das Abfragen wurde dadurch viel komplizierter gestaltet, als es eigentlich ist und war auch sehr fehleranf\u00e4llig.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-11-e1661783520386.png\"><img loading=\"lazy\" decoding=\"async\" width=\"316\" height=\"917\" data-attachment-id=\"23541\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-11-5\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-11-e1661783520386.png\" data-orig-size=\"316,917\" 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=\"image-11\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-11-e1661783520386.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-11-e1661783520386.png\" alt=\"\" class=\"wp-image-23541\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-11-e1661783520386.png 316w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-11-e1661783520386-103x300.png 103w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\"><em>Anlegen von Daten<\/em><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-12.png\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"23542\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-12-5\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-12.png\" data-orig-size=\"940,122\" 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=\"image-12\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-12.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-12.png\" alt=\"\" class=\"wp-image-23542\" width=\"425\" height=\"55\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-12.png 940w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-12-300x39.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-12-768x100.png 768w\" sizes=\"auto, (max-width: 425px) 100vw, 425px\" \/><\/a><\/figure>\n\n\n\n<p>Das Anlegen neuer Daten in die Datenbank erfolgt mithilfe der Methode \u201eput_item\u201c, welcher ein JSON-Objekt mitgegeben werden muss. Die Abbildung zeigt das Anlegen eines neuen Raumes.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\"><em>L\u00f6schen von Daten<\/em><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-14.png\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"23544\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-14-5\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-14.png\" data-orig-size=\"802,148\" 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=\"image-14\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-14.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-14.png\" alt=\"\" class=\"wp-image-23544\" width=\"481\" height=\"89\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-14.png 802w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-14-300x55.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-14-768x142.png 768w\" sizes=\"auto, (max-width: 481px) 100vw, 481px\" \/><\/a><\/figure>\n\n\n\n<p>Das L\u00f6schen von Daten erfolgt \u00e4hnlich wie das Updaten von Daten, da der jeweiligen Methode \u201edelete_item\u201c mehrere Parameter mitgegeben werden k\u00f6nnen, die den Befehl spezifizieren. In unserem Projekt haben wir komplizierte Aufrufe jedoch nicht gebraucht, weshalb das L\u00f6schen im Vergleich zum Updaten von Daten einfach war.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-update-von-daten\"><em>Update von Daten<\/em><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-13.png\"><img loading=\"lazy\" decoding=\"async\" width=\"806\" height=\"202\" data-attachment-id=\"23543\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-13-5\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-13.png\" data-orig-size=\"806,202\" 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=\"image-13\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-13.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-13.png\" alt=\"\" class=\"wp-image-23543\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-13.png 806w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-13-300x75.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-13-768x192.png 768w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><\/figure>\n\n\n\n<p>Das Updaten von Daten erfolgt mithilfe der Methode \u201eupdate_item\u201c, dessen \u00fcbergebene Parameter komplexer sind als die anderen und auch abh\u00e4ngig davon sind, welche Typen (Array, Dictionaries, ein einfacher Wert) aktualisiert werden sollen. Um zu bestimmen, welches Objekt in der Datenbank bearbeitet werden soll, kann ein sogenannter \u201eKey\u201c, welcher in der obigen Abbildung die Raum-Id ist, mitgegeben werden. Zus\u00e4tzlich k\u00f6nnen die \u00fcbergebenen Parameter \u00fcberpr\u00fcft (ConditionExpression) und schlie\u00dflich bestimmt werden, wie das Objekt aktualisiert werden soll. In diesem Beispiel wird dem Array, der die generierten Buchstaben eines Spiels speichert, um einen Wert erweitert, weshalb als Wert f\u00fcr den Parameter \u201eUpdateExpression\u201c ein \u201elist_append\u201c verwendet wird.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-s3\"><strong>S3<\/strong><\/h2>\n\n\n\n<p>AWS S3 (Simple Storage Service) ist ein Service f\u00fcr das Speichern von Objekten. In unserem Projekt haben wir S3 benutzt, um unsere Anwendung zu hosten. Hierf\u00fcr haben wir einen S3-Bucket erstellt und dort unter \u201eStatic website hosting\u201c die Einstiegs- und Fehlerseite unserer Anwendung angegeben. Damit Benutzer \u00fcber die dabei erzeugte URL auf unsere Seite zugreifen k\u00f6nnen, haben wir diese anschlie\u00dfend noch \u00f6ffentlich zugreifbar gemacht und eine Policy hinzugef\u00fcgt, um im \u00f6ffentlichen Modus den Inhalt des Buckets lesen zu k\u00f6nnen.<\/p>\n\n\n\n<p>\u00dcber die AWS CLI k\u00f6nnen danach immer die aktuellen Files der gebauten Anwendung in S3 hochgeladen werden, wenn die Anwendung deployt werden soll (siehe auch CI\/CD Kapitel):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-15.png\"><img loading=\"lazy\" decoding=\"async\" width=\"836\" height=\"190\" data-attachment-id=\"23545\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-15-5\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-15.png\" data-orig-size=\"836,190\" 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=\"image-15\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-15.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-15.png\" alt=\"\" class=\"wp-image-23545\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-15.png 836w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-15-300x68.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-15-768x175.png 768w\" sizes=\"auto, (max-width: 836px) 100vw, 836px\" \/><\/a><figcaption><em>Ausschnitt aus der CI\/CD Pipeline zum Hochladen der Dateien in S3<\/em><br><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-lambda\"><strong>Lambda<\/strong><\/h2>\n\n\n\n<p>\u201eAWS Lambda ist ein Serverless-, ereignisgesteuerter Computing-Service, mit dem Sie Code f\u00fcr praktisch jede Art von Anwendung oder Backend-Service ausf\u00fchren k\u00f6nnen, ohne Server bereitzustellen oder zu verwalten. Sie k\u00f6nnen Lambda in \u00fcber 200 AWS-Services und Software-as-a-Service (SaaS)-Anwendungen ausl\u00f6sen und Sie zahlen nur f\u00fcr das, was Sie nutzen.\u201c<\/p>\n\n\n\n<p><a href=\"https:\/\/aws.amazon.com\/de\/lambda\/?c=ser&amp;sec=srv\">https:\/\/aws.amazon.com\/de\/lambda\/?c=ser&amp;sec=srv<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-amazon-api--gateway\"><strong>Amazon API- Gateway&nbsp;<\/strong><\/h2>\n\n\n\n<p>F\u00fcr die definierten Lambda Funktionen hat man bei AWS die M\u00f6glichkeit eine eigene Web-API mit einem http-Endpunkt zu erstellen. Daf\u00fcr kann man das Amazon API Gateway verwenden. Die Funktion des API-Gateway ist es Tools f\u00fcr die Erstellung und Dokumentation von Web-APIs, die HTTP-Anforderungen an Lambda-Funktionen weiterleiten, zu erstellen.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-websocket-api-routen\"><em>Websocket API Routen&nbsp;<\/em><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Api Route<\/strong><\/td><td><strong>Beschreibung<\/strong><\/td><\/tr><tr><td><strong>broadcast_to_room<\/strong><\/td><td>Sendet eine Nachricht an alle Spieler in einem Raum anhand der Raum-Id und den in der Dynamo DB gespeicherten Connection-Ids der Spieler.<\/td><\/tr><tr><td><strong>check_round<\/strong><\/td><td>setzt den Status der n\u00e4chsten Runde des jeweiligen Benutzers und sendet die Nachricht f\u00fcr die n\u00e4chste Runde an die Spieler im Raum, wenn alle Benutzer die n\u00e4chste Runde angeklickt haben.<\/td><\/tr><tr><td><strong>create_room&nbsp;<\/strong><\/td><td>Erstellt einen neuen Raum in der Datenbank mit den angegebenen Werten oder Standardwerten, wenn keine Werte angegeben werden.<\/td><\/tr><tr><td><strong>enter_room<\/strong><\/td><td>F\u00fcgt einen Benutzer zu einem Raum hinzu, indem sein Username sowie die entsprechende Connection-Id in der Dynamo DB unter dem Schl\u00fcssel der angegeben Raum-Id gespeichert werden.&nbsp;<\/td><\/tr><tr><td><strong>get_current_players<\/strong><\/td><td>Pr\u00fcft, ob der Spieler den Raum betreten darf und sendet alle Spielernamen des Raumes an den neuen Spieler.<\/td><\/tr><tr><td><strong>get_results_for_room<\/strong><\/td><td>Sendet Raumdaten und Spielerdaten an alle Spieler des Raums mit der angegebenen Raum-Id.<\/td><\/tr><tr><td><strong>load_user_inputs<\/strong><\/td><td>l\u00e4dt alle Benutzereingaben aus der Datenbank und sendet alle Werte (z.B. [[&#8220;Stuttgart&#8221;, &#8220;Rhein&#8221;, &#8220;Deutschland&#8221;]]) an die Spieler des Raums mit der angegebenen Raum-Id.<\/td><\/tr><tr><td><strong>navigate_players_to_next_room<\/strong><\/td><td>Navigiert alle Spieler in einem Raum zum Spielraum und wird aufgerufen, wenn der Hauptakteur die Taste &#8220;Spiel starten&#8221; dr\u00fcckt.<\/td><\/tr><tr><td><strong>play_round<\/strong><\/td><td>Fragt Timer, Kategorien und Rundeneinstellungen f\u00fcr den Spielraum \u00fcber die Room-Id aus der Datenbank ab.&nbsp;<\/td><\/tr><tr><td><strong>remove_player_from_room<\/strong><\/td><td>Setzt den Spielerstatus auf inaktiv in der Dynamo DB und l\u00f6scht die Raumdaten aus der Datenbank, wenn alle Spieler dieses Raums inaktiv sind.<\/td><\/tr><tr><td><strong>save_round<\/strong><\/td><td>Speichert Benutzereingaben aus Kategoriefeldern in der Datenbank.<\/td><\/tr><tr><td><strong>start_round<\/strong><\/td><td>Beginnt die n\u00e4chste Runde, indem er einen neuen Buchstaben erzeugt und pr\u00fcft, ob dieser Buchstabe bereits ausgew\u00e4hlt wurde und speichert den erzeugten Buchstaben in der Datenbank.<\/td><\/tr><tr><td><strong>stop_round<\/strong><\/td><td>Stoppt eine Spielrunde, wenn jemand die Stopptaste gedr\u00fcckt hat.&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-amazon-cloudwatch\"><strong>Amazon CloudWatch&nbsp;<\/strong><\/h2>\n\n\n\n<p>Amazon CloudWatch entspricht einem \u00dcberwachungs- und Beobachtungsservice f\u00fcr Entwickler.&nbsp; Wir wollten \u00fcber CloudWatch die Verwendung unserer API protokollieren. Dabei gibt es die M\u00f6glichkeit der Ausf\u00fchrungsprotokollierung. Hierbei verwaltet das API-Gateway die CloudWatch-Protokolle. Es k\u00f6nnen verschiedene Protokollgruppen erstellt werden, welche dann die verschiedenen Aufrufe, Abfragen und Antworten an den Protokollstrom melden. Zu den protokollierten Daten geh\u00f6ren beispielsweise Fehler.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-protokollgruppen\"><strong><em>Protokollgruppen<\/em><\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-16.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"383\" data-attachment-id=\"23546\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-16-5\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-16.png\" data-orig-size=\"1436,537\" 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=\"image-16\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-16-1024x383.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-16-1024x383.png\" alt=\"\" class=\"wp-image-23546\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-16-1024x383.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-16-300x112.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-16-768x287.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-16.png 1436w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-logs-der-methode-load_user_inputs\"><em>Logs der Methode load_user_inputs<\/em><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-17.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"325\" data-attachment-id=\"23547\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-17-5\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-17.png\" data-orig-size=\"1440,457\" 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=\"image-17\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-17-1024x325.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-17-1024x325.png\" alt=\"\" class=\"wp-image-23547\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-17-1024x325.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-17-300x95.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-17-768x244.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-17.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-testing\"><strong>Testing&nbsp;<\/strong><\/h2>\n\n\n\n<p>Beim Testing haben wir uns haupts\u00e4chlich auf das Testen der Lambda-Funktionen mit Unittests fokussiert. Daf\u00fcr haben wir die Bibliothek Moto benutzt, mit der man AWS Services mocken kann. Dadurch konnten wir in den Tests unsere Datenbank mocken und beispielsweise auch testen, ob beim Aufruf der Lambdas Datenbankeintr\u00e4ge richtig angelegt oder Daten richtig aktualisiert werden. Allgemein muss f\u00fcr das Mocken der Datenbank nur die Annotation @mock_dynamodb2 \u00fcber der Testklasse eingef\u00fcgt werden und anschlie\u00dfend kann in der setUp-Methode die Datenbank definiert werden, die f\u00fcr die Tests benutzt werden soll. Dadurch k\u00f6nnen auch Testdaten in die Datenbank eingef\u00fcgt werden, um bestimmte Testf\u00e4lle zu testen.<\/p>\n\n\n\n<p>Neben Moto haben wir die Bibliothek unittest.mock benutzt, mit der zum Beispiel das Senden einer Nachricht \u00fcber die Websocket-Verbindung gemockt werden kann, oder auch der Aufruf einer Lambda-Funktion. Zudem kann man mit Methoden wie assert_called() oder assert_called_with(\u2026) \u00fcberpr\u00fcfen, ob und mit welchen Argumenten die gemockte Methode aufgerufen wurde. Allgemein war dies bei unserem Projekt sehr hilfreich, da wir in fast jeder Lambda-Funktion Nachrichten \u00fcber die Websocket-Verbindung schicken und somit auch testen konnten, ob die richtigen Nachrichten geschickt werden.<\/p>\n\n\n\n<p>F\u00fcr manuelle Tests oder zum kurzen Testen von bestimmten Eingabewerten war auch die Seite <a href=\"https:\/\/www.piesocket.com\/websocket-tester\">https:\/\/www.piesocket.com\/websocket-tester<\/a> sehr hilfreich, da man dort die verschiedenen Lambda-Funktionen \u00fcber eine Websocket-Verbindung aufrufen kann.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-ci-cd-pipeline\"><strong>CI\/CD Pipeline&nbsp;<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-18.png\"><img loading=\"lazy\" decoding=\"async\" width=\"771\" height=\"234\" data-attachment-id=\"23548\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/29\/multiplayer-game-with-aws-stadtlandfluss\/image-18-5\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-18.png\" data-orig-size=\"771,234\" 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=\"image-18\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-18.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-18.png\" alt=\"\" class=\"wp-image-23548\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-18.png 771w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-18-300x91.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2022\/08\/image-18-768x233.png 768w\" sizes=\"auto, (max-width: 771px) 100vw, 771px\" \/><\/a><figcaption><em>CI\/CD Pipeline in GitLab auf dem master-Branch<\/em><br><\/figcaption><\/figure>\n\n\n\n<p>Um unsere Tests automatisiert ablaufen zu lassen und auch andere Schritte wie das Deployen der Lambda-Funktionen nicht immer manuell ausf\u00fchren zu m\u00fcssen, haben wir in GitLab eine CI\/CD Pipeline erstellt. Da wir alle vor diesem Projekt noch nie eine CI\/CD Pipeline angelegt hatten, konnten wir somit durch das Projekt auch Erfahrungen in diesem Bereich sammeln. Allgemein ist unsere Pipeline unterteilt in verschiedene Stages: In der Testing-Stage werden die Unittests f\u00fcr unsere Lambda-Funktionen ausgef\u00fchrt. In der Build-Stage werden die aktuellen Versionen der Lambda-Funktionen \u00fcber das serverless-Framework deployt und anschlie\u00dfend wird unsere Angular-Anwendung gebaut. Am Ende wird unsere Anwendung in der Deploy-Stage deployt, sodass sie danach \u00fcber eine \u00f6ffentliche Url verf\u00fcgbar ist. Je nachdem, auf welchen Branch ein Entwickler in unserem Repository pusht, werden unterschiedliche Jobs ausgef\u00fchrt. So werden zum Beispiel die Unittests auf jedem Branch ausgef\u00fchrt, das Deployen der Lambda-Funktionen jedoch nur beim Pushen auf den develop- oder master-Branch und das Deployen der Anwendung nur beim Pushen auf den master-Branch.<\/p>\n\n\n\n<p>Insgesamt gibt es in GitLab unter Settings -&gt; CI\/CD die M\u00f6glichkeit, Variablen anzulegen, die in der CI\/CD Pipeline benutzt werden. Wir haben daher in IAM (Identity and Access Management) bei AWS einen Benutzer f\u00fcr die Pipeline angelegt, der nur die Rechte hat, die in der Pipeline ben\u00f6tigt werden. Die Keys dieses Benutzers haben wir anschlie\u00dfend als Variablen in GitLab angelegt, sodass zum Beispiel das Deployen der Lambda-Funktionen in der Pipeline mit diesem Benutzer durchgef\u00fchrt werden kann.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-schwierigkeiten\"><strong>Schwierigkeiten&nbsp;<\/strong><\/h2>\n\n\n\n<p>W\u00e4hrend unserer Arbeit am Projekt sind uns einige Schwierigkeiten begegnet, die im Folgenden n\u00e4her beschrieben werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-datenstruktur\"><em>Datenstruktur<\/em><\/h3>\n\n\n\n<p>Wie bereits beschrieben hatte sich das Abfragen von Daten in der DynamoDB als sehr aufwendig und komplex dargestellt, auch wenn der Methodenaufruf an sich leicht zu verstehen und einfach ist. Durch die weiteren Verschachtelungen, die AWS zus\u00e4tzlich zu unserer bereits komplexen Datenstruktur hinzugef\u00fcgt hat, wurde das Abfragen von Daten schwieriger dargestellt, als es eigentlich ist und auch der Code, den wir daf\u00fcr geschrieben haben, wurde durch dieses sehr unleserlich. Dadurch kam es in unserer Gruppe oft zu Fehlern bei den Abfragen, da der Fehler nicht direkt erkannt wurde und die endg\u00fcltige Datenstruktur in der Datenbank f\u00fcr unsere Gruppe unklar wurde.&nbsp;<\/p>\n\n\n\n<p>Wir haben diesbez\u00fcglich, auch nachdem wir die Struktur festgelegt hatten, mehrmals gelesen, dass DynamoDB f\u00fcr komplexe Datenstrukturen und Interaktionen (auch das Updaten von Daten) schlichtweg nicht geeignet ist. Dennoch haben wir es dabei belassen, da wir bereits im Projekt weit fortgeschritten waren und keine Zeit mehr hatten, eine Alternative zu finden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-deployen-von-lambdas\"><em>Deployen von Lambdas<\/em><\/h3>\n\n\n\n<p>Damit die Lambdas, die wir in der serverless.yaml definiert und in den jeweiligen Handler-Dateien implementiert hatten, in unserer Anwendung aufgerufen werden konnten, war es n\u00f6tig, den Befehl \u201eserverless deploy\u201c aufzurufen, der alle definierten Lambdas in den Handler-Dateien deployed. Das Problem war, dass dadurch bestehende Funktionen, an denen andere Gruppenmitglieder arbeiteten, anschlie\u00dfend \u00fcberschrieben wurden, was das Arbeiten sehr behinderte, wenn man an dem Projekt gleichzeitig arbeitete.<\/p>\n\n\n\n<p>Um diese Situation weitestgehend zu verhindern, haben wir beschlossen, die Methoden auf dem Development Branch allesamt mit dem Befehl \u201eserverless deploy\u201c zu deployen. Anschlie\u00dfend wird auf unterschiedlichen Branches gearbeitet und anschlie\u00dfend nur die Funktion, an der man gerade arbeitet, mit dem Befehl \u201eserverless deploy function \u2013function [Name der Funktion]\u201c deployed. Dieses hat nur teilweise funktioniert, da das Deployen einer einzigen Funktion nur m\u00f6glich war, wenn diese bereits existiert, also durch \u201eServerless deploy\u201c deployed wurde.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-resumee\"><strong>Fazit<\/strong><\/h2>\n\n\n\n<p>Alles in allem haben wir durch das Projekt einen Einblick in die M\u00f6glichkeiten von Cloud Computing bekommen und konnten verschiedene Dinge in diesem Bereich ausprobieren. Wir konnten vor allem Erfahrungen mit AWS Lambda, API Gateway und dem serverless Framework sammeln, da dies der Schwerpunkt unseres Projektes war. Zudem haben wir einige grundlegende Dinge gelernt, zum Beispiel dass es sinnvoll ist, schon fr\u00fch im Projekt eine CI\/CD Pipeline aufzubauen oder auch CloudWatch zu aktivieren, um Fehler in den Lambda Funktionen schneller zu erkennen und beheben zu k\u00f6nnen.<\/p>\n\n\n\n<p>Allgemein haben wir durch das Projekt auch gelernt, dass es sehr wichtig ist, sich am Anfang Gedanken zu Themen wie Security oder auch dem generellen Aufbau des Projektes zu machen. Aus Zeitgr\u00fcnden verfolgt man sonst oft die am schnellsten funktionierende L\u00f6sung und kann dann sp\u00e4ter nur mit viel Aufwand grundlegende Dinge \u00e4ndern. F\u00fcr das n\u00e4chste Projekt w\u00fcrden wir daher mehr Zeit f\u00fcr die Einarbeitung und Recherche einplanen, um dies zu vermeiden. Bei unserem Projekt w\u00e4re es vor allem sinnvoll gewesen, schon von Beginn an die verschiedenen Umgebungen einzurichten, sodass alle Entwickler lokal unabh\u00e4ngig voneinander entwickeln und testen k\u00f6nnen und man auf der Entwicklungsumgebung \u00c4nderungen durchf\u00fchren kann, ohne die Produktivumgebung zu beeinflussen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 Vorlesung Ziel der Vorlesung \u201cSoftware Development for Cloud Computing\u201d ist es, aktuelle Cloud Technologien kennen zu lernen und diese im Rahmen von \u00dcbungen und kleinen Projekten anzuwenden. Unser Team hat [&hellip;]<\/p>\n","protected":false},"author":1098,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,120,396,649,650,22,223],"tags":[544,84,7,533,74,285,202,575],"ppma_author":[877],"class_list":["post-23517","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-cloud-technologies","category-games","category-interactive-media","category-scalable-systems","category-student-projects","category-ultra-large-scale-systems","tag-angular","tag-aws","tag-cloud","tag-cloud-computing-2","tag-games","tag-python","tag-serverless","tag-websocket"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":23679,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/08\/31\/jobsuche-portal\/","url_meta":{"origin":23517,"position":0},"title":"Jobsuche Portal","author":"ag164","date":"31. August 2022","format":false,"excerpt":"SS22 - Dev4Cloud Projekt - von Robin H\u00e4rle und Anton Gerdts Ideenfindung \u00a0\u00a0\u00a0 Zu Beginn der Ideenfindungsphase f\u00fcr unser Projekt sahen wir uns die verschiedenen Apis auf Bund.dev an, um uns von der Thematik der verf\u00fcgbaren Daten inspirieren zu lassen. Wir entschieden uns ohne lange abzuw\u00e4gen daf\u00fcr ein Jobsuche-Portal mit\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":"","width":0,"height":0},"classes":[]},{"id":7396,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/31\/multiplayer-typescript-application-deploy-on-aws-services\/","url_meta":{"origin":23517,"position":1},"title":"Multiplayer TypeScript Application run on AWS Services","author":"bj009","date":"31. August 2019","format":false,"excerpt":"Daniel Knizia - dk100@hdm-stuttgart.deBenjamin Janzen - bj009@hdm-stuttgart.de The project CatchMe is a location-based multiplayer game for mobile devices. The idea stems from the classic board game Scotland Yard, basically a modern version of hide & seek. You play in a group with up to 5 players outside, where on of\u2026","rel":"","context":"In &quot;Cloud Technologies&quot;","block_context":{"text":"Cloud Technologies","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/scalable-systems\/cloud-technologies\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/variables.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/variables.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/variables.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/variables.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":21693,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2021\/09\/20\/recall-trainer-eine-serverless-web-app-mit-aws\/","url_meta":{"origin":23517,"position":2},"title":"Recall Trainer &#8211;  Eine serverless Web-App mit AWS","author":"lr066","date":"20. September 2021","format":false,"excerpt":"Einleitung Im Rahmen der Vorlesung \u201cSoftware Development for Cloud Computing\u201d habe ich im vergangenen Semester eine Einf\u00fchrung in die Welt des Cloud Computings incl. der relevanten Konzepte und Technologien erhalten. Einige dieser Konzepte habe ich versucht in meinem Abschlussprojekt umzusetzen, das ich im Nachfolgenden vorstellen m\u00f6chte.\u00a0 Idee\/Projekt Die Idee war\u2026","rel":"","context":"In &quot;Cloud Technologies&quot;","block_context":{"text":"Cloud Technologies","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/scalable-systems\/cloud-technologies\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/signup1-150x150.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/signup1-150x150.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/signup1-150x150.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/signup1-150x150.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/signup1-150x150.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/signup1-150x150.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":24051,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/02\/27\/fog-computing-solving-the-limitations-of-cloud-and-edge-computing\/","url_meta":{"origin":23517,"position":3},"title":"Fog Computing: Solving the limitations of Cloud and Edge Computing","author":"Andreas Nicklaus","date":"27. February 2023","format":false,"excerpt":"Fog computing offers a compromise between cloud and edge computing for real-time, scalable data analysis. Ideal for regional applications and IoT. However, authentication and privacy issues must be addressed.","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\/08\/edge-computing-diagram-1024x512.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/08\/edge-computing-diagram-1024x512.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/08\/edge-computing-diagram-1024x512.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2023\/08\/edge-computing-diagram-1024x512.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":24246,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/02\/27\/how-edge-computing-is-moving-the-cloud-closer-to-the-user\/","url_meta":{"origin":23517,"position":4},"title":"How Edge Computing is moving the Cloud closer to the User","author":"Nikolai Thees","date":"27. February 2023","format":false,"excerpt":"Did you know clouds have sharp edges? What is Edge Computing? Let\u2019s say you want to deploy a web application. In order to serve your app to your users, you need a server on which you can run your application.Traditionally, you had the option to either buy and run the\u2026","rel":"","context":"In &quot;Cloud Technologies&quot;","block_context":{"text":"Cloud Technologies","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/scalable-systems\/cloud-technologies\/"},"img":{"alt_text":"","src":"https:\/\/lh4.googleusercontent.com\/uCYgoQ2o7ueAQYKEvAup43hsF7rDPIyBl5Uh-qMTzmOU5mozruJsWI_kp_BTfpjhMkcrhbEzHoZvBthhNk9GrF9KE3Oxd73nnOJ2YZsIZt66xSEJghrtdVd00YeozgM6k-ACpmcCHexjQ8VLo6EC-QM","width":350,"height":200},"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":23517,"position":5},"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":[]}],"jetpack_sharing_enabled":true,"authors":[{"term_id":877,"user_id":1098,"is_guest":0,"slug":"gi004","display_name":"gi004","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/b00923bf54321d2dba95f5441314fdb8246f50f15dba43ee74bd86a83a65de7d?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\/23517","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\/1098"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/comments?post=23517"}],"version-history":[{"count":27,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/23517\/revisions"}],"predecessor-version":[{"id":23687,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/23517\/revisions\/23687"}],"wp:attachment":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/media?parent=23517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/categories?post=23517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/tags?post=23517"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/ppma_author?post=23517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}