Fala galera…
Criei um novo artigo que vai mostrar como: iniciar com Ionic, sua instalação e como seguir com essa poderosa ferramenta.
Lembrando que esse post é um complemento ao artigo Phonegap Tutorial – Iniciando um projeto.
O que é o Ionic
Em poucas palavras, podemos defini-lo como: Um framework de desenvolvimento de aplicações híbridas (webapps), mas isso é ser simplista demais.
Atualmente o Ionic é uma plataforma completa para desenvolver aplicativos, composto por um framework com diversos componentes disponíveis, de botões à menus completos. Se precisar, você pode ver os componentes disponíveis para Ionic aqui.
Além dos componentes o Ionic possui um poderoso toolkit para terminal, onde é possível iniciar um “projeto como base”, adicionar qual plataforma esta sendo desenvolvido o aplicativo, gerar ícones e splash screen para diversas resoluções, entre outras funcionalidades.
Para desenvolvimento de aplicações híbridas o Ionic é considerado a principal ferramenta. Hoje é composto por todo um ecossistema, envolvendo framework para desenvolvimento, ferramentas para prototipar apps online, market place e muito mais, vale a pena dar uma conferida na documentação completa do Ionic.
O conceito da parada
Aplicações híbridas são webapps, ou seja, aplicações desenvolvidas com Javascript, HTML e CSS. O Ionic irá nos fornecer o front-end, com componentes HTML e CSS, a parte de interatividade, acesso a API’s e funcionalidades fica por conta do AngularJS. Como dito, tudo o que estamos fazendo é um webapp, certo?!
Como é possível então instalar o aplicativo num device, acessar câmera, contatos, geo localização, etc? É através do Phonegap, ele é a plataforma que disponibilizará API’s de acesso aos recursos do dispositivo. Falaremos disso mais a fundo num próximo post.
Instalando o Ionic Framework
Para instalar o Ionic é bastante simples, você precisa apenas ter Node.JS e o NPM (gerenciador de pacotes do Node.JS) instalado em seu computador.
Para instalar o Node.JS e o NPM é só baixar no site oficial www.nodejs.org/en/download/.
Feito isso, abra seu terminal e estará disponível o comando “npm”, que será o responsável pela instalação do Ionic.
Navegue pelo terminal até o diretório de seus projetos e execute o seguinte comando:
npm install –g cordova ionic
Feito isso o Cordova e o Ionic foram instalados em seu computador, disponíveis em qualquer diretório, por isso o “-g” no comando que significa “global” no terminal.
Ainda no terminal, perceba como o comando “ionic” está disponível, execute agora:
ionic start nomeDoApp sidemenu
Basicamente estamos iniciando uma aplicação com Ionic com o modelo “sidemenu”. Como dito acima, o Ionic possui alguns “projetos base” com os quais você pode iniciar sua aplicação, os modelos disponíveis são:
- sidemenu
- tabs
- blank
Esses são os modelos padrões, você pode também iniciar a partir de um modelo customizado no github por exemplo, da seguinte forma:
ionic start nomeDoApp https://github.com/driftyco/ionic-starter-tabs
Verifique a pasta onde você criou o projeto e provavelmente irá encontrar a seguinte estrutura de pastas:
- hooks
- node_modules
- São os módulos utilizados pelo gulp (http://gulpjs.com/) para automatizar tarefas
- platforms
- São as plataformas utilizadas pelo seu projeto, ou seja, os sistemas operacionais dos dispositivos para os quais você está desenvolvendo.
- plugins
- Lembra que eu falei que é possível acessar recurso dos dispositivos, como câmera, contatos, etc.. Esse acesso é feito através de plugins, falaremos mais a fundo sobre esse assunto num próximo post também. Mas fique com um gostinho do que é possível
- resources
- Aqui ficam alguns recursos como ícones e splash screen separados por device
- scss
- Ionic utiliza SASS e aqui fica seu arquivo principal para ser compilado. Se você estava escondido com Osama Binladem em uma caverna e não sabe o que é SASS entenda aqui (http://sass-lang.com/)
- www
- Aqui é onde fica a Jamaica toda, esse é o diretório utilizado para desenvolvimento, nele ficarão todos arquivos HTML, SASS e JS
Por padrão o Ionic adiciona uma plataforma iOS, que pode ser visto na pasta platforms, para adicionar uma plataforma android use o comando:
ionic platform add android
Para visualizar seu aplicativo você pode simplesmente ir ao diretório `www` dentro da pasta do projeto recém criado, abrir o arquivo index.html e simular a resolução da device com o inspetor de elementos do browser… ou… executar o comando:
ionic serve –lab
E assim a mágica acontece, você vai poder ver uma preview de como ficaria o app numa device android e outra iOS.
Ahh, mas se eu tiver usando o recurso de vibração do smartphone, como faço? Calma jovem gafanhoto, muito simples, o Ionic tem um recurso de linha de comando que permite que você rode seu app diretamente no device, desde que esteja conectado com um cabo USB.
Para isso, claro, você vai ter que acompanhar o Tutorial em Phonegap.
Para executar o app no device use o comando:
ionic run android
Ps. No lugar do Android use o platforma de sua preferência.
Dica bônus
Você pode “inspecionar” sua aplicação que está rodando no Android ou iOS diretamente pelo Chrome, pelo nosso conhecido “inspect element” e ver em tempo real o que esta acontecendo.
Para isso acesse pelo Chrome a URL chrome://inspect/#devices e clique no link com o seu dispositivo conectado.
Bom galera, é isso, espero ter dado um caminho para vocês seguirem no desenvolvimento com Ionic. Em breve iremos lançar uma série de artigos de como criar um app do zero, com login, consumindo uma api e usando recursos do device.
Se você ficou com alguma dúvida ou tem algum feedback, comente, compartilhe e ajude outros devs.
Abraço gaitero e até a próxima.
