Usando App Builder interface do usuário do Swagger com aplicativos Angular & Blazor
Não muito tempo atrás, lançamos o Swagger UI e agora queremos mostrar como usá-lo em seus aplicativos Angular e Blazor. Leia o tutorial.
Jason Beres
7min de leitura
Nesta postagem, você aprenderá a usar a interface do usuário do Swagger para seus aplicativos Angular e Blazor em App Builder para que você possa vincular dados de forma rápida e fácil de suas APIs Web a controles de interface do usuário no App Builder (tm). Mas vamos começar falando sobre o Swagger e seus benefícios em geral, a especificação OpenAPI e a interface do usuário do Swagger. Em seguida, passaremos para o tutorial real.
Aqui vamos nós.
O que é arrogância?
O Swagger é uma ferramenta de código aberto que auxilia no design, desenvolvimento, teste, monitoramento de APIs e muito mais.
O Swagger inclui 3 ferramentas de código aberto:
- Swagger Codegen - Gera stubs de servidor e SDKs de cliente a partir de definições de especificação OpenAPI
- Editor do Swagger – Editor de API para projetar APIs com a especificação OpenAPI.
- Interface do usuário do Swagger – Visualize as definições de especificação OpenAPI em uma interface do usuário interativa.
E 3 ferramentas comerciais/pagas:
- SwaggerHub – Projete e documente todas as suas APIs REST em uma plataforma colaborativa.
- SwaggerHub Enterprise – Padronize suas APIs com projetos, verificações de estilo e domínios reutilizáveis.
- Swagger Inspector – Teste e gere definições de API do seu navegador em segundos.
O Swagger foi criado para dar suporte à especificação OpenAPI (anteriormente chamada de Especificação do Swagger), que é uma especificação para descrever, produzir, consumir e visualizar serviços Web RESTful. O uso das ferramentas incluídas no Swagger oferece aos desenvolvedores uma maneira fácil de descrever e documentar suas APIs, quase sem esforço. Com o OpenAPI, você descreve toda a sua API em um arquivo JSON, incluindo:
- Extremidade
- Parâmetros de operação
- Métodos de autenticação
- Respostas
- Informações de contato
- Licença
- Segurança
- Termos de uso
- Outros metadados úteis
Se você está desenvolvendo um aplicativo Blazor ou Angular hoje, também está desenvolvendo APIs. Ter uma API acessível usando o Swagger simplifica a implementação de back-end e o uso do lado do cliente de todos os serviços e funcionalidades que sua API está trazendo para seus aplicativos Blazor e Angular. Aqui está uma análise mais detalhada do que o Swagger oferece e seus benefícios.
Quais são as vantagens do Swagger?
- Sincroniza a documentação da API com o lado do servidor e o lado do cliente.
- Utilizável para desenvolvedores e não desenvolvedores (PMs, clientes finais e muito mais).
- Permite gerar a documentação da API REST do Swagger.
- Permite que você interaja com a API REST do Swagger.
- Permite automatizar processos dependentes de API e compartilhar sua documentação com seus colegas de equipe.
- Suporta respostas nos formatos JSON e XML.
- Ele ajuda diferentes ferramentas a ler facilmente as informações sobre sua API.
- Torna sua API interativa e detectável com ferramentas abrangentes.
- Permite integrar sua API em diferentes sistemas e plataformas por meio da especificação OpenAPI.
Com a popularidade do Swagger e o fato de que, com os projetos de API do Visual Studio 2022 e do .NET 6, a interface do usuário do Swagger é instalada e usada por padrão, simplificamos o consumo da API Web em App Builder com suporte total para ler definições de OpenAPI do Swagger.
O que é a interface do usuário do Swagger e para que ela é usada?
A interface do usuário do Swagger permite que desenvolvedores, testadores ou usuários finais interajam com suas APIs por meio de uma página da Web visual e interativa. A página da Web é gerada automaticamente a partir de sua especificação OpenAPI e, com ferramentas como o Visual Studio, é uma única linha de código para gerar a página da interface do usuário do Swagger com base na definição JSON gerada automaticamente de sua API.
Com a interface do usuário do Swagger App Builder, você pode apontar para uma definição do Swagger baseada em nuvem ou pode carregar o arquivo JSON ou YAML que descreve o OpenAPI. No App Builder, você pode gerenciar coisas como endpoints, parâmetros, entradas e muito mais, bem como buscar e selecionar dados que serão consumidos posteriormente pelos componentes App Builder, como Grid, List, Combo e todos os outros componentes vinculáveis.
Como usar a interface do usuário do Swagger?
Por meio da interface do usuário do App Builder Swagger, você pode carregar facilmente uma definição do Swagger fazendo upload de um arquivo ou especificando um URL. Se você já estiver familiarizado com o fluxo "Adicionando uma fonte de dados", não verá nenhuma diferença com a nova abordagem
Depois que a definição do Swagger for carregada, a caixa de diálogo Configurar endpoints será exibida.
O lado esquerdo da caixa de diálogo Configurar pontos de extremidade consiste em:
- URL base – pode ser preenchido automaticamente se o valor estiver presente na definição do arquivo
- Autorização – forneça a chave de autenticação, se necessário
- Exibição em árvore de endpoints – Todos os endpoints disponíveis serão carregados aqui junto com seu tipo (GET, PUT, POST etc.)
- URL de solicitação com o botão Enviar que pode ser usado para testar a conexão antes de selecionar i
- Elementos de guia para autorização, parâmetros e cabeçalhos – se necessário, será marcado como tal
- Seção de conteúdo da guia mostrando mensagens informativas ou campos obrigatórios.
Ao escolher um endpoint e definir a autenticação e os parâmetros necessários (se necessário, com base no endpoint), você pode prosseguir com a escolha de um campo de dados específico que será usado posteriormente para se conectar a um componente de consumo de dados. Mais sobre isso na próxima seção.
Como usar o Swagger com seus aplicativos Angular e Blazor?
Quando uma fonte de dados do Swagger é adicionada, os usuários podem conectar um campo de dados específico a uma seção de componente. Para que isso seja feito, primeiro selecione o componente (Grid, Card, Combo Box ou qualquer outro componente vinculado a dados) e, em seguida, role o menu para baixo para localizar e selecionar a tabela da Fonte de dados à qual você deseja se conectar. Por fim, conecte a seção do componente com o campo da tabela selecionado.
Se você quiser ler mais sobre a vinculação de dados do componente, visite a página Uso de dados no documento de ajuda do App Builder.
Cada controle que dá suporte à associação de dados terá propriedades adicionais no Editor de Propriedades que permite personalizar como seus dados são apresentados. Por exemplo, o componente Grade tem a propriedade Chave primária e o componente Caixa de combinação tem propriedades de chave Valor/Exibição. Um componente interessante, quando se trata de vinculação de dados, é o componente do cartão. Você pode especificar um modo de repetição (dados) que vinculará cada registro de sua fonte de dados e o representará como um componente separado (ou um número específico de registros que podem ser definidos por meio da propriedade "count").
Quando a associação de dados do componente do aplicativo estiver pronta, vá em frente e confira o código de visualização ou baixe diretamente o aplicativo pronto para uso. Você pode escolher entre desenvolver aplicativos Angular e Blazor criação de aplicativos e geração de código com base em suas necessidades. Você notará que fizemos tudo por você, se você verificar o código gerado, verá um serviço de dados que lidará com as solicitações com base nas URLs de endpoint que definimos ao longo do processo. E é isso!
Alguns recursos adicionais:
Confira este vídeo que mostra como vincular facilmente uma interface do usuário do Swagger com dados da API REST em Angular grade de interface do usuário ou Blazor grade de interface do usuário usando o App Builder.
Angular Data Grid e Blazor Grid na interface do usuário do Ignite são componentes completos, permitindo que você visualize seus dados vinculados como uma série de linhas e colunas. Eles são embalados com vários recursos, como seleção de dados, filtragem de estilo Excel, classificação, paginação, modelagem, movimentação de colunas, exportação para Excel, CSV, formatos pdf e muito mais.
Se você quiser saber como criar uma grade de interface do usuário Angular completa do zero, confira este vídeo:
E não se esqueça, se você ainda não fez isso, experimente App Builder hoje e confira a visualização em tempo real do seu aplicativo e código Angular ou Blazor que oferece a capacidade de baixar seu projeto como um arquivo zip ou publicá-lo no GitHub.
