Aquest article és per explicar com crear una aplicació en temps real molt ràpidament mitjançant AWS Amplify amb Angular. Una de les integracions realitzades dins del servei de desenvolupament de software personalitzat i en els nostres equips de desenvolupament dedicats

També us pot interessar: “Pàgina de pagament de Stripe amb Stripe Elements”

Què és AWS Amplify?

Des del seu lloc web:

AWS Amplify és un conjunt d’eines i serveis que permet als desenvolupadors web mòbils i front-end crear aplicacions full stack segures i escalables, impulsades per AWS.

Requisits previs:

• Node.js versió 10 o posterior
• Compte d’AWS
• Angular CLI versió 10 o posterior
• Comprensió bàsica dels conceptes angulars

 

 

Crear l’esquelet de l’aplicació de xat mitjançant Angular CLI

npx ng new amplify-chat-angular

 

 

Configuració del projecte

 

Per a aquest tutorial, utilitzarem AWS Amplify per alimentar la nostra API, missatgeria en temps real i autenticació a la nostra aplicació Angular.

 

npm install --save aws-amplify

A continuació, executeu el següent per inicialitzar la nostra aplicació Angular com a projecte Amplify.

 

amplify init

Se us demanarà que respongueu algunes preguntes sobre el vostre projecte.

 

Enter a name for the project (amplifychatangular)
# For this tutorial, we'll only use the dev environment
Enter a name for the environment (dev)
# Here, just choose the editor you want to associate with Amplify
Choose your default editor
# Since we're building a Angular app, choose JavaScript and React
Choose the type of app that you're building (javascript)
What JavaScript framework are you using (angular)
# Choose the default options for these
Source directory path (src)
Distribution directory path (build)
Build command (npm run build)
Start command (npm run start)
# Remember the profile you created when you configured AWS Amplify?
# Let's choose that profile in this step
Do you want to use an AWS profile

 

Després de respondre a totes aquestes preguntes, Amplify hauria d’haver generat automàticament un fitxer aws-export.js que més tard s’utilitzarà per desar tota la configuració d’amplify.

Ara només queda configurar la nostra aplicació Angular per utilitzar AWS Amplify.

Obriu src/main.ts i afegiu les línies següents després de l’última declaració d’importació.

import Amplify from '@aws-amplify/core';
import awsExports from './aws-exports';


Amplify.configure(awsExports);

 

I ja està. Heu configurat correctament una aplicació Angular per utilitzar AWS Amplify.

 

 

Configuració de l’API i el model GraphQL

 

El següent pas seria afegir l’API i el nostre model. Per a aquest tutorial, farem servir una API GraphQL, així que executeu el següent per afegir una API AppSync GraphQL a la nostra aplicació.

amplify add api

 

Quan se us demani, trieu les opcions predeterminades i la CLI hauria d’obrir un esquema GraphQL que tindria aquest aspecte.

Fitxer : amplify/backend/api/amplifychatangular/schema.graphql

type Todo @model {
  id: ID!
  name: String!
  description: String
}

Com que estem creant una aplicació de xat, un model de Todo no ens funciona realment. Per tant, canviem-ho.

 

 

type Message
  @model
  @key(name: "byChannelID", fields: ["channelID", "createdAt"], queryField: "messagesByChannelID") {
  id: ID!
  channelID: ID!
  author: String!
  body: String!
  createdAt: AWSDateTime
  updatedAt: AWSDateTime
}

 

 

Aquí, estem creant un Message model amb els camps id, author (que és el nom de l’autor), body, createdAt, i updatedAt.

 

 

Explicació:

 

 

Deseu, sortiu i executeu l’ordre següent per subministrar l’API al núvol. De nou, trieu les opcions predeterminades per a les sol·licituds.

 

amplify push

 

Això pot trigar una estona, així que preneu una tassa de cafè.

Un cop acabi això, felicitats! La teva API ja està activa. Ara podeu començar a fer consultes i mutacions de GraphQL. És tan fàcil que és com fer trampes, oi?

 

Quan vas córreramplify push , has vist passar un munt de coses. Aquests registres són ordres d’AWS CloudFormation que s’executen per subministrar la vostra aplicació a AWS, inclosa la configuració d’AppSync, DynamoDB, adjuntar rols IAM i algunes coses més, coses que normalment no voldríeu tocar com a desenvolupador mòbil o front-end. L’eina Amplify CLI els va abstraure en una ordre senzilla.

 

 

Generador de mutacions, consultes i solucions GraphQL

 

 

Amplify hauria d’haver generat automàticament angular específic, Mutation & Query automàticament rellevant per al model que hem creat.

