News & Events
Como cadastrar e validar login no serviço Parse.com usando RAD Studio XE6?
- 14 de maio de 2014
- Posted by: Adriano Santos
- Category: delphi Desenvolvimento embarcadero Notícias Tutoriais XE6
O RAD Studio XE6 foi lançando recentemente e trouxe uma série de novidades. Entre elas compatibilidade com serviços BaaS (Backend as a Services), movimento que tem ganho força na internet e proporciona muitas vantagens. Nesse artigo, veremos como fazer uso a classe User contida nos serviços de nuvem do Parse.com (www.parse.com) para efetuarmos a validação de um usuário e sua senha, bem como cadastrar-se no banco de dados. A primeira coisa a se fazer, claro, é criar uma conta no serviço Parse.com. Acesse o site http://www.parse.com e então cadastre-se usando o botão Sign Up na parte superior direita da tela. Entre com seus dados e confirme. O serviço é pago, mas existe a possibilidade de uso FREE com algumas limitações. Consulte o item Pricing na parte superior para saber mais detalhes.
Depois de criar a conta e efetuar o login, precisamos criar a primeira tabela. O banco é todo orientado a objetos, então para o serviço, uma tabela é uma classe assim como um campo ou um registro. Para criar a tabela, você primeiro deverá criar um aplicativo, ou seja, nosso banco dados on-line deve estar associado a um de seus aplicativos. Para isso clique à direita do vídeo, o menu contendo o nome de sua conta e em seguida Dashboard. Em seguida selecione Create app no item Select an app à esquerda.
Em nosso caso já temos uma aplicação chamada TDevRocks. Depois de criar o app, selecione Data Browser para termos acesso ao banco de dados. À sua esquerda clique em New Class e na janela que se abre, clique em Custom e escolha User. Em outras palavras, não é necessário criar uma tabela User, pois já existe uma tabela padrão que é usada pelo Parse.com.
Figura 3. Criando a classe User
Agora que já temos nossa classe preparada, voltemos ao Delphi XE6. A ideia é simples. O usuário de nosso aplicativo poderá se cadastrar no sistema para então ter acesso a informações do aplicativo, como uma rede social, etc. Caso o usuário já tenha se cadastrado, ele poderá então efetuar o login para entrar.
Montando a Interface
No Delphi vamos criar uma nova aplicação mobile usando o menu File > New > Firemonkey Mobile Application – Delphi. Salve os arquivos como desejar. Decidimos criar uma interface simples. Em nosso exemplo, inserimos um componente TPanel alinhado VertCenter no formulário. Adicionamos dentro do TPanel um TCalloutPanel com sua propriedade align também como VertCenter. Mexemos também na propriedade Margins colocando 10px em cada opção, assim nos certificamos que o controle ficará bem disposto dentro do painel mesmo em outros celulares ou tablets. Dentro do CalloutPanel, colocamos os controles Label e Edit para usarmos como Usuário e Senha. Centralizamos eles usando o Align to Grid com o botão direito do mouse. Dentro do primeiro panel adicionamos também outro TPanel alinhado ao topo e dentro desse painel um Label com o text configurado com a frase “Não tenho conta, cadastre-me.” e alinhamos à esquerda. Sua margem esquerda (Margins > Left) configuramos em 10px. Adicionamos um TSwitch nesse mesmo painel alinhado-o à direita (Right) e configuramos sua margem direita para 10px. Por fim, adicionamos um TButton alinhado como MostBottom dentro do primeiro TPanel. Sua propriedade Margins com 10px a esquerda e a direita.
Feitas as configurações necessárias, podemos testar cada resolução usando o gerenciador de skins na parte superior do editor de código. A figura abaixo mostra como será o resultado final da nossa tela. Nossa interface deve se parecer com algo como:
Figura 4. Exemplo de tela Ainda colocamos algumas coisas a mais, como a barra superior, mas fica a seu critério.
Preparação e Codificação
Primeiro uma codificação simples. Caso o usuário marque o TSwitch como verdadeiro, significa que ele quer ser cadastrado no site, então mudamos o Text do Button para “Cadastrar”, caso contrário “Login”. Faça isso no evento OnClick do TSwitch, como abaixo. (Modificamos o Name do TSwitch para swNovaConta e o botão para btnLogin)
Listagem 1. Código para mudança do Caption do botão Login/Cadastrar-se
procedure TForm1.swtNovaContaSwitch(Sender: TObject); begin case swtNovaConta.IsChecked of true : btnLogin.Text := 'Cadastrar'; false : btnLogin.Text := 'Entrar'; end; end;
Agora precisamos inserir os componentes do grupo BaaS que farão o trabalho de conectar-se ao serviço Parse.com e validar o usuário e senha. Insira no formulário um componente to tipo TParseProvider e outro do tipo TBackendUsers. O primeiro componente configure sua propriedade Name como PPUsuarios e o TBackendUsers, configure como bkendUsuarios. Logo em seguida mude a propriedade Provider selecionando o PPUsuarios na lista. O componente TParseProvider precisa ser configurado para receber nossas chaves confidenciais de acesso ao serviço. Essas chaves são encontradas no site Parse.com no item Settings e logo em seguida em Application Keys. Nós criamos uma conta fictícia para então usarmos em nossas apresentações, veja a figura a seguir.
Você precisará configurar Application ID, REST API Key e Master Key copiando do serviço para o componente TParseProvider nas respectivas propriedades. Agora faremos a codificação, mas antes vamos entender alguns princípios. O serviço Parse.com não possui compatibilidade com autenticações, então na verdade o que faremos é procurar o apelido digitado pelo usuário em tela, na base de dados. No momento que o usuário marcar que quer Cadastrar-se no sistema, precisamos fazer uma verificação para saber se o apelido escolhido já não existe. Em caso positivo, informamos que ele precisa escolher outro nome. Caso o usuário opte por fazer login no sistema, apenas chamamos a função respectiva para essa operação. Veja na Listagem 2.
Listagem 2. Validação e Cadastramento de usuário
procedure TForm1.btnLoginClick(Sender: TObject); var LSession : TBackendEntityValue; begin case swtNovaConta.IsChecked of true: begin { Valida se nome de usuário já existe na base } bkendUsuarios.Users.QueryUserName(edtUser.Text, LSession); if LSession.ObjectID.IsEmpty then begin { Cria o usuário já fazendo login na sessão } bkendUsuarios.Users.SignupUser(edtUser.Text, edtSenha.Text, nil, LSession); ShowMessage('Usuário e Senha cadastrado com sucesso!'); end else begin ShowMessage('Nome de Usuário já existe. Por favor escolha outro!'); end; end; false: begin try bkendUsuarios.Users.LoginUser(edtUser.Text, edtSenha.Text, LSession); ShowMessage('Usuário e Senha validados!'); except on E:Exception do raise Exception.Create('Usuário ou Senha Inválidos!'); end; end; end; end;
A explicação é bem simples. Usamos uma variável do tipo TBackendEntityValue que receberá o retorno das funções QueryUserName no caso de um novo cadastro e LoginUser em cada caso. Quando chamamos QueryUserName, passamos como parâmetro o conteúdo de edtLogin acompanhado do segundo parâmetro, a sessão.
bkendUsuarios.Users.QueryUserName(edtUser.Text, LSession);
Então testamos se LSession recebeu alguma informação na sua propriedade ObjectID. Caso positivo então encontramos o usuário na base, ou seja, o apelido já existe. Caso contrário chamamos o método SignUp passando Usuário, Senha e a Sessão (LSession) e então o usuário será cadastrado no banco.
bkendUsuarios.Users.SignupUser(edtUser.Text, edtSenha.Text, nil, LSession);
A última parte a ser explicada é caso o usuário deseje efetuar login no sistema. Basta nesse caso chamar o método LoginUser passando Usuário, Senha e a Sessão (LSession).
try bkendUsuarios.Users.LoginUser(edtUser.Text, edtSenha.Text, LSession); ShowMessage('Usuário e Senha validados!'); except on E:Exception do raise Exception.Create('Usuário ou Senha Inválidos!'); end;
Aqui usamos um bloco Try..Except para verificar se o login foi efetuado com sucesso. Caso o usuário e/ou a senha estejam incorretos, um erro 404 será retornado, então nós tratamos essa mensagem e devolvemos para o usuário um ShowMessage dizendo que o Usuário ou a Senha estão incorretos.
Conclusão
O RAD Studio XE6 trouxe inúmeras novidades provando mais uma vez que a Embarcadero está com fôlego total e trabalhando forte para nos trazer um Delphi cada vez mais robusto e atualizado. Com o serviço Parse.com podemos fazer uso de uma base de dados robusta e totalmente na nuvem. Em outros artigos veremos como preencher uma listagem trazendo dados diretamente do serviço.
Outro serviço muito bom no mercado é o Kinvey (www.kinvey.com) que possui a mesma mecânica do Parse.com e agora também é compatível com Delphi XE6. Caso queira saber mais novidades do XE6, inscreva-se para participar do Delphi Tour que já está acontecendo.
Verifique em www.embarcaderobr.com.br/tour se a Embarcadero passará por sua cidade.
Abraços e Go to Delphi!