Transforme o Desenvolvimento com .NET Aspire: Integração com JavaScript e Node.js

[Glaucia_Lemos]

No cenário em constante evolução do desenvolvimento de aplicações em nuvem, gerenciar configurações, garantir resiliência e manter a integração perfeita entre vários componentes pode ser bastante desafiador.



E, é justamente nesse caso que entra em cena o .NET Aspire! Uma estrutura de desenvolvimento de aplicação totalmente robusta e projetada para simplificar essas complexidades, permitindo que os desenvolvedores(as) se concentrem na criação de recursos em vez de lidar com extensas configurações.



Neste artigo exploraremos os aspectos centrais do .NET Aspire, examinando seus benefícios, o processo de configuraçao e a integração com JavaScript, conforme apresentado em sua sessão fenomenal no último evento do .NET Aspire Developers Day, pelo Chris Noring que é Senior Developer Advocate na Microsoft.

.NET Aspire Developers Day​

No último evento do .NET Aspire Developers Day, que ocorreu no dia 23 de Julho de 2024, foi um evento repleto de sessões técnicas e práticas, com diferentes linguagens de programação e frameworks. Pois esse foi o grande objetivo do evento online: mostrar o quão adaptável, flexível e fácil é desenvolver aplicações modernas com o poder do .NET Aspire!



Caso você tenha perdido o evento, não se preocupe! Deixo aqui o link da gravação do evento para que você possa assistir e aprender mais sobre o .NET Aspire e suas funcionalidades em diferentes cenários de desenvolvimento de software.



.NET Aspire Developer Days - Online Event



Mas, o que seria o .NET Aspire? Vamos descobrir agora mesmo!

Entendendo o .NET Aspire​

O .NET Aspire é uma estrutura pronta para a nuvem que ajuda a construir aplicações distribuídas e prontas para produção. Ele vem com pacotes NuGet que facilitam o desenvolvimento de apps que, em vez de serem monolíticos, são formados por pequenos serviços interconectados, os famosos microsserviços.

Objetivo do .NET Aspire​

O objetivo do .NET Aspire é melhorar a experiência de desenvolvimento, especialmente quando você está criando apps na nuvem. Ele oferece ferramentas e padrões que tornam tudo mais fácil, desde a configuração até a execução das aplicações distribuídas. A orquestração no .NET Aspire foca em simplificar o ambiente de desenvolvimento local, conectando projetos e suas dependências de forma automática, sem que você precise se preocupar com detalhes técnicos.

Orquestração Simplificada​

A orquestração no .NET Aspire foca na simplificação do ambiente de desenvolvimento localm automatizando a configuração e a interconexão de múltiplos projetos e suas dependências. Embora não substitua sistemas robustos usados em produção, como o Kubernetes, o .NET Aspire fornece abstrações que tornam o setup de descoberta de serviços, variáveis de ambiente e configurações de contêiner mais acessíveis e consistentes.

Componentes Prontos para Uso​

O .NET Aspire também vem com componentes prontos para uso, como Redis ou PostgreSQL, que você pode adicionar ao seu projeto com poucas linhas de código. Além disso, ele inclui templates de projetos e ferramentas para Visual Studio, Visual Studio Code e CLI do .NET, facilitando ainda mais a criação e gestão dos seus projetos.

Exemplo de Uso​

Por exemplo, com algumas linhas de código, você pode adicionar um contêiner Redis e configurar automaticamente a connection string no projeto frontend:

var builder = DistributedApplication.CreateBuilder(args);
var cache = builder.AddRedis("cache");
builder.AddProject<Projects.MyFrontend>("frontend")
       .WithReference(cache);

Se você deseja saber mais sobre o .NET Aspire, recomendo que acesse a documentação oficial do .NET Aspire, que está repleta de informações detalhadas e exemplos práticos para você começar a desenvolver suas aplicações com o .NET Aspire.



Acesse agora mesmo a documentação oficial do .NET Aspire: Documentação Oficial do .NET Aspire

Iniciando com o .NET Aspire​

Durante a sessão do .NET Aspire Developers Day, o Chris Noring apresentou uma integração incrível entre o .NET Aspire e JavaScript, mostrando como é possível criar aplicações modernas e distribuídas com o poder do .NET Aspire e a flexibilidade do JavaScript.



