A primeira parte desse tutorial publicada uma semana atrás (Link aqui) teve como principal objetivo iniciar uma série de artigos em formato passo-a-passo mostrando algumas das principais técnicas e funcionalidades existentes na ferramenta de desenvolvimento RAD Studio XE6. O objetivo do tutorial é construir um aplicativo totalmente a partir do zero e que seja compatível com iOS e Android.

No post anterior fomos capazes de:

1. Criar o app;
2. Criar o layout inicial;
3. Desenvolver a navegação base entre as abas;
4. Desenvolver a navegação base entre os formulários da aplicação.

Nessa segunda parte, veremos como criar nosso primeiro protótipo do aplicativo que nos será útil para entender e definir os aspectos gerais do app. Também veremos:

1. Criação do primeiro protótipo funcional;
2. Criação de dados fictícios com LiveBindings;
3. Ligação dos dados fictícios do LiveBindings com o objetos de tela, tais como TListView;
4. Montagem das demais telas do sistema utilizando LiveBindings;
5. Uso do serviço Parse.com;
6. Criação de Classe para Login e Senha na nuvem bem como outras funcionalidades;
7. Login e Senha on-line;
8. Modelagem da nossa base de dados SQLite;
9. Introdução ao SQLite e sugestão de ferramentas.

Requisitos:

• Assistir ao vídeo: FireUI – Novo Form Designer RAD Studio XE7
• Assistir ao vídeo: TMultiView no RAD Studio XE7
• Assistir ao vídeo: Aula complemento – Criando meu app step-by-step
• Leitura: Como cadastrar e validar login no serviço Parse.com usando RAD Studio XE6

Retomando o raciocínio

Assim como mencionado no início desse artigo, no capítulo anterior iniciamos a criação de nosso app a partir do RAD Studio XE6/Delphi XE6. Nesse capítulo vamos dar continuidade ao nosso desenvolvimento, mas agora com um pouco mais ênfase em dados e processos reais.

Para começar, espero que tenham assistido aos vídeos indicados na área de requisitos, pois são importantes para darmos continuidade. Na Figura 1, logo abaixo, vemos como ficou nosso formulário principal, frmMain, depois da migração para o RAD Studio XE7.

Figura 1. Aplicativo migrado para RAD Studio XE7

O que fizemos aqui foi incluir o novo componente TMultiView ao formulário para que tenhamos um menu lateral automático sem esforço de codificação, assim podemos nos concentrar em coisas ainda mais importantes.

Nessa segunda etapa faremos o LiveBindings da lista de Títulos para que tenhamos algum dado para exibição. Então mãos na massa.

Prototipação

Vamos nos concentrar na primeira janela de nosso app, Lista de Títulos. Abra esse Form e adicione a ele um componente do tipo TPrototypeBindSource da paleta LiveBindings.

#Dica: Para encontrar os componentes de maneira mais rápida, digite o nome do componente no campo de pesquisa da Tool Palette.

Esse componente nos dá plena condição de criar uma lista fictícia com dados para preenchimento de nossa lista. Agora adicione também um componente do tipo TListView da paleta Standard e dê o nome de lsvTitulos a ele. Configure suas propriedades como a seguir:

• Name: lsvTitulos
• ItemAppearance.ItemAppearance: MultiRightDetail
• ItemAppearanceObjects.ItemObjects.Image.Visible: True

#Dica: O TListView padrão do Delphi não possui a opção MuiltiRightDetail, por isso assista ao vídeo TMultiView no RAD Studio XE7 para ver como fazer a instalação desse componente.

Agora clique duas vezes no componente PrototypeBindSource1 e vamos adicionar os campos relacionados ao nosso protótipo. Com o diálogo aberto, clique no único botão disponível no momento para adicionar o primeiro campo. Uma nova caixa de diálogo será aberta com duas colunas: Generator e Type. Aqui temos todo tipo de dado que pode ser gerado aleatoriamente pelo Delphi para simular um banco de dados.

Inicie usando o item ContactBitmaps. Clique nele e no campo logo acima, FieldName, digite o valor FOTO. Esse será o campo para receber a foto do título a ser alugado, ou seja, a capa do DVD.

Repita esse passo adicionando os campos como na Tabela 1:

Tabela 1. Campos do protótipo de títulos

O resultado será semelhante a Figura 2 onde conseguimos visualizar todos os campos da nossa lista fictícia.

Figura 2. Tabela com campos fictícios do protótipo

Feche a janela e faremos agora a ligação dos campos aos respectivos itens no TListView via LiveBindings. Acesse o Object Inspector e localize no rodapé dele o item Bind Visually. Caso não o encontre, clique com o direito no formulário e localize o Bind Visually no pop-up. Nós veremos uma tela semelhante a Figura 3.

Figura 3. Bind Visually

O Bind Visually localiza todos os controles da tela e possibilita que liguemos um ao outro para que tenhamos uma atualização automática sem a necessidade de codificação. Em nosso exemplo usaremos apenas os componentes TListView (lsvTitulos) e o TPrototypeBindSource (PrototypeBindSource1). O restante pode ser ocultado clicando com o direito nele e escolhendo a opção Hide Element(s).

#Dica: Selecione todos os componentes que ficarão ocultos. Clique em cada item com a tecla Ctrl selecionada. Em seguida clique em um dos controles selecionados com o botão direito do mouse e então Hide Element(s).

Note que no lsvTitulos temos as propriedades representadas no Bind Visually:

• Item.Text
• Item.Detail1
• Item.Detail2
• Item.Detail3
• Item.Bitmap

Entre outras, claro. O que vamos fazer agora é ligar cada campo da nossa lista as respectivas propriedades. Por isso, arraste, em primeiro lugar, o Asterísco do Prototype a propriedade Synch. Em seguida siga a lista abaixo:

• Foto >>> Item.Bitmap;
• CodTitulo >>> Item.Detail3
• Titulo >>> Item.Detail1
• SubTitulo >>> Item.Detail2

Teremos algo semelhante a Figura 4, inclusive com o formulário já mostrando dados fictícios.

Figura 4. Ligação do LiveBindings

Perceba que um novo componente foi adicionado ao formulário, o LiveBindList. Esse é o componente que possui o link de cada propriedade e seus campos. Dessa forma já temos uma lista pronta.

Protótipo de Usuários

Para a janela de usuários, crie um novo formulário usando o menu File > New > Multi-Device Form – Delphi.  Modifique sua propriedade Name para frmUsuarios e salve-o como UntUsuarios. Inclua também um TLayout com o nome de lytUsuarios e alinhe-o como Client. Coloque uma ToolBar dentro do Layout e logo em seguida um SpeedButton dentro da ToolBar. Configure-o como a seguir:

• Name: spbBack
• Align: Left
• Margins.Left: 8
• StyleLookup: detailstoolbutton

Adicione a ele um TListView com propriedade de alinhamento ao Cient. Repita todos os passos da sessão anterior para criar um protótipo com uma lista de usuários. Siga a Tabela 2 com os nomes de campos e tipos de dados.

Tabela 2. Campos do Protótipo de Usuários

Criando uma tela de login

Faremos uso agora do serviço de banco de dados na nuvem chamado Parse.com. Desde a versão anterior do Delphi, nós contamos com componentes do tipo BaaS (Backend as a Services). Esse tipo de serviço tem se popularizado bastante ultimamente.

No início desse artigo, na sessão Requisitos, você encontra um link para um artigo que escrevi falando justamente disso, portanto não vou me estender muito nesse tópico. Tomarei como verdade que você já entrou no serviço Parse.com, cadastrou-se e criou sua classe Users no servidor deles. Não se preocupe, no tutorial informado em requisitos já há todas as informações necessárias para o cadastramento no serviço.

A partir daqui, crie um novo form que iremos usar como janela de login. Dê o nome a essa janela de frmLogin e salve-a como UntLogin.pas. Repita os passos das telas anteriores para montar o layout base, ou seja, insira um TLayout e coloque-o como alinhamento ao Client. Dentro dele uma ToolBar e um SpeedButton com o nome spbBack.

Agora iremos montar um box para digitação de usuário e senha. O design fica por sua conta, mas nesse tutorial irei usar um componente TCalloutPanel da paleta Standard. Alinhe-o como Vertical e aumente ou diminua sua altura de acordo com seu gosto.

