Pular para o conteúdo principal

Agente Especialista Técnico em Angular

O Agente a seguir pode analisar código Angular, como um componente para gerar números de CPF aleatórios, e fornecer explicações detalhadas, sugerir melhorias ou criar testes unitários para o código. Isso o torna uma ferramenta valiosa para manter práticas de desenvolvimento Angular de alta qualidade e consistentes.

Passo 1. Acesse o Portal da StackSpot AI

Passo 2. Criar um novo Agente

  • No menu principal, clique em ‘Contents > Agents’;
  • Clique no botão ‘Criar Agente’;
  • Preencha as seguintes informações:
    • Nome do Agente: Especialista Técnico em Angular
    • Prompt do sistema: cole o seguinte prompt:
Atuar como especialista técnico na tecnologia Angular. Você é um desenvolvedor especialista em Angular e deve fornecer suporte técnico para geração de testes, revisão de código, refatoração e criação de código Angular. Quando solicitado, você deverá analisar o código fornecido, sugerir melhorias, gerar testes unitários e refatorar o código conforme as melhores práticas do Angular. Utilize boas práticas de organização de pastas, separação de responsabilidades e evite lógica no HTML.

  • Comandos Sugeridos: adicione os seguintes comandos sugeridos para ajudar o usuário a iniciar conversas com o Agente:

    Gerar testes para um código Revisar um código fonte Refatorar um código fonte Criar código fonte

  • Modo Conversacional: ative o Modo Conversacional para permitir interações contínuas e complexas, ideal para conversas que envolvem múltiplas trocas de informações.

  • Knowledge Sources (KSs): adicione Knowledge Sources relevantes ao Agente, como documentação de boas práticas de Angular, exemplos de código e guias de estilo. Isso permitirá que o Agente forneça respostas mais precisas e contextualizadas.

Passo 3. Testar o Agente

  • Após configurar o Agente, vá até a seção ‘Tentar’ para testar o Agente e garantir que ele funcione conforme o esperado.
  • Faça perguntas como: "Gerar testes para um código."

Utilize esse código Angular: este exemplo cria um componente simples que exibe uma mensagem e incrementa um contador ao clicar em um botão.

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <h1>{{ title }}</h1>
    <p>Contador: {{ counter }}</p>
    <button (click)="increment()">Incrementar</button>
  `,
  styles: [`
    h1 { color: blue; }
    button { margin-top: 10px; }
  `]
})
export class CounterComponent {
  title = 'Exemplo de Contador';
  counter = 0;

  increment() {
    this.counter++;
  }
}

Passo 4. Compartilhar o Agente

  • Se você quiser compartilhar o Agente com outros membros da equipe, clique no botão ‘Compartilhar’.
  • Escolha entre:
    • Compartilhar com usuários específicos: adicione o e-mail dos usuários.
    • Publicar na conta: disponibilize o Agente para todos os membros da conta.

Passo 5. Usar Agente

  • O Agente estará disponível na StackSpot AI IDE, onde você poderá utilizá-lo diretamente para gerar testes, revisar, refatorar e criar código Angular.
  • O Agente pode ser utilizado em conjunto com Quick Commands para automatizar ainda mais o processo de desenvolvimento.

Exemplo de uso do Agente

1. Explicação de código Angular

Usuário: "Me explique esse código"

import { Component } from '@angular/core';

@Component({
  selector: 'app-cpf-generator',
  templateUrl: './cpf-generator.component.html',
  styleUrls: ['./cpf-generator.component.css']
})
export class CpfGeneratorComponent {

  public cpf: string = '';

  constructor() {}

  // Função para gerar um CPF aleatório
  public generateCpf(): void {
    this.cpf = this.generateRandomCpf();
  }

  // Função que gera o CPF
  private generateRandomCpf(): string {
    let cpf = '';
    let sum = 0;
    let remainder;

    // Gera os primeiros 9 dígitos aleatórios
    for (let i = 0; i < 9; i++) {
      cpf += Math.floor(Math.random() * 9).toString();
    }

    // Calcula o primeiro dígito verificador
    for (let i = 0; i < 9; i++) {
      sum += parseInt(cpf.charAt(i)) * (10 - i);
    }
    remainder = 11 - (sum % 11);
    if (remainder === 10 || remainder === 11) {
      remainder = 0;
    }
    cpf += remainder.toString();

    // Calcula o segundo dígito verificador
    sum = 0;
    for (let i = 0; i < 10; i++) {
      sum += parseInt(cpf.charAt(i)) * (11 - i);
    }
    remainder = 11 - (sum % 11);
    if (remainder === 10 || remainder === 11) {
      remainder = 0;
    }
    cpf += remainder.toString();

    return cpf;
  }
}


Agente:

Este código define um componente Angular chamado CpfGeneratorComponent, que é responsável por gerar um CPF aleatório. Aqui está uma explicação detalhada:
Importação e Definição do Componente:
O componente é importado de @angular/core e é decorado com o @Component, que define o seletor, o template e os estilos do componente.
O seletor app-cpf-generator será usado no HTML para renderizar este componente.
Propriedade cpf:
A propriedade cpf é uma string pública que armazenará o CPF gerado.
Método generateCpf:
Este método público é chamado para gerar um CPF. Ele chama o método privado generateRandomCpf para gerar o CPF e atribui o valor à propriedade cpf.
Método generateRandomCpf:
Este método privado gera um CPF aleatório. Ele segue as regras de geração de CPF, que incluem:
Geração dos primeiros 9 dígitos aleatórios.
Cálculo do primeiro e segundo dígitos verificadores com base em um algoritmo específico.
O CPF gerado é retornado como uma string.