Dominar a autenticação de API da Web com o Parse – SDK Javascript e versões GraphQL

Muitos aplicativos, especialmente sites, precisam restringir o acesso ao conteúdo, e ter contas de usuário que mostrem apenas as informações relevantes para esse usuário de forma segura é a maneira mais popular de fazer isso.

Hoje, aprenderemos a implementar a funcionalidade de login em uma página HTML já existente, escrevendo pouquíssimo código e com o Parse fazendo todo o trabalho pesado para você.

Usaremos duas tecnologias distintas que você pode escolher: o Javascript SDK e o GraphQL por meio do Javascript.

O GraphQL é nossa nova tecnologia brilhante que acabou de ser lançada, e meu objetivo é comparar as duas maneiras de fazer a mesma coisa, para que você possa escolher a que mais lhe agrada.
ALERTA DE SPOILER!!! Tenho certeza de que você gostará mais do GraphQL…

Ele já tem todos os arquivos necessários para exibir visualmente o arquivo, mas não tem a funcionalidade que adicionaremos.

Se quiser saber mais sobre o GraphQL, dê uma olhada nesta postagem: O que é GraphQL

Este será um artigo bastante extenso, portanto, deixe-me mostrar o que você aprenderá exatamente, por capítulo:

1. Configuração de sua hospedagem na Web na Back4app
2. Habilitar o uso do GraphQL
3. Implantar seu primeiro site
4. Criar seu primeiro arquivo Javascript
5. Incorporar o SDK do Parse
6. Configurar e instanciar o SDK em seu código
7. Adicionar usuários graficamente
8. Usar o SDK de Javascript para registrar um usuário
9. Teste o registro com seu site (valores codificados)
10. Escrever código para ler formulários e aplicar ao seu código Javascript
11. Testar o registro com seu site (valores dinâmicos)
12. Criar o processo de login com o Javascript SDK
13. Teste o login com seu site (valores dinâmicos)
14. Conclusão da parte do Javascript SDK
15. Introdução ao GraphQL
16. O que você precisará para usar o GraphQL
17. Instalação de ferramentas de que você precisará
18. Uma explicação rápida de como geraremos o código para o frontend
19. Uso de módulos NPM em seu código NodeJS
20. Introdução às consultas e mutações no GraphQL
21. Consultas
22. Mutações
23. Criar seu próprio método GraphQL SingUp
24. Criar seu próprio método GraphQL LogIn
25. Use o Browserify para converter seu código NodeJS em um código compatível com o front-end
26. Inclua esse código em seu arquivo HTML
27. Codifique funções Javascript para chamar o código gerado pelo Browserify
28. Teste seu GraphQL SignUp e Login
29. Conclusão da parte do GraphQL

1. Primeiros passos

A primeira etapa é criar seu aplicativo no Back4app, se você ainda não tiver um. Você pode verificar as etapas para criar um usando este documento.

Essa etapa é comum a ambas as tecnologias, portanto, independentemente da sua escolha, você terá que fazer isso.

Depois de criar nosso aplicativo, precisamos definir o recurso de hospedagem na Web. Sim. Você pode hospedar seus sites com conteúdo estático no Back4app gratuitamente. Ótimo, não é?

Depois de criar seu aplicativo, vá para Server Settings (Configurações do servidor):

E, em Web Hosting e Live Query, clique em Settings (Configurações):

Agora ative o Back4app Hosting e escolha um bom nome de domínio para seu aplicativo. Você pode acessar diretamente esse domínio em back4app.io ou pode criar um registro CNAME em seu DNS apontando para esse domínio, se desejar:

Agora você está pronto para começar a implantar algum código.

2. E quanto ao GraphQL?

Se você quiser usar o GraphQL, há outra etapa a ser seguida. Se você planeja usar somente o Javascript SDK, poderá usar qualquer versão do Parse, mas por que não usar a mais recente e melhor?

Vá para Configurações do servidor:

E em Settings (Configurações) em Manage Parse Server (Gerenciar servidor Parse):

Escolha uma versão que seja superior à 3.5.0. Na Back4app, usei a 3.6.0:

Agora você deve ter o GraphQL ativado e estamos prontos para começar!
Ah, só para você saber, você pode usar o GraphQL e os SDKs no mesmo aplicativo. Não há necessidade de escolher.

Se você estiver interessado apenas no GraphQL, pode rolar para o capítulo 15 deste tutorial agora.

