sexta-feira, 20 de novembro de 2015

Criando um Aplicativo com Ionic 1


  • O que é?

 O Ionic é um framework front-end open source que utiliza o poder do HTML5 e do AngularJS para desenvolvimento de aplicativos híbridos para dispositivos móveis.

  • Por que utilizar Ionic?


  1. Desenvolvimento rápido e fácil.
  2. Funciona na maioria dos dispositivos móveis atuais.
  3. Design simples, objetivo e funcional.
  4. Possui componentes populares, como o Cordova e AngularJS.
  5. O CSS é gerado a partir do SASS e foi projetado para ser sobrescrito, sendo fácil para personalizar.
  6. Não possui dependência do jQuery.
  7. Pode-se utilizar as ferramentas do desenvolvedor do navegador, como o debug.


  • Pré condições:

  1. HTML, CSS e JavaScript.
  2. AngularJS.


  • Instalando o Ionic


Primeiramente, você precisa ter o NodeJS instalado no seu computador. Clique aqui para acessar o site para download e siga os passos padrões para instalação conforme seu sistema operacional.

Após instalar o NodeJS, utilize o prompt de comando para instalar o Cordova e o Ionic.

$ npm install -g cordova ionic


  • Criando um aplicativo


O Ionic já possui modelos prontos de aplicativos para você utilizar, como, por exemplo, com menu lateral ou com abas. Ou ainda, se você preferir, também pode optar por começar com um aplicativo em branco. Exemplos:


Vou escolher o modelo com abas para exemplificar:

Digite no seu prompt de comando: $ ionic start myApp tabs

Sendo "myApp" o nome do aplicativo e "tabs" o modelo escolhido, poderia ser "blank" ou "sidemenu" também.

Pronto, seu aplicativo já está criado. Agora você pode acessar os scripts na pasta "myApp'.


  • Visualizando o Aplicativo no Navegador

Você pode utilizar seu navegador para acompanhar as modificações enquanto desenvolve seu aplicativo. Utilize novamente o prompt de comando:

$ cd myApp

$ ionic serve --lab


O resultado da visualização será esta:


  • Componentes do Ionic (CSS Components)

O Ionic possui diversos componentes customizáveis para você utilizar, como botões, menus, listas, ícones, formulários, etc. E o mais bacana é que o Ionic te fornece tudo pronto, é só copiar o código e colar no seu HTML. Clique aqui para acessar estes componentes.




  • Conclusão


Neste post aprendemos o que é Ionic Framework, como instalá-lo e como criar um aplicativo. Em breve mais posts sobre o Ionic.

Até o próximo post!



Anterior
Proxima

0 comentários: