DEV Community: Ivan Trindade

Entendendo Modificadores de Acesso em C#

Ivan Trindade — Mon, 11 Nov 2024 12:23:38 +0000

Os modificadores de acesso são uma parte fundamental da programação orientada a objetos em C#. Eles determinam a visibilidade e acessibilidade dos tipos e membros do seu código, ajudando a implementar o conceito de encapsulamento. Neste artigo, vamos explorar todos os modificadores de acesso disponíveis em C# de uma forma clara e prática.

O que são Modificadores de Acesso?

Modificadores de acesso são palavras-chave que definem como as classes, métodos, propriedades e outros membros do seu código podem ser acessados por partes do programa. Vamos explorar os modificadores abaixo:

public
private
protected
internal

Vamos entender cada um deles em detalhes!

1. Public

O modificador public é o mais permissivo de todos. Membros públicos podem ser acessados de qualquer lugar do seu código, seja dentro do mesmo assembly ou em outros assemblies que referenciam o seu projeto.

public class Customer
{
    // Propriedade pública que pode ser acessada de qualquer lugar
    public string Name { get; set; }

    // Método público que pode ser chamado de qualquer lugar
    public void DisplayInfo()
    {
        Console.WriteLine($"Customer: {Name}");
    }
}

2. Private

O modificador de acesso private é o mais restritivo. Membros privados só podem ser acessados dentro da própria classe onde foram declarados.

public class BankAccount
{
    // Campo privado que só pode ser acessado dentro desta classe
    private decimal _balance;

    // Método privado que só pode ser chamado dentro desta classe
    private void ValidateAmount(decimal amount)
    {
        if (amount <= 0)
            throw new ArgumentException("O valor deve ser maior que zero");
    }

    public void Deposit(decimal amount)
    {
        ValidateAmount(amount); // Ok: método privado chamado dentro da classe
        _balance += amount;     // Ok: campo privado acessado dentro da classe
    }
}

3. Protected

O modificador protected permite que membros sejam acessados dentro da própria classe e por classes que herdam dela (classes filhas).

public class Animal
{
    // Campo protegido que pode ser acessado por classes filhas
    protected string Species;

    // Método protegido que pode ser chamado por classes filhas
    protected virtual void MakeSound()
    {
        Console.WriteLine("Som genérico de animal");
    }
}

public class Dog : Animal
{
    public void Initialize()
    {
        Species = "Canino";    // Ok: campo protected acessado na classe filha
        MakeSound();           // Ok: método protected acessado na classe filha
    }
}

4. Internal

O modificador internal permite que membros sejam acessados apenas dentro do mesmo projeto.

// Classe internal só pode ser usada dentro do mesmo projeto
internal class ConfigurationManager
{
    // Propriedade internal só pode ser acessada dentro do mesmo projeto
    internal string DatabaseConnection { get; set; }
}

Conclusão

Os modificadores de acesso são ferramentas poderosas para controlar a visibilidade e o acesso aos membros das suas classes. Usar os modificadores corretamente ajuda a:

Manter um bom encapsulamento
Reduzir o acoplamento entre diferentes partes do código
Prevenir uso incorreto das suas classes
Facilitar a manutenção do código

Zerando o Hacker Rank: Fazendo a escadinha com TypeScript

Ivan Trindade — Wed, 22 Feb 2023 17:53:57 +0000

No tutorial de hoje, vou ajudá-lo a entender como resolver mais um dos desafios que você encontrará no HackerRank, usando a linguagem TypeScript.

Starircase Detail

O desafio "Starircase detail" propôe que sejam impressas linhas contendo símbolos # e espaços em branco, de forma a criar uma escada de tamanho n. A escada deve ter base e altura iguais a n, e a última linha não deve ter espaços em branco antes dos símbolos #.

O objetivo do desafio é implementar uma função que imprima a escada de acordo com essas especificações. Você pode conferir o desafio através desse link.

Vamos visualizar um exemplo de como o desafio espera a entrada e a saída:

Entrada:

Saída:

     #
    ##
   ###
  ####
 #####
######

Solução proposta

Para solucionar o desafio, você devemos preencher a função staircase, que recebe um número inteiro n como parâmetro e não tem renorno (void). Iremos utilizar dois loops for na função, para iterar sobre as linhas da escada e os caracteres a serem impressos em cada linha. O código da função é o seguinte:

function staircase(n: number): void {
  for (let i = 1; i <= n; i++) {
    console.log("".repeat(n - i) + "#".repeat(i));
  }
}

O primeiro loop for é responsável por interar sobre as linhas da escada. Ele começa em 1 e vai até n, uma vez que a escada deve ter n linhas. A variável i representa o número da linha atual.

Dentro do primeiro loop for, a string a ser impressa é criada usando o método repeat() de strings do JavaScript. Esse métrodo recebe um número inteiro e retorna uma nova string contendo a string original, repetindo o número de vezes especificado.

No caso da escada, são necessários dois tipos de strings: uma contendo espaços em branco e outra contendo símbolos #. Para criar essas strings, são utilizados os seguintes trechos de código:

' '.repeat(n - i)

Esse trecho cria uma string contendo n - i espaços em branco. O método repeat() é utilizado para repetir o caractere espaço o número de vezes necessário.

'#'.repeat(i)

Esse trecho cria uma string contendo i símbolos #. O método repeat() é utilizado para repetir o caractere # o número de vezes necessário.

Essas duas strings são concatenadas utilizando o operador +, e o resultado é impresso na tela utilizando a função console.log(). O resultado final é uma linha da escada contendo os caracteres # e espaços em branco, como especificado no desafio.

Testando solução

Para testar a solução, você pode executar na própria plataforma do HackerRank. Mas caso queira testar em seu editor, você deverá chamar a função staircase passando um valor de n como parâmetro.

Por exemplo, para criar uma escada de tamanho 6, basta chamar a função da seguinte forma:

const n = 6;
staircase(n);

Pronto! Agora você verá a seguinte escada impressa:

     #
    ##
   ###
  ####
 #####
######

Conclusão

Em resumo, a solução apresentada é bastante simples e eficiente para o problema proposto. Utilizando um loop for para iterar de 1 até o valor de n e o método repeat() para imprimir os caracteres desejados, é possível construir uma escada de forma rápida e sem a necessidade de criar uma grande quantidade de variáveis e condições.

Através dessa solução, foi possível abordar alguns conceitos importantes da linguagem TypeScript, como o uso de variáveis e tipos de dados, o uso de loops e a utilização de funções. Além disso, também foi possível explorar algumas funcionalidades nativas do JavaScript, como a função repeat().

Por fim, é importante lembrar que existem diversas formas de resolver um problema em programação e a solução apresentada aqui é apenas uma das muitas possibilidades. Cada programador pode ter uma abordagem diferente para resolver um mesmo problema e, muitas vezes, a solução mais adequada irá depender das particularidades de cada situação. O importante é sempre buscar a melhor solução possível para cada desafio, levando em conta fatores como eficiência, legibilidade e manutenibilidade do código.

JavaScript: Entendendo o método .at()

Ivan Trindade — Tue, 31 Jan 2023 16:16:16 +0000

Juntamente com o objeto simples, o array é uma estrutura de dados amplamente usada em JavaScript. E uma operação amplamente utilizada em arrays é acessar elementos por índice.

Neste post, vou apresentar o método .at(index).

O principal benefício do método .at(), é acessar elementos do final do array usando um índice negativo, o que não é possível usando a sintaxe regular de colchetes array[index].

A limitação da sintaxe dos colchetes

A maneira usual de acessar um elemento de array por índice é o uso de colchetes array[index]:

const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const item = fruits[1];
item; // => 'maçã'

A expressão array[index] é avaliada como o item do array localizado em index e é denominada de acessador de propriedade. Como você já deve saber, a indexação de arrays em JavaScript começa em 0.

Na maioria dos casos, a sintaxe dos colchetes é uma boa maneira de acessar itens por um índice positivo ( >= 0). Tem uma sintaxe simples e legível.

Mas às vezes você gostaria de acessar os elementos do final, e não do início. Por exemplo, vamos acessar o último elemento do array:

const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const lastItem = fruits[fruits.length - 1];
lastItem; // => 'uva'

fruits[fruits.length - 1] é como você pode acessar o último elemento do array, onde fruits.length - 1 é o índice do último elemento.

A dificuldade é que o acessador de colchetes não permite uma maneira direta de acessar itens do final do array e também não aceita um índice negativo.

Felizmente, uma nova proposta (no estágio 3 a partir de janeiro de 2021) traz o método .at() para arrays (bem como para arrays e strings digitados) e resolve muitas limitações do acessador de colchetes.

O método array.at()

Em palavras simples, array.at(index) acessa o elemento no argumento index.

Se o argumento do índice for um número inteiro positivo >= 0, o método retornará o item nesse índice:

const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const lastItem = fruits.at(1);
lastItem; // => 'maçã'

Se o argumento do índice for maior ou igual ao comprimento do array, então, como o acessador regular, o método retornará undefined:

const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const item = fruits.at(999);
item; // => undefined

A verdadeira mágica acontece quando você usa um índice negativo com o método array.at() — então o elemento é acessado a partir do final do array. Por exemplo, vamos usar o índice -1 para acessar o último elemento do array:

const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const lastItem = fruits.at(-1);
lastItem; // => 'uva'

Aqui está um exemplo mais detalhado de como o método array.at()acessa os elementos:

const vegetables = ['batata', 'tomate', 'cebola'];
vegetables.at(0); // => 'batata'
vegetables.at(1); // => 'tomate'
vegetables.at(2); // => 'cebola'
vegetables.at(3); // => undefined
vegetables.at(-1); // => 'cebola'
vegetables.at(-2); // => 'tomate'
vegetables.at(-3); // => 'batata'
vegetables.at(-4); // => undefined

Se negIndex for um índice negativo < 0, array.at(negIndex) acessa o elemento no índice array.length + negIndex. Aqui está um exemplo:

const fruits = ['laranja', 'maçã', 'banana', 'uva'];
const negIndex = -2;
fruits.at(negIndex);              // => 'banana'
fruits[fruits.length + negIndex]; // => 'banana'

Resumo

A sintaxe dos colchetes em JavaScript é a maneira usual e boa de acessar itens por índice. Basta colocar a expressão do índice entre colchetes array[index] e obter o item do array nesse índice.

No entanto, acessar itens do final usando o acessador regular não é conveniente, pois não aceita índices negativos. Então, por exemplo, para acessar o último elemento do array, você deve usar uma expressão alternativa:

const lastItem = array[array.length - 1];

Felizmente, o novo método array.at(index) permite acessar os elementos do array por índice como um acessador regular. Além disso, array.at(index) aceita índices negativos, caso em que o método pega elementos do final:

const lastItem = array.at(-1);

Obrigado por ler! Espero que tenha gostado do artigo, até a próxima.

Zerando o Hacker Rank: Contando Positivos, Negativos e Zeros

Ivan Trindade — Tue, 31 Jan 2023 13:28:28 +0000

No tutorial de hoje, vou ajudá-lo a entender como resolver mais alguns desafios que você encontrará no HackerRank, usando a linguagem TypeScript.

Desafio que abordaremos:

Plus Minus

Plus Minus

O objetivo desse desafio, é que recebendo um array de números inteiros, calculemos as proporções entre a quantidade de items positivos, negativos e zeros do array. Devemos imprimir o valor desses cálculos em uma nova linha com 6 casas após o decimal. Você pode conferir o desafio neste link.

Por exemplo:

A entrada do array seria dessa forma:

[-4, 3, 9, 0, -4, 1];

Devemos retornar o cálculo desses valores dessa forma:

0.500000
0.333333
0.166667

Para resolver esse desafio, iremos utilizar a função plusMinus. Começaremos definindo uma variável const para guardar o valor total do array:

function plusMinus(arr: number[]): void) {
  const totalElements = arr.length;

  ...
}

Após guardar o total de items do array, crie a variável count para armazenar três contadores iniciando-os com zero: um para o número de items positivos, negativos e zeros.

function plusMinus(arr: number[]): void) {
  const totalElements = arr.length;
  let count = positives: 0, negatives: 0, zeroes: 0
  ...
}

Em seguida, usaremos o método .forEach() para percorrer cada item do array. Para cada item do array, iremos verificar se o valor é positivo, negativo ou zero e incrementaremos o valor para a variável count:

function plusMinus(arr: number[]): void) {
  const totalElements = arr.length;
  let count = { positives: 0, negatives: 0, zeroes: 0 };

  arr.forEach(num => {
    if (num > 0) count.positives++;
    if (num < 0) count.negatives++;
    if (num === 0) count.zeroes++;
  });

 ...

}

Por fim, após o loop, iremos calcular as três relações entre a quantidade de items positivos, zeros e o tamanho total do array dividindo o contador pelo número total de items. O resultado é arredondado para seis casas decimais usando o método .toFixed(), assim como foi solicitado no desafio. No final, imprimimos os valores totais de positivesToTotalRatio, negativesToTotalRatio e zeroesToTotalRatio.

function plusMinus(arr: number[]): void) {
  const totalElements = arr.length;
  let count = { positives: 0, negatives: 0, zeroes: 0 };

  arr.forEach((num) => {
    if (num > 0) count.positives++;
    if (num < 0) count.negatives++;
    if (num === 0) count.zeroes++;
  });

  const positivesToTotalRatio = (count.positives / totalItems).toFixed(6);
  const negativesToTotalRatio = (count.negatives / totalItems).toFixed(6);
  const zeroesToTotalRatio = (count.zeroes / totalItems).toFixed(6);

  console.log(
    `${positivesToTotalRatio}\n${negativesToTotalRatio}\n${zeroesToTotalRatio}`
  );
}

Obrigado por ler!