3. Implementação de seu primeiro site

Agora que definimos o recurso de hospedagem na Web, podemos implantar nosso site.
Essa etapa também é comum para ambas as tecnologias.
Ele ainda não terá nenhuma funcionalidade, mas é bom vê-lo funcionando pela primeira vez, portanto, vamos fazer isso.

Vá para Configurações do servidor mais uma vez:

E agora escolha Settings (Configurações) em Cloud Code (Código da nuvem):

Lá você encontrará duas pastas: Cloud e Public.

Cloud é para implantar o Cloud Code, que é o código NodeJS executado a partir dos servidores da Back4app, fazendo toda a carga pesada de processamento para seus aplicativos e trazendo muitas vantagens, como economia de bateria e plano de dados em celulares, já que o próprio celular não precisará processar muito nem recuperar uma carga completa de dados, contando apenas com o resultado final do processamento, entregue pelos servidores da Back4app.

O público é para a implementação de conteúdo estático, como arquivos HTML, CSS e Javascript estáticos. É nela que estamos interessados neste momento.
Selecione essa pasta, clique no botão +ADD acima e adicione os arquivos HTML e CSS do nosso modelo que você baixou do site no primeiro capítulo.

Depois de selecionar esses arquivos, clique no botão Deploy e você verá os arquivos na pasta Public:

E agora é hora de fazer alguns testes.
Se você acessar o URL que definiu na Hospedagem na Web, verá que seu novo e brilhante site está funcionando totalmente de graça:

4. Traga um pouco de inteligência

Um site novo e brilhante está instalado e funcionando e isso levou o quê? 2 minutos? Que bom que isso é de graça, Internet!
E eu lhe disse que ele é totalmente seguro e tem HTTPS já incorporado? Porque não vamos pagar por certificados quando o Back4app os fornece gratuitamente, não é mesmo?

Agora é hora de colocar um pouco de inteligência nisso. E se fizermos com que isso leve apenas mais 2 minutos? Eu gosto de inteligência e gosto de rapidez.

Inicie sua versão favorita do IDE e vamos usar o Javascript. Visual Studio Code para mim, por favor. E um café expresso com ele.

De agora em diante, vou me concentrar apenas no Javascript SDK e, mais tarde, apenas no GraphQL.

Crie um novo arquivo chamado Parse.js e estamos prontos para começar.

5. Adição da estrutura do Parse

(Somente SDK Javascript)

O Parse torna muito fácil a implantação de suas estruturas. Primeiro, é necessário instanciar a estrutura Javascript adicionando a seguinte linha na seção Head do seu arquivo index.html:

<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>

Agora a estrutura completa do Parse (minificada) pode ser acessada a partir do seu código Javascript e podemos usar tudo a partir dela.

6. Ativação dos mecanismos do Parse

(Somente SDK Javascript)

Agora, já temos acesso à estrutura do Parse, mas precisamos ativá-la antes de acelerar o processo.

Precisamos identificar nosso aplicativo para o Parse, e a maneira de fazer isso é definir o AppId e a Javascript Key para o nosso aplicativo, juntamente com o URL do servidor que informa ao nosso aplicativo que estamos executando no Back4app.

Para fazer isso, vá para Server Settings (Configurações do servidor):

e em Settings, em Core Settings:

você encontrará todas as informações de que precisa:

Copie essas informações e cole-as em nosso arquivo Parse.js desta forma:

Parse.initialize("YourAppIdHere", "YourJavascriptKeyHere");
Parse.serverURL = 'YourParseAPIAddressHere'

Parse.initialize("5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH", "SchM9sm5W6TpPBr8zyHOwOYAGyPTYf66qxSUCsvE");
Parse.serverURL = 'https://parseapi.back4app.com/';

Agora nosso aplicativo tem acesso total ao Parse e o Parse conhece nossas configurações para poder operar.
Greenlight. Aceleração total!

7. Mas eu tenho apenas alguns usuários…

Se o seu aplicativo não precisar que os usuários se registrem e você preferir gerenciá-los manualmente, poderá obter a classe User no Database Browser do Parse Dashboard, pressionando o botão Add a Row (Adicionar uma linha):

Mas, na realidade, seu aplicativo provavelmente crescerá com o tempo, e o fato de os usuários poderem se registrar no sistema por conta própria ajudará.

8. Não há usuários? Sem problemas! signUp() para o resgate!

(Somente SDK Javascript)

No início, seu aplicativo não terá nenhum usuário, portanto, devemos fornecer uma maneira de os usuários se registrarem.

Nosso site já tem um belo formulário para isso. Vamos fazer com que ele funcione, certo?
E se eu lhe disser que podemos fazer isso com menos de 12 linhas de código? Parece melhor?

A classe Parse.User tem três propriedades básicas que você pode definir. Você pode definir outras se quiser ou precisar, mas essas três já foram criadas por conveniência e duas delas são obrigatórias:

• nome de usuário (obrigatório)
• senha (obrigatória)
• e-mail (opcional)

Vamos adicionar um usuário de teste ao nosso banco de dados apenas para verificar a operação. Adicione isso ao seu arquivo Parse.js:

function singnUp(){
    var user = new Parse.User();
    user.set("username", "alex"); // define o valor do formulário Username para a propriedade username
    user.set("password", "abc123"); // define o valor do formulário Password para a propriedade password
    user.set("email", "[email protected]"); // define o valor do formulário Email para a propriedade email
    try {
        user.signUp(); // Tudo funcionou e o usuário se conectou
    } catch (error) {
        alert("Error: " + error.code + " " + error.message); // Oops... algo errado aconteceu
    }
}

Isso criará um novo usuário com valores codificados:

nome de usuário: alexk
senha: abc123
e-mail: [email protected]

Aprenderemos como recuperar esses valores do formulário mais adiante neste artigo, mas para este usuário de teste, isso será suficiente.

Agora abra seu arquivo index.html e procure esta linha:

<input type="submit" class="button" value="Sign Up">

E altere-a para o seguinte:

<input type="submit" class="button" value="Sign Up" onclick="singnUp()">

Basicamente, o que fizemos aqui foi definir um evento onClick para disparar a função signUp que acabamos de codificar.

Implemente os dois arquivos na pasta pública do Cloud Code (o novo arquivo Parse.js e o arquivo index.html alterado também), conforme aprendido acima, e reabra o site no navegador.

9. Testar… Testando… 123…

É hora de testar, baby! Deixe o código falar por si só!

Vá para a seção Sign Up (não é necessário preencher nada, pois não estamos passando dados reais, apenas um teste codificado) e clique no botão Sign Up:

e se tudo tiver funcionado bem, você verá no Parse Dashboard que agora tem esse usuário junto com uma nova Session para ele:

10. Viva!!! Agora vamos torná-lo mais inteligente…

(Javascript SDK e GraphQL)

Agora que podemos inscrever usuários, vamos criar a função signUp operacional completa.
Precisaremos ler os valores do formulário para inseri-los no banco de dados e, para isso, usaremos o método javascript:

document.getElementById("idOfTheInput").value

Descobri, enquanto escrevia este artigo, que o modelo que usamos tem um pequeno problema. Os IDs devem ser exclusivos para que possamos recuperar os valores corretos, e nosso modelo tem alguns repetidos, provavelmente devido ao fato de o criador ter copiado e colado o código, portanto, vamos mudar isso.

Vá para o seu arquivo HTML e encontre as seguintes linhas na seção sign-up-htm:

<input id="user" type="text" class="input">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" type="text" class="input">

Observe que o atributo id para essas linhas se repete algumas vezes no código. Vamos alterar isso para que sejam únicas:

<input id="username" type="text" class="input">
<input id="password" type="password" class="input" data-type="password">
<input id="passwordverify" type="password" class="input" data-type="password">
<input id="email" type="text" class="input">

    var nome de usuário = document.getElementById("nome de usuário").value;
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    if (password !== passwordverify){
        alert ('As senhas não coincidem')
        return;
    }

    user.set("username", "alexk"); // define o valor do formulário Username para a propriedade username
    user.set("password", "abc123"); // define o valor do formulário Password para a propriedade password
    user.set("email", "[email protected]"); // define o valor do formulário Email para a propriedade email

    user.set("username", alexl); // define o valor do formulário Username para a propriedade username
    user.set("password", password); // define o valor do formulário Password para a propriedade password
    user.set("email", email); // define o valor do formulário Email para a propriedade email

11. Hora de testar novamente. Agora de verdade.

12. É hora de fazer login!

(Somente SDK Javascript)

function logIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;
}

Parse.User.logIn(user, pass).then(() => {
    // Viva! Usuário conectado
    alert('Hooray! Usuário conectado!');
});

