TUTORIAL: CRIANDO MEU APP STEP-BY-STEP –

PARTE I

Nível    
O desenvolvimento de aplicações móveis utilizando Delphi tem gerado muito “pano pra
manga” em comunidades Delphi nas redes sociais. Com o interesse cada vez maior, de
programadores novos ou experientes, em desenvolver apps com a ferramenta, surgem
também as dúvidas. Muitas comuns como o simples fato de navegar entre telas de um app ou
ainda dúvidas mais avançadas como o uso de Bluetooph com Delphi em iOS e Android. Muito
bem, baseado nisso resolvi criar alguns posts com orientações e um passo-a-passo explicando
as principais dúvidas encontradas pela internet.

Nesse primeiro post vamos começar do início:

1. Criação da app;
2. Criação do layout;
3. Navegação entre as abas;
4. Navegação entre formulários.

Requisitos:
1. Delphi XE5 ou superior;
2. Aparelho Android;
3. Aparelho iPhone com iOS 7 ou superior (caso deseje testar no iOS);
 

Obs 1. Serei bastante detalhista no início para abranger iniciantes e experts.

Obs 2. Usarei nesses primeiros posts o RAD Studio XE6, devido ao novo recurso de formulários
Master que terei que explicar em um segundo momento separado.

 
Criação da App
Vamos começar, evidentemente, abrindo o Delphi e criando a aplicação salvando-a em um
diretório de nossa preferência. Utilize o menu File > New > Multi-Device Application – Delphi (no
XE7, em XE5 e 6 o nome do menu é diferente, apenas verifique o correto). (Figura 1)

Figura 1. Início da aplicação

Na tela que se abre, escolhemos o layout inicial de nossa aplicação. Não se preocupe com isso
agora, podemos mudar com o tempo. Portanto, vamos escolher a opção Blank Application.

Somos levados ao primeiro Form de nossa app e vamos chama-la de frmMain (Principal).

Existem milhares de técnicas diferentes para criar nosso layout e a navegação do aplicativo,
mas nesse caso vou mostrar como eu tenho criado meus aplicativos em minha empresa, assim
fica como sugestão.
Para quem já está utilizando o Delphi XE7, deve estar visualizando algo diferente na IDE. São os
layouts Master. Agora é possível criar um layout principal e deixar que a IDE selecione o correto
para cada dispositivo no momento de abertura de nosso form. Mas isso é assunto para outros
posts, por enquanto vamos nos focar em celulares Android e iOS de 4″. Para isso selecione
Android 4″ Phone caso esteja no XE7, os demais leitores que estão em versões anteriores
utilizem as opções Google Nexus 4 ou Samsumg Galaxy S2/S4, etc. (Figuras 2 e 3)

Criando meu app step-by-step

Figura 2. Definição de Layout no XE7

Figura 3. Definição de Layout XE4,5 e 6

Feito isso o que vamos começar a fazer é entender ao certo como nossa app irá se comportar.
Tive a ideia de criar um app para controle de locadora (Quem nunca fez um sistema de
locadora ao fazer um curso de programação, não é mesmo? ;)), pois já estamos familiarizados
com algumas das tabelas e informações que uma locadora precisa ter para funcionar.

Nesse primeiro momento faremos a criação de nossas listas sem o uso de banco de dados, ou
seja, aprenderemos a usar o esquema de Prototipação do Delphi criando dados fictícios para
visualizarmos o funcionamento do app.

Salvemos o projeto então. Na propriedade Name do formulário insira o texto “frmMain” (sem as

áspas) e salve o formulário usando File > New > Save As… Dê o nome de UntMain e salve-o no
diretório que desejar. Em seguida salve o projeto usando File > New > Save Project As… Dei o
nome
de LocadoraDelphi.dproj 

Definição do Layout
Muito bom. A primeira coisa a se definir, na minha opinião, é desenhar como a aplicação
deverá se comportar. Eu me utilizo de várias técnicas para isso. Como não sou designer, mas
tenho alguma noção de desenho, comprei um bloco de folhas A3 tipo flipcharting onde
costumo desenhar, rusticamente claro, o fluxo da minha aplicação. (Figura 4).
Figura 4. Folha A3 para desenho