Comproveu src/app/API.service.ts per a la referència, utilitzant el servei API, podrem fer, createMessage, updateMessage, listMessages, deleteMessages, etc.

També genera subscripcions a graphql en temps real, per a les quals no hem de fer cap connexió web de forma explícita, tot serà gestionat per Amplify.

 

 

Configuració de la IU

Abans d’arribar a la part bona, configurarem la nostra interfície d’usuari: una llista de missatges i una barra de xat, res massa fantàstic!

 

Així que per fer-ho, obriu src/app.component.html i afegiu el codi indicat a continuació.

 

<div id="root">
  <div class="container">
    <div class="messages">
      <div class="messages-scroller">
        <ng-container *ngFor="let message of messages">
          <div [ngClass]="message.author === username ? 'message me' : 'message'">
            {{message.body}}
          </div>
        </ng-container>
      </div>

    </div>
    <div class="chat-bar">
      <div class="form">
        <input #messageInput type="text" name="messageBody" placeholder="Type your message here" value="
          (keyup.enter)="send($event, messageInput)" />
      </div>
    </div>
  </div>
</div>

 

 

A continuació, obriu style.scss i substituïu el contingut amb el codi següent perquè tinguem un bon aspecte de la nostra vista.

 

/* You can add global styles to this file, and also import other style files */
* {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

html, body {
  height: 100%;
  margin: 0;
}

#root {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  width: 540px;
  height: 680px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.0);
}

.messages {
  flex: 1;
  position: relative;
}

.messages-scroller {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow-y: scroll;
}

.message {
  align-self: flex-start;
  margin-top: 4px;
  padding: 8px 12px;
  max-width: 240px;
  background: #f1f0f0;
  border-radius: 16px;
  font-size: 14px;
}

.message.me {
  align-self: flex-end;
  background: #2196F3;
  color: white;
  width: fit-content;
//   margin: 10px;
}

.chat-bar {
  height: 64px;
  border-top: 1px solid #ddd;
}

.chat-bar .form {
  height: 100%;
  padding: 16px;
}

.chat-bar .form input {
  width: 100%;
  height: 32px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 16px;
  outline: none;
}

.chat-bar .form input:focus {
  border: 1px solid #2196F3;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

 

De moment no fa gaire, així que carreguem els missatges que vam crear a l’article anterior i connectem els controladors d’esdeveniments.

 

 

Carregant / enviant missatges en temps real

 

 

Voldrem carregar missatges quan es carregui el nostre component d’aplicació i, per fer-ho, utilitzarem APIService i la biblioteca d’API Amplify.

Obriu src/app.component.ts i importeu el fitxerAPIService iRouter i injecteu-los al constructor.

  constructor(
    private api: APIService,
    private router: Router
  ) { }

 

Ara necessitem crear gestors d’esdeveniments

llista missatges => per carregar els missatges enviats/rebuts anteriorment

enviar => Per enviar el missatge

onCreateMessage => Escolteu l’esdeveniment d’afegir missatges en temps real

 

 

1. listMessages : aquí estem obtenint els massatges per identificador de canal mitjançant MessagesByChannelId (consulta graphql), l’usuari pot utilitzar l’identificador de canal dinàmic.

  listMessages(): void {
    this.api.MessagesByChannelId('1').then((val) => {
      console.log(val);
      this.messages = val.items;
    });
  }

 

 

2. enviar : utilitzarem aquest mètode per enviar el missatge escrit per l’usuari a un canal específic mitjançant la mutació CreateMessage graphql.

  send(event, inputElement: HTMLInputElement): void {
    event.preventDefault();
    event.stopPropagation();
    const input = {
      channelID: '1',
      author: this.username.trim(),
      body: inputElement.value.trim()
    };
    this.api.CreateMessage(input).then((val) => {
      console.log('Send Message Success =>', val);
      inputElement.value = '';
    });
  }

 

 

3. onCreateMessage : utilitzarem la subscripció a graphql per escoltar l’esdeveniment de creació de missatges en temps real. Sempre que algú afegeixi algun missatge al canal “1”, s’activarà aquest esdeveniment.

 

  onCreateMessage(): void {
    this.api.OnCreateMessageListener.subscribe(
      {
        next: (val: any) => {
          console.log(val);
          this.messages.push(val.value.data.onCreateMessage);
        }
      }
    );
  }

 

 

Podeu trobar el codi complet del fitxer app.component.ts aquí .

El codi complet per a tota la implementació de l’aplicació es pot trobar aquí

 

 

Demostració de treball

 

Unimedia Technology

Aquí a Unimedia Technology tenim un equip de desenvolupadors angulars que poden desenvolupar els vostres taulers web i aplicacions web més difícils utilitzant les últimes tecnologies d’AWS.