Parse.User.logIn(user, pass).then(() => {
    // Viva! Usuário conectado
    alert('Hooray! Usuário conectado!');
}).catch(function(error){
    // Oops... algo errado aconteceu
    alert("Error: " + error.code + " " + error.message);
});

13. E noooow….

14. Conclusão da parte do SDK Javascript

15. Deixe o GraphQL entrar

Se você ficou empolgado com o Javascript SDK, agora pegue uma pipoca porque o show está prestes a começar.

A Back4app agora oferece suporte ao GraphQL, o que significa que acompanhamos as últimas e maiores tendências da tecnologia da moda, e agora o Parse está mais inteligente do que nunca!

Você pode contar com um GraphQL Playground totalmente funcional com autocomplete (sim!!!) para gerar as consultas que faremos.

Além disso, podemos especificar exatamente o que queremos recuperar, o que se traduz em cargas úteis menores, tornando o fornecimento de dados mais rápido para os usuários finais e as APIs muuuuito mais fáceis de manter ao longo do tempo.

Ok. Chega de conversa. O GraphQL é tão incrível que, se eu não me detiver, continuarei escrevendo sobre ele e não mostrarei como usá-lo.

16. Do que precisaremos

(Somente GraphQL)

Se você não alterou a versão do Parse para pelo menos 3.5.0 (3.6.0 no Back4app é a primeira a oferecer suporte ao GraphQL), vá até a seção 2 deste artigo e faça isso.

Precisaremos do NPM instalado para podermos usar seus módulos.
Esses módulos são escritos em NodeJS e inicialmente projetados para programação de back-end, portanto, teremos que mudar isso.
Não mostrarei como instalar o NPM, pois o tutorial no site acima aborda isso de forma bastante abrangente.
No entanto, mostrarei como usá-los para que possamos economizar muito esforço ao programar.

Pronto? Então, instale essas ferramentas, aperte o cinto de segurança e vamos lá!

17. Instalação do cliente GraphQL e do Browserify

(Somente GraphQL)

O GraphQL tem alguns clientes disponíveis para você usar. Como não consegui escolher um (porque todos eles são muito bons), decidi escolher o mais fácil de configurar neste primeiro tutorial e usar os outros nos próximos tutoriais para que possamos compará-los.

Descobri que o mais fácil de configurar é o graphql-request, que você pode instalar abrindo um terminal, indo para a pasta em que o Parse.js está e digitando

npm install graphql-request

Se a instalação for bem-sucedida, você deverá ter algo parecido com isto:

Também podemos instalar uma ferramenta chamada Browserify.
O Browserify faz a transição dos módulos NPM para serem usados no front-end (seu navegador). Lembra quando eu disse que os módulos NPM são inicialmente projetados para uso no backend? Essa ferramenta os tornará disponíveis no front-end com o mínimo de esforço.
Eu gosto de instalá-la globalmente (a chave -g) para poder usá-la de qualquer lugar:

npm install -g browserify

E, novamente, se tudo funcionar bem, você deverá ter algo parecido com isto:

Agora temos nosso cliente GraphQL instalado e podemos convertê-lo para uso no frontend. Levou 2 minutos para fazer isso, portanto, estamos progredindo rapidamente.

18. Como exatamente isso vai funcionar?

(Somente GraphQL)

Basicamente, nós vamos:

1. Escrever algum código NodeJS usando os módulos NPM
2. Convertê-lo em código compatível com front-end usando o Browserify
3. Exportar esse código para que possamos chamá-lo de outros arquivos
4. Chamar esse código a partir do nosso código Javascript

O comando para o browserify é:

browserify inputFile.js -o outputFile.js

O outputFile.js conterá nosso código compatível com o frontend, portanto, vamos acelerar as coisas, criar nosso inputFile.js e abri-lo em nosso IDE favorito.

19. Algum código NodeJS

(Somente GraphQL)

Começaremos adicionando nosso módulo NPM ao nosso código, exigindo-o.

const { GraphQLClient } = require('graphql-request');

E crie uma exportação global com o nome que usaremos para chamar nossa função, neste caso, signUp:

global.singUp = function() {

}

Com isso, podemos começar a adicionar código à nossa função singUp.
Vamos começar adicionando o URL do endpoint, que pode ser recuperado do GraphQL Playground:

const endpoint = 'https://parseapi.back4app.com/graphql';

