Beagle gRPC para Web

O que é gRPC?

É um framework open source que realiza chamadas RPC (Remote call procedure) por meio do protocolo HTTP2 em formato de two-way streaming, utilizando Protobufs como interfaces entre cliente e servidor.

• Protobufs ou Protocol Buffers: São mecanismos de serialização de dados estruturados criados pelo Google, que visam manter os contratos sempre válidos e coerentes quanto às implementações que consomem aquele serviço gRPC.

• Arquivos proto: São bem parecidos com qualquer interface que você está acostumado no dia-a-dia, em seu conteúdo. Porém com a extensão .proto, onde nele você define quais são os objetos e métodos que podem ser usados na comunicação do serviço.

Saiba mais…

gRPC para Beagle Web

O gRPC é uma tecnologia que utiliza o protocolo HTTP 2, no entanto essa tecnologia não é compatível com a atual estrutura da Web. Por isso, a estrutura criada faz uso de um Cliente e um CLI:

• O CLI fica responsável por manipular as conexões gRPC através de um Proxy em Go;
• O Cliente fica responsável por manipular todas requisições feitas pelo Beagle para o Proxy.

Requisitos

• Git - CLI: Usado internamente para as dependências do proxy.
• Go - CLI: Linguagem usada no proxy.
• Dep - CLI: Controlador de dependências do Go, onde verifica se tudo está instalado como esperado.
• Protoc - CLI: Utilizado pelos protobufs e necessário para geração de código através de um arquivo .proto.

Instalação

Instale a biblioteca globalmente. Para melhorar a experiência com o CLI, instale a mesma em seu projeto com os seguintes comandos:

npm install -g @zup-it/beagle-web-grpc
npm install --save-dev @zup-it/beagle-web-grpc

ou se você utiliza yarn:

yarn global add @zup-it/beagle-web-grpc
yarn add --dev @zup-it/beagle-web-grpc

Utilização

Para começar a utilizar, siga os passos abaixo:

Passo 1. Após a instalação das bibliotecas, crie o arquivo de configurações na pasta raiz do projeto, utilizando beagle-web-grpc init e configure os atributos com o que você precisa. Passo 2. Importe o cliente gRPC, veja abaixo:

• React: ./src/beagle/beagle-service.ts

  import { createBeagleUIService } from "@zup-it/beagle-react";
  import { usingBeagleGrpcClient } from "@zup-it/beagle-web-grpc";
  
  export default createBeagleUIService({
    baseUrl: "grpc://",
    components: {},
    fetchData: usingBeagleGrpcClient({
      proxyAddress: "http://localhost:8081",
    }),
  });
  

• Angular: ./src/app/beagle.module.ts

  import { BeagleModule } from "@zup-it/beagle-angular";
  import { usingBeagleGrpcClient } from "@zup-it/beagle-web-grpc";
  
  @BeagleModule({
    baseUrl: "grpc://",
    module: {
      path: "./beagle-components.module",
      name: "BeagleComponentsModule",
    },
    components: {},
    fetchData: usingBeagleGrpcClient({
      proxyAddress: "http://localhost:8081",
    }),
  })
  export class Beagle {}
  

Passo 3. Inicie o Proxy gRPC utilizando: beagle-web-grpc start-proxy ou beagle-web-grpc start-proxy --mode seu-modo-personalizado. Passo 4. Utilize o Beagle normalmente.

Observação Tenha sua aplicação BFF rodando ao mesmo tempo.

CLI

O gRPC não é compatível com a estrutura atual da Web, para que a tecnologia tenha suporte, você precisa usar um Proxy para fazer a comunicação entre REST e o Backend gRPC. Por isso o time do Beagle criou um CLI (Command-line Interface), beagle-web-grpc, para facilitar o uso do proxy e adicionar todas as configurações necessárias.

Comandos disponíveis para beagle-web-grpc

Arquivo de configuração ./beagle-grpc.config.json

Após rodar beagle-web-grpc init o arquivo ./beagle-grpc.config.json vai ser criado no diretório em que o comando foi executado, com a seguinte estrutura base:

{
  "configs": [
    {
      "mode": "development",
      "grpcBackendAddress": "localhost:50051",
      "tlsCertificatePath": "",
      "tlsKeyPath": "",
      "runProxyOnPort": 8081
    },
    {
      "mode": "production",
      "grpcBackendAddress": "https://my-grpc.backend.com/address",
      "tlsCertificatePath": "",
      "tlsKeyPath": "",
      "runProxyOnPort": 8081
    }
  ]
}

Atributos do arquivo de configurações ./beagle-grpc.config.json

Cliente

O Cliente gRPC para Beagle Web faz o redirecionamento das requisições gRPC para o proxy. O cliente é utilizado por meio do BeagleService no React e do módulo Beagle no Angular. Se valendo da propriedade de fetchData em que o Beagle permite criar requisições HTTP customizadas, veja abaixo como a utilização será:

import { usingBeagleGrpcClient } from "@zup-it/beagle-web-grpc";

// { ... } - seu código do serviço ou módulo
{
  // { ... } - demais atributos
  fetchData: usingBeagleGrpcClient({ proxyAddress: "http://localhost:8081" });
}

O Cliente gRPC possui as seguintes opções (BeagleGrpcClientOptions) de inicialização:

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.