Para quem não tem a mínima noção de desenho, existem inúmeras ferramentas no mercado
que ajudam nesse quesito. Mas enfim, não é nosso foco aqui. Vamos desenhar na nossa mente
mesmo o que desejamos que nosso app tenha. Proponho as seguintes telas:

 Login e Senha;
 Lista de Títulos;
 Lista de Usuários/Clientes;
 Lista de Títulos Alugados;
 Alugar: Tela para definir o aluguel para um cliente;
 Baixar Título Alugado;
A ideia é que o app seja utilizado pelo administrador da ocadora como se fosse a extensão de
seu programa de uso no desktop da loja, onde o cara poderá consultar rapidamente algumas
informações sobre o título. Nossa tela default ser a Lista de Títulos que deverá abrir logo que
de início. Faremos um Login e Senha utilizando Parse.com como backend de banco de dados
para facilitar e aprender a usar o serviço;

Teremos também um menu no estilo Facebook Mobile que se popularizou bastante, ou seja,

abriremos as opções tocando em um botão com Detalhes e o menu se abrirá na lateral.

Criando o menu inicial

Para criamos o menu inicial, vamos utilizar um TLayout e um TListBox. Ambos devem ser
colocamos no formulário e NÃO um dentro do outro. Adicione primeiro o TLayout e faça as
seguintes configurações:

 Name: lytMain;
 Align: Client;
Agora adicione um TListBox no Form e então faremos uma série de mudanças nele conforme
mais abaixo.
#Dica: Caso tenha dificuldades em selecionar o Form principal já que o TLayout ficou por cima
de tudo, apenas clique no TLayout e pressione 1x o ESC. Isso fará com que o Form seja
selecionado.

E caso já tenha adicionado o TListBox dentro do TLayout, basta acessar a caixa de estrutura e

mover o TListBox para cima do Form;
Configure o TListBox como segue:

 Name: lstMnuMain
 Align: Cient
 GroupKind: Grouped
 StyleLookup: transparentlistboxstyle
Agora que configuramos as principais propriedades, precisamos adicionar os itens que serão
nossos Itens de Menu. Agruparemos em categorias, por isso utilizamos a
propriedade GroupKind para dar um aspecto mais profissional acrescido
do StyleLookup como Transparent.

Obs. Em dado momento faremos a personalização da aplicação incluindo um layout mais

customizado

Clique agora com o botão direito no TListBox e escolha Items Editor… para acessarmos o

gerenciador de itens do ListBox. No ComboBox à direita da caixa, encontramos os tipos de itens
que podemos adicionar. Usaremos sempre dois tipos (Figura 5):

 TListBoxGroupHeader: Cabeçalho do Grupo;

 TListBoxItem: Item

Figura 5. Tipos de Item de ListBox

Figura 6. Ordem os menus

Adicione 2 (dois) TListBoxGroupHeader e 4 (quatro) TListBoxItem e coloque-os na ordem

da Figura 6. Cada item do ListBox possui suas propriedades, isso significa que podemos utilizar
a propriedade Text como “Caption” do nosso menu e ainda outras propriedades
como ItemData para adicionar um botão Acessory e uma imagem para ele.

#Dica: Em Mobile, os botões (figuras) que ficam à direita do item na lista são chamados
de Acessory (Acessório). Servem para indicar se o item possui um “Mais Informações”, “Sub
Detalhe” ou ainda um “Check” para por exemplo indicar que o item está selecionado para
alguma ação.

#Dica: Procure observar outros aplicativos e seguir os conceitos padrões de cada sistema
operacional, pois o principal fator para que uma aplicação tenha sucesso é: Usabilidade. Lembre-
se que o usuário já está acostumado com certos comportamentos nos apps que já utiliza no dia-a-
dia.
Configuraremos somente os itens de nosso interesse. Clique no ListBoxItemGroupHeader1 e
configure como a seguir:

 Name: lstgrpListas
 Text: Cadastros
