<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tech-Stack Archive | INOTEQ GmbH</title>
	<atom:link href="https://www.inoteq.com/tag/tech-stack/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.inoteq.com/tag/tech-stack/</link>
	<description>IT Unternehmensberatung, Software Entwicklung, IT Infrastruktur aus Karlsruhe</description>
	<lastBuildDate>Wed, 14 Feb 2024 20:56:25 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.4.5</generator>

<image>
	<url>https://www.inoteq.com/wp-content/uploads/2019/12/cropped-Inoteq_Logo_trans_icon-1-32x32.png</url>
	<title>Tech-Stack Archive | INOTEQ GmbH</title>
	<link>https://www.inoteq.com/tag/tech-stack/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Skalierbare und moderne Web-Frontends mit Angular</title>
		<link>https://www.inoteq.com/2021/06/18/skalierbare-angular-frontends/</link>
					<comments>https://www.inoteq.com/2021/06/18/skalierbare-angular-frontends/#respond</comments>
		
		<dc:creator><![CDATA[Steffen Seeger]]></dc:creator>
		<pubDate>Fri, 18 Jun 2021 08:21:10 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[TechStack]]></category>
		<category><![CDATA[Tech-Stack]]></category>
		<guid isPermaLink="false">https://www.inoteq.com/?p=1611</guid>

					<description><![CDATA[<p>Nachdem wir für unsere Anwendung das Backend implementiert haben, widmet sich dieser Artikel der Erstellung eines Frontends. Hierzu verwenden wir das Framework Angular und erstellen eine Single-Page Application &#8211; SPA. Eine Single-Page Application wird wie eine klassische Website von einem Server ausgeliefert. Dabei wird jedoch nicht nur eine Seite ausgeliefert, sondern die komplette Anwendung, welche [&#8230;]</p>
<p>Der Beitrag <a href="https://www.inoteq.com/2021/06/18/skalierbare-angular-frontends/">Skalierbare und moderne Web-Frontends mit Angular</a> erschien zuerst auf <a href="https://www.inoteq.com">INOTEQ GmbH</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="1611" class="elementor elementor-1611" data-elementor-post-type="post">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-3f56aa0 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="3f56aa0" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3656221" data-id="3656221" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-5141813 elementor-widget elementor-widget-spacer" data-id="5141813" data-element_type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
					<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-ed801e5 elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="ed801e5" data-element_type="widget" data-widget_type="theme-post-title.default">
				<div class="elementor-widget-container">
			<h1 class="elementor-heading-title elementor-size-default">Skalierbare und moderne Web-Frontends mit Angular</h1>		</div>
				</div>
				<div class="elementor-element elementor-element-d920c18 elementor-widget elementor-widget-post-info" data-id="d920c18" data-element_type="widget" data-widget_type="post-info.default">
				<div class="elementor-widget-container">
					<ul class="elementor-inline-items elementor-icon-list-items elementor-post-info">
								<li class="elementor-icon-list-item elementor-repeater-item-3dcdd3d elementor-inline-item" itemprop="datePublished">
						<a href="https://www.inoteq.com/2021/06/18/">
											<span class="elementor-icon-list-icon">
								<i aria-hidden="true" class="fas fa-calendar"></i>							</span>
									<span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date">
										Juni 18, 2021					</span>
									</a>
				</li>
				<li class="elementor-icon-list-item elementor-repeater-item-09a1e4d elementor-inline-item" itemprop="author">
						<a href="https://www.inoteq.com/author/sdumjahn/">
											<span class="elementor-icon-list-icon">
								<i aria-hidden="true" class="far fa-user-circle"></i>							</span>
									<span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-author">
										Steffen Seeger					</span>
									</a>
				</li>
				<li class="elementor-icon-list-item elementor-repeater-item-fee817f elementor-inline-item" itemprop="about">
										<span class="elementor-icon-list-icon">
								<i aria-hidden="true" class="fas fa-tags"></i>							</span>
									<span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms">
										<span class="elementor-post-info__terms-list">
				<a href="https://www.inoteq.com/tag/tech-stack/" class="elementor-post-info__terms-list-item">Tech-Stack</a>				</span>
					</span>
								</li>
				</ul>
				</div>
				</div>
				<div class="elementor-element elementor-element-b3d67b9 elementor-widget elementor-widget-html" data-id="b3d67b9" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css" integrity="sha256-VcuSs+n31yebPlEcehu6PvnidJ808ScFBsK8+tJKX+Q=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
<!-- Only for Code Snippet Styles -->		</div>
				</div>
				<div class="elementor-element elementor-element-5566856 elementor-widget elementor-widget-text-editor" data-id="5566856" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Nachdem wir für unsere Anwendung das Backend implementiert haben, widmet sich dieser Artikel der Erstellung eines Frontends. Hierzu verwenden wir das Framework <b>Angular</b> und erstellen eine <b>S</b>ingle-<b>P</b>age <b>A</b>pplication &#8211; SPA.</p><p>Eine Single-Page Application wird wie eine klassische Website von einem Server ausgeliefert. Dabei wird jedoch nicht nur eine Seite ausgeliefert, sondern die komplette Anwendung, welche meist aus viel JavaScript-Logik besteht. Nach dem Laden läuft die Anwendung anschließend vollständig im Browser des Anwenders. Die von der Anwendung benötigten Daten werden anschließend von einer REST-API geladen und dargestellt. Die Erstellung so einer API haben wir uns mit <a href="https://www.inoteq.com/2020/05/27/backend-mit-azure-cloud/">Azure</a> und <a href="https://www.inoteq.com/2020/06/01/backend-mit-aws/">AWS</a> bereits angeschaut.</p>						</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-d06cbb7 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="d06cbb7" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6709856" data-id="6709856" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-8bfeda7 elementor-widget elementor-widget-heading" data-id="8bfeda7" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Aufsetzen der Entwicklungsumgebung</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-a095755 elementor-widget elementor-widget-text-editor" data-id="a095755" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Angular ist ein Framework, welches selber auf Node.js aufsetzt. Aus diesem Grund müssen wir zuerst Node.js installieren. In diesem Beispiel installieren wie Node.js über Brew auf einem Mac. Über die <a href="https://nodejs.org/en/download/">offizielle WebSite</a> stehen auch für andere Betriebssysteme Installationsdateien zur Verfügung.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-5ac5c66 elementor-widget elementor-widget-text-editor" data-id="5ac5c66" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<pre><code class="language-bash">&gt; brew install node
&gt; npm install -g @angular/cli
&gt; ng version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
     
 
Angular CLI: 9.1.0
Node: 12.16.1
OS: win32 x64
</code></pre>						</div>
				</div>
				<div class="elementor-element elementor-element-4e5f299 elementor-widget elementor-widget-text-editor" data-id="4e5f299" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Nachdem wir nun Angular installiert haben, können wir unser Projekt anlegen. Dazu benutzen wir ein Befehl von Angular, welcher uns ein funktionsfähiges leeres Projekt erstellt.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-12b7043 elementor-widget elementor-widget-text-editor" data-id="12b7043" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<pre><code class="language-bash">&gt; ng new todo-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
...
</code></pre>						</div>
				</div>
				<div class="elementor-element elementor-element-d226168 elementor-widget elementor-widget-text-editor" data-id="d226168" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Wichtig ist hier, dass die Frage nach <i><b>Angular routing</b></i> mit <b><i>Yes</i></b> beantwortet wird, da die App später den Anwender auf verschiedene Seiten leiten wird. Durch diese Option wird das Projekt für die Verwendung dieses Features bereits vorbereitet. Die Auswahl nach dem CSS-Format kann nach persönlichen Vorlieben entschieden werden.</p><p>Anschließend erhalten wir folgende Projektstruktur:</p>						</div>
				</div>
				<div class="elementor-element elementor-element-4b2f525 elementor-widget elementor-widget-text-editor" data-id="4b2f525" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<pre><code class="language-bash">todo-app/                               # App-Verzeichnis
├── e2e/                                # Hier werden End-to-End-Tests implementiert
├── node_modules/                       # Beinhaltet alle installierten Node.js-Module für das Projekt
├── src/                                # Beinhaltet die Implementierung der App
│   ├── app/                            # In diesem Ordner werden die Komponente, Services, etc, abgelegt
│   │   ├── app-routin.module.ts        # Konfiguration der Navigationsrouten innerhalb der App (welche Komponente ist für welche URL zuständig)
│   │   ├── app.component.css           # CSS-Styles, welche ausschließlich für die aktuelle Komponente gültig sind
│   │   ├── app.component.html          # HTML-Template-Code, welche beim Ausführen der Komponente angezeigt wird
│   │   ├── app.component.spec.ts       # Unit-Tests für die Komponente
│   │   ├── app.component.ts            # "Code-Behind"-Datei, welche die Business-Logik der Komponente beinhaltet
│   │   └── app.module.ts               # Root-Konfigurations-Datei der App, in welcher alle verwendeten Node.js-Module, App-Komponente, etc. registriert werden
│   ├── assets/                         # Beinhaltet Dateien wie Bilder
│   ├── environments/
│   │   ├── environment.prod.ts         # Konfigurationsdatei für den produktiven Betrieb
│   │   └── environment.ts              # Konfigurationsdatei für das Entwickeln
│   ├── ...
│   ├── index.html                      # Root-Datei, welche Aufgerufen wird, wenn der Anwender die SAP aufruft
│   ├── main.ts                         # Einstiegspunkt für die App (Muss in der Regel nicht geändert werden)
│   └── styles.css                      # Datei für globale CSS-Regeln, welche für die gesamte App gelten
├── ...
├── angular.json                        # Konfiguration des Projektes, welche u.a. z.B. die Build-Konfigurationen beinhaltet
└── package.json                        # Konfigurationsdatei, welche angibt, welche Node.js-Module in welcher Version verwendetet werden
</code></pre>						</div>
				</div>
				<div class="elementor-element elementor-element-983d879 elementor-widget elementor-widget-text-editor" data-id="983d879" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Zu guter letzt installieren wir noch ein paar weitere Packete, welche wir im Verlauf der Implementierung verwenden werden &#8230;</p>						</div>
				</div>
				<div class="elementor-element elementor-element-5a1e2f1 elementor-widget elementor-widget-text-editor" data-id="5a1e2f1" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<pre><code class="language-bash">&gt; npm install --save bootstrap jquery popper.js
</code></pre>						</div>
				</div>
				<div class="elementor-element elementor-element-64f473a elementor-widget elementor-widget-text-editor" data-id="64f473a" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>&#8230; und referenzieren anschließend  noch die entsprechenden CSS-Dateien.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-766c372 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs" data-id="766c372" data-element_type="widget" data-widget_type="tabs.default">
				<div class="elementor-widget-container">
					<div class="elementor-tabs">
			<div class="elementor-tabs-wrapper" role="tablist" >
									<div id="elementor-tab-title-1241" class="elementor-tab-title elementor-tab-desktop-title" aria-selected="true" data-tab="1" role="tab" tabindex="0" aria-controls="elementor-tab-content-1241" aria-expanded="false">/angular.json</div>
							</div>
			<div class="elementor-tabs-content-wrapper" role="tablist" aria-orientation="vertical">
									<div class="elementor-tab-title elementor-tab-mobile-title" aria-selected="true" data-tab="1" role="tab" tabindex="0" aria-controls="elementor-tab-content-1241" aria-expanded="false">/angular.json</div>
					<div id="elementor-tab-content-1241" class="elementor-tab-content elementor-clearfix" data-tab="1" role="tabpanel" aria-labelledby="elementor-tab-title-1241" tabindex="0" hidden="false"><pre><code class="language-json">{
  "projects": {
    "todo-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }
        }
      }
    }
  }
}
</code></pre></div>
							</div>
		</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-f7c4940 elementor-widget elementor-widget-text-editor" data-id="f7c4940" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Nun können wir das Projekt starten und im WebBrowser die generierte Start-Seite sehen. Das leicht defekte Design liegt an der Einbindung von Bootstrap und kann ignoriert werden, da wir die Seite im nächsten Schritt ersetzen werden.</p>						</div>
				</div>
				<section class="elementor-section elementor-inner-section elementor-element elementor-element-a2b1bec elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="a2b1bec" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-8538e2e" data-id="8538e2e" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-93ebd72 elementor-widget elementor-widget-text-editor" data-id="93ebd72" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<pre><code class="language-bash">&gt; ng serve --open
