O que é o Ionic?
Ionic é um framework livre e de código aberto. O conceito principal desse framework, é possibilitar a criação de aplicativos mobile com linguagens web (HTML, CSS, JS), entregando assim aplicações híbridas.
As aplicações híbridas são indicadas quando a necessidade da empresa é uma resposta imediata para um projeto que tem como objetivo atender a várias plataformas. De forma geral, é extremamente importante que a experiência do usuário do iOS, seja igual a do Windows Phone e Android.
Ionic é construído em cima de AngularJS, o que possibilita a criação de um framework bastante poderoso, possibilitando criar aplicativos realmente robustos.
Ele utiliza o Cordova ou PhoneGap, o que possibilita a utilização de recursos nativos dos dispositivos.
Atualmente ele é executado em Android 4.4+, iOS6+ e com suporte parcial ao Windows Phone.
Showcases Ionic
- Seja Grato! (Meu App!)
- Renda Fixa (Adoro esse!)
- Sworkit
- Moodle Mobile
- Peladeiro App
- Giga Agenda
- Agenda Kids
A partir de agora você vai poder acompanhar como se instala e começa a desenvolver apps com o Ionic
Clique na imagem para ampliá-la
Configuração e Instalação
Temos alguns pré-requisitos para a instalação do Ionic, que são o Node.js e o Cordova.
A instalação não tem nada muito complicado, mas você vai precisar de uma conexão decente de internet, tem bastante coisa pra baixar.
Prefere aprender em vídeo?
Node.js
Você vai baixar a versão recomendada do Node.js, que no momento é a versão 4.4.4, como você pode acompanhar na imagem.
Clique na imagem para ampliá-la
A instalação do Node.js é simples, next, next, next. Se por algum motivo não conseguiu, deixa nos comentários.
Caso você queira confirmar se instalou, vá ao prompt de comando (ou terminal, no Mac), e digite node -v.
Assim, o Node.js estando instalado vai te informar qual versão está instalada.
Clique na imagem para ampliá-la
Cordova + Ionic
Ainda dentro do prompt, agora vamos instalar o Cordova e o Ionic.
Digite o comando:
npm install -g cordova ionic
A partir de agora você vai depender da sua internet, pode demorar alguns vários minutos, pois ele está baixando esses pacotes para o seu computador. Não se preocupe com mensagens de erro, lembrando que esse comando só funciona, se o Node.js estiver instalado.
Criando o primeiro App
Vamos agora ver, como se cria um app, via linha de comando. Em primeiro lugar, vá em Documentos (ou outro local de sua preferência) e crie uma pasta com nome de ‘Ionic‘.
Voltando ao prompt, temos que navegar até a pasta que acabamos de criar. Para isso digite cd Documents\Ionic
Clique na imagem para ampliá-la
Depois de entrar na pasta, vamos digitar o comando para criar o seu Primeiro Aplicativo com Ionic!
ionic start primeiroApp tabs
ionic – Todos os comandos que nós vamos digitar, que são do framework, começarão com ele. Faz sentido né?
start – Comando para iniciar um novo projeto na pasta especificada.
primeiroApp – Aqui entra o nome do aplicativo. Você pode colocar outro nome aqui, mas não se esqueça dele.
tabs – O framework tem por padrão três templates para criar apps, o blank, o tabs, e o sidemenu. Para o nosso aplicativo de teste, use o tabs ou sidemenu.
Clique na imagem para ampliá-la
Depois de digitar esse comando, ele vai baixar os arquivos necessários, como a master, para criar o projeto. Mais uma vez, vamos depender da sua velocidade de internet.
No fim, ele pergunta se você quer criar uma conta para vários outros recursos do framework. É escolha sua, mas no momento não é necessário, basta digitar n ou y e depois pressionar Enter.
Clique na imagem para ampliá-la
Depois disso, você pode ir lá na pasta que criamos, dentro de Documentos e ver todos os arquivos que o framework já criou para o nosso primeiro aplicativo. Os arquivos que você vai mexer, estão dentro da pasta www. Aproveita e dá uma olhada nos arquivos que tem aí!
Clique na imagem para ampliá-la
Finalmente, para testar e rodar esse aplicativo, primeiro vamos entrar na pasta dele, digitando:
cd primeiroApp
Depois digite:
ionic serve
(Eu espero que você ainda não tenha fechado o prompt)
Voilà! Seu primeiro app feito em Ionic está aí! Se você quiser visualizar como num celular, pode pressionar F12, para abrir o modo desenvolvedor do seu navegador, e habilite a visualização mobile!
Clique na imagem para ampliá-la
Divirta-se
E agora, como faço pra alterar o texto e o conteúdo das telas? Pra começar a brincadeira, utilize o seu editor de texto preferido – a equipe do Ionic aconselha a utilizar o VS Code para Windows – navegue na pasta www, que já vimos antes e abra os arquivos da pasta templates. Por exemplo, a página inicial do app é o tab-dash.html.
Conforme você for alterando e salvando os arquivos, veja, que no seu navegador o próprio framework já atualiza a página, quando percebe que você alterou alguma coisa nos arquivos.
Clique na imagem para ampliá-la
Portanto, agora a diversão é por sua conta!
E aí, conseguiu seguir o passo-a-passo? Ficou com dúvida em alguma parte? Achou interessante, quer mais detalhes sobre o framework?
Deixa um comentário aqui embaixo!
Quer saber como construir apps do Ionic através de interface gráfica? Clique aqui e aprenda ainda mais sobre esse poderoso framework!
Aproveita e curte minha página no Facebook, assim você vai ficar sabendo dos posts primeiro!
Bons apps pra você 😉