03.07.2015

Hey, você conhece o Ionic?

Hey, você conhece o Ionic? Imagem via freepick.com

Olá leitores! No meu primeiro post aqui no blog, vim dar uma de wingman desse framework que é um grande parceiro meu.

Você conhece o Ionic? Não?! Tudo bem, vou apresentá-los em alguns minutos!

O Ionic é um SDK para desenvolvimento de APPs mobile híbridos. Com ele você vai escrever seu APP uma única vez, usando HTML, CSS e Javascript, gerar versões para iOS e Android e, no futuro, eles tem um plano de suportar Windows Phone e FirefoxOS.

Conhecendo os Coadjuvantes

Mas, antes de falar tudo sobre o Ionic, preciso te apresentar rapidamente para dois outros caras: Cordova e AngularJS.

O Cordova é a principal referência da atualidade para desenvolvimento de APPs mobile híbridos. Ele permite a criação de APPs mobile usando HTML, CSS e Javascript. Por conta do uso dessas tecnologias, você tem a facilidade de poder testar seu APP diretamente no browser enquanto o desenvolve. Esse processo é bem mais rápido do que rodar o APP em um emulador ou em um dispositivo. Além disso, se você é um desenvolvedor web, então vai estar trabalhando com ferramentas que já está familiarizado.

Mais que simplismente criar a interface do seu APP, você poderá utilizar diversos recursos do dispositivo móvel, como câmera, GPS, sistema de arquivos, e muitos outros através de chamadas à API do Cordova.

Nosso segundo convidado, o AngularJS, é um framework mantido pela Google, amado por uns e odiado por outros. Segundo a própria documentação do Angular, ele é “um framework estrutural para aplicações web dinâmicas. Ele permite que você use HTML como seu template e permite estender a sintaxe do HTML para expressar componentes do seu aplicativo de forma clara e sucinta.”

Com o AngularJS escrevemos código limpo e, os vários recursos existentes na ferramenta, como módulos, diretivas, serviços e controladores nos ajudam a deixar o código bem organizado e fácil de entender. Além disso, sua documentação está repleta de exemplos sobre como escrever testes para aplicativos feitos com AngularJS.

Ionic, Construindo Aplicações Híbridas

Agora que você conhece um pouco sobre o Cordova e o AngularJS fica fácil ver a relação entre os dois. O Cordova permite a criação de um APP mobile usando HTML, CSS e Javascript. Já o AngularJS nos dá ferramentas para trabalhar com esses caras de uma maneira bem organizada e fácil de testar.

Finalmente, agora podemos falar agora sobre o principal convidado da noite: Ionic. O que ele faz de tão legal para merecer um post no blog da Sm4rt?

O Ionic é um SDK front-end para desenvolvimento de aplicativos mobile híbridos que utiliza o AngularJS para ajudar na construção do seu código e o Cordova para conversar com os dispositivos e compilar o código escrito uma só vez para diferentes plataformas.

O primeiro atrativo do Ionic é o seu framework CSS. Ele possui diversos componentes que são utilizados para deixar seu aplicativo com cara de mobile.

Dê uma olhada em algumas telas de aplicativos feitos com o Ionic:

Exemplo de Aplicativos feitos com o Ionic

Em conjunto com os componentes CSS, o Ionic também possui uma biblioteca Javascript de UI para prover efeitos imitando as interações e animações das interfaces dos dispositivos mobile. Claro que tudo isso escrito com AngularJS, facilitando muito a vida do desenvolvedor que vai usar esses recursos. Alguns exemplos são os menus laterais, popups e o scroll dos dispositivos.

Além de todas as facilidades para escrever seu código, o Ionic provê ferramentas para o desenvolvimento. Elas foram criadas para facilitar processos como testar, construir e emular seu projeto.

As Ferramentas

A primeira delas é a Ionic CLI, a interface da linha de comando. Ela possui comandos para construir, rodar e emular seus aplicativos. Com um simples comando, você pode fazer com que o aplicativo rode no seu browser, por exemplo.

Lista de Aplicativos

O Ionic Lab é outra ferramenta do Ionic que roda o aplicativo no seu browser, mostrando lado a lado, como ficaria o aplicativo rodando em um dispositivo com iOS e um dispositivo Android.

Exemplo de um APP IOS, a esquerda, e um APP Android, a direita

Sim, é isso mesmo que você viu. O código que você escreveu uma só vez vai gerar interfaces diferentes, com componentes idênticos aos nativos de cada plataforma! Isso não é incrível?

Outra ferramenta sensacional é o Ionic LiveReload. Ele permite que você rode o seu aplicativo e ele seja atualizado instantaneamente quando faz uma mudança no código. Além de funcionar no browser do computador, essa ferramenta também funciona quando você está testando seu aplicativo diretamente no dispositivo. Isso reduz a necessidade de constantemente reconstruir todo o aplicativo para realizar pequenas mudanças.

Uma outra ferramenta bem legal é o Ionic Creator, um sistema no qual você pode criar a interface do seu APP com componentes drag-and-drop. Quando você termina de criar sua interface, ele gera todo o código fonte para o APP.

Exemplo da construção de um APP com drag and drop

Por último, mas não menos importante, temos o Ionic View. Ele funciona como o seu próprio portfólio de aplicativos móveis, permitindo a fácil visualização, compartilhamento e testes de aplicativos Ionic em desenvolvimento. Dessa forma, você pode compartilhar o APP em desenvolvimento com quem quiser como, por exemplo, um cliente, um colega de trabalho ou acessar até você mesmo. Isso tudo sem precisar publicar o APP nas lojas de aplicativos, como o Google Play e a Apple Store.

E aí? O que achou do Ionic? Vale a pena dar uma chance ao framework? Entre no guia do Ionic e comece a desenvolver seus APPs milionários agora mesmo!

Bruno Schettino

Mestrando em Engenharia de Software na UFF e Lider Técnico na STI - UFF. Bruno trabalha com Ruby, AngularJS e Java em seus projetos profissionais. Nas horas vagas, desenvolver idéias de aplicativos, assistir seriados, tocar violão e ficar por dentro das novidades tecnológicas são seus passatempos preferidos.

< voltar a página de artigos