Se você deseja assistir a sessão completa do Chris Noring, acesse o link abaixo:






Antes ele começou explicando como é fácil realizar a configuração para começar a usar o .NET Aspire, que há necessidade de instalar:

• .NET 8
• .NET Aspire Workload
• OCI Compatível com o Docker ou Podman
• Visual Studio Code ou Visual Studio
• Extensão: C# Dev Kit

A estruturação de um projeto .NET Aspire é simples e pode ser feita usando Visual Studio, Visual Studio Code ou simplesmente o terminal.



Por exemplo, você pode criar um novo projeto usando o terminal com o seguinte comando:



dotnet new aspire-starter



Este comando gera uma estrutura de projeto que inclui componentes essenciais como o AppHost (o cérebro da operação), ServiceDefaults e uma aplicação inicial.



Após estruturar o projeto, o próximo passo é justamente executar. Porém se faz necessário se certificar e garantir que o HTTPS esteja habilitado, pois o .NET Aspire requer HTTPS para funcionar.



Para habilitar o HTTPS, você pode usar o seguinte comando:



dotnet dev-certs https --trust



E, finalmente, para executar o projeto, basta usar o comando:



dotnet run



Ao executar o projeto AppHost, abrirá um painel exibindo todos os recursos dentro do seu projeto, como APIs e serviços de front-end. Este painel fornece insights valiosos sobre as métricas, logs e solicitações ativas da sua aplicação, facilitando o monitoramento e a depuração da sua aplicação em nuvem.



Tudo isso o Chris Noring mostrou durante a sessão do .NET Aspire Developers Day, demonstrando como é fácil e prático começar a desenvolver aplicações modernas com o .NET Aspire.







Se desejar, recomendo a leitura do tutorial: "Quickstart: Build your first .NET Aspire project" que está disponível na documentação oficial do .NET Aspire.

Um pouco mais sobre Orquestração com .NET Aspire​

Vamos explorar um pouco mais o que o Chris Noring mostrou nessa parte da sessão.



A orquestração de aplicações distribuídas com o .NET Aspire envolve a configuração e a conexão dos vários componentes que compõem a aplicação. O arquivo aspire-manifest.json é uma peça central nesse processo, documentando como os serviços se conectam e configuram dentro da aplicação.



Essa automatização facilita a vida do desenvolvedor, eliminando a necessidade de configurar manualmente cada conexão e dependência.

O Papel do aspire-manifest.json​

O aspire-manifest.json é um arquivo JSON gerado automaticamente pelo .NET Aspire, que contém todas as informações necessárias sobre os recursos e componentes da aplicação.



Ele inclui detalhes como strings de conexão, variáveis de ambiente, portas e protocolos de comunicação. Este manifesto garante que todos os serviços da aplicação se conectem corretamente e funcionem em harmonia.



Vejamos o exemplo replicado pelo Chris Noring durante a sessão em como configurar um cache Redis e uma API de Produtos desenvolvida em Node.js utilizando o arquivo Program.cs:

var cache = builder.AddRedis("cache");

var productApi = builder.AddNpmApp("productapi", "../NodeApi", "watch")
    .WithReference(cache)
    .WithHttpEndpoint(env: "PORT")
    .WithExternalHttpEndpoints()
    .PublishAsDockerFile();

Neste exemplo, o Redis é configurado como um serviço de cache, e a API de produtos, desenvolvida em Node.js, é configurada para utilizar esse cache. O método WithReference(cache) assegura que a API de produtos possa se conectar ao Redis. O método PublishAsDockerFile() cria um Dockerfile para a aplicação, permitindo sua execução em um contêiner.

Como o Manifesto Reflete Essas Configurações?​

Bom, uma vez que o código é executado o .NET Aspire gera um arquivo aspire-manifest.json que reflete todas as configurações feitas no código. Nessa parte o Chris explica que como o manifesto documenta a configuração do Redis e da API de Produtos:

{
  "productapi": {
    "type": "dockerfile.v0",
    "path": "../NodeApi/Dockerfile",
    "context": "../NodeApi",
    "env": {
      "NODE_ENV": "development",
      "ConnectionStrings__cache": "{cache.connectionString}",
      "PORT": "{productapi.bindings.http.port}"
    },
    "bindings": {
      "http": {
        "scheme": "http",
        "protocol": "tcp",
        "transport": "http",
        "targetPort": 8000,
        "external": true
      }
    }
  }
}

Neste trecho do manifesto, podemos ver que a API de produtos (productapi) está configurada para utilizar a string de conexão do Redis (ConnectionStrings__cache), que é automaticamente gerada e injetada no ambiente da aplicação. Além disso, o manifesto especifica que a API de produtos será exposta via HTTP na porta 8000.

Como Configurar ou Atualizar o Manifesto?​

Para gerar ou atualizar o arquivo aspire-manifest.json, você pode usar o seguinte comando:



dotnet run --publisher manifest --output-path aspire-manifest.json



Esse comando executa a aplicação e gera o manifesto, que é muito importante para a implantação em ambientes de produção ou para testes em desenvolvimento.

Integrando JavaScript com .NET Aspire​

A flexibilidade do .NET Aspire se estende à integração com JavaScript, suportando tanto o desenvolvimento de Front-end quanto de Back-end. Essa capacidade permite que os desenvolvedores usem frameworks e bibliotecas JavaScript populares juntamente com componentes .NET, criando um ambiente de desenvolvimento unificado.

Exemplo de Front-End com Angular​

Na palestra de Chris Noring, foi demonstrado como o .NET Aspire pode ser integrado a um projeto de front-end desenvolvido em Angular. A configuração de backend e a conexão com APIs são simplificadas com o uso de variáveis de ambiente, que são automaticamente geradas e injetadas no projeto.

Configuração de Backend no Angular​

O arquivo proxy.conf.js é utilizado para redirecionar as chamadas de API no ambiente de desenvolvimento para o backend correto. As URLs do backend, que podem variar entre ambientes, são gerenciadas usando variáveis de ambiente. Veja um exemplo de configuração:

module.exports = {
  "/api": {
    target: process.env["services__weatherapi__https__0"] || process.env["services__weatherapi__http__0"],
    secure: process.env["NODE_ENV"] !== "development",
    pathRewrite: { "^/api": "" },
  },
};

Neste exemplo, o target é definido com base nas variáveis de ambiente services__weatherapi__https__0 ou services__weatherapi__http__0, que são injetadas automaticamente pelo .NET Aspire. Essa configuração garante que o Frontend Angular possa se conectar corretamente ao serviço Backend, independentemente do ambiente (desenvolvimento, teste, produção).

Uso do HttpClient no Angular​

No código Angular, a interação com o backend pode ser feita usando o serviço HttpClient, como mostrado no exemplo a seguir:

constructor(private http: HttpClient) {
  this.http.get<WeatherForecast[]>('api/weatherforecast').subscribe({
    next: result => this.forecasts = result,
    error: console.error
  });
}

Neste trecho, a chamada à API api/weatherforecast é redirecionada automaticamente para o backend correto, graças à configuração feita no proxy.conf.js. Isso simplifica a comunicação entre o frontend Angular e o backend, garantindo que as variáveis de ambiente configuradas no manifesto do .NET Aspire sejam utilizadas corretamente.

Integração com Node.js e .NET Aspire​

O .NET Aspire não só facilita a orquestração de aplicações.NET, mas também integra perfeitamente outras tecnologias como o Node.js. Essa flexibilidade permite que você construa aplicações distribuídas que combinam diferentes stacks tecnológicos de forma eficiente.

Orquestração no AppHost​

Na orquestração realizada no AppHost, o .NET Aspire permite que você conecte diferentes componentes de sua aplicação, como um frontend em Node.js e uma API de backend, tudo isso de forma simples e clara.

var cache = builder.AddRedis("cache");

var weatherapi = builder.AddProject<Projects.AspireWithNode_AspNetCoreApi>("weatherapi");

var frontend = builder.AddNpmApp("frontend", "../NodeFrontend", "watch")
    .WithReference(weatherapi)
    .WithReference(cache)
    .WithHttpEndpoint(env: "PORT")
    .WithExternalHttpEndpoints()
    .PublishAsDockerFile();