</code></pre>						</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-48850cd" data-id="48850cd" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-bf43f70 elementor-widget elementor-widget-image" data-id="bf43f70" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
													<img fetchpriority="high" decoding="async" width="425" height="277" src="https://www.inoteq.com/wp-content/uploads/2021/06/image2020-4-15_10-28-54.png" class="attachment-large size-large wp-image-1636" alt="" srcset="https://www.inoteq.com/wp-content/uploads/2021/06/image2020-4-15_10-28-54.png 425w, https://www.inoteq.com/wp-content/uploads/2021/06/image2020-4-15_10-28-54-300x196.png 300w" sizes="(max-width: 425px) 100vw, 425px" />													</div>
				</div>
					</div>
		</div>
					</div>
		</section>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-dd9fa64 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="dd9fa64" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5fd8300" data-id="5fd8300" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-1c27df3 elementor-widget elementor-widget-heading" data-id="1c27df3" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Anzeige einer Liste von Tasks</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-1791209 elementor-widget elementor-widget-text-editor" data-id="1791209" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Als erstes implementieren wir die Start-Seite unser Anwendung. Diese soll eine Liste aller vorhandenen TODO-Aufgaben anzeigen. Dabei können die benötigten Dateien manuell per Hand angelegt werden oder wir nutzen Angular und lassen uns die Dateien generieren.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-f5d71c6 elementor-widget elementor-widget-text-editor" data-id="f5d71c6" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<pre><code class="language-bash">&gt; ng generate component task-list
 
CREATE src/app/task-list/task-list.component.html (24 bytes)
CREATE src/app/task-list/task-list.component.spec.ts (643 bytes)
CREATE src/app/task-list/task-list.component.ts (286 bytes)
CREATE src/app/task-list/task-list.component.css (0 bytes)
UPDATE src/app/app.module.ts (485 bytes)
</code></pre>						</div>
				</div>
				<div class="elementor-element elementor-element-d250420 elementor-widget elementor-widget-text-editor" data-id="d250420" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Die generierten Dateien haben dabei folgenden Nutzen:</p><ul><li><b>task-list.component.html</b>: Hier wird der HTML-Code, also die Anzeige der Liste implementiert.</li><li><b>task-list.component.ts</b>: Hier wird die Logik zum Laden der Tasks implementiert, damit diese anschließend zur Anzeige zur Verfügung stehen.</li><li><b>task-list.component.spec.ts</b>: Hier können Unit-Tests implementiert werden, welche die Korrektheit der Logik prüft.</li><li><b>task-list.component.css</b>: Hier können Komponenten-spezifische Style-Regeln hinterlegt werden, welche nur für diese Komponente gelten.</li></ul>						</div>
				</div>
				<div class="elementor-element elementor-element-9709703 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs" data-id="9709703" data-element_type="widget" data-widget_type="tabs.default">
				<div class="elementor-widget-container">
					<div class="elementor-tabs">
			<div class="elementor-tabs-wrapper" role="tablist" >
									<div id="elementor-tab-title-1581" class="elementor-tab-title elementor-tab-desktop-title" aria-selected="true" data-tab="1" role="tab" tabindex="0" aria-controls="elementor-tab-content-1581" aria-expanded="false">/src/app/task-list/task-list.component.html</div>
									<div id="elementor-tab-title-1582" class="elementor-tab-title elementor-tab-desktop-title" aria-selected="false" data-tab="2" role="tab" tabindex="-1" aria-controls="elementor-tab-content-1582" aria-expanded="false">/src/app/task-list/task-list.component.ts</div>
									<div id="elementor-tab-title-1583" class="elementor-tab-title elementor-tab-desktop-title" aria-selected="false" data-tab="3" role="tab" tabindex="-1" aria-controls="elementor-tab-content-1583" aria-expanded="false">/src/app/app.module.ts</div>
							</div>
			<div class="elementor-tabs-content-wrapper" role="tablist" aria-orientation="vertical">
									<div class="elementor-tab-title elementor-tab-mobile-title" aria-selected="true" data-tab="1" role="tab" tabindex="0" aria-controls="elementor-tab-content-1581" aria-expanded="false">/src/app/task-list/task-list.component.html</div>
					<div id="elementor-tab-content-1581" class="elementor-tab-content elementor-clearfix" data-tab="1" role="tabpanel" aria-labelledby="elementor-tab-title-1581" tabindex="0" hidden="false"><pre><code class="language-html">&lt;ul class="list-group"&gt;
    &lt;li class="list-group-item text-nowrap" *ngFor="let task of tasks"&gt;
        &lt;a [title]="'Details für ' + task.name"&gt;
            &lt;strong&gt;{{ task.name }}&lt;/strong&gt;
        &lt;/a&gt;
          
        &lt;span *ngIf="task.priority === 1" class="badge badge-danger"&gt;High&lt;/span&gt;
        &lt;span *ngIf="task.priority === 2" class="badge badge-info"&gt;Middle&lt;/span&gt;
        &lt;span *ngIf="task.priority === 3" class="badge badge-light"&gt;Low&lt;/span&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre></div>
									<div class="elementor-tab-title elementor-tab-mobile-title" aria-selected="false" data-tab="2" role="tab" tabindex="-1" aria-controls="elementor-tab-content-1582" aria-expanded="false">/src/app/task-list/task-list.component.ts</div>
					<div id="elementor-tab-content-1582" class="elementor-tab-content elementor-clearfix" data-tab="2" role="tabpanel" aria-labelledby="elementor-tab-title-1582" tabindex="0" hidden="hidden"><pre><code class="language-js">import { Component, OnInit } from '@angular/core';
 
import { TaskService } from '../task.service';
 
@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {
  tasks;
 
  constructor(private taskService: TaskService) { }
 
  ngOnInit(): void {
    this.taskService.getTasks()
      .subscribe(tasks => (this.tasks = tasks));
  }
}
</code></pre></div>
									<div class="elementor-tab-title elementor-tab-mobile-title" aria-selected="false" data-tab="3" role="tab" tabindex="-1" aria-controls="elementor-tab-content-1583" aria-expanded="false">/src/app/app.module.ts</div>
					<div id="elementor-tab-content-1583" class="elementor-tab-content elementor-clearfix" data-tab="3" role="tabpanel" aria-labelledby="elementor-tab-title-1583" tabindex="0" hidden="hidden"><pre><code class="language-js">// ...
 
import { RouterModule } from '@angular/router';
 
// ...
 
@NgModule({
  // ...
  imports: [
 
    // ...   
 
    RouterModule.forRoot([
      { path: '', component: TaskListComponent }
    ])
  ],
  // ... 
})
// ...
</code></pre></div>
							</div>
		</div>
				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-1f18cd1 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="1f18cd1" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8dbc763" data-id="8dbc763" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-c0e940a elementor-widget elementor-widget-heading" data-id="c0e940a" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Implementierung der Kommunikation mit REST-API</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-1ef27e1 elementor-widget elementor-widget-text-editor" data-id="1ef27e1" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Durch durch die Art und Weise, dass die SPA im Browser des Anwenders ausgeführt wird, kann sie nicht direkt auf die Datenbank zugreifen. Aus diesem Grund wird eine SPA fast immer in Verbindung mit einer REST-API verwendet, welche einen kontrollierten Zugriff auf die Daten bereitstellt.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-3566e34 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs" data-id="3566e34" data-element_type="widget" data-widget_type="tabs.default">
				<div class="elementor-widget-container">
					<div class="elementor-tabs">
			<div class="elementor-tabs-wrapper" role="tablist" >
									<div id="elementor-tab-title-5591" class="elementor-tab-title elementor-tab-desktop-title" aria-selected="true" data-tab="1" role="tab" tabindex="0" aria-controls="elementor-tab-content-5591" aria-expanded="false">/src/app/task.service.ts</div>
									<div id="elementor-tab-title-5592" class="elementor-tab-title elementor-tab-desktop-title" aria-selected="false" data-tab="2" role="tab" tabindex="-1" aria-controls="elementor-tab-content-5592" aria-expanded="false">/src/app/app.module.ts</div>
							</div>
			<div class="elementor-tabs-content-wrapper" role="tablist" aria-orientation="vertical">
									<div class="elementor-tab-title elementor-tab-mobile-title" aria-selected="true" data-tab="1" role="tab" tabindex="0" aria-controls="elementor-tab-content-5591" aria-expanded="false">/src/app/task.service.ts</div>
					<div id="elementor-tab-content-5591" class="elementor-tab-content elementor-clearfix" data-tab="1" role="tabpanel" aria-labelledby="elementor-tab-title-5591" tabindex="0" hidden="false"><pre><code class="language-js">import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
import { Observable } from 'rxjs';
 
import { Task } from './task';
 
@Injectable({
  providedIn: 'root'
})
export class TaskService {
 
  baseUrl = 'https://exmaple.com/api';  // URL to web api
 
  constructor(
    private http: HttpClient) {}
 
  /** GET tasks from the server */
  getTasks (): Observable<Task[]> {
    return this.http.get<Task[]>(`${this.baseUrl}/task`);
  }
 
}</code></pre></div>
									<div class="elementor-tab-title elementor-tab-mobile-title" aria-selected="false" data-tab="2" role="tab" tabindex="-1" aria-controls="elementor-tab-content-5592" aria-expanded="false">/src/app/app.module.ts</div>
					<div id="elementor-tab-content-5592" class="elementor-tab-content elementor-clearfix" data-tab="2" role="tabpanel" aria-labelledby="elementor-tab-title-5592" tabindex="0" hidden="hidden"><pre><code class="language-js">// ...
import { HttpClientModule } from '@angular/common/http';
 
// ...
 
@NgModule({
  // ...
  imports: [
    // ...   
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule,
    // ...   
  ],
  // ... 
})
// ...
</code></pre></div>
							</div>
		</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-5e30383 elementor-widget elementor-widget-text-editor" data-id="5e30383" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Die Implementiert der zugehörige API kann in den anderen beiden Artikeln nachgelesen werden, wo diese einmal mit <a href="https://www.inoteq.com/2020/06/01/backend-mit-aws/">Azure Web Service</a> und einmal mit <a href="https://www.inoteq.com/2020/05/27/backend-mit-azure-cloud/">Amazon AWS</a> implementiert wurde.</p>						</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-0bf0220 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0bf0220" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f9a3b87" data-id="f9a3b87" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-d27f504 elementor-widget elementor-widget-heading" data-id="d27f504" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Deployment der SPA als Azure App-Service</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-f8dc2dc elementor-widget elementor-widget-text-editor" data-id="f8dc2dc" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Auch für das Bauen einer veröffentlichbaren App bringt Angular fertige Befehle mit. Dieser kompiliert und komprimiert den Code, sodass beim späteren deployen nur wenige kleine Dateien hochgeladen werden müssen. Dies hat zusätzlich den Vorteil, dass die Anwendung beim Anwender schneller lädt, da der Browser ebenfalls nur wenige kleine Dateien herunterladen muss um die Anwendung zu starten.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-88eaa2a elementor-widget elementor-widget-text-editor" data-id="88eaa2a" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<pre><code class="language-bash">&gt; ng build --prod
 
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
 