O segundo grupo, modifiquei como a seguir:

 Name: lstgrpConfig
 Text: Configurações
Agora configure o TListBoxItem1 como a seguir:

 Name: lstitTitulos
 Text: Títulos
  ItemData > Acessory: More
Repita os passos anteriores para configurar os demais itens de menu. Nosso menu final terá
que ficar semelhante a Figura 7. Os Names, respectivamente, são:

 lstitTitulos
 lstitUsuarios
 lstitTitulosAlugados
 lstitLogin

Figura 7. Menu final

Observe que não colocamos todos os itens de menu na tela nesse primeiro momento. Vamos
“comer o boi por partes” como dizem meus conterrâneos. Muito bom! Nossa mecânica para
carregar cada Form será a seguinte:

1. Para cada Lista, teremos um TForm com suas próprias funcionalidades, barras de
navegação, etc;
2. Não utilizaremos Show ou ShowModal, ao contrário. Criaremos o TForm no momento
oportuno e carregaremos ele dentro do TLayout principal em nosso frmMain utilizando
um AddObject. Dessa forma temos controle total sobre todos os forms abertos.
Por conta do segundo item que colocamos o menu (ListBox) e o layout (TLayout) dentro do
formulário e não um dentro do outro como mencionado anteriormente. Nosso lytMain será
um mero espectador, receberá dentro dele todos os objetos (Forms) que precisarmos navegar.

Para ter certeza que fez as configurações corretas, seu projeto deverá se parecer com a Figura
8 que se refere a caixa Struture do Delphi.
Figura 8. Caixa Structure

Primeira codificação
Perfeito até aqui e sei que estão eufóricos para codificar tudo. Então mãos a obra. Primeiro
criaremos métodos para mostrar e ocultar o menu. Para isso, teremos que adicionar alguns
elementos visuais ao formulário para termos uma aparência mais interessante.

Adicione ao formulário 2 (dois) novos componentes. 1 TFloatAnimation e 1 TRectangle. Eles

devem ficar DENTRO do lytMain. O componente de animação deve receber o Name =
AnimateDrawer. Já o TRectangle precisa ser configurado como a seguir:

 Name: recBackground
 Opacity: 0,5
 Fill.Color : Black
 PropertyName: Position.X
Essas configurações darão um aspecto mais profissional. Se desejar conferir a estrutura dos
componentes novos, observe a Figura 9.
Figura 9. Aspecto final do menu

Vamos ao código dos métodos agora. Crie duas novas Procedures na seção Private do Form
como na Listagem 1:

Listagem 1. Código dos novos métodos

?
1 procedure HideMenu;
2 procedure ShowMenu;
Pressione Ctrl + Shift + C para criar o escopo de cada método e vamos ao código de cada um
conforme a Listagem 2.

Listagem 2. Código dos métodos criados para Mostrar e Ocultar o Menu

?
1 procedure TfrmMain.HideMenu;
begin
2
  //Posiciona o ListBox de menu fora da visão
3   lstMnuMain.AnimateFloat('Position.X', -Self.ClientWidth);
4  
5   AnimateDrawer.StartValue := Self.ClientWidth - 40;
6   AnimateDrawer.StopValue  := 0;
7   AnimateDrawer.Start;
end;
8
9  
procedure TfrmMain.ShowMenu;
10 begin
11   AnimateDrawer.StartValue := 0;
12   AnimateDrawer.StopValue  := Self.ClientWidth - C_MnuEspaco;
13   AnimateDrawer.Start;
14  
  //Reposiciona o menu principal
15   lstMnuMain.AnimateFloat('Position.X', 0);
16
17
18  
  //Mostra o retângulo preto sobre a lista ativa