Nesse exemplo, o cache é o Redis, o weatherapi é a API de previsão do tempo, e o Frontend é a aplicação Node.js. A função WithReference() conecta esses componentes, garantindo que o frontend tenha acesso tanto ao Redis quanto à API.



O uso de PublishAsDockerFile() permite que o Frontend seja empacotado como um contêiner Docker, facilitando a sua implantação em qualquer ambiente.



No código mostrado na segunda imagem, podemos ver como o AppHost é configurado:

Na Aplicação Node.js...​

No exemplo mostrado nas imagens, a aplicação Node.js está configurada para recuperar o endereço do cache e a URL da API diretamente a partir do projeto .NET Aspire.



Isso é feito através de variáveis de ambiente que são geradas automaticamente com base nos recursos definidos no manifesto do Aspire.

const cacheAddress = env['ConnectionStrings__cache'];
const apiServer = env['services__weatherapi__https__0'] ?? env['services__weatherapi__http__0'];

Aqui, ConnectionStrings__cache e services__weatherapi são variáveis de ambiente que o Aspire injeta automaticamente no ambiente de execução da aplicação Node.js. Essas variáveis contêm os valores necessários para que a aplicação se conecte corretamente ao Redis e à API de previsão do tempo.



Com essas informações em mãos, a aplicação pode facilmente acessar o cache e a API, sem a necessidade de hard-coding de URLs ou strings de conexão. Isso não só facilita a manutenção do código como também garante que a aplicação funcione corretamente em diferentes ambientes (desenvolvimento, teste, produção).

Exemplo de Uso em uma Rota Express​

Um exemplo de como essa configuração é utilizada em uma rota Express na aplicação Node.js pode ser visto a seguir:

app.get('/', async (req, res) => {
    let cachedForecasts = await cache.get('forecasts');
    if (cachedForecasts) {
        res.render('index', { forecasts: JSON.parse(cachedForecasts) });
        return;
    }

    let response = await fetch(`${apiServer}/weatherforecast`);
    let forecasts = await response.json();
    await cache.set('forecasts', JSON.stringify(forecasts));
    res.render('index', { forecasts });
});

Aqui, a aplicação tenta primeiro recuperar as previsões do tempo a partir do cache Redis. Se os dados estiverem no cache, eles são renderizados diretamente. Caso contrário, a aplicação faz uma requisição à API de previsão do tempo (apiServer), armazena os resultados no cache, e depois os exibe.



Essa lógica melhora significativamente a performance e a eficiência da aplicação, garantindo que os dados sejam recuperados rapidamente a partir do cache sempre que possível.

Conclusão​

O .NET Aspire representa um avanço significativo na simplificação do desenvolvimento de aplicações distribuídas e prontas para a nuvem. Com sua capacidade de integrar diferentes tecnologias, como JavaScript e Node.js, ele oferece uma plataforma robusta e flexível para criar soluções modernas e eficientes. Se você deseja levar suas habilidades de desenvolvimento para o próximo nível, aproveite ao máximo o poder do .NET Aspire.



Para aprofundar ainda mais o seu conhecimento, recomendo fortemente que você assista à palestra do Chris Noring, onde ele explora detalhadamente as capacidades e a versatilidade do .NET Aspire. Esta é uma oportunidade imperdível para aprender diretamente com um dos especialistas que está na vanguarda do desenvolvimento de software.



Assista agora à palestra do Chris Noring: Palestra do Chris Noring no .NET Aspire Developers Day

Recursos Adicionais​

Para continuar sua jornada no .NET Aspire, explore os seguintes recursos adicionais:

• Documentação Oficial - .NET Aspire
• Orchestrate Node.js apps in .NET Aspire
• Code Sample: .NET Aspire with Angular, React, and Vue
• Code Sample: .NET Aspire + Node.js
• Curso Grátis: Criar aplicativos distribuídos com o .NET Aspire
• Video series: Welcome to .NET Aspire

Espero que este artigo tenha sido útil e inspirador para você. Se tiver alguma dúvida ou sugestão, não hesite em compartilhar nos comentários abaixo. Estou aqui para ajudar e apoiar você em sua jornada de aprendizado e crescimento profissional.



Até a próxima e continue aprendendo, criando e compartilhando!

Continue reading...