Ionic Framework - Parte 1 - Iniciando um Projeto mais Robusto

1,851 views

Published on

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.

Published in: Technology

Ionic Framework - Parte 1 - Iniciando um Projeto mais Robusto

  1. 1. Ionic Framework Parte 1 Iniciando um Projeto mais Robusto
  2. 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. 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. 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. 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. 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. 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

×