chunk {0} runtime-es2015.1eba213af0b233498d9d.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.1eba213af0b233498d9d.js (runtime) 1.45 kB [entry] [rendered]
chunk {2} polyfills-es2015.690002c25ea8557bb4b0.js (polyfills) 36.1 kB [initial] [rendered]
chunk {3} polyfills-es5.9e286f6d9247438cbb02.js (polyfills-es5) 129 kB [initial] [rendered]
chunk {1} main-es2015.af5b6cb4ca52ef1efbf6.js (main) 376 kB [initial] [rendered]
chunk {1} main-es5.af5b6cb4ca52ef1efbf6.js (main) 456 kB [initial] [rendered]
chunk {4} styles.66057ddcee1a0c134465.css (styles) 146 kB [initial] [rendered]
chunk {scripts} scripts.4f7d6bdd9aa2a2ef7f2f.js (scripts) 165 kB [entry] [rendered]
Date: 2020-04-16T13:22:11.289Z - Hash: c755857ecfed044fd8c0 - Time: 43419ms
</code></pre>						</div>
				</div>
				<div class="elementor-element elementor-element-6028975 elementor-widget elementor-widget-text-editor" data-id="6028975" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Als nächstes können wir die App nach Azure deployen. Sofern <a style="background-color: #ffffff;" href="https://code.visualstudio.com/">Visual Studio Code</a> verwendet wird, geschieht dies über das Azure Plugin recht einfach. Dazu auf dem entsprechenden AppService mit der rechten Maus klicken und <b><i>Deploy to Web App&#8230;</i></b> auswählen.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-596146b elementor-widget elementor-widget-image" data-id="596146b" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
													<img decoding="async" width="421" height="582" src="https://www.inoteq.com/wp-content/uploads/2021/06/image2020-5-13_14-47-44.png" class="attachment-large size-large wp-image-1648" alt="" srcset="https://www.inoteq.com/wp-content/uploads/2021/06/image2020-5-13_14-47-44.png 421w, https://www.inoteq.com/wp-content/uploads/2021/06/image2020-5-13_14-47-44-217x300.png 217w" sizes="(max-width: 421px) 100vw, 421px" />													</div>
				</div>
				<div class="elementor-element elementor-element-4e3db84 elementor-widget elementor-widget-image" data-id="4e3db84" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
													<img decoding="async" width="608" height="99" src="https://www.inoteq.com/wp-content/uploads/2021/06/image2020-5-13_14-49-6.png" class="attachment-large size-large wp-image-1649" alt="" srcset="https://www.inoteq.com/wp-content/uploads/2021/06/image2020-5-13_14-49-6.png 608w, https://www.inoteq.com/wp-content/uploads/2021/06/image2020-5-13_14-49-6-300x49.png 300w" sizes="(max-width: 608px) 100vw, 608px" />													</div>
				</div>
				<div class="elementor-element elementor-element-f51f031 elementor-widget elementor-widget-text-editor" data-id="f51f031" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>In dem nun erscheinenden Dialog navigieren wir zu dem <b><i>dist</i></b>-Ordner in unserem Projekt und laden diesen hoch.</p><p>Die Anwendung kann nun über die URL der Azure Wep App aufgerufen werden.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-a4fa29f elementor-widget elementor-widget-image" data-id="a4fa29f" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
										<figure class="wp-caption">
										<img loading="lazy" decoding="async" width="519" height="400" src="https://www.inoteq.com/wp-content/uploads/2021/06/image2020-4-15_15-17-36.jpg" class="attachment-large size-large wp-image-1671" alt="" srcset="https://www.inoteq.com/wp-content/uploads/2021/06/image2020-4-15_15-17-36.jpg 519w, https://www.inoteq.com/wp-content/uploads/2021/06/image2020-4-15_15-17-36-300x231.jpg 300w" sizes="(max-width: 519px) 100vw, 519px" />											<figcaption class="widget-image-caption wp-caption-text">Anzeige der Aufgaben in einer ToDo Liste</figcaption>
										</figure>
							</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-b185f98 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="b185f98" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c9c18c0" data-id="c9c18c0" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
							</div>
		</div>
					</div>
		</section>
				</div>
		<p>Der Beitrag <a href="https://www.inoteq.com/2021/06/18/skalierbare-angular-frontends/">Skalierbare und moderne Web-Frontends mit Angular</a> erschien zuerst auf <a href="https://www.inoteq.com">INOTEQ GmbH</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.inoteq.com/2021/06/18/skalierbare-angular-frontends/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Backend mit Amazon Web Services</title>
		<link>https://www.inoteq.com/2020/06/01/backend-mit-aws/</link>
					<comments>https://www.inoteq.com/2020/06/01/backend-mit-aws/#respond</comments>
		
		<dc:creator><![CDATA[Steffen Seeger]]></dc:creator>
		<pubDate>Mon, 01 Jun 2020 14:56:00 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[TechStack]]></category>
		<category><![CDATA[Tech-Stack]]></category>
		<guid isPermaLink="false">https://www.inoteq.com/?p=778</guid>

					<description><![CDATA[<p>In unserem zweiten Artikel  dieser Serie werden wir erneut ein Backend zum Speichern und Abfragen von Daten erstellen. Als Cloud-Anbieter werden jetzt die Amazon Web Services (AWS) verwendet. Im Gegensatz zu der Azure-Implementierung unseres Backends werden wir bei AWS den REST-Service nicht selber implementieren. Stattdessen werden wir bestimmte AWS-Services verwenden, welche uns eine Servless-Implementierung des kompletten [&#8230;]</p>
<p>Der Beitrag <a href="https://www.inoteq.com/2020/06/01/backend-mit-aws/">Backend mit Amazon Web Services</a> erschien zuerst auf <a href="https://www.inoteq.com">INOTEQ GmbH</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="778" class="elementor elementor-778" data-elementor-post-type="post">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-f91ad26 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="f91ad26" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c944218" data-id="c944218" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-7ddc465 elementor-widget elementor-widget-html" data-id="7ddc465" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css" integrity="sha256-VcuSs+n31yebPlEcehu6PvnidJ808ScFBsK8+tJKX+Q=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
<!-- Only for Code Snippet Styles -->		</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-9ba02a6 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="9ba02a6" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3de032b" data-id="3de032b" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-224aec8 elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="224aec8" data-element_type="widget" data-widget_type="theme-post-title.default">
				<div class="elementor-widget-container">
			<h1 class="elementor-heading-title elementor-size-default">Backend mit Amazon Web Services</h1>		</div>
				</div>
				<div class="elementor-element elementor-element-fbfe6ea elementor-widget elementor-widget-post-info" data-id="fbfe6ea" data-element_type="widget" data-widget_type="post-info.default">
				<div class="elementor-widget-container">
					<ul class="elementor-inline-items elementor-icon-list-items elementor-post-info">
								<li class="elementor-icon-list-item elementor-repeater-item-f44cdeb elementor-inline-item" itemprop="datePublished">
						<a href="https://www.inoteq.com/2020/06/01/">
											<span class="elementor-icon-list-icon">
								<i aria-hidden="true" class="fas fa-calendar"></i>							</span>
									<span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date">
										Juni 1, 2020					</span>
									</a>
				</li>
				<li class="elementor-icon-list-item elementor-repeater-item-576c458 elementor-inline-item" itemprop="author">
						<a href="https://www.inoteq.com/author/sdumjahn/">
											<span class="elementor-icon-list-icon">
								<i aria-hidden="true" class="far fa-user-circle"></i>							</span>
									<span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-author">
										Steffen Seeger					</span>
									</a>
				</li>
				<li class="elementor-icon-list-item elementor-repeater-item-73e5103 elementor-inline-item" itemprop="about">
										<span class="elementor-icon-list-icon">
								<i aria-hidden="true" class="fas fa-tags"></i>							</span>
									<span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms">
										<span class="elementor-post-info__terms-list">
				<a href="https://www.inoteq.com/tag/tech-stack/" class="elementor-post-info__terms-list-item">Tech-Stack</a>				</span>
					</span>
								</li>
				</ul>
				</div>
				</div>
				<div class="elementor-element elementor-element-cd25f26 elementor-widget elementor-widget-text-editor" data-id="cd25f26" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>In unserem zweiten Artikel  dieser Serie werden wir erneut ein Backend zum Speichern und Abfragen von Daten erstellen. Als Cloud-Anbieter werden jetzt die <b>Amazon Web Services</b> (AWS) verwendet.</p><p>Im Gegensatz zu der <a href="https://www.inoteq.com/2020/05/20/backend-mit-azure-cloud/">Azure-Implementierung</a> unseres Backends werden wir bei AWS den REST-Service nicht selber implementieren. Stattdessen werden wir bestimmte AWS-Services verwenden, welche uns eine Servless-Implementierung des kompletten Backends ermöglicht. Bei Servless müssen wir uns keine Gedanken um etwaige Dienste machen, die wir Verwalten und mit Code deploymen müssen. All dieser administrative Overhead wird uns von AWS abgenommen.</p>						</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-991048d elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="991048d" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-14eb879" data-id="14eb879" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-f5bb2af elementor-widget elementor-widget-heading" data-id="f5bb2af" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Architekturübersicht</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-daed257 elementor-widget elementor-widget-text-editor" data-id="daed257" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Für unseren servless REST-Backend werden für von AWS folgende Services verwenden:</p><ul><li><strong>API-Gateway</strong>: Stellt uns einen REST-Service-Endpunkt zur Verfügung.</li><li><strong>Lambda Functions</strong>: Verarbeitet die Anfragen vom REST-Service.</li><li><strong>DynamoDB</strong>: Speichert die strukturierten Daten als JSON.</li><li><strong>IAM Roles</strong>: Stellt uns eine Rechteverwaltung für den Zugriff auf die Daten bereit.</li><li><strong>CloudWatch Logs</strong>: Speichert die von den Lambda Function erzeugten Logs (z.B. Fehler).</li></ul>						</div>
				</div>
				<div class="elementor-element elementor-element-1d1c20b elementor-widget elementor-widget-image" data-id="1d1c20b" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
										<figure class="wp-caption">
											<a href="https://www.inoteq.com/wp-content/uploads/2020/05/AWS-Architektur.png" data-elementor-open-lightbox="yes" data-elementor-lightbox-title="AWS Architektur" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODM5LCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9BV1MtQXJjaGl0ZWt0dXIucG5nIn0%3D">
							<img loading="lazy" decoding="async" width="800" height="450" src="https://www.inoteq.com/wp-content/uploads/2020/05/AWS-Architektur.png" class="attachment-large size-large wp-image-839" alt="" srcset="https://www.inoteq.com/wp-content/uploads/2020/05/AWS-Architektur.png 824w, https://www.inoteq.com/wp-content/uploads/2020/05/AWS-Architektur-300x169.png 300w, https://www.inoteq.com/wp-content/uploads/2020/05/AWS-Architektur-768x432.png 768w" sizes="(max-width: 800px) 100vw, 800px" />								</a>
											<figcaption class="widget-image-caption wp-caption-text">Systemarchitektur des Backends in der AWS-Cloud</figcaption>
										</figure>
							</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-6422750 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="6422750" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ee4501e" data-id="ee4501e" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-acdb15a elementor-widget elementor-widget-heading" data-id="acdb15a" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Aufsetzen der DynamoDB</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-123bca3 elementor-widget elementor-widget-text-editor" data-id="123bca3" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Die DynamoDB ist eine klassische NoSQL-Datenbank, wobei sich Amazon bei der Benennung der Sache in der AWS-Konsole eher an die klassischen Begriffe einer relationalen Datenbank orientiert hat. Daher legen wir eine neue Tabelle an und vergeben einen Primärschlüssel.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-9ae2ba8 elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel" data-id="9ae2ba8" data-element_type="widget" data-settings="{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;effect&quot;:&quot;slide&quot;,&quot;speed&quot;:500}" data-widget_type="image-carousel.default">
				<div class="elementor-widget-container">
					<div class="elementor-image-carousel-wrapper swiper-container" dir="ltr">
			<div class="elementor-image-carousel swiper-wrapper" aria-live="off">
								<div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="1 von 3"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="9ae2ba8" data-elementor-lightbox-title="DynamoDB_1" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODQzLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9EeW5hbW9EQl8xLnBuZyIsInNsaWRlc2hvdyI6IjlhZTJiYTgifQ%3D%3D" href="https://www.inoteq.com/wp-content/uploads/2020/05/DynamoDB_1.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/DynamoDB_1-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Erstellung einer neuen Tabelle" /><figcaption class="elementor-image-carousel-caption">Erstellung einer neuen Tabelle</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="2 von 3"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="9ae2ba8" data-elementor-lightbox-title="DynamoDB_2" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODQ0LCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9EeW5hbW9EQl8yLnBuZyIsInNsaWRlc2hvdyI6IjlhZTJiYTgifQ%3D%3D" href="https://www.inoteq.com/wp-content/uploads/2020/05/DynamoDB_2.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/DynamoDB_2-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Konfiguration der Tabelle" /><figcaption class="elementor-image-carousel-caption">Konfiguration der Tabelle</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="3 von 3"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="9ae2ba8" data-elementor-lightbox-title="DynamoDB_3" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODQ1LCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9EeW5hbW9EQl8zLnBuZyIsInNsaWRlc2hvdyI6IjlhZTJiYTgifQ%3D%3D" href="https://www.inoteq.com/wp-content/uploads/2020/05/DynamoDB_3.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/DynamoDB_3-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Verwalten der Objekte der Tabelle" /><figcaption class="elementor-image-carousel-caption">Verwalten der Objekte der Tabelle</figcaption></figure></a></div>			</div>
												<div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0">
						<i aria-hidden="true" class="eicon-chevron-left"></i>					</div>
					<div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
						<i aria-hidden="true" class="eicon-chevron-right"></i>					</div>
				
									<div class="swiper-pagination"></div>
									</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-c6ce2c3 elementor-widget elementor-widget-text-editor" data-id="c6ce2c3" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Ein Entscheidender Unterschied zu der Azure Cosmos-DB besteht darin, dass wir keine DynamoDB-Instanz erstellen müssen. AWS stellt den Service bereit und ermöglicht den Entwickler nur die Anlage von Tabellen und Daten. Um sicherzustellen, dass nicht jede Anwendung alle Tabellen des von AWS bereitgestellten DynamoDB-Service verwenden kann, müssen wir IAM-Rollen anlegen, welche den Zugriff auf die Tabellen und die erlaubten Operationen steuert.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-e519421 elementor-widget elementor-widget-image" data-id="e519421" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
										<figure class="wp-caption">
										<img loading="lazy" decoding="async" width="800" height="470" src="https://www.inoteq.com/wp-content/uploads/2020/05/IAM_Roles_1-1024x602.png" class="attachment-large size-large wp-image-851" alt="" srcset="https://www.inoteq.com/wp-content/uploads/2020/05/IAM_Roles_1-1024x602.png 1024w, https://www.inoteq.com/wp-content/uploads/2020/05/IAM_Roles_1-300x176.png 300w, https://www.inoteq.com/wp-content/uploads/2020/05/IAM_Roles_1-768x452.png 768w, https://www.inoteq.com/wp-content/uploads/2020/05/IAM_Roles_1-1536x903.png 1536w, https://www.inoteq.com/wp-content/uploads/2020/05/IAM_Roles_1.png 1789w" sizes="(max-width: 800px) 100vw, 800px" />											<figcaption class="widget-image-caption wp-caption-text">Einrichten der Zugriffsberechtigungen für die DynamoDB-Tabelle</figcaption>
										</figure>
							</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-db35d5c elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="db35d5c" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c7682fb" data-id="c7682fb" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-b0a14b5 elementor-widget elementor-widget-heading" data-id="b0a14b5" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Implementierung der Lambda Functions</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-85ed9d6 elementor-widget elementor-widget-text-editor" data-id="85ed9d6" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Als nächstes legen wir eine Lambda-Funktion an. Sie hat die einfache Aufgabe, die Daten von einem HTTP-Request in Daten für eine DynamoDB zu transformieren. In diesem Beispiel ist dies anhand der Anlage eines Tasks dargestellt.</p><p>Zu allererst müssen wir die Lambda-Funktion anlegen. Dazu vergeben wir einen Namen und wählen eine Runtime aus. Neben den Verfügbaren Runtimes wie Node.JS, .NET und Java wählen wir hier aber Python. Als nächstes ist es wichtig, dass wir unsere eben angelegt Ausführungsrolle hinterlegen, da nur so die Lambda-Funktion die Berechtigung auf das Arbeiten der angelegten Tabelle in der DynamoDB erhält.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-1f3710b elementor-widget elementor-widget-image" data-id="1f3710b" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
										<figure class="wp-caption">
										<img loading="lazy" decoding="async" width="800" height="658" src="https://www.inoteq.com/wp-content/uploads/2020/05/Lambda_1-1024x842.png" class="attachment-large size-large wp-image-847" alt="" srcset="https://www.inoteq.com/wp-content/uploads/2020/05/Lambda_1-1024x842.png 1024w, https://www.inoteq.com/wp-content/uploads/2020/05/Lambda_1-300x247.png 300w, https://www.inoteq.com/wp-content/uploads/2020/05/Lambda_1-768x631.png 768w, https://www.inoteq.com/wp-content/uploads/2020/05/Lambda_1-1536x1263.png 1536w, https://www.inoteq.com/wp-content/uploads/2020/05/Lambda_1.png 1901w" sizes="(max-width: 800px) 100vw, 800px" />											<figcaption class="widget-image-caption wp-caption-text">Erstellung einer Lambda Function</figcaption>
										</figure>
							</div>
				</div>
				<div class="elementor-element elementor-element-850e51b elementor-widget elementor-widget-text-editor" data-id="850e51b" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							Zu guter Letzt können wir nun die Implementierung hinterlegen. Dazu reicht für den Anfang der Code-Editor in der AWS Console komplett aus. Die Logik besitzt dabei grob folgenden Ablauf:
<ul>
 	<li>Lade eine Referenz zur Tabelle <code>task</code></li>
 	<li>Lege einen neuen Task mit den Informationen aus dem Request-Body an</li>
 	<li>Versuche den neuen Task in der Tabelle anzulegen</li>
 	<li>Wenn es ein Fehler gab, wird dieser zurückgegeben, ansonsten das neu angelegte Objekt</li>
</ul>						</div>
				</div>
				<div class="elementor-element elementor-element-ff7d99e elementor-widget elementor-widget-text-editor" data-id="ff7d99e" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<pre><code class="language-python">import boto3
import json
import shared
import uuid
from datetime import datetime, timezone
from decimal import Decimal
from botocore.exceptions import ClientError
 
def lambda_handler(event, context):
    taskTable = boto3.resource('dynamodb').Table("task")
    body = json.loads(event['body'])
     
    newTask = {
        'id': str(uuid.uuid4()),
        'name': body['name'],
        'name_search': body['name'].lower(),
        'priority': Decimal(body['priority']),
        'description': body['description'],
        'description_search': body['description'].lower(),
        'created_at': datetime.now(timezone.utc).strftime('%Y-%m-%dT%H:%M:%S.%f%Z')
    }
     
    try:
        response = taskTable.put_item(Item = newTask)
 
    except ClientError as err:
        print(err.response['Error']['Message'])
        return shared.respond(err)
         
    else:
        return shared.respond(None, newTask)
</code></pre>						</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-b98bd2b elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="b98bd2b" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-65348d1" data-id="65348d1" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-371a59d elementor-widget elementor-widget-heading" data-id="371a59d" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Konfiguration des API-Gateways</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-7e5a73d elementor-widget elementor-widget-text-editor" data-id="7e5a73d" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Alle bisher angelegten AWS-Services sind nur intern aufrufbar. Damit unsere Anwendung darauf zugriff hat, müssen wir ein API-Gateway anlegen. Dieser ist ein konfigurierbarer REST-Service, indem wir die Pfade und Methoden beliebig konfigurieren können.</p><p>Um bei dem Beispiel der Anlage eines neuer Aufgabe zu bleiben, beschreibt die folgende Bilderreihe die Schritte zur Anlage einer POST-Methode, welche für die Anlage aufgerufen werden soll. Dazu stellen wir bei der Anlage ein, dass der entgegengenommene Request an unser Lambda weitergereicht werden soll.</p><p>Das API-Gateway bietet uns zusätzlich die Möglichkeit, die Methode direkt testen zu können. So können Konfigurationsfehler schnell erkannt und behoben werden.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-91dfeef elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel" data-id="91dfeef" data-element_type="widget" data-settings="{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;effect&quot;:&quot;slide&quot;,&quot;speed&quot;:500}" data-widget_type="image-carousel.default">
				<div class="elementor-widget-container">
					<div class="elementor-image-carousel-wrapper swiper-container" dir="ltr">
			<div class="elementor-image-carousel swiper-wrapper" aria-live="off">
								<div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="1 von 5"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="91dfeef" data-elementor-lightbox-title="API_1" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODYxLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA2XC9BUElfMS5wbmciLCJzbGlkZXNob3ciOiI5MWRmZWVmIn0%3D" href="https://www.inoteq.com/wp-content/uploads/2020/06/API_1.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/API_1-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Hinzufügen einer neuen POST-Aktion" /><figcaption class="elementor-image-carousel-caption">Hinzufügen einer neuen POST-Aktion</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="2 von 5"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="91dfeef" data-elementor-lightbox-title="API_2" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODYyLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA2XC9BUElfMi5wbmciLCJzbGlkZXNob3ciOiI5MWRmZWVmIn0%3D" href="https://www.inoteq.com/wp-content/uploads/2020/06/API_2.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/API_2-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Konfiguration der Aktion" /><figcaption class="elementor-image-carousel-caption">Konfiguration der Aktion</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="3 von 5"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="91dfeef" data-elementor-lightbox-title="API_3" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODYzLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA2XC9BUElfMy5wbmciLCJzbGlkZXNob3ciOiI5MWRmZWVmIn0%3D" href="https://www.inoteq.com/wp-content/uploads/2020/06/API_3.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/API_3-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Hinzufügen von Response-Header" /><figcaption class="elementor-image-carousel-caption">Hinzufügen von Response-Header</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="4 von 5"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="91dfeef" data-elementor-lightbox-title="API_4" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODY0LCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA2XC9BUElfNC5wbmciLCJzbGlkZXNob3ciOiI5MWRmZWVmIn0%3D" href="https://www.inoteq.com/wp-content/uploads/2020/06/API_4.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/API_4-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Übersicht der angelegten Aktion" /><figcaption class="elementor-image-carousel-caption">Übersicht der angelegten Aktion</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="5 von 5"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="91dfeef" data-elementor-lightbox-title="API_5" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODY1LCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA2XC9BUElfNS5wbmciLCJzbGlkZXNob3ciOiI5MWRmZWVmIn0%3D" href="https://www.inoteq.com/wp-content/uploads/2020/06/API_5.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/API_5-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Testen der Aktion" /><figcaption class="elementor-image-carousel-caption">Testen der Aktion</figcaption></figure></a></div>			</div>
												<div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0">
						<i aria-hidden="true" class="eicon-chevron-left"></i>					</div>
					<div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
						<i aria-hidden="true" class="eicon-chevron-right"></i>					</div>
				
									<div class="swiper-pagination"></div>
									</div>
				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-4e72c7a elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4e72c7a" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-740f737" data-id="740f737" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-0e05ba6 elementor-widget elementor-widget-heading" data-id="0e05ba6" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Deployment der Komponenten</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-f88f950 elementor-widget elementor-widget-text-editor" data-id="f88f950" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Mit der Anlage der API im API-Gateway ist es aber noch nicht getan. AWS ermöglicht die Bearbeitung der API ohne dass davon eine ggf. laufende Anwendung beeinträchtigt wird. Dies wird erreicht, in dem eine API vor der externen Nutzung veröffentlicht werden muss. Eine API kann auch mehrfach veröffentlicht werden, was somit auch eine Versionierung der API ermöglicht.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-f83ee39 elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel" data-id="f83ee39" data-element_type="widget" data-settings="{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;effect&quot;:&quot;slide&quot;,&quot;speed&quot;:500}" data-widget_type="image-carousel.default">
				<div class="elementor-widget-container">
					<div class="elementor-image-carousel-wrapper swiper-container" dir="ltr">
			<div class="elementor-image-carousel swiper-wrapper" aria-live="off">
								<div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="1 von 3"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="f83ee39" data-elementor-lightbox-title="API_6" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODY5LCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA2XC9BUElfNi5wbmciLCJzbGlkZXNob3ciOiJmODNlZTM5In0%3D" href="https://www.inoteq.com/wp-content/uploads/2020/06/API_6.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/API_6-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Starten der Veröffentlichung der API" /><figcaption class="elementor-image-carousel-caption">Starten der Veröffentlichung der API</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="2 von 3"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="f83ee39" data-elementor-lightbox-title="API_7" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODcwLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA2XC9BUElfNy5wbmciLCJzbGlkZXNob3ciOiJmODNlZTM5In0%3D" href="https://www.inoteq.com/wp-content/uploads/2020/06/API_7.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/API_7-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Angabe des Umgebung, nach der Veröffentlicht werden soll" /><figcaption class="elementor-image-carousel-caption">Angabe des Umgebung, nach der Veröffentlicht werden soll</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="3 von 3"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="f83ee39" data-elementor-lightbox-title="API_8" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODcxLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA2XC9BUElfOC5wbmciLCJzbGlkZXNob3ciOiJmODNlZTM5In0%3D" href="https://www.inoteq.com/wp-content/uploads/2020/06/API_8.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/API_8-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Einsehen des veröffentlichten REST-Endpunktes" /><figcaption class="elementor-image-carousel-caption">Einsehen des veröffentlichten REST-Endpunktes</figcaption></figure></a></div>			</div>
												<div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0">
						<i aria-hidden="true" class="eicon-chevron-left"></i>					</div>
					<div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
						<i aria-hidden="true" class="eicon-chevron-right"></i>					</div>
				
									<div class="swiper-pagination"></div>
									</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-6e56380 elementor-widget elementor-widget-text-editor" data-id="6e56380" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							Nachdem die API veröffentlicht wurde, stellt AWS einen URL für den Endpunkt bereit. Ab diesem Moment ist die REST-API darüber erreichbar und kann mit externen Tools abgefragt werden. Nützlicherweise bietet AWS direkt fertige Schemadefinitionen des REST-Service zum Download an (z.B. <code>swagger.json</code>).						</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-348bd18 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="348bd18" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-12fd5fb" data-id="12fd5fb" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-d6c2361 elementor-post-navigation-borders-yes elementor-widget elementor-widget-post-navigation" data-id="d6c2361" data-element_type="widget" data-widget_type="post-navigation.default">
				<div class="elementor-widget-container">
					<div class="elementor-post-navigation">
			<div class="elementor-post-navigation__prev elementor-post-navigation__link">
				<a href="https://www.inoteq.com/2020/05/27/backend-mit-azure-cloud/" rel="prev"><span class="post-navigation__arrow-wrapper post-navigation__arrow-prev"><i class="fa fa-angle-double-left" aria-hidden="true"></i><span class="elementor-screen-only">Prev</span></span><span class="elementor-post-navigation__link__prev"><span class="post-navigation__prev--label">Voriger</span><span class="post-navigation__prev--title">Backend mit Azure Cloud</span></span></a>			</div>
							<div class="elementor-post-navigation__separator-wrapper">
					<div class="elementor-post-navigation__separator"></div>
				</div>
						<div class="elementor-post-navigation__next elementor-post-navigation__link">
				<a href="https://www.inoteq.com/2021/01/18/health-checks-in-asp-net-core/" rel="next"><span class="elementor-post-navigation__link__next"><span class="post-navigation__next--label">Nächster</span><span class="post-navigation__next--title">Health Checks in ASP.NET Core</span></span><span class="post-navigation__arrow-wrapper post-navigation__arrow-next"><i class="fa fa-angle-double-right" aria-hidden="true"></i><span class="elementor-screen-only">Nächster</span></span></a>			</div>
		</div>
				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-82766a5 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="82766a5" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e8b5191" data-id="e8b5191" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
							</div>
		</div>
					</div>
		</section>
				</div>
		<p>Der Beitrag <a href="https://www.inoteq.com/2020/06/01/backend-mit-aws/">Backend mit Amazon Web Services</a> erschien zuerst auf <a href="https://www.inoteq.com">INOTEQ GmbH</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.inoteq.com/2020/06/01/backend-mit-aws/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Backend mit Azure Cloud</title>
		<link>https://www.inoteq.com/2020/05/27/backend-mit-azure-cloud/</link>
					<comments>https://www.inoteq.com/2020/05/27/backend-mit-azure-cloud/#respond</comments>
		
		<dc:creator><![CDATA[Steffen Seeger]]></dc:creator>
		<pubDate>Wed, 27 May 2020 07:32:00 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[TechStack]]></category>
		<category><![CDATA[Tech-Stack]]></category>
		<guid isPermaLink="false">https://www.inoteq.com/?p=726</guid>

					<description><![CDATA[<p>In unserem ersten Beitrag dieser Reihe werden wir ein Backend zum Speichern und Abfragen der Daten anlegen. Wie der Titel schon verrät wird dieses in der Azure-Cloud hostet. Die von Microsoft entwickelte Cloud-Pattform Azure ist neben Amazon und Google einer der Großen und bietet zahlreiche verschiedene Services an. Der große Vorteil der Cloud liegt vor [&#8230;]</p>
<p>Der Beitrag <a href="https://www.inoteq.com/2020/05/27/backend-mit-azure-cloud/">Backend mit Azure Cloud</a> erschien zuerst auf <a href="https://www.inoteq.com">INOTEQ GmbH</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="726" class="elementor elementor-726" data-elementor-post-type="post">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-f5de9c9 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="f5de9c9" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-dc833ab" data-id="dc833ab" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-e8fd994 elementor-widget elementor-widget-html" data-id="e8fd994" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css" integrity="sha256-VcuSs+n31yebPlEcehu6PvnidJ808ScFBsK8+tJKX+Q=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
<!-- Only for Code Snippet Styles -->		</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-994af93 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="994af93" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d784164" data-id="d784164" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-b42de8e elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="b42de8e" data-element_type="widget" data-widget_type="theme-post-title.default">
				<div class="elementor-widget-container">
			<h1 class="elementor-heading-title elementor-size-default">Backend mit Azure Cloud</h1>		</div>
				</div>
				<div class="elementor-element elementor-element-3731a26 elementor-widget elementor-widget-post-info" data-id="3731a26" data-element_type="widget" data-widget_type="post-info.default">
				<div class="elementor-widget-container">
					<ul class="elementor-inline-items elementor-icon-list-items elementor-post-info">
								<li class="elementor-icon-list-item elementor-repeater-item-05260e6 elementor-inline-item" itemprop="datePublished">
						<a href="https://www.inoteq.com/2020/05/27/">
											<span class="elementor-icon-list-icon">
								<i aria-hidden="true" class="fas fa-calendar"></i>							</span>
									<span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date">
										Mai 27, 2020					</span>
									</a>
				</li>
				<li class="elementor-icon-list-item elementor-repeater-item-076408f elementor-inline-item" itemprop="author">
						<a href="https://www.inoteq.com/author/sdumjahn/">
											<span class="elementor-icon-list-icon">
								<i aria-hidden="true" class="far fa-user-circle"></i>							</span>
									<span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-author">
										Steffen Seeger					</span>
									</a>
				</li>
				<li class="elementor-icon-list-item elementor-repeater-item-7dd0b3c elementor-inline-item" itemprop="about">
										<span class="elementor-icon-list-icon">
								<i aria-hidden="true" class="fas fa-tags"></i>							</span>
									<span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms">
										<span class="elementor-post-info__terms-list">
				<a href="https://www.inoteq.com/tag/tech-stack/" class="elementor-post-info__terms-list-item">Tech-Stack</a>				</span>
					</span>
								</li>
				</ul>
				</div>
				</div>
				<div class="elementor-element elementor-element-b0d4968 elementor-widget elementor-widget-text-editor" data-id="b0d4968" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>In unserem ersten Beitrag dieser Reihe werden wir ein Backend zum Speichern und Abfragen der Daten anlegen. Wie der Titel schon verrät wird dieses in der Azure-Cloud hostet.</p><p>Die von Microsoft entwickelte Cloud-Pattform <strong><em>Azure</em> </strong>ist neben Amazon und Google einer der Großen und bietet zahlreiche verschiedene Services an. Der große Vorteil der Cloud liegt vor Allem darin, dass die Service schnell eingerichtet und danach direkt benutzbar sind. Die Kosten sind dabei überschaubar, da häufig nur für die aktive Nutzungszeit eines Service bezahlt werden muss.</p>						</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-29c2cd3 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="29c2cd3" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d7ec3d2" data-id="d7ec3d2" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-cfd2a69 elementor-widget elementor-widget-heading" data-id="cfd2a69" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Architekturübersicht</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-6b0199f elementor-widget elementor-widget-text-editor" data-id="6b0199f" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Für unser Backend, welcher letztendlich nur ein REST-Service mit einer &#8222;Datenbank&#8220; ist, verwenden wir von Azure folgende Services:</p><ul><li><strong>App-Service</strong>: Hostet den in C# implementierten ASP.NET REST-Service.</li><li><strong>Cosmos-DB</strong>: Speichert die strukturierten Daten als JSON.</li><li><strong>BLOB-Storage</strong>: Speichert alle Binärdaten wie z.B. die Anhänge.</li></ul>						</div>
				</div>
				<div class="elementor-element elementor-element-bee06e9 elementor-widget elementor-widget-image" data-id="bee06e9" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
										<figure class="wp-caption">
											<a href="https://www.inoteq.com/wp-content/uploads/2020/05/Azure.png" data-elementor-open-lightbox="yes" data-elementor-lightbox-title="Azure" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NzkwLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9BenVyZS5wbmcifQ%3D%3D">
							<img loading="lazy" decoding="async" width="682" height="361" src="https://www.inoteq.com/wp-content/uploads/2020/05/Azure.png" class="attachment-large size-large wp-image-790" alt="" srcset="https://www.inoteq.com/wp-content/uploads/2020/05/Azure.png 682w, https://www.inoteq.com/wp-content/uploads/2020/05/Azure-300x159.png 300w" sizes="(max-width: 682px) 100vw, 682px" />								</a>
											<figcaption class="widget-image-caption wp-caption-text">Systemarchitektur des Backends in der Azure Cloud</figcaption>
										</figure>
							</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-1288113 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="1288113" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a8e2b8c" data-id="a8e2b8c" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-ffa2299 elementor-widget elementor-widget-heading" data-id="ffa2299" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Aufsetzen der Cosmos-DB und des BLOB-Storage</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-1d1ef7d elementor-widget elementor-widget-text-editor" data-id="1d1ef7d" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Die Cosmos-DB ist Microsofts Variante einer NoSQL-Datenbank. Sie speichert dabei die Daten als JSON. Im Gegensatz zu anderen NoSQL-Datenbanken bietet Azure als API für die Cosmos-DB verschiedene Standards für die Abfrage an. Neben dem klassiger MongoDB auch SQL oder Cassandra.</p><p>Die Cosmos-DB lässt sich schnell und einfach im Azure Portal erstellen. Dabei ist vor allem die Einstellungen der Firewall entscheidend. Da die Cosmos-DB nur vom REST-Service erreichbar sein soll, erlauben wir nur den Zugriff von bestimmten IP-Adressen. </p>						</div>
				</div>
				<div class="elementor-element elementor-element-3b2419f elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel" data-id="3b2419f" data-element_type="widget" data-settings="{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;effect&quot;:&quot;slide&quot;,&quot;speed&quot;:500}" data-widget_type="image-carousel.default">
				<div class="elementor-widget-container">
					<div class="elementor-image-carousel-wrapper swiper-container" dir="ltr">
			<div class="elementor-image-carousel swiper-wrapper" aria-live="off">
								<div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="1 von 5"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="3b2419f" data-elementor-lightbox-title="cdb_1" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NzU1LCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9jZGJfMS0xLnBuZyIsInNsaWRlc2hvdyI6IjNiMjQxOWYifQ%3D%3D" href="https://www.inoteq.com/wp-content/uploads/2020/05/cdb_1-1.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/cdb_1-1-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Stammdaten der Cosmos-DB" /><figcaption class="elementor-image-carousel-caption">Stammdaten der Cosmos-DB</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="2 von 5"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="3b2419f" data-elementor-lightbox-title="cdb_2" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NzU0LCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9jZGJfMi0xLnBuZyIsInNsaWRlc2hvdyI6IjNiMjQxOWYifQ%3D%3D" href="https://www.inoteq.com/wp-content/uploads/2020/05/cdb_2-1.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/cdb_2-1-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Firewall-Einstellungen" /><figcaption class="elementor-image-carousel-caption">Firewall-Einstellungen</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="3 von 5"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="3b2419f" data-elementor-lightbox-title="cdb_3" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NzUzLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9jZGJfMy0xLnBuZyIsInNsaWRlc2hvdyI6IjNiMjQxOWYifQ%3D%3D" href="https://www.inoteq.com/wp-content/uploads/2020/05/cdb_3-1.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/cdb_3-1-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Anlage der Datenbank" /><figcaption class="elementor-image-carousel-caption">Anlage der Datenbank</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="4 von 5"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="3b2419f" data-elementor-lightbox-title="cdb_4" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NzUyLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9jZGJfNC0xLnBuZyIsInNsaWRlc2hvdyI6IjNiMjQxOWYifQ%3D%3D" href="https://www.inoteq.com/wp-content/uploads/2020/05/cdb_4-1.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/cdb_4-1-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Anlage des Containers" /><figcaption class="elementor-image-carousel-caption">Anlage des Containers</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="5 von 5"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="3b2419f" data-elementor-lightbox-title="cdb_5" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NzUxLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9jZGJfNS0xLnBuZyIsInNsaWRlc2hvdyI6IjNiMjQxOWYifQ%3D%3D" href="https://www.inoteq.com/wp-content/uploads/2020/05/cdb_5-1.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/cdb_5-1-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Keys für den Zugriff" /><figcaption class="elementor-image-carousel-caption">Keys für den Zugriff</figcaption></figure></a></div>			</div>
												<div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0">
						<i aria-hidden="true" class="eicon-chevron-left"></i>					</div>
					<div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
						<i aria-hidden="true" class="eicon-chevron-right"></i>					</div>
				
									<div class="swiper-pagination"></div>
									</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-15e8e0d elementor-widget elementor-widget-text-editor" data-id="15e8e0d" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Der Azure BLOB-Storage dient zum Speichern von Dateien jeglicher Art. Microsoft versteht darunter unter anderem Binärdateien, Bilder, Videos, Audio und Text.</p><p>Die Anlage erfolgt genauso einfach wie die Comsos-DB über das Azure-Portal. Für den Moment belassen wir den Zugriff auf den BLOB-Storage bei Public, da wir sonst im weiteren Verlauf Probleme mit der Firewall bekommen, wenn der im Azure App Service gehostete REST-Service auf den BLOB-Storage zugreifen möchte. Später werden wir den Zugriff noch auf Privat ändern und nur bestimmte Services den Zugriff erlauben.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-48162d7 elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel" data-id="48162d7" data-element_type="widget" data-settings="{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;effect&quot;:&quot;slide&quot;,&quot;speed&quot;:500}" data-widget_type="image-carousel.default">
				<div class="elementor-widget-container">
					<div class="elementor-image-carousel-wrapper swiper-container" dir="ltr">
			<div class="elementor-image-carousel swiper-wrapper" aria-live="off">
								<div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="1 von 3"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="48162d7" data-elementor-lightbox-title="bs_1" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NzYyLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9ic18xLnBuZyIsInNsaWRlc2hvdyI6IjQ4MTYyZDcifQ%3D%3D" href="https://www.inoteq.com/wp-content/uploads/2020/05/bs_1.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/bs_1-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Anlage des Storage Accounts" /><figcaption class="elementor-image-carousel-caption">Anlage des Storage Accounts</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="2 von 3"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="48162d7" data-elementor-lightbox-title="bs_2" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NzYzLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9ic18yLnBuZyIsInNsaWRlc2hvdyI6IjQ4MTYyZDcifQ%3D%3D" href="https://www.inoteq.com/wp-content/uploads/2020/05/bs_2.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/bs_2-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Firewall-Einstellungen" /><figcaption class="elementor-image-carousel-caption">Firewall-Einstellungen</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="3 von 3"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="48162d7" data-elementor-lightbox-title="bs_3" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NzYxLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9ic18zLnBuZyIsInNsaWRlc2hvdyI6IjQ4MTYyZDcifQ%3D%3D" href="https://www.inoteq.com/wp-content/uploads/2020/05/bs_3.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/bs_3-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Anlage von Containern" /><figcaption class="elementor-image-carousel-caption">Anlage von Containern</figcaption></figure></a></div>			</div>
												<div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0">
						<i aria-hidden="true" class="eicon-chevron-left"></i>					</div>
					<div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
						<i aria-hidden="true" class="eicon-chevron-right"></i>					</div>
				
									<div class="swiper-pagination"></div>
									</div>
				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-552d79a elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="552d79a" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-df9826e" data-id="df9826e" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-16985c9 elementor-widget elementor-widget-heading" data-id="16985c9" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Implementierung des REST-Service</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-eab9724 elementor-widget elementor-widget-text-editor" data-id="eab9724" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Für die Implementierung des REST-Service nehmen wir aufgrund der Nähe zu Microsoft ASP.NET mit .NET Core 3.1. Hier implementieren wir einen einfachen REST-Service. Die angebotene Schnittstelle beinhaltet dabei folgende Endpunkte:</p>						</div>
				</div>
				<div class="elementor-element elementor-element-f6faae0 elementor-widget elementor-widget-image" data-id="f6faae0" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
														<a href="https://www.inoteq.com/wp-content/uploads/2020/05/swagger_1-1.png" data-elementor-open-lightbox="yes" data-elementor-lightbox-title="swagger_1" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NzcxLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9zd2FnZ2VyXzEtMS5wbmcifQ%3D%3D">
							<img loading="lazy" decoding="async" width="800" height="481" src="https://www.inoteq.com/wp-content/uploads/2020/05/swagger_1-1-1024x616.png" class="attachment-large size-large wp-image-771" alt="" srcset="https://www.inoteq.com/wp-content/uploads/2020/05/swagger_1-1-1024x616.png 1024w, https://www.inoteq.com/wp-content/uploads/2020/05/swagger_1-1-300x180.png 300w, https://www.inoteq.com/wp-content/uploads/2020/05/swagger_1-1-768x462.png 768w, https://www.inoteq.com/wp-content/uploads/2020/05/swagger_1-1.png 1448w" sizes="(max-width: 800px) 100vw, 800px" />								</a>
													</div>
				</div>
				<div class="elementor-element elementor-element-1d201af elementor-widget elementor-widget-text-editor" data-id="1d201af" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Bei der Implementierung legen wir die zwei Controller <strong><em>TaskController</em></strong> und <strong><em>SearchController</em></strong> an. Die Ausgliederung der Suche machen wir, sodass der Service später um weitere Objekte erweitert werden kann, welche ebenfalls durchsucht werden können.</p><p>Wichtig bei einer Klassenhierarchie ist korrekte Kapseln der Business-Logik. Aus diesem Grund beinhalten die Controller nur die Logik zum Ermitteln der Daten aus der Anfrage und das erstellen der Antwort. Der Zugriff auf die anderen Dienste (Cosmos-DB und BLOB-Storage) werden über den <em><strong>AzureCloudService</strong></em> gekapselt, welcher den Controller über das Interface <strong><em>ICloudService</em> </strong>bereitgestellt wird. Anschließend haben wir noch je einen Service für die Cosmos-DB und den BLOB-Storage.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-133fabc elementor-widget elementor-widget-image" data-id="133fabc" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
										<figure class="wp-caption">
											<a href="https://www.inoteq.com/wp-content/uploads/2020/05/netservice.png" data-elementor-open-lightbox="yes" data-elementor-lightbox-title="netservice" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Nzg2LCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9uZXRzZXJ2aWNlLnBuZyJ9">
							<img loading="lazy" decoding="async" width="736" height="588" src="https://www.inoteq.com/wp-content/uploads/2020/05/netservice.png" class="attachment-large size-large wp-image-786" alt="" srcset="https://www.inoteq.com/wp-content/uploads/2020/05/netservice.png 736w, https://www.inoteq.com/wp-content/uploads/2020/05/netservice-300x240.png 300w" sizes="(max-width: 736px) 100vw, 736px" />								</a>
											<figcaption class="widget-image-caption wp-caption-text">Klassenhierachie des implementierten REST-Service</figcaption>
										</figure>
							</div>
				</div>
				<div class="elementor-element elementor-element-8594055 elementor-widget elementor-widget-text-editor" data-id="8594055" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Im Folgenden ist die vollständige Implementierung der HTTP-Methode für die Anlage eines ToDo-Eintrages in den einzelnen betroffenen Klassen dargestellt.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-baccc36 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs" data-id="baccc36" data-element_type="widget" data-widget_type="tabs.default">
				<div class="elementor-widget-container">
					<div class="elementor-tabs">
			<div class="elementor-tabs-wrapper" role="tablist" >
									<div id="elementor-tab-title-1951" class="elementor-tab-title elementor-tab-desktop-title" aria-selected="true" data-tab="1" role="tab" tabindex="0" aria-controls="elementor-tab-content-1951" aria-expanded="false">TaskController.cs</div>
									<div id="elementor-tab-title-1952" class="elementor-tab-title elementor-tab-desktop-title" aria-selected="false" data-tab="2" role="tab" tabindex="-1" aria-controls="elementor-tab-content-1952" aria-expanded="false">ICloudService.cs</div>
									<div id="elementor-tab-title-1953" class="elementor-tab-title elementor-tab-desktop-title" aria-selected="false" data-tab="3" role="tab" tabindex="-1" aria-controls="elementor-tab-content-1953" aria-expanded="false">AzureCloudService.cs</div>
									<div id="elementor-tab-title-1954" class="elementor-tab-title elementor-tab-desktop-title" aria-selected="false" data-tab="4" role="tab" tabindex="-1" aria-controls="elementor-tab-content-1954" aria-expanded="false">CosmosDbService.cs</div>
									<div id="elementor-tab-title-1955" class="elementor-tab-title elementor-tab-desktop-title" aria-selected="false" data-tab="5" role="tab" tabindex="-1" aria-controls="elementor-tab-content-1955" aria-expanded="false">TaskItem.cs</div>
							</div>
			<div class="elementor-tabs-content-wrapper" role="tablist" aria-orientation="vertical">
									<div class="elementor-tab-title elementor-tab-mobile-title" aria-selected="true" data-tab="1" role="tab" tabindex="0" aria-controls="elementor-tab-content-1951" aria-expanded="false">TaskController.cs</div>
					<div id="elementor-tab-content-1951" class="elementor-tab-content elementor-clearfix" data-tab="1" role="tabpanel" aria-labelledby="elementor-tab-title-1951" tabindex="0" hidden="false"><pre><code class="language-csharp">using System;
using Microsoft.AspNetCore.Mvc;
using RestService.Model;
using RestService.Services;

namespace RestService.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TaskController : ControllerBase
    {
        private readonly ICloudService _cloudService;

        public TaskController(ICloudService cloudService)
        {
            _cloudService = cloudService;
        }

        // POST: api/Task
        [HttpPost]
        public async Task&lt;ActionResult&gt; Post([FromBody] TaskItem item)
        {
            item.Id = Guid.NewGuid().ToString();
            await _cloudService.AddTaskAsync(item).ConfigureAwait(false);

            return Ok(item);
        }
    }
}
</code></pre></div>
									<div class="elementor-tab-title elementor-tab-mobile-title" aria-selected="false" data-tab="2" role="tab" tabindex="-1" aria-controls="elementor-tab-content-1952" aria-expanded="false">ICloudService.cs</div>
					<div id="elementor-tab-content-1952" class="elementor-tab-content elementor-clearfix" data-tab="2" role="tabpanel" aria-labelledby="elementor-tab-title-1952" tabindex="0" hidden="hidden"><pre><code class="language-csharp">using System.Threading.Tasks;
using RestService.Model;

namespace RestService.Services
{
    public interface ICloudService
    {
        public Task AddTaskAsync(TaskItem item);
    }
}
</code></pre></div>
									<div class="elementor-tab-title elementor-tab-mobile-title" aria-selected="false" data-tab="3" role="tab" tabindex="-1" aria-controls="elementor-tab-content-1953" aria-expanded="false">AzureCloudService.cs</div>
					<div id="elementor-tab-content-1953" class="elementor-tab-content elementor-clearfix" data-tab="3" role="tabpanel" aria-labelledby="elementor-tab-title-1953" tabindex="0" hidden="hidden"><pre><code class="language-csharp">using System.Threading.Tasks;
using RestService.Model;

namespace RestService.Services
{
    public class AzureCloudService : ICloudService
    {
        private readonly CosmosDbService _cosmosDb;

        public AzureCloudService(CosmosDbService cosmosDbService)
        {
            _cosmosDb = cosmosDbService;
        }

        public async Task AddTaskAsync(TaskItem item)
        {
            await _cosmosDb.AddTaskAsync(item).ConfigureAwait(false);
        }
    }
}
</code></pre></div>
									<div class="elementor-tab-title elementor-tab-mobile-title" aria-selected="false" data-tab="4" role="tab" tabindex="-1" aria-controls="elementor-tab-content-1954" aria-expanded="false">CosmosDbService.cs</div>
					<div id="elementor-tab-content-1954" class="elementor-tab-content elementor-clearfix" data-tab="4" role="tabpanel" aria-labelledby="elementor-tab-title-1954" tabindex="0" hidden="hidden"><pre><code class="language-csharp">using System.Threading.Tasks;
using Microsoft.Azure.Cosmos;
using Microsoft.Azure.Cosmos.Fluent;
using Microsoft.Extensions.Configuration;
using Nito.AsyncEx;
using RestService.Model;

namespace RestService.Services
{
    public class CosmosDbService
    {
        private static IConfigurationSection _cosmosDbConfig;

        private readonly AsyncLazy&lt;Container&gt; _container = new AsyncLazy&lt;Container&gt;(async () =&gt;
        {
            var databaseName = _cosmosDbConfig.GetSection("DatabaseName").Value;
            var containerName = _cosmosDbConfig.GetSection("ContainerName").Value;
            
            //...

            var container = client.GetContainer(databaseName, containerName);
            return container;
        });

        public CosmosDbService(IConfiguration configuration)
        {
            _cosmosDbConfig = configuration.GetSection("CosmosDb");
        }

        public async Task AddTaskAsync(TaskItem item)
        {
            await (await _container.ConfigureAwait(false)).
                CreateItemAsync(item, new PartitionKey(item.Id));
        }
    }
}
</code></pre></div>
									<div class="elementor-tab-title elementor-tab-mobile-title" aria-selected="false" data-tab="5" role="tab" tabindex="-1" aria-controls="elementor-tab-content-1955" aria-expanded="false">TaskItem.cs</div>
					<div id="elementor-tab-content-1955" class="elementor-tab-content elementor-clearfix" data-tab="5" role="tabpanel" aria-labelledby="elementor-tab-title-1955" tabindex="0" hidden="hidden"><pre><code class="language-csharp">using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using Newtonsoft.Json;

namespace RestService.Model
{
    public class TaskItem
    {
        [Required]
        [JsonProperty(PropertyName = "id")]
        public string Id { get; set; }

        [Required]
        [JsonProperty(PropertyName = "name")]
        public string Name { get; set; }

        [Required]
        [JsonProperty(PropertyName = "priority")]
        public int Priority { get; set; }

        [JsonProperty(PropertyName = "description")]
        public string Description { get; set; }

        [JsonProperty(PropertyName = "attachments")]
        public List<AttachmentItem> Attachments { get; set; }
        
    }
}
</code></pre></div>
							</div>
		</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-9d5a208 elementor-widget elementor-widget-alert" data-id="9d5a208" data-element_type="widget" data-widget_type="alert.default">
				<div class="elementor-widget-container">
					<div class="elementor-alert elementor-alert-warning" role="alert">
			<span class="elementor-alert-title">CORS - Cross-Origin Resource Sharing </span>
							<span class="elementor-alert-description">Bei der Implementierung von REST-Services muss zwingend auf CORS geachtet werden. CORS definiert, welche Methoden und welche Domains die Seite (hier der Service) per Ajax-Requests aufrufen darf. Um jeglichen Aufruf zu erlauben, müssen wir in der Startup.cs-Datei des ASP.NET-Projektes folgenden Code ergänzen:</span>
								</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-877234e elementor-widget elementor-widget-text-editor" data-id="877234e" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
													</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-07e9c1f elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="07e9c1f" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-79e2770" data-id="79e2770" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-e74877a elementor-widget elementor-widget-heading" data-id="e74877a" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Deployment der Komponenten</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-2582300 elementor-widget elementor-widget-text-editor" data-id="2582300" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Für das Deployment des REST-Service können wir Visual Studio verwenden. Es bietet uns direkt die Möglichkeit das Projekt auf ein neuen oder bestehenden App Service zu deployen.</p><p>Nachdem dies erledigt ist, müssen wir nun nochmal zurück zu unsere Firewall. Dazu können wir beim App Service für den REST-Service unter <em>Einstellungen &gt; Eigenschaften</em> die möglichen IP-Adressen unseres REST-Service sehen, welche wir anschließend bei der Cosmos-DB in der Firewall freischalten müssen. </p>						</div>
				</div>
				<div class="elementor-element elementor-element-3963393 elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel" data-id="3963393" data-element_type="widget" data-settings="{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;effect&quot;:&quot;slide&quot;,&quot;speed&quot;:500}" data-widget_type="image-carousel.default">
				<div class="elementor-widget-container">
					<div class="elementor-image-carousel-wrapper swiper-container" dir="ltr">
			<div class="elementor-image-carousel swiper-wrapper" aria-live="off">
								<div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="1 von 4"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="3963393" data-elementor-lightbox-title="publish_1" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODA1LCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9wdWJsaXNoXzEucG5nIiwic2xpZGVzaG93IjoiMzk2MzM5MyJ9" href="https://www.inoteq.com/wp-content/uploads/2020/05/publish_1.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/publish_1-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Öffnen des Publish-Dialoges" /><figcaption class="elementor-image-carousel-caption">Öffnen des Publish-Dialoges</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="2 von 4"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="3963393" data-elementor-lightbox-title="publish_2" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODA0LCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9wdWJsaXNoXzIucG5nIiwic2xpZGVzaG93IjoiMzk2MzM5MyJ9" href="https://www.inoteq.com/wp-content/uploads/2020/05/publish_2.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/publish_2-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Erstellung des neuen App Service" /><figcaption class="elementor-image-carousel-caption">Erstellung des neuen App Service</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="3 von 4"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="3963393" data-elementor-lightbox-title="publish_3" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODAzLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9wdWJsaXNoXzMucG5nIiwic2xpZGVzaG93IjoiMzk2MzM5MyJ9" href="https://www.inoteq.com/wp-content/uploads/2020/05/publish_3.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/publish_3-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Konfiguration des App Service" /><figcaption class="elementor-image-carousel-caption">Konfiguration des App Service</figcaption></figure></a></div><div class="swiper-slide" role="group" aria-roledescription="slide" aria-label="4 von 4"><a data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="3963393" data-elementor-lightbox-title="publish_4" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6ODAyLCJ1cmwiOiJodHRwczpcL1wvd3d3Lmlub3RlcS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjBcLzA1XC9wdWJsaXNoXzQucG5nIiwic2xpZGVzaG93IjoiMzk2MzM5MyJ9" href="https://www.inoteq.com/wp-content/uploads/2020/05/publish_4.png"><figure class="swiper-slide-inner"><img decoding="async" class="swiper-slide-image" src="https://www.inoteq.com/wp-content/uploads/elementor/thumbs/publish_4-p38dbly87pb7454buf3alu0p5ioiwqhjmuypd87u2o.png" alt="Erstelltes Publish-Profil" /><figcaption class="elementor-image-carousel-caption">Erstelltes Publish-Profil</figcaption></figure></a></div>			</div>
												<div class="elementor-swiper-button elementor-swiper-button-prev" role="button" tabindex="0">
						<i aria-hidden="true" class="eicon-chevron-left"></i>					</div>
					<div class="elementor-swiper-button elementor-swiper-button-next" role="button" tabindex="0">
						<i aria-hidden="true" class="eicon-chevron-right"></i>					</div>
				
									<div class="swiper-pagination"></div>
									</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-80ec058 elementor-widget elementor-widget-text-editor" data-id="80ec058" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Wenn wir nun einen REST-Endpunkt mit URL vom App Service aufrufen, erhalten wir die entsprechende Antwort mit Daten.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-62bb2c5 elementor-widget elementor-widget-alert" data-id="62bb2c5" data-element_type="widget" data-widget_type="alert.default">
				<div class="elementor-widget-container">
					<div class="elementor-alert elementor-alert-info" role="alert">
			<span class="elementor-alert-title">Testen von REST-Service</span>
							<span class="elementor-alert-description">Zum Testen eines REST-Service empfehlen wir Postman (https://www.postman.com/). Es ermöglicht das einfache Senden von Anfragen mit beliebigen Methoden (GET, POST, PUT, ...) inkl. Daten in beliebigen Formaten (Form, JSON, RAW, ...). </span>
								</div>
				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-d1268c5 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="d1268c5" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3920da7" data-id="3920da7" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-31a15ef elementor-post-navigation-borders-yes elementor-widget elementor-widget-post-navigation" data-id="31a15ef" data-element_type="widget" data-widget_type="post-navigation.default">
				<div class="elementor-widget-container">
					<div class="elementor-post-navigation">
			<div class="elementor-post-navigation__prev elementor-post-navigation__link">
				<a href="https://www.inoteq.com/2020/05/19/blaupause-cloud-native-anwendung/" rel="prev"><span class="post-navigation__arrow-wrapper post-navigation__arrow-prev"><i class="fa fa-angle-double-left" aria-hidden="true"></i><span class="elementor-screen-only">Prev</span></span><span class="elementor-post-navigation__link__prev"><span class="post-navigation__prev--label">Voriger</span><span class="post-navigation__prev--title">Blaupause einer Cloud-Native Anwendung</span></span></a>			</div>
							<div class="elementor-post-navigation__separator-wrapper">
					<div class="elementor-post-navigation__separator"></div>
				</div>
						<div class="elementor-post-navigation__next elementor-post-navigation__link">
				<a href="https://www.inoteq.com/2020/06/01/backend-mit-aws/" rel="next"><span class="elementor-post-navigation__link__next"><span class="post-navigation__next--label">Nächster</span><span class="post-navigation__next--title">Backend mit Amazon Web Services</span></span><span class="post-navigation__arrow-wrapper post-navigation__arrow-next"><i class="fa fa-angle-double-right" aria-hidden="true"></i><span class="elementor-screen-only">Nächster</span></span></a>			</div>
		</div>
				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-f271f78 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="f271f78" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e4bf671" data-id="e4bf671" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
							</div>
		</div>
					</div>
		</section>
				</div>
		<p>Der Beitrag <a href="https://www.inoteq.com/2020/05/27/backend-mit-azure-cloud/">Backend mit Azure Cloud</a> erschien zuerst auf <a href="https://www.inoteq.com">INOTEQ GmbH</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.inoteq.com/2020/05/27/backend-mit-azure-cloud/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Blaupause einer Cloud-Native Anwendung</title>
		<link>https://www.inoteq.com/2020/05/19/blaupause-cloud-native-anwendung/</link>
					<comments>https://www.inoteq.com/2020/05/19/blaupause-cloud-native-anwendung/#respond</comments>
		
		<dc:creator><![CDATA[Steffen Seeger]]></dc:creator>
		<pubDate>Tue, 19 May 2020 12:01:43 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[TechStack]]></category>
		<category><![CDATA[Tech-Stack]]></category>
		<guid isPermaLink="false">https://www.inoteq.com/?p=710</guid>

					<description><![CDATA[<p>Möchte man heutzutage eine Anwendung entwickeln, so steht man vor der großen Auswahl an verschiedenen Technologien. Dies umfasst nicht nur die Art, wie der Anwender mit dem Anwendung interagiert (z.B. Handy-App oder Web-Site), sondern auch wie die Anwendung betrieben wird (Server mieten oder Cloud-Hosting). Da die Möglichkeiten schier unendlich sind und man somit vor der [&#8230;]</p>
<p>Der Beitrag <a href="https://www.inoteq.com/2020/05/19/blaupause-cloud-native-anwendung/">Blaupause einer Cloud-Native Anwendung</a> erschien zuerst auf <a href="https://www.inoteq.com">INOTEQ GmbH</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="710" class="elementor elementor-710" data-elementor-post-type="post">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-0393c25 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="0393c25" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d18f8b6" data-id="d18f8b6" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-31e90b0 elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="31e90b0" data-element_type="widget" data-widget_type="theme-post-title.default">
				<div class="elementor-widget-container">
			<h1 class="elementor-heading-title elementor-size-default">Blaupause einer Cloud-Native Anwendung</h1>		</div>
				</div>
				<div class="elementor-element elementor-element-15f9ad6 elementor-widget elementor-widget-post-info" data-id="15f9ad6" data-element_type="widget" data-widget_type="post-info.default">
				<div class="elementor-widget-container">
					<ul class="elementor-inline-items elementor-icon-list-items elementor-post-info">
								<li class="elementor-icon-list-item elementor-repeater-item-82ee25d elementor-inline-item" itemprop="datePublished">
						<a href="https://www.inoteq.com/2020/05/19/">
											<span class="elementor-icon-list-icon">
								<i aria-hidden="true" class="fas fa-calendar"></i>							</span>
									<span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date">
										Mai 19, 2020					</span>
									</a>
				</li>
				<li class="elementor-icon-list-item elementor-repeater-item-7958a53 elementor-inline-item" itemprop="author">
						<a href="https://www.inoteq.com/author/sdumjahn/">
											<span class="elementor-icon-list-icon">
								<i aria-hidden="true" class="far fa-user-circle"></i>							</span>
									<span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-author">
										Steffen Seeger					</span>
									</a>
				</li>
				<li class="elementor-icon-list-item elementor-repeater-item-82d3c8f elementor-inline-item" itemprop="about">
										<span class="elementor-icon-list-icon">
								<i aria-hidden="true" class="fas fa-tags"></i>							</span>
									<span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms">
										<span class="elementor-post-info__terms-list">
				<a href="https://www.inoteq.com/tag/tech-stack/" class="elementor-post-info__terms-list-item">Tech-Stack</a>				</span>
					</span>
								</li>
				</ul>
				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-f24d047 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="f24d047" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0c1d992" data-id="0c1d992" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-773e2b1 elementor-widget elementor-widget-text-editor" data-id="773e2b1" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Möchte man heutzutage eine Anwendung entwickeln, so steht man vor der großen Auswahl an verschiedenen Technologien. Dies umfasst nicht nur die Art, wie der Anwender mit dem Anwendung interagiert (z.B. Handy-App oder Web-Site), sondern auch wie die Anwendung betrieben wird (Server mieten oder Cloud-Hosting).</p><p>Da die Möglichkeiten schier unendlich sind und man somit vor der Qual der Wahl steht, werden wir uns hier einige moderne und vielversprechende Technologien anschauen. Dabei werden wir eine kleine Anwendung entwickeln, welche typische Szenarien abdeckt und dabei aktuelle Tools und Frameworks verwendet.</p><p>Daher wird es in den nächsten Wochen/Monaten verschiedene Beiträge geben, welche die Implementierung der einzelnen Bestandteile der Anwendung beschreiben. Dabei werden wir bewusst einige Komponenten doppelt entwickeln, da es doch gute Vor- und Nachteile der verschiedenen betrachteten Möglichkeiten gibt. Letztendlich wird es kein &#8222;So wird es gemacht&#8220; geben, sondern mehr ein &#8222;So könnte es gemacht werden&#8220;. Abhängig von den konkreten Bedürfnissen an Features für die Anwendung und das vorhandene Know-How ist die ein oder andere Lösung passender.</p>						</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-587a0b4 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="587a0b4" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6c17791" data-id="6c17791" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-45ccdee elementor-widget elementor-widget-heading" data-id="45ccdee" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Verwendete Technologien</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-bcdb075 elementor-widget elementor-widget-text-editor" data-id="bcdb075" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Bei den einzusetzenden Technologien werden wir diese grob in Frontend und Backend unterscheiden. </p><p>Im Frontend wird alles behandelt, was der Anwender zu Gesicht bekommt und damit praktisch bedient. Im Backend wird es vor Allem um das Speichern der Daten gehen, welche der Anwender beim Benutzen des Frontends mit der Anwendung erzeugt. Das Backend wird somit ausschließlich von der Anwendung verwendet.</p>						</div>
				</div>
				<section class="elementor-section elementor-inner-section elementor-element elementor-element-2f1e5c8 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="2f1e5c8" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-2a427c8" data-id="2a427c8" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-28456c7 elementor-widget elementor-widget-heading" data-id="28456c7" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h3 class="elementor-heading-title elementor-size-default">Frontend</h3>		</div>
				</div>
				<div class="elementor-element elementor-element-5a765f0 elementor-widget elementor-widget-text-editor" data-id="5a765f0" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<ul><li>Single-Page Application mit <strong>Angular</strong></li><li>Hybrid Mobile App mit <strong>React Native</strong></li></ul>						</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-3d3f247" data-id="3d3f247" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-727c082 elementor-widget elementor-widget-heading" data-id="727c082" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h3 class="elementor-heading-title elementor-size-default">Backend</h3>		</div>
				</div>
				<div class="elementor-element elementor-element-bb3994b elementor-widget elementor-widget-text-editor" data-id="bb3994b" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<ul><li>REST-Service mit <strong>C#</strong> und <strong>Azure Clound</strong></li><li>Serverless Cloud in <strong>Python</strong> mit <strong>AWS</strong></li></ul>						</div>
				</div>
					</div>
		</div>
					</div>
		</section>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-e336f4f elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="e336f4f" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-438e72d" data-id="438e72d" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-44dfb1c elementor-widget elementor-widget-heading" data-id="44dfb1c" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Umfang der Anwendung</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-bf59ab7 elementor-widget elementor-widget-text-editor" data-id="bf59ab7" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Unsere Anwendung wird eine einfache <b>ToDo-Liste</b> sein, in der Aufgaben erstellt und verwaltet werden können.</p><p>Folgende Funktionen wird die Anwendung beinhalten:</p><ul><li>Es soll die Anlage, Auflistung, Anzeige, Bearbeitung und Löschung von ToDo-Aufgaben möglich sein.</li><li>Aufgaben bestehen aus den Feldern: Name, Priorität und Beschreibung. Intern wird noch eine ID vorhanden sein.</li><li>Aufgaben können 0 bis unendlich viele Anhänge von verschiedenen Dateitypen (Bilder, Video, Text, &#8230;) haben.</li><li>Anhänge können dabei pro Aufgabe hinzugefügt, angezeigt und gelöscht werden.</li><li style="font-size: 16px;">Es werden mehrere Sprachen unterstützt.</li><li>Die Daten werden über einen REST-Service abgerufen und gespeichert. Der REST-Service bietet dabei CRUD-Operationen auf die von der Anwendung verwendeten Elemente an.</li></ul><div> </div><div>Später wird noch eine einfache Benutzerverwaltung hinzugefügt, sodass beim Anlegen und Ändern einer Aufgabe sichtbar ist, wer dies gemacht hat.</div>						</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-3e8a51f elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="3e8a51f" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f3dafe1" data-id="f3dafe1" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-5efdc12 elementor-widget elementor-widget-heading" data-id="5efdc12" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Beitragsserie</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-b356087 elementor-widget elementor-widget-text-editor" data-id="b356087" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							<p>Um die Beiträge besser finden zu können, ist hier eine Liste der aktuell vorhandenen Beiträge. Diese wird im Laufe der Zeit um weitere Beiträge ergänzt.</p>						</div>
				</div>
				<div class="elementor-element elementor-element-dab8122 elementor-posts--thumbnail-none elementor-grid-3 elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-card-shadow-yes elementor-posts__hover-gradient elementor-widget elementor-widget-posts" data-id="dab8122" data-element_type="widget" data-settings="{&quot;cards_columns&quot;:&quot;3&quot;,&quot;cards_columns_tablet&quot;:&quot;2&quot;,&quot;cards_columns_mobile&quot;:&quot;1&quot;,&quot;cards_row_gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:35,&quot;sizes&quot;:[]},&quot;cards_row_gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;cards_row_gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}" data-widget_type="posts.cards">
				<div class="elementor-widget-container">
					<div class="elementor-posts-container elementor-posts elementor-posts--skin-cards elementor-grid">
				<article class="elementor-post elementor-grid-item post-710 post type-post status-publish format-standard has-post-thumbnail hentry category-blog category-techstack tag-tech-stack">
			<div class="elementor-post__card">
				<div class="elementor-post__text">
				<h3 class="elementor-post__title">
			<a href="https://www.inoteq.com/2020/05/19/blaupause-cloud-native-anwendung/" >
				Blaupause einer Cloud-Native Anwendung			</a>
		</h3>
				<div class="elementor-post__excerpt">
			<p>Möchte man heutzutage eine Anwendung entwickeln, so steht man vor der großen Auswahl an verschiedenen Technologien. Dies umfasst nicht nur die Art, wie der Anwender</p>
		</div>
		
		<a class="elementor-post__read-more" href="https://www.inoteq.com/2020/05/19/blaupause-cloud-native-anwendung/" aria-label="Read more about Blaupause einer Cloud-Native Anwendung" tabindex="-1" >
			Weiterlesen »		</a>

				</div>
					</div>
		</article>
				<article class="elementor-post elementor-grid-item post-726 post type-post status-publish format-standard has-post-thumbnail hentry category-blog category-techstack tag-tech-stack">
			<div class="elementor-post__card">
				<div class="elementor-post__text">
				<h3 class="elementor-post__title">
			<a href="https://www.inoteq.com/2020/05/27/backend-mit-azure-cloud/" >
				Backend mit Azure Cloud			</a>
		</h3>
				<div class="elementor-post__excerpt">
			<p>In unserem ersten Beitrag dieser Reihe werden wir ein Backend zum Speichern und Abfragen der Daten anlegen. Wie der Titel schon verrät wird dieses in</p>
		</div>
		
		<a class="elementor-post__read-more" href="https://www.inoteq.com/2020/05/27/backend-mit-azure-cloud/" aria-label="Read more about Backend mit Azure Cloud" tabindex="-1" >
			Weiterlesen »		</a>

				</div>
					</div>
		</article>
				<article class="elementor-post elementor-grid-item post-778 post type-post status-publish format-standard has-post-thumbnail hentry category-blog category-techstack tag-tech-stack">
			<div class="elementor-post__card">
				<div class="elementor-post__text">
				<h3 class="elementor-post__title">
			<a href="https://www.inoteq.com/2020/06/01/backend-mit-aws/" >
				Backend mit Amazon Web Services			</a>
		</h3>
				<div class="elementor-post__excerpt">
			<p>In unserem zweiten Artikel  dieser Serie werden wir erneut ein Backend zum Speichern und Abfragen von Daten erstellen. Als Cloud-Anbieter werden jetzt die Amazon Web</p>
		</div>
		
		<a class="elementor-post__read-more" href="https://www.inoteq.com/2020/06/01/backend-mit-aws/" aria-label="Read more about Backend mit Amazon Web Services" tabindex="-1" >
			Weiterlesen »		</a>

				</div>
					</div>
		</article>
				<article class="elementor-post elementor-grid-item post-1611 post type-post status-publish format-standard has-post-thumbnail hentry category-blog category-techstack tag-tech-stack">
			<div class="elementor-post__card">
				<div class="elementor-post__text">
				<h3 class="elementor-post__title">
			<a href="https://www.inoteq.com/2021/06/18/skalierbare-angular-frontends/" >
				Skalierbare und moderne Web-Frontends mit Angular			</a>
		</h3>
				<div class="elementor-post__excerpt">
			<p>Nachdem wir für unsere Anwendung das Backend implementiert haben, widmet sich dieser Artikel der Erstellung eines Frontends. Hierzu verwenden wir das Framework Angular und erstellen</p>
		</div>
		
		<a class="elementor-post__read-more" href="https://www.inoteq.com/2021/06/18/skalierbare-angular-frontends/" aria-label="Read more about Skalierbare und moderne Web-Frontends mit Angular" tabindex="-1" >
			Weiterlesen »		</a>

				</div>
					</div>
		</article>
				</div>
		
				</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				<section class="elementor-section elementor-top-section elementor-element elementor-element-ee2e864 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="ee2e864" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5350f6a" data-id="5350f6a" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
							</div>
		</div>
					</div>
		</section>
				</div>
		<p>Der Beitrag <a href="https://www.inoteq.com/2020/05/19/blaupause-cloud-native-anwendung/">Blaupause einer Cloud-Native Anwendung</a> erschien zuerst auf <a href="https://www.inoteq.com">INOTEQ GmbH</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.inoteq.com/2020/05/19/blaupause-cloud-native-anwendung/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
