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 novo 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

Chamando o recurso da câmera

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 ( localizada em "Código Fonte / Principal / mobileapp / www / js /") e selecione Novo → Bloco de Programação. Ao abrir a janela "Novo", selecione a opção "Bloco de Programação Vazio" e Avance, em seguida adicione o nome do Arquivo "Imagem", da função de "ObterFotoMobile" e clique em finalizar. (Figura 2) 

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

Arrastaremos os blocos "Obter Imagem" e "Ler Arquivo", ambos da sessão "Dispositivos Móveis". Seguindo o exemplo da Figura 3, modificaremos o retorno do bloco "Obter Imagem" para "enderecoImagem" (1); adicionaremos a variável que acabamos de renomear no parâmetro do bloco "Ler Arquivo" (2); selecionaremos a opção "ARRAYBUFFER" no retorno do bloco "Ler Arquivo" (3) e ajustaremos os parâmetros no bloco "Obter Imagem": Tipo de destino: DATA_URI, Fonte da imagem: CAMERA e Tipo de Mídia: PICTURE (4).

Somente para teste, adicionaremos o bloco "Exibir Notificação" no retorno de Sucesso do bloco "Ler Arquivo" exibindo a variável "enderecoImagem" a fim de exibir o endereço da foto no Smartphone (5). (Figura 3)

Figura 3 - Blocos usados para obter fotos do smartphone

Alterando o layout

Por padrão, a página user.view.html (Código Fonte / Principal / mobileapp / www / views / logged / ) só possui os campos: Email, Nome, Login e Senha. Vamos arrastar o componente imagem nessa tela para exibir a foto que o usuário irá inserir.

Abra o a página user.view.html, insira o componente imagem e edite a propriedade Origem (scr), como na Figura 4: Selecione o componente arrastado (1), clique no ícone "Editar expressão" da propriedade Origem (2), Na janela "Editar expressão" selecione a aba "Fonte de Dados" (3) e finalize escolhendo o atributo "picture" da fonte de dados User (4).

Figura 4 - informando a origem do componente imagem

O passo da Figura 4 irá gerar a diretiva AngularJS "{{User.active.picture}}" que passará a imagem pro componente quando existir um endereço no campo picture obtido da fonte de dados. Podemos adicionar uma simples verificação para quando não tenha nada (null) no campo picture, exibindo a imagem padrão do Cronapp para projetos mobiles:

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

Chamando o evento

Vamos usar o toque no próprio componente de imagem para chamar o evento que ativará a câmera do smartphone. Para isso siga os passos da Figura 5: selecione novamente o componente imagem que arrastamos para a página user.view.html (1), clique na aba eventos (2), clique no botão "…" da propriedade "Ao Clicar" (ng-click) (3), na janela Events que irá abrir clique no botão "…" do campo "Selecione o Bloco de Programação" (4) e selecione o bloco que criamos anteriormente (5).

Figura 5 - Adicionando evento de clique no componente da imagem

Testando o bloco

Nesse momento já temos os passos mínimos para chamar o recurso de câmera do smartphone, salvar a imagem e adquirir o endereço no smartphone. 

Vamos configurar o aplicativo Cronapp Browser para testar o que fizemos até aqui.

Configurando a URL Back-end

Vamos testar nossa aplicação diretamente no Smartphone, para isso, baixe o Aplicativo de desenvolvimento do Cronapp nas lojas oficiais do Android (Play Store) ou IOS (Apple Store).

Salve os arquivos alterados e execute a aplicação (F9) ou Debug (F11) (Figura 6 (1) ). Após a compilação da aplicação, clique no ícone de "Abrir Navegador" e selecione a opção "Navegador" no menu (2), uma nova aba no seu browser irá abrir com a URL do projeto, copie a URL (3). Após copiar a URL, podemos fechar a aba em que copiamos a URL, pois não iremos mais utilizá-la. (Figura 6)

Figura 6 - Copiando a URL do projeto no navegador padrão do Sistema operacional

Na barra de ferramentas, selecione Dispositivos móveis → Configurações. Cole a URL no campo "URL Back-end" da janela "Configuração" que irá abrir e clique em salvar. (Figura 7)

Figura 7 - Colando o endereço do projeto no campo "URL Back-end" dentro das configurações dos Dispositivos móveis

A partir de agora o Cronapp Browser já está pronto para ser utilizado.

Testando a chamada da câmera

Na barra de ferramentas, selecione Dispositivos móveis → Executar → Cronapp Browser, uma janela com um QrCode irá abrir (Figura 8). Execute o Cronapp Browser no seu Smartphone e pressione o botão "Escanear código", direcione a câmera do seu dispositivo para o QrCode no monitor e o aplicativo começará a fazer o download do projeto em seu Smartphone, assim que concluir o download, o aplicativo irá rodar automaticamente o projeto.

Figura 8 - QrCode gerado pelo Cronapp para rodar a aplicação pelo smartphone usando o Cronapp Browser

Já no aplicativo, informe login e senha "admin", pressione no usuário admin (usuário padrão) e na tela de configurações do usuário, toque no componente da imagem para que a aplicação chame o recurso de câmera do aparelho. Assim que confirmar a imagem, a aplicação deve exibir uma notificação com o endereço da imagem armazenada no Smartphone. (Figura 9)

Figura 9 - Chamada do recurso de câmera do Smartphone e notificação do endereço da foto

Salvando o endereço em banco

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

Criação do bloco lado Servidor

Clique com o botão direito do mouse na pasta Bloco de Programação ( localizada em "Código Fonte / Principal / Código Fonte Servidor /") e selecione Novo → Bloco de Programação. Ao abrir a janela "Novo", selecione a opção "Bloco de Programação Vazio" 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, porém dessa vez estamos fazendo do lado servidor. 

Adicione 2 parâmetros para essa função: IdCliente e endereco (como na Figura 10).

Figura 10 - Adicionando parâmetros à função SalvarImagem

Crie uma variável com o nome "fonteDados" e arraste o bloco "Definir fonteDados" (Sessão Variáveis), após isso, arraste também bloco "Abrir consulta" (Sessão Banco de Dados) e adicione a variável idCliente (Sessão Variáveis) que é passado por parâmetro para a função. Selecione as configurações do bloco "Abrir consulta" e configure como na Figura 11. Se preferir editar no modo "Editar como texto", cole a consulta abaixo:

select u from User u where u.id = :idCliente

Figura 11 - Consultando os dados do usuário no banco a partir do seu Id

Com isso obteremos os dados do usuário para atualização. 

Arraste o bloco "Atualizar campo" (sessão Banco de Dados) e encaixe a variável "fonteDados", que criamos acima, no parâmetro "Fonte de dados"; escreva "picture" no parâmetro "Nome do campo" (se referindo a coluna da tabela User) e adicione a variável "endereco" (sessão Variáveis) no parâmetro "Valor do campo". (Figura 12)

Precisaremos de mais 2 blocos da sessão "Banco de Dados": "Atualizar" e "Obter objeto da fonte de dados". Encaixe a variável "fonteDados", no bloco "Obter objeto da fonte de dados". 

Por fim, clique nas configurações do bloco Atualizar e configure como na Figura 12.

Figura 12 - Atualização do objeto

Alterando bloco lado Cliente

De volta a função obterFotoMobile que criamos acima do lado cliente, adicione uma entrada de parâmetro na função, como fizemos no lado Servidor, mas nomeando para "idAtual".

Arraste o bloco "Chamar Bloco" (sessão Útil) e encaixe no retorno de Sucesso do bloco "Ler Arquivo". Clique em configurações do bloco "Chamar Bloco" 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 13)

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

Para finalizarmos essa função de bloco, vamos adicionar o bloco "Definir valor do atributo" (sessão Formulário) para atualizar a foto do componente imagem assim que a foto for feita pelo usuário. No parâmetro "Obter identificador" informe o nome do componente imagem da página user.view.html, o "Nome do atributo" que iremos alterar é o "src" e o "Valor do atributo" será o endereço da foto que temos na variável "enderecoImagem", como mostrado na Figura 14.

Figura 14 - Atualizando atributo do componente imagem.

Alterando a chamada do evento

Salve todos blocos criados/alterados e acesse a página User.view.html. Siga os passos da Figura 15: selecione o componente imagem que arrastamos anteriormente na página user.view.html (1), clique na aba eventos (2), clique no botão "…" da propriedade "Ao Clicar" (ng-click) (3), na janela Events que irá abrir, selecione a opção "Banco de Dados" (4) e por fim, selecione o parâmetro User.active.Id (5).

Figura 15 - Adicionando evento de clique no componente da imagem com passagem de parâmetro

Testando a aplicação

Salve todos os arquivos alterados e em seguida rode a aplicação como fizemos no passo 1.4. 

Com a aplicação em execução no smartphone, acesse um usuário já existente, como o usuário padrão 'admin' (login e senha: admin), pressione o componente de imagem, tirando uma foto e confirmando. O componente deverá atualizar automaticamente a foto. (Figura 16)

Figura 16 - Sequencia dos passos no aplicativo

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

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