Desenvolvimento Web / Desenvolvimento Mobile

Evoluindo no estudo da utilização de Ionic como framework de App Híbrido

Veja as aplicações e métodos fáceis de trabalhar. A interação do dispositivo com o aplicativo é bem fluída e muito tranquilo o desenvolvimento. Overview rápido de ferramentas, métodos da documentação e os primeiros passos no ambiente.

Por Gustavo Web

Publicado por Gustavo Web
em 13/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 e só continua lendo esse artigo se hoje você está com tempo para acompanhar as últimas novidades do meu estudo para desenvolvimento de app híbrido.

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

Seguinte, como falamos no artigo anterior, tomamos partido e desenvolver com o Ionic v 3.3.0 (última até o momento) para criar o nosso app híbrido aqui da UpInside!

Lembrando que o objetivo dessa série de artigos é mostrar para vocês a aproximação com outra linguagem de programação, ou no mínimo, sair da zona de conforto que estamos e se deparar com outra tecnologia totalmente inédita! Mais do que criar um app para a Up, eu quero mostrar para vocês como que eu estudo, aprendo, desenvolvo, tempo que levo para pegar os macetes, fontes de informações...

Enfim! Isso é válido para tudo que você encontrar de tecnologia. Caso você seja iniciante em PHP por exemplo, você vai notar que eu vou ter as mesmas dificuldades que você no início, mas com o método certo, perseverança e muito estudo a gente vai matar essa nova técnica de letra :)

Bom, depois de seguir a documentação para montar o ambiente (que por sinal é bem chatinho de montar no Mac) eu comecei a desenvolver meu primeiro projeto!

O ambiente consiste em algumas ferramentas, pacotes, plugins, e aplicativos para poder desenvolver! Que eu me recordo de cabeça eu tive que instalar:

Como meu projeto é de teste e eu estou testando vários recursos, eu já devo ter instalado quase todas as libs disponíveis (rs).

O procedimento de conhecer o Ionic foi bem natural, assim como tudo o que eu aprendo. De cara, eu queria entender a estrutura de pasta o porque de cada um dos arquivos, e ainda o porque que a src era igual a www…

Quando você inicia o "serviço" do ionic, ele fica ouvindo as modificações que são feitas nos arquivos… Você inicializa isso executando ionic serve na pasta raiz do seu projeto!

Esse "serviço" basicamente pega o que tem na pasta src, compila e gera o "produto final" na pasta www. Portanto, concentre-se em trabalhar com a src! Embora alguns arquivos (não trackeados acredito) ele não execute o autorefresh, nesse caso é necessário copiar o arquivo na mão para dentro da www e dar um F5 na página (pelo menos é assim que estou fazendo até o momento).

Assim que compreendi mais ou menos os arquivos, eu comecei a colocar as primeiras tags dentro dos arquivos para sentir o resultado! Óbvio que o print abaixo está com um pouco mais avançado do meu primeiro hello word, mas dá para ver que é bem tranquilo de se trabalhar!

Se você notar bem, é um pouco de HTML5 com tags específicas do ionic! Mas nada impossível de se deduzir o que cada item faz.. Você pode ver que nos botões tem um evento de click e eu chamo um método em cada um deles, eu vou mostrar um exemplo de método para você! O primeiro botão tem um evento click chamando um método touchID(), dá uma olhada como ele ficou:

Isso é tudo javascript! E o this.showAlert é um outro método que criei onde eu passo o título, o subtítulo e o botão que eu quero! Usando esse método eu exibo a mensagem no dispositivo já no padrão de cada sistema operacional. Tipo essa:

Nota: Esse teste eu fiz no browser! E o browser não tem o leitor biométrico do iphone, logo, essa mensagem foi gerada pela antepenultima linha do print acima.

Continuando com o nosso print da estrutura html (primeira imagem do artigo), você deve ter notado um input com uma classe information, e dependendo do método, eu usei o jQuery para adicionar um valor dentro dele, como no caso do botão de leitor de código de barras! Eu coloco o valor do código de barras ali dentro do input... Dá uma olhada nas imagens:

Método:

Se ligou no jQuery ali dentro? :O (Cade os aplausos?)

Aplicativo:

Pois é, eu tinha que ter clicado no OK, para mostrar no input, e acabei esquecendo e não tirei o print o.O (Se você é um bom observador, vai ver que esse teste já é dentro do meu celular, e não mais no browser! Mas calma que a gente já chega lá...)

Lembra que eu falei inúmeras vezes sobre utilizar o jQuery ao invés do Angular? Pois é! Consegui trabalhar com os dois dentro do mesmo código. Se você está seguindo o jQuery Essentials, você deve ter visto o Robson falando do conflito ao utilizar o $, então eu estou trabalhando com o jQuery mesmo.

Depois de colocar um botão e invocar um método eu comecei com testes beeeem simples! Com alert mesmo, mas logo que eu vi que funcionava eu corri na documentação e comecei a procurar mais recursos. Logo eu testei o leitor biométrico, embora só esteja disponível para iPhone o touchID eu consegui usar sem problema nenhum… Ainda ouso dizer que compilou de primeira hahah! E há outras libs para fazer isso com o Android também! E você ainda precisa de uma outra Lib para fazer diagnóstico no dispositivo para saber se você está dentro de um Android, iOS ou Windows Phone!

Dá uma olhada no método para utilizar a câmera do dispositivo!

Coisa linda né? Óbvio que não tem ação nenhum depois disso! Mas basta agora colocar a ação que quero!

Trabalhando com outros recursos, eu fiz o uso da Geolocalização, Alert, Barcode Scanner, Câmera, TouchID… Dá uma olhada em mais um método abaixo!

Se você leu o post anterior, eu falei sobre o Ionic Viewer! OOoooo coisa linda do Deuso! Depois de estar prontinho, basta você executar ionic upload e ele automaticamente sobe o app para dentro da sua conta e você pode rodar o aplicativo dentro do seu smartphone! Dá uma olhada nos prints:

 

Utilizei o jQuery também para consultar a API nativa do WorkControl e me retornar todos os posts da UP! Não estou filtrando categoria, e coloquei um limit de 25 artigos por ordem decrescente… Só um $.getJSON e está tudo funcionando! Dei um each no retorno e montei o artigo na listagem…. Fiz algumas parametrizações do CSS e veja como ficou :)

Eu não cronometrei o tempo de estudo… Mas se não me falha a memória, estou trabalhando nisso a umas 3 madrugadas seguidas.

Também já registrei meu ID na Apple Developers, você tem que pagar uma taxa anual (US$99 -> R$ 10382379 reais, mentira para ser exato no dia de hoje R$ 338,33) para poder publicar os seus apps, essa taxa é anual e demora 48h para liberar o cadastro! E eu não sei o que acontece daqui pra frente :)

Bom, por hora é somente essas as novidades, me conta aqui abaixo o que achou da evolução, se você está estudando comigo, se tem curiosidade em aprender também! Aquele abraço, e eu te vejo no próximo artigo!

Compartilhe:

Em Desenvolvimento Web:

Deixe seu comentário: