A pedido de muitos leitores nas comunidades Delphi, iniciaremos nessa publicação um tutorial para aprendermos a utilizar a câmera do smartphone ou tablet (ou ainda a biblioteca de fotos) para tirar fotos, exibir no aplicativo ou ainda salvar em bancos de dados local (SQLite) ou remoto (SQLServer) através de DataSnap.

Nessa primeira parte, mostraremos como montar uma simples aplicativo que possibilitará o usuário a chamar a câmera ou a biblioteca de fotos para obter novas imagens e salva-las no SQLite, banco de dados FREE.

Salvar foto no banco SQLite com Android e iOS

Nesse pequeno exemplo, vamos imaginar uma tabela de Produtos onde poderemos exibir a foto do produto juntamente com seu Nome, Descrição, tudo isso em um ListView. Então criaremos apenas uma única tabela em nosso banco de dados SQLite. Vamos iniciar criando o layout de nossa aplicação.

Crie um novo aplicativo Multi-Device Application – Delphi utilizando o menu File > New no Delphi 10 Seattle. Utilize um layout de aplicativo em branco (Blank Application) e ao terminar, modifique o nome do form principal para frmPrincipal e salve-o como UntPrincipal.pas. Logo em seguida salve o projeto utilizando o nome FotoSQLite.dproj ou como você desejar. Também modifique a largura do formulário (width) para 320px, ou deixe-o como está se preferir.

Insira um componente TTabCtrl na janela, alinhe-o como Client na propriedade Align e chame-o de tbctrlPrincipal. Adicione a ele 2 (duas) TabItem, a primeira com o nome tbitemListagem e a outra como tbitemDetalhe. Dentro da tbitemListagem adicione um ToolBar e dentro do ToolBar um Label com alinhamento Contents e Text igual a Listagem. Alinhe também o texto desse Label para o centro usando a propriedade TextSettings.HorzAlign.

Ainda dentro da primeira TabItem adicione um componente TListView com o nome igual a lsviewListagem e coloque-o como alinhamento Client. Modifique a sub-propriedade ItemAppearance dentro da propriedade ItemAppearance (existe duas propriedades mesmo, uma dentro da outra) escolhendo o valor MultiDetailItem (Figura 1). Esse valor somente existe se você já instalou o componente ListView que acompanha o Delphi, caso não o tenha feito, siga esse tutorial.

Figura 1. Configurando o ListView

Mude agora o foco para a tbitemDetalhe e adicione uma nova ToolBar nessa TabItem. Insira um componente SppedButton nessa ToolBar e dê o nome a ele de spbVoltar. Modifique seu alinhamento para Left e configure sua margem sequerda (Margin.Left) para 8px. Seu StyleLookup receberá o valor “backtoolbutton”, sem as aspas, claro. Por fim adicione um Label dentro da ToolBar e modifique seu texto para “Detalhe” e alinhe-o como Contents em Align. Altere também o TextSettings.HorzAlign para Center.

Essa aba será o Detalhe do item selecionado no ListView, ou seja, quando o usuário tocar em um item, essa aba será mostrada e os detalhes do items estarão sendo mostrados aqui, assim poderemos inclusive, modificar a foto.

Insira dentro do tbitemDetalhe um componente ListBox e dê o nome a ele de lsboxDetalhe com o alinhamento Client para ocupar toda a tela abaixo da ToolBar. Insira 1 (um) itens nesse ListBox. Apague a propriedade Text dele e aumente a altura para 130px.

No item de ListBox adicione um componente TImage e modifique as seguintes propriedades:

• Name: imgFotoDetalhe
• Align: Left
• Margin.Bottom: 4
• Margin.Left: 4
• Margin.Right: 4
• Margin.Top: 4
• Width: 134

Ainda dentro do item de ListBox, adicione um componente TLayout. Modifique suas margens Bottom, Right e Top com o valor 4 e alinhe o componente utilizando Client na propriedade Align. No interior do Layout adicione dois labels. O primeiro com alinhamento Top e o segundo Client. No segundo Label modifique a propriedade Margin.Top para 4, assim não ficará grudado no primeiro Label. Modifique também a propriedade TextSettings.VertAlign para Leading. Com isso, nós teremos uma janela semelhante a Figura 2 abaixo.

