/teste-de-progresso-web

Deploy version for netlify

Primary LanguageTypeScript

Teste de Progresso

Projeto gerado com Angular CLI versão 16.2.10.

Clonando para um novo projeto

git clone https://github.com/teste-de-progresso/web.git teste-de-progresso-web

Servidor de dev

ng serve

E abra o navegador em localhost:4200. A aplicação irá recarregar automaticamente caso haja alguma alteração no código.

Build

Para gerar uma build de produção.

npm run build:prod

Ou para gerar uma build de desenvolvimento.

npm run build

Os arquivos serão gerados na pasta dist/.

Gerando componentes

ng generate component nome-do-componente

Para gerar um novo componente. Você também pode usar ng generate directive|pipe|service|class|guard|interface|enum|module.

Gerando componentes com lazy loading

ng generate module pages/nome-do-componente --routing=true && ng generate component pages/nome-do-componente --module=pages/nome-do-componente

Para gerar um novo componente com lazy loading

Libs instaladas

  • Angular Material
    • ng add @angular/material
  • NgxMask
    • npm i ngx-mask
  • MD5 Typescript
    • npm i md5-typescript
  • Ngx Cookie Service
    • npm i ngx-cookie-service
  • Zxcvbn
    • npm i @zxcvbn-ts
  • AOS
    • npm i aos
  • Medium Zoom
    • npm i medium-zoom

Links úteis

Pacotes instalados

Outros

Componentes compartilhados

Loading

<loading></loading>

Loading da página

<page-loading></page-loading>

Paginação de tabela

<pagination (pageChange) [back] [next] [current] [total]></pagination>

Modal de confirmação

Esse padrão de modal e callback do mesmo, como também a estrutura do componente, deve ser seguido para todos os modais de confirmação.

constructor(private dialog: MatDialog) {}

confirm() {
  const dialogRef = this.dialog.open(ConfirmModalComponent, {
    data: {
      title: 'Título',
      message: 'Mensagem',
    },
  });

  dialogRef.afterClosed().subscribe((result) => {
    if (result) {
      // Confirmação
    } else {
      // Cancelamento
    }
  });
}

Navbar

A navbar já possui padrãos e a configuração de estilo pode ser feita no arquivo src/styles/variables.scss, editando de acordo com a necessidade as variaveis reservadas.

Modulo compartilhado

Cada componente, modulo, pipe, diretiva etc, compartilhados devem ser importados e exportados no SharedModule, como também suas devidas dependências.

Serviço HTTP

O serviço HTTP já possui um interceptor para adicionar o token de acesso em todas as requisições, caso o mesmo exista, trata erros de requisição, adiciona o content-type correto automaticamente, repete a requisição caso a mesma falhe, e aceita caminhos de url relativos com base na base_url configurada no environments, Foi adicionada uma documentação DocJS para te auxiliar na utilização de cada método. Para seu uso, basta importa-lo ao invés do cliente.

constructor(private http: HttpService) {}

Estilização

Para criar novos estilos globais, como por exemplo, para botões, formulários, modais, etc, é preciso criar o arquivo .scss na pasta src/styles, por exemplo, src/styles/_buttons.scss. Após isso importe-o no arquivo src/styles.scss como: @import 'styles/buttons';. Não se esqueça do _ no início do nome do arquivo.

As variáveis de estilização estão no arquivo src/styles/_variables.scss.

Media screens

Para criar media screens use

@include media('<=tablet') {
  // > | < | <= | >=
  // Estilos aqui
}

Caso queira adicionar novos breakpoints use o arquivo src/styles/_media.scss.

Para mais informações, acesse a documentação do Include Media.

Diretivas

Diretivas são utilizadas para criar componentes reutilizáveis.

Input mask

<input type="text" name="phone" mask="(00) 00000-0000" />

Input file

O evento do (upload) retorna o base64 do arquivo selecionado, quando se trata de uma imagem, ela já é compressada com o service compressor.

<input
  type="file"
  name="logo"
  appInputFile
  (upload)="handleInputChange($event)"
/>

Icones

Basta adicionar o nome do icone no atributo icon da tag <i>, como por exemplo:

<i icon="icon-name"></i>

Você pode adicionar novos icones na pasta src/app/directives/icon.directive.ts.

Recomendamos usar o FontAwesome para os icones, usando o fw2svg para transformar da tag HTML para SVG, porém, você pode usar qualquer outro.

Se usar o FontAwesome junto ao fw2svg, você conseguirá usar propriedades do css como font-size e color para estilizar o icone.

Serviços

Custom validators

Validadores customizados para o formControl do Angular. Existem atualmente validadores para CPF e CNPJ.

constructor(private customValidators: CustomValidatorsService) {}

cpfInput = new FormControl('', [
  Validators.required,
  this.customValidators.cpf(),
]);

Angular Notifier (angular-notifier)

