Me foi passada uma tarefa no trabalho para desenvolver um componente no Flutter que é bastante utilizado em outros apps também, mas tinha um pequeno problema: eu não fazia nem ideia de qual era o nome desse componente e de como eu iria implementar isso no app. Levei pouco tempo para descobrir o nome dele (DraggableScrollableSheet) e já comecei a implementar no app e cuidar das particularidades que eu precisava, que vou contar nesse post.

Entendendo o componente DraggableScrollableSheet e definindo as particularidades que eu precisava

Vocês com certeza já devem ter utilizado o Google Maps, correto? Então, esse é um dos apps mais famosos que contam com um componente nesse estilo aqui:

Sim, esse não é o google maps, mas peguei o primeiro exemplo que achei aqui para ilustrar mais ou menos o que eu precisava. Então, vamos a lista de requisitos:

• Um componente que ficasse "grudado" na parte de baixo da tela e NUNCA ficasse completamente escondido;
• Um componente que se expandisse em direção ao topo da tela quando eu clicasse em um botão ou arrastasse ele em direção ao topo;
• Um componente que o conteúdo dele fosse "scrolllavel" para visualização das informações;

Com esses requisitos, iriamos tender para duas soluções dentro do flutter: BottomSheet ou DraggableScrollableSheet. Acabei ficando com o DraggableScrollableSheet pelo simples motivo de que com ele é possível não deixa-lo completamente escondido, diferente do outro.

Com o componente escolhido, vamos para a implementação!

Implementando o DraggableScrollableSheet

Necessidade do widget Stack

