{"id":7292,"date":"2020-11-27T06:47:37","date_gmt":"2020-11-27T05:47:37","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/build-chat-app-using-aws-amplify-with-angular\/"},"modified":"2020-11-27T06:47:37","modified_gmt":"2020-11-27T05:47:37","slug":"build-chat-app-using-aws-amplify-with-angular","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/","title":{"rendered":"Build Chat App using AWS Amplify with Angular"},"content":{"rendered":"\n<p>This article is to explain how to build a real time <a href=\"https:\/\/www.unimedia.tech\/software-maintenance\/\">application <\/a>very rapidly using AWS Amplify with Angular. One of the integrations carried out within the <a href=\"https:\/\/www.unimedia.tech\/de\/bespoke-software-development\/\">custom software development<\/a> service and in our <a href=\"https:\/\/www.unimedia.tech\/de\/engagierte-entwicklungsteams\/\">dedicated development teams<\/a><\/p>\n\n\n\n<p>You may also be interested in: <a href=\"https:\/\/www.unimedia.tech\/2021\/03\/07\/stripe-checkout-using-stripe-elements\/\">&#8220;Stripe checkout page using Stripe Elements&#8221;<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6289\">What is AWS Amplify?<\/h3>\n\n\n\n<p id=\"6841\">From their website:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p><em>AWS Amplify is a set of tools and services that enables mobile and front-end web developers to build secure, scalable full stack applications, powered by AWS.<\/em><\/p><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Prerequisites:<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Node.js version 10 or later<\/li><li>AWS Account<\/li><li>Angular CLI version 10 or later<\/li><li>Basic understanding of Angular concepts<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create the skeleton of the chat application using Angular CLI<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>npx ng new amplify-chat-angular<\/code><\/pre>\n\n\n\n<p> <\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Setting up the project<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<p>For this tutorial, we\u2019ll be using AWS Amplify to power our API, real-time messaging, authentication in our Angular app.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install --save aws-amplify<\/code><\/pre>\n\n\n\n<p>Then run the following, to initialize our Angular app as an Amplify project.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>amplify init<\/code><\/pre>\n\n\n\n<p>You will be prompted to answer a few questions about your project.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Enter a name for the project (amplifychatangular)\n# For this tutorial, we'll only use the dev environment\nEnter a name for the environment (dev)\n# Here, just choose the editor you want to associate with Amplify\nChoose your default editor\n# Since we're building a Angular app, choose JavaScript and React\nChoose the type of app that you're building (javascript)\nWhat JavaScript framework are you using (angular)\n# Choose the default options for these\nSource directory path (src)\nDistribution directory path (build)\nBuild command (npm run build)\nStart command (npm run start)\n# Remember the profile you created when you configured AWS Amplify?\n# Let's choose that profile in this step\nDo you want to use an AWS profile<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>After answering all these questions, Amplify should have auto generated an <strong>aws-export.js<\/strong> file which later is used to save all the amplify config.<\/p>\n\n\n\n<p id=\"0328\">Now all that\u2019s left is to configure our Angular app to use AWS Amplify.<\/p>\n\n\n\n<p id=\"894e\">Open&nbsp;<strong>src\/main.ts<\/strong>&nbsp;and add the following lines after the last import statement.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Amplify from '@aws-amplify\/core';\nimport awsExports from '.\/aws-exports';\n\n\nAmplify.configure(awsExports);<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>And that\u2019s it. You\u2019ve successfully configured an Angular app to use AWS Amplify.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"517d\">Setting up the GraphQL API and model<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<p id=\"3892\">The next step would be adding the API and our model. For this tutorial, we\u2019ll be using a GraphQL API so run the following to add an AppSync GraphQL API to our app.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>amplify add api<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>When prompted, choose the default options and the CLI should open a GraphQL schema that would look like this.<\/p>\n\n\n\n<p><strong>File<\/strong>: amplify\/backend\/api\/amplifychatangular\/schema.graphql<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>type Todo @model {\n  id: ID!\n  name: String!\n  description: String\n}<\/code><\/pre>\n\n\n\n<p>Since we\u2019re building a chat app, a Todo model doesn\u2019t really work for us. So let\u2019s change that.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>type Message\n  @model\n  @key(name: \"byChannelID\", fields: &#91;\"channelID\", \"createdAt\"], queryField: \"messagesByChannelID\") {\n  id: ID!\n  channelID: ID!\n  author: String!\n  body: String!\n  createdAt: AWSDateTime\n  updatedAt: AWSDateTime\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p id=\"745f\">Here, we are creating a&nbsp;<code>Message<\/code>&nbsp;model with the fields&nbsp;<code>id<\/code>,&nbsp;<code>author<\/code>&nbsp;(which is the name of the author),&nbsp;<code>body<\/code>,&nbsp;<code>createdAt<\/code>, and&nbsp;<code>updatedAt<\/code>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Explanation:<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>@key(name: &#8220;byChannelID&#8221;, fields: [&#8220;channelID&#8221;, &#8220;createdAt&#8221;], queryField: &#8220;messagesByChannelID&#8221;<\/strong><br><br><br><br><br><\/td><\/tr><tr><td><strong>AWSDateTime<\/strong><br>   <br>   <br><br><\/td><\/tr><tr><td><strong>ID<\/strong><\/td><\/tr><tr><td><strong>author<\/strong><\/td><\/tr><tr><td><strong>body<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-table\"><table><tbody><tr><td>We created a new index for the Messages table. We have added&nbsp;<code>@key<\/code>&nbsp;which is an&nbsp;<a href=\"https:\/\/docs.amplify.aws\/cli\/graphql-transformer\/directives\">AWS Amplify GraphQL directive<\/a>, like&nbsp;<code><strong>@model<\/strong><\/code>. This basically tells <strong>AppSync <\/strong>to create a secondary key with the name of&nbsp;<code><strong>byChannelID<\/strong><\/code>. The&nbsp;<code>fields<\/code>&nbsp;array comprises our new key. The first field here will always be the&nbsp;<em><strong>hash key<\/strong><\/em>&nbsp;and the second one, our&nbsp;<em><strong>sort <\/strong>key<\/em>. Lastly, the&nbsp;<strong><code>queryField<\/code>&nbsp;<\/strong>parameter tells AppSync to create a new query operation using this newly created key with the value of&nbsp;<strong><code>queryField<\/code>&nbsp;<\/strong>as the name.<\/td><\/tr><tr><td><strong><code>AWSDateTime<\/code>&nbsp;<\/strong>is a scalar type provided by AWS AppSync. It\u2019s basically a string in the form of&nbsp;<code>YYYY-MM-DDThh:mm:ss.sssZ<\/code>. You can read more about AppSync scalar types&nbsp;<a href=\"https:\/\/docs.aws.amazon.com\/appsync\/latest\/devguide\/scalars.html\">here<\/a>. This will be automatically set by AppSync on mutations.<\/td><\/tr><tr><td>Unique Id of the message<\/td><\/tr><tr><td>Name of the author<\/td><\/tr><tr><td>Message Content<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p id=\"abf8\"><\/p>\n\n\n\n<p id=\"f460\">Save, exit, then run the following command to provision the API in the cloud. Again, choose the default options for the prompts.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>amplify push<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p id=\"ef90\">This might take a while so grab a cup of coffee.<\/p>\n\n\n\n<p id=\"a9d0\">Once this finishes, congratulations! Your API is now live. You can now start making GraphQL queries and mutations on it. It\u2019s so easy it\u2019s like cheating right?<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>When you ran&nbsp;<code><strong>amplify push<\/strong><\/code>, you saw a bunch of things happening. These logs are AWS CloudFormation commands being executed to provision your app in AWS including setting up AppSync, DynamoDB, attaching IAM roles, and a few other things \u2013 things that you normally wouldn&#8217;t want to touch as a mobile or front-end developer. The Amplify CLI tool abstracted those away into one simple command.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">GraphQL Mutation, Query &amp; Resolver Generator<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Amplify should have automatically generated angular specific, Mutation &amp; Query automatically relevant to the model that we have created.<\/p>\n\n\n\n<p>Check <strong>src\/app\/API.service.ts<\/strong> for the reference, using API service, we will be able to do, createMessage, updateMessage, listMessages, deleteMessages and etc.<\/p>\n\n\n\n<p>It also generates real-time graphql subscriptions, for which we don&#8217;t have to make any web socket connections explicitly, all will be managed by Amplify.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7801\">Setting up the UI<\/h3>\n\n\n\n<p id=\"fc96\">Before we get to the good part, we\u2019ll be setting up our UI: a list of messages and a chat bar \u2014 nothing too fancy!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>So to do that, open&nbsp;<strong>src\/app.component.html<\/strong>&nbsp;and add the below given code.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"root\"&gt;\n  &lt;div class=\"container\"&gt;\n    &lt;div class=\"messages\"&gt;\n      &lt;div class=\"messages-scroller\"&gt;\n        &lt;ng-container *ngFor=\"let message of messages\"&gt;\n          &lt;div &#91;ngClass]=\"message.author === username ? 'message me' : 'message'\"&gt;\n            {{message.body}}\n          &lt;\/div&gt;\n        &lt;\/ng-container&gt;\n      &lt;\/div&gt;\n\n    &lt;\/div&gt;\n    &lt;div class=\"chat-bar\"&gt;\n      &lt;div class=\"form\"&gt;\n        &lt;input #messageInput type=\"text\" name=\"messageBody\" placeholder=\"Type your message here\" value=\"\n          (keyup.enter)=\"send($event, messageInput)\" \/&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Then open&nbsp;<strong>style.scss<\/strong>&nbsp;and replace the contents with the following code so we\u2019ll have a nice look to our view.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* You can add global styles to this file, and also import other style files *\/\n* {\n  box-sizing: border-box;\n  font-family: 'Roboto', sans-serif;\n}\n\nhtml, body {\n  height: 100%;\n  margin: 0;\n}\n\n#root {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #f8f8f8;\n  height: 100%;\n}\n\n.container {\n  display: flex;\n  flex-direction: column;\n  width: 540px;\n  height: 680px;\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.0);\n}\n\n.messages {\n  flex: 1;\n  position: relative;\n}\n\n.messages-scroller {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  overflow-y: scroll;\n}\n\n.message {\n  align-self: flex-start;\n  margin-top: 4px;\n  padding: 8px 12px;\n  max-width: 240px;\n  background: #f1f0f0;\n  border-radius: 16px;\n  font-size: 14px;\n}\n\n.message.me {\n  align-self: flex-end;\n  background: #2196F3;\n  color: white;\n  width: fit-content;\n\/\/   margin: 10px;\n}\n\n.chat-bar {\n  height: 64px;\n  border-top: 1px solid #ddd;\n}\n\n.chat-bar .form {\n  height: 100%;\n  padding: 16px;\n}\n\n.chat-bar .form input {\n  width: 100%;\n  height: 32px;\n  padding: 8px 16px;\n  border: 1px solid #ddd;\n  border-radius: 16px;\n  outline: none;\n}\n\n.chat-bar .form input:focus {\n  border: 1px solid #2196F3;\n}\n\n\/* width *\/\n::-webkit-scrollbar {\n  width: 10px;\n}\n\n\/* Track *\/\n::-webkit-scrollbar-track {\n  background: #f1f1f1; \n}\n \n\/* Handle *\/\n::-webkit-scrollbar-thumb {\n  background: #888; \n}\n\n\/* Handle on hover *\/\n::-webkit-scrollbar-thumb:hover {\n  background: #555; \n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>It doesn\u2019t do much for now so let\u2019s load the messages we created in the previous article and hook up the event handlers.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Loading \/ Sending messages real time<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p id=\"f5f7\">We\u2019ll want to load messages when our app component gets loaded, and to do that we\u2019ll use <strong>APIService<\/strong>, and the Amplify API library.<\/p>\n\n\n\n<p id=\"8ee3\">Open up&nbsp;<strong>src\/app.component.ts<\/strong>&nbsp;and import the&nbsp;<strong><code>APIService<\/code>&nbsp;<\/strong>and&nbsp;<strong><code>Router<\/code> <\/strong>and inject them in constructor.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  constructor(\n    private api: APIService,\n    private router: Router\n  ) { }<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Now we need create event handlers<\/p>\n\n\n\n<p><strong>listMessages<\/strong> =&gt; to Load the previously sent \/ received messages<\/p>\n\n\n\n<p><strong>send<\/strong> =&gt; To send the message<\/p>\n\n\n\n<p><strong>onCreateMessage <\/strong>=&gt; Listen to real time message add event<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>listMessages<\/strong>: Here we are fetching the massages by channel Id using MessagesByChannelId(graphql query), user can use dynamic channel ID.<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>  listMessages(): void {\n    this.api.MessagesByChannelId('1').then((val) =&gt; {\n      console.log(val);\n      this.messages = val.items;\n    });\n  }<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>2. <strong>send<\/strong>: We will use this method to send the message written by the user to a specific channel using <strong>CreateMessage<\/strong> graphql Mutation.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  send(event, inputElement: HTMLInputElement): void {\n    event.preventDefault();\n    event.stopPropagation();\n    const input = {\n      channelID: '1',\n      author: this.username.trim(),\n      body: inputElement.value.trim()\n    };\n    this.api.CreateMessage(input).then((val) =&gt; {\n      console.log('Send Message Success =&gt;', val);\n      inputElement.value = '';\n    });\n  }<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>3. <strong>onCreateMessage<\/strong>: We will use graphql subscription to listen realtime message create event. Whenever anyone adds any message to channel &#8220;1&#8221;, This event will be triggered.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  onCreateMessage(): void {\n    this.api.OnCreateMessageListener.subscribe(\n      {\n        next: (val: any) =&gt; {\n          console.log(val);\n          this.messages.push(val.value.data.onCreateMessage);\n        }\n      }\n    );\n  }<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Full Code for <strong>app.component.ts<\/strong> file can be found <a href=\"https:\/\/github.com\/unimedia-technology\/amplify-chat-angular\/blob\/master\/src\/app\/app.component.ts\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<p>Full Code for the whole app implementation can be found <a href=\"https:\/\/github.com\/unimedia-technology\/amplify-chat-angular\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Working Demo<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2020\/10\/Build-Chat-App-using-Amplify-with-Angular.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Unimedia Technology<\/h3>\n\n\n\n<p>Here at&nbsp;<a href=\"https:\/\/www.unimedia.tech\/de\/\">Unimedia Technology<\/a>&nbsp;we have a team of&nbsp;<strong>Angular Developers<\/strong>&nbsp;that can develop your most challenging Web Dashboards and Web apps using the latest AWS technologies.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article is to explain how to build a real time application very rapidly using AWS Amplify with Angular.<\/p>\n","protected":false},"author":6,"featured_media":6565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197,200,219],"tags":[],"class_list":["post-7292","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-de","category-aws-de","category-technical-guides-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.6 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build Chat App using AWS Amplify with Angular - Unimedia Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Chat App using AWS Amplify with Angular\" \/>\n<meta property=\"og:description\" content=\"This article is to explain how to build a real time application very rapidly using AWS Amplify with Angular.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Unimedia Technology\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.linkedin.com\/company\/unimedia-technology\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-27T05:47:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/aws-amplify-angular-1-1-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1120\" \/>\n\t<meta property=\"og:image:height\" content=\"660\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Unimedia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:site\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"8\u00a0Minuten\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build Chat App using AWS Amplify with Angular - Unimedia Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/","og_locale":"de_DE","og_type":"article","og_title":"Build Chat App using AWS Amplify with Angular","og_description":"This article is to explain how to build a real time application very rapidly using AWS Amplify with Angular.","og_url":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/","og_site_name":"Unimedia Technology","article_publisher":"https:\/\/www.linkedin.com\/company\/unimedia-technology\/","article_published_time":"2020-11-27T05:47:37+00:00","og_image":[{"width":1120,"height":660,"url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/aws-amplify-angular-1-1-4.png","type":"image\/png"}],"author":"Unimedia","twitter_card":"summary_large_image","twitter_creator":"@UnimediaCTO","twitter_site":"@UnimediaCTO","twitter_misc":{"Verfasst von":"Unimedia","Gesch\u00e4tzte Lesezeit":"8\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Build Chat App using AWS Amplify with Angular","datePublished":"2020-11-27T05:47:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/"},"wordCount":1003,"publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/aws-amplify-angular-1-1-4.png","articleSection":["Angular","AWS","Technical Guides"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/","url":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/","name":"Build Chat App using AWS Amplify with Angular - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/aws-amplify-angular-1-1-4.png","datePublished":"2020-11-27T05:47:37+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/#primaryimage","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/aws-amplify-angular-1-1-4.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/aws-amplify-angular-1-1-4.png","width":1120,"height":660,"caption":"Chat with Angular AWS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.unimedia.tech\/de\/build-chat-app-using-aws-amplify-with-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/de\/"},{"@type":"ListItem","position":2,"name":"Build Chat App using AWS Amplify with Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/de\/#website","url":"https:\/\/www.unimedia.tech\/de\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/de\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","width":403,"height":309,"caption":"Unimedia Technology"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/unimedia-technology\/","https:\/\/x.com\/UnimediaCTO","https:\/\/www.instagram.com\/unimedia.technology\/"]},{"@type":"Person","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","caption":"Unimedia"}}]}},"_links":{"self":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts\/7292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/comments?post=7292"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts\/7292\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media\/6565"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media?parent=7292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/categories?post=7292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/tags?post=7292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}