Uma dúvida muito frequente pra quem está começando a desenvolver aplicativos híbridos (usando HTML5, etc.) é: como faço para o meu aplicativo consultar informações que estão em um banco de dados remoto?

Essa é uma questão realmente interessante.

Analisando o cenário

Primeiramente temos que entender a arquitetura que rege essa comunicação, ou seja, temos que ter em mente que esse padrão nada mais é do que uma arquitetura cliente/servidor convencional, onde nosso cliente é o aplicativo e o servidor é o “concentrador de informações”.

Explicando a solução

Com isso em mente, conseguimos perceber que é preciso criar um mecanismo que possibilite o cliente obter as informações para, em seguida, poder manipulá-la da maneira que quisermos. Esse mecanismo tem que ser implementado no SERVIDOR, através de um recurso chamado Webservice (também definido como API em alguns casos): ele que será a “ponte” entre o cliente o os DADOS na comunicação.

Para implementar esse Webservice temos várias possibilidades (varia de acordo com a estrutura e tecnologia suportada em nosso servidor), mas irei abordar aqui as tecnologias Apache+PHP  e, nesse caso, podemos utilizar um framework que agiliza a criação desse Webservice, o SlimFramework (conheça mais http://www.slimframework.com/).

Conforme informações da própria documentação do SlimFramework, basta criarmos uma pasta no servidor, no qual os arquivos do SlimFramework serão colocados. Nao vou entrar detalhadamente sobre como construir o Webservice pois isso está disponível na própria documentação, mas basicamente basta escrevemos o código de modo que ele acesse a base de dados e retorne as informações que são convenientes para nosso aplicativo consumir.

Como resultado da implementação do Webservice, vamos ter algumas URL’s, no qual vão permitir eu acessar diferentes recursos ou informações de meu servidor.

EXEMPLOS:

http://www.meusistema.com.br/WEBSERVICE_DIR/clientes (Como resultado, posso implementar a consulta a tabela de clientes e retornar um pacote JSON/XML com os dados)

http://www.meusistema.com.br/WEBSERVICE_DIR/produtos (Como resultado, posso implementar a consulta tabela de produtos e retornar um pacote JSON/XML com os dados)

Realizando a comunicação

Feito isso – criado e implementado o Webservice – como fazemos pra “chamar” os dados (alcançar a ponte de acesso) ????!!!

Basta trabalhar com o recurso $.ajax do jQuery (ou qualquer outra biblioteca que estiver utilizando), onde este assume o papel de “chamar o Webservice” – através da URL do serviço – e irá receber os dados, manipulando essas informações recebidas como for necessário (guardando no banco de dados local, exibindo na tela, etc.).

Pra mais informações sobre como trabalhar com a “chamada do Webservice” via $.ajax (jQuery), consulte a documentação da mesma em http://api.jquery.com/jquery.ajax/.

Em linhas gerais, é assim que conseguimos fazer um aplicativo acessar informações salvas e disponíveis em um servidor web.

Pra resumir, segue abaixo uma ‘modelagem’ do funcionamento aqui citado.

image

Finalizando

De modo geral, a intenção deste artigo foi apresentar o modelo de funcionamento para a comunicação entre o aplicativo móvel e o servidor remoto, permitindo assim o consumo de dados pelo dispositivo. Como mencionei durante o texto, os frameworks e as tecnologias para a criação, implementação e consumo do Webservice pode (e vai) variar, mas a arquitetura e a lógica a serem seguidas serão sempre estas.