E como precisamos nos autenticar, instancie nosso cliente GraphQL passando esse URL como parâmetro, juntamente com os cabeçalhos de autenticação: X-Parse-Application-ID e X-Parse-Javascript-Key. Eles terão o AppId e a Javascript Key que você aprendeu a recuperar na etapa 6.

const { GraphQLClient } = require('graphql-request')

global.singUp = function() {
    constendpoint='https://parseapi.back4app.com/graphql';
    
    constgraphQLClient=newGraphQLClient(endpoint, {
        headers: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Javascript-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    });
}

Agora é hora de escrevermos algumas consultas e mutações GraphQL.

20. Consultas e mutações, genéricas ou específicas

(somente GraphQL)

No momento em que este documento foi escrito, o Back4app e o Parse trabalhavam com consultas e mutações. Novos métodos podem ser desenvolvidos com o tempo, mas vamos discutir esses dois.

As consultas são usadas apenas para recuperar dados do servidor.

As mutações são usadas quando você está alterando dados no servidor, que também pode ou não recuperar resultados.

Portanto, se você estiver apenas consumindo informações, deverá usar uma consulta e, se estiver adicionando ou alterando informações, deverá usar uma mutação.

Começaremos com uma simples consulta e, depois disso, evoluiremos para mutações.

Ao falar sobre isso, temos métodos específicos e genéricos no GraphQL, cada um com suas próprias vantagens e desvantagens.

Os métodos genéricos permitem que você opere em qualquer classe. Se você estiver fazendo uma consulta genérica, por exemplo, poderá recuperar dados especificando a classe desejada. Isso é fantástico porque você pode usar a mesma sintaxe para quase tudo e, ao usar mutações, pode criar classes e objetos que não existem no início.

A desvantagem é que, como não há esquemas para métodos genéricos, você não pode confiar no Autocomplete, portanto, deve saber o que está fazendo.
Exemplos de métodos genéricos get e find.
As mutações genéricas são update, delete ou create.

Os métodos específicos, por outro lado, têm esquemas, portanto, só podem ser usados por classes pré-existentes. Essa é a desvantagem.
Mas o uso de métodos específicos traz outro nível de maravilha, permitindo que contemos com o Autocomplete e tenhamos recursos muito mais poderosos para recuperar nossos dados.
As consultas específicas começarão com get e find, e terão o nome da classe logo em seguida: findPerson, getPerson e assim por diante.
As mutações específicas começam com create, update e delete e têm o nome da classe ao lado: createPerson, getPerson, deletePerson:

21. Consultas

(Somente GraphQL)

Vamos criar uma consulta simples para brincar com o GraphQL.
No painel do Parse, acesse o Console da API e, em seguida, o Console do GraphQL.
Digite a seguinte consulta usando a consulta específica para encontrar um usuário. A qualquer momento, você pode pressionar CTRL + barra de espaço (Windows) ou OPTION + barra de espaço (Mac) para que o preenchimento automático seja feito à medida que você digita.

As consultas podem variar de acordo com a versão do Parse que você escolher:

Parse 3.7.2:

consulta {
    objects{
        find_User{
            resultados{
                nome de usuário
                email
            }
        }
    }
}

Parse 3.8:

consulta {
  usuários{
      resultados{
          nome de usuário
          email
      }
  }
}

Parse 3.9:

consulta {
  usuários{
      resultados{
          nome de usuário
          email
      }
  }
}

Clique no botão Play:

Você deverá ver os usuários que criamos com o Javascript SDK. Se você pulou essa parte, basta adicionar alguns usuários conforme descrito no capítulo 7 e tentar executar a consulta novamente. Você deverá ver resultados como este:

Acabamos de usar a consulta específica find_User para encontrar todos os usuários, recuperando seu nome de usuário e e-mail. Especificamos exatamente o que queríamos recuperar, gerando uma carga útil menor, ao mesmo tempo em que contamos com o Autocomplete para nos ajudar a desenvolver, de modo que, durante o processo, sabíamos quais operações estavam disponíveis.

Incrível, não é?

Vamos melhorar isso!

22. Mutações

(Somente GraphQL)

Vamos criar nossa mutação GraphQL com o método específico signUp para operar exatamente como nosso método signUp em Javascript.

A mutação será assim:

Parse 3.7.2

mutação{
  usuários{
    signUp(fields: {
      nome de usuário: "john"
      senha: "123456"
      email: "[email protected]"
    }){
      objectId
    }
  }
}

