O IONIC é um dos mais conhecidos frameworks para desenvolvimendo de aplicativos híbridos. Ele possui um conjunto de ferramentas interessantes e bem intuitivas para o desenvolvimento de aplicações híbridas. Downloads NodeJS Ionic Viewer Intel...

O IONIC é um dos mais conhecidos frameworks para desenvolvimendo de aplicativos híbridos. Ele possui um conjunto de ferramentas interessantes e bem intuitivas para o desenvolvimento de aplicações híbridas. Downloads NodeJS Ionic Viewer Intel XDK Plataforma de desenvolvimento Mac OS X 10.10 Yosemite ( Hackintosh ) Hardware Intel Core i3 8GB RAM HD 1TB 1) Iniciando O primeiro passo é baixar o NodeJS ( o canivete suiço em Javascript ) para que possamos baixar o Ionic. Utilize o link acima para baixar a última versão do NodeJS e na sequência instale. Não irei abordar aqui neste tutorial a instalação do NodeJS pois não há grau de complexidade para que possamos fazer um passo-a-passo para isto. A instalação do Ionic deve ser feita conforme o exemplo abaixo:
 npm install -g cordova ionic
2) Criando a primeira View do App Primeiramente vamos criar nossa view do App ou seja o front-end do App. Uma maneira descomplicada para fazer isto é utilizando a própria interface web do IONIC que já possui algumas opções de templates de aplicativos bem interessantes e também possui o Market que pode auxiliar você na utilização de plugins, themes entre outros recursos interessantes para o seu App. Então neste primeiro momento vamos entrar em https://creator.ionic.io/ caso não tenha ainda um cadastro é importante que você se cadastre para que possamos ir para o próximo passo. *OBS: Lembrando que este é apenas um mockup do que será a interface do App. É apenas um template para que possa agilizar o processo de desenvolvimento. Exemplo de interface do IONIC Creator Screen Shot 2016-05-01 at 11.12.54 PM A interface do Creator você deve levar em consideração que uma página é criada na lateral superior esquerda ( bloco 1 ) com seus elementos logo abaixo ( bloco 2 ) e suas propriedade no bloco 3 Screen Shot 2016-05-01 at 11.12.54 PM 3) Exportando a View do Creator para importar no Intel XDK ( cat jump ) Levando em consideração que você preparou a view do seu App vamos exportar ele para dar os ajustes finais no Intel XDK. Nele também é possível você adicionar novos recursos e também exportar o App para as App Stores. No topo da tela do lado superior direito há um botão como exportar. Neste momento iremos utilizar o Ionic CLI ( command line ) para exportar o app. Você deve copiar o ID do seu App pois iremos utilizar ele para baixar o código fonte do App. Antes disto é importante você abrir o seu terminal e fazer login na plataforma. No ambiente que estamos utilizando para desenvolvimento, irei utilizar o terminal do OS X. Para isto abra o terminal e digite os comandos abaixo: ionic login * Entre com as informações de login e senha utilizado na criação da conta do IONIC Creator. Agora crie a pasta do seu projeto, aqui iremos chamar simplesmente de MyApp. Entre na pasta deste app e execute os comandos abaixo:   Screen Shot 2016-05-01 at 11.35.15 PM ionic start myapp creator:xxxxxxx ( o id do App que você deve pegar no Creator assim como exemplo abaixo ) Screen Shot 2016-05-01 at 11.19.22 PM 4) Preparando o ambiente para o Intel XDK Agora que você baixou todo o código donte do App é necessário que você também adicione as plataformas para o qual deseja trabalhar. Para este projeto iremos adicionar o Android e o iOS. Entre no diretório que deseja armazenar os arquivos do projeto e digite os comandos abaixo:
$ cd myApp
$ ionic platform add ios
ionic platform add ios
  Referências: http://ionicframework.com/getting-started/    
Seja Membro Gratuítamente

Assine a newsletter para receber em seu email as publicações atualizadas neste blog

Top