Iniciando o desenvolvimento multiplataforma com o Ionic

Totalmente gratuito e com seu código aberto, o Ionic oferece bibliotecas para optimização do seu HTML, CSS e JS, além de componentes e ferramentas totalmente voltadas para o desenvolvimento de suas aplicações mobile.

Podemos definir o Ionic como sendo um sdk front-end, para o desenvolvimento de aplicativos multi-plataformas (Android, iOS e Windows Phone).

Voltado ao seu desenvolvimento com Angular, ele também fornece alguns serviços próprios como notificações do tipo push e analytics.

O primeiro passo para a sua instalação é a instalação do node.Js :

1 - Instalar node.Js : https://nodejs.org/en/download

2 - Instalar o Cordova: http://cordova.apache.org

Ou através do comando npm, $ sudo npm install -g cordova (O ionic possui sua própria linha de comando chamada “npm”, que pode vir a automatizar o seu uso).

Para acessar o comando npm, é necessário estar no diretório em que seu projeto com o ionic está instalado:

3 - Instalação do Ionic :

$ sudo npm install -g ionic

4 - Criando um projeto do zero :

$ ionic start todo blank

Outros exemplos de projeto, já contendo estruturas e template :

“Tabs”

$ ionic start todo tabs

“SideMenu”

$ ionic start todo sideMenu

O “todo” no comando npm install, será o diretório no qual seu projeto será criado.

5 - Para fazer builds ou a emulação da sua aplicação nas plataformas necessárias, é necessário adicioná-las ao seu ionic :

$ ionic platform add ios

$ ionic platform add android

$ ionic platform add windows

6 - Realizando testes

$ ionic build ios

$ ionic emulate ios

Ou

$ ionic build android

$ ionic emulate android

ADICIONANDO UM NOVO PROJETO DO TIPO TABS

Crie um novo diretório e nele digite o comando :

$ ionic start todo tabs

O Ionic irá realizar o download do projeto ao seu diretório.

A seguinte estrutura será criada :

Dentre as pastas criadas, destacamos a “www” :

Contém o CSS, imagens, JS (JS das controllers e services) referente a aplicação e a pasta templates na qual contém todas as telas do aplicativo.

E o arquivo config.xml:

É responsável pelas configurações do aplicativo, como nome, descrição, limite da versão de sdk para Android, tempo de execução da Splash Screen entre outras configurações.

Arquivo App.js

O arquivo App.js é responsável pelo início da aplicação e configurações de roteamento das telas.

Nele é inicializado o módulo do angular, e suas funcionalidades que serão usadas em outros lugares do aplicativo (services, controllers).

Exemplo :

Arquivo .Config

A configuração das telas é feita na função “.config”. Na qual coloca qual será o estado daquela tela, caminho da sua URL, e qual template e controller será correspondente a aquela tela.

Controller.js

A controller.js fornece o controle correspondente a tela referenciada no App.js. Ela pode ser um único arquivo controller contendo outras controladoras dentro da mesma (como realizada no exemplo das tabs), porém uma boa prática é criar um arquivo para cada, para manter um código mais organizado.

Nessa controller podem ser desenvolvidas algumas funções, chamadas as services, variáveis de escopo e demais funcionalidades.

A variável $scope, tem um destaque nas controllers, pois ela é uma variável como o nome já diz, referenciada aquele escopo, seja da tela ou da sua controller.

Caso você queira declarar um texto na sua tela, poderá instânciar um objeto $scope.meuTexto no arquivo controller, e fazer a chamada desse objeto na sua tela : <span class=”centerElement”>Seu texto é {{:: meuTexto }}</span> .

Quando um objeto do tipo $scope é atualizado ou declarado na controller, automaticamente ele é atualizado em seu arquivo de layout.

Services.js

O arquivo services.js contém um aglomerado de serviços disponibilizados a todo aplicativo.

Exemplo, imaginamos que se faz necessário a leitura das variáveis salvas nas preferências do celular. Esse é um processo único e que toda vez que a aplicação precisa dele, ele só irá pedir o nome da variável que necessita ser resgatada/atualizada/salva. Não se faz necessário ter essa lógica em diversas controllers. Podemos simplesmente criar essa função uma só vez em um service, e esse serviço ser chamado quantas vezes for necessário nas controladoras. Exemplo da service :

1 - Adicionamos a service em sua controller, em angular.module

E então com o serviço disponível nessa controller, realizamos sua chamada :

Adicionando Plugins do Cordova

O Ionic fornece a possibilidade de adicionarmos plugins do cordova para usarmos em seu framework. Com isso a possibilidade do uso de diversas funcionalidades é possível dentro do Ionic.

Os plug-ins podem ser encontrados nesse link : https://cordova.apache.org/plugins/

Para adicionar o plugin ao seu projeto basta apenas estar no diretório do projeto e executar o comando:
ionic plugin add org.apache.cordova.camera

Show your support

Clapping shows how much you appreciated Eduardo Schmidt’s story.