Receita3a - Formulário de Pesquisa

Objeto: criação de uma página que é construída com base em interação com com um sistema externo, usado como base de dados. A interação com o sistema externo é realizada no servidor, ou no "back-end", nome mais moderninho. Um formulário é usado para enviar dados do navegador ao servidor.

Principais termos técnicos abordados: NextJS, fetch, async, await, JavaScript, HTML 

Requisitos para as instruções funcionarem: ter um projeto NextJS aberto e configurado

Requisitos para compreensão das instruções: noções bem básicas de programação, HTML e NextJS

Como ler essa receita: instruções, dentro dos passos da receita e que requerem ação sua no computador, estarão escritas em cor azul. Comentários sobre os passos estarão em fonte normal, cor preta. Comandos, código-fonte, termos técnicos ou configuração explícita, estarão com fonte diferenciada.

Observação: eventuais instruções de terminal serão comandos Linux. Adapte caso esteja usando outro sistema operacional

Introdução

Partindo do resultado final da receita anterior, a gente tem um app web que, no back-end, é capaz de receber requisições de filmes, com uma chave de pesquisa por título, e produzir uma página web de acordo com a pesquisa, através da interação com um sistema externo via API. 

A gente passa o parâmetro de pesquisa através da URL, no navegador, algo como...

http://localhost:3000/movies?chaveDePesquisa=city

... sendo que não é nada razoável que a gente solicite ao usuário do nosso app web que vá lá no espaço da URL, no navegador, empurre um ponto de interrogação depois do endereço, depois o nome chaveDePesquisa, depois um sinal de igualdade e depois a chave de pesquisa em si.

Ninguém há de usar um sistema assim!

Isso tem que continuar sendo feito para nosso componente lá no back-end receber os dados e realizar a pesquisa, sendo que isso tem que ser feito por debaixo dos panos. 

E o jeito de fazer isso por debaixo dos panos é usando formulários.

Vamos tratar disso nesta receita, e vamos tratar disso usando o componente <Form> do Next JS em vez da tradicional marca <form> do HTML.

Passo 1

Abrir o sistema da receita anterior no VS Code ou na IDE. 

Digite... 

pnpm dev 

no terminal, a partir do diretório base de seu projeto, para subir o servidor. 

Se você acessar a URL no navegador...

http://localhost:3000/movies?chaveDePesquisa=city

...deve ver algo parecido com...

Em seguida, crie uma nova rota movieSearch - ou seja, crie um diretório app/movieSearch e um arquivo page.js dentro dele.

Passo 2

Deixe o arquivo page.js com o seguinte conteúdo:

import Form from "next/form"

export default async function MovieForm(){

    return (

        <Form action="/movies">

            <label htmlFor="idTitleSearchKey">Título</label>            

            <input id="idTitleSearchKey" name="titleSearchKey"/>

            <button type="submit">Pesquisar</button>

        </Form>

    )

}

Mais caldo de cana com pastel do que isso, impossível.

A gente importa uma marcar Form de uma biblioteca interna do próprio Next JS - ou seja, não precisamos acrescentar nenhuma biblioteca extra.

A propriedade action dessa marca <Form> a gente preenche com a rota que criamos na receita anterior e que já funciona - /movies.

Dentro do <Form> a gente cria um <input>, que é a marca para um campo de texto simples. E na propriedade name do <input> a gente escreve exatamente o nome  do parâmetro que o componente na rota /movies entende: titleSearchKey. Se errar uma letrinha nessas coisas, dá problema, então se ligue. Por fim, acrescentamos uma marca <button> para podermos enviar o formulário. Tudo o mais é auto-explicativo.

Agora acesse http://localhost:3000/movieSearch e você deve ver algo como...

Preencha o campo de texto com Freedom (ou outra palavra de preferência), acione o botão Pesquisar, e você deve ver algo como... 

Para Saber Mais

Na página oficial da criança: https://nextjs.org/docs/app/api-reference/components/form

Exercícios

1. Faça um formulário com mais um campo de pesquisa.

2. (mini-desafio) Use seus conhecimentos das receitas anteriores e faça com que o formulário apareça na mesma página em que são exibidos os resultados. Ademais, a parte da página que exibe o formulário não deve ser recarregada após submetermos o formulário - apenas a parte que exibe o conteúdo da pesquisa deve ser recarregada, pois não faz nenhum sentido reconstruir o formulário para que ele fique exatamente como já estava. Não copie/cole nenhum componente das receitas anteriores. Importe, se for preciso. Nada de reinventar a roda. Vai precisar de 1 real e 99 de desenrolômetro, mas você vai ver que a solução é bem simples.