Desenvolvimento Web / Desenvolvimento Mobile

Passo a passo para consumir API utilizando o jQuery dentro do Ionic FrameWork

Vamos consumir a API nativa do Work Control (desenvolvido com PHP) para disponibilizar informações em tempo real dentro do nosso aplicativo híbrido.

Por Gustavo Web

Publicado por Gustavo Web
em 15/06/2017 às 08h00

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR
Compartilhe:

Salve salve galera, Gustavo Web aqui mais uma vez e vamos continuar ainda falando sobre o Ionic Framework para desenvolvimento de app híbrido.

Se você perdeu os artigos anteriores, dá uma lida nos artigos dessa categoria antes de continuar!

Bom, uma das principais atividades que você vai ter dentro do seu aplicativo provavelmente será o consumo de API para que possa trafegar com informações entre o dispositivo e suas informações que podem estar armazenadas na nuvem, dentro do seu servidor, de um repositório… Enfim, as possibilidades são várias!

No nosso caso, como o PHP é o nosso Rock e não pode deixar o Rock morrer, vamos trabalhar com API desenvolvida em PHP e consumir ela com jQuery. Ambiente perfeito na minha opinião!

O tio Rob desenvolveu desde as primeiras versões do Work Control®, uma API linnnnda de se trabalhar já nativa na ferramenta. Para consumir, é necessário ter uma key, que funciona como uma chave criptografada para ter certeza de que somente determinada aplicação possa consumir os dados.

Não vou entrar muito no foco no que diz respeito a API Work Control, mas trabalhando com a ferramenta basicamente você terá:

Nota: Caso você não seja aluno do Work Control®, você pode entrar em contato com a nossa equipe através do e-mail [email protected] para ter maiores informações.

Como produto final da API do WC, teremos um vetor multidimensional listando as informações… No nosso caso, estamos trabalhando com a padrão nativa da ferramenta que nos entrega os posts. Saca só no resultado que eu tenho, se chamar a API diretamente pela URL eu terei um json com todas as informações:

 

Eu escondi algumas informações (que embora seja do localhost) não vem ao caso :P

Você pode ver que eu já tenho o título do artigo, subtítulo, link para a imagem, categoria... Só montar um HTML e CSS legal para colocar isso dentro do meu APP.

Bom, com esses dados em mãos, para colocar isso dentro do Ionic é tranquilo! Só seguir esses procedimentos:

  1. Criar uma div
  2. Criar um seletor para ela
  3. Importar meu script js para o Projeto
  4. Abrir o meu bloco jQuery dentro do meu aplicativo
  5. Fazer a consulta da minha API informando todos os dados
  6. Executar um each do vetor recebido
  7. Montar a estrutura do html
  8. Inputar esses dados dentro da div criada

Por mais que isso pareça vários passos a serem executados, a gente faz isso com pouquíssimas linhas de código, no entanto, que os dois primeiros passos a gente resolve com apenas uma linha de código html simples:

Você já viu esse trecho no nosso artigo anterior, onde eu mostrei com maiores detalhes a hierarquia do projeto, e nesse trecho eu tenho uma div com a classe j_content_home. Essa classe é o que eu vou utilizar para encapsular o elemento :)

Eu coloquei o bloco inteiro para você entender o contexto, mas o que importa mesmo é somente a penultima linha com a div e a class j_content_home!

O terceiro passo, é bem simples também! Consiste em criar um arquivo .js e colocar ele na index do meu projeto.

Sem segredos até aqui também… Analisando a estrutura das pastas do Ionic é bem tranquilo de se localizar… Você pode notar que estou dentro da tag <head> e eu já importei alguns arquivos do jQuery! Nossa última linha está a importação do nosso scriptApp.js.

Novamente, somente a última linha nos importa, mas coloquei as linhas anteriores para dar um contexto maior na aplicação e você identificar onde estamos!

Todos os demais procedimento a gente resolve com algumas linhas de código, não vou entrar no mérito de dizer o que cada uma das linhas fazem. O intuito aqui é mostrar como é fácil trabalhar com as ferramentas, no âmbito da programação você pode dar uma olhada no nosso Club e consultar os cursos de jQuery do tio Robson se quiser aprender mais sobre!

Esse código abaixo é o nosso arquivo scriptApp.js

Escondi determinadas informações (embora sejam do meu localhost), mas você analisando o código você consegue ver que eu passo determinados parâmetro para a função, e um target (destino) no último parâmetro… Logo, todas as informações serão concatenadas dentro do nosso bloco HTML.

Formatando nossos elementos com CSS básico a gente consegue chegar a um produto final como o do print a seguir:

Passo a passo para consumir API utilizando o jQuery dentro do Ionic FrameWork

Esses prints foram tirados através do Ionic View, instalado do meu celular! Eu já falei um pouco sobre esse processo e é excelente para testar a usabilidade do APP! Por mais que o visual fique identico ao do navegador, testar no dispositivo faz toda a diferença...

Para você ter uma noção de como fica no navegador, dá uma olhada nesses outros print's:

Passo a passo para consumir API utilizando o jQuery dentro do Ionic FrameWork

Passo a passo para consumir API utilizando o jQuery dentro do Ionic FrameWork

E aí? O que achou de trabalhar com essa ferramenta? Eu até agora estou curtindo muito trabalhar com essa nova tecnologia e aprendendo coisas novas! Me conta como está sendo sua experiência com esse artigo e o que você espera que seja visto nos próximos artigos... Eu pessoalmente respondo todos os comentários relacioados a esses posts para ver o que mais vocês querem saber! Me fala aqui abaixo nos comentários, fechado?

Aquele forte abraço pra ti :)

Compartilhe:

Em Desenvolvimento Web:

Deixe seu comentário: