O Ionic Framework é uma ferramenta de desenvolvimento de aplicativos híbridos. Baseado no Cordova, o Ionic possibilita criar aplicativos para diversas plataformas, incluindo iOS, Android, Windows Phone, etc., com um único código. A vantagem do Ionic para com os outros é a facilidade de desenvolvimento e o desempenho do aplicativo.

1. Ionic Framework
Parte 1
Iniciando um Projeto mais Robusto

2. Instalação
• Download do Node.JS http://nodejs.org/download/
• Instale o Node.JS
• Abra o terminal (command line / prompt)
• Em caso de estar utilizando o Windows, recomendo que faça o
download do Git (terminal: Git Bash) ou utilize o Vagrant.
Deixarei estas duas alternativas para outro tutorial, caso não
conheçam.
• > npm install -g cordova ionic bower ios-sim
• Instalação do Cordova (base nativa para execução do app), Ionic
e Bower.

3. Criar App
• No terminal:
• > ionic start myApp [blank / tabs / sidemenu]
• > ionic platform add [android / ios / browser]
• > bower install ngCordova (biblioteca do Cordova para AngularJS)
• > ionic build [android / ios / browser]
• > ionic emulate [android / ios / browser]
• Possível erro na emulação do iOS:
• Solução:
• > cd platform/ios/cordova/
• > sudo chmod 777 emulate

4. Algumas Dicas
• O Ionic Framework utiliza AngularJS, ou seja, é extremamente interessante
conhecer pelo menos o básico deste Framework JS para utilizar
adequadamente a ferramenta.
• Sugiro não utilizar o jQuery (muito utilizado para web) pela lentidão que causa
no Web App.
• Fique atento à qualquer Framework de CSS que queira utilizar para, também,
não causar muita lentidão. Afinal, o usuário mobile é impaciente.
• Para desenvolver para iOS é necessário um Mac.
• O Ionic Framework possui sua própria documentação de layout:
• http://ionicframework.com/docs/components/
• http://ionicons.com
• http://ionicframework.com/html5-input-types/

5. Pull to Refresh
O Ionic possui uma facilidade enorme para inserir o Pull to Refresh no aplicativo. Digamos que seus
criadores já pensaram na sua necessidade.
Para o Front-End, logo após a abertura da tag <ion-list>, insira:
<ion-refresher pulling-text=“Pull to Refresh" on-refresh=“doRefresh()"></ion-refresher>
O atributo on-refresh fará a ligação com o controller do AngularJS para tratar quando o efeito é
executado. Portanto, no Back-End, no controller correspondente do template em que você inseriu a tag
acima, adicione, por exemplo:
$scope.doRefresh = function() {
$scope.playlists.unshift({title: 'Incoming todo ' + Date.now(), id: 7});
$scope.$broadcast('scroll.refreshComplete');
$scope.$apply();
};
Onde, $scope.playlists é uma lista já definida no controller, como:
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
OBSERVAÇÃO VALIOSA: Seguindo o tutorial desde o início e criando o app como informei no estilo de
sidemenu, o aplicativo já possuirá uma função playlists de DEMO.

6. HTTPRequest
Vamos continuar utilizando o exemplo anterior das listas, em que incluímos o Pull to Refresh.
No Back-End, na função doRefresh, que é executada à interação do usuário, vamos executar um HTTPRequest que obterá
mais itens do Server-side e alimentar nossa lista.
Na declaração do controller, adicionaremos $http, feature do AngularJS responsável para a execução de GET e POST, como
parâmetro para a função.
.controller('PlaylistsCtrl', function($scope, $http) { … }
Iniciamos a função, em seguida incluiremos o código do HTTPRequest, ou Ajax, se preferir.
$scope.doRefresh = function() {
// Execute um HTTPRequest informando que está sendo enviado um JSON como parâmetro
// e aguardando um JSON como resposta
var httpResponse = $http.post("http://www.example.com", {
params: {
lastId: 6,
}
});
// Tratamento da resposta em caso de sucesso
httpResponse.success(function (data) {
// para cada item, adicione-o na lista
angular.forEach(data, function(item, key) {
$scope.playlists.push({
title: item.text,
id: item.id,
});
});
});
// Em seguida, formalize as modificações para as mesmas aparecerem no front-end
$scope.$broadcast('scroll.refreshComplete');
$scope.$evalAsync();
}

7. CONCLUSÃO
Espero que tenham gostado dessa primeira parte.
As dicas e funções Pull-to-Refresh e HTTPRequest são essenciais para qualquer projeto
que contenha listas e dependência de dados externos para alimentar o aplicativo. Ou seja,
praticamente a maioria.
Existem outras dicas válidas que virão no futuro.
Good Codes!
~ Alamo P. Saravali
@alamosaravali
http://fb.me/alamosaravali
https://br.linkedin.com/in/alamosaravali