19   ShowBackground(Self.lytMain, CancelMenu);</pre>
20 <pre>end;
21
22
No primeiro método, HideMenu, posicionamos o ListBox do menu para fora da área de
visualização utilizando uma animação através do método AnimateFloat. Esse é método é um
dos que mais gosto de usar. É bem simples e praticamente todos os
objetos Firemonkey possuem. Basta passar a propriedade que se deseja animar no primeiro
parâmetro e o novo valor no segundo parâmetro. Nesse caso usamos Position.X com o valor -
Self.ClientWidth, que fará o componente se descolar para a esquerda.

Em seguida animamos o layout usando o nosso componente TFloadAnimation. O código ao

meu ver dispensa comentários assim como o método ShowMenu que é exatamente o inverso.
Apenas observe que reposicionamos o ListBox na posição 0 (Zero).

Teremos ainda que criar outros métodos que nos ajudarão a controlar melhor o menu.
Retorne as seções Private e Public do form e adicione os novos métodos conforme a Listagem
3.

Listagem 3. Outros métodos de controle do menu

?
1
2 private
3   { Private declarations }
  procedure HideMenu;
4   procedure ShowMenu;
5   procedure CancelMenu(Sender: TObject);
6 public
7   { Public declarations }
  procedure ShowHideMenu;
8   procedure ShowForm(AObject: TFmxObject);
9   procedure ShowBackground(AParent: TFmxObject; AOnClick: TNotifyEvent = nil);
10   procedure HideBackground;
11 end;
12
Vamos as explicações:

 CancelMenu: Será necessário para esconder o retângulo opaco da tela e ocultar o menu;

 ShowHideMenu: Controla a visibilidade do menu;
 ShowForm: Indicaremos ao formulário Main quem deverá estar visível ou invisível;
 ShowBackground e HidBackground: Responsáveis por mostrar e ocultar o retângulo;
Pressione Ctrl + Shift + C para criação dos escopos e codifique como na Listagem 4.

Listagem 4. Métodos de controle do menu

? procedure TfrmMain.CancelMenu(Sender: TObject);

begin
8   HideBackground;
9   ShowHideMenu;
10 end;
11
12  
procedure TfrmMain.ShowHideMenu;
13 var
14   Position : single;
15 begin
16   {Verifica a posição atual do menu e mostra ou oculta conforme necessário}
  Position := Self.ClientWidth - 40;
17   case Self.lytMain.Position.X = Position of
18     true  : HideMenu;
19     false : ShowMenu;
20   end;
21 end;
22  
23 procedure TfrmMain.ShowForm(AObject: TFmxObject);
var
24   I : Integer;
25 begin
26   HideBackground;
27  
28   for I := 0 to Pred(Self.lytMain.Children.Count) do
29     TControl(Self.lytMain.Children[I]).Visible :=
      TControl(Self.lytMain.Children[I]) = TControl(AObject);
30 end;
31  
32 procedure TfrmMain.ShowBackground(AParent: TFmxObject; AOnClick: TNotifyEvent);
33 begin
34   //Atualiza o evento OnClick do retâgulo com a ação enviada por parâmetro.
  ///Isso fará com que saibamos a tela (ou ação) que deve ser mostrada ao clicar
35   recBackground.OnClick := AOnClick;
36   recBackground.Parent  := AParent;
37   recBackground.BringToFront;
38   //Modifica a transparência do retângulo e anima a transparência
39   recBackground.Opacity := 0;
  recBackground.Visible := True;
40   recBackground.AnimateFloat('opacity', 0.5, 0.1);
41 end;
42  
43 procedure TfrmMain.HideBackground;
44 begin
45   recBackground.AnimateFloat('opacity', 0, 0.1);
  recBackground.Visible := False;
46 end;
47
Vamos as explicações de cada método iniciando por CancelMenu. Esse método apenas
chama HideBackground e ShowHideMenu forçando o retângulo opaco desaparecer e checando
se o menu está aberto ou fechado para saber para onde temos que ir.

Em seguida ShowHideMenu. Através da variável Position conseguimos detectar qual o

posicionamento do Menu (nosso ListBox, lembre-se). A variável recebe a largura da tela atual,
ou seja, funcionará tanto com celulares quanto com tablets e na horizontal ou vertical.
E subtraímos 40 px para evitar que a tela (listagem) atual suma completamente da visão do
usuário. Com base na posição do menu, decidimos se o mostramos ou ocultamos.