Espero que tenha gostado da resolução do desafio, até a próxima!

Zerando HackerRank: Diferença Diagonal

Ivan Trindade — Mon, 30 Jan 2023 13:39:03 +0000

No tutorial anterior, resolvemos alguns desafios do HackerRank usando TypeScript. No tutorial de hoje, vou ajudá-lo a entender como resolver mais alguns desafios que você encontrará no HackerRank, usando a linguagem TypeScript.

Desafio que abordaremos:

Diferença Diagonal

Diferença Diagonal

O desafio Diagonal Difference, pede que calculemos a diferença absoluta entre as somas das diagonais de um array. Precisamos levar em consideração a diagonal primária e a diagonal secundária. Por exemplo:

De acordo com o array acima, a diagonal primária seria:

11
   5
     -12

A diagonal secundária seria:

     4
   5
10

A saída do cálculo das diagonais:

Calculamos a diagonal primária, 11 + 5 - 12 = 4 e a secundária 4 + 5 + 10 = 19. O resultado da saída desse array, será calculando a diferença da diagonal primária com a secundária, |4 - 19| = 15.

Agora que entendemos a lógica por trás do desafio, vamos solucioná-lo no código. A função diagonalDifference irá calcular a diferença da diagonal de um array bidimensional.

Começaremos definindo duas variáveis let para armazenar a soma dos elementos da diagonal primária e da diagonal secundária:

function diagonalDifference(arr: number[][]): number {
  let primaryDiagonalSum = 0;
  let secondaryDiagonalSum = 0;
...
}

Em seguida, usaremos o método .forEach() para percorrer cada linha do array e calcular as somas:

function diagonalDifference(arr: number[][]): number {
  let primaryDiagonalSum = 0;
  let secondaryDiagonalSum = 0;

  arr.forEach((row, index) => {
    primaryDiagonalSum += row[index];
    secondaryDiagonalSum += row[arr.length - 1 - index];
  });
...

}

Usamos o método .forEach() para percorrer cada linha do array, no qual o método .forEach() recebe como argumento uma função callback, que é executada para cada item do array. A função callback recebe dois argumentos: row que representa a linha atual e index que representa o índice da linha atual. Usamos o operador += para incrementar um valor.

Dentro da função callback, o elemento da diagonal primária é acessado através da expressão row[index] e o elemento da diagonal secundária, é acessado através da expressão row[arr.length - 1 - index]. Ambas as expressões são adicionadas ás variáveis primaryDiagonalSum e secondaryDiagonalSum, respectivamente.

Por fim, usaremos o método Math.abs() para retornar o valor absoluto da diferença entre primaryDiagonalSum e secondaryDiagonalSum. Usando este método, garantiremos que o retorno sempre seja um valor positivo.

function diagonalDifference(arr: number[][]): number {
  let primaryDiagonalSum = 0;
  let secondaryDiagonalSum = 0;

  arr.forEach((row, index) => {
    primaryDiagonalSum += row[index];
    secondaryDiagonalSum += row[arr.length - 1 - index];
  });

  return Math.abs(primaryDiagonalSum - secondaryDiagonalSum);
}

Obrigado por ler!

Espero que tenha gostado do tutorial, em breve irei postar mais soluções do HackerRank.

Conheça o PNPM: o NPM mais rápido e com melhor desempenho

Ivan Trindade — Fri, 27 Jan 2023 14:30:54 +0000

O npm (Node Package Manager), é um gerenciador de pacotes para o ecossistema JavaScript. Ele é usado para gerenciar e instalar bibliotecas e dependências em projetos JavaScript, como projetos Node.js.

Com o npm, os desenvolvedores podem instalar pacotes prontos para uso ou publicar seus próprios pacotes para compartilhar com a comunidade. Ele também fornece uma maneira fácil de gerenciar e atualizar as dependências de um projeto. O npm é instalado junto com o Node.js e pode ser usado a partir da linha de comando.

Nesse artigo, veremos como o pnpm difere do npm e os benefícios que você pode obter ao usar pnpm em vez do npm.

O que é o PNPM?

PNPM é um gerenciador de pacotes alternativo para Node.js, que significa “Performant NPM”.

O principal objetivo do PNPM é manter todos os pacotes em um armazenamento global (centralizado) e usá-los, se necessário, por outros projetos também, criando links físicos para ele.

Vantagens de usar PNPM sobre NPM

Economiza uma enorme quantidade de espaço em disco.
Leva menos tempo para instalar os pacotes.
Possui suporte embutido para repositórios mono.

Agora, vamos entender como as coisas funcionam na prática. Vamos visualizar duas aplicações para entender os conceitos por trás da cena.

Aqui está o arquivo package.json das duas aplicações:

{
"name": "application1",
"version": "0.0.0",
"private": true,
"main": "app.js",
"scripts": {
  "start": "node ./bin/www"
},
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "csurf": "^1.10.0",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "express-session": "^1.17.0"
  }
}
{
 “name”: “application2”,
 “version”: “0.0.0”,
 “private”: true,
 “main”: “app.js”,
 “scripts”: {
 “start”: “node ./bin/www”
 },
 “dependencies”: {
   “cookie-parser”: “~1.4.4”,
   “csurf”: “^.10.0”,
   “debug”: “~2.6.9”,
   “powerbi-client”: “^.16.5”,
   “rxjs”: “^.5.3”
 }
}

Instalação

Primeiramente, instalei o pnpm usando o npm executando o comando:

npm i -g pnpm

Podemos testar se o pnpm foi instalado com sucesso executando:

pnpm -v

Como o PNPM é diferente do NPM?

Para entender as diferenças em seu funcionamento, criei dois diretórios para npm e pnpm, ambos clonados com duas aplicações de amostra e instalei os pacotes separadamente em diretórios diferentes usando npm e pnpm.

npm

Aplicação 1:

trinity:~/npm-demo$ npm install
added 71 packages, and audited 72 packages in 1s
found 0 vulnerabilities

Aplicação 2:

trinity:~/npm-demo2$ npm install
added 27 packages, and audited 28 packages in 9s
found 0 vulnerabilities

Aqui, como você pode ver, diz que o npm instalou 71 pacotes em aplicação 1 e 27 pacotes em aplicação 2, o que está perfeitamente correto.

Mas, se você observar os arquivos package.json de ambas as asplicações anteriores, há três pacotes comuns em ambos.

Mesmo que a aplicação 2 exija algumas dependências já instaladas (no aplicação 1), não podemos reutilizar dependências já instaladas para outro projeto no npm.

pnpm

Aplicação 1:

trinity:~/pnpm-demo$ pnpm install
Packages: +67
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
Content-addressable store is at: /home/ivan/.pnpm-store/v3
Virtual store is at:             node_modules/.pnpm
Progress: resolved 67, reused 0, downloaded 67, added 67, done
dependencies:
+ cookie-parser 1.4.6
+ csurf 1.11.0
+ debug 2.6.9 (4.3.3 is available)
+ ejs 2.6.2 (3.1.6 is available)
+ express 4.16.4 (4.17.2 is available)
+ express-session 1.17.2

Aplicação 2:

trinity:~/pnpm-demo2$ pnpm install
Packages: +27
+++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
 Content-addressable store is at: /home/ivan/.pnpm-store/v3
 Virtual store is at: node_modules/.pnpm
dependencies:
+ cookie-parser 1.4.6
+ csurf 1.11.0
+ debug 2.6.9 (4.3.3 is available)
+ powerbi-client 2.19.1
+ rxjs 6.6.7 (7.5.2 is available)
Progress: resolved 27, reused 18, downloaded 9, added 27, done

A partir da saída, podemos observar que o pnpm instalou 67 pacotes em aplicação e 27 pacotes em aplicação 2. Mas se você observar a última linha na saída - progress: reutilizou 18 pacotes já instalados para aplicação 1.

“No pnpm, os pacotes são sempre reutilizados se já estiverem instalados para outro projeto, economizando muito espaço em disco, o que o torna mais rápido e eficiente que o npm.”

Isso é ótimo!

Mas onde esses pacotes são armazenados?

Com a instalação do pnpm, especialmente esta linha na saída, “Os pacotes são vinculados fisicamente da loja endereçável de conteúdo à loja virtual”, diz muito sobre como funciona.

O armazenamento endereçável de conteúdo é um mecanismo de armazenamento em que os dados são armazenados no disco rígido, atribuindo um local permanente e endereçando-o com um identificador exclusivo.

Na captura de tela, você pode ver um diretório oculto chamado “.pnpm-store” criado dentro do seu diretório pessoal.

Arquivos ocultos podem ser arquivos de sistema ou aplicações armazenadas no disco rígido com um local permanente e estão ocultos para evitar alterações acidentais.

Este diretório oculto — .pnpm-store é chamado de “armazenamento endereçável de conteúdo”, onde todas as dependências baixadas são armazenadas.

Sempre que você estiver baixando dependências, o pnpm primeiro verifica se essa dependência está disponível neste armazenamento ou não.

Hard link é apenas a cópia exata do arquivo original que também se refere ao mesmo local (do arquivo original) no disco rígido.

Se a dependência já estiver presente nesse armazenamento, o pnpm recupera a mesma criando um link físico.

“Os arquivos são recuperados do armazenamento com base em seu conteúdo, não por seu nome”

Conclusão

Essa foi uma breve introdução ao pnpm, como ele difere do npm e os benefícios que você pode obter ao usar o pnpm em vez do npm.

Você já tentou pnpm antes? Quais são seus pensamentos? Certifique-se de nos informar nos comentários. Obrigado por ler!

Zerando HackerRank: Simple Array Sum e Compare the Triplets

Ivan Trindade — Fri, 27 Jan 2023 13:26:48 +0000

O HackerRank é uma plataforma de contratação de tecnologia que é o padrão para avaliar as habilidades de desenvolvedores para mais de 3.000 empresas em todo o mundo. Ao permitir que recrutadores de tecnologia e gerentes de contratação avaliem objetivamente o talento em todas as etapas do processo de recrutamento, o HackerRank ajuda as empresas a contratar desenvolvedores qualificados e inovar mais rapidamente.

Além disso, é um ambiente digital com assuntos que vão testá-lo(a) para aprimorar, cada vez mais, a sua habilidade de resolver os problemas e o seu raciocínio lógico.

Nesse tutorial, irei lhe ajudar a entender como solucionar alguns desafios que você encontrará no HackerRank, usando a linguagem TypeScript.

Desafios que abordaremos:

Simple Array Sum
Compare the Triplets

Simple Array Sum

Nesse desafio, dado um array de números inteiros, ele pede que você encontre a soma de todos os itens do array. Você deverá completar a função simpleArraySum para retornar a soma de todos os itens do array como um inteiro. Caso queira fazer o desafio no HackerRank, acesse o link desse desafio.

Ele espera receber esse valor como entrada:

6
1 2 3 4 10 11

E a soma dos valores como saída:

Para solucionar esse desafio, iremos usar o método reduce().
Como o nome sugere, o reduce() busca reduzir um array. Ele iterará por cada elemento dessa lista com o objetivo de ao final gerar um único valor (de qualquer tipo), como por exemplo a soma de todos os elementos desse array.

 function simpleArraySum(ar: number[]): number {
  const calculateNumbers = ar.reduce((total, num) => total + num, 0);

  return calculateNumbers;
}

Vamos entender o que está acontecendo na função acima. A função simpleArraySum espera receber o array ar como argumento, que é um array de números do tipo number[] (tipagem do typescript). O :number indica que a função retornará um número, que no caso estamos retornando a variável calculateNumbers, que é a soma de todos os itens do array.

Em seguida, estamos usando o método reduce() com dois parâmetros: uma função de acumulador e um valor inicial.

A função callback do acumulador (total, num) => total + num é chamada para cada item do array. O primeiro parâmetro é o acumulador (total) que guarda o valor acumulado até o momento e o valor atual (num), que é o item atual do array que está sendo processado. A função retorna o novo valor do acumulador, que é a soma do acumulador antigo e do valor atual.

O valor inicial (0) é o valor inicial do acumulador. O método reduce() retorna o valor final do acumulador, que é a soma de todos os itens do array.

Compare the Triplets

O desafio Compare the Triplets, pede uma comparação dos pontos de Alice e Bob. Se os pontos de Alice forem maiores que os pontos de Bob, precisamos atribuir 1 ponto para Alice. Se os pontos de Bob forem maiores que o de Alice, também atribuímos 1 ponto para Bob. Caso os pontos sejam iguais, ambos não recebem pontos. Você pode conferir o desafio nesse link.

E por fim, devemos retornar os pontos de Alice na primeira posição do array e os pontos de Bob na segunda posição do array.

O desafio pede para solucionar o desafio na função compareTriplets. Vamos começar atribuindo os pontos de Alice e Bob a uma variável let com o valor inicial de zero, para que possamos incrementar os valores de acordo com a comparação que faremos a seguir:

function compareTriplets(a: number[], b: number[]): number[] {
  let alicePoints = 0;
  let bobPoints = 0;
}

Em seguida, iremos usar o método forEach() para iterar sobre cada item do array e incrementar pontos de acordo com a comparação, retornando os pontos de Alice e Bob:

function compareTriplets(a: number[], b: number[]): number[] {
  let alicePoints = 0;
  let bobPoints = 0;

  a.forEach((aliceNote, i) => {
    if (aliceNote > b[i]) alicePoints++;
    if (b[i] > aliceNote) bobPoints++;
  });

  return [alicePoints, bobPoints];
}

Vamos entender o que a função acima está fazendo. Estamos comparando dois arrays de números a e b, que representam os pontos de Alice e Bob. Estamos usando o método forEach() para iterar sobre cada item do array a e para cada item, estamos comparando o valor de a com o valor do array b, usando o índice [i] para definir as posições. Estamos fazendo as seguintes verificações:

