Top Posts

Troubleshooting cglib AOP Exception

Continue lendo

Série Ionic: Um pouco sobre o Ionic + AngularJS

Posted by camilolopes | Posted in AngularJS | Posted on 25-04-2015

2

ionic-angular-opti

olá Pessoal,

Hoje vou falar rapidamente sobre esse cara aqui Ionic. Que tem ganhando bastante popularidade quando
se fala em desenvolvimento mobile hibrido. Mas, a pergunta o que esse cara faz de tão especial?

lets go…

Vamos entender…

Há ainda uma confusão sobre o que é o Ionic, ele é tão simples que não parece verdade. Vou explicar  nesse post de forma pratica com o que vivemos aqui na ITSLabs. Ter adotado o AngularJS no passado como nosso framework de front-end, hoje tivemos o ganho em desenvolver mobile com Ionic, pois não precisamos fazer quase nada para ter uma app mobile, claro só o trampo de desenhar a cara da app. Mas,  toda camada de serviço, já veio de graça da app web.

O Ionic…

Nada mais é que um framework front-end para mobile. Pense nele como um angular-ui, bootstrap. Ele é html e css e feito em cima angularjs, ou seja, se vc já desenvolve com angularjs, não nada que aprender, apenas usar o Ionic como vc usa o bootstrap ou angular-ui. Agora se vc nunca viu angularjs, terá que aprender o framework da Google para entender o que é um controller, services, factory etc. E dai saber como usar o Ionic, senão ficará perdido e achar tudo confuso. Mas, é muito mais simples que possa imaginar. Fizemos uma app aqui em menos 5 min, já integrando com o serviço no server.

Nosso cenário aqui

Para ficar mais claro, aqui na ITSLabs temos projeto com java no back-end + angularjs se comunicando via rest com jersey. E nada demais aqui. Quando pensamos em fazer app mobile, dai veio e agora? o que aproveitar? Com ionic aproveitamos tudo, desde os controllers e serviços que criamos no front-end, até o serviço rest que disponibilizamos, então só nos preocupamos em fazer o design, ver os componentes disponiveis no Ionic e ter mais de uma versão da app com diferente UX para validar qual seria mais apropriado para o perifl do usuário que estaria usando a versão. Fizemos tudo isso em minutos.

E como testar?

Ah, isso aqui parece uma piada. Tem uma app no Google Play chamado de Ionic View que permite testar sua app no celular, isso mesmo. Veja como funciona:

1. voce baixa o ionic view para o seu celular IOS ou Android

2. Cria a conta no Ionic View

3.Faz o upload da app do Ionic

4. Pronto. Agora é so usar clicando em view no IonicView

Ele irá simular a APP. Observe que não fizemos deploy pra iOS,mas conseguimos simular no Iphone por exemplo. O resultado no iOS não é diferente da app final. Porém, achei problemas no tablet Android 4.1 da Samsung na hora de simular pelo IonicView ele deixou zicado o front-end. Ainda não sei o motivo, mas ao fazer deploy no apk por exemplo está tudo certo.

Essa é a forma mais simples de testar se não quiser ter um simulador local na máquina.

Iai curtiu o Ionic view? Olha aqui nossa app:https://www.facebook.com/usecash

No meu Github.com/camilolopes tem um app de exemplo:

https://github.com/camilolopes/workspaceAngularJs

Conclusão

Eu confesso que estou gostando muito da experiência de desenvolvimento e preparei uma série que vou trazer nela o que estamos fazendo aqui na ITSLabs, pois tudo que estamos fazendo aqui vai para produção. Próximo posts da série vamos ver instalação,um pouco de mão na massa,e depois vamos chegar o grande momento de deploy e opções que temos de fazer isso pra colocar nosso app na store da vida.

abraço, see ya!!!

Related Posts with Thumbnails

Comments (2)

Muito bacana! Eu não conhecia!

Achei realmente interesse esse lance de aproveitar código AngularJS nas apps mobile! No final das contas, o que roda no meu smartphone é uma HTMLView ou coisa do tipo?

Um abraço e parabéns pelo artigo!

opa Rafael,

Exatamente!! no seu celular tem html e css apenas. É simples assim que o Ionic funciona, aqui nossa app no Google Play com Ionic: https://goo.gl/UWErkq
abraço,

Write a comment