ShowForm será responsável por receber o objeto (Form, Layout, TabControl) alvo e deixa-lo
visível para o usuário. A ideia é simples. Quando codificarmos o OnClick de cada Item de Menu,
faremos um AddObject dentro do nosso lytMain, em seguida chamamos ShowForm para ocultar
todos os outros formulários e mostrarmos somente o atual. Isso é necessário, pois
nosso ListBox está configurado como como Transparente. Se deixarmos visíveis os demais
forms, corremos o risco de sobrepor as telas.
Por fim ShowBackGround e HideBackGround. No primeiro método, recebemos o Parent do
objeto que está sendo carregado, para que o retângulo opaco fique sobre ele, assim teremos
um aspecto “esmaecido” do form quando o menu estiver aberto. Também recebemos um
evento OnClick caso desejarmos que ao clicar no retângulo algo aconteça. Por fim trazemos ele
para frente e configuramos sua opacidade, visibilidade e a animação para aparecer. Reparem
que estou usando novamente o método AnimateFloat (dessa vez no retângulo) passando como
parâmetro a propriedade ‘opacity’ e os valores 0.5 e 0.1 nos parâmetros seguintes.

O 0.5 é o novo valor da opacidade, para deixa-lo levemente transparente. O 0.1 é o tempo que
levará para a animação ocorrer.

Criando o segundo FORM e testando o menu

A essa altura do campeonato, provavelmente conseguiremos compilar normalmente nossa
aplicação sem problemas. Então, agora vamos criar um segundo formulário para testar se
nosso menu e nossa mecânica está funcionando perfeitamente.

Crie um novo form usando File > New > Firemonkey Mobile Form –   Delphi e marque a opção  HD
FireMonkey Form. Por fim clique em Ok, para finalizar (Figuras 10 e 11). Agora temos um
segundo formulário que será usando para nossa Lista de Títulos.

Figura 10. Criação do novo Form

Figura 11. Confirmação do novo Form

Vamos apenas configurar as propriedades mais básicas e o layout principal do formulário. Na

Parte II do post faremos a prototipação da janela para evitar que esse post fique ainda maior.

Primeiro adicione um ToolBar no formulário e mude sua propriedade Name

para toolTitulos. Inclua em seguida um TLayout ao formulário e chame-o de lytTitulos. Também
configure-o para que fique com alinhamento Client (Align = Client). Nós carregaremos o
lytTitulos dentro do lytMain no formulário principal.

Dentro do TLayout adicione um TabControl e configure suas propriedades como a seguir:

 Name: tabctrlTitulos
 TabPosition: Bottom
Clique com o botão direito no TabControl e adicione uma nova aba usando o item  Add
TTabItem. Nessa TabItem (que chamamos de Aba) colocaremos nossos controles para acesso a
base de dados. Por enquanto vamos adicionar apenas um TLabel com alinhamento Client e
o Text igual a “Listagem de Títulos”. Modifique também a
propriedade TextSettings.HorzAlign para Center, apenas para sinalizar quando carregarmos essa
janela no dispositivo ou emulador.

Para fechar, adicione um TSpeedButton dentro da ToolBar. Ele será nosso botão voltar.

Configure-o como a seguir:

 Name: spbBack
 StyleLookup: detailstoolbutton
 Align: Left
 Margins.Left: 8
Teremos então uma aparência semelhante a imagem da Figura 12.
Figura 12. Aparência do formulário Títulos

A única codificação por hora nesse Form é fazer a chamada ao método ShowHideMenu do

formulário principal. Isso mesmo! Nós vamos fazer um Use Unit do formulário principal em
nossa Listagem de Títulos. Clique em File > Use Unit e adicione a unit UntMain na seção
Implementation do form.

Em seguida clique duas vezes no único botão dessa tela e adicione a linha de código a seguir:

