Ionic é um framework criado no final de 2013 que visa a criação de aplicações híbridas para dispositivos móveis. É um framework focado na aparência e interação de aplicativos móveis utilizando HTML, CSS e Javascript (AngularJS). É um framework similar a outros existentes no mercado como jQuery mobile, Sencha Touch, etc. Através da combinação entre o Ionic e o Cordova/Phonegap(já explicado em outro post) é possível criar aplicativos com interface própria para dispositivos móveis de forma híbrida, ou seja, serão aplicações web mobile com acesso ao hardware do dispositivo tornando transparente para o usuário final que pensa estar utilizando uma aplicação nativa. Com um único desenvolvimento é possível rodar o mesmo aplicativo em várias plataformas como Android, iOS, Windows Phone, etc.
O processo passo é instalar o NodeJS no computador. O NodeJS é um interpretador de código Javascript.
Baixe através do seguinte link: https://nodejs.org/
O processo de instalação é simples, avançar até finalizar a instalação: Next, Next, Next, Install, Finish.
Abra o prompt de comando do Windows (em modo administrador) ou o terminal do seu sistema operacional Linux ou MacOS, o primeiro passo para ter certeza da correta instalação do NodeJS é verificar a versão instalada utilizando a seguinte linha de comando:
[sourcecode language=”plain”]
node -v
[/sourcecode]
Confira também a instalação do pacote npm, que será utilizado na instalação do Ionic e Cordova. Utilize o comando abaixo, também no prompt de comando:
[sourcecode language=”plain”]
npm -v
[/sourcecode]
O próximo passo é instalar o Ionic, que será instalado a partir do npm. Utilize o comando abaixo:
[sourcecode language=”plain”]
npm install -g ionic
[/sourcecode]
O parâmetro “-g” significa uma instalação global, ou seja, irá permitir que seja feita instalação e execução do ionic a partir de qualquer diretório.
Aguarde o processo de instalação que pode demorar um pouco dependendo da velocidade da sua internet. Atenção para as mensagens de casos de Warning e Error, caso aconteça algum problema será informado na própria mensagem o que deve ser instalado antes para continuar a correta instalação do Ionic.
Após a instalação sempre confira utilizando o comando para consultar a versão para ter certeza que foi instalado corretamente. Utilize o comando abaixo:
[sourcecode language=”plain”]
ionic -v
[/sourcecode]
O próximo passo é a instalação do Cordova, utilizando o mesmo padrão de instalação npm:
[sourcecode language=”plain”]
npm install -g cordova
[/sourcecode]
Aguarde o final da instalação e confira a instalação verificando a versão:
[sourcecode language=”plain”]
cordova -v
[/sourcecode]
Feito isso já temos nosso ambiente de desenvolvimento e compilação pronto para começar.
O Ionic permite iniciar um projeto por linha de comando baseado em templates como tabs, maps, blank, sidemenu, etc. O padrão quando não é informado o template que desejamos é o tab.
Para criar um projeto, vá até uma pasta de desenvolvimento de sua preferência no seu prompt de comando e execute o comando abaixo:
[sourcecode language=”plain”]
ionic start HelloWorld tabs
[/sourcecode]
Onde: “HelloWorld” é o nome do projeto e “tabs” é o template desejado para criação do projeto.
Aguarde o download do template e a criação do projeto.
Se visualizar o diretório do projeto HelloWorld irá observar a criação de várias pastas de controle e configuração e vários arquivos criados automaticamente pelo Ionic. Aos poucos irá entender a função de cada uma dessas pastas e arquivos.
Por hora o que precisa saber é que o arquivo config.xml armazena informações referentes a descrição do aplicativo, nome, autor, etc que serão utilizados na publicação do aplicativo em uma loja como Apple Store ou Play Store. Outra informação ainda mais importante é a pasta “www” que armazena todos os arquivos do projeto, todas as páginas, scripts de transição, imagens, etc. É nesta pasta que iremos concentrar nossos esforços.
Para abrir o projeto e ver o resultado, basta digitar o comando abaixo dentro da pasta do projeto :
[sourcecode language=”plain”]
ionic serve
[/sourcecode]
Será aberta uma tela em seu navegador com a página que corresponde ao aplicativo com o tema de “tabs” escolhido. Segue exemplos da navegação de telas do aplicativo:
Continuaremos em outro artigo, por enquanto é só.
Até a próxima.
Comments are closed.
1 Comment
Matheus gomidedezembro 15, 2016
Não saiu a continuação ainda né? Po tava tão entretido 🙁