Figura 2. Exemplo de tela de detalhe

Praticamente terminamos a parte de layout, precisamos preparar alguns detalhes. Como mencionado, o usuário poderá tocar em um item na tab de Listagem e ver os detalhes na aba seguinte. Nessa aba o usuário poderá tocar na imagem (TImage) e trocar a imagem desse produto, gravando a figura tanto em tela como no SQLite.

Para isso usaremos algumas ações personalizadas usando o componente TActionList. Por isso, insira um desses componentes em tela e clique duas vezes nele. Clique na “setinha” ao lado do botão New nessa caixa de diálogo que se abre. Adicione uma ação do tipo TChangeTabAction com o Name igual a actMudarAba. Depois insira uma ação TakePhotoFromLibraryAction  (Name = actFotoDaBiblioteca) e uma ação TakePhotoFromCameraAction (Name = actFotoDaCamera). Nossa caixa de diálogo se parecerá com a Figura 3.

Figura 3. Ações

Vamos agora preparar a primeira codificação do nosso aplicativo. Acesse a página de código do Delphi e logo em seguida a seção Private no topo da página. Crie um novo método chamado MudarAba, como abaixo:

  procedure MudarAba(ATabItem: TTabItem: Sender: TObject);

Pressione Ctrl + Shift + C para que o Delphi crie o escopo da função e em seguida codifique como a seguir. Veja que estamos configurando a propriedade Tab da ação actMudarAba para o valor recebido em ATabItem e em seguida chamamos o método ExecuteTarget da ação. Isso será útil para evitarmos toda hora ter que navegar de uma aba para outra via código duplicado. Dessa forma reaproveitamos o código em várias situações.

  actMudarAba.Tab := ATabItem;
  actMudarAba.ExecuteTarget(Sender);

Aproveite e acesse o evento OnItemClick do ListView lsviewListagem e codifique-o digitando a linha abaixo:

  MudarAba(tbitemDetalhe, Sender);

Em outras palavras, ao tocar no item de listagem, seremos redirecionados para a segunda aba do TabCtrl. Por fim, mude para a aba de detalhe e clique duas vezes no botão spbVoltar para que possamos acessar seu evento OnClick. Codifique-o como abaixo:

  if (qryProdutos.State in dsEditModes)  then
    qryProdutos.Post;

  MudarAba(tbitemListagem, Sender);

Assim o usuário poderá voltar à aba de Listagem quando desejar. Ainda testamos se a tabela está em modo de edição e em caso positivo, gravamos a tabela.

Newsletter: Inscreva-se em nossa Newsletter e receba todas as atualizações de nosso blog. É rápido e fácil. Basta preencher os campos no formulário à direita do blog na parte superior. Confirmar seu cadastro em sua conta de e-mail e pronto! Você receberá um resumo semanal com as publicações da semana anterior.

Criando o banco de dados

Em nossos tutoriais sempre utilizamos o aplicativo SQLite Expert Personal, disponível gratuitamente na internet, mas fique a vontade para usar o software que desejar. Com o software aberto, acesse o menu File > New DataBase para criarmos um novo banco de dados vazio. Na janela que se abre, coloque o nome do arquivo e o diretório onde será salvo, de preferência o mesmo em que o aplicativo foi salvo. (Figura 4).

Figura 4. Salvando o banco

Com o banco criado, clique com o botão direito do mouse sobre o nome do banco (Nós colocamos como BancoDados.s3db) e selecione New Table para criarmos uma nova tabela. Insira um primeiro campo nessa tabela chamado FOTO do tipo IMAGE. Adicione também dois novos campos, como abaixo:

1. Nome: TITULO
2. Tipo: NVARCHAR
3. Tamanho: 20

1. Nome: DESCRICAO
2. Tipo: NVARCHAR
3. Tamanho: 50

Esses últimos dois campos serão usados para mostrarmos, respectivamente, o nome e a descrição do produto na listagem. Salve a tabela com o nome de Produtos (Figura 5).

Figura 5. Tabela Produtos Salva

Acesse a aba Data na janela do SQLite Expert e em seguida clique no ícone para adicionar um novo registro. Quando o novo registro aparecer, clique duas vezes nele para que uma janela de edição seja aberta. Digite o nome do produto em TITULO e sua DESCRICAO. Em seguida clique no botão Image Editor e insira uma imagem do computador. Isso irá simular um novo produto com foto e tudo (Figura 6).

Figura 6. Tabela Produtos

Configurando o banco na aplicação Mobile

Retorne ao Delphi e vamos agora fazer a configuração para visualizar os dados da tabela em nossa aplicação. Insira um componente FDConnection em tela e mude seu Name para fdConexao. Clique duas vezes nele e vamos configurar a conexão com o banco SQLite. Escolha SQLite no campo Driver ID e na propriedade Database aponte para o BancoDados.s3db. Modifique a propriedade Mode para ReadWrite. Pressione Ok para fechar a janela e desmarque a propriedade LoginPrompt. Agora adicione um componente do tipo TFDPhysSQLiteDriverLink a janela.

Precisamos preparar o banco para ser aberto quando estivermos rodando o aplicativo no mobile, então acesse o evento OnBeforeConnect do fdConexao e digite a linha abaixo:

  fdConexao.Params.Values['Database'] := 
    TPath.Combine(TPath.GetDocumentsPath, 'BancoDados.s3db');

Não esqueça de adicionar a Unit System.IOUtils à cláusula Uses do formulário para termos acesso as classes TPath.

Perfeito, agora adicione um componente FDQuery e modifique seu Name para qryProdutos, ele serão o componente que usaremos para acessar e mostrar os dados da tabela Produtos em tela. Acesse sua propriedade SQL e digite a query de listagem dos produtos, como abaixo:

  SELECT FOTO, TITULO, DESCRICAO FROM PRODUTOS

Clique com o botão direito do mouse no componente Query e selecione Fields Editor. Na janela que se abrirá, clique novamente com o direito e selecione Add all fields, para adicionar todos os campos da SELECT em nosso componente.

Binding dos campos

Estamos quase chegando ao fim do nosso tutorial. Precisamos ligar os campos da tabela aos campos em tela usados para que o usuário possa ter acesso a essas informações. Para isso, clique com o botão direito no formulário e selecione Bind Visually. Localize na janela os componentes qryProdutos e lsviewListagem. Ligue os campos da tabela às células do ListView clicando e arrastando. Se tiver dúvidas, consulte nosso vídeo Biding vs ListViews disponível no YouTube. Faça as ligações como seguem:

• Asterisco => Synch
• FOTO => Item.Bitmap
• TITULO => Item.Text
• DESCRICAO => Item.Detail1

Se tiver dúvidas observe a Figura 7 abaixo:

Figura 7. LivingBindings

Se quiser testar para ver se está tudo ligado corretamente e possível de ser visualizado no ListView, basta marcar a propriedade Active do Query Produtos (qryProdutos) para True. Se os dados aparecerem no ListView, então todas as ligações estarão corretas. É provável que a imagem não esteja mostrando, se isso ocorrer, acesse a propriedade ItemAppearanceObjects do ListView. Abra então ItemObjects e dentro dela a propriedade Image. Marque True na propriedade Visible (Figura 8).

Figura 8. Deixando a imagem visível

A aba Detalhe também precisa ser “lincada” nos campos da tabela, então para isso localize ainda na janela do Binding os componentes Label que adicionamos para serem, respectivamente, TITULO e DESCRICAO. Arraste os campos TITULO e DESCRICAO para a propriedade TEXT desses componentes. Também arraste o campo BITMAP da query para a propriedade de mesmo nome no componente imgFotoDetalhe.

A tela final se parecerá com a Figura 9.

Figura 9. Binding Final

Codificando a troca de foto

Agora precisamos apenas fazer com que ao clivarmos na imagem, sejamos indagados pelo método de troca de figura: Biblioteca ou Nova Foto. Nós usaremos o componente TfgActionSheet da suite de componente FGX. Caso não possua esses componentes instalados, leia nosso Tutorial: Mostrando o progresso de uma tarefa usando os componentes FGX para aprender como instalar no Delphi. Esses componentes são totalmente FREE.