Serviço para exibir mensagens na tela.

<notifier-container></notifier-container>
@import 'node_modules/angular-notifier/styles';
constructor(private notifier: NotifierService) {}

// Tipos de mensagens
this.notifier.notify('default', 'Mensagem'); // Sem contexto
this.notifier.notify('info', 'Mensagem'); // Informativas
this.notifier.notify('warning', 'Mensagem'); // Avisos
this.notifier.notify('success', 'Mensagem'); // Sucesso
this.notifier.notify('error', 'Mensagem'); // Erro

// Limpar todas as mensagens
this.notifier.hideAll();

// Limpar a última mensagem que apareceu
this.notifier.hideNewest();

// Limpar a primeira mensagem que apareceu
this.notifier.hideNewest();

Storage

Serviço para armazenar dados e evitar requisições desnecessárias.

Já possui uma função para salvar o token de acesso no cookie e um get para obter o mesmo.

constructor(private storage: StorageService) {}

token = this.storage.token;
this.storage.setToken('token', keepLogged);

PWA

Logos

Adicionar as logos corretamente coforme o manifest.webmanifest. Respeite as dimensões e substitua com as logos corretas que estão em src/assets/icons.

Variáveis

As variáveis name, short_name, theme_color e background_color devem ser configuradas no arquivo manifest.webmanifest.

Lint

Utilize este comando para executar a verificação de sintaxe em todo o projeto.

ng lint

Funções

  • Nomes de funções para ouvintes de eventos, usar o prefixo handle. Exemplo: handleDeleteTask()
  • Nomes de funções para funções de callback, usar o prefixo on. Exemplo: onTaskDeleted()
  • Nomes de funções para funções de validação, usar o prefixo validate. Exemplo: validateTask()
  • Descritivas, porém não muito extensas.
  • Utilizar camelCase

Variáveis

  • Todas as variáveis devem ser escritas em inglês.
  • Descritivas, porém não muito extensas.
  • Tipar sempre que possível.
  • Utilizar snake_case.

Interfaces

  • Precede o I antes da nomenclatura que segue o padrão PascalCase.
  • Utilizar pasta de models para o armazenamento das mesmas.

HTML

  • Os campos de formulário com mais de uma tag <input> devem conter uma tag <form> como pai e nele conter um evento (ngSubmit) e um type='submit' no botão ao invés de um (keyup.enter).
  • Usar form-control ao invés de ngModel.
  • Todas as tags <input> que possuirem um respectivo <label>, utilizar um id no input que tenha o mesmo valor que o for do label.

Commits

Preferencialmente feitos em inglês.

  • chore: Atualização de tarefas que não ocasionam alteração no código de produção, mas mudanças de ferramentas, mudanças de configuração e bibliotecas.

  • feat: São adições de novas funcionalidades ou de quaisquer outras novas implantações ao código.

  • fix: Essencialmente definem o tratamento de correções de bugs.

  • refactor: Utilizado em quaisquer mudanças que sejam executados no código, porém não alterem a funcionalidade final da tarefa impactada.

  • docs: Inclusão ou alteração somente de arquivos de documentação.

  • perf: Uma alteração de código que melhora o desempenho.

  • style: Alterações referentes a arquivos de estilo como SCSS ou CSS.

  • build: Alterações que afetam o sistema de construção ou dependências externas (escopos de exemplo: gulp, broccoli, npm).

  • ci: Mudanças em nossos arquivos e scripts de configuração de CI (exemplo de escopos: Travis, Circle, BrowserStack, SauceLabs).

  • env: Utilizado na descrição de modificações ou adições em arquivos de configuração em processos e métodos de integração contínua (CI), como parâmetros em arquivos de configuração de containers.

Exemplos de Commits:

  • chore: add commitlint and husky
  • chore(eslint): require semicolon
  • refactor: typed variables
  • feat: add axios / search and check data
  • feat(page/home): created route for home page
  • fix: NH-3 button color in login

Branchs

Prerencialmente feitos em inglês.

  • bugfix/: Responsável por corrigir bugs pequenos em ambiente de desenvolvimento.

  • feature/: O nome já diz, uma nova feature que será adicionada ao projeto, componente e afins.

  • hotfix/: Responsável por corrigir algum erro critico que impeça o cliente de executar alguma função em ambiente de produção.

  • improvement/: Em si é uma melhoria para uma feature já existente, seja de performance, de escrita, de layout, etc.

Exemplos de Branches:

  • bugfix/login-submit-form: Correção de bug ao submeter o formulário de login
  • feature/login-page-form: Adição de formulário na página de login
  • hotfix/login-page-submit-button: Correção de bug no botão de submeter o formulário de login já em produção
  • improvement/login-page-section: Melhoria na seção de login

Estrutura dos diretórios

Gere um arquivo de texto com a estrutura de diretórios

npm run tree