Desenvolvimento App Híbrido com IONIC - Jaccon
Desenvolvimento App Híbrido com IONIC
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.
Mac OS X 10.10 Yosemite ( Hackintosh )
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:
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
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
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:
* 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:
ionic start myapp creator:xxxxxxx ( o id do App que você deve pegar no Creator assim como exemplo abaixo )
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: