Algumas aplicações mobile precisam que o usuário tire uma foto em seu Smartphone para adicioná-la na aplicação. Vamos aprender como utilizar esse recurso de forma simples e fácil utilizando o Cronapp.

Pré-requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.

1. Projeto do tipo mobile criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link ( Criar projeto );

Visão geral: exemplo

Nesse tutorial iremos aprender a chamar o recurso da câmera no Smartphone e salvar o endereço da foto em banco para ser carregada na aplicação.

Iremos utilizar a classe User que já vem criada em todo projeto no Cronapp e já possui o atributo "picture", onde salvaremos o endereço da foto. (Figura 1)

Figura 1 - Classe User que usaremos nesse tutorial

Passos

Função Servidor

Vamos criar uma função do lado servidor para salvarmos o endereço da foto em banco.

Clique com o botão direito do mouse na pasta Bloco de Programação servidor, selecione Novo → Bloco de Programação, ao abrir a janela "Novo", selecione a opção Bloco de Programação Vazio (Low-Code) e avance, em seguida informe "Imagem" no campo Nome do Arquivo, "SalvarImagem" no campo Nome da função e clique em finalizar, como foi feito na Figura 2.

Figura 2 - Criação da função de bloco do lado servidor

Em seguida iremos inserir 2 parâmetros na função SalvarImagem, clique em configuração e arraste 2 blocos de entrada, renomeio-os como na Figura 2.1, no primeiro insira "idCliente" e no segundo "endereco". 

Figura 2.1 - Adicionando parâmetros na função SalvarImagem

Bloco Atualizar

Arraste o bloco Atualizar (Sessão Banco de Dados), clique no ícone de engrenagem para configurar o bloco (Figura 2.2), selecione a entidade User e altere o Tipo para "Campos". Clique em + Novo Campo, selecione a opção Picture no primeiro campo, clique em + Nova Regra e selecione a opção Id no primeiro campo. Clique em OK para salvar.

No bloco Atualizar, adicione as variáveis idCliente e endereco (menu Variáveis) nos parâmetros idCliente e picture do bloco, respectivamente. 

Figura 2.2 - Consultando os dados do usuário no banco a partir do seu id

Com isso, essa função irá salvar o endereço da imagem no registro do id do usuário informado.

Função Cliente

Para ativar a função de adquirir a foto do Smartphone, precisaremos criar uma função do lado cliente.

Clique com o botão direito do mouse na pasta Bloco de programação Mobile (localizado em src/main/mobileapp/www/js/blockly/Imagem.blockly), selecione Novo > Bloco de Programação, ao abrir a janela "Novo", selecione a opção Bloco de Programação Vazio (Low-Code), avance, em seguida, adicione ao campo Nome do Arquivo "Imagem", no campo Nome da Função escreva "ObterFotoMobile" e clique em finalizar. (Figura 3)

Figura 3 - Criação da função de bloco do lado cliente

Configuração dos blocos

Na função ObterFotoMobile que criamos, adicione uma entrada de parâmetro na função, como fizemos no lado Servidor, mas nomeando para "idAtual".

Primeiramente iremos associar a view user.view.html ao bloco, abra as configurações do editor de bloco (engrenagem no canto superior/direito da tela) e na janela que abrir, selecione a página "User.view.html" clicando no botão "..." do campo Formulário de referência e salve. Em seguida, vamos inserir os blocos e configurá-los.

Comece inserindo o bloco Obter Imagem (sessão Dispositivos Móveis) como mostrado no destaque 1 da Figura 3.1, adicione no parâmetro de execução Sucesso o bloco Alterar valor do campo (sessão Formulário) para atualizar a foto do componente imagem assim que a foto for feita pelo usuário. No parâmetro Campo do bloco "Alterar valor do Campo" informe o valor do componente imagem da página user.view.html, e o Valor será o endereço da foto que receberemos na variável "enderecoImagem", obtido através do bloco Obter Imagem, como mostrado no destaque 2 da Figura 3.1.

Figura 3.1 - Blocos usados para obter fotos do smartphone

Blocos e seus parâmetros:

1. Obter Imagem: abre o aplicativo da câmera ou recupera uma foto do álbum de fotos do dispositivo.
   • Retorno: Renomearemos a variável do bloco "Obter Imagem" de "item" para "enderecoImagem";
   • Tipo de destino: FILE_URI;
   • Fonte de imagem: CAMERA;
   • Tipo de Mídia: PICTURE;
   • Permitir edição: Falso;
2. Alterar valor do campo: Altera o conteúdo de um componente.
   • Campo: User.active.picture;
   • Valor: Variável enderecoImagem;

Arraste o bloco "Chamar bloco servidor assíncrono" (sessão Útil) e encaixe no retorno de Sucesso do bloco Obter Imagem. Clique em configurações do bloco Chamar Bloco servidor assíncrono e selecione a função "SalvarImagem" do lado servidor (azul) e encaixe as variáveis "idAtual" e "enderecoImagem" nesse bloco, ambas estão na sessão Variáveis. (Figura 3.2)

Figura 3.2 - Chamando função servidor no lado cliente

Edição da view

Por padrão, a página user.view.html mobile da pasta logged possui os campos: Email, Nome, Login, Picture e Senha. Removeremos o campo Picture clicando sobre ele com o botão direito do mouse, selecionando Remover elemento e clicando em OK. Depois vamos arrastar o componente imagem e colocá-lo acima do campo E-mail, para exibir nessa tela a foto que o usuário irá inserir.

Figura 4 - informando a origem do componente imagem

1. Selecione o componente imagem, acesse suas propriedades;
2. Clique no ícone Editar expressão da propriedade Origem;
3. Na janela Origem, selecione a aba Campo da Tela;
4. Finalize escolhendo o atributo picture da fonte de dados User;

O passo-a-passo da Figura 4 irá gerar a diretiva AngularJS "{{User.active.picture}}" no campo Origem da Propriedades do componente Imagem, que passará a imagem pro componente quando existir um endereço no campo picture obtido da fonte de dados. Sugerimos adicionar a expressão abaixo no campo Origem para que caso não tem nada (null) no campo picture, seja exibida a imagem padrão do Cronapp para projetos mobiles:

{{User.active.picture || 'img/nophoto.png'}}

Adicionar evento

Vamos usar o bloco ObterFotoMobile no evento Ao Clicar do componente de imagem para chamar o evento que ativará a câmera do smartphone. Para isso siga os passos da Figura 4.1:

Figura 4.1 - Adicionando evento de clique no componente da imagem

1. Selecione o componente imagem que arrastamos para a página user.view.html;
2. Clique na aba Eventos;
3. Clique no botão "…" da propriedade Ao Clicar (ng-click);
4. Na janela Ao Clicar que irá abrir clique na aba Bloco de Programação;
5. Em seguida no botão "…" do campo Selecionar Bloco de Programação;
6. Selecione o bloco que criamos anteriormente;
7. Na aba Bloco de Programação altere o valor do campo referente ao idAtual, selecione os valores Expressão e User.active.id e clique em OK. (Figura 4.1)

Adicionar valor ao componente

Agora iremos inserir o valor User.active.picture no componente.

Figura 4.2 - Inserindo o valor no componente Imagem

1. Selecionaremos o componente Imagem;
2. Role para baixo na aba propriedades e escreva "ng-model" e "User.active.picture" nos campos Nova Propriedade como na Figura 4.2;
3. O resultado será exibido no campo Valor.

Teste

Salve todo o projeto e em seguida rode a aplicação. Em seguida, vá ao menu superior da IDE em Dispositivos Móveis > Executar e escolha a opção Cronapp Browser. Abra o aplicativo no seu Smartphone e aponte a câmera para ler o QR Code.

Com a aplicação em execução no smartphone, entre com o login e senha "admin", vá no menu Usuários e acesse um usuário existente em Editar, pressione o componente de Imagem, tire uma foto e confirme. O componente deverá atualizar automaticamente a foto (Figura 7).

Figura 5.1 - Sequência dos passos no aplicativo

A tabela User no banco de dados deve exibir o endereço da imagem que está armazenada no diretório do aplicativo no smartphone do usuário, como podemos ver na Figura 7.1.

Figura 7.2 - endereço da foto no smartphone do usuário