{"id":12087,"date":"2020-09-30T22:52:38","date_gmt":"2020-09-30T20:52:38","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=12087"},"modified":"2023-06-18T18:08:36","modified_gmt":"2023-06-18T16:08:36","slug":"getting-started-with-cloud-computing-a-covid-19-data-map","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/","title":{"rendered":"Getting Started with Cloud Computing &#8211; A COVID-19 Data Map"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">1. Abstract<\/h2>\n\n\n\n<p>Are you searching for country-specific, up-to-date numbers and rates for the global pandemic caused by COVID-19? Well, then I got some bad news for you. You won\u2019t find any in this blog post\u2026 not directly anyway. If you are looking for in-depth information about public APIs, location-based data visualization or cloud-based Node.js web applications on the other hand, I might just be the right guy to help you out.<\/p>\n\n\n\n<p>After reading this post you will not only have detailed information about the previously mentioned topics, but you will also learn about the challenges and problems I had to face working on this project and what to look out for, when starting a web application from scratch all by yourself.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Introduction<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12102\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/tempsnip\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/tempsnip.png\" data-orig-size=\"1911,1085\" 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=\"tempsnip\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/tempsnip-1024x581.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/tempsnip-1024x581.png\" alt=\"\" class=\"wp-image-12102\" width=\"847\" height=\"480\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/tempsnip-1024x581.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/tempsnip-300x170.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/tempsnip-768x436.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/tempsnip-1536x872.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/tempsnip.png 1911w\" sizes=\"auto, (max-width: 847px) 100vw, 847px\" \/><figcaption>Final product<\/figcaption><\/figure>\n\n\n\n<p>This project is the result of the examination that is part of the lecture \u201cSoftware Development for Cloud Computing\u201d. The focus of this lecture is to learn about modern cloud computing technologies and cloud services like AWS, Microsoft Azure and IBM Cloud, how to create and develop software using these technologies as well as creating a cloud-based project from scratch.<\/p>\n\n\n\n<p>At first, I wasn\u2019t quite sure what I was going to work on, but I really wanted to work on a web application that uses location-based data in the form of a map to visualize something else. This \u201csomething\u201d was yet to be determined when I started brainstorming for my project, so I started to do some research. I then bumped into this <a href=\"https:\/\/github.com\/public-apis\/public-apis\" target=\"_blank\" rel=\"noreferrer noopener\">collection<\/a> of free and public APIs which was perfect for my undertaking and I was almost set on creating a weather app, when I found a free API that would provide me with global data all around the Coronavirus.<\/p>\n\n\n\n<p>Now that I knew what I was going to visualize I came up with a personal scope for this project. I decided to create a web application that would deliver COVID-19data for a specific country by either hovering or clicking on this country, as well as a search function, so that the user could jump to a country of choice by entering the name of a city or a country. Since I had only very limited knowledge about web applications and cloud computing as such (I have worked bits and pieces with Microsoft Azure during my 6-months internship at Daimler before, but never really worked with Node.js or a map library) I did some research first, but I was very confident that I could reach this goal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. More Research<\/h2>\n\n\n\n<p>Now that I determined what I was planning on doing, I had to figure out which tools and cloud technologies I was going to use. Since I already had a little experience with Microsoft Azure it seemed obvious to settle with Azure and the Azure Maps Service for my project. But there were a couple problems with that:<\/p>\n\n\n\n<p><strong>Problem 1:<\/strong> In order to create a private Azure Account, even an education account, one has to provide a credit card, which I do not own.<\/p>\n\n\n\n<p><strong>Problem 2: <\/strong>There is no map material in Azure Maps for the regions China and South Korea. Now that isn\u2019t technically a k.o. criteria, but I would prefer to use a service that supports all regions to avoid limitations.<\/p>\n\n\n\n<p><strong>Problem 3:<\/strong> Again, this isn\u2019t a huge problem, but I would rather learn something new and not go with something I already had prior experience in.<\/p>\n\n\n\n<p>So I decided to go with <a href=\"https:\/\/aws.amazon.com\/de\/\" target=\"_blank\" rel=\"noreferrer noopener\">AWS<\/a>, Amazon\u2019s Cloud Service instead. Even though in retrospect the documentation for AWS is not as good as for Microsoft Azure (at least in my personal opinion), AWS offers a wide range of services and on top of that you can create a free education account with 100$ worth of credits. Unfortunately AWS does not have a location data service from what I could figure out, so I had to decide on an external service.<\/p>\n\n\n\n<p>For map data services I decided to go with Mapbox. Mapbox GL JS is an open-source JavaScript library that uses WebGL to render interactive maps for websites and mobile apps. The advantage Mapbox has over Azure Maps is that it offers all the services I require for my project for free and also covers every region without restriction. Upon creating a free account, a user gets a subscription-key that grants access to all Mapbox services, including Mapbox Studio and the Mapbox Geocoder API which I will get into more detail later on.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. But how do I get access to data from the internet?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"259\" data-attachment-id=\"12095\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/api-flowcart\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Application-Programming-Interface-API-Explained-2-1.jpg\" data-orig-size=\"2073,525\" 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;API flowcart&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"API flowcart\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Application-Programming-Interface-API-Explained-2-1-1024x259.jpg\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Application-Programming-Interface-API-Explained-2-1-1024x259.jpg\" alt=\"\" class=\"wp-image-12095\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Application-Programming-Interface-API-Explained-2-1-1024x259.jpg 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Application-Programming-Interface-API-Explained-2-1-300x76.jpg 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Application-Programming-Interface-API-Explained-2-1-768x195.jpg 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Application-Programming-Interface-API-Explained-2-1-1536x389.jpg 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Application-Programming-Interface-API-Explained-2-1-2048x519.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>https:\/\/www.wrike.com\/de\/blog\/programmierschnittstelle-api-erklaert\/<\/figcaption><\/figure>\n\n\n\n<p>As I mentioned earlier, I stumbled upon a public Web API called <a href=\"https:\/\/covid19api.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">covid19api<\/a>, which offers all sorts of corona-related, up-to-date data for free. In the abstract I promised in-depth information about public APIs, so I might as well lose a couple words about the functionality of <strong>A<\/strong>pplication <strong>P<\/strong>rogramming <strong>I<\/strong>nterfaces while we\u2019re at it. An API is a software-to-software interface, not a user-to-software interface. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"279\" data-attachment-id=\"12106\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/request2\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Request2.png\" data-orig-size=\"936,279\" 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=\"Request2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Request2.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Request2.png\" alt=\"\" class=\"wp-image-12106\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Request2.png 936w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Request2-300x89.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Request2-768x229.png 768w\" sizes=\"auto, (max-width: 936px) 100vw, 936px\" \/><figcaption>HTTP-Request for COVID-19 data for Germany between the 20.09 and 21.09<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"615\" height=\"806\" data-attachment-id=\"12107\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/response-1\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Response-1.png\" data-orig-size=\"615,806\" 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=\"Response-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Response-1.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Response-1.png\" alt=\"\" class=\"wp-image-12107\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Response-1.png 615w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Response-1-229x300.png 229w\" sizes=\"auto, (max-width: 615px) 100vw, 615px\" \/><figcaption>Response to the HTTP-Request above<\/figcaption><\/figure>\n\n\n\n<p>A good metaphor to understand the concept of APIs would be to think of it as a waiter in a restaurant. The waiter(API) takes an order (HTTP-Request) from a guest(user) and delivers it to the kitchen(backend-system) where the order is acknowledged and prepared. When everything is ready the waiter(API) serves the food(HTTP-Response) to the guest(user). Some companies publish their APIs to the public, so that programmers can use their service to create different products. While some companies provide their APIs for free, others do so against a subscription fee. In the case of the COVID-19-API there is a free tier as well as a 10$, 30$ and 100$ subscription option. By subscribing, the user has access to additional data routes and no request-rate limit, the latter led me to subscribing, because I require several requests per second with my application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Architecture<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12092\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/graph-visual\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Graph-Visual.png\" data-orig-size=\"1393,805\" 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=\"Graph-Visual\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Graph-Visual-1024x592.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Graph-Visual-1024x592.png\" alt=\"\" class=\"wp-image-12092\" width=\"648\" height=\"374\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Graph-Visual-1024x592.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Graph-Visual-300x173.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Graph-Visual-768x444.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Graph-Visual.png 1393w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><figcaption>Basic architecture of my web application hosted in AWS<\/figcaption><\/figure>\n\n\n\n<p>Let\u2019s take a step back and focus more on which solution I came up with for my project. The architecture of my web application is pretty straight forward. Clients can access a frontend via their browser. If a client hovers over, clicks on or searches for a country, a HTTP-Request is sent to the backend server which then evaluates that request and sends another HTTP-Request to either the COVID-19-API or the Mapbox-Search-API depending on what the client requested. Upon receiving a HTTP-response from either one of the APIs backend systems, my backend server evaluates the data for the respective user request and sends it back to the frontend where it is then visualized. I will go a little more in-depth about these topics later on, but first I want to explain why having a separate frontend and backend makes sense.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Pros for having a separate front and backend:<\/h4>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<ol class=\"wp-block-list\"><li>It\u2019s far easier to distinguish between a frontend or backend issue, in case of a bug<\/li><li>Possibility to upgrade either one without touching the other as they run on different instances (modularity)<\/li><li>Allows use of different languages for front- and backend without problem<\/li><li>Two developers could work on each end individually without causing deployment conflicts, etc.<\/li><li>Adds security, because the server is not tightly bound to the client<\/li><li>Adds level of abstraction to the application<\/li><\/ol>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Cons for having a seperate front and backend:<\/h4>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<ol class=\"wp-block-list\"><li>Have to pay two cloud instances instead of just one<\/li><li>Independent testing, building and deployment strategies required<\/li><li>Can\u2019t use templating languages anymore, instead the backend is basically an API for the frontend<\/li><\/ol>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">6. Frontend<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12096\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/diagramm1v1\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Diagramm1v1.png\" data-orig-size=\"822,422\" 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=\"Diagramm1v1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Diagramm1v1.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Diagramm1v1.png\" alt=\"\" class=\"wp-image-12096\" width=\"580\" height=\"297\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Diagramm1v1.png 822w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Diagramm1v1-300x154.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Diagramm1v1-768x394.png 768w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption>More detailed architecture for the frontend of my application (Note: the Node Server is not part of the frontend, it just receives requests)<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"582\" height=\"159\" data-attachment-id=\"12104\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/implemantation\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/implemantation.png\" data-orig-size=\"582,159\" 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=\"implemantation\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/implemantation.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/implemantation.png\" alt=\"\" class=\"wp-image-12104\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/implemantation.png 582w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/implemantation-300x82.png 300w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" \/><figcaption>How to implement mapbox to your HTML-website<\/figcaption><\/figure>\n\n\n\n<p>The frontend of my application consists of a static HTML-website that is hosted on an AWS EC2 Linux instance. The EC2 instance gets its data from an S3 bucket that is also hosted in AWS and contains up-to-date code for the website. The implementation of Mapbox is very straight forward. All you have to do is implement the <a href=\"https:\/\/www.mapbox.com\/install\/js\/cdn-install\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mapbox CDN(Content Delivery Network)<\/a> into the head and include the above shown code with a valid access token into the body of your HTML. The \u201cstyle\u201d tag allows the user to select from different map styles, such as streets, satellite, etc. Users can create custom map styles, tilesets and datasets using <a href=\"https:\/\/studio.mapbox.com\" target=\"_blank\" rel=\"noreferrer noopener\">Mapbox Studio<\/a>. The big benefit of this is that the user does not have to store and load the data manually from the server. Instead a user can simply upload a style\/tileset\/dataset to Mapbox Studio and access it from the HTML by creating a new data source with the respective url for the style\/tileset\/dataset.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"356\" data-attachment-id=\"12089\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/grafik-6\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/grafik-6.png\" data-orig-size=\"760,356\" 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=\"grafik-6\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/grafik-6.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/grafik-6.png\" alt=\"\" class=\"wp-image-12089\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/grafik-6.png 760w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/grafik-6-300x141.png 300w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><figcaption>Tileset made from GeoJSON in Mapbox Studio<\/figcaption><\/figure>\n\n\n\n<p>In my case I created a custom tileset from a GeoJSON file of every country in the world. You can find geographical GeoJSON data for free online, I personally found <a href=\"https:\/\/geojson-maps.ash.ms\/\" target=\"_blank\" rel=\"noreferrer noopener\">this<\/a> handy web tool that lets the user create a fairly accurate GeoJSON from countries of choice. But I encountered a problem by doing so. Even though I had fairly accurate geographical data for each country, the COVID-19-API does not support every single country. By sending a request&nbsp; to the COVID-19-API I got a list of all supported countries with their respective country-slug and ISO2 country code. Since those country codes are unique I wrote a basic algorithm that would craft a custom GeoJSON from all matching country codes of both the GeoJSON and the country JSON response. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"646\" data-attachment-id=\"12093\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/countries\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/countries.png\" data-orig-size=\"596,646\" 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=\"countries\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/countries.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/countries.png\" alt=\"\" class=\"wp-image-12093\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/countries.png 596w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/countries-277x300.png 277w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><figcaption>How to get list of supported countries from COVID-19-API<\/figcaption><\/figure>\n\n\n\n<p>Unfortunately not everything was that easy, because for some reason not every Object in the GeoJSON had a valid ISO2 code. So I had to manually go through all countries of both files and figure out which ones are missing, which was a real pain in the backside. Eventually I had a simple GeoJSON with a FeatureCollection containing a name, a unique slug, a ISO2 code and a geometry for each country, which I then uploaded to Mapbox Studio as a custom tileset.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"411\" height=\"361\" data-attachment-id=\"12090\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/addlayer\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/AddLayer.png\" data-orig-size=\"411,361\" 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=\"AddLayer\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/AddLayer.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/AddLayer.png\" alt=\"\" class=\"wp-image-12090\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/AddLayer.png 411w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/AddLayer-300x264.png 300w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><figcaption>How to implement and visualize Mapbox Studio tileset in frontend JavaScript<\/figcaption><\/figure><\/div>\n\n\n\n<p>Now that my tileset was uploaded to Mapbox studio, I was able to create a data source and a style layer from it. This allowed me to customize the appearance of the tileset\u2019s polygons to my liking. By using Mapbox\u2019s <code class=\"\" data-line=\"\">map.on()<\/code> function, I could add hover and click events for when the client hovers or clicks over a country and retrieve information from the tileset for this specific country(feature). In my case I get the slug for the country the user has clicked or is currently hovering on and start a HTTP-Request to the backend server with this information and the current and previous date. Hovering will return a basic COVID-19data for a country, while clicking will return premium data.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">6.1 COVID-19 Data Request (Frontend)<\/h4>\n\n\n\n<p>The request is sent using the <code class=\"\" data-line=\"\">fetch <\/code>method, which is a JavaScript interface. The body of the POST-request contains the country slug for the country you want to get COVID-19data for, the current date and the date of the day before. This information is needed for the backend request from the COVID-19-API in order to get the latest corona-related data.<\/p>\n\n\n\n<p>After receiving a response from my backend in the form of a JSON object, the data is added to an empty &lt;ul&gt; object in the HTML where it is then visible to the client.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12101\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/search\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Search.png\" data-orig-size=\"1578,740\" 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=\"Search\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Search-1024x480.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Search-1024x480.png\" alt=\"\" class=\"wp-image-12101\" width=\"760\" height=\"355\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Search-1024x480.png 1024w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Search-300x141.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Search-768x360.png 768w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Search-1536x720.png 1536w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/Search.png 1578w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><figcaption>Client searched for Berlin and Mapbox flew to the exact location<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">6.2 Search Request (Frontend)<\/h4>\n\n\n\n<p>The search function works very similar to the previous description on how the COVID-19 data is requested, but instead of sending dates and a country slug from the tileset, we send a query. This query is the text that the client enters into the search bar. Upon starting a search, a <code class=\"\" data-line=\"\">fetch <\/code>POST-request is sent to the backend containing the query in its body. After receiving a response from the backend which contains information about the first point of interest the Mapbox geocoder could find, we jump to the location of the POI, as long as it was a valid query. This \u201cjump\u201d is handled from the Mapbox <code class=\"\" data-line=\"\">fitBounds() <\/code>function which tries to fit a POIs bounding box perfectly on the user\u2019s screen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Backend<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"851\" height=\"500\" data-attachment-id=\"12097\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/diagramm2v2\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/diagramm2v2.png\" data-orig-size=\"851,500\" 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=\"diagramm2v2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/diagramm2v2.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/diagramm2v2.png\" alt=\"\" class=\"wp-image-12097\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/diagramm2v2.png 851w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/diagramm2v2-300x176.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/diagramm2v2-768x451.png 768w\" sizes=\"auto, (max-width: 851px) 100vw, 851px\" \/><figcaption>More detailed architecture for the backend of my application (Note: the Amazon EC2 instance is not part of the backend, it just sends requests)<\/figcaption><\/figure>\n\n\n\n<p>The backend consists of a single Node.js express server that is hosted in an Elastic Beanstalk instance on AWS. I also added a CI\/CD Code Pipeline from AWS that connects the instance to a GitHub repository so I have continuous updates. Since I decided on separating my frontend and backend, the backend server behaves much more like an API system for my frontend.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">7.1 COVID-19 Data Request (Backend)<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12099\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/request-backend\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/request-backend.png\" data-orig-size=\"643,150\" 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=\"request-backend\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/request-backend.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/request-backend.png\" alt=\"\" class=\"wp-image-12099\" width=\"604\" height=\"141\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/request-backend.png 643w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/request-backend-300x70.png 300w\" sizes=\"auto, (max-width: 604px) 100vw, 604px\" \/><figcaption>Express route for basic COVID-19 data<\/figcaption><\/figure>\n\n\n\n<p>Whenever a HTTP-Request for one of the corona-related server routes happens, the server passes the request body to a function and executes this function. Upon execution, the backend sends another HTTP-Request to the COVID-19-API with the country slug, the current and previous date as parameters and the API access token as header. This request is being sent using the request-promise npm dependency.<\/p>\n\n\n\n<p>The COVID-19-API\u2019s response contains specific, corona-related data for the requested country. This data has to be evaluated and adapted, to make sure the backend only responds with data that is needed and correctly formatted. This is necessary, because otherwise larger Integer numbers are difficult to read without a dot every 3 numbers. After evaluation the data will then be sent back to the frontend where it is then displayed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12100\" data-permalink=\"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/30\/getting-started-with-cloud-computing-a-covid-19-data-map\/request-backend2\/\" data-orig-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/request-backend2.png\" data-orig-size=\"969,305\" 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=\"request-backend2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/request-backend2.png\" src=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/request-backend2.png\" alt=\"\" class=\"wp-image-12100\" width=\"762\" height=\"239\" srcset=\"https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/request-backend2.png 969w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/request-backend2-300x94.png 300w, https:\/\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2020\/09\/request-backend2-768x242.png 768w\" sizes=\"auto, (max-width: 762px) 100vw, 762px\" \/><figcaption>Backend function that sends a request to the COVID-19-API with respective parameters. (Note: the use of async and await make sure the response is not empty)<\/figcaption><\/figure>\n\n\n\n<p>A problem that I stumbled upon while working on the backend was that the requested data was only usable within the scope of the callback function. In order to fix that issue and prevent an empty string from being sent to the frontend as a response, I had to learn about promises (async and await). Let\u2019s go back to the restaurant example, shall we? If you create a function in JavaScript it is synchronous by default. That means a waiter would take an order from a table(client) and gives it to the kitchen. If the system was synchronous, the waiter would wait in the kitchen(server) for the chef to be done preparing the order and not serve any other tables in the meantime. He will not serve another table until he brings the finished food to the table which has ordered. As you can see, this would be very inefficient, which is why asynchronous exists. The exact same scenario would work as followed if it was asynchronous: The waiter would take an order and give it to the kitchen, but instead of waiting in the kitchen he would start serving other tables and bring the finished food as it is ready to be served. In the case of my application it is important that I handle requests asynchronously, because there are multiple requests per second when a client hovers over many countries in a short period of time. And that is where the JavaScript keywords async and wait come into play. Async defines that a function is asynchronous and await can be used in the scope of an async function to make sure to wait until a HTTP-request is finished and the response has arrived. This makes sure that the COVID-19-API\u2019s response and not an empty body will be sent to the frontend.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">7.2 Search Request (Backend)<\/h4>\n\n\n\n<p>If there is a HTTP-Request for a query search, the server simply starts a request to the Mapbox Geocoding API with the request body\u2019s query and the Mapbox access token as parameter. The result will be a list of POIs that fit the query, but for the sake of simplicity the server always sends the very first result back to the frontend.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Other Challenges<\/h2>\n\n\n\n<p>Another challenge that occured during my work on the project was that I sometimes struggled finding a solution for a problem, because documentation for an API or a service wasn\u2019t clear or simply not existing. Sometimes it would take multiple hours reading up on documentation and community contribution, just to figure out that a single line of code would fix the problem. The biggest issues I probably had with the AWS and COVID-19-API documentation. While I could fix the issues I had with AWS by following YouTube and StackOverflow tutorials, there wasn\u2019t really such a thing for the COVID-19-API. I then joined the official slack server for the API and reached out to the creator and developer who was very supportive and helpful.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. Conclusion<\/h2>\n\n\n\n<p>Cloud computing is versatile and complex. During my time working on the project I got a far better understanding about web applications, APIs and cloud computing as such. I got more confident in working with JavaScript as a frontend and backend language and made my first steps into the world of web and cloud development. I learned a lot about location-based data and server architecture as well as how to do research on these topics. When I look back on what I achieved with this project, I am very happy with the <a href=\"http:\/\/ec2-54-162-30-152.compute-1.amazonaws.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">result<\/a>. I managed to reach all the goals I set for yourself. I\u2019m also happy that I decided to go with AWS over Azure for this project, because I got to work with a new cloud environment. For my next cloud-based web application I probably will go back to Azure though or try a new cloud service, as I am not a big fan of the AWS documentation and management console.<\/p>\n\n\n\n<p>But now it is up to you what you do with this information. Are about to close your browser in disappointment after not learning about the latest Coronavirus numbers or are you going to work on your own cloud-based web application tomorrow? No matter how you decide, I hope you learned something from reading this blog post that will help you on your journey to become a cloud developer.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-text-align-right has-medium-font-size\">Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Abstract Are you searching for country-specific, up-to-date numbers and rates for the global pandemic caused by COVID-19? Well, then I got some bad news for you. You won\u2019t find any in this blog post\u2026 not directly anyway. If you are looking for in-depth information about public APIs, location-based data visualization or cloud-based Node.js web [&hellip;]<\/p>\n","protected":false},"author":983,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[120,650,22],"tags":[],"ppma_author":[835],"class_list":["post-12087","post","type-post","status-publish","format-standard","hentry","category-cloud-technologies","category-scalable-systems","category-student-projects"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":11460,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2020\/09\/29\/get-car-location-using-raspberrypi-and-google-cloud-iot-core\/","url_meta":{"origin":12087,"position":0},"title":"Get car location using Raspberry Pi and Google Cloud IoT Core","author":"Simon L\u00f6bert","date":"29. September 2020","format":false,"excerpt":"Project idea Have you ever been in the situation, that you parked your car somewhere in the city and some hours later, you couldn't remember where you parked it? You may wish to have an application on your smartphone, which is able to locate your car. From this consideration, the\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\/2020\/09\/grafik.png?resize=350%2C200&ssl=1","width":350,"height":200},"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":12087,"position":1},"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":12087,"position":2},"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":7141,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/29\/2-player-connect-4-in-the-cloud\/","url_meta":{"origin":12087,"position":3},"title":"2 player Connect 4 in the cloud","author":"cf056","date":"29. August 2019","format":false,"excerpt":"Play Connect 4 here Annika Strau\u00df - as324Julia Grimm - jg120Rebecca Westh\u00e4u\u00dfer - rw044Daniel Fearn - cf056 Introduction As a group of four students with little to no knowledge of cloud computing our main goal was to come up with a simple project which would allow us to learn about\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\/architecture.jpeg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/architecture.jpeg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/architecture.jpeg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/architecture.jpeg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":7032,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2019\/08\/04\/how-to-create-and-integrate-a-customised-classifier-based-on-ibm-visual-recognition\/","url_meta":{"origin":12087,"position":4},"title":"How to create and integrate a customised classifier based on IBM Visual Recognition","author":"lb092","date":"4. August 2019","format":false,"excerpt":"Helga Schwaighofer \u2013 hs082 Celine Wichmann \u2013 cw089 Lea Baumg\u00e4rtner \u2013 lb092 Motivation Imagine you are having a bad day, but you don\u2019t know what to do. Your friends are not available, but you\u2019d like to have advice depending on your mood. For that case, we created the Supporting Shellfish!\u2026","rel":"","context":"In &quot;Artificial Intelligence&quot;","block_context":{"text":"Artificial Intelligence","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/artificial-intelligence\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Image1-150x150.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\/Image1-150x150.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Image1-150x150.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Image1-150x150.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Image1-150x150.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2019\/08\/Image1-150x150.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":3057,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2017\/09\/04\/cloud-security-part-1-a-current-market-overview-and-the-concepts-and-technologies-of-the-cloud\/","url_meta":{"origin":12087,"position":5},"title":"Cloud Security \u2013 Part 1: A current market overview and the concepts and technologies of the cloud","author":"Andreas Fliehr","date":"4. September 2017","format":false,"excerpt":"The first of two blog posts, that are dealing with the latest developments in cloud security. This post covers a current market overview of cloud computing and the concepts and technologies used in the cloud.","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\/2017\/09\/Shared-kernel-vs.-specialised-kernels.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/09\/Shared-kernel-vs.-specialised-kernels.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/09\/Shared-kernel-vs.-specialised-kernels.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/09\/Shared-kernel-vs.-specialised-kernels.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"authors":[{"term_id":835,"user_id":983,"is_guest":0,"slug":"marvin-max_kalchschmidt","display_name":"mk306","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/03f6c135d836036efd38e5ade3e78f23c054919191c9bded402baeaaa7b4c8cd?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\/12087","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\/983"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/comments?post=12087"}],"version-history":[{"count":2,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/12087\/revisions"}],"predecessor-version":[{"id":12109,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/12087\/revisions\/12109"}],"wp:attachment":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/media?parent=12087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/categories?post=12087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/tags?post=12087"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/ppma_author?post=12087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}