Dentro dele insira um SpeedButton mudando seu Text para “Enviar” e seu alinhamento para Bottom. Agora coloque um ListBox com 3 (três) linhas e seu alinhamento como Client. Modifique a propriedade e ItemHeight para algo em torno de 40 ou 50 pixels. Isso aumentará a altura das linhas do ListBox.

O primeiro item do Listbox terá sua propriedade Text alterada para “Registrar-se”. E coloque também um componente do tipo TSwitch da paleta Standard. Configure-o como a seguir:

• Name: swtRegistrar
• Align: Right
• Margins.Right: 10

A segunda e terceira linha conterão os Edits para digitação de login e senha. Altere a propriedade Text de ambos para “Usuário” e “Senha”, respectivamente. Insira um TEdit em cada linha alinhando-os à direita com margem direita de 10px. Os nomes deles podem ser edtUsuario e edtSenha. O edtSenha precisa ter sua propriedade Password para True.

Localize a paleta de compnentes BaaS Client e adicione o componente BackendUser mudando seu nome para bkendUsuarios. Localize agora o componente TParseProvider e adicione-o a tela dando o nome de ppUsuarios.

O primeiro componente adicionado é o componente que se conectará on-line ao serviço e validará nosso usuário e senha. Já o ppUsuarios receberá as informações de nosso cadastro no serviço, tais como as chaves de acesso criptografaras. Por isso, conecte o bkendUsuarios ao ppUsuarios usando a propriedade Provider.

Em ppUsuarios alimente as propriedades ApplicationID, RestApiKey e MasterKey com os valores de sua conta no serviço Parse.com. Em caso de dúvidas onde obter tais informações, leia o artigo recomendado em requisitos. Confira a Figura 5 como nossa tela deverá se assemelhar.

Figura 5. Modelo de tela de login

Construindo a classe de login

Para que nosso sistema torne-se mais profissional, vamos dar início a criação de uma classe de Login que será utilizada futuramente por toda a aplicação. A explicação base é simples.

1. Criaremos métodos para efetuar o Login, Logout e Registrar um novo Usuário no Parse.com;
2. Guardaremos a sessão do usuário para que possamos validar mais tarde se ele está ou não logado.

Para isso entre em File > New > Unit Delphi. Salve essa Unit com o nome Login.pas. No meu caso criei uma pasta no projeto para guardar todas as nossas classes. Criei com o nome Lib. Agora copie e cole desse tutorial, o código da Listagem 1 em sua nova Unit.

unit Login;

interface

uses
  {$Region 'FireDac'}
  FireDAC.Stan.Intf, FireDAC.Stan.Option,
  FireDAC.Stan.Param, FireDAC.Stan.Error, FireDAC.DatS, FireDAC.Phys.Intf,
  FireDAC.DApt.Intf, FireDAC.Stan.Async, FireDAC.DApt, FireDAC.UI.Intf,
  FireDAC.Stan.Def, FireDAC.Stan.Pool, FireDAC.Phys, FireDAC.Phys.SQLite,
  FireDAC.Stan.ExprFuncs, FireDAC.FMXUI.Wait, Data.Bind.EngExt,
  Fmx.Bind.DBEngExt, FireDAC.Comp.UI, Data.Bind.Components, Data.Bind.DBScope,
  Data.DB, FireDAC.Comp.Client, FireDAC.Comp.DataSet,
  {$EndRegion}
  System.SysUtils, System.Types, System.UITypes, System.Classes,
  System.Variants, FMX.Types, FMX.Graphics, FMX.Controls, FMX.Forms, FMX.Dialogs,
  FMX.StdCtrls, FMX.MobilePreview, System.Rtti,
  REST.Backend.ServiceTypes, REST.Backend.MetaTypes, System.JSON,
  REST.OpenSSL, REST.Backend.ParseProvider, REST.Backend.Providers,
  REST.Backend.ServiceComponents;

type
  TLogin = class
    private
      FSession        : TBackendEntityValue;
      FSessionStarted : Boolean;
      FObjBackEndUsers: TBackendUsers;
    public
      constructor Create;
      destructor Destroy;
      function  Login(AUser, APassword: string): Boolean;
      function  Logout: Boolean;
      function  SignUp(AUser, APassword: string): Boolean;
    published
      property Session        : TBackendEntityValue read FSession          write FSession;
      property SessionStarted : Boolean             read FSessionStarted   write FSessionStarted;
      property ObjBackEndUsers: TBackendUsers       read FObjBackEndUsers  write FObjBackEndUsers;
  end;