Se você for na documentação oficial desse widget, vai achar esse código:

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DraggableScrollableSheet'),
      ),
      body: SizedBox.expand(
        child: DraggableScrollableSheet(
          builder: (BuildContext context, ScrollController scrollController) {
            return Container(
              color: Colors.blue[100],
              child: ListView.builder(
                controller: scrollController,
                itemCount: 25,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(title: Text('Item $index'));
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

que mostra o básico, mas não mostra como podemos utilizar ele com outros conteúdos na tela. Para isso, vamos precisar da ajuda do widget Stack.Não vou entrar em muitos detalhes aqui, mas o Stack basicamente permite que seus filhos se sobreponham um sobre o outro (tipo o position: absolute do css). E o componente DraggableScrollableSheet é inteligente o suficiente para saber que quando o pai dele for um Stack, ele deve ficar colado na base da tela. Com isso, nosso código atualizado ficaria assim:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DraggableScrollableSheet'),
      ),
      body: Stack( // <-- COLOCANDO STACK COMO PAI
        children: [
          Text("Filho de exemplo"), // <-- EXEMPLO DE CONTEÚDO 
          DraggableScrollableSheet(
            builder: (BuildContext context, ScrollController scrollController) {
              return Container(
                color: Colors.blue[100],
                child: ListView.builder(
                  controller: scrollController,
                  itemCount: 25,
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(title: Text('Item $index'));
                  },
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

com isso, podemos colocar mais elementos na nossa tela e prosseguir com o desenvolvimento. No momento, está assim:

Construindo o header do DraggableScrollableSheet

Bom, agora que já temos algo funcional que cumpre os nosso requisitos básicos de ficar preso na parte de baixo da tela e conseguir se expandir em direção ao topo, vamos ao header do nosso componente. O header é uma parte bem simples, vai conter basicamente um resumo do que o usuário está vendo na tela e um botão para ele clicar e poder expandir completamente ou voltar ao seu estado inicial (aparecendo só uma parte). Sabendo disso, o nosso código com o header ficará algo assim:

import 'dart:math';

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DraggableScrollableSheet'),
      ),
      body: Stack(
        children: [
          Text("Filho de exemplo"),
          DraggableScrollableSheet(
            initialChildSize: 0.12, // <-- NOVAS PROPRIEDADES
            minChildSize: 0.12,
            maxChildSize: 0.8,
            builder: (BuildContext context, ScrollController scrollController) {
              return Container(
                color: Colors.blue,
                child: SingleChildScrollView( // <-- MUDANÇA DO WIDGET DE SCROLL
                  controller: scrollController,
                  child: Column(
                    children: [
                      Container(
                        padding:
                            const EdgeInsets.only(right: 18, left: 18, top: 12),
                        child: Row( // <-- ROW QUE SERÁ O HEADER
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Column( // <-- COLUNA DE RESUMO
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: const [
                                Text(
                                  "Resumo de algo aqui",
                                  style: TextStyle(color: Colors.white),
                                ),
                                Text(
                                  "Descrição do resumo aq",
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.w700,
                                  ),
                                )
                              ],
                            ),
                            OutlinedButton( // <-- BOTÃO PARA EXPANDIR E ENCOLHER
                              onPressed: () {},
                              style: OutlinedButton.styleFrom(
                                side: const BorderSide(
                                    width: 1.0, color: Colors.white),
                                shape: const StadiumBorder(),
                              ),
                              child: Row(
                                children: [
                                  const Text(
                                    "Ver mais",
                                    style: TextStyle(color: Colors.white),
                                  ),
                                  const SizedBox(width: 5),
                                  Transform.rotate(
                                    angle: -90 * pi / 180,
                                    child: const Icon(
                                      Icons.arrow_forward_ios_rounded,
                                      size: 18.0,
                                      color: Colors.white,
                                    ),
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

Tivemos uma certa quantidade de mudanças, sendo:

• Propriedades de initialChildSize, minChildSize e maxChildSize. O nome já é bem descritivo, sendo a altura inicial do widget, mínima e máxima respectivamente. Esse valor pode variar de 0 até 1, correspondendo a % da altura do componente pai.

• Mudança para de ListView para SingleChildScrollView. Isso aqui não afeta tanto o nosso desenvolvimento, eu resolvi mudar pois fazia mais sentido para o que eu estava desenvolvendo.

• Componente Row que será o nosso header com o resumo do que está sendo apresentado na tela e com o botão para expandir e encolher o nosso widget (cuidaremos do comportamento desse botão mais tarde).

Com isso, teremos o seguinte resultado:

Com isso feito, vamos ao funcionamento do botão.

Desenvolvendo o funcionamento do botão de expandir e encolher

Já que esse botão é de expandir e encolher, vamos precisar de 2 coisas para termos um funcionamento completo:

• Guardar se o nosso widget (DraggableScrollableSheet) está aberto ou fechado;
• Quando clicarmos no botão, ele expandir ou encolher o nosso widget;

Cuidaremos dos dois em seguida.

Se você conhece o básico de flutter, já sabe que a primeira coisa que vamos ter que fazer é transformar o nosso componente de Stateless para Stateful (o que nos permite guardar estado e ter acesso aos life cyclie methods de um widget, vamos precisar de ambos). Se você está no VSCode e clicar com CTRl + . em StatelessWidget, verá que aparece uma opção de você transformar em Stateful, assim:

Após a conversão, ficará assim:

import 'dart:math';

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DraggableScrollableSheet'),
      ),
      body: Stack(
        children: [
          Text("Filho de exemplo"),
          DraggableScrollableSheet(
            initialChildSize: 0.12,
            minChildSize: 0.12,
            maxChildSize: 0.8,
            builder: (BuildContext context, ScrollController scrollController) {
              return Container(
                color: Colors.blue,
                child: SingleChildScrollView(
                  controller: scrollController,
                  child: Column(
                    children: [
                      Container(
                        padding:
                            const EdgeInsets.only(right: 18, left: 18, top: 12),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: const [
                                Text(
                                  "Resumo de algo aqui",
                                  style: TextStyle(color: Colors.white),
                                ),
                                Text(
                                  "Descrição do resumo aq",
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.w700,
                                  ),
                                )
                              ],
                            ),
                            OutlinedButton(
                              onPressed: () {},
                              style: OutlinedButton.styleFrom(
                                side: const BorderSide(
                                    width: 1.0, color: Colors.white),
                                shape: const StadiumBorder(),
                              ),
                              child: Row(
                                children: [
                                  const Text(
                                    "Ver mais",
                                    style: TextStyle(color: Colors.white),
                                  ),
                                  const SizedBox(width: 5),
                                  Transform.rotate(
                                    angle: -90 * pi / 180,
                                    child: const Icon(
                                      Icons.arrow_forward_ios_rounded,
                                      size: 18.0,
                                      color: Colors.white,
                                    ),
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

Com isso, podemos colocar nosso estado bem no começo da classe _HomePageState, bem assim:

class _HomePageState extends State<HomePage> {
  bool isBottomSheetOpen = false;

// Resto do código que já conhecemos aqui ...

Perfeito, agora temos um meio de guardar se ele ta aberto, só colocar uma função de onPressed no botão para abrir ou fechar o widget e mudar esse estado, correto?

ERRADO !

Atualmente já temos um modo de abrir o nosso widget: arrastando ele pra cima! Se mudarmos esse estado somente quando um botão for clicado, se abrirmos ele arrastando, o nosso estado não vai saber que ele está aberto e continuará mostrando o texto do botão como se ele estivesse fechado. Para resolver isso vamos precisar do DraggableScrollableController. Esse controller vai nos permitir fazer duas coisas: abrir o widget quando o botão for clicado e saber em que altura o nosso widget está enquanto ele está sendo arrastando (permitindo a gente saber se o widget está encolhido ou totalmente aberto). A inicialização dele é bem simples, vamos colocar logo abaixo do nosso estado, assim:

class _HomePageState extends State<HomePage> {
  bool isBottomSheetOpen = false;
DraggableScrollableController dragController =
      DraggableScrollableController();

// Resto do código que já conhecemos aqui ...

e claro, vamos atrelar ele ao nosso widget:

// Resto do código que já conhecemos aqui ...
DraggableScrollableSheet(
    initialChildSize: 0.12,
    minChildSize: 0.12,
    maxChildSize: 0.8,
    controller: dragController,
    builder: (BuildContext context, ScrollController scrollController) {
// Resto do código que já conhecemos aqui ...

Agora que já temos o controller inicializado e atrelado ao nosso widget, precisamos criar uma função para abrir e fechar, atrelar ao nosso botão e mudar o texto e ícone dependendo do estado atual, ficando assim:

• A função:

  onToggleBottomSheet() {
   if (isBottomSheetOpen) {
     dragController.animateTo(0.12,
         duration: const Duration(milliseconds: 200), curve: Curves.ease);
     isBottomSheetOpen = false;
   } else {
     dragController.animateTo(0.8,
         duration: const Duration(milliseconds: 200), curve: Curves.ease);
     isBottomSheetOpen = true;
   }
  }
  

• A atribuição ao botão:

OutlinedButton(
  onPressed: onToggleBottomSheet,

• A mudança do texto e ícone refletindo o estado:

OutlinedButton(
      onPressed: onToggleBottomSheet,
      style: OutlinedButton.styleFrom(
      side: const BorderSide(
          width: 1.0, color: Colors.white),
      shape: const StadiumBorder(),
      ),
      child: Row(
        children: [
          Text(
            isBottomSheetOpen
                ? "Ver menos"
                : "Ver mais",
            style: const TextStyle(
                color: Colors.white),
          ),
          const SizedBox(width: 5),
          Transform.rotate(
            angle: isBottomSheetOpen
                ? 90 * pi / 180
                : -90 * pi / 180,
            child: const Icon(
              Icons.arrow_forward_ios_rounded,
              size: 18.0,
              color: Colors.white,
            ),
          ),
        ],
      ),
)

Com isso feito, teremos o seguinte resultado em tela:

Perfeito! Nosso botão está mudando o texto de acordo com o nosso estado e o nosso widget está abrindo ou fechando ao clicar no botão, mas ainda temos um problema... Se eu abrir o widget arrastando ele para cima, o nosso estado não fica sabendo disso e causando isso aqui:

Por sorte isso é fácil de resolver com o nosso controller, vamos precisar colocar um listener nele para toda hora que a altura do nosso widget mudar na tela ele nos avisar e podermos saber se ele está fechado ou aberto enquanto o nosso usuário arrasta. Vamos precisar adicionar esse listener quando o widget é montado na tela, ou seja, no método initState do nosso widget. Esse é o resultado:

class _HomePageState extends State<HomePage> {
  bool isBottomSheetOpen = false;
  DraggableScrollableController dragController =
      DraggableScrollableController();

  @override
  void initState() {
    super.initState();

    dragController.addListener(
      () {
        if (dragController.size > 0.12 && isBottomSheetOpen == false) {
          isBottomSheetOpen = true;
        }

        if (dragController.size == 0.12 && isBottomSheetOpen == true) {
          isBottomSheetOpen = false;
        }
      },
    );
  }

toda vez que a altura do nosso widget muda, ele chama esse listener verifica se o tamanho atual é maior que o mínimo (0.12) ou igual e muda o nosso estado de acordo com isso. Com isso, temos o resultado final:

Deixando o nosso header preso no topo do widget

Perfeito, fizemos tudo funcionar, mas ainda sim algo pode ser melhorado. Se adicionarmos mais conteúdo ao nosso widget, ele poderá scrollar mais ainda e teremos algo assim:

ou seja, nosso header esta subindo junto com todo conteúdo. Já que ele é um header com um botão de ação, o ideal seria ele ficar preso no topo enquanto scrollamos o resto do coteúdo, correto?

Para isso, vamos precisar do widget StickyHeader que adquirimos por meio do pacote sticky_headers. Vamos adiciona-lo nas nossas dependências:

dependencies:
  flutter:
    sdk: flutter
  sticky_headers: "^0.3.0"

A utilização dele é bem simples, levando apenas um argumento de header que é o que vai ficar preso e um content que é todo o resto, nos levando para esse código final:

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers/widget.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isBottomSheetOpen = false;
  DraggableScrollableController dragController =
      DraggableScrollableController();

  @override
  void initState() {
    super.initState();

    dragController.addListener(
      () {
        if (dragController.size > 0.12 && isBottomSheetOpen == false) {
          isBottomSheetOpen = true;
        }

        if (dragController.size == 0.12 && isBottomSheetOpen == true) {
          isBottomSheetOpen = false;
        }
      },
    );
  }

  onToggleBottomSheet() {
    if (isBottomSheetOpen) {
      dragController.animateTo(0.12,
          duration: const Duration(milliseconds: 200), curve: Curves.ease);
      isBottomSheetOpen = false;
    } else {
      dragController.animateTo(0.8,
          duration: const Duration(milliseconds: 200), curve: Curves.ease);
      isBottomSheetOpen = true;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DraggableScrollableSheet'),
      ),
      body: Stack(
        children: [
          Text("Filho de exemplo"),
          DraggableScrollableSheet(
            initialChildSize: 0.12,
            minChildSize: 0.12,
            maxChildSize: 0.8,
            controller: dragController,
            builder: (BuildContext context, ScrollController scrollController) {
              return Container(
                color: Colors.blue,
                child: SingleChildScrollView(
                  controller: scrollController,
                  child: StickyHeader( // <-- O WIDGET
                    header: Container(
                      padding:
                          const EdgeInsets.only(right: 18, left: 18, top: 12),
                      color: Colors.blue,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: const [
                              Text(
                                "Resumo de algo aqui",
                                style: TextStyle(color: Colors.white),
                              ),
                              Text(
                                "Descrição do resumo aq",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.w700,
                                ),
                              )
                            ],
                          ),
                          OutlinedButton(
                            onPressed: onToggleBottomSheet,
                            style: OutlinedButton.styleFrom(
                              side: const BorderSide(
                                  width: 1.0, color: Colors.white),
                              shape: const StadiumBorder(),
                            ),
                            child: Row(
                              children: [
                                Text(
                                  isBottomSheetOpen ? "Ver menos" : "Ver mais",
                                  style: const TextStyle(color: Colors.white),
                                ),
                                const SizedBox(width: 5),
                                Transform.rotate(
                                  angle: isBottomSheetOpen
                                      ? 90 * pi / 180
                                      : -90 * pi / 180,
                                  child: const Icon(
                                    Icons.arrow_forward_ios_rounded,
                                    size: 18.0,
                                    color: Colors.white,
                                  ),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                    content: Padding(
                      padding: EdgeInsets.all(16),
                      child: Column(children: [
                        Text("Filho de exemplo"),
                      ]),
                    ),
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

e esse resultado:

Conclusão

Por não ter achado muita coisa igual é com os outros widgets do flutter enquanto eu estava tendo que implementar esse, achei que seria legal trazer o desenvolvimento del aqui, ainda mais com esse controle por botão e sempre assistindo mudança de estado dele. Foi algo interessante de implementar e me fez conhecer ainda mais o flutter.

CÓDIGO FONTE COMPLETO AQUI.

Recentemente foi aprovada a utilização do CMS Strapi aqui na empresa para poder delegar coisas simples como edição de texto, cor e imagens nas páginas de produto. Basicamente vamos entregar a linda dashboard do Strapi para a galera do marketing e deixar eles mesmos mudarem texto, cor e imagens na páginas sem a necessidade de um desenvolvedor (claro que com seus devidos cuidados). Isso ainda vai ser assunto para outro post aqui.

Quando fui apresentar o Strapi, uma feature que por padrão ele não tem foi requisitada: versionamento de conteúdo. Felizmente, ele tem um plugin que faz exatamente isso. Ao instalar esse plugin, percebi que o próprio autor faz um pequeno "hack" para sobrescrever o comportamento padrão do Strapi, ai entra o patch.

O que é um patch?

Um patch nada mais é do que uma representação das diferenças entre dois arquivos. Considerando os arquivos A e B, um patch dos arquivos A > B é uma descrição do que deve ser feito para transformar o arquivo A em B. Um exemplo de patch gerado pelo git diff:

diff --git a/foo.c b/foo.c
index 30cfd169..8de130c2 100644
--- a/foo.c
+++ b/foo.c
@@ -1,5 +1,5 @@
 #include <string.h>

 int check (char *string) {
-    return !strcmp(string, "ok");
+    return (string != NULL) && !strcmp(string, "ok");
 }

no topo vemos a sinalização que foi gerado pelo git diff e os tais aquivos A e B, logo após vemos identificações de linhas e conteúdos que devem ser adicionados ou removidos, sendo sinalizados por - e +. Não necessariamente um patch precisa ser e apenas um arquivo, como vocês podem ver, na primeira linha há uma identificação do nome dos arquivos que foram modificados, logo abaixo poderia ter a identificação de mais dois arquivos por exemplo e suas mudanças para transformar um no outro.

O que um patch tem a ver com um plugin do Strapi?

O plugin de versionamento de conteúdo que comentei é esse aqui, cumpre bem seu papel mesmo tendo algumas limitações. Se vocês forem nesse link, vão ver que que tem uma parte da documentação chamada "Override Save Button (Optional)", que basicamente explica como sobrescrever o comportamento do botão padrão de save do Strapi, para toda vez que tiver um novo save ele automaticamente criar uma nova versão e assim ter sucesso no versionamento. E ai você me pergunta: como ele sobrescreve isso?

Usando um patch

ele basicamente sobrescreve o componente do Strapi que faz esse funcionamento, como podemos ver na identificação no topo do arquivo que fala o que está sendo mudado

diff --git a/node_modules/@strapi/admin/admin/src/content manager/components/CollectionTypeFormWrapper/index.js b/node_modules/@strapi/admin/admin/src/content-manager/components/CollectionTypeFormWrapper/index.js

não é muito bom de ler, mas vemos que ele acessa o componente CollectionTypeFormWrapper dentro da node modules e ai sim começa a fazer as mudanças necessárias, colocando o comportamento desejado. Para aplicar esse patch ele usa uma lib chamada patch-package.

Sobrescrever algo dessa maneira é bom?

Bem.... O Strapi continua funcionando perfeitamente com o comportamento desejado e o nosso problema foi resolvido! Já que é algo tão pontual e que não interfere em nada no resto, acredito que não há problema nenhum. A própria dashboard do strapi permite algumas customizações, mas nada a esse nível. Já que o patch resolveu o problema, todo mundo sai feliz.

Conclusão

Eu cai nisso de paraquedas, tanto que só fui ver isso a fundo por que o patch que tem na documentação simplesmente parou de funcionar na versão 4.1.7 que é a que estou usando (o componente teve algumas mudanças, por isso o patch quebrou). Com isso, fui procurar e vi que tinha uma issue aberta no Github, como não tinha solução ainda, fui lá e adaptei o patch para funcionar na versão 4.1.17 e abri um pull request para atualizarem na documentação. Foi uma experiência legal.

Desde o final do ano passado o time em que participo no meu atual emprego vem se alinhando bastante em algumas ideias para a melhoria do nosso produto, e uma delas é a implementação de testes em todo o nosso sistema, desde o Backend até o Frontend, com testes unitários e de integração. Como isso já vem desde o ano passado, já tínhamos uma codebase de testes de integração, fazendo o fluxo de compra completo (pesquisar, selecionar um voo, preencher dados dos passageiros, dados de pagamento e finalizar compra). Tudo isso usando cypress. Foi me passada uma tarefa de criar mais testes, dessa vez para testar especificamente o que chamamos de "frame de pesquisa", que é onde nossos clientes fazem a pesquisa dos voos na home do site. Com isso, acabei me encontrando pela primeira vez com essa codebase que já tínhamos, estava bem estruturada até, mas tinham algumas coisas claras que poderíamos mudar para ficar algo mais fácil de codar e organizado. Após essas mudanças que fiz, venho mostrar para vocês o motivo pelo qual fiz isso e como

Adição de Typescript e estrutura atual de comandos

Sim, o projeto não estava em typescript. Foi a primeira coisa que fiz, instalar e configurar o typescript para ai sim começar a refatoração. Essa parte foi bem simples, sem mistério (se não conhece um jeito de fazer isso, consulte a documentação oficial). Após isso, parti para a reorganização dos comandos específicos de rotinas que já existiam (pesquisa, preenchimento de dados de passageiros, pagamento e etc). A pasta estava organizada da seguinte maneira:

Sendo:

• commands.js o arquivo que em teoria deveria ter comandos personalizados do cypress, mas não estava sendo utilizado;

• common.js contendo funções selecionar um voo, preencher dados de passageiros e etc. (o que eu não considero "common");

• desktop-workflow.js contendo funções de praticamente todo o fluxo de uma compra feita no desktop;

• index.js que em teoria deveria importar todos os comandos personalizados para serem usados sem a necessidade e importar funções nos seus arquivos de teste;

• mobile-workflow.js mesmo que o desktop-workflow.js mas para mobile;

• utils.js contendo todo tipo de função utilitária que possa imaginar, desde formatação de datas, até escolhas randômicas de dados de passageiros para preencher e finalizar a compra.

Para mim, tinham 3 problemas:

• Não utilização dos comandos personalizados que o cypress oferece. Se tínhamos um fluxo tão bem definido, por que não colocar funções como selecionar um voo ou preencher dados de um passageiro como algo que poderia ser usado pelo proprio cypress? Do mesmo jeito que usamos o cy.get() poderiamos usar um cy.selectFlight(). Essas funções já existiam, mas estavam sendo importadas nos nossos arquivos de teste e sendo chamadas como funções simples;

• Junção de muitas funções em um escopo abrangente. Bom, o arquivo desktop-workflow.js continha todo o fluxo que um cliente faria para comprar em nosso site, desde a pesquisa até a finalização da compra. Se a gente parar pra pensar, isso já está separando em um escopo, sendo dividido entre desktop ou mobile. Já é alguma separação, mas dá para melhorar. Como em qualquer e-commerce, você tem um fluxo muito bem definido sendo ele:

Pesquisa > Selecionar Produto > Preencher dados > Finalizar Compra

Com esse fluxo bem definido, temos uma nova separação de escopo para os nossos comandos. Ao fazer essa mudança, em vez de termos apenas essas duas separações entre mobile e desktop, a nível de código, teríamos uma separação de rotinas entre: pesquisa, seleção de produto, preenchimento e finalização de compra. Particularmente, acredito que com essa estruturação, fica mais fácil de entender o projeto e dar manutenção.

• Arquivo de utils muito grande. Como disse, o arquivo de utils levava todas as funções possíveis. Foi bem simples minha mudança, apenas separei ele em escopos menores, no caso dois: datas e dados de itinerário. Sendo dados de itinerário tudo que diz respeito a geração de dados randômicos para pesquisa, passageiro, pagamentos e etc.

Após identificar isso, fui implementar as mudanças.

Nova estrutura de comandos

Após minha pequena refatoração, a estrutura da pasta ficou assim:

Como podem ver, "resolvi" os três pontos principais que na minha concepção eram problemas. Talvez o que mais chamou sua atenção foram esses arquivos de tipagem, mas vou explicar o motivo deles ali.

Como eram feitos os comandos antigos

Antes os comandos eram funções simples do javascript, como esse abaixo:

export const fulfillContact = (email) => {
  cy.get('[name=name]').type(randomData('names'))
  cy.get('[name=email]').type(email)
  cy.get('#confirmation').type(email)
  cy.get('[name=phone]').type(randomData('phones'))
}

isso acarretava em ter que importar essa função dentro do arquivo de teste para ai sim poder utiliza-lá e ainda assim "às cegas" por ser javascript.

Como são feitos os comandos novos

Agora eles são feitos usando o Cypress.Commands.add(), que deixa eles nativos no cypress, podendo ser chamados através do cy:

Cypress.Commands.add('fulfillContact', (email: string) => {
  cy.get('[name=name]').type(randomData('names'))
  cy.get('[name=email]').type(email)
  cy.get('#confirmation').type(email)
  cy.get('[name=phone]').type(randomData('phones'))
})

já que agora ele é um comando customizado do cypress, podendo ser acessado direto do cy e estamos utilizando typescript, nada mais justo do que fazer uma tipagem personalizada, correto ? Pois aqui está o nosso types.d.ts:

// load type definitions from Cypress module
/// <reference types="cypress" />

declare namespace Cypress {
    interface Chainable {

      /**
      * Comando customizado para preencher campos de contato
      * @example cy.fulfillContact(caiogrossi6@gmail.com)
      */
      fulfillContact(email: string): Chainable<Element>
    }
}

com isso, alem de termos o auto-complete usando o cy, ainda teremos um pop-up do vscode escrito exatamente essa descrição que colocamos, uma espetáculo, não?

Considerações finais

Essa foi minha primeira aventura refatorando algo real de um produto real, mesmo não sendo uma refatoração grande e complexa, acredito que contribuiu para a legibilidade. Sempre prezei ao máximo pela organização do código e também de usar todas as features que estiverem disponíveis para facilitar o trabalho. Acredito que consegui alcançar isso com essa refatoração.

Se você é da área de desenvolvimento, provavelmente já ouviu falar do NestJS (Não NextJS!) em alguma propaganda do Youtube ou até mesmo em outros posts. Esse framework, que usa NodeJS por baixo dos panos e é fortemente inspirado no Angular, tem como principal motivação a proposta de uma arquitetura forte que permite a criação de aplicações escaláveis, fracamente acopladas e de fácil manutenção e teste. Como ele faz isso? Descobriremos nesse post !

Principais pilares

Das inúmeras funcionalidades que o NestJS te oferece, vou destacar as principais que serão utilizadas em praticamente todo projeto.

Modularização

Você provavelmente já ouviu esse termo em algum lugar, que nada mais é do que o próprio nome diz: separar a sua aplicação em módulos. Com essa prática, podemos separar as responsabilidades da nossa aplicação em diferentes módulos que depois podemos "conecta-los" para o compartilhamento de funcionalidades. O NestJS leva a modularização MUITO a sério, como pode ser visto nesse trecho da sua própria documentação:

Nós queremos enfatizar que módulos são fortemente recomendados como uma efetiva maneira de organizar seus componentes. Portanto, para a maiora das aplicações, a arquitetura resultante será de múltiplos módulos, cada um encapsulando uma série de funcionalidades.

Sem dúvidas, é um bom jeito de separar as responsabilidades da sua aplicação, deixando mais fácil uma futura manutenção e testes. Se você nem imagina como se parece um módulo do Nest, aqui está um exemplo simples:

import { Module } from '@nestjs/common';
import { CatsController } from './cats.controller';
import { CatsService } from './cats.service';
import { DogsModule } from '../dogs/dogs.module'

@Module({
  imports: [DogsModule],
  controllers: [CatsController],
  providers: [CatsService],
  exports: [CatsService]
})
export class CatsModule {}

Como no exemplo, todo módulo que você criar deve ter esse decorator "Module" que serve para o Nest saber que é um módulo e iniciar sua aplicação. Dentro do objeto que esse decorator "Module" recebe como argumento, é definido o que ele pode importar (normalmente outro módulo), controllers (o que veremos mais tarde), providers (que veremos mais tarde) e o que ele pode exportar (normalmente um serviço). No final, exportamos uma classe com o nome do nosso módulo.

Em um grande projeto onde hajam muitos módulos, fica chato toda hora ter que escrever tudo isso para a criação. Por isso, a Nest CLI resolve esse problema para nós, criando toda a estrutura de um módulo, controllers e services passando somente o nome que desejamos. Para saber mais sobre módulos, visite a documentação oficial.

Controllers

Os famosos controlles, são responsáveis por lidarem com as requisições do client e retornar suas devidas repostas. Um exemplo simples de controller no Nest pode ser esse:

import { Controller, Get } from '@nestjs/common';

@Controller('cats')
export class CatsController {
  @Get('index')
  findAll(): string {
    return 'This action returns all cats';
  }
}

Para criarmos esse simples controller precisamos importar um decorator "Controller" e "Get" (parecido com o que fizemos para o módulo). O decorator de "Controller" como o próprio nome já diz, serve para dizer ao Nest que isso será um controller. O "Get" serve para dizer qual será o método http da rota desse controller.

Você desse ter percebido que passamos como argumento a string "cats" para o decorator de controller, isso serve para definir a rota que esse controller irá lidar. Todas as requisições que tenham a url por exemplo "http://localhost:3000/cats" irão cair nesse controller. A mesma coisa serve para o argumento que passamos para o decorator do método http, no caso "index." Isso quer dizer que uma requisição com a rota "http://localhost:3000/cats/index" irá ser tratada pela função findAll(), que no momento apenas nos retorna uma string. Assim que é feito o roteamento no NestJs, interessante né?

Claro que isso que estou apresentando é o básico dos controllers, para contruir algo real você precisará de um pouco mais que isso, como receber os dados da requisição como parâmetro da função que você definir para lidar com "X" rota, ou definir quais rotas da sua aplicação serão protegidas ou não. Para saber mais sobre controllers no Nest, visite a documentação oficial.

Providers

Providers são conceitos importantíssimos do Nest, já que neles que ficam praticamente toda a lógica da sua aplicação. A ideia principal dos providers é trabalhar com injeção de dependências, podendo compartilhar por toda a aplicação funcionalidades de diferentes módulos. O principal provider que veremos são os "serviços". Vamos criar um simples provider (serviço), ficará algo assim:

import { Injectable } from '@nestjs/common';

@Injectable()
export class CatsService {

  sayMeow() {
    return "Meow";
  }

  scratch() {
    return "Scratched!";
  }
}

claro que esse exemplo é muito simples, mas é somente para mostrar que a lógica, as regras de negócio devem ser delegadas para o serviço. Um exemplo mais elaborado seria um serviço para lidar com a rota que criamos no nosso controller. Nós tinhamos uma rota "cats/index", correto? Essa rota com certeza seria tratada por uma função do nosso "CatsService", como por exemplo:

import {  Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Cat } from './cat.entity';

@Injectable()
export class CatService {
  constructor(
    @InjectRepository(Cat)
    private catsRepository: Repository<Cat>
  ) {}

  async findAll() {
    return await this.catsRepository.findAll();
  }

esse exemplo mesmo continuando simples, já é algo funcional. Apenas injetamos um repositório de Cat que foi feito com TypeORM no construtor da classe (não vou abordar a configuração de repositórios TypeORM neste post, se quiser ver mais sobre isso acesse a documentação oficial. Apenas tenha em mente que estou injetando um certo repositório TypeORM nesse serviço para usar suas funcionalidades.) e declaramos uma função "findAll" que nos retorna todos os items desse repositório. Ainda um simples exemplo de serviço, mas funcional.

Injeção de dependências

Por último, mas não menos importante, a famosa injeção de dependêcias. Na última sessão você deve ter percebido que antes de declararmos nossa classe de serviço, colocamos um decorator "Injectable", isso quer dizer que nossa classe aceita a injeção de dependências. Isso que estamos fazendo, injetando o repostório por meio do construtor da classe, voilà! Por enquanto apenas injetamos um respositório, mas podemos injetar serviços em outros serviços também, que é o mais comum! Supondo que temos o módulo "dog", que se parece com isso:

import { Module } from '@nestjs/common';
import { DogsController } from './dogs.controller';
import { DogsService } from './dogs.service';

@Module({
  controllers: [DogsController],
  providers: [DogsService],
  exports: [DogsService]
})
export class DogsModule {}

você já sabe o que isso significa, mas preste atenção que estamos exportando o serviço desse módulo. Mas como importamos ele em outro módulo? Simples assim:

import { Module } from '@nestjs/common';
import { CatsController } from './cats.controller';
import { CatsService } from './cats.service';
import { DogsModule } from '../dogs/dogs.module'

@Module({
  imports: [DogsModule],
  controllers: [CatsController],
  providers: [CatsService],
})
export class CatsModule {}

preste atenção que estamos importando o "DogsModule", ou seja, no "CatsModule" temos acesso a tudo que o "DogsModule" exportou! Vou dar um exemplo de como injetar o serviço de "dogs" no serviço de "cats":

import {  Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Cat } from './cat.entity';
import { DogsService } from '../dogs/dogs.service'

@Injectable()
export class CatService {
  constructor(
    @InjectRepository(Cat)
    private catsRepository: Repository<Cat>,
    private readonly dogsService: DogsService,
  ) {}

  async findAll() {
    return await this.catsRepository.findAll();
  }

aqui não estamos usando nenhuma função do serviço "dogs", mas poderiamos usar facilmente dentro de qualquer função com "this.dogsService.nomeDaFunção()".

Outro exemplo importande disso é quando queremos usar uma função do serviço dentro do controller, que é muito feito. Um exemplo:

import { Controller, Get } from '@nestjs/common';
import { CatsService } from './cats.service';

@Controller('cats')
export class CatsController {
  constructor(private catsService: CatsService) {}

  @Get('index')
  async findAll(): string {
    return await this.catsService.findAll();
  }
}

aqui injetamos o serviço do próprio módulo para poder usar nas rotas do controller, passando coisas mais complexas para o nosso serviço lidar. Basicamente, isso é injeção de dependências no NestJs!

Considerações finais

Com esse post espero ter ajudado você a entender as funcionalidades básicas do Nest e de como ele se comportar e talvez até motivado a testar esse framework. Se você veio do Angular, será bem mais fácil de aprender ele já que é fortemente inspirado (a sintaxe por exemplo). Caso você queira ver um exemplo de aplicação construid em Nest, tem esse meu projeto que foi o que me motivou a fazer esse post. A documentação oficial do Nest pode ser encontrada aqui, onde há tudo que você precisa saber para construir aplicações reais.

Até a próxima !

Estava no meio de um projeto pessoal que com certeza vai ser um dos maiores e que me deu mais trabalho. Nesse projeto, precisei criar um context para guardar os itens que o usuário colocaria no carrinho. Criar um contexto muita gente já sabe, por isso aqui vou mostrar como criar e testar um, que é um a mais que pode facilitar muito sua vida no futuro.

Tipando o contexto

Nesse ponto já presumo que você já tem todo um ambiente de desenvolvimento configurado e o projeto em andamento (em React, claro).

Primeiro, crie uma pasta nomeada 'hooks' dentro 'src' e outra pasta dentro dela com o nome do contexto que você vai criar e um aquivo 'index.tsx', o meu ficou assim:

depois disso podemos começar a tipagem.

Para criarmos um contexto e usa-lo como um hook, vamos precisar das seguintes importações no nosso arquivo 'index.tsx' que acabamos de criar.

import React, { createContext, useContext } from 'react';

Se você estiver usando Typescript (o que eu espero que sim por que facilita muito a vida) precisaremos criar dois tipos:

• O tipo das propriedades que o nosso PROVIDER vai receber;
• O tipo das propriedades que ficarão armazenadas no nosso contexto, ou seja, as informações que desejamos compartilhar entre os componentes;

Primeiro vamos ao tipo do provider que é o mais simples, o seu deve se parece com algo assim:

type ShoppingListProviderProps = {
  children: React.ReactNode;
};

o meu contexto se chama "ShoppingList", substitua no seu projeto pelo nome do seu contexto para fazer sentido. A propriedade não muda, nosso provider recebe um 'children', ou seja, todos os componentes que tiverem nesse children terão acesso as informações do nosso contexto.

O nosso proximo tipo é o dos dados que o nosso contexto vai armazenar/compartilhar, o meu se parece com algo assim:

export type ListItem = {
  id: string;
  name: string;
  quantity: number;
};

export type ShoppingListContextData = {
  items: ListItem[];
  onAdd: (id: string, name: string, quantity: number) => void;
  onIncrease: (id: string) => void;
  onRemove: (id: string) => void;
  onDecrease: (id: string) => void;
  isInList: (id: string) => boolean;
};

meu contexto tem um dado 'items' (onde ficará armazenado os itens que meu usuário colocar no carrinho), onAdd(responsável por adicionar os itens ao meu carrinho), onIncrease(aumenta a quatidade de certo item no meu carrinho), onDecrease(diminui a quantidade de certo item no meu carrinho) e inList(confere se um item pertecence ou não ao meu carrinho). Lembrando que essa tipagem faz sentido para as propriedades do MEU CONTEXTO, tipe as propriedades de acordo com o seu. Agora que já temos a nossa tipagem, vamos criar o contexto.

Criando o contexto

Agora vamos criar o nosso contexto usando as nossas importações, ficará algo assim:

const ShoppingListContext = createContext<ShoppingListContextData>(
  ShoppingListContextDefaultValues
);

repare que eu tipo as propriedades com o 'type' que criamos no bloco anterior e que coloco como valor inicial um 'ShoppingListContextDefaultValues' que se parece com isso:

const ShoppingListContextDefaultValues = {
  items: [],
  onAdd: () => null,
  onIncrease: () => null,
  onRemove: () => null,
  onDecrease: () => null,
  isInList: () => false
};

apenas coloco valores padrões que não vão fazer diferença na prática, faço isso por que o hook createContext pede valores iniciais. Se você nao quiser criar esse objeto, pode fazer assim também:

const ShoppingListContext = createContext(
  {} as ShoppingListContextData
);

com isso, já criamos o nosso contexto e agora devemos criar as propriedades que ele possui.

Criando as propriedades do contexto

Quando criamos um contexto em React, ele tem uma propriedade chamada 'Provider' que pode ser chamada como um component react, algo assim:

<ShoppingListContext.Provider value={{ }}>
      {children}
</ShoppingListContext.Provider>

como já disse antes, todos os componentes que estiverem dentro de 'children' vão poder acessar as propriedades, o 'value' que devemos passar são os valores/propriedades em sí. Por isso, vamos começar a criar as nossas propriedades.

Como eu armazeno itens no meu contexto, vou precisar do hook useState que vou importar no meu arquivo ficando assim:

import React, { createContext, useContext, useState } from 'react';

As minhas propriedades vão ficar assim:

items

const [items, setItems] = useState<ListItem[]>([]);

onAdd

const onAdd = (id: string, name: string, quantity: number) => {
    setItems([...items, { id, name, quantity }]);
  };

onRemove

const onRemove = (id: string) => {
    const filteredItems = items.filter((item) => item.id !== id);
    setItems(filteredItems);
  };

onIncrease

 const onIncrease = (id: string) => {
    const itemsArray = [...items];

    for (let i = 0; i < itemsArray.length; i++) {
      const item = itemsArray[i];

      if (item.id == id) {
        item.quantity++;
        break;
      }
    }

    setItems(itemsArray);
  };

onDecrease

const onDecrease = (id: string) => {
    const itemsArray = [...items];

    for (let i = 0; i < itemsArray.length; i++) {
      const item = itemsArray[i];

      if (item.id == id) {
        item.quantity--;
        break;
      }
    }

    setItems(itemsArray);
  };

isInList

const isInList = (id: string) => {
    return items.some((item) => item.id === id);
  };

não vou entrar muito em detalhes de como cada função funciona, mas o importante é saber o que cada uma faz que já descrevi anteriormente.

Depois de criar as propriedades, precisamos criar um componente de provider que vai conter as nossa propriedades e no final retornanar um ShoppingList.Provider com o nosso children e as propriedades como no parâmetro value como já mostrado. Fazemos isso para guardar tudo que está relacionado ao contexto dentro do seu arquivo. No final teremos algo assim:

const ShoppingListProvider = ({ children }: ShoppingListProviderProps) => {
  const [items, setItems] = useState<ListItem[]>([]);

  const onAdd = (id: string, name: string, quantity: number) => {
    setItems([...items, { id, name, quantity }]);
  };

  const onRemove = (id: string) => {
    const filteredItems = items.filter((item) => item.id !== id);
    setItems(filteredItems);
  };

  const onIncrease = (id: string) => {
    const itemsArray = [...items];

    for (let i = 0; i < itemsArray.length; i++) {
      const item = itemsArray[i];

      if (item.id == id) {
        item.quantity++;
        break;
      }
    }

    setItems(itemsArray);
  };

  const onDecrease = (id: string) => {
    const itemsArray = [...items];

    for (let i = 0; i < itemsArray.length; i++) {
      const item = itemsArray[i];

      if (item.id == id) {
        item.quantity--;
        break;
      }
    }

    setItems(itemsArray);
  };

  const isInList = (id: string) => {
    return items.some((item) => item.id === id);
  };

  return (
    <ShoppingListContext.Provider
      value={{ items, onAdd, onDecrease, onRemove, onIncrease, isInList }}
    >
      {children}
    </ShoppingListContext.Provider>
  );
};

esse nosso componente será responsavel por ser o nosso provider. Esse component 'ShoppingListProvider' nós podemos importa-lo em qualquer lugar do nosso arquivo para definir quais componentes vão poder acessar essas propriedades. Antes disso, vamos criar um hook customizado que ficará assim:

const useShoppingList = () => useContext(ShoppingListContext);

esse hook é apenas para facilitar a utlização do nosso contexto, apenas uma função que retorna o nosso contexto.

Um exemplo de comos podemos utilizar esse 'ShoppingListProvider' é assim:

import { ShoppingListProvider } from 'hooks/use-shoppinglist';

export default function Home() {
  return (
    <ShoppingListProvider>
      <ComponentesDaHome />
    </ShoppingListProvider>
  );
}

Esse componente 'Home' como o nome já diz é o meu componte da página Home, ao envolver o retorno dele como o meu provider, TODOS os componentes que estiverem dentro dele podem acessar as propriedades, pelo nosso hook personalizado 'useShoppingList' desse jeito:

const {
    isInList,
    items,
    onAdd,
    onDecrease,
    onIncrease,
    onRemove
  } = useShoppingList();

e claro, precisamos importa-lo no nosso arquivo. Agora que já temos um contexto totalmente funcional, precisamos testa-lo que é o que vamos fazer no próximo bloco.

Testando o nosso contexto

Talvez você não esteja acostumado com testes em cotextos/hooks (como eu não estava), mas por ser uma parte importantíssima do nosso projeto ele pode e DEVE ser testado. Como praticamente todo os projetos React já vem com o jest e a react testing library instalados (que é o que vamos usar) vou presumir que você já tem isso configurado, se não tiver vá ate o link da testing library para configurar seu ambiente e ao do jest. Com isso podemos começar.

Instalando pacote

Como vamos testar um hook, precisamos de um pacote extra da testing library que fará isso para gente, por isso instale o pacote testing-library/react-hooks:

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

ou

yarn add @testing-library/react-hooks -D

após isso, crie um arquivo de teste dentro do diretório do seu contexto.

No nosso arquivo de teste vamos precisar importar o nosso provider, nosso hook personalizado, a função 'renderHook' do pacote que acabamos de instalar e uma função helper do proprio react para testes , ficará assim:

import {
  useShoppingList,
  ShoppingListProvider,
  ShoppingListProviderProps
} from '.';

import { renderHook } from '@testing-library/react-hooks';
import { act } from 'react-dom/test-utils

após isso já podemos abrir o nosso bloco describe para testes e iniciar. Para testar o nosso hook, precisamos ver o que necessita de testes (no meu caso são as 5 funções) e aí sim começar. Com isso, vou testar primeiro a função de adicionar um item que deve ficar assim:

describe('useShoppinglist', () => {
  it('should add one item to the list', () => {
    const wrapper = ({ children }: ShoppingListProviderProps) => (
      <ShoppingListProvider>{children}</ShoppingListProvider>
    );

    const { result } = renderHook(() => useShoppingList(), {
      wrapper
    });

    act(() => {
      result.current.onAdd('1', 'cake', 5);
    });

    expect(result.current.items).toStrictEqual([
      { id: '1', name: 'cake', quantity: 5 }
    ]);
  });
});

antes de mais nada precisamos criar um 'wrapper' para definir onde o nosso hook será renderizado, faço isso nas primeiras linhas do bloco 'it' apenas criando uma função e retornando o nosso provider com um children. Após isso, precisamos usar a função 'renderHook' para fazer o nosso hook ficar utilizavel dentro do nosso teste. Essa função recebe como primeiro parâmentro uma função que retorna o nosso hook e como segundo um objeto que deve ter dentro dele o nosso 'wrapper' que por sua vez TEM que ter o provider englobando o retorno.

Esse hook nos retorna um atributo 'result' que é onde está todas as nossas propriedades do contexto. Para testarmos a função de 'onAdd' bastar chamar result.current.onAdd('1', 'cake', 5) (dentro do 'result' nós temos esse atributo 'current' que se refere ano nosso hook, tanto que podemos acessar todas as nossas propriedades a partir de 'current'). Usamos essa função 'act' importada de 'react-dom/test-utils' por ser recomendada pela própria documentação do react quando fazemos mudança de estados em testes, leia mais aqui.

Após isso tudo, podemos de fato testar se a nossa função 'onAdd' realmente funcionou chamando a função 'expect', que recebe o que queremos analisar (no caso os 'items' do nosso contexto) e o que queremos fazer, nesse caso eu quero que ele seja estritamente igual a um array que contém um objeto com as propriedades exatamente iguais as que eu adicionei. Não vou testar as outras quatro funções pois vocês já imaginam como dever ser os testes e meu objetivo era mostrar como testas hooks, e não funções específicas do meu contexto.

Conclusão

Após essa gigante dissertação, aprendemos a como criar um contexto com um hook personalizado no React e ainda mais testar tudo isso, o que é de extrema importância. Agora que você já saber fazer ambos, não perca tempo e adicione os testes nos seus hooks personalizados de imediato !!!!

Até a proxima

Ontem estava quase finalizando um projeto pessoal meu que consiste em consumir uma API de tempo meteorológico e mostrar os dados como temperatura, imagem que remeta ao tempo, pressão do ar, visibilidade e etc. O projeto final pode ser encontrado aqui no meu Github. Não sei vocês, mas quando pesquiso alguma localização em qualquer aplicação o mínimo que eu espero é que sejam sugeridos lugares ao mesmo tempo que digito, que é algo que facilita muito. Com isso procurei como implementar a API de lugares do google no meu projeto (que faz exatamente isso) e cheguei nesse pacote e como não encontrei modos de utiliza-lo além da própria documentação no npm, resolvi escrever esse post como algo complementar.

Criando uma conta no google cloud e ativando a api

Antes de mais nada, você precisará de uma conta no google e de acesso a API de places. Vá ate o site do google cloud faça login e os primeiros passos(a parte de adicionar um cartão é OBRIGATÓRIA, você terá um saldo de 300 dólares para poder usar o que dá e sobre). Após fazer o login e os primeiros passos, você será redirecionado para o console de sua conta. Já no console da sua conta, provavelmente terá um projeto inicial, se não tiver, crie um clicando do lado do logo da cloud na barra de navegação.

Após a criação do seu projeto, clique em API's na tela inicial (vai ser algo como essa imagem abaixo)

Clique em "biblioteca" na sidebar esquerda. Pesquise por "Places API" e "Maps Javascript API", ative as duas. Após ativar as duas API's, em "credencias" na mesma sidebar e crie uma credencial. Pronto, você já tem as API's que precisamos ativadas e uma credencial para fazer a consulta. Agora vamos para o código.

Adicionando o script do google no nosso HTML

Após a criação da sua key e ativação das API's, vamos ao código. Antes de tudo, no seu index.html (se tiver utilizando React), insira a seguinte linha de código no final do body: <script src="https://maps.googleapis.com/maps/api/js?key=SUA-KEY-AQUI&libraries=places"></script>, mas claro substituindo "SUA-KEY-AQUI" para a credencial que criamos na sessão anterior. Após isso, estamos prontos para usar o pacote.

Utilizando o pacote use-places-autocomplete

Para usarmos o pacote, primeiro vamos instalar com yarn add use-places-autocomplete, e se tiver usando Typescript adicione yarn add -D @types/googlemaps. Com isso, já temos acesso ao nosso hook. Para importa-lo adicione import usePlacesAutocomplete from 'use-places-autocomplete'; no topo de seu projeto.

Agora vamos chamar o hook para usar suas funções, para chamar faça igual a imagem abaixo

Onde temos:

• ready: define se está pronta para ser chamada;
• status: o status da chamada que fizemos;
• value: o valor do input que estamos digitando ;
• data: as sugestões dos lugares;
• clearSuggestions: limpar as sugestões;
• setValue: para mudar o valor do input;

Agora vamos para configuração das tags

Configurando o input e criando função handleInput

Para configurar o input, coloque as propriedades como está na imagem abaixo:

E para função de handleInput:

Já temos nosso input e a função handleInput configurada, vamos para renderizar as sugestões.

Renderizando as sugestões

Para renderizar as sugestões, precisamos usar o status que resgatamos do nosso hook. Fazemos desse jeito:

Aqui estamos verificando a o valor de status, se for 'OK' chamamos a função renderSuggestions. S.PlacesList é um componente que eu criei usando styled components, é uma ul com algumas estilizações.

Agora vamos para a função renderSuggestions que é definida assim:

Nessa função, fazemos uma map na data que é o que a API do google envia para gente e fazemos um 'destructuring', pegando as propriedades places_id(para ser usada como key do componente) e main_text e secondary_text que é realmente o texto dos lugares sugeridos.

Com essas informações em mãos, retornamos um S.PlaceItem (que é uma li criada com styled components) com uma key (o nosso place_id) e o texto primário e secundário das nossas sugestões. E como você percebeu, adicionamos uma função handleSelect na propriedade onClick que é usada para resgatar o valor do lugar que clicamos.

Selecionando um lugar das nossas sugestões

Agora so falta função de handleSelect que é uma implementação bem simples como vocês podem ver abaixo:

onde apenas pegamos o valor que é mandado e o atribuimos ao value, logo depois usamos a função clearSuggestions que resgatamos do nosso hook. Pronto, tudo funcionando já!

Resgatando latitude e longitude

Somente o nome do lugar pode não ser muito útil, mas podemos tambem resgatar a latitude e longitude do lugar que selecionamos. Para isso, adicione getGeocode e getLatLng as importações do use-places-autocomplete (entre chaves). Com essas funções podemos resgatar a latitude e longitude adicionando esse seguinte trecho de código a nossa função handleSelect:

onde usamos o valor que recebemos na handleSelect ao chamar a função getGeoCode e o resultado dessa função usamos como parâmetro para chamar getLatLng e quando fazemos o destructuring, conseguimos o valor de lat de lng. Pronto, já temos uma informação a mais.

Finalização

Espero que esse pequeno tutorial tenha ajudado alguém, sendo na parte de acesso a API do google ou na utilização do pacote. Para mais informações você pode acessar a documentação do pacote.