Pular para o conteúdo principal

Knowledge Source Personalizado de Boas Práticas de Angular

Você está desenvolvendo uma Aplicação Angular e deseja centralizar as boas práticas de desenvolvimento front-end para que sua equipe possa seguir padrões consistentes. Para isso, você pode criar um Knowledge Source personalizado na StackSpot AI, armazenar e compartilhar essas boas práticas com sua equipe.

Passos para criar o Knowledge Source

Passo 1. Acessar o Portal da StackSpot AI

Passo 2. Criar um novo Knowledge Source

  • No menu principal, clique em ‘Contents > Knowledge Sources’;
  • Clique no botão ‘Criar’ para adicionar um novo Knowledge Source;
  • Selecione a opção ‘Personalizado’ para criar um Knowledge Source customizado;

Passo 3. Preencher as informações do Knowledge Source

  • Nome: adicione um nome descritivo, como "Boas Práticas de Angular".
  • Identificação (Slug): defina um slug único, como "boas-praticas-angular".

Você não pode alterar o slug posteriormente.

  • Descrição: adicione uma descrição clara, como:

"Este Knowledge Source contém boas práticas de desenvolvimento com o framework Angular, focando em organização de pastas e lógica no HTML."

  • Clique em ‘Salvar’.

Passo 4: Adicionar o Conteúdo de Boas Práticas

  • Na aba ‘Knowledge Objects’, clique em ‘Adicionar Arquivo’;
  • Escolha a opção ‘Manualmente’ para copiar e colar o conteúdo diretamente. Cole o seguinte conteúdo de boas práticas de Angular:
# Boas Práticas para o Front-end: Exemplos com o Framework Angular - Parte I

## Organização da Estrutura de Pastas

A primeira boa prática é manter uma estrutura de pastas organizada. Isso facilita a manutenção e a adição de novas funcionalidades. Segue uma sugestão de estrutura para projetos Angular:

app
├── modules
│ ├── home
│ │ ├── [+] components
│ │ ├── [+] pages/views
│ │ ├── home-routing.module.ts
│ │ └── home.module.ts
│ ├── core
│ │ ├── [+] authentication
│ │ ├── [+] footer
│ │ ├── [+] guards
│ │ ├── [+] http
│ │ ├── [+] interceptors
│ │ ├── [+] mocks
│ │ ├── [+] services
│ │ ├── [+] header
│ │ ├── core.module.ts
│ │ └── logger.service.ts
│ ├── shared
│ │ ├── [+] components
│ │ ├── [+] directives
│ │ ├── [+] pipes
│ │ └── [+] models
│ └── [+] configs
└── assets
└── scss
├── [+] partials
├── _base.scss
└── styles.scss
## Evite Lógicas no HTML Evite colocar lógicas diretamente no HTML. 

Utilize o componente para manipular a lógica e mantenha o HTML o mais simples possível. Veja o exemplo abaixo: 

### Exemplo incorreto: ```html <p *ngIf="role === 'admin'"> Status: Admin </p>

### Exemplo correto: ```<p *ngIf="showStatus"> Status: Admin </p>

### Componente
public ngOnInit (): void {
    this.role = 'admin';
    this.showStatus = true;
}

Seguir essas boas práticas ajuda a manter o código organizado, legível e fácil de manter, além de facilitar a adição de novas funcionalidades.

  • Após colar o conteúdo, clique em ‘Salvar’

Passo 5: Compartilhar o Knowledge Source

  • Após salvar o Knowledge Source, você pode compartilhá-lo com outros membros da sua equipe.
  • Na aba de compartilhamento, adicione os e-mails dos membros da equipe e defina as permissões (leitura ou escrita).
  • Clique em ‘Compartilhar’.

Agora você tem um Knowledge Source Personalizado com boas práticas de Angular disponível para toda a equipe. Isso facilita a consulta e garante que todos sigam os mesmos padrões de desenvolvimento, melhorando a qualidade e a consistência do código.

Esse caso de uso mostra como você pode utilizar a StackSpot AI para centralizar e compartilhar boas práticas de desenvolvimento, garantindo que sua equipe tenha acesso fácil a informações importantes.