Skip to end of metadata
Go to start of metadata

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.

Requisitos:

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

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.

Observação

Nesse exemplo iremos armazenar a foto no diretório da aplicação no próprio smartphone, enquanto o seu endereço ficará em banco. Porém, com o endereço da foto é possível salvar a foto em qualquer outro local, mas iremos deixá-la na pasta da aplicação para simplificar o tutorial.

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

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

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

Alterando a propriedade Origem (scr) do componente imagem
{{User.active.picture || 'img/nophoto.png'}}

3. 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 App Developer para testar o que fizemos até aqui.

1. 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).

Saiba mais

É possível gerar um arquivo .apk para rodar diretamente no Android, porém, utilizando o aplicativo do CronApp facilita muito os testes no projeto.


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)

Saiba mais

Esse passo é importante, pois podemos utilizar o endereço de uma aplicação publicada para testar no aplicativo CronApp App Developer.


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 App Developer já está pronto para ser utilizado.

Saiba mais

Sempre que o projeto no CronApp for reaberto, será necessário refazer esses passos caso a URL usada seja do Debug.


2. Testando a chamada da câmera

Na barra de ferramentas, selecione Dispositivos móveis → Executar → CronApp App Developer, uma janela com um QrCode irá abrir (Figura 8). Execute o CronApp App Developer 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 App Developer.


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.

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

Consultando o cliente selecionado
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.

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

 

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

 

 

 

Nesta Página