Parse 3.8

mutação SignUp{
  signUp(fields:{
    nome de usuário: "somefolk"
    senha: "somepassword"
  }){
    objectId
    createdAt
  }
}

Parse 3.9

mutação SignUp{
  signUp(fields:{
    nome de usuário: "somefolk"
    senha: "somepassword"
  }){
    id
    createdAt
    sessionToken
  }
}

Execute e verifique se o usuário foi adicionado à classe User no navegador de banco de dados.

Muito bem! Agora vamos colocá-lo em funcionamento em nosso código.

23. Nosso próprio método signUp com GraphQL

(Somente GraphQL)

Para o nosso método javascript signUp, usaremos uma mutação que é quase a mesma que usamos no GraphQL Playground, mas, enquanto lá usamos valores codificados, aqui devemos definir variáveis para assumir valores que o usuário digita nos formulários.

Para usar variáveis no cliente GraphQL que estamos usando, devemos primeiro especificar os nomes e tipos de variáveis no método. Passaremos três variáveis para o nosso método signUp: nome de usuário, senha e e-mail, que são todos strings, portanto, nosso método singUp será:

const signUpMutation = /* GraphQL */
`
mutation signUp($username: String! $password: String! $email: String!){
    
}
`

Em seguida, temos de usar essas variáveis dentro do método create_User, assim:

Parse 3.7.2

        
        usuários{
            signUp(fields: {
              nome de usuário: $username
              senha: $password
              email: $email
            }){
              objectId
            }
        }

Parse 3.8

        
        usuários{
            signUp(fields: {
              nome de usuário: $username
              senha: $password
              email: $email
            }){
              objectId
            }
        }

Parse 3.9

        
        usuários{
            signUp(fields: {
              nome de usuário: $username
              senha: $password
              email: $email
            }){
              id
            }
        }

E, por fim, defina valores para ele em um objeto JSON diferente, que será passado como um parâmetro junto com a mutação:

const variables = {
        nome de usuário: formUsername,
        senha: formPassword,
        email: formEmail
    }

Agora, observe que tenho três valores: formUsername, form Password e formEmail que serão recuperados do formulário e passados para a função singUp, portanto, devo especificá-los nos parâmetros da função:

global.singUp = function(formUsername, formPassword, formEmail)

E estamos prontos!

Aqui está o método completo:

const { GraphQLClient } = require('graphql-request')

global.signUp = function(formUsername, formPassword, formEmail) { 
 
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        headers: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Master-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    })

    const signUpMutation = /* GraphQL */
    `
    mutation signUp($username: String! $password: String! $email: String!){
        usuários{
            signUp(fields: {
                nome de usuário: $username
                password: $password
                email: $email
            }){
                objectId
            }
        }
    }
    `

    const variables = {
        nome de usuário: formUsername,
        senha: formPassword,
        email: formEmail
    }

    const data = graphQLClient.request(signUpMutation, variables).then(data => {
        alert('Hooray! User created!')
    }).catch(error => {
        alert('Error: ' + error.code + ' ' + error.message)
    })
    
}

24. E já que estamos aqui… Faça login…

(somente GraphQL)

Como já expliquei todas as etapas da mutação singUp, deixarei apenas o código do método logIn, que segue exatamente os mesmos princípios, mas usando a mutação específica logIn:

mutação logIn($username: String! $password: String!){
  usuários{
    logIn(username: $username password: $password){
    	sessionToken  
    }
  }
}

E o código completo seria:

global.logIn = function(formUsername, formPassword){
    
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        headers: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Master-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    })

    const logInMutation = /* GraphQL */
    `
    mutação logIn($username: String! $password: String!){
        usuários{
            logIn(username: $username password: $password){
                sessionToken  
            }
        }
    }
    `

    const variablesLogIn = {
        nome de usuário: formUsername,
        senha: formPassword
    }

    const data = graphQLClient.request(logInMutation, variablesLogIn).then(data => {
        alert('Hooray! User logged in!')
    }).catch(error => {
        alert('Erro :' + error.code + ' ' + error.message)
    })
}

25. Browserifying (diga o quê?)

(Somente GraphQL)

Lembra que no capítulo 18 eu lhe dei o comando para Broserify (ou seja, transformar nossos módulos NPM para que sejam compatíveis com o frontend)?
Se você não se lembra, aqui está ele novamente:

browserify inputFile.js -o outputFile.js

Vamos executá-lo em nosso inputFile.js e enviá-lo para um arquivo chamado graphql.js:

browserify inputFile.js -o graphql.js

Se tudo der certo, não devemos ter nenhuma saída:

Foi muito fácil, não foi?

26. Incluindo nosso novo código brilhante no HTML

(Somente GraphQL)

Dentro da tag head do nosso arquivo HTML, inclua o arquivo graphql.js gerado.
E, já que você está lá, crie também um novo arquivo em branco chamado Parse.js e inclua-o também. Nós o usaremos para chamar nossos métodos GraphQL:

<script src="./graphql.js"></script>
<scriptsrc="./Parse.js"></script>

Atenção: Caso você tenha pulado a parte do tutorial sobre Javascript, volte ao capítulo 10 e altere os IDs das tags HTML conforme descrito lá. Precisaremos que essa parte funcione para recuperar valores dos formulários.

27. Mostre-me alguma ação!

(Somente GraphQL)

Fizemos muito progresso até aqui, não é? Vamos adicionar algum código para obter alguma ação!

Novamente, se você pulou a seção de Javascript, volte ao capítulo 10 e veja como usamos o Javascript para ler valores dos formulários usando o método getElementById:

document.getElementById("idOfTheInput").value

Então, vamos abrir nosso arquivo Parse.js e adicionar nossos dois métodos, logIn e singUp:

function parseSignUp(){

}

function parseLogIn(){

}

E vamos também adicionar o código para ler os valores dos formulários, juntamente com algum código de validação de igualdade de senha, novamente explicado no capítulo 10:

function parseSingnUp(){
    var nome de usuário = document.getElementById("nome de usuário").value;
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    Se (password !== passwordverify){
        alert ('As senhas não coincidem')
        return;
    }

}

função parseLogIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;

}

Mas, desta vez, em vez de usar o Javascript SDK, vamos apenas chamar nossos métodos signUp e logIn em nosso arquivo graphql.js. O código completo será, então, o seguinte

function parseSingnUp(){
    var nome de usuário = document.getElementById("nome de usuário").value;
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    Se (password !== passwordverify){
        alert ('As senhas não coincidem')
        return;
    }

    signUp(nome de usuário, senha, e-mail)
}

function parseLogIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;

    logIn(user, pass)
}

Ah, e não se esqueça de chamá-los nos eventos onClick do arquivo HTML:

Implemente tudo conforme explicado no capítulo 3 e estamos prontos para alguns…

28. Testes

(Somente GraphQL)

Acesse o seu site e vá para a seção Sign Up. Preencha o formulário e clique no botão Sign Up (Registrar):

Se tudo tiver funcionado, você deverá ver o novo usuário na tabela Users (Usuários):

Agora volte para a seção Sign In e tente fazer login com esse usuário:

Se tudo funcionou como esperado, agora você deve estar conectado:

29. Conclusão da parte do GraphQL

Ufa! Sei que foram muitas informações, mas agora você é um mestre em login e inscrição! Parabéns!

O GraphQL pode parecer um pouco mais problemático no primeiro contato, com mais alguns processos para ser usado, mas acredite em mim: quando você pegar o jeito no seu processo de desenvolvimento, será muito fácil!

Agora temos um código muito mais orgânico e fácil de manter, que criamos com a ajuda do Autocomplete e pudemos testar e verificar as respostas no GraphQL Playground antes mesmo de começarmos a codificar. Isso é muito importante porque você pode não apenas ter todas as suas consultas escritas e testadas antes de produzir o código, mas também porque agora você pode dividir o desenvolvimento para uma equipe: alguns desenvolvedores podem escrever as consultas GraphQL enquanto outros escrevem o código Javascript, acelerando todo o processo.

Melhor do que isso, se você precisar alterar qualquer coisa em seu código a partir de agora, basta alterar as consultas e pronto.

É possível melhorar ainda mais? Claro que sim!

Usando exatamente a mesma sintaxe, você pode reutilizar as consultas GraphQL para todas as plataformas. É semelhante a todas as linguagens. Você não precisa mais se perguntar “como faço isso nessa linguagem com a qual não estou familiarizado?”. As mesmas consultas, idiomas diferentes.

Espero que você dê uma chance ao GraphQL em seu processo de desenvolvimento. Tenho certeza de que você ficará surpreso com o quanto pode alcançar!