Criando uma mini loja virtual com PhoneGap - Partes 3 e 4

Na segunda parte deste artigo trabalhamos essencialmente com a criação do nosso serviço e dos métodos de fachada que servirão para intermediar o app mobile em si e a lógica de negócios (que inclui o próprio banco de dados) no servidor. Esse tipo de infraestrutura é necessário independente da linguagem de programação escolhida e é importante desde já que o leitor entenda, sobretudo, como o JavaScript e suas bibliotecas (Framework7, jQuery, etc.) se comunicam com os protocolos web, principalmente os baseados no Restful.

Nessa parte, trataremos de explorar mais recursos do Framework7, como componentes, funções utilitárias JavaScript, etc., com o intuito de auxiliar o jQuery no trabalho de dinamização do conteúdo. Veremos como criar a exibição de um produto selecionado pelo usuário, um mecanismo de parcelamento do valor total, bem como navegar entre páginas, como para a de checkout (carrinho de compras), que exibirá um picker com as opções de pagamento e a quantidade de produtos possível de ser selecionada pelo usuário.

Mas antes de dar prosseguimento, é aconselhável que o leitor atualize a sua versão do Framework7 (seção Links), visto que desde a primeira parte do artigo já foram lançadas atualizações, bem como novos recursos.

Manipulando as imagens do app

Antes de dar prosseguimento ao desenvolvimento do app, precisamos ajustar a forma como as imagens são manipuladas pelo mesmo, já que até o momento só as estamos exibindo de forma local, criando tags <img> e setando seus atributos src para URLs externas. Para isso, vamos usar a própria aplicação web que criamos na segunda parte, a qual possibilita não somente acesso às URLs dos serviços, como também de quaisquer recursos web (páginas HTML – estáticas ou dinâmicas, imagens, arquivos de CSS, JS, etc.). Façamos um pequeno teste: dentro da pasta WebContent do projeto web, crie uma nova pasta produtos e dentro desta, uma outra pasta img. Essa será a pasta que usaremos para salvar todas as imagens referentes aos produtos na loja virtual. Em seguida, salve uma imagem qualquer (pode usar a mesma de geladeira que usamos até então) dentro deste diretório. Ao fazer isso, você terá a mesma disponível através da seguinte URL:

http://192.168.56.1:8080/lojavirtual-web/produtos/img/geladeira-preta-brastemp.png

E é assim que vamos acessá-las daqui para frente. O leitor talvez esteja se perguntando como as imagens serão salvas dentro do projeto, todavia, considerando que você deva buscá-las de uma regra de negócio especifica, não vamos tratar desse ponto para não fugir ao foco do artigo.

Para o aplicativo, especificamente, precisaremos salvar não somente uma, mas várias imagens de um mesmo produto, logo, não podemos salvar suas referências na base de dados na tabela de tb_produto, já que a mesma salva apenas um dado diferente por produto cadastrado. Isso requer um relacionamento com uma segunda tabela, que chamaremos de tb_produto_imagens. Veja na Figura 1 o diagrama entidade relacionamento entre as duas referidas entidades.

Figura 1. Relacionamento entre as entidades Produto e Produto_Imagem.

A nova tabela consta de quatro campos, a saber:

· O identificador, auto incremento, de tipo inteiro;

· A coluna path, que se encarregará de salvar o caminho relativo da imagem (diz-se relativo porque consideraremos apenas o valor após a pasta /WebContent/);

· Uma coluna booleana (isPrincipal) para verificar se a imagem atual é a principal, ou seja, que será exibida na tela de listagem inicial;

· E a coluna de chave estrangeira, que conecta a tabela com a tb_produto.

Ainda precisamos executar o script SQL que cria a nova ...