Se o valor atual no array a for maior que o valor do array b, a variável alicePoints é incrementada com 1 ponto.
Se o valor atual no array b for maior que o valor do array a, a variável bobPoints é incrementada com 1 ponto.

Não precisamos usar o else, porque de acordo com o que o desafio pede, se as notas forem iguais, não precisamos fazer nada.

Por fim, a função retorna um array com as pontuações de Alice e Bob. Com Alice na primeira posição e Bob na segunda, assim como foi definido no desafio.

Obrigado por ler!

Espero que tenha gostado do artigo, em breve irei postar mais soluções de desafios do HackerHank.

Como gerenciar SEO em Next.js com Next SEO

Ivan Trindade — Thu, 26 Jan 2023 13:15:57 +0000

O SEO é um aspecto crítico que ajuda os sites a se classificarem de maneira mais eficaz nas páginas de resultados do mecanismo de pesquisa (SERPs). Uma classificação mais alta nas SERPs aumenta o tráfego orgânico e leva a maiores oportunidades de negócios, então você pode ver porque é vital manter isso em mente!

Por isso, é crucial para nós, como desenvolvedores, garantir que o SEO do site de nossos projetos seja gerenciado corretamente sem perder nenhuma propriedade.

Neste artigo, usaremos o Next SEO para gerenciar a otimização do mecanismo de pesquisa em nossas aplicações Next.js.

O que abordaremos nesse artigo:

Next SEO e Next.js
Configuração rápida
Adicionando Next SEO a uma página
Default SEO
- Substituir propriedades padrão
Suporte a Open Graph
Exemplo de áudio
Suporte a dados estruturados
Opções de Next SEO
Suporte ao diretório de aplicações Nex.js 13
Meta tags comuns
Adicionando componentes JSON-LD

Next SEO e Next.js

O Next.js tem suporte para a geração de sites estáticos (SSG), que oferece melhor capacidade de SEO do que a renderização do lado do cliente. Ele também possui um componente principal integrado para gerenciar meta informações de SEO, como título, descrição, canônico e Open Graph.

Quando há mais páginas em um site, também há mais metatags a serem contabilizadas. À medida que um site cresce, gerenciá-los pode se tornar um processo assustador.

Para simplificar isso, podemos usar um pacote chamado next-seo. Next SEO facilita o gerenciamento de SEO em seus projetos Next.js.

Ao usar o Next SEO, podemos passar as propriedades de SEO como um objeto e o pacote adiciona automaticamente as propriedades ao cabeçalho da página.

Você pode adicionar isso a cada página individualmente ou usar o componente DefaultSeo e sobrescrevê-lo em outras páginas.

Vamos começar e vê-lo em ação.

Configuração rápida

Primeiro, instale o pacote next-seo em seu projeto Next.js usando o seguinte comando:

yarn add next-seo

npm i next-seo

Adicionando Next SEO a uma página

Vamos importar o pacote next-seo para a pasta page com propriedades de SEO. Para fazer isso, adicione o seguinte código ao componente home:

//home.js

import { NextSeo } from 'next-seo';

const Home = () => (
    <>
        <NextSeo
            title="Home Page Title"
            description="Home page description of the page"
        />
        <p>Simple Usage</p>
    </>
);

export default Home

Isso renderizará uma tag <head> com um título e uma descrição para sua página. Você pode verificá-lo inspecionando-o, conforme mostrado aqui:

Você pode ver que a tag inclui og:title e og:description por padrão, usando as propriedades title e description.

Essa é uma configuração simples; vamos explorar as outras opções disponíveis para nós no Next SEO.

Default SEO

Para adicionar propriedades padrão a todas as nossas páginas, podemos usar o componente DefaultSeo, em vez de adicionar manualmente as propriedades individualmente a cada página. Também podemos substituir qualquer propriedade em uma página, se necessário.

Adicione o componente DefaultSeo a _app.js e adicione o seguinte código:

/_app.js

import '../styles/globals.css'
import {DefaultSeo} from 'next-seo';

function MyApp({Component, pageProps}) {
    return (
        <>
            <DefaultSeo
                title="Next SEO Example"
                description="Next SEO is a plug in that makes managing your SEO easier in Next.js projects."
                openGraph={{
                    type: 'website',
                    locale: 'en_IE',
                    url: 'https://www.url.ie/',
                    siteName: 'SiteName',
                }}
                twitter={{
                    handle: '@handle',
                    site: '@site',
                    cardType: 'summary_large_image',
                }}
            />
            <Component {...pageProps} />
        </>
    )
}

export default MyApp

Agora, as propriedades de SEO adicionadas ao componente padrão serão renderizadas em todas as páginas. Você pode verificar isso inspecionando novamente a página, conforme mostrado aqui:

Substituindo propriedades padrão

Agora, vamos substituir as propriedades padrão de SEO em nossa página de blog , pois cada blog terá um título e uma descrição individuais. Adicione o seguinte código à página:

//blog.js

import {NextSeo} from 'next-seo';

const Blog = () => (
    <>
        <NextSeo
            title="Manage SEO in NextJS with Next SEO"
            description="Next SEO packages simplifies the SEO management in Next Apps with less configurations"
            canonical="www.example.com/next-seo-blog"
            openGraph={{
                type: 'article',
                article: {
                    publishedTime: '2022-06-21T23:04:13Z',
                    modifiedTime: '2022-01-21T18:04:43Z',
                    authors: [
                        'https://www.example.com/authors/@firstnameA-lastnameA',
                        'https://www.example.com/authors/@firstnameB-lastnameB',
                    ],
                    tags: ['Tag A', 'Tag B', 'Tag C'],
                },
                url: 'www.example.com/next-seo-blog',
                images: {
                    url: 'https://www.test.ie/images/cover.jpg',
                    width: 850,
                    height: 650,
                    alt: 'Photo of text',
                },
                site_name: 'Next Blog'
            }}
        />
        <p>Manage SEO in NextJS with Next SEO - Blog</p>
    </>
);

export default Blog;

Aqui, substituímos o title, a description e outras propriedades. Você também pode ver algumas novas propriedades especificamente relacionadas às nossas postagens de blog:

publishedTime: Data de publicação do blog
modifiedTime: Data de atualização do blog
tags: Tags associadas à postagem do blog
authors: Autor do blog

Você pode verificar isso inspecionando a página:

Como você pode ver, há algumas meta-informações relacionadas aos cartões do Twitter, mas não as incluímos na página do blog — elas foram adicionadas pelo Next SEO, que adicionamos anteriormente usando o Componente DefaultSeo.

Você pode ver com este exemplo, como ele oferece suporte a propriedades de SEO relacionadas ao blog prontas para a para facilidade de uso.

Suporte a Open Graph

O protocolo Open Graph controla qual conteúdo deve ser exibido ao compartilhar links nas mídias sociais. O uso de tags Open Graph em páginas Web, permite que elas se tornem objetos ricos em um gráfico social.

Por exemplo, o protocolo OG permite controlar qual título, imagem e descrição são exibidos ao compartilhar links em plataformas de mídia social. Se você compartilhar sem tags OG, as plataformas de mídia social escolherão um título, imagem e descrição aleatórios.

Plataformas como Twitter, LinkedIn e Facebook reconhecem tags Open Graph — no entanto, o Twitter também tem meta tags chamadas Twitter Cards, mas usará tags OG quando não houver necessidade de usar tags Twitter Card.

Next SEO suporta as seguintes propriedades OG:

Áudio
Video
Artigo
Perfil
Livro

Exemplo de áudio

A configuração a seguir habilita o suporte de Open Graph de áudio com vários arquivos de áudio:

//Podcast.js

import { NextSeo } from 'next-seo';
const Podcast = () => (
  <>
    <NextSeo
      title="Podcast Page Title"
      description="Next SEO PodCast"
      openGraph={{
        title: 'Open Graph Audio',
        description: 'Description of open graph audio',
        url: 'https://www.example.com/audio/audio',
        audio: [
          {
            url: 'http://examples.opengraphprotocol.us/media/audio/1khz.mp3',
            secureUrl: 'https://d72cgtgi6hvvl.cloudfront.net/media/audio/1khz.mp3',
            type: "audio/mpeg"
          },
          {
            url: 'http://examples.opengraphprotocol.us/media/audio/250hz.mp3',
            secureUrl: 'https://d72cgtgi6hvvl.cloudfront.net/media/audio/250hz.mp3',
            type: "audio/mpeg"
          },
        ]
        site_name: 'SiteName',
      }}
    />
    <h1>Audio Page SEO</h1>
  </>
);
export default Podcast;

Você pode dar uma olhada em outros exemplos para outros tipos de OG para saber mais.

Suporte a dados estruturados

Dados estruturados são um formato padronizado para fornecer informações sobre uma página e classificar o conteúdo da página. Isso ajuda os mecanismos de pesquisa a entender a página Web e exibir os títulos, descrições, imagens e outras informações mais relevantes para os usuários finais.

O Next SEO também suporta dados estruturados com configuração limitada necessária, suportando vários tipos JSON-LD como article, blog, FAQ e course.

Vamos ver isso em ação com um exemplo.

O componente ArticleJsonLd é usado para adicionar dados estruturados a uma página. Adicione o seguinte código para adicionar dados estruturados aos nossos blogs:

/blog.js

import {ArticleJsonLd, NextSeo} from 'next-seo';

const Blog = () => (
    <>
        <NextSeo
            title="Manage SEO in NextJS with Next SEO"
            description="Next SEO packages simplifies the SEO management in Next Apps with less configurations"
            canonical="www.example.com/next-seo-blog"
            openGraph={{
                type: 'article',
                article: {
                    publishedTime: '2022-06-21T23:04:13Z',
                    modifiedTime: '2022-01-21T18:04:43Z',
                    authors: [
                        'https://www.example.com/authors/@firstnameA-lastnameA',
                        'https://www.example.com/authors/@firstnameB-lastnameB',
                    ],
                    tags: ['Tag A', 'Tag B', 'Tag C'],
                },
                url: 'www.example.com/next-seo-blog',
                images: {
                    url: 'https://www.test.ie/images/cover.jpg',
                    width: 850,
                    height: 650,
                    alt: 'Photo of text',
                },
                site_name: 'Next Blog'
            }}
        />
        <ArticleJsonLd
            type="BlogPosting"
            url="https://example.com/blog"
            title="Manage SEO in NextJS with Next SEO"
            images={[
                'https://example.com/photos/1x1/photo.jpg',
                'https://example.com/photos/4x3/photo.jpg',
                'https://example.com/photos/16x9/photo.jpg',
            ]}
            datePublished="2022-06-21T23:04:13Z"
            dateModified="2022-06-21T23:04:13Z"
            authorName="Author Name"
            description="Next SEO packages simplifies the SEO management in Next Apps with less configurations"
        />
        <p>Manage SEO in NextJS with Next SEO - Blog</p>
    </>
);

export default Blog;

Agora adicionamos algumas propriedades de SEO ao JsonLd, que serão renderizadas da seguinte forma:

Os dados JSON são renderizados na tag <script>. Você pode verificar todos os tipos JSON-LD disponíveis para obter mais informações sobre isso.

Opções de Next SEO

A seguir estão as propriedades do componente NextSeo, que podemos usar para lidar com diferentes propriedades de meta tags. Algumas das propriedades mais utilizadas são:

defaultTitle: Se nenhum título for definido em uma página, esta string será usada em vez de um título vazio.
noindex: Opção para definir se a página deve ser indexada ou não.
nofollow: Opção para definir se a página deve ser seguida ou não.
canonical: defina o URL canônico da página.
facebook.appId: Adicione o ID do aplicativo do Facebook à sua página para receber dados do Facebook Insights.
additionalMetaTags: Metatags adicionais como title e content.
additionalLinkTags: metalinks adicionais como favicons.

Suporte ao diretório de aplicativos Next.js 13

O Next.js 13 introduziu um recurso beta no diretório app para roteamento ao lado do diretório pages.

Devido a essa alteração, o uso e a configuração do next-seo também mudam, pois o novo diretório app traz as seguintes alterações no fluxo existente:

Next.js não remove mais as tags duplicadas no head, então não podemos usar o componente DefaultSeo para SEO global.
O diretório app inclui o arquivo head.js para incluir tags , mas ele não suporta script embutido síncrono. Como resultado, componentes JSON-LD não podem ser adicionados em head.js, então ele precisa ser adicionado em page.js, que adiciona o do documento.
Next.js não adiciona meta tags abaixo por padrão, então precisamos adicionar isso manualmente no layout raiz.

Meta tags comuns

De acordo com o novo diretório app, as metatags DefaultSeo não podem ser substituídas em outras páginas. Por conta disso, precisamos identificar as tags comuns e colocá-las no layout raiz (/app/layout.js), conforme demonstrado aqui:

// app/layout.js
import { NextSeo } from 'next-seo';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        {/* Used to be added by default, now we need to add manually */}
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width" />
        {/* 
          Anything we add in layout will appear on EVERY PAGE. At present it can not be overridden lower down the tree.
          This can be useful for things like favicons, or other meta tags that are the same on every page.
        */}
        <NextSeo
          useAppDir={true}
          facebook={{ appId: '1234567890' }}
          themeColor="#73fa97"
          titleTemplate="%s | Next SEO"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

A seguir estão as meta tags renderizadas do exemplo acima:

COnfigurações meta padrão

Para usar meta tags comuns como og, image, title e description, comece adicionando o arquivo next-seo-config.js com meta tags comuns e importe-o para as páginas necessárias. Aqui está um exemplo do que quero dizer:

// next-seo-config.js
export const NEXT_SEO_DEFAULT = {
  title: 'Page Title',
  description: 'Page Description',
  openGraph: {
    type: 'website',
    locale: 'en_IE',
    url: 'https://www.url.ie/a',
    title: 'OG Title',
    description: 'OG Decription',
    siteName: 'Example',
  },
};

Agora, importe o arquivo next-seo-config.js para head.js, conforme mostrado aqui:

// app/head.js
import { NextSeo } from 'next-seo';

import { NEXT_SEO_DEFAULT } from './next-seo-config'; // seu caminho vai variar

export default async function Head() {
  return <NextSeo {...NEXT_SEO_DEFAULT} useAppDir={true} />;
}

Substitua o SEO default

Você pode substituir as meta tags padrão next-seo-config em outras páginas, se necessário — dê uma olhada no exemplo a seguir para ver como isso é feito:

 // app/profile/head.js
import { NextSeo } from 'next-seo';

import { NEXT_SEO_DEFAULT } from '../next-seo-config'; // your path may vary

export default async function Head() {
  const updateMeta = {
    ...NEXT_SEO_DEFAULT,
    title: 'Profile',
    description: 'User Profile',
  };
  return <NextSeo {...updateMeta} useAppDir={true} />;
}

Aqui, estamos atualizando o título e a descrição das meta tags de SEO padrão de acordo com nossas próprias especificações.

Aqui está a saída para o exemplo acima:

Adicionando componentes JSON-LD

Como vimos anteriormente, no novo diretório app o head.js não suporta um <script> embutido. Podemos adicionar o JSON-LD ao arquivo page.js, que adiciona os dados estruturados JSON-LD ao body do documento.

Confira o exemplo a seguir:

// app/blog/page.js
import { ArticleJsonLd } from 'next-seo';

const Article = () => (
  <>
    <h1>Article</h1>
    <p>Inspect page for output.</p>
    <ArticleJsonLd
      useAppDir={true}
      type="BlogPosting"
      url="https://example.com/blog"
      title="Blog headline"
      images={[
        'https://example.com/photos/1x1/photo.jpg',
        'https://example.com/photos/4x3/photo.jpg',
        'https://example.com/photos/16x9/photo.jpg',
      ]}
      datePublished="2015-02-05T08:00:00+08:00"
      dateModified="2015-02-05T09:00:00+08:00"
      authorName="Jane Blogs"
      description="This is a mighty good description of this blog."
    />
  </>
);

export default Article;

Aqui está a saída para o exemplo acima:

Conclusão

SEO é essencial para páginas web que precisam ser descobertas organicamente. Para ter altas classificações de página, os sites precisam ser organizados para que possam ser facilmente rastreados pelos mecanismos de pesquisa.

O Next SEO torna o gerenciamento da otimização de mecanismo de pesquisa em projetos Next.js muito simples e fácil de implementar - ajuda os desenvolvedores a adicionar propriedades de SEO com eficiência, sem perder nenhuma metatag importante, evitando a ocorrência de duplicatas.

Você pode encontrar outras propriedades e exemplos na documentação oficial. Obrigado pela leitura!

Melhores práticas de SEO para desenvolvedores: coloque suas habilidades para trabalhar

Ivan Trindade — Wed, 25 Jan 2023 17:52:44 +0000

Este artigo é para desenvolvedores que desejam levar em consideração os recursos de promoção do site e evitar refazer as coisas após o final do desenvolvimento.

Tradicionalmente, a equipe de desenvolvimento discute e cria a arquitetura e a lógica de negócios de um projeto. Mas a promoção do site é adiada para a última etapa e é tratada pela equipe de SEO. Essa abordagem para a construção de um projeto pode ter consequências fatais.

Na fase de produção ou mesmo após o deploy, muitas vezes é necessário fazer edições no projeto. Essas edições podem incluir alterações em metatags e atributos para links, bem como melhorias na estrutura do link.

Preparei uma lista de verificação com as principais coisas que você precisa considerar na fase de desenvolvimento.

Títulos e meta descrições

Tags de título e descrições meta são bits de código HTML no header de uma página web. Eles ajudam os mecanismos de pesquisa a entender o conteúdo de uma página.

<head>
    <title>
       O que os desenvolvedores precisam saber sobre SEO
    </title>

    <meta name="description" content="Melhores práticas de SEO para desenvolvedores: coloque suas habilidades para trabalhar.">
</head>

Você pode pensar: O que mais há para acrescentar?

Para começar, você vê snippets nos resultados do mecanismo de pesquisa. Os snippets geralmente contêm um título e uma descrição.

Geralmente, mas nem sempre. Às vezes, quando um robô de pesquisa identifica um título como irrelevante para o texto da página, o snippet pode ser gerado automaticamente com base no conteúdo da página.

À primeira vista, esse é um problema para redatores e especialistas em SEO, e não para desenvolvedores. No entanto, há casos em que os desenvolvedores não devem apenas adicionar a tag <title> à página, mas também gerar um título e uma descrição automaticamente no back-end, dependendo da lógica do projeto.

É melhor que os desenvolvedores gerem títulos e descrições exclusivos. Mas isso não garante que eles aparecerão no snippet. Por exemplo, se os títulos diferirem apenas em uma palavra, há uma chance de que o robô de busca os marque como irrelevantes.

Exemplo:

As melhores confeitarias de Belo Horizonte
As melhores confeitarias em Rio de Janeiro
As melhores confeitarias de São Paulo

Meta tags e microdados

Metatags

Meta tags são tags HTML ocultas que são colocadas no <head> de suas páginas web. As tags HTML fornecem informações sobre seu site ou página Web para os mecanismos de pesquisa, como título, descrição, palavras-chave, robôs, direitos autorais e idioma. Os mecanismos de pesquisa geralmente indexam metatags para usá-los nos resultados da pesquisa. Sem meta tags, seu site não pode alcançar os leitores organicamente quando eles digitam algo diretamente em um mecanismo de pesquisa.

Para gerar meta tags corretamente, você pode usar geradores de meta tags, como o Free Meta Tag Generator.

microdados

Microdados é a chamada linguagem única que é compreendida e interpretada pelos robôs de busca do Google, Yandex e Yahoo. Os mecanismos de pesquisa criaram essa linguagem em 2011. Com microdados, você pode mostrar aos robôs de pesquisa que um texto específico ou outros elementos em uma página são importantes e pertencem a um determinado tipo de dados (os robôs de pesquisa não podem interpretar o significado do conteúdo e estabelecer prioridades).

Por exemplo, a página Sobre do seu site ou a página Contatos deve usar microdados para marcar o bloco com detalhes de contato, caso em que um robô de busca mostrará “detalhes de contato da empresa X” em resposta à consulta de um usuário.

