Começando o primeiro projeto Ionic/Cordova


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:


node -v

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:


npm -v

O próximo passo é instalar o Ionic, que será instalado a partir do npm. Utilize o comando abaixo:


npm install -g ionic

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:


ionic -v

O próximo passo é a instalação do Cordova, utilizando o mesmo padrão de instalação npm:


npm install -g cordova

Aguarde o final da instalação e confira a instalação verificando a versão:


cordova -v

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:


ionic start HelloWorld tabs

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 :


ionic serve

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.

1 comentário em “Começando o primeiro projeto Ionic/Cordova”

Deixe um comentário

*