Na primeira parte deste tutorial, vimos como implementar a funcionalidade de login. Agora, vamos para a funcionalidade de inscrição.
Começando
Vamos começar clonando o repositório GitHub da primeira parte do tutorial.
1 |
git clone https://github.com/tutsplus/create-a-blogging-app-using-react |
Depois que o diretório for clonado, navegue até o diretório do projeto e instale as dependências necessárias.
1 |
cd my-blog |
2 |
npm install |
E, você deve ser capaz de ver o aplicativo em https://localhost:3000
E, o servidor expresso deve estar rodando em http://localhost:5000
O servidor
Anteriormente, vimos como GET dados de login do nosso banco de dados PSQL. No entanto, você tem a liberdade de escolher qualquer banco de dados para construir a tabela de funcionários. MongoDB é outra escolha popular.
Para se inscrever, precisamos postar dados no banco de dados. Para conseguir isso, temos que introduzir o seguinte trecho de código em app.js. O snippet a seguir irá inserir um novo usuário no users mesa. Se algo der errado durante o insertionum error será lançado.
1 |
app.post('/api/posts/userprofiletodb', (req, res, next) => { |
2 |
const valores = [req.email, |
3 |
req.pwd] |
4 |
pool.query(`INSERT INTO users(username, email, pwd, date_created) |
5 |
VALUES($1, $1, $2, NOW())
|
6 |
ON CONFLICT DO NOTHING`, values, |
7 |
(q_err, q_res) => { |
8 |
if(q_err) return next(q_err); |
9 |
res.json(q_res.rows) |
10 |
})
|
11 |
})
|
O cliente
Como estamos usando o Functional React Component, useState e useReact nos ajudará a gerenciar o estado do componente.
Capturando valores
Para cada campo do formulário de cadastro, teremos uma variável de estado para escutar suas alterações. Por padrão, esses valores estão vazios.
1 |
const [email, setEmail] = useState('') |
2 |
const [password, setPassword] = useState('') |
O e-mail e a senha definidos usando useState deve estar vinculado aos elementos do formulário. Isso pode ser obtido facilmente usando o value propriedade.
1 |
|
2 |
|
E é importante alterar o valor do estado de e-mail e senha na entrada do usuário. Isso pode ser conseguido usando o onChange propriedade. Quando um usuário insere um valor no campo de e-mail, o handleEmailChange função será chamada e definir o valor do estado de e-mail, usando o setEmail método.
Esta é a parte mais interessante de useState em componentes funcionais do React. O estado é inicializado como um par: uma variável e uma função que pode ser chamada para definir o valor da variável. No nosso caso, email é a variável e setEmail é a função para atribuir um valor ao email.
1 |
const handleEmailChange = (event) => { |
2 |
setEmail(event.target.value) |
3 |
}
|
4 |
|
5 |
|
6 |
<input type="text" id="inputEmail" value={email} onChange={handleEmailChange} className="form-control" placeholder="Email" required autoFocus /> |
7 |
|
A lógica acima pode ser aplicada ao campo de senha.
1 |
const handlePasswordChange = (event) => { |
2 |
setPassword(event.target.value) |
3 |
}
|
4 |
|
5 |
<input type="password" id="inputPassword" value={password} onChange={handlePasswordChange} className="form-control" placeholder="Password" required /> |
6 |
|
Validando alterações
Uma das maiores vantagens em usar elementos nativos é a validação.
Quando o tipo do campo de entrada for email, o elemento nativo valida se os dados inseridos são válidos ou não. Por exemplo, se o e-mail inserido for inválido, um pop-up nativo aparecerá quando o usuário clicar no submit botão.
Da mesma forma, podemos fixar o número mínimo de caracteres a serem inseridos em um campo usando o minlength propriedade do elemento de entrada. Essa verificação geraria um erro se o usuário inserisse menos caracteres. Um dos lugares onde podemos usar essa verificação é na senha.
1 |
|
2 |
|
Inscrever-se
Se o usuário inseriu os dados corretos, o cadastro post chamada pode ser feita.
Defina um método de inscrição chamado handleSubmit. Dentro de handleSubmit método, fazer uma chamada de método post para o signup Ponto de extremidade da API. Aqui, estou usando a biblioteca Axios para buscar.
1 |
const handleSubmit = () => { |
2 |
var data = new FormData(); |
3 |
data.append('email', email); |
4 |
data.append('pwd', password); |
5 |
|
6 |
var config = { |
7 |
method: 'get', |
8 |
url: `http://localhost:5000/api/get/userprofilefromdb?email=${email}`, |
9 |
headers: { |
10 |
...data.getHeaders() |
11 |
},
|
12 |
data : data |
13 |
};
|
14 |
|
15 |
axios(config) |
16 |
.then(function (response) { |
17 |
// get access to the return data from the POST API endpoint
|
18 |
const data = response.data |
19 |
navigate("/landing") |
20 |
})
|
21 |
.catch(function (error) { |
22 |
setError(error.message) |
23 |
});
|
24 |
}
|
Muitas vezes, os desenvolvedores se perguntam se devem escolher Axios ou fetch para seu aplicativo de página única. Axios costuma ser a escolha comum. Aqui estão algumas razões.
- Axios é muito mais seguro do que a Fetch API. O Axios vem com proteção contra falsificação entre sites.
-
fetchnão é suportado em navegadores IE mais antigos. Isso significa que um polyfill deve ser escrito se for provável que seu aplicativo seja aberto em navegadores mais antigos. - Solicitações feitas usando
fetchnão pode ser abortado. -
fetchnão permite timeouts de solicitação. A lógica de tempo limite deve ser implementada pelo aplicativo do lado do cliente.
A página de inscrição em ação
Com todos esses elementos juntos, você verá o Inscrever-se página conforme abaixo.
Se o endpoint da API retornar uma resposta, o usuário poderá ser redirecionado para o /landing página do blog. E, se o terminal da API gerar um erro, o erro será exibido na tela.
Uma demonstração de trabalho
Aqui está uma demonstração de trabalho no StackBlitz para sua referência.
Embrulhando-o
Nesta parte do tutorial, você viu como implementar o processo de inscrição do usuário. Vimos diferentes tipos de validações, diferentes formas de chamar um endpoint e uma simples mudança no lado do servidor.
Na próxima parte do tutorial, você implementará a funcionalidade de adição de postagem e exibição de página de postagem.
