No último artigo desta série, vou criar o aplicativo móvel que irá consumir a API de integração de dados, que construímos no artigo anterior, e listar todos os clientes salvos na base de dados MySQL.

CRIANDO O APLICATIVO

A primeira coisa, após aberto o Intel XDK, é criar um novo projeto.

Pra este aplicativo, eu criei um projeto com template “Blank” que utiliza “HTML+Cordova”, além de marcar a opção “use AppDesigner”.

Para todos os fins, nosso aplicativo irá se chamar MobClientes, sendo este o nome do projeto que irei criar neste momento no Intel XDK, conforme figura abaixo:

Em tempo, neste projeto, irei utilizar a biblioteca de interface App Framework, no qual é solicitada a escolha assim que o Intel XDK terminar de criar o projeto. Caso tenha dúvidas sobre criação de um novo projeto no Intel XDK, assista essa vídeo-aula na qual explico detalhadamente o processo de criação de um novo projeto nesta ferramenta.

Após criado o projeto de aplicativo e selecionada a biblioteca de interface, nós vamos “montar o layout”. Para isso, vou utilizar apenas os componentes:

  • header – que irá conter o título do aplicativo na parte superior da tela;
  • text – logo abaixo do header, inseri este componente para comunicar ao usuário algumas ações. Por exemplo: ao clicar no botão “Carregar clientes”, iremos exibir uma mensagem que estamos buscando essas informações na API.
    IMPORTANTE: pra esse componente text, eu irei definir seu atributo id como “situacao” e também NÃO irei definir valor inicial para ele;
  • listview – localizado ao centro do layout, irá receber a lista de clientes que forem encontrados através da chamada a API (veremos posteriormente. Em resumo, será nosso “relatório mobile”
    IMPORTANTE: pra esse componente listview, eu irei definir seu atributo id como “listaClientes”;
  • footer – rodapé, que irá conter um botão de ação;
  • button – localizado dentro do footer, irá acionar a consulta a API e listar (na listview anterior) todos os clientes encontrados na tela.
    IMPORTANTE: pra esse componente button, eu irei definir seu atributo id como “btnClientes”;

Neste momento, nosso aplicativo possuirá o seguinte layout:

WHITELIST DOMAIN

Como menciono neste artigo, quando criamos um aplicativo no Intel XDK e vamos acessar informações externas via API, precisamos habilitar o acesso ao domínio no qual esse serviço está disponível.

Para isso, com nosso projeto aberto na ferramenta, vamos acessar a aba PROJECTS e, na seção CORDOVA HYBRID MOBILE APP SETTINGS, definir o acesso ao domínio “diegocavalca.com”, pois como citamos no artigo anterior, o acesso aos cadastros de clientes estará disponível na URL http://diegocavalca.com/articles/sistemadeclientes/api/clientes.

Veja na imagem abaixo:

Caso tenha dúvidas, novamente reforço a indicação para ler o artigo no qual explico detalhadamente porque fazemos essa configuração de domínios na whitelist do projeto.

CONSUMINDO A API E LISTANDO CLIENTES

Com a configuração de whitelist definida, agora podemos consumir a API de integração de dados e ter acesso aos cadastros de clientes em nosso banco de dados MySQL.

Para isso, basta colocarmos o código abaixo no arquivo index.html de nosso aplicativo no Intel XDK, imediatamente antes de fechar a tag <head>:

<script type="application/javascript">
    // Forçar uso do layout App Framework
    $.ui.useOSThemes=false;

    // Capturar o clique no botão #btnClientes...
    $(document).on("click", "#btnClientes", function(evt)
    {
        // Limpar todos os itens da lista...
        $("#listaClientes").empty();

        // Exibe a mensagem 'Carregndo clientes'
        $("#situacao").html("<center>Buscando clientes no banco de dados (API)...</center>");

        // Consumir a API...
        $.ajax({
            type: "GET",
            url: "http://diegocavalca.com/articles/sistemadeclientes/api/clientes",
            timeout: 3000,
            contentType: "application/json; charset=utf-8",
            //dataType: "jsonp",
            success: function (result, jqXHR) {

                // Interpretando retorno JSON...
                var clientes = JSON.parse(result);

                // Listando cada cliente encontrado na lista...
                $.each(clientes,function(i, cliente){
                    var item = "<li><h2>"+cliente.NOME+"</h2><p><b>Fone.:</b> "+cliente.TELEFONE+"</p><p><b>Email:</b> "+cliente.EMAIL+"</p></li>";
                    $("#listaClientes").append(item);
                });

                // Exibir mensagem com total de clientes encontrados...
                $("#situacao").html("<center>Foram encontrado "+clientes.length+" cliente(s)</center>");

            },
            error: function (jqXHR, status) {
                // Exibir mensagem de erro, caso aconteça...
                $("#situacao").html("<center>O servidor não conseguiu processar o pedido. Tente novamente mais tarde...</center>");
            },
        });

    });
</script>

Como vimos acima, eu “chamo”a API de integração de dados (linha 15) através do método Ajax, passando como parâmetro principal a URL no qual disponibilizei para consulta dos clientes cadastrados.

Indico que, em caso de dúvidas, além de ler mais informações sobre o método Ajax, revise o artigo anterior e entenda como construímos a API de integração de dados.

RESULTADO FINAL

Na guia EMULATE do Intel XDK, veremos então o resultado da nossa implementação feita no aplicativo, no qual – ao clicar no botão “Carregar clientes” – nosso app faz uma requisição a API de integração de dados e lista o resultado obtido em um componente listview. Veja abaixo esse resultado emulando o projeto no Intel XDK:

Observe que, após consumir a API, cada cliente cadastrado no banco de dados MySQL é listado no componente listview, exibindo o nome, telefone e email de cada cliente.

Em tempo, incluo abaixo uma captura de tela de meu dispositivo (iPhone 4S) rodando o aplicativo:

CONCLUSÃO

Chegamos ao fim desta série de artigos-tutoriais ‘Intel XDK – acessando dados externos com PHP, JSON e MySQL’, na qual apresentei todos os passos necessários para criar um aplicativo móvel, utilizando Intel XDK, que acesse dados disponíveis num servidor externo, salvos em um banco de dados MySQL.

Durante os artigos, mostrei:

  • Conceitos e tecnologias necessárias para criar o projeto;
  • Modelagem do banco de dados MySQL;
  • Estruturação do ambiente web e criação do relatório de clientes;
  • Desenvolvimento da API de integração de dados, em PHP, utilizando o SlimFramework;
  • Criação do aplicativo mobile no Intel XDK que acessa as informações disponibilizadas na API.

Com os conteúdos abordados nesta série, você terá o know-how necessário para criar sistemas realmente multiplataformas, customizando os dados da maneira que melhor se adeque em seu projeto.

A fim de facilitar o estudo, disponibilizo abaixo o link para download de todo o projeto que desenvolvemos durante a série, incluindo o ambiente web e o aplicativo mobile.

Link para download: https://mega.nz/#!vlhQgRrR!Rzq1t5qrUvuVFdqoCf5_tuKdjmAKU5jlMKT7ierid_k

Acompanhe também meu canal no Youtube: youtube.com/c/DiegoCavalca

Espero que tenha ajudo, uma vez que essa é uma dúvida que permeia o dia a dia de muitos desenvolvedores.

Grande abraço!