implementation

end.

Listagem 1. Escopo da classe

Na sessão Uses estamos adicionando toda as units necessárias para a codificação de nossa classe. Peço atenção apenas agora na definição da classe.

Criamos em Interface a classe TLogin sem nenhuma herança, ou seja, TLogin = class. Declaramos FSession do tipo TBackendEntityValue que receberá a sessão do usuário logado. E uma variável para marcarmos como True/False sempre que o usuário, respectivamente, fizer login ou logout.

Em seguida declaramos os métodos Create e Destroy para controlarmos a criação e destruição da classe e também o estado de algumas variáveis. Na seqüência criamos 3 (três) métodos todos devolvendo Boolean, assim podemos testar na chamada se o método foi executado com sucesso. Explicação dos métodos:

Login: Receberemos como texto o Usuário e Senha digitados nos campos na janela de login. Verificamos se o login e senha são válidos e inicializamos a sessão usando a variável FSession.

Logout: Apenas limpamos a informação da FSession retornando ao sistema que o usuário não está mais on-line.

SingnUp: Usaremos esse método para cadastrar o usuário on-line sempre que ele marcar o item “Registrar-se”, ou seja, usuário novo.

Criamos também duas propriedades, Session e SessionStarted que dispensam comentários. Apenas uma informação relacionada a Orientação a Objetos. Internamente nossa classe atualiza as propriedades criadas através das variáveis FSession e FSessionStarted. Mas por fora da classe fazemos referência pela propriedade, ou seja:

if MeuObjetoLogin.SessionStarted then
  //usuário logado, chama tela XXX

Pressione Ctrl + Shift + C para criar o escopo dos métodos e codificarmos. Uma propriedade/variável que não expliquei propositadamente foi FObjBackEndUsers. Essa propriedade será responsável por receber a referência ao objeto BackEndUsers colocado na tela de login. Assim nossa classe fica genérica e podemos usá-la em qualquer lugar. Na Listagem 2 você pode ver todo o código de cada método.

constructor TLogin.Create;
begin
  inherited Create;
  {$IFDEF DEBUG}
    FSessionStarted := True;
  {$ELSE}
    FSessionStarted := False;
  {$ENDIF}
end;

destructor TLogin.Destroy;
begin
  inherited Destroy;
end;

function TLogin.Login(AUser, APassword: string): Boolean;
var
  tmpSession : TBackendEntityValue;
begin
  try
    FObjBackEndUsers.Users.LoginUser(AUser, APassword, tmpSession);
    FSession        := tmpSession;
    FSessionStarted := True;
    Result          := True;
  except on E:Exception do
    begin
      { Erro de usuário e senha }
      if E.Message.Equals('Parse Error: invalid login parameters (101)') then
        raise Exception.Create('Usuário ou Senha inválidos!');
      Result := False;
    end;
  end;
end;

function TLogin.Logout: Boolean;
begin
  try
    FObjBackEndUsers.Users.Logout;
    FSessionStarted := False;
    Result          := True;
  except on E:Exception do
    begin
      { Erro de usuário e senha }
      if E.Message.Equals('Parse Error: invalid login parameters (101)') then
        raise Exception.Create('Usuário ou Senha inválidos!');
      Result := False;
    end;
  end;
end;

function TLogin.SignUp(AUser, APassword: string): Boolean;
var
  Session : TBackendEntityValue;
begin
  try
    { Valida se nome de usuário já existe na base }
    FObjBackEndUsers.Users.QueryUserName(AUser, Session);
    if Session.ObjectID.IsEmpty then
    begin
      { Cria o usuário já fazendo login na sessão }
      FObjBackEndUsers.Users.SignupUser(AUser, APassword, nil, FSession);
      ShowMessage('Usuário e Senha cadastrado com sucesso!');
      FSessionStarted := True;
      Result          := True;
    end
    else
    begin
      ShowMessage('Nome de Usuário já existe. Por favor escolha outro!');
      Result := False;
    end;
  except on E:Exception do
    raise Exception.Create('Erro de internet!' + E.Message);
  end;