?
1 frmMain.ShowHideMenu;
Fazendo isso, nós chamamos o método ShowHideMenu que se encarregará de mostrar o menu
novamente para que o usuário possa entrar em outra janela.

Uma última alteração no código-fonte da janela, retire a declaração da variável com a instância
do form, não precisaremos dela. Localize a seção implementation e apague as linhas como a
seguir:

?
1 var
2   frmTitulos: TfrmTitulos;
Retornamos agora para o formulário principal para fazer a as devidas chamadas e abrir a nossa
tela de títulos. Acesse File > Use Unit e adicione o formulário de títulos a seção interface do form
principal. Agora selecione o lstitemTitulos e adicione o código da Listagem 5 ao evento OnClick.

Listagem 5. Código do evento OnClick para abertura da tela Listagem de Títulos

?
1
if not Assigned(FTitulos) then
2   FTitulos := TfrmTitulos.Create(Self);
3  
4 {Adiciona o Layout de Pedidos ao Layout Principal que controla tudo}
5 lytMain.AddObject(FTitulos.lytTitulos);
6 {Deixa todos os layouts invisíveis e deixa o layout alvo visível}
ShowForm(FTitulos.lytTitulos);
7
8  
if Sender <> Self then
9   ShowHideMenu;
10
O que estamos fazendo aqui é bem simples na verdade. Primeiro verificamos se há alguma
instância do formulário de títulos na memória. Note que usamos uma variável FTitulos para isso
e logo em seguida criamos o Form frmTitulos. A variáveis FTitulos precisa ser declarada na
seção Private do form principal, como abaixo:

?
1 ...
2 private
3   FTitulos: TfrmTitlos;
...
4
Na seqüência adicionamos o TLayout lytTitulos (Form Titulos) ao TLayout lytMain do formulário
principal. Por fim chamamos ShowForm para fazer com que o form se torne visível. A última
instrução evita que o menu apareça caso quem esteja chamando o método seja o próprio form
principal.

Estaria pronto para testar nesse momento, mas ainda vamos fazer umas configurações.
Lembram-se que nosso formulário de títulos será aberto assim que a app inicializar? Pois bem,
teremos que codificar então o evento OnCreate do form principal. Para isso selecione o Form e
clique duas vezes no evento OnCreate e codifique como na Listagem 6.

Listagem 6. OnCreate do form principal