Coloque um componente desse em tela e clique duas vezes na propriedade Actions dele. Uma nova janela se abrirá. Agora clique no botão New (único botão ativo). Uma ação será adicionada. Clique nela e na propriedade Caption, adicione o texto “Foto da Câmera”. Repita esse processo para adicionar uma nova ação e insira o Caption “Foto da Biblioteca”.

Na propriedade Action de cada ação criada no fgActionSheet, ligue-o a respectiva ação criada no ActionList, ou seja, uma ação para buscar a foto no diretório do smartphone e outra ação para acionar a câmera do aparelho.

O que estamos fazendo aqui é bem simples. Nós chamaremos o método Show do componente fgActionSheet para que mostre ao usuário uma espécie de diálogo onde terá duas opções: Foto da Câmera ou Foto da Biblioteca. Desse modo poderá escolher como adicionar uma nova figura ao produto. Quando o usuário tocar em uma das escolhas, nós chamamos a ação correspondente. Talvez seja necessário personalizar a propriedade CustomText em cada ação no ActionList e também.

Clique duas vezes sobre o componente ActionList e em seguida encontre as ações correspondentes a foto, elas ficam na categoria Media Library. Clique em actFotoDaCamera e em seguida localize o evento OnDidFinishTaking. Dê dois cliques nele. Codifique como abaixo:

  if not (qryProdutos.State in dsEditModes) then 
    qryProdutos.Edit; 

  qryProdutosFOTO.Assign(Image);
 
  qryProdutos.Post;

Esse evento é acionado quando usuário seleciona uma foto na biblioteca se a ação for esta ou quando ele termina de tirar uma nova foto. Repita exatamente esse código no evento OnDidFinishTaking da ação actFotoDaBiblioteca. A segunda linha gravará o registro na tabela Produtos.

A última providência a se tomar é lançar o diálogo em tela para que o usuário possa escolher como trocar a foto. Para isso, acesse a aba de Detalhe e clique duas vezes no evento OnClick na imagem, ou seja, do imgFotoDetalhe. Codifique como abaixo:

  if not (qryProdutos.State in dsEditModes)  then
    qryProdutos.Edit;

  fgActionSheet1.Show;

Bem simples de entender. Nós primeiro verificamos se a query está em modo de edição. Para usar a constante dsEditModes, adicione Data.DB na cláusula Uses do formulário. Em seguida chamamos o método Show do fgActionSheet como já havíamos mencionado anteriormente.

Distribuindo o banco e testando o aplicativo

Reta final. Agora precisamos configurar o Delphi para enviar o nosso banco de dados para o aparelho e testar tudo que fizemos até agora. Então acesse o menu Project > Deployment. Selecione o Target Debug configuration – Android platform como na Figura 10.

Figura 10. Selecionando o Target

Encontre o botão Add New File, clique nele e localize o banco de dados. Adicione ele e em seguida configure a coluna Remote Path inserindo o caminho do banco no dispositivo “.\assets\internal\”, sem aspas como na Figura 11.

Figura 11. Configuração do caminho do banco no mobile

Para finalizar a aplicação, acesse o evento OnCreate do formulário e digite o código abaixo:

  tbctrlPrincipal.ActiveTab := tbitemListagem;
  qryProdutos.Active        := True;

O que estamos fazendo nesse momento é ativar a TabItem Listagem como principal e abrimos a tabela de produtos para podermos ver os dados no ListView. Feche a qryProdutos e a conexão com o banco em fdConexao se estiverem abertos. Isso pode causar problemas. Por fim, compile e execute o aplicativo no Android. Veja o resultado nas Figuras 12 e 13.

Curta e Compartilhe: Agora que você chegou até o fim desse tutorial, clique em Curtir e compartilhe nas suas redes sociais. Isso faz com que o blog cresça cada vez mais. Também clique nas estrelas no topo do artigo e dê a sua nota.

Figura 12. Tela inicial do aplicativo

Figura 13. Capturando foto no Detalhe

Conclusão

Como pudemos ver em nosso tutorial, gravar fotos no banco de dados é extremamente fácil. O campo IMAGE do SQLite é totalmente compatível com fotos da biblioteca ou da câmera do smartphone. Na parte II desse artigo, veremos como enviar a foto capturada no banco de dados local, para um banco de dados remoto.

Baixe o código-fonte completo

#GoToDelphi