end;

Listagem 2. Codificação final da classe

Vamos entender agora o que estamos fazendo na classe começando pelo método construtor Create. Nele estamos usando uma diretiva de compilação para não atrapalhar nossos testes no futuro. Caso a aplicação tenha sido compilada em Debug, marcamos a sessão como Iniciada, assim não seremos obrigados a digitar usuário e senha toda hora. Caso contrário, o sistema já inicia como sessão não iniciada.

Em seguida temos o método Login recebendo usuário e senha em formato Texto (String). Nosso código aqui é bem simples. Chamamos a função LoginUser presente no objeto BackendUsers. Passamos para a função o Usuário e a Senha passados por parâmetro bem como uma variável temporária de Sessão declarada nesse métodos. A função LoginUser valida o usuário e a senha e devolve a informação para a sessão temporária. Caso o usuário e a senha não existam on-line, uma exceção será gerada com o erro: Parse Error: invalid login parameters (101). Existem milhares de formas de testar, mas acabei fazendo na maneira mais simples possível.

Caso o usuário e senha tenham sido validados com sucesso, as variáveis FSession e FSessionStarted são atualizadas e devolvemos Result := True informando que o método obteve sucesso.

Logout é o método mais simples. Apenas chamamos a função de mesmo nome contida no objeto BackendUsers e atualizamos as respectivas variáveis.

Por fim, SignUp, acredito que o método mais inteligente da classe. Primeiro nós chamamos a função QueryUserName passando o usuário recebido e uma sessão temporária. Se a Sessão temporária estiver vazia na propriedade ObjectID, significa que o usuário passado não existe na base. O ObjectID na verdade é o campo de chave primária da tabela Users no serviço Parse.com e é alimentado sempre que cadastramos um novo usuário. Estando vazia, então chamamos o método SignupUser passando o usuário e senha informados nos campos da janela. Assim o usuário será cadastrado e logo em seguida iniciamos a sessão do usuário.

Caso o ObjectID esteja preenchido, significa que o usuário já existe no banco, então pedimos ao usuário para informar um apelido diferente.

Usando a Classe Login

Perfeito! Até aqui nenhum problema. Agora precisamos usar a classe, ou seja, efetivamente chamar os métodos necessários para efetuar o login. A primeira providência é criar a classe em runtime e como precisaremos dela em vários lugares, vamos cria-la na abertura do sistema. Acesse o evento OnCreate do formulário principal e digite o código abaixo:

  FLibLogin := TLogin.create;

Na sessão Public do form adicione a variável FLibLogin do tipo TLogin (usada no código anterior) e dê um Use Unit no Login.pas adicionando a unit ao Uses da Interface. Assim passaremos a partir de agora a usar a unit da Classe.

Nosso formulário principal é o primeiro a ser iniciado, portanto é o único que fará referência direta a Login.pas por enquanto. para acessar as propriedades da classe, usaremos algo como:

  frmMain.FLibLogin.PROPRIEDADE (ou método)

Retorne agora a nossa janela de Login, frmLogin. Aqui precisaremos apenas codificar o botão de login, speLogin. Digite nele o código abaixo:

  frmMain.FLibLogin.ObjBackEndUsers := bkendUsuarios;
  case swtRegistrar.IsChecked of
    true  : frmMain.FLibLogin.SignUp(edtUsuario.Text, edtSenha.Text);
    false : frmMain.FLibLogin.Login(edtUsuario.Text, edtSenha.Text);
  end;

Imagino que já tenham entendido ;). Caso o Swtich esteja marcado, significa que o usuário deseja cadastrar-se no sistema, portanto chamamos o método de cadastro da nossa classe, caso contrário nosso Login. Perceba que apenas chamamos os métodos e não fazemos desvios, ou seja, o correto seria:

Caso o usuário consiga se cadastrar ou fazer o login, devemos chamar o click do menu Titulos para que carreguemos a Listagem de Títulos ou poderíamos chamar qualquer tela.

Para não nos estendermos mais nesse tópico, deixo a cargo do leitor fazer os respectivos desvios.

Obs. Na primeira linha do código alimentamos a propriedade ObjBackendUsers passando como referência o objeto em rela.

Modelagem de Dados

