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.
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.
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.
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
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
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'}} |
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
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.
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).
É 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)
Esse passo é importante, pois podemos utilizar o endereço de uma aplicação publicada para testar no aplicativo Cronapp Browser. |
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.
Sempre que o projeto no Cronapp for reaberto, será necessário refazer esses passos caso a URL usada seja do Debug. |
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
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 ( 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
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.
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
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
Nessa página