?
1 procedure TfrmMain.FormCreate(Sender: TObject);
2 begin
3   {Layout Escuro Global}
4   recBackground.Visible     := False;
5   recBackground.Align       := TAlignLayout.Contents;
6  
7   {Modifica a largura do ListBox para a mesma do formulário, pois o mesmo está como Align
8   lstMnuMain.Width      :=  Self.ClientWidth;
9   lstMnuMain.Position.X := -Self.ClientWidth;
10  
11   //Traz para frente o layout principal evitando sobreposição de listas
12   lytMain.BringToFront;
13  
14   lstitTitulosClick(Sender);
15 end;
Precisamos de algumas personalizações aqui. Primeiro nós deixamos o retângulo invisível e
mudamos seu alinhamento para Contents, ou seja, ao conteúdo, equivalente a opção Client.

#Dica: A diferença entre os alinhamentos Client e Contents, é que Contents encobre também as

barra de status do aparelho, normalmente visível na parte superior.
Em seguida ajustamos o menu principal e trazemos o layout para frente de todos os objetos.
Por fim, chamamos o método lstitTitulosClick para forçar a abertura do formulário Listagem de
Títulos.

E a última codificação acontece no evento OnClose do formulário principal. Forçamos a

liberação da instância do formulário de títulos caso esteja aberto.

?
1 if Assigned(FTitulos) then
2   FTitulos.DisposeOf;
Atenção para o método DisposeOf. Não utilize em Mobile o método Free ou FreeAndNil, pois
acabam entrando na fila do ARC (Gerenciamento de Memória do dispositivo). O DisposeOf força
o FREE da variável imediatamente. Em outras palavras, variáveis ou objetos devem ser liberados
de memória usando esse método.

Testando a app
É óbvio que depois de chegarmos até aqui, estamos curiosos para testar a aplicação. Então é
hora de contar um segredo. Não exatamente um segredo, mas uma dica útil. Não vamos
perder tempo compilando para iOS ou Android, ou ainda nos simuladores/emuladores. Vamos
testar direto no Windows, pois todas as funcionalidades até aqui codificadas funcionam
perfeitamente no Windows.

Para isso, acesse o Project Manager à sua esquerda (caso não tenha mudado as configurações
do Delphi) e clique com o botão direito em cima de Target Platforms. Clique em Add Platform e
escolha Win32 na janela que aparece (Figuras 13 e 14).

Figura 13. Adição de plataforma

Figura 14. Plataforma Win32

Agora basta clicar duas vezes na plataforma e executar a aplicação.

#Dica: Caso não precise debugar a aplicação, selecione Release em Build Configurations, pois é

mais rápido o deploy, inclusive dos aparelhos.
Se tudo correr bem, teremos telas semelhantes as figuras seguintes:
 

Conclusão
Assim como mencionado desde o início, existem milhares de maneiras diferentes de criar
layouts e navegação em uma app Mobile. Essa é apenas uma delas. Vimos nesse post como
criar nosso primeiro menu no estilo Facebook e como interagir com mais de um form na
mesma aplicação.

No próximo post, veremos como prototipar a aplicação. Criaremos uma lista de títulos
utilizando LiveBindings e o componente PrototypeBindSource assim como o uso de DataModule.

A discussão referente a esse post estará disponível nos comentários ao final desse post e
também na comunidade Delphi Experts no Facebook através do link:

https://www.facebook.com/groups/DelphiExperts/

Acesse, faça seus comentários e tire suas dúvidas.

Uma atualização. Existe uma constante mencionada no método ShowMenu, C_MnuEspaco.

Troquem ela pelo valor 40. Esse é o espaço que a listagem ficará afastada quando o menu
estiver aberto.
?
1
2 procedure TfrmMain.ShowMenu;
begin
3   AnimateDrawer.StartValue := 0;
4   AnimateDrawer.StopValue  := Self.ClientWidth - 40;
5   AnimateDrawer.Start;
6  
7   //Reposiciona o menu principal
  lstMnuMain.AnimateFloat('Position.X', 0);
8
9  
  //Mostra o retângulo preto sobre a lista ativa
10   ShowBackground(Self.lytMain, CancelMenu);
11 end;
12
 

TUTORIAL: CRIANDO MEU APP STEP-BY-STEP

PARTE II

Nível    

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:

Generator Type Field Name

ContactBitmap ftBitmap Foto
ContactNames ftStrings Titulo
ContactNames ftStrings SubTitulo
AlphaColors ftUInteger CodTitulo
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.

 Generator Type Field Name

ContactBitmap ftBitmap Foto
ContactNames ftStrings Nome
ContactNames ftStrings Apelido
AlphaColors ftUInteger CPF
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.
?
1 unit Login;

2  
3 interface

4  

5 uses

6   {$Region 'FireDac'}

7   FireDAC.Stan.Intf, FireDAC.Stan.Option,

  FireDAC.Stan.Param, FireDAC.Stan.Error, FireDAC.DatS, FireDAC.Phys.Intf,

8
  FireDAC.DApt.Intf, FireDAC.Stan.Async, FireDAC.DApt, FireDAC.UI.Intf,
9
  FireDAC.Stan.Def, FireDAC.Stan.Pool, FireDAC.Phys, FireDAC.Phys.SQLite,
10
  FireDAC.Stan.ExprFuncs, FireDAC.FMXUI.Wait, Data.Bind.EngExt,
11
  Fmx.Bind.DBEngExt, FireDAC.Comp.UI, Data.Bind.Components, Data.Bind.DBScope,
12
  Data.DB, FireDAC.Comp.Client, FireDAC.Comp.DataSet,
13
  {$EndRegion}
14
  System.SysUtils, System.Types, System.UITypes, System.Classes,
15
  System.Variants, FMX.Types, FMX.Graphics, FMX.Controls, FMX.Forms, FMX.Dialogs,
16
  FMX.StdCtrls, FMX.MobilePreview, System.Rtti,
17
  REST.Backend.ServiceTypes, REST.Backend.MetaTypes, System.JSON,
18
  REST.OpenSSL, REST.Backend.ParseProvider, REST.Backend.Providers,
19
  REST.Backend.ServiceComponents;
20
 
21 type
22   TLogin = class
23     private
24       FSession        : TBackendEntityValue;

25       FSessionStarted : Boolean;

26       FObjBackEndUsers: TBackendUsers;

27     public

28       constructor Create;

29       destructor Destroy;

30       function  Login(AUser, APassword: string): Boolean;

31       function  Logout: Boolean;

32       function  SignUp(AUser, APassword: string): Boolean;

33     published

34       property Session        : TBackendEntityValue read FSession          write FSession;

35       property SessionStarted : Boolean             read FSessionStarted   write FSessionStarted;

36       property ObjBackEndUsers: TBackendUsers       read FObjBackEndUsers  write FObjBackEn

37   end;

38  

implementation
39

40  

end.
41
42

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:

1 if MeuObjetoLogin.SessionStarted then

2   //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.

?
1 constructor TLogin.Create;

2 begin

3   inherited Create;

4   {$IFDEF DEBUG}

    FSessionStarted := True;
5
  {$ELSE}
6     FSessionStarted := False;

7   {$ENDIF}

8 end;

9  

10 destructor TLogin.Destroy;

begin
11
  inherited Destroy;
12
end;
13
 
14
function TLogin.Login(AUser, APassword: string): Boolean;
15
var
16
  tmpSession : TBackendEntityValue;
17
begin
18
  try
19
    FObjBackEndUsers.Users.LoginUser(AUser, APassword, tmpSession);
20
    FSession        := tmpSession;
21
    FSessionStarted := True;
22
    Result          := True;
23
  except on E:Exception do
24
    begin
25       { Erro de usuário e senha }
26       if E.Message.Equals('Parse Error: invalid login parameters (101)') then
27         raise Exception.Create('Usuário ou Senha inválidos!');
28       Result := False;

29     end;

30   end;

31 end;

32  

33 function TLogin.Logout: Boolean;

34 begin

35   try

    FObjBackEndUsers.Users.Logout;
36
    FSessionStarted := False;
37
    Result          := True;
38
  except on E:Exception do
39
    begin
40
      { Erro de usuário e senha }
41
      if E.Message.Equals('Parse Error: invalid login parameters (101)') then
42
        raise Exception.Create('Usuário ou Senha inválidos!');
43
      Result := False;
44
    end;
45

46   end;

47 end;

48  

49 function TLogin.SignUp(AUser, APassword: string): Boolean;

50 var

51   Session : TBackendEntityValue;

begin
52
  try
53
    { Valida se nome de usuário já existe na base }
54
    FObjBackEndUsers.Users.QueryUserName(AUser, Session);
55
    if Session.ObjectID.IsEmpty then
56
    begin
57
      { Cria o usuário já fazendo login na sessão }
58
      FObjBackEndUsers.Users.SignupUser(AUser, APassword, nil, FSession);
59
      ShowMessage('Usuário e Senha cadastrado com sucesso!');
60
      FSessionStarted := True;
61
      Result          := True;
62
    end
63
    else
64     begin
65       ShowMessage('Nome de Usuário já existe. Por favor escolha outro!');
66       Result := False;
67     end;

68   except on E:Exception do

69     raise Exception.Create('Erro de internet!' + E.Message);

70   end;

71 end;

72

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:

1 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:

1 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:

?
1 frmMain.FLibLogin.ObjBackEndUsers := bkendUsuarios;

2 case swtRegistrar.IsChecked of
3   true  : frmMain.FLibLogin.SignUp(edtUsuario.Text, edtSenha.Text);

4   false : frmMain.FLibLogin.Login(edtUsuario.Text, edtSenha.Text);

5 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 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.