O Google lançou uma [ferramenta de teste de dados estruturados(https://developers.google.com/search/docs/appearance/structured-data?hl=pt-br) que ajuda você a verificar como os dados do seu site estão estruturados.

O arquivo robots.txt

Robots.txt é um arquivo de texto que você coloca em seu site para informar aos robôs de pesquisa quais páginas eles podem indexar e quais você gostaria que eles não indexassem.

Você não precisa usar um arquivo robots.txt. Caso contrário, todas as páginas do seu site estarão disponíveis para os robôs de busca.

Você deve ter em mente, porém, que se você fechar certas páginas do seu site para pesquisar rastreadores, elas ainda poderão ser indexadas se os robôs de pesquisa encontrarem links para essas páginas em outros sites ou em páginas do seu site que estão abertas para um rastreador de pesquisa. Para realmente impedir que uma URL seja indexada, você pode usar a diretiva "noindex".

<meta name="robots" content="noindex">

O arquivo robots.txt sempre deve estar na raiz do seu domínio. Robots.txt também permite que você diga aos mecanismos de busca onde encontrar o mapa do site.

Sitemaps

Um mapa do site é um arquivo XML, em seu site que informa aos indexadores de mecanismos de pesquisa com que frequência suas páginas mudam e a importância de determinadas páginas em relação a outras páginas em seu site. Essas informações ajudam os mecanismos de pesquisa a indexar seu site.

Os mecanismos de pesquisa leem o mapa do site para rastrear seu site de maneira mais inteligente. No mapa do site, você pode fornecer informações sobre arquivos que considera importantes, quando uma página foi atualizada pela última vez, com que frequência uma página é atualizada e assim por diante.

Um mapa do site não é obrigatório. No entanto, preste atenção quando seu site tiver um grande arquivo de páginas de conteúdo isoladas ou mal vinculadas umas às outras.

Se o seu site contém um formulário de pesquisa ou filtros, muitas vezes você pode acessar as páginas de resultados apenas por meio deste formulário. Geralmente não há links que o direcionem para essas páginas. Se você considera essas páginas importantes e deseja que os mecanismos de pesquisa as indexem, adicione links aos resultados da página em sitemap.xml.

Nofollow e noindex

Há também tags como nofollow e noindex. Elas fazem parte do Robot Exclusion Protocol (REP) que controla como as páginas web são indexadas.

Nofollow não permite que um robô de busca siga um link em seu site. Nofollow mostra que os sistemas de pesquisa não devem seguir os links em uma página e que não há necessidade de verificar as URLs correspondentes. Isso significa que os mecanismos de pesquisa não enviam nem o Pagerank nem o texto do link.

Por exemplo, <meta name="robots" content="nofollow" /> ou <a hrefs=”https:// www.examples.com” rel=”nofollow”>

Você pode configurar sua página de forma que todos os links de saída sejam nofollow e não carreguem o peso da página. Mas quando você precisa de um link dofollow, pode inseri-lo manualmente por meio do seu CMS. Alguns CMSs são capazes de fazer isso automaticamente.

Noindex impede que as páginas sejam indexadas. Essa meta tag pode ser adicionada ao código inicial da página HTML e informa aos mecanismos de pesquisa para não indexar uma página específica nos resultados da pesquisa.

Adicione "noindex" ao código HTML para transformar links normais em links noindex:

<a href="http://www.example.com" rel="noindex">Link text</a>

Links canônicos

Um link canônico é um elemento HTML que ajuda os webmasters a evitar problemas de conteúdo duplicado.

Muitas vezes há situações em que o mesmo conteúdo está disponível em um site por meio de vários links. No estágio de desenvolvimento, você pode resolver isso se já souber que algumas páginas podem se relacionar a diferentes categorias. Por exemplo, em um site de comércio eletrônico, os produtos podem ser apresentados em várias categorias. A presença de conteúdo duplicado em seu site tem uma influência ruim no ranking, já que os mecanismos de busca não sabem qual versão classificar para os resultados da pesquisa.

A solução para esse problema é marcar todas as páginas duplicadas com o elemento de link rel="canonical".

<link rel="canonical" href="http://example.com/origin-content/" />

Imagens

O texto Alt, também conhecido como atributo alt, descrição alt ou tag alt, é usado no código HTML para descrever os elementos da interface e as imagens na página. Você precisa dar a cada imagem uma tag alt compatível com SEO.

Você pode escrever texto alternativo para imagens automaticamente ou manualmente.

O texto alternativo é usado:

Tornar a internet mais acessível, por exemplo, para deficientes visuais;
Se a imagem do arquivo não puder ser carregada;
Garantir uma melhor descrição das imagens para os robôs de busca, ajudando-os a indexar as imagens corretamente.

Práticas recomendadas de texto alternativo:

Use assuntos e contexto específicos ao escrever o texto alternativo.
Deixe seu texto alternativo não ter mais de 125 caracteres.
Não comece o texto alternativo com “imagem de…” ou “imagem de…”
Use algumas palavras-chave importantes, mas com moderação.
Não adicione sua palavra-chave a cada texto alternativo.
Se uma imagem não tiver nenhum valor, ela deve residir no CSS, não no HTML.
Use a tag longdesc="" para imagens mais complexas que requerem descrições mais longas.

Vou demonstrar um exemplo bom e ruim de um texto alternativo:

Ruim: alt="Mulher apontando para a tela do computador de uma pessoa."

Bom: alt="Professor de uma escola de negócios apontando para a tela do computador de uma aluna."

Títulos H1, H2, H3

Nesta seção, veremos as meta tags H1, H2 e H3 (H significa cabeçalho) e como elas influenciam a otimização do seu site. Se essas meta tags forem colocadas incorretamente em sua página, será difícil para os mecanismos de pesquisa receber informações sobre seu site. Os títulos garantem a classificação do seu site e ordenam o código HTML da sua página.

Cada página do seu site deve conter apenas um cabeçalho H1. Deve ser diferente de todos os outros títulos nas páginas do seu site. Os cabeçalhos H2 e H3 não são obrigatórios, mas se você os usar, eles não devem duplicar o conteúdo. Você pode usar alguns títulos H2 e H3 em uma página.

Tenha em mente que:

Os títulos devem incluir uma palavra-chave para classificar seu site mais alto nos resultados da pesquisa.
Cada título deve ser único. Se eles se repetirem, um mecanismo de pesquisa pode não classificá-los.
Se o cabeçalho estiver próximo ao código HTML, seu valor aumentará em relação a todos os outros elementos.
A palavra-chave deve estar o mais próximo possível do início do título.
O comprimento de um título não deve ter mais de 60 caracteres.
Não deve haver erros gramaticais no título.
Os cabeçalhos são verificados para reotimização, portanto, não devem ser sobrecarregados com palavras-chave.

A otimização bem-sucedida do seu site depende de como as tags são escritas. Portanto, você deve manter as seguintes regras em mente ao escrever tags:

Mantenha a hierarquia de tags (H1 deve ser maior do que todos os outros títulos).
Mantenha a hierarquia das fontes (quanto maior o cabeçalho, maior a fonte).
Atenha-se aos elementos de texto nos títulos e não vincule a outras fontes de um título.
Não abuse dos cabeçalhos H1, H2 e H3. Os robôs de busca podem pensar que sua página é spam se você usar um grande número de cabeçalhos para destacar partes importantes de sua página.
Você pode usar uma imagem como título. Por exemplo, você pode usar uma imagem com seu logotipo otimizado de acordo.

Redirecionamentos

Um redirecionamento é uma maneira de enviar usuários e mecanismos de pesquisa para uma URL diferente daquela solicitada originalmente.

Os redirecionamentos não têm uma má influência no SEO. No entanto, uma implementação ruim pode causar todos os tipos de problemas, desde a perda de classificação da página até a perda de tráfego.

Os redirecionamentos são necessários quando você exclui uma postagem ou altera sua estrutura de URL.

Velocidade da página

A velocidade da página é o tempo que leva para carregar o conteúdo do seu site. Você pode verificar a velocidade de carregamento do seu site no PageSpeed Insights do Google. Você também pode tentar otimizar o tempo de carregamento.

A velocidade da página sinaliza a classificação da página. Uma velocidade de página lenta significa que os mecanismos de pesquisa podem verificar um número menor de páginas usando o orçamento de rastreamento fornecido, o que pode influenciar negativamente sua indexação.

A velocidade da página também é importante para os usuários. Como regra, páginas com tempo de carregamento longo tendem a ser abandonadas mais rapidamente, diminuindo o tempo médio em uma página web. Tempos de carregamento de página elevados têm uma influência negativa nas conversões.

O que você pode fazer para aumentar a velocidade da página?

Ative a compactação de arquivos (de preferência mantendo a qualidade).
Reduza CSS, JavaScript e HTML.
Reduzir redirecionamentos.
Remova o JavaScript de bloqueio de renderização.
Aproveite o cache do navegador.
Melhore os tempos de resposta do servidor.
Use uma rede de distribuição de conteúdo.
Otimizar imagens.

URL

Uma URL é um texto legível por humanos que substitui os números (endereços IP) que os computadores usam para se comunicar com servidores e identificar a estrutura de arquivos em um site. Uma URL consiste em um protocolo, nome de domínio e caminho e tem o seguinte formato básico: protocol://domain-name.top-level-domain/path.

O que você deve saber sobre URLs:

Uma URL mostra a estrutura do site.
Somente letras minúsculas são usadas em URLs legíveis por humanos.
Uma URL legível por humanos precisa ter menos de 90 caracteres.

Você precisa criar URLs amigáveis para SEO (links de sites). Mantenha suas URLs curtas e use o termo de pesquisa para o qual deseja classificar em seu caminho. As URLs precisam mudar e ser relevantes em todas as páginas.

Você fez de tudo, mas não vai funcionar

Talvez você tenha adicionado ou alterado um título e meta descrição de acordo com todas as recomendações de especialistas em SEO, mas o snippet não mudou. Ou você adicionou uma nova página ao mapa do site, mas ela não aparece nos resultados da pesquisa.

Isso acontece quando você implantou seu site para produção e um mecanismo de pesquisa já indexou o conteúdo. Depois disso, você assumiu a otimização, adicionou metatags e atualizou o site de produção. Feito isso, você precisa esperar até que o mecanismo de pesquisa indexe seu site novamente. A indexação do Google pode ser iniciada a partir do console.

Conclusão

Espero que minhas recomendações tenham sido úteis, especialmente quando você está apenas começando seu projeto, e o ajude a economizar muito tempo mudando a lógica na hora de promover seu site.

Compreendendo o papel do mecanismo de renderização em navegadores

Ivan Trindade — Tue, 24 Jan 2023 13:29:17 +0000

O navegador é fundamental no funcional de qualquer site. Desde como a aplicação renderiza até como ele funciona, tudo depende do navegador e seu funcionando. Para oferecer uma experiência de usuário perfeita com testes de compatibilidade entre navegadores, é essencial entender a função dos mecanismos de renderização nos navegadores.

Também é importante que os desenvolvedores front-end entendam como os navegadores funcionam, porque isso os ajuda a criar aplicações e sites web que funcionam de maneira consistente em vários navegadores e plataformas.

O que abordaremos nesse artigo:

Compreendendo a arquitetura dos navegadores da Web
Componentes do navegador da Web
- Interface de usuário
- Motor do navegador
- Rede
- Intérprete JavaScript
- Back-end UI
- Armazenamento/Persistência de dados
Função do mecanismo de renderização

Compreendendo a arquitetura dos navegadores da Web

Os navegadores são construídos de Front-end e Back-end. Enquanto o Front-end garante como as páginas Web apareçam no navegador, o Back-end trata das solicitações e é o portador da informação. Seus diferentes componentes funcionam em coordenação para oferecer uma experiência Web perfeita.

Componentes do navegador Web

Os navegadores Web consistem em 7 componentes diferentes listados abaixo:

Interface de usuário

Esse componente permite que os usuários finais interajam com todos os elementos visuais disponíveis na página web. Os elementos visuais incluem a barra de endereço, o botão home, o botão próximo, etc, e todos os outros elementos que buscam e exibem a página Web solicitada pelo usuário final.

Motor do navegador

É um componente central de todos os navegadores web. O mecanismo do navegador funciona como um intermediário ou uma ponte entre a interface do usuário e o mecanismo de renderização. Ele consulta e manipula o mecanismo de renderização de acordo com as entradas recebidas da interface de usuário.

Motor de Renderização

Como o nome sugere, este componente é responsável por renderizar uma página web específica solicitada pelo usuário em sua tela. Ele interpreta documentos HTML e XML junto com imagens que são estilizadas ou formatadas usando CSS, e um layout final é gerado, que é exibido na interface do usuário.

usando CSS, e um layout final é gerado, que é exibido na interface do usuário.

Nota: Cada navegador tem seu próprio mecanismo de renderização exclusivo. Os mecanismos de renderização também podem diferir para diferentes versões de navegador. A lista abaixo menciona os mecanismos de navegador usados por alguns navegadores comuns:

Google Chrome e Opera v.15+: Blink
Internet Explorer: Trident
Mozilla Firefox: Gecko
Chrome para iOS e Safari: WebKit

Rede

Esse componente é responsável por gerenciar chamadas de rede usando protocolos padrão como HTTP ou FTP. Ele também cuida de questões de segurança associadas à comunicação na Internet.

Intérprete JavaScript

Como o nome sugere, é responsável por analisar e executar o código JavaScript incorporado em um site. Depois que os resultados interpretados são gerados, eles são encaminhados ao mecanismo de renderização para exibição na interface do usuário.

Back-end UI

Esse componente usa os métodos de interface do usuário do sistema operacional subjacente. É usado principalmente para desenhar widgets básicos (janelas e caixas de combinação).

Armazenamento/Persistência de Dados

É uma camada persistente. Um navegador web precisa armazenar vários tipos de dados localmente, por exemplo, cookies. Como resultado, os navegadores devem ser compatíveis com mecanismos de armazenamento de dados como WebSQL, IndexedDB, FileSystem, etc.

Agora que estamos cientes dos principais componentes envolvidos na construção de um navegador Web, vamos nos aprofundar no papel do mecanismo de renderização.

Função do mecanismo de renderização

Depois que um usuário solicita um determinado documento, o mecanismo de renderização começa a buscar o conteúdo do documento solicitado. Isso é feito através da camada de rede. O mecanismo de renderização começa a receber o conteúdo desse documento específico em blocos de 8 KB da camada de rede. Depois disso, o fluxo básico do mecanismo de renderização começa.

As quatro etapas básicas incluem:

A página HTML solicitada é analisada em blocos, incluindo os arquivos CSS externos e elementos de estilo, pelo mecanismo de renderização. Os elementos HTML são então convertidos em nós DOM para formar uma “árvore de conteúdo” ou “árvore DOM”.
Simultaneamente, o navegador também cria uma árvore de renderização. Essa árvore inclui tanto as informações de estilo quanto as instruções visuais que definem a ordem em que os elementos serão exibidos. A árvore de renderização garante que o conteúdo seja exibido na ordem desejada.
Além disso, a árvore de renderização passa pelo processo de layout. Quando uma árvore de renderização é criada, os valores de posição ou tamanho não são atribuídos. Todo o processo de cálculo de valores para avaliar a posição desejada é chamado de processo de layout. Neste processo, cada nó recebe as coordenadas exatas. Isso garante que cada nó apareça em uma posição precisa na tela.
A etapa final é pintar a tela, onde a árvore de renderização é percorrida e o método paint() do renderizador é invocado, que pinta cada nó na tela usando a camada de back-end UI.

Conforme discutido anteriormente, cada navegador tem seu próprio mecanismo de renderização exclusivo. Então, naturalmente, cada navegador tem sua própria maneira de interpretar as páginas Web na tela do usuário. É aqui que surge um desafio para os desenvolvedores Web em relação à compatibilidade entre navegadores de seu site.

É aqui que o teste entre navegadores entra em cena.

O teste entre navegadores é um método de garantia de qualidade usado para verificar a consistência de aplicações Web em termos de funcionalidade e design em vários navegadores. Esses testes permitem que as equipes de controle de qualidade explorem quaisquer problemas realizando um teste responsivo, que pode ocorrer quando o site é acessado por meio de diferentes navegadores ou versões de navegadores.

Ao entender como um mecanismo de renderização funciona, os desenvolvedores Web podem obter uma visão mais ampla sobre como os sites funcionam. Consequentemente, eles podem desenvolver, projetar e fazer deploy do conteúdo com mais eficiência. Se alguém compreender as nuances de como o conteúdo da Web é exibido na tela de um usuário por vários navegadores, estará simplesmente mais equipado para criar conteúdo compatível com vários navegadores.

Espero que tenha gostado do artigo, obrigado por ler!

Como testar aplicações com React Testing Library e Jest

Ivan Trindade — Mon, 23 Jan 2023 16:49:06 +0000

Como desenvolvedores de software, é fundamental reduzir as chances de falha de nosso programa executando testes com o usuário final em mente e testando sua aplicação da mesma forma que ele o usaria.

É impraticável esperar que os componentes de uma aplicação funcionem de forma confiável o tempo todo. Quando ocorre uma modificação ou ajuste em um pedaço de código existente, as coisas podem ou não quebrar, e é melhor presumir o pior. Além disso, se tivermos testes automatizados desenvolvidos para vários componentes em nossa aplicação, podemos perceber imediatamente quando uma alteração quebra algo em nossa aplicação - antes de liberarmos nosso código para produção.

Teste é o processo de avaliar um sistema ou seus componentes com a intenção de descobrir se ele satisfaz os requisitos especificados ou não. Em palavras simples, testar é executar um sistema para identificar quaisquer lacunas, erros ou requisitos ausentes contrários aos requisitos reais.

O que abordaremos nesse artigo:

Resumo rápido
Testes automatizados
Por que você deve escrever testes?
Tipos de testes automatizados
Desenvolvimento Orientado a Testes (TDD)
React Testing Library (RTL)
Compreendendo um bloco de testes
Mini projeto
Conclusão

Resumo rápido

Esse artigo explica o que é teste automatizado, por que escrever testes para aplicações é importante, as diferentes formas de teste automatizado, Test Driven Development (TDD), React Testing Library (RTL) e construiremos um miniprojeto com uma abordagem TDD.

Esse artigo é adequado para aqueles que nunca escreveram uma única linha de código de teste antes; Embora para obter o máximo desta parte, você deve estar familiarizado com como configurar e navegar em um novo projeto React, bem como interagir com um gerenciador de pacotes. Também é necessário estar familiarizado com o axios.

Testes Automatizados

Testes automatizados são trechos de código que executam seu código e verificam se a saída dessa execução de código atende a uma determinada expectativa. Se você escrever testes automatizados para sua aplicação, poderá detectar problemas rapidamente quando começar a trabalhar em seu código e um ou mais testes falharem.

O teste manual, por outro lado, é o que fazemos quando clicamos em nossa aplicação no navegador, avaliando diferentes recursos.

Por que você deve escrever testes?

AJuda a detectar bugs antecipadamente e permite refatorar seu código.
Garante que sua aplicação satisfaça as especificações do projeto.
Reduz o tempo de teste manual (quando um usuário real usa nossa aplicação para testar sua funcionalidade).
Envio de código eficiente e de qualidade para a produção.
Melhorar a manutenibilidade do código.

Muitas vezes, acredita-se que o teste seja um processo demorado; escrevendo testes === mais código. Por outro lado, todo desenvolvedor deve estar familiarizado com os fundamentos do teste. Além disso, quem entende seu código melhor do que você 🙃?

Escrever testes automatizados é metade do esforço do desenvolvedor para resolver o problema. Saber como testar seu código é um ótimo método para avançar como desenvolvedor, pois permite que você descubra coisas novas sobre seu código e aprimore suas habilidades de debugar seu código. 🚀.

Tipos de testes automatizados

1. Testes unitários

Os testes unitários são a forma mais simples de testes automatizados, em que funções, métodos, componentes ou unidades individuais de uma aplicação são testados isoladamente para garantir que funcionem corretamente.

Por exemplo, em uma aplicação de tarefas, você pode escrever um teste de unidade para o componente de input, para confirmar que o usuário pode digitar nele e alterar seu valor.

2. Teste de integração

O teste de integração é um tipo de teste de software no qual várias unidades que trabalham juntas são testadas como um todo. Essa forma de teste é usada para garantir que duas ou mais unidades/módulos possam se comunicar efetivamente entre si.

Por exemplo , em uma aplicação de tarefas, onde existem três componentes principais: um elemento input onde uma nova tarefa é digitada, um botão para adicionar, quando clicado, adiciona a nova tarefa à lista de tarefas e um elemento div que renderiza a lista de tarefas. Como esses três componentes são agrupados logicamente, um teste de integração pode ser escrito para garantir que eles funcionem bem juntos.

3. Teste de ponta a ponta (E2E)

O teste de ponta a ponta é uma técnica de teste de software que exige que testemos toda a aplicação do início ao fim em um ambiente de produção. É executado em um ambiente simulado que emula o comportamento de um usuário. Ferramentas como Cypress, Selenium e Puppeteer podem ser usadas para testes E2E.

4. Teste de aceitação

O teste de aceitação é realizado pelo cliente/proprietário da empresa para garantir que a aplicação atenda a todos os requisitos.

5. Teste de fumaça

O teste de fumaça é usado para confirmar que as funcionalidades fundamentais do sistema em teste estão funcionando corretamente e em alto nível.

Outros testes de software não funcionais incluem testes de segurança, desempenho, usabilidade e compatibilidade.

Desenvolvimento Orientado a Testes (TDD)

TDD é uma estratégia para descrever o comportamento do seu código antes de ser implementado. Tem o slogan 'Red-Green-Refactor'.

Vermelho - Um caso de teste automatizado para um recurso específico que (inicialmente) falha é gravado.

Verde - Escreva o código necessário para passar no teste.

Refatorar - refatore ou otimize seu código.

Além do TDD puro, existem outras opções a serem exploradas, principalmente no desenvolvimento front-end.

React Testing Library (RTL)

o React Testing Library, é uma solução de teste leve para componentes React. Essa biblioteca é baseada no DOM Testing Library e é um subconjunto da família de pacotes @testing-library. Seu princípio de orientação é:

Quanto mais seus testes se assemelharem à forma como seu software é usado, mais confiança eles podem lhe dar.

Isso implica que o RTL nos permite testar o comportamento de nossos componentes React da perspectiva dos usuários de nossa aplicação, em vez dos detalhes de implementação do componente. O uso de RTL torna suas aplicações mais acessíveis e ajuda você a aproximar seus testes de como um usuário usaria seus componentes, dando a você mais confiança de que sua aplicação funcionará quando um usuário real o usar.

Frameworks de teste populares dentro da comunidade React são Enzyme e Jest.

RTL é uma biblioteca e não é específica para uma estrutura de teste, embora Jest seja a escolha recomendada, de acordo com a documentação oficial da RTL. Como resultado, iremos combiná-lo com o Jest nesse artigo.

Compreendendo um bloco de teste

Não se preocupe com a configuração porque todo novo projeto React inicializado com create-react-app, RTL e Jest já estão configurados. Se você estiver usando a configuração personalizada do React, use o seguinte comando para instalá-la:

npm install --save-dev @testing-library/react

Inicie uma nova aplicação React com o bloco de código abaixo:

npx create-react-app my-app

Depois que um projeto React é inicializado com create-react-app, um teste de amostra para o arquivo App.js é pré-configurado em um arquivo App.test.js:

Vamos detalhar a estrutura desse teste:

// React testing methods are imported
import { render, screen } from '@testing-library/react'; 

import App from './App'; // Component to be tested

// Test block for the component
test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

// Os testes são escritos no método test/it fornecido pelo Jest
// Um método de teste leva em dois parâmetros:
// Uma descrição do teste e uma função com lógica para testar

test("", () => {});
// OR
it("", () => {});

Não importa se você usa o método test ou it, no entanto, prefiro o método test.

test('renders learn react link', () => {
  render(<App />); // renders the component into the DOM 
  const linkElement = screen.getByText(/learn react/i); // gets element that has the text 'learn react'
  expect(linkElement).toBeInTheDocument(); // asserts that the element found is rendered 
});

O componente a ser testado é renderizado no DOM.
Em seguida, o DOM é consultado pelo elemento link com o testo "Aprenda React" usando o objeto screen importado do RTL, que possui várias consultas, no nosso caso a consulta getByText é usada para selecionar o elemento link.

Lembre-se de como getElementById de outros métodos de seleção de DOM Javascript funcionam? Sim!, o RTL possui consultas que podem ser usadas para selecionar elementos do componente a ser testado. Confira uma lista de todas as consultas.

Na última linha de código, usando uma asserção fornecida pelo Jest, testamos se o elemento link é renderizado no DOM.

expect(linkElement).toBeInTheDocument();

Finalmente, para executar nosso teste, execute npm run test ou yarn test e pressione a. Todos os testes no projeto serão executados no modo de observação. Jest executará arquivos que terminam com .spec.js ou .test.js automaticamente.

Como você notou, nosso teste passou, agora vamos fazê-lo falhar 😈. No arquivo App.js, altere o texto do elemento a para 'Hello World'.

Você deve ver o teste falhar com essa mensagem de erro:

TestingLibraryElementError: Unable to find an element with the text: /learn react/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Isso ocorre porque, no DOM, não há elemento com o texto 'Aprender React'. Se você adicionar um novo elemento com o texto 'Aprender React', o teste passará novamente. Adivinha? você implementou seu primeiro teste unitário!

À medida que progredirmos, criaremos um mini-projeto de Solicitação de amizade, mas, primeiro, gostaria de destacar os vários métodos que a RTL forneceu para selecionarmos elementos do DOM, bem como alguns métodos de asserção do Jest.

Query Selectors

No exemplo inicial, utilizamos o método getByText do RTL, que é um dos métodos de consulta disponíveis. Depois que um elemento é selecionado, podemos fazer várias afirmações ou imitar as interações do usuário para interagir com ele.

Se você ainda não adivinhou, o método getByText seleciona um elemento com base no texto dentro do elemento, independentemente de ser uma div, h1, p, ou um h4 contanto que encontre um elemento que tenha o texto fornecido, ele seleciona esse elemento.

getByText("learn react")

Para selecionar elementos DOM, o RTL inclui uma variedade de métodos de consulta. Cada um dos métodos de consulta se enquadra em um dos seguintes grupos :

Elementos únicos: getBy..., findBy..., queryBy...
Múltiplos elementos: getAllBy..., findAllBy..., queryAllBy...

A tabela acima é da documentação oficial da RTL e mostra uma visão geral do que as várias categorias retornam.

Jest matchers

Ao desenvolver testes, geralmente é necessário confirmar se os valores atendem a requisitos específicos. O expect inclui uma variedade de "matchers" que permitem validar coisas diferentes. Mais correspondências personalizadas estão incluídas em um pacote separado chamado jest-dom por RTL.

Dê uma olhada no arquivo package.json, você notará que jest-dom já está instalado como uma dependência.

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",

Em nosso teste inicial, utilizamos o matcher toBeInTheDocument para determinar se o linkElement estava ou não no DOM.

expect(linkElement).toBeInTheDocument();

Alguns exemplos:

// toBe
test("Test that name is John", () => {
  const name = "John";
  expect(name).toBe("John");
});

// toEqual
test("Two plus Two equals Four", () => {
  const result = 2 + 2;
  expect(result).toEqual(4);
});

//toContain
test("Vowels", () => {
  const vowels = ["a", "e", "i", "o", "u"];
  expect(vowels).toContain("e");
  //  .not
  expect(vowels).not.toContain("z");
});

Saiba mais sobre os matchers do Jest clicando aqui. Correspondências jest-dom personalizadas podem ser encontradas aqui.

Mini projeto

Para esta seção, criaríamos um aplicativo de solicitação de amizade simples, os dados do usuário serão extraídos desse link

Vamos descrever as especificações da nossa aplicação:

Enquanto espera por uma resposta da API, exiba um indicador de carregamento escrito Loading....
Exibir solicitações de amizade na tela assim que a chamada da API retornar com um status de 200.
Os usuários devem poder recusar solicitações de amizade.
Se não houver mais solicitações, um botão de atualização ao clicar, chama a API para buscar novos dados.

Seguindo uma abordagem TDD, escreveríamos o teste antes de construir nosso componente. Crie um novo arquivo src/components/Requests/Requests.test.js.

//   src/components/Requests/Requests.test.js 

import axios from "axios";
import {
  render,
  screen,
  waitForElementToBeRemoved,
  fireEvent
} from "@testing-library/react";
import Requests from "./Requests";

describe("Requests page", () => {
 test("Renders Requests component",  async () => {
    render(<Requests />);

    await Promise.all([
      waitForElementToBeRemoved(() => screen.queryByText(/Loading.../i)),
    ]);
    expect(axios.get).toHaveBeenCalledTimes(1);

  });
});

Nosso bloco de teste está incluído em uma função describe; isso é usado para testes de escopo.

Primeiro, o componente <Requests /> é renderizado; tenha em mente que o objetivo é desenvolver testes que imitem como o software é usado. Antes que os dados sejam buscados, o usuário fica sabendo que está carregando, por causa do indicador de carregamento que aparece Loading... na tela. E depois que a solicitação da API retorna com status 200, o indicador de carregamento não aparece mais na tela.

Portanto, utilizamos o método assíncrono waitForElementToBeRemove denvolvido em um método Promise.all para esperar que Loading... desapareça da tela.
Em seguida, verificamos se a chamada axios.get foi executada apenas uma vez.

Mockando com Jest

Jest nos permite mockar/imitar o comportamento de funções em nossa aplicação; jest.fn() é usado para criar uma função simulada.

Em vez de solicitar dados de nossa API no arquivo de teste, criaremos uma função simulada que retorna dados fictícios semelhantes aos dados retornados da API.

Isso é importante porque estamos testando nossa aplicação React e, se nosso teste enviar uma solicitação para a API real, também estamos testando a API; se a API falhar, nosso teste falhará. Como resultado, diminuindo a confiança em nossa aplicação.

Crie um novo arquivo src/__mocks__/axios.js. Como estamos simulando axios, o nome do arquivo deve ser axios.js, e os arquivos fictícios são armazenados na pasta __mocks__, que é colocada na pasta src.

// src/__mocks__/axios.js
import { mockData } from "../mockData";

const customAxios = {
    get: jest.fn().mockResolvedValue(mockData),
  };

export default customAxios

Importamos mockData e o incluímos para ser retornado quando fizermos a chamada da API em nosso teste. A estrutura de seus dados simulados deve ser semelhante à estrutura dos dados retornados de sua API.

// src/mockData.js

export const mockData = {
  data: {
    results: [
      {
        name: { first: "Alison", last: "Carlson" },
        email: "alison.carlson@example.com",
        login: {
          uuid: "56f8e0af-50bb-483b-ba30",
        },
        picture: {
          medium: "https://randomuser.me/api/portraits/med/women/25.jpg",
        },
      },
      {
        name: { first: "Frederik", last: "Larsen" },
        email: "frederik.larsen@example.com",
        login: {
          uuid: "162b6088-870a-4b12-bcbf",
        },
        picture: {
          medium: "https://randomuser.me/api/portraits/med/men/27.jpg",
        },
      },
    ],
  },
};

// Single Mock Data
export const singleMockData = {
  name: { first: "Alison", last: "Carlson" },
  email: "alison.carlson@example.com",
  login: {
    uuid: "56f8e0af-50bb-483b-ba30",
  },
  picture: {
    medium: "https://randomuser.me/api/portraits/med/women/25.jpg",
  },
};

Execute o teste com npm run test ou yarn test.

Quando executamos nosso teste, o Jest identifica a pasta __mocks__ e utiliza as personalizações de axios que definimos, em vez do axios da pasta node_modules. As chamadas do axios retornam uma promise que resolve os dados que queremos, então seguimos o exemplo e retornamos uma promise contendo os dados que queremos (dados fictícios no arquivo src/mockData.js).

Neste ponto, nosso teste está falhando porque não construímos nossos componentes, então vá para src/components/Requests/Requests.js e cole o bloco de código abaixo:

// src/components/Requests/Requests.js

import React, { useState, useEffect } from "react";
import Request from "../Request/Request";
import axios from "axios";

const Requests = () => {
  const [loading, setLoading] = useState(true);
  const [friendRequests, setFriendRequests] = useState([]);

  useEffect(() => {
    fetchFriendRequests();
  }, []);

  const fetchFriendRequests = async () => {
    try {
      const { data } = await axios.get("https://randomuser.me/api/?results=5");
      setFriendRequests(data.results);
      setLoading(false);
    } catch (error) {
      console.log(error);
    }
  };

  if (loading) {
    return (
      <div className="loading">
        <h1>loading...</h1>
      </div>
    );
  }

  return (
    <section>
      <div className="title">
        <h2>friend requests</h2>
        <div className="underline"></div>
      </div>
      <div>
        {friendRequests.map((request, index) => {
          const { login } = request;
          return <Request index={index} key={login.uuid} {...request} />;
        })}
      </div>
    </section>
  );
};

export default Requests;

Criamos uma função fetchFriendRequests que busca os dados da API e chamamos a função dentro de um bloco useEffect. Quando a API retorna, o estado é atualizado e o carregamento é definido como false.

Como não criamos o componente Request.js, nosso teste ainda falhará, então navegue até src/components/Request/Request.js e cole o bloco de código abaixo:

// src/components/Request/Request.js

import React from "react";

const Request = ({ name, email, login, picture, index, id }) => {
  return (
    <div className="single-request" >
      <div className="single-request-main">
        <div>
          <img src={picture.medium} alt={name.first} />
        </div>
        <div>
          <p>
            <strong>Name</strong>: {name.first + " " + name.last}{" "}
          </p>
          <p>
            <strong>Username</strong>: {login.username}{" "}
          </p>
          <p>
            <strong>Email</strong>: {email}{" "}
          </p>
        </div>
      </div>
    </div>
  );
};

export default Request;

O teste passou!

E nosso projeto também está ficando bom em localhost:3000 😎

Vamos adicionar um novo teste em nosso bloco describe para afirmar que o primeiro índice dos dados está no DOM:

describe("Requests page", () => {

  test("Renders Requests component", async () => {
    render(<Requests />);

    await Promise.all([
      waitForElementToBeRemoved(() => screen.queryByText(/Loading.../i)),
    ]);
    expect(axios.get).toHaveBeenCalledTimes(1);
  });

  // new test block
  test("finds first index of Request in the DOM", async () => {
    render(<Requests />);

    const firstRequest = await screen.findByTestId(/request-0/i);

    expect(firstRequest).toBeInTheDocument();
  })
});

Observe que o bloco test recebeu uma função assíncrona? isso é necessário para que possamos usar await dentro da função.

O componente <Requests /> é renderizado, em seguida, encontramos o elemento firstRequest por seu test-id. Nosso teste falhará porque nenhum elemento tem request-0 como test-id.

O que é um test-id?

Test-id é um atributo exclusivo que você pode atribuir a um elemento. Por exemplo:

<div data-testId="unique-attribute">Hello World</div>

Vá para src/components/Request/Request.js e dê ao div pai um test-id exclusivo.

//   src/components/Request/Request.js

<div className="single-request" data-testid={`request-${index}`}>

Vale a pena notar que usamos especificamente findByTestId e isso ocorre porque, ao contrário de getBy... e queryBy..., findBy... retorna uma promise que resolve quando um elemento é encontrado que corresponda à consulta fornecida.

O que significa que se tivéssemos usado getByTestId ou queryByTestId, nosso teste teria falhado:

Mas como não o fizemos, o teste passou!

Botão Recusar

Em seguida, adicionamos um botão que, ao ser clicado, recusa um pedido de amizade e o remove da tela. Crie um novo arquivo de teste src/components/Request/Request.test.js e cole o código abaixo:

// src/components/Request/Request.test.js

import { render, screen, fireEvent } from "@testing-library/react";
import Request from "./Request";
import { singleMockData } from "../../mockData";

const mockedFn = jest.fn();

describe("Single Request component", () => {
  test("decline button to unmount component", () => {
    const { unmount } = render(
      <Request
        index={0}
        key={0}
        {...singleMockData}
        removefriendRequest={mockedFn}
      />
    );

    const declineButton = screen.getByText(/decline/i);
    fireEvent.click(declineButton);
    unmount();

  });
});

Começamos renderizando o componente, mas como precisaremos da função unmount posteriormente, desestruturamos a partir do método render. <Request /> leva um monte de props, então nós fornecemos as props necessárias; para a propriedade removefriendRequest, passamos uma função fictícia que retorna undefined.

Por fim, localizamos o elemento de botão no DOM usando getByText e acionamos um evento click usando o método fireEvent. Depois que o evento click é acionado, desmontamos <Request /> usando unmount().

Em seguida, vamos atualizar <Requests /> adicionando a função removefriendRequest e passando-a como um prop para <Request />. Fique atento aos comentários no bloco de código abaixo:

// src/components/Requests/Requests.js

import React, { useState, useEffect } from "react";
import Request from "../Request/Request";
import axios from "axios";

const Requests = () => {
  const [loading, setLoading] = useState(true);
  const [friendRequests, setFriendRequests] = useState([]);

  useEffect(() => {
    fetchFriendRequests();
  }, []);

  const fetchFriendRequests = async () => {
    try {
      const { data } = await axios.get("https://randomuser.me/api/?results=5");
      setFriendRequests(data.results);
      setLoading(false);
    } catch (error) {
      console.log(error);
    }
  };
    //  Remove Friend Request Function
    const removefriendRequest = (id) => {
    const newfriendRequests = friendRequests.filter(
      (friendRequest) => friendRequest.id !== id
    );
    setFriendRequests(newfriendRequests);
  };

  if (loading) {
    return (
      <div className="loading">
        <h1>loading...</h1>
      </div>
    );
  }

  return (
    <section>
      <div className="title">
        <h2>friend requests</h2>
        <div className="underline"></div>
      </div>
      <div>
        {friendRequests.map((request, index) => {
          const { login } = request;
          return (
            <Request
              index={index}
              key={login.uuid}
              {...request}
              removefriendRequest={removefriendRequest}   /*{Add as prop}*/
            />
          );
        })}
      </div>
    </section>
  );
};

export default Requests;

Todos os testes passaram!

A aplicação parece boa e o botão de recusar funciona conforme o esperado.

Botão Atualizar

Por fim, adicionamos um botão de atualização que carrega novas solicitações de amizade quando o usuário recusou todas as solicitações de amizade. Acesse src/components/Requests/Requests.test.js e adicione o novo bloco de teste abaixo ao bloco describe:

test("Refresh Button loads new friend requests", async () => {
    // declare empty value
    const value = {
      data: {
        results: [],
      },
    };

    // mock axios.get to return an empty array
    axios.get.mockResolvedValueOnce(value);

    render(<Requests />);
    await Promise.all([
      waitForElementToBeRemoved(() => screen.queryByText(/Loading.../i)),
    ]);

    const refreshButton = screen.getByText(/refresh/i);

    fireEvent.click(refreshButton);

    expect(screen.getByText(/friend requests/i)).toBeInTheDocument();
  });

Quando não há mais solicitações de amizade, isso significa que o estado friendRequests no componente <Requests /> é um array vazio; então a primeira coisa que fazemos no bloco de teste acima é simular axios.get para retornar um array vazio. Em seguida, renderizamos nosso componente e esperamos que Loading... seja removido do DOM.

Por fim, o refreshButton é consultado no DOM, um evento de clique é acionado e, em seguida, esperamos que as solicitações de texto de amizade estejam no DOM.

No momento, nosso teste está falhando, então vamos atualizar o componente <Requests />. Fique atento aos comentários abaixo:

import React, { useState, useEffect } from "react";
import Request from "../Request/Request";
import axios from "axios";

const Requests = () => {
  const [loading, setLoading] = useState(true);
  const [friendRequests, setFriendRequests] = useState([]);

  useEffect(() => {
    fetchFriendRequests();
  }, []);

  const fetchFriendRequests = async () => {
    try {
      const { data } = await axios.get("https://randomuser.me/api/?results=5");
      setFriendRequests(data.results);
      setLoading(false);
    } catch (error) {
      console.log(error);
    }
  };

  const removefriendRequest = (id) => {
    const newfriendRequests = friendRequests.filter(
      (friendRequest) => friendRequest.id !== id
    );
    setFriendRequests(newfriendRequests);
  };

  if (loading) {
    return (
      <div className="loading">
        <h1>loading...</h1>
      </div>
    );
  }

  // Condition for when friendRequests is an empty array
  if (friendRequests.length === 0) {
    return (
      <main>
        <div className="title">
          <h2>no Requests</h2>
          <button className="btn" onClick={() => fetchFriendRequests()}>
            refresh
          </button>
        </div>
      </main>
    );
  }

  return (
    <section>
      <div className="title">
        <h2>friend requests</h2>
        <div className="underline"></div>
      </div>
      <div>
        {friendRequests.map((request, index) => {
          const { login } = request;
          return (
            <Request
              index={index}
              key={login.uuid}
              {...request}
              removefriendRequest={removefriendRequest}
            />
          );
        })}
      </div>
    </section>
  );
};

export default Requests;

Agora que atualizamos o componente, espera-se que o teste passe, mas não passou. Temos um erro "não envolvido no ato".

Encontramos esse erro porque fireEvent.click(refreshButton) acionou uma chamada assíncrona. Você pode encontrar esse erro por vários outros motivos ao escrever testes.

Para resolver nosso erro atual, use waitFor para aguardar a conclusão completa da atualização do componente. O waitFor é uma API da biblioteca de testes do React, que permite esperar que as asserções agrupadas passem dentro de uma janela de tempo limite específica.

Vamos atualizar src/components/Requests/Requests.test.js.

Importe waitFor de @testing-library/react:

// src/components/Requests/Requests.test.js

import {
  render,
  screen,
  fireEvent,
  waitFor, // import waitFor
  waitForElementToBeRemoved,
} from "@testing-library/react";

Atualize o teste do botão de atualização com o bloco de código abaixo:

  // Refresh button Test
  test("Refresh Button loads new friend requests", async () => {
    const value = {
      data: {
        results: [],
      },
    };
    axios.get.mockResolvedValueOnce(value);

    render(<Requests />);
    await Promise.all([
      waitForElementToBeRemoved(() => screen.queryByText(/Loading.../i)),
    ]);

    const refreshButton = screen.getByText(/refresh/i);

    fireEvent.click(refreshButton);

    // Wrap assertion within waitFor
    await waitFor(() => {
      expect(screen.getByText(/friend requests/i)).toBeInTheDocument();
    });
  });

Você pode realizar um teste manual verificando como o projeto é executado no navegador.

Além disso, verifique se em seu arquivo package.json você configurou isso:

  "jest": {
    "resetMocks": false 
  },

Conclusão

A importância dos testes de aplicações, especialmente para aplicações grandes, não podem ser exagerados. Escrever testes automatizados é essencial para desenvolver aplicações de alta qualidade. É simples começar a testar aplicações React e aumentar a qualidade do código com a documentação de testes do CRA, React Testing Library e Jest.

Obrigado por ler!

Como implementar um scroll infinito no React.js criando um clone do TikTok

Ivan Trindade — Thu, 19 Jan 2023 18:35:30 +0000

Em 2006, Aza Raskin introduziu o conceito de scroll infinito, uma funcionalidade que mais tarde transformaria nossas vidas digitais. Facebook, TikTok, AliExpress e Pinterest, para citar alguns, implementaram o recurso de scroll infinito em suas histórias ou feeds.

O scroll infinito traz essencialmente informações e entretenimento infinitos para sua tela. Você continua rolando e rolando, mas nunca chega ao fim. Ao longo dos anos, recebeu muitas críticas, até mesmo de seu criador , devido à sua natureza viciante. Independentemente disso, essa tecnologia é fascinante tanto do ponto de vista comportamental quanto da implementação.

Este artigo abordará como o scroll infinito funciona nos bastidores e como o TikTok incorpora o scroll infinito. Também criaremos um clone do TikTok com React.js, CSS puro e vídeos gratuitos da API do Pexels para entender melhor o processo de implementação.

Para ser claro, implementaremos principalmente a versão móvel do feed do TikTok, em vez de criar um clone completo do TikTok. Aqui está uma prévia de como ficará nossa aplicação:

Como funciona o scroll infinito

As implementações do scroll inifito variam entre as aplicações, mas a ideia por trás de como todos funcionam é praticamente a mesma. Todos contam com programação assíncrona e uma API para carregar o conteúdo.

Primeiro, você faz que sua aplicação busque algum conteúdo de vídeo assim que a aplicação é carregada. Você também adiciona um ouvinte que assistequando o usuário rola a tela ou quando o vídeo termina. Quando o ouvinte é acionado, a aplicação carrega o novo conteúdo de forma assíncrona por meio da API.

Um pseudocódigo semelhante ao JavaScript simples para esse processo pode ser assim:

function getContent(n) {
  // Asynchronously load 'n' new post from API
}

window.addEventListener("DOMContentLoaded", (event) => {
  getContent(5);
});

window.addEventListener("scroll", (e) => {
  if (e.scrollY === somePreferredScrollFrame) {
    getContent(5);
  }
});

Como funciona o TikTok

O feed do TikTok funciona praticamente da mesma maneira descrita acima; no entanto, o conteúdo no caso do TikTok são vídeos criados ou compartilhados por outros usuários da aplicação. Além disso, o TikTok incorpora um recurso exclusivo em que cada vídeo é exibido em altura total, separando-os um do outro, juntamente com um efeito de rolagem suave que torna a rolagem de cada vídeo satisfatória.

Replicar recursos especiais como esse é bastante simples com CSS puro. Utilizaremos as propriedades scroll-snap e scroll-behavior para o efeito de rolagem. Implementaremos totalmente outros métodos para fazer o efeito de scroll infinito funcionar com JavaScript nativo.

Como construir um clone do TikTok

Vamos começar criando uma nova aplicação React. Para fazer isso, certifique-se de ter npx( Node.js ) instalado e execute o seguinte comando:

npx create-react-app tiktok-clone

Em seguida, abra a pasta projetada recém-criada em seu editor de texto favorito e execute o seguinte comando para iniciar a aplicação em seu navegador:

npm start

Implementando scroll-snap de altura total e barra de navegação inferior

Vamos continuar criando os componentes scroll-snap e barra de navegação inferior semelhantes ao TikTok. Para fazer isso, crie um novo diretório components na pasta /src existente e crie dois novos arquivos: BottomNav.js e VideoCard.js nesse novo diretório. Com essas alterações, nossa árvore de arquivos deve ficar assim:

.
├── . . .
├── public
├── src
│   ├── components
│   │   ├── BottomNav.js
│   │   └── VideoCard.js
│   └── . . .
└── . . .

Dentro do arquivo VideoCard.js, cole o código abaixo:

const VideoCard = ({ index }) => {
  return (
    <div className="slider-children">
      <div
        style={{
          justifyContent: "center",
          alignItems: "center",
          display: "flex",
          height: "100%",
        }}
      >
        <h1>Video {index}</h1>
      </div>
    </div>
  );
};

export default VideoCard;

O código acima cria um novo componente VideoCard que aceita uma única prop chamada index e exibe esse índice concatenado com a palavra “Vídeo”. É importante ressaltar que esse componente também contém a marcação e os nomes de classe que permitem o efeito de ajuste de rolagem de altura total.

Dentro do arquivo BottomNav.js, adicione o seguinte conteúdo:

const BottomNav = () => {
  return (
    <nav className="bottom-nav">
      <a className="navbar-brand" href="/">
        <i className="fa fa-home"></i>
      </a>
      <a className="navbar-brand" href="/">
        <i className="fa fa-search"></i>
      </a>
      <a className="navbar-brand" href="/">
        <i className="fa fa-plus"></i>
      </a>
      <a className="navbar-brand" href="/">
        <i className="fa fa-commenting"></i>
      </a>
      <a className="navbar-brand" href="/">
        <i className="fa fa-user"></i>
      </a>
    </nav>
  );
};

export default BottomNav;

O código acima contém a marcação, nomes de classe e definições de ícone para nossa barra de navegação inferior semelhante ao TikTok. Usamos ícones Font Awesome para os ícones, como visto no código anterior, mas para que funcione, também precisaremos vincular seu arquivo de recurso. Para fazer isso, abra o arquivo public/index.html e cole o seguinte na seção head:

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>

Para classificar todos os códigos relacionados a CSS, substitua o conteúdo do arquivo src/index.css padrão pelo seguinte:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

*::-webkit-scrollbar {
  display: none;
}

html,
body {
  height: 100vh;
  overflow: hidden;
  color: #fff;
  font-family: 'Helvetica Neue', sans-serif;
}

.slider-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.slider-children {
  height: 100vh;
  scroll-snap-align: start;
  background: #000;
  position: relative;
  border: 1px solid transparent;
}

.video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-content {
  padding: 10px;
  position: relative;
  top: 85%;
  color: #fff;
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #000;
}

.bottom-nav a {
  color: #fff;
  text-decoration: none;
}

.fa {
  font-size: 20px;
}

.fa-plus {
  color: #000;
  background: #fff;
  padding: 3px 10px;
  border-radius: 10px;
  border: 2px solid #ff5722c4;
}

Como você deve ter notado, esse código CSS contém o estilo para obter o efeito de rolagem suave, fixando nossa barra de navegação na parte inferior da página, um elemento de vídeo que adicionaremos no futuro e um estilo adicional.

Finalmente, para encerrar esta seção, vamos importar os componentes recém-criados em nosso arquivo de entrada. Abra src/App.js e substitua seu código pelo abaixo:

import { useState, useEffect } from "react";

import BottomNav from "./components/BottomNav";
import VideoCard from "./components/VideoCard";

function App() {
  const [videos, setvideos] = useState([]);

  const getVideos = (length) => {
    let newVideos = Array.from(Array(length).keys());
    setvideos((oldVideos) => [...oldVideos, ...newVideos]);
  };

  useEffect(() => {
    getVideos(3);
  }, []);

  return (
    <main>
      <div className="slider-container">
        {videos.length > 0 ? (
          <>
            {videos.map((video, id) => (
              <VideoCard key={id} index={id + 1} />
            ))}
          </>
        ) : (
          <>
            <h1>Nothing to show here</h1>
          </>
        )}
      </div>

      <BottomNav />
    </main>
  );
}

export default App;

Aqui, importamos os componentes BottomNav e VideoCard que criamos anteriormente. Também definimos um estado videos usando useState do React e definimos seu valor inicial como um array vazio. Além disso, definimos uma função getVideos(), que recebe um comprimento, cria um array desse comprimento e empurra os valores resultantes para o nosso estado videos definido anteriormente.

Além disso, usamos o hook useEffect para chamar a função getVideos() assim que nossa aplicação foi montada, fazendo com que ele adicionasse três novos itens ao nosso estado videos. E em nossa marcação, fizemos um loop videos, renderizando o componente VideoCard para cada iteração enquanto também transmitíamos o id da iteração (índice) como a propriedade de índice para nosso componente VideoCard.

Se visualizarmos nossa aplicação neste ponto, veremos a seguinte saída:

Suponha que sua aplicação renderize seis partes de conteúdo em vez de três depois de concluir essas etapas. Nesse caso, isso ocorre porque o React StrictMode renderiza os componentes duas vezes porque estamos no modo de desenvolvimento – um dos impactos da atualização para o React 18.

Para corrigir isso, abra src/index.js e remova a opção StrictMode. Em vez de retornar:

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Você muda para:

root.render(
    <App />
);

E tudo deve funcionar como esperado.

Adicionando scroll infinito

Para nossa implementação de scroll infinito, usaremos a API nativa do Intersection Observer, que nos permite observar de forma assíncrona a visibilidade de um elemento na janela de visualização do navegador.

Nossa abordagem para alcançar o scroll infinito, será nas seguintes etapas:

Crie um hook customizado no viewport (através da API Intersection Observer) para verificar se um elemento está atualmente no viewport.
Passe um comprimento preferencial para o componente VideoCard no qual pretendemos carregar o novo conteúdo. Por exemplo: após o usuário rolar até 3/5 da tela (neste caso, comprimento é 3), carregar x novo conteúdo.
Verificar se rolamos para o comprimento preferido definido na etapa 2 usando Reac Ref.
Usando a condição da etapa anterior, carregue o novo conteúdo x e aumente o comprimento preferido para um comprimento futuro para o qual ainda não rolamos.

Para realizar a primeira etapa, crie um novo arquivo useIsInViewport.js no diretório /src existente e cole o seguinte código nele:

import { useEffect, useState, useMemo } from "react";

function useIsInViewport(ref) {
  const [isIntersecting, setIsIntersecting] = useState(false);

  const observer = useMemo(
    () =>
      new IntersectionObserver(([entry]) =>
        setIsIntersecting(entry.isIntersecting)
      ),
    []
  );

  useEffect(() => {
    observer.observe(ref.current);

    return () => {
      observer.disconnect();
    };
  }, [ref, observer]);

  return isIntersecting;
}

export default useIsInViewport;

Aqui criamos um hook personalizado,useIsInViewport, que aceita uma referência como seu parâmetro e usa a API Intersection Observer para verificar se o elemento com a referência fornecida está atualmente na viewport.

Para a segunda etapa, altere o arquivo src/App.js de forma que o componente VideoCard adicione uma nova entrada de props como esta:

<VideoCard
    key={id}
    index={id + 1}
    lastVideoIndex={videos.length - 1}
    getVideos={getVideos}
/>

A única diferença aqui é que passamos um novo parâmetro, lastVideoIndex, e definimos seu valor para a duração de nossos vídeos originais (3) – 1. Dessa forma, inicialmente carregamos três vídeos e desejamos carregar novos conteúdos quando o usuário atingir dois dos três vídeos. Também passamos a função getVideos() como parâmetro para que possamos chamá-la diretamente do componente VideoCard.

A mudança final acontece em nosso arquivo componente do VideoCard. Abra src/components/VideoCard.js e atualize seu código com o seguinte:

import { useRef, useState } from "react";

import useIsInViewport from "../useIsInViewport";

const VideoCard = ({ index, lastVideoIndex, getVideos }) => {
  const elementRef = useRef();
  const isInViewport = useIsInViewport(elementRef);
  const [loadNewVidsAt, setloadNewVidsAt] = useState(lastVideoIndex);

  if (isInViewport) {
    if (loadNewVidsAt === Number(elementRef.current.id)) {
      // increase loadNewVidsAt by 2
      setloadNewVidsAt((prev) => prev + 2);
      getVideos(3);
    }
  }

  return (
    <div className="slider-children">
      <div
        ref={elementRef}
        id={index}
        style={{
          justifyContent: "center",
          alignItems: "center",
          display: "flex",
          height: "100%",
        }}
      >
        <h1>Video {index}</h1>
      </div>
    </div>
  );
};

export default VideoCard;

Aqui está um detalhamento do que está acontecendo neste componente: Definimos uma ref, elementRef, e a adicionamos ao nosso divscroll-snap. Também demos a essa div um novo id e definimos seu valor para corresponder ao índice do conteúdo atual. Em seguida, passamos o elementRef para o hook useIsInViewport para verificar se ele está atualmente na viewport.

Além disso, usando useState do React, definimos um novo estado loadNewVidsAt e definimos seu valor inicial para a prop lastVideoIndex que passamos anteriormente. Estamos fazendo isso para tornar a atualização desse valor mais flexível, já que não podemos alterar diretamente uma prop.

Por fim, usamos uma instrução if para verificar se um vídeo está na viewport e, se estiver, verificamos se o id desse vídeo atual é igual ao valor do estado loadNewVidsAt (ou seja, o valor no qual queremos carregar novos conteúdos). Se essa condição for atendida, carregamos três novos vídeos usando getVideos(3) e definimos o estado loadNewVidsAt para seu valor anterior + 2.

E voilá! Implementamos com sucesso o scroll infinito. Se você rodar sua aplicação neste ponto, tudo deve funcionar conforme o esperado, conforme a imagem abaixo:

No entanto, até agora, temos apenas texto infinito, não vídeos infinitos. Vamos nos aprofundar na adição de vídeos na próxima seção.

Atualize com arquivos de vídeo de amostra

Como nosso clone do TikTok não oferece suporte a nenhuma publicação de conteúdo, carregaremos vídeos por meio de uma API de terceiros. Pesquisei para você e descobri que o Pexels fornece uma API acessível e excelente para carregar vídeos e imagens da comunidade. A API do Pexels é flexível, pois podemos especificar a duração dos vídeos que queremos recuperar e filtrá-los por diferentes categorias.

O que você quer fazer agora é ir para a página inicial do Pexels e criar uma nova conta. Depois de verificar sua conta, acesse a página da API e solicite uma nova API. Depois de seguir as instruções destacadas nesta página, você deve obter instantaneamente sua chave de API. Copie isso e guarde-o em um lugar seguro por enquanto.

Em seguida, queremos instalar a biblioteca Pexels em nossa aplicação. Para fazer isso, execute o seguinte comando:

npm install pexels

Feito isso, abra src/App.jse substitua seu conteúdo pelo seguinte código:

import { useState, useEffect } from "react";

import { createClient } from "pexels";

import BottomNav from "./components/BottomNav";
import VideoCard from "./components/VideoCard";

function App() {
  const [videos, setvideos] = useState([]);
  const [videosLoaded, setvideosLoaded] = useState(false);

  const randomQuery = () => {
    const queries = ["Funny", "Art", "Animals", "Coding", "Space"];
    return queries[Math.floor(Math.random() * queries.length)];
  };

  const getVideos = (length) => {
    // Replace with your Pexels API Key
    const client = createClient("YOUR_PEXEL_API_KEY");

    const query = randomQuery();
    client.videos
      .search({ query, per_page: length })
      .then((result) => {
        setvideos((oldVideos) => [...oldVideos, ...result.videos]);
        setvideosLoaded(true);
      })
      .catch((e) => setvideosLoaded(false));
  };

  useEffect(() => {
    getVideos(3);
  }, []);

  return (
    <main>
      <div className="slider-container">
        {videos.length > 0 ? (
          <>
            {videos.map((video, id) => (
              <VideoCard
                key={id}
                index={id}
                author={video.user.name}
                videoURL={video.video_files[0].link}
                authorLink={video.user.url}
                lastVideoIndex={videos.length - 1}
                getVideos={getVideos}
              />
            ))}
          </>
        ) : (
          <>
            <h1>Nothing to show here</h1>
          </>
        )}
      </div>

      <BottomNav />
    </main>
  );
}

export default App;

As principais modificações neste arquivo são que atualizamos a função getVideos() para agora realmente carregar arquivos de vídeo através da API Pexels, e também adicionamos uma nova função randomQuery() que gera consultas aleatórias e nos permite passar a consulta gerada para nossa API Pexels solicitar.

Além disso, alteramos a inicialização do componente VideoCard para incluir informações sobre os vídeos carregados, como autor do vídeo, URL do vídeo e um link para o perfil do criador.

Por fim, atualize src/components/VideoCard.js e também substitua o conteúdo deste arquivo pelo código abaixo:

import { useRef, useState, useEffect } from "react";

import useIsInViewport from "../useIsInViewport";

const VideoCard = ({
  index,
  author,
  videoURL,
  authorLink,
  lastVideoIndex,
  getVideos,
}) => {
  const video = useRef();
  const isInViewport = useIsInViewport(video);
  const [loadNewVidsAt, setloadNewVidsAt] = useState(lastVideoIndex);

  if (isInViewport) {
    setTimeout(() => {
      video.current.play();
    }, 1000);

    if (loadNewVidsAt === Number(video.current.id)) {
      setloadNewVidsAt((prev) => prev + 2);
      getVideos(3);
    }
  }

  const togglePlay = () => {
    let currentVideo = video.current;
    if (currentVideo.paused) {
      currentVideo.play();
    } else {
      currentVideo.pause();
    }
  };

  useEffect(() => {
    if (!isInViewport) {
      video.current.pause();
    }
  }, [isInViewport]);

  return (
    <div className="slider-children">
      <video
        muted
        className="video"
        ref={video}
        onClick={togglePlay}
        id={index}
        autoPlay={index === 1}
      >
        <source src={videoURL} type="video/mp4" />
      </video>
      <div className="video-content" onClick={togglePlay}>
        <p>@{author}</p>
        <p>
          Video by <a href={authorLink}>{author} </a> on Pexel
        </p>
      </div>
    </div>
  );
};

export default VideoCard;

As principais modificações a este arquivo são que adicionamos uma marcação de vídeo e definimos sua fonte para aquela carregada da API do Pexels. Também usamos nosso hook useIsInViewport personalizado para verificar o vídeo na viewport e reproduzi-lo automaticamente. Se o vídeo não estiver sendo reproduzido, usamos o hook useEffect para interrompê-lo.

Além disso, criamos uma nova função togglePlay(), semelhante ao TikTok, que permite ao usuário pausar ou reproduzir um vídeo a qualquer momento, simplesmente clicando em qualquer lugar dentro do quadro do vídeo.

E agora nosso clone do TikTok está completo! Quando executamos nosso programa agora, obtemos os seguintes resultados:

Ao longo desse artigo, exploramos como o scroll infinito funciona e como implementar o feed de notícias de scroll infinito do TikTok, carregando vídeos gratuitos da API Pexels. Obrigado por ler!