Para que possamos prosseguir com nosso aplicativo, vamos iniciar também nesse artigo a modelarem de nosso banco de dados local, ou seja, no dispositivo. Para isso vamos utilizar um banco de dados bastante utilizado o SQLite.

O SQLite é apenas um dos bancos de dados que podem ser utilizados em dispositivos móveis. Também é possível usarmos IBLite, uma versão reduzida do Intebase da Embarcadero. Para saber mais sobre SQLite, você pode acessar o site http://www.sqlite.org que possui uma vasta documentação.

Com ele podemos realizar diversas tarefas, pois apesar de compacto, é um banco bastante completo.

Existem milhares de ferramentas na internet para fazer a manutenção e criação de bancos SQLite e uma delas é o SQLite Expert e pode ser baixado em www.sqliteexpert.com. Existem basicamente duas versões, Express e Professional e claro, utilizado a versão Express que é gratuita e já ajuda bastante. Tomarei ele como base então para nosso artigo.

Outra ferramenta importante para mantermos uma documentação de nosso banco é o DIA, uma ferramenta de modelagem FREE, simples e objetiva. Ele pode ser encontrado e baixado em http://dia-installer.de. Minha sugestão é baixar a versão Full, pois existe a versão Portable no baixaki.com.br, mas não é legal.

Acesse a ferramenta DIA abra-a em seu equipamento. Não entraremos em detalhes sobre o DIA, então resumirei suas características.

Com o DIA aberto, Figura 6, observe na barra lateral a opção Fluxograma. Clicando nessa opção e em seguida em Outras Folhas podemos ver que há inúmeros fluxogramas que podemos utilizar para desenhar nossa solução. Utilize a opção Bancos de Dados, assim nós podemos incluir nossas entidades. Por enquanto vamos criar somente a tabela de Títulos.

Figura 6. DIA Modelagem

Arraste um objeto do tipo Entidade para a área branca e clique duas vezes nela para abrir a caixa de propriedades. Nessa janela inclusa o nome da nossa tabela, TITULOS e então clique em Atributos.

Nessa área podemos incluir todos os campos da tabela. Comece incluindo como na Tabela 3.

Tabela 3. Tabela TITULOS do banco de dados

A aparência de nossa entidade deverá se parecer com a Figura 7.

Figura 7. Entidade TITULOS

A partir de agora, faremos sempre a modelagem de dados de nossa app através dessa ferramenta para criar nossas entidades e deixar sempre uma documentação atualizada.

Vamos agora replicar isso no SQL Expert criando o banco e a tabela. Abra a ferramenta e clique em File > New > DataBase. Informe o caminho e o nome do banco de dados. Minha sugestão é que salvemos o banco no mesmo diretório da aplicação em uma pasta com o nome Database. O nome do banco de dados poderá ser Locadora.sqlite. O restante dos campos podem ser deixados como Default.

Em seguida clique com o direito no nosso banco de dados e em seguida em New Table. Em Table Name digite TITULOS. Logo abaixo, você encontra algumas abas onde podemos incluir nossos campos, índices, chaves estrangeiras, etc. Bem abaixo encontraremos o botão Add, para criar um novo campo.

Clique em Add e adicione o primeiro campo, ID_TITULO do tipo INT. Nós vamos controlar o auto incremento da tabela através de triggers no próximo artigo, portanto não se preocupe por enquanto. Continue criando a tabela utilizando nossa entidade na modelagem. Observe a Figura 8 como deverá ser concluída a criação da tabela TITULOS.

Figura 8. Tabela TITULOS criada.

Na próxima fase de nossa série de artigos, aprofundaremos melhor no banco de dados e faremos a ligação do banco ao nosso sistema utilizando FireDAC.

Salve o banco de dados e o diagrama de modelagem.

Conclusões

Muito bem. Nessa segunda etapa de nosso aplicativo conseguimos dar passos importantes. Criamos uma classe para efetuarmos o Login e Senha no sistema. Iniciamos a criação do banco de dados local e fizemos, claro, a migração do aplicativo da versão RAD Studio XE6 para XE7.

Até a próxima

#GoToDelphi

O código-fonte desse exemplo pode ser baixado em:
https://bitbucket.org/tdevrocks/tutorial-criando-meu-app-step-by-step