{"id":7173,"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":"2024-01-16T17:11:58","modified_gmt":"2024-01-16T16:11:58","slug":"build-chat-app-using-aws-amplify-with-angular","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/ca\/build-chat-app-using-aws-amplify-with-angular\/","title":{"rendered":"Crear una aplicaci\u00f3 de xat utilitzant AWS Amplify amb Angular"},"content":{"rendered":"&#13;\n<p>Aquest article \u00e9s per explicar com crear una <a href=\"https:\/\/www.unimedia.tech\/software-maintenance\/\">aplicaci\u00f3<\/a> en temps real molt r\u00e0pidament mitjan\u00e7ant AWS Amplify amb Angular. Una de les integracions realitzades dins del servei <a href=\"https:\/\/www.unimedia.tech\/software-development\/\">de desenvolupament de software personalitzat<\/a> i en els nostres <a href=\"https:\/\/www.unimedia.tech\/dedicated-development-teams\/\">equips de desenvolupament dedicats<\/a><\/p>&#13;\n&#13;\n<p>Tamb\u00e9 us pot interessar: <a href=\"https:\/\/www.unimedia.tech\/2021\/03\/07\/stripe-checkout-using-stripe-elements\/\">&#8220;P\u00e0gina de pagament de Stripe amb Stripe Elements&#8221;<\/a><\/p>&#13;\n&#13;\n<h2 class=\"wp-block-heading\" id=\"6289\">Qu\u00e8 \u00e9s AWS Amplify?<\/h2>&#13;\n&#13;\n<p id=\"6841\">Des del seu lloc web:<\/p>&#13;\n&#13;\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\">&#13;\n<p><em>AWS Amplify \u00e9s un conjunt d&#8217;eines i serveis que permet als desenvolupadors web m\u00f2bils i front-end crear aplicacions full stack segures i escalables, impulsades per AWS.<\/em><\/p>&#13;\n<\/blockquote>&#13;\n&#13;\n<h3 class=\"wp-block-heading\">Requisits previs:<\/h3>&#13;\n&#13;\n<ul class=\"wp-block-list\">&#13;\n<li>Node.js versi\u00f3 10 o posterior<\/li>&#13;\n<li>Compte d&#8217;AWS<\/li>&#13;\n<li>Angular CLI versi\u00f3 10 o posterior<\/li>&#13;\n<li>Comprensi\u00f3 b\u00e0sica dels conceptes angulars<\/li>&#13;\n<\/ul>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<h3 class=\"wp-block-heading\">Crear l&#8217;esquelet de l&#8217;aplicaci\u00f3 de xat mitjan\u00e7ant Angular CLI<\/h3>&#13;\n\r\n<pre class=\"wp-block-code\"><code>npx ng new amplify-chat-angular<\/code><\/pre>\r\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Configuraci\u00f3 del projecte<\/h2>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>Per a aquest tutorial, utilitzarem AWS Amplify per alimentar la nostra API, missatgeria en temps real i autenticaci\u00f3 a la nostra aplicaci\u00f3 Angular.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>npm install --save aws-amplify<\/code><\/pre>\r\n&#13;\n<p>A continuaci\u00f3, executeu el seg\u00fcent per inicialitzar la nostra aplicaci\u00f3 Angular com a projecte Amplify.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>amplify init<\/code><\/pre>\r\n&#13;\n<p>Se us demanar\u00e0 que respongueu algunes preguntes sobre el vostre projecte.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>Enter a name for the project (amplifychatangular)\r\n# For this tutorial, we'll only use the dev environment\r\nEnter a name for the environment (dev)\r\n# Here, just choose the editor you want to associate with Amplify\r\nChoose your default editor\r\n# Since we're building a Angular app, choose JavaScript and React\r\nChoose the type of app that you're building (javascript)\r\nWhat JavaScript framework are you using (angular)\r\n# Choose the default options for these\r\nSource directory path (src)\r\nDistribution directory path (build)\r\nBuild command (npm run build)\r\nStart command (npm run start)\r\n# Remember the profile you created when you configured AWS Amplify?\r\n# Let's choose that profile in this step\r\nDo you want to use an AWS profile<\/code><\/pre>\r\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>Despr\u00e9s de respondre a totes aquestes preguntes, Amplify hauria d&#8217;haver generat autom\u00e0ticament un fitxer <strong>aws-export.js<\/strong> que m\u00e9s tard s&#8217;utilitzar\u00e0 per desar tota la configuraci\u00f3 d&#8217;amplify.<\/p>&#13;\n&#13;\n<p id=\"0328\">Ara nom\u00e9s queda configurar la nostra aplicaci\u00f3 Angular per utilitzar AWS Amplify.<\/p>&#13;\n&#13;\n<p id=\"894e\">Obriu <strong>src\/main.ts<\/strong> i afegiu les l\u00ednies seg\u00fcents despr\u00e9s de l&#8217;\u00faltima declaraci\u00f3 d&#8217;importaci\u00f3.<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>import Amplify from '@aws-amplify\/core';\r\nimport awsExports from '.\/aws-exports';\r\n\r\n\r\nAmplify.configure(awsExports);<\/code><\/pre>\r\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>I ja est\u00e0. Heu configurat correctament una aplicaci\u00f3 Angular per utilitzar AWS Amplify.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<h3 class=\"wp-block-heading\" id=\"517d\">Configuraci\u00f3 de l&#8217;API i el model GraphQL<\/h3>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p id=\"3892\">El seg\u00fcent pas seria afegir l&#8217;API i el nostre model. Per a aquest tutorial, farem servir una API GraphQL, aix\u00ed que executeu el seg\u00fcent per afegir una API AppSync GraphQL a la nostra aplicaci\u00f3.<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>amplify add api<\/code><\/pre>\r\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>Quan se us demani, trieu les opcions predeterminades i la CLI hauria d&#8217;obrir un esquema GraphQL que tindria aquest aspecte.<\/p>&#13;\n&#13;\n<p><strong>Fitxer<\/strong> : amplify\/backend\/api\/amplifychatangular\/schema.graphql<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>type Todo @model {\r\n  id: ID!\r\n  name: String!\r\n  description: String\r\n}<\/code><\/pre>\r\n&#13;\n<p>Com que estem creant una aplicaci\u00f3 de xat, un model de Todo no ens funciona realment. Per tant, canviem-ho.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>type Message\r\n  @model\r\n  @key(name: \"byChannelID\", fields: [\"channelID\", \"createdAt\"], queryField: \"messagesByChannelID\") {\r\n  id: ID!\r\n  channelID: ID!\r\n  author: String!\r\n  body: String!\r\n  createdAt: AWSDateTime\r\n  updatedAt: AWSDateTime\r\n}<\/code><\/pre>\r\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p id=\"745f\">Aqu\u00ed, estem creant un  <code>Message<\/code>  model amb els camps  <code>id<\/code>,  <code>author<\/code>  (que \u00e9s el nom de l&#8217;autor),  <code>body<\/code>,  <code>createdAt<\/code>, i  <code>updatedAt<\/code>.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<h3 class=\"wp-block-heading\">Explicaci\u00f3:<\/h3>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n\r\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\r\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\r\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis: 33.33%;\">&#13;\n<figure class=\"wp-block-table\">&#13;\n<table>&#13;\n<tbody>&#13;\n<tr>&#13;\n<td><strong>@key(nom: &#8220;byChannelID&#8221;, camps: [&#8220;channelID&#8221;, &#8220;createdAt&#8221;], queryField: &#8220;messagesByChannelID&#8221;<\/strong><br\/><br\/><br\/><br\/><br\/><\/td>&#13;\n<\/tr>&#13;\n<tr>&#13;\n<td><strong>AWSDateTime<\/strong><br\/><br\/><br\/><br\/><\/td>&#13;\n<\/tr>&#13;\n<tr>&#13;\n<td><strong>ID<\/strong><\/td>&#13;\n<\/tr>&#13;\n<tr>&#13;\n<td><strong>autor<\/strong><\/td>&#13;\n<\/tr>&#13;\n<tr>&#13;\n<td><strong>cos<\/strong><\/td>&#13;\n<\/tr>&#13;\n<\/tbody>&#13;\n<\/table>&#13;\n<\/figure>&#13;\n\r\n\r\n&#13;\n<p>\u00a0<\/p>&#13;\n<\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis: 66.66%;\">&#13;\n<figure class=\"wp-block-table\">&#13;\n<table>&#13;\n<tbody>&#13;\n<tr>&#13;\n<td>Hem creat un nou \u00edndex per a la taula Missatges. Hem afegit<code>@key<\/code> que \u00e9s una <a href=\"https:\/\/docs.amplify.aws\/cli\/graphql-transformer\/directives\">directiva AWS Amplify GraphQL<\/a> , com ara<code><strong>@model<\/strong><\/code> . Aix\u00f2 b\u00e0sicament diu a <strong>AppSync<\/strong> que cre\u00ef una clau secund\u00e0ria amb el nom de<code><strong>byChannelID<\/strong><\/code> . El<code>fields<\/code> array compr\u00e8n la nostra nova clau. El primer camp aqu\u00ed sempre ser\u00e0 la <em><strong>clau hash<\/strong><\/em> i el segon, la nostra <em>clau <strong>d&#8217;ordenaci\u00f3<\/strong><\/em> . Finalment, el  <strong><code>queryField<\/code> <\/strong>el par\u00e0metre indica a AppSync que cre\u00ef una nova operaci\u00f3 de consulta utilitzant aquesta clau recentment creada amb el valor de <strong><code>queryField<\/code> <\/strong>com el nom.<\/td>&#13;\n<\/tr>&#13;\n<tr>&#13;\n<td><strong><code>AWSDateTime<\/code> <\/strong>\u00e9s un tipus escalar proporcionat per AWS AppSync. B\u00e0sicament \u00e9s una cadena en forma de<code>YYYY-MM-DDThh:mm:ss.sssZ<\/code> . Podeu llegir m\u00e9s informaci\u00f3 sobre els tipus escalars d&#8217;AppSync <a href=\"https:\/\/docs.aws.amazon.com\/appsync\/latest\/devguide\/scalars.html\">aqu\u00ed<\/a> . AppSync ho establir\u00e0 autom\u00e0ticament a les mutacions.<\/td>&#13;\n<\/tr>&#13;\n<tr>&#13;\n<td>Identificador \u00fanic del missatge<\/td>&#13;\n<\/tr>&#13;\n<tr>&#13;\n<td>Nom de l&#8217;autor<\/td>&#13;\n<\/tr>&#13;\n<tr>&#13;\n<td>Contingut del missatge<\/td>&#13;\n<\/tr>&#13;\n<\/tbody>&#13;\n<\/table>&#13;\n<\/figure>&#13;\n<\/div>\r\n<\/div>\r\n<\/div>\r\n&#13;\n<p id=\"abf8\">\u00a0<\/p>&#13;\n&#13;\n<p id=\"f460\">Deseu, sortiu i executeu l&#8217;ordre seg\u00fcent per subministrar l&#8217;API al n\u00favol. De nou, trieu les opcions predeterminades per a les sol\u00b7licituds.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>amplify push<\/code><\/pre>\r\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p id=\"ef90\">Aix\u00f2 pot trigar una estona, aix\u00ed que preneu una tassa de caf\u00e8.<\/p>&#13;\n&#13;\n<p id=\"a9d0\">Un cop acabi aix\u00f2, felicitats! La teva API ja est\u00e0 activa. Ara podeu comen\u00e7ar a fer consultes i mutacions de GraphQL. \u00c9s tan f\u00e0cil que \u00e9s com fer trampes, oi?<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>Quan vas c\u00f3rrer<code><strong>amplify push<\/strong><\/code> , has vist passar un munt de coses. Aquests registres s\u00f3n ordres d&#8217;AWS CloudFormation que s&#8217;executen per subministrar la vostra aplicaci\u00f3 a AWS, inclosa la configuraci\u00f3 d&#8217;AppSync, DynamoDB, adjuntar rols IAM i algunes coses m\u00e9s, coses que normalment no voldr\u00edeu tocar com a desenvolupador m\u00f2bil o front-end. L&#8217;eina Amplify CLI els va abstraure en una ordre senzilla.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<h3 class=\"wp-block-heading\">Generador de mutacions, consultes i solucions GraphQL<\/h3>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>Amplify hauria d&#8217;haver generat autom\u00e0ticament angular espec\u00edfic, Mutation &amp; Query autom\u00e0ticament rellevant per al model que hem creat.<\/p>&#13;\n&#13;\n<p>Comproveu <strong>src\/app\/API.service.ts<\/strong> per a la refer\u00e8ncia, utilitzant el servei API, podrem fer, createMessage, updateMessage, listMessages, deleteMessages, etc.<\/p>&#13;\n&#13;\n<p>Tamb\u00e9 genera subscripcions a graphql en temps real, per a les quals no hem de fer cap connexi\u00f3 web de forma expl\u00edcita, tot ser\u00e0 gestionat per Amplify.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<h3 class=\"wp-block-heading\" id=\"7801\">Configuraci\u00f3 de la IU<\/h3>&#13;\n&#13;\n<p id=\"fc96\">Abans d&#8217;arribar a la part bona, configurarem la nostra interf\u00edcie d&#8217;usuari: una llista de missatges i una barra de xat, res massa fant\u00e0stic!<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>Aix\u00ed que per fer-ho, obriu <strong>src\/app.component.html<\/strong> i afegiu el codi indicat a continuaci\u00f3.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>&lt;div id=\"root\"&gt;\r\n  &lt;div class=\"container\"&gt;\r\n    &lt;div class=\"messages\"&gt;\r\n      &lt;div class=\"messages-scroller\"&gt;\r\n        &lt;ng-container *ngFor=\"let message of messages\"&gt;\r\n          &lt;div [ngClass]=\"message.author === username ? 'message me' : 'message'\"&gt;\r\n            {{message.body}}\r\n          &lt;\/div&gt;\r\n        &lt;\/ng-container&gt;\r\n      &lt;\/div&gt;\r\n\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"chat-bar\"&gt;\r\n      &lt;div class=\"form\"&gt;\r\n        &lt;input #messageInput type=\"text\" name=\"messageBody\" placeholder=\"Type your message here\" value=\"\r\n          (keyup.enter)=\"send($event, messageInput)\" \/&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\r\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>A continuaci\u00f3, obriu <strong>style.scss<\/strong> i substitu\u00efu el contingut amb el codi seg\u00fcent perqu\u00e8 tinguem un bon aspecte de la nostra vista.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>\/* You can add global styles to this file, and also import other style files *\/\r\n* {\r\n  box-sizing: border-box;\r\n  font-family: 'Roboto', sans-serif;\r\n}\r\n\r\nhtml, body {\r\n  height: 100%;\r\n  margin: 0;\r\n}\r\n\r\n#root {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #f8f8f8;\r\n  height: 100%;\r\n}\r\n\r\n.container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 540px;\r\n  height: 680px;\r\n  background: white;\r\n  border-radius: 16px;\r\n  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.0);\r\n}\r\n\r\n.messages {\r\n  flex: 1;\r\n  position: relative;\r\n}\r\n\r\n.messages-scroller {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  overflow-y: scroll;\r\n}\r\n\r\n.message {\r\n  align-self: flex-start;\r\n  margin-top: 4px;\r\n  padding: 8px 12px;\r\n  max-width: 240px;\r\n  background: #f1f0f0;\r\n  border-radius: 16px;\r\n  font-size: 14px;\r\n}\r\n\r\n.message.me {\r\n  align-self: flex-end;\r\n  background: #2196F3;\r\n  color: white;\r\n  width: fit-content;\r\n\/\/   margin: 10px;\r\n}\r\n\r\n.chat-bar {\r\n  height: 64px;\r\n  border-top: 1px solid #ddd;\r\n}\r\n\r\n.chat-bar .form {\r\n  height: 100%;\r\n  padding: 16px;\r\n}\r\n\r\n.chat-bar .form input {\r\n  width: 100%;\r\n  height: 32px;\r\n  padding: 8px 16px;\r\n  border: 1px solid #ddd;\r\n  border-radius: 16px;\r\n  outline: none;\r\n}\r\n\r\n.chat-bar .form input:focus {\r\n  border: 1px solid #2196F3;\r\n}\r\n\r\n\/* width *\/\r\n::-webkit-scrollbar {\r\n  width: 10px;\r\n}\r\n\r\n\/* Track *\/\r\n::-webkit-scrollbar-track {\r\n  background: #f1f1f1; \r\n}\r\n \r\n\/* Handle *\/\r\n::-webkit-scrollbar-thumb {\r\n  background: #888; \r\n}\r\n\r\n\/* Handle on hover *\/\r\n::-webkit-scrollbar-thumb:hover {\r\n  background: #555; \r\n}<\/code><\/pre>\r\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>De moment no fa gaire, aix\u00ed que carreguem els missatges que vam crear a l&#8217;article anterior i connectem els controladors d&#8217;esdeveniments.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<h3 class=\"wp-block-heading\">Carregant \/ enviant missatges en temps real<\/h3>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p id=\"f5f7\">Voldrem carregar missatges quan es carregui el nostre component d&#8217;aplicaci\u00f3 i, per fer-ho, utilitzarem <strong>APIService<\/strong> i la biblioteca d&#8217;API Amplify.<\/p>&#13;\n&#13;\n<p id=\"8ee3\">Obriu <strong>src\/app.component.ts<\/strong> i importeu el fitxer<code>APIService<\/code> i<code>Router<\/code> i injecteu-los al constructor.<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>  constructor(\r\n    private api: APIService,\r\n    private router: Router\r\n  ) { }<\/code><\/pre>\r\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>Ara necessitem crear gestors d&#8217;esdeveniments<\/p>&#13;\n&#13;\n<p><strong>llista missatges<\/strong> =&gt; per carregar els missatges enviats\/rebuts anteriorment<\/p>&#13;\n&#13;\n<p><strong>enviar<\/strong> =&gt; Per enviar el missatge<\/p>&#13;\n&#13;\n<p><strong>onCreateMessage<\/strong> =&gt; Escolteu l&#8217;esdeveniment d&#8217;afegir missatges en temps real<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<ol class=\"wp-block-list\">&#13;\n<li><strong>listMessages<\/strong> : aqu\u00ed estem obtenint els massatges per identificador de canal mitjan\u00e7ant MessagesByChannelId (consulta graphql), l&#8217;usuari pot utilitzar l&#8217;identificador de canal din\u00e0mic.<\/li>&#13;\n<\/ol>&#13;\n\r\n<pre class=\"wp-block-code\"><code>  listMessages(): void {\r\n    this.api.MessagesByChannelId('1').then((val) =&gt; {\r\n      console.log(val);\r\n      this.messages = val.items;\r\n    });\r\n  }<\/code><\/pre>\r\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>2. <strong>enviar<\/strong> : utilitzarem aquest m\u00e8tode per enviar el missatge escrit per l&#8217;usuari a un canal espec\u00edfic mitjan\u00e7ant la mutaci\u00f3 <strong>CreateMessage<\/strong> graphql.<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>  send(event, inputElement: HTMLInputElement): void {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    const input = {\r\n      channelID: '1',\r\n      author: this.username.trim(),\r\n      body: inputElement.value.trim()\r\n    };\r\n    this.api.CreateMessage(input).then((val) =&gt; {\r\n      console.log('Send Message Success =&gt;', val);\r\n      inputElement.value = '';\r\n    });\r\n  }<\/code><\/pre>\r\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>3. <strong>onCreateMessage<\/strong> : utilitzarem la subscripci\u00f3 a graphql per escoltar l&#8217;esdeveniment de creaci\u00f3 de missatges en temps real. Sempre que alg\u00fa afegeixi algun missatge al canal &#8220;1&#8221;, s&#8217;activar\u00e0 aquest esdeveniment.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n\r\n<pre class=\"wp-block-code\"><code>  onCreateMessage(): void {\r\n    this.api.OnCreateMessageListener.subscribe(\r\n      {\r\n        next: (val: any) =&gt; {\r\n          console.log(val);\r\n          this.messages.push(val.value.data.onCreateMessage);\r\n        }\r\n      }\r\n    );\r\n  }<\/code><\/pre>\r\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>Podeu trobar el codi complet del fitxer <strong>app.component.ts<\/strong> <a href=\"https:\/\/github.com\/unimedia-technology\/amplify-chat-angular\/blob\/master\/src\/app\/app.component.ts\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a> .<\/p>&#13;\n&#13;\n<p>El codi complet per a tota la implementaci\u00f3 de l&#8217;aplicaci\u00f3 es pot trobar <a href=\"https:\/\/github.com\/unimedia-technology\/amplify-chat-angular\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a><\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<h2 class=\"wp-block-heading\">Demostraci\u00f3 de treball<\/h2>&#13;\n&#13;\n<figure class=\"wp-block-video\"><video src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2020\/10\/Build-Chat-App-using-Amplify-with-Angular.mp4\" controls=\"controls\" width=\"300\" height=\"150\"><\/video><\/figure>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<h3 class=\"wp-block-heading\">Unimedia Technology<\/h3>&#13;\n&#13;\n<p>Aqu\u00ed a <a href=\"https:\/\/www.unimedia.tech\/\">Unimedia Technology<\/a> tenim un equip de <strong>desenvolupadors angulars<\/strong> que poden desenvolupar els vostres taulers web i aplicacions web m\u00e9s dif\u00edcils utilitzant les \u00faltimes tecnologies d&#8217;AWS.<\/p>&#13;\n","protected":false},"excerpt":{"rendered":"<p>.<\/p>\n","protected":false},"author":6,"featured_media":6564,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[196,199,218],"tags":[],"class_list":["post-7173","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-ca","category-aws-ca","category-technical-guides-ca"],"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>Crear una aplicaci\u00f3 de xat utilitzant AWS Amplify amb 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\/ca\/build-chat-app-using-aws-amplify-with-angular\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crear una aplicaci\u00f3 de xat utilitzant AWS Amplify amb Angular\" \/>\n<meta property=\"og:description\" content=\".\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/ca\/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=\"article:modified_time\" content=\"2024-01-16T16:11:58+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=\"Escrit per\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minuts\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Crear una aplicaci\u00f3 de xat utilitzant AWS Amplify amb 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\/ca\/build-chat-app-using-aws-amplify-with-angular\/","og_locale":"ca_ES","og_type":"article","og_title":"Crear una aplicaci\u00f3 de xat utilitzant AWS Amplify amb Angular","og_description":".","og_url":"https:\/\/www.unimedia.tech\/ca\/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","article_modified_time":"2024-01-16T16:11:58+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":{"Escrit per":"Unimedia","Temps estimat de lectura":"8 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/ca\/build-chat-app-using-aws-amplify-with-angular\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/build-chat-app-using-aws-amplify-with-angular\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Crear una aplicaci\u00f3 de xat utilitzant AWS Amplify amb Angular","datePublished":"2020-11-27T05:47:37+00:00","dateModified":"2024-01-16T16:11:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/build-chat-app-using-aws-amplify-with-angular\/"},"wordCount":1047,"commentCount":0,"publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/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":"ca","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.unimedia.tech\/ca\/build-chat-app-using-aws-amplify-with-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/ca\/build-chat-app-using-aws-amplify-with-angular\/","url":"https:\/\/www.unimedia.tech\/ca\/build-chat-app-using-aws-amplify-with-angular\/","name":"Crear una aplicaci\u00f3 de xat utilitzant AWS Amplify amb Angular - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/build-chat-app-using-aws-amplify-with-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/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","dateModified":"2024-01-16T16:11:58+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/ca\/build-chat-app-using-aws-amplify-with-angular\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/ca\/build-chat-app-using-aws-amplify-with-angular\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/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\/ca\/build-chat-app-using-aws-amplify-with-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/ca\/"},{"@type":"ListItem","position":2,"name":"Crear una aplicaci\u00f3 de xat utilitzant AWS Amplify amb Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/ca\/#website","url":"https:\/\/www.unimedia.tech\/ca\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/ca\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/ca\/","logo":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/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\/ca\/#\/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\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/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\/ca\/wp-json\/wp\/v2\/posts\/7173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/comments?post=7173"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts\/7173\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media\/6564"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media?parent=7173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/categories?post=7173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/tags?post=7173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}