Ionic Framework – Desenvolvendo Mobile Apps

• O que é o Ionic
• Showcases Ionic
• Configuração e Instalação
  • Node.js
  • Cordova + Ionic
• Criando o primeiro app
• Divirta-se

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

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.

Vamos lá!

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.

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.

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

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.

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.

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í!

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!

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.

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ê 😉