{"id":7215,"date":"2020-11-27T06:47:37","date_gmt":"2020-11-27T05:47:37","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/"},"modified":"2024-01-16T17:11:58","modified_gmt":"2024-01-16T16:11:58","slug":"crear-una-aplicacion-de-chat-con-aws-amplify-y-angular","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/","title":{"rendered":"Crear una aplicaci\u00f3n de chat con AWS Amplify y Angular"},"content":{"rendered":"&#13;\n<p>Este art\u00edculo es para explicar c\u00f3mo construir una <a href=\"https:\/\/www.unimedia.tech\/software-maintenance\/\">aplicaci\u00f3n <\/a>en tiempo real muy r\u00e1pidamente usando AWS Amplify con Angular. Una de las integraciones realizadas dentro del servicio de <a href=\"https:\/\/www.unimedia.tech\/software-development\/\">desarrollo de software a medida<\/a> y en nuestros <a href=\"https:\/\/www.unimedia.tech\/dedicated-development-teams\/\">equipos de desarrollo dedicados<\/a><\/p>&#13;\n&#13;\n<p>Tambi\u00e9n te puede interesar: <a href=\"https:\/\/www.unimedia.tech\/2021\/03\/07\/stripe-checkout-using-stripe-elements\/\">&#8220;P\u00e1gina de pago de Stripe utilizando elementos de Stripe&#8221;<\/a><\/p>&#13;\n&#13;\n<h2 class=\"wp-block-heading\" id=\"6289\">\u00bfQu\u00e9 es AWS Amplify?<\/h2>&#13;\n&#13;\n<p id=\"6841\">De su p\u00e1gina 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 es un conjunto de herramientas y servicios que permite a los desarrolladores web m\u00f3viles y front-end crear aplicaciones de pila completa seguras y escalables con la tecnolog\u00eda de AWS.<\/em><\/p>&#13;\n<\/blockquote>&#13;\n&#13;\n<h3 class=\"wp-block-heading\">Requisitos previos:<\/h3>&#13;\n&#13;\n<ul class=\"wp-block-list\">&#13;\n<li>Node.js versi\u00f3n 10 o posterior<\/li>&#13;\n<li>Cuenta AWS<\/li>&#13;\n<li>Angular CLI versi\u00f3n 10 o posterior<\/li>&#13;\n<li>Comprensi\u00f3n b\u00e1sica de los conceptos de Angular<\/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 el esqueleto de la aplicaci\u00f3n de chat usando 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\">Puesta en marcha del proyecto<\/h2>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>En este tutorial, utilizaremos AWS Amplify para impulsar nuestra API, la mensajer\u00eda en tiempo real y la autenticaci\u00f3n en nuestra aplicaci\u00f3n 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\u00f3n, ejecute lo siguiente, para inicializar nuestra aplicaci\u00f3n Angular como un proyecto 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 le pedir\u00e1 que responda a algunas preguntas sobre su proyecto.<\/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>Despu\u00e9s de responder a todas estas preguntas, Amplify deber\u00eda haber autogenerado un archivo <strong>aws-export.js<\/strong> que m\u00e1s tarde se utiliza para guardar toda la configuraci\u00f3n de Amplify.<\/p>&#13;\n&#13;\n<p id=\"0328\">Ahora solo queda configurar nuestra aplicaci\u00f3n Angular para utilizar AWS Amplify.<\/p>&#13;\n&#13;\n<p id=\"894e\">Abre <strong>src\/main.ts<\/strong> y a\u00f1ade las siguientes l\u00edneas despu\u00e9s de la \u00faltima sentencia import.<\/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>Y ya est\u00e1. Ha configurado correctamente una aplicaci\u00f3n Angular para utilizar 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\u00f3n de la API y el modelo GraphQL<\/h3>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p id=\"3892\">El siguiente paso ser\u00eda a\u00f1adir la API y nuestro modelo. Para este tutorial, vamos a utilizar una API GraphQL as\u00ed que ejecuta lo siguiente para a\u00f1adir una API GraphQL de AppSync a nuestra aplicaci\u00f3n.<\/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>Cuando se le solicite, elija las opciones por defecto y la CLI debe abrir un esquema GraphQL que se ver\u00eda as\u00ed.<\/p>&#13;\n&#13;\n<p><strong>Archivo<\/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>Como estamos creando una aplicaci\u00f3n de chat, el modelo Todo no nos sirve. As\u00ed que cambiemos eso.<\/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, estamos creando un <code>Message<\/code> con los campos <code>id<\/code>,  <code>author<\/code> (que es el nombre del autor), <code>body<\/code>,  <code>createdAt<\/code>y <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\u00f3n:<\/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(name: &#8220;byChannelID&#8221;, fields: [&#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>cuerpo<\/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>Creamos un nuevo \u00edndice para la tabla Mensajes. Hemos a\u00f1adido <code>@key<\/code> que es una <a href=\"https:\/\/docs.amplify.aws\/cli\/graphql-transformer\/directives\">directiva GraphQL de AWS Amplify<\/a>, como <code><strong>@model<\/strong><\/code>. Esto b\u00e1sicamente le dice a <strong>AppSync <\/strong>que cree una clave secundaria con el nombre de <code><strong>byChannelID<\/strong><\/code>. La matriz <code>fields<\/code> contiene nuestra nueva clave. El primer campo ser\u00e1 siempre la <em><strong>clave hash<\/strong><\/em> y el segundo, nuestra <em>clave de<strong>ordenaci\u00f3n <\/strong><\/em>. Por \u00faltimo, el <strong><code>queryField<\/code> <\/strong>indica a AppSync que cree una nueva operaci\u00f3n de consulta utilizando esta clave reci\u00e9n creada con el valor de <strong><code>queryField<\/code> <\/strong>como el nombre.<\/td>&#13;\n<\/tr>&#13;\n<tr>&#13;\n<td><strong><code>AWSDateTime<\/code> <\/strong>es un tipo escalar proporcionado por AWS AppSync. B\u00e1sicamente es una cadena en forma de <code>YYYY-MM-DDThh:mm:ss.sssZ<\/code>. Puede leer m\u00e1s sobre los tipos escalares de AppSync <a href=\"https:\/\/docs.aws.amazon.com\/appsync\/latest\/devguide\/scalars.html\">aqu\u00ed<\/a>. Esto se establecer\u00e1 autom\u00e1ticamente por AppSync en las mutaciones.<\/td>&#13;\n<\/tr>&#13;\n<tr>&#13;\n<td>Id. \u00fanico del mensaje<\/td>&#13;\n<\/tr>&#13;\n<tr>&#13;\n<td>Nombre del autor<\/td>&#13;\n<\/tr>&#13;\n<tr>&#13;\n<td>Contenido del mensaje<\/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\">Guarde, salga y ejecute el siguiente comando para aprovisionar la API en la nube. Una vez m\u00e1s, elija las opciones predeterminadas para los avisos.<\/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\">Esto puede llevar un rato, as\u00ed que t\u00f3mate un caf\u00e9.<\/p>&#13;\n&#13;\n<p id=\"a9d0\">Una vez que esto termine, \u00a1felicidades! Su API ya est\u00e1 activa. Ya puedes empezar a hacer consultas GraphQL y mutaciones sobre \u00e9l. Es tan f\u00e1cil que es como hacer trampas, \u00bfverdad?<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>Cuando ejecutabas <code><strong>amplify push<\/strong><\/code>, ve\u00edas que pasaban un mont\u00f3n de cosas. Estos registros son comandos de AWS CloudFormation que se ejecutan para aprovisionar su aplicaci\u00f3n en AWS, incluida la configuraci\u00f3n de AppSync, DynamoDB, la asignaci\u00f3n de roles de IAM y algunas otras cosas, cosas que normalmente no querr\u00eda tocar como desarrollador m\u00f3vil o front-end&#8221;. La herramienta Amplify CLI los abstrae en un simple comando.<\/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 mutaci\u00f3n, consulta y resoluci\u00f3n GraphQL<\/h3>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>Amplificar deber\u00eda haber generado autom\u00e1ticamente angular espec\u00edfica, Mutaci\u00f3n y Consulta autom\u00e1ticamente relevante para el modelo que hemos creado.<\/p>&#13;\n&#13;\n<p>Revisa <strong>src\/app\/API.service.ts<\/strong> para la referencia, usando el servicio API, podremos hacer, createMessage, updateMessage, listMessages, deleteMessages y etc.<\/p>&#13;\n&#13;\n<p>Tambi\u00e9n genera suscripciones graphql en tiempo real, para lo cual no tenemos que hacer ninguna conexi\u00f3n web socket expl\u00edcitamente, todo ser\u00e1 gestionado por 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\u00f3n de la interfaz de usuario<\/h3>&#13;\n&#13;\n<p id=\"fc96\">Antes de pasar a la parte buena, vamos a configurar nuestra interfaz de usuario: una lista de mensajes y una barra de chat&#8230; \u00a1nada del otro mundo!<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>Para ello, abra <strong>src\/app.component.html<\/strong> y a\u00f1ada el siguiente c\u00f3digo.<\/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\u00f3n, abra <strong>style.scss<\/strong> y reemplace el contenido con el siguiente c\u00f3digo para que nuestra vista tenga un aspecto agradable.<\/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>No hace mucho por ahora, as\u00ed que vamos a cargar los mensajes que hemos creado en el art\u00edculo anterior y conectar los controladores de eventos.<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<h3 class=\"wp-block-heading\">Carga \/ Env\u00edo de mensajes en tiempo real<\/h3>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p>\u00a0<\/p>&#13;\n&#13;\n<p id=\"f5f7\">Querremos cargar los mensajes cuando se cargue el componente de nuestra aplicaci\u00f3n, y para ello utilizaremos <strong>APIService<\/strong>, y la librer\u00eda Amplify API.<\/p>&#13;\n&#13;\n<p id=\"8ee3\">Abra <strong>src\/app.component.ts<\/strong> e importe los archivos <strong><code>APIService<\/code><\/strong>y <strong><code>Router<\/code><\/strong>e iny\u00e9ctalos en el 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>Ahora necesitamos crear manejadores de eventos<\/p>&#13;\n&#13;\n<p><strong>listMessages<\/strong> =&gt; para Cargar los mensajes enviados \/ recibidos anteriormente<\/p>&#13;\n&#13;\n<p><strong>send<\/strong> =&gt; Para enviar el mensaje<\/p>&#13;\n&#13;\n<p><strong>onCreateMessage <\/strong>=&gt; Escucha en tiempo real el evento de a\u00f1adir mensaje<\/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 estamos obteniendo los mensajes por canal Id usando MessagesByChannelId(graphql query), el usuario puede usar un canal ID din\u00e1mico.<\/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>: Utilizaremos este m\u00e9todo para enviar el mensaje escrito por el usuario a un canal espec\u00edfico utilizando <strong>CreateMessage<\/strong> graphql Mutation.<\/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>: Utilizaremos la suscripci\u00f3n graphql para escuchar en tiempo real el evento de creaci\u00f3n de mensaje. Siempre que alguien a\u00f1ada alg\u00fan mensaje al canal &#8220;1&#8221;, se activar\u00e1 este evento.<\/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>El c\u00f3digo completo del archivo <strong>app.component.ts<\/strong> se encuentra <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 c\u00f3digo completo de la aplicaci\u00f3n se encuentra <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\u00f3n<\/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 en <a href=\"https:\/\/www.unimedia.tech\/\">Unimedia Technology<\/a> tenemos un equipo de <strong>desarrolladores Angular<\/strong> que pueden desarrollar sus m\u00e1s desafiantes Web Dashboards y Web apps usando las \u00faltimas tecnolog\u00edas de AWS.<\/p>&#13;\n","protected":false},"excerpt":{"rendered":"<p>Este art\u00edculo es para explicar c\u00f3mo construir una aplicaci\u00f3n en tiempo real muy r\u00e1pidamente usando AWS Amplify con Angular.<\/p>\n","protected":false},"author":6,"featured_media":6566,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[198,201,220],"tags":[],"class_list":["post-7215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-es","category-aws-es","category-technical-guides-es"],"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\u00f3n de chat con AWS Amplify y 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\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crear una aplicaci\u00f3n de chat con AWS Amplify y Angular\" \/>\n<meta property=\"og:description\" content=\"Este art\u00edculo es para explicar c\u00f3mo construir una aplicaci\u00f3n en tiempo real muy r\u00e1pidamente usando AWS Amplify con Angular.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-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=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Crear una aplicaci\u00f3n de chat con AWS Amplify y 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\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/","og_locale":"es_ES","og_type":"article","og_title":"Crear una aplicaci\u00f3n de chat con AWS Amplify y Angular","og_description":"Este art\u00edculo es para explicar c\u00f3mo construir una aplicaci\u00f3n en tiempo real muy r\u00e1pidamente usando AWS Amplify con Angular.","og_url":"https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-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":{"Escrito por":"Unimedia","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/es\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Crear una aplicaci\u00f3n de chat con AWS Amplify y Angular","datePublished":"2020-11-27T05:47:37+00:00","dateModified":"2024-01-16T16:11:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/"},"wordCount":1061,"commentCount":0,"publisher":{"@id":"https:\/\/www.unimedia.tech\/es\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-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":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/","url":"https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/","name":"Crear una aplicaci\u00f3n de chat con AWS Amplify y Angular - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-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\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.unimedia.tech\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-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\/es\/crear-una-aplicacion-de-chat-con-aws-amplify-y-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/es\/"},{"@type":"ListItem","position":2,"name":"Crear una aplicaci\u00f3n de chat con AWS Amplify y Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/es\/#website","url":"https:\/\/www.unimedia.tech\/es\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/es\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/es\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.unimedia.tech\/es\/#\/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\/es\/#\/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\/es\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.unimedia.tech\/es\/#\/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\/es\/wp-json\/wp\/v2\/posts\/7215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/comments?post=7215"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/posts\/7215\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/media\/6566"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/media?parent=7215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/categories?post=7215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/es\/wp-json\/wp\/v2\/tags?post=7215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}