O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Mini curso: Ionic Framework

5.894 visualizações

Publicada em

Mini curso: Ionic Framework

Publicada em: Tecnologia

Mini curso: Ionic Framework

  1. 1. Loiane Groner http://loiane.com Mini Curso
  2. 2. • 9+ XP TI • Java, Sencha, Phonegap/Ionic • http://loiane.com • @loiane • Meus livros: Loiane Groner
  3. 3. • Apps híbridas • Phonegap e Cordova • Ionic Stack • Angular JS • O que é Ionic • Demo • Ferramentas • Build para App Stores Agenda
  4. 4. Apps híbridas
  5. 5. Nativo Web
  6. 6. Phonegap
  7. 7. Seu Código
  8. 8. WebView Nativa (Browser) Seu Código
  9. 9. APIs Nativas WebView Nativa (Browser) Seu Código
  10. 10. App Nativa: .apk, .ipa, etc APIs Nativas WebView Nativa (Browser) Seu Código
  11. 11. Interface de uma app phonegap É uma instância do browser nativo 100% largura e altura Browser nativo (WebView) sem barra de favoritos sem barra para mudar url
  12. 12. x Phonegap x Cordova
  13. 13. Phonegap Phonegap Dev App Phonegap Build Phonegap Enterprise Cordova Comunidade Código fonte Plugins APIs Ponte com plataforma nativa
  14. 14. Instalação
  15. 15. Phonegap CLI Cordova CLI
  16. 16. http://nodejs.org/
  17. 17. sudo npm install -g cordova sudo npm install -g phonegap Linux ou Mac OS
  18. 18. npm install -g cordova npm install -g phonegap Windows
  19. 19. Criando um Projeto
  20. 20. cordova create hello com.loiane.hello HelloWorld phonegap create hello com.loiane.hello HelloWorld
  21. 21. www: código fonte da app (HTML/CSS/JS) plugins: plugins cordova/phonegap do projeto plataforms: onde o projeto nativo de cada plataforma (android, iOS, wp) é criado hooks: scripts adicionais para o CLI config.xml: arquivo de configuração das plataformas e projeto (também usado com phonegap build)
  22. 22. Testando e Emulando Localmente
  23. 23. cordova platform add android Add Plataforma phonegap platform add android
  24. 24. cordova emulate android Emular phonegap emulate android
  25. 25. Plugins
  26. 26. Contacts
  27. 27. cordova plugin add org.apache.cordova.contacts phonegap plugin add org.apache.cordova.contacts
  28. 28. cordova plugin add cordova-plugin-contacts > 5.x https://www.npmjs.com/package/cordova-plugin-contacts
  29. 29. listContacts: function(){ function onSuccess(contacts) { alert('Found ' + contacts.length + ' contacts.'); } function onError(contactError) { alert('onError!'); } var options = new ContactFindOptions(); options.multiple = true; options.desiredFields = [navigator.contacts.fieldType.id]; var fields = [navigator.contacts.fieldType.displayName, navigator.contacts.fieldType.name]; navigator.contacts.find(fields, onSuccess, onError, options); }
  30. 30. pickContact: function(){ navigator.contacts.pickContact(function(contact){ alert('The following contact has been selected:' + JSON.stringify(contact)); },function(err){ console.log('Error: ' + err); }); }
  31. 31. createContact: function(){ var myContact = navigator.contacts.create({"displayName": "AAA Test Phonegap"}); if (myContact){ myContact.save(onSuccess,onError); } function onSuccess(contact) { alert("Save Success"); } function onError(contactError) { alert("Error = " + contactError.code); } }
  32. 32. Views
  33. 33. • Phonegap e Cordova não possuem componentes
  34. 34. • Phonegap e Cordova não possuem componentes
  35. 35. • Phonegap e Cordova não possuem componentes • Necessário usar bibliotecas ou frameworks
  36. 36. Topcoat DOM Architecture UI Full Stack
  37. 37. Ionic Angular.JS WebView Cordova Dispositivo Stack
  38. 38. • Criado em 2009 • JavaScript MVC • Programação declarativa • Amplamente adotado pelo mercado
  39. 39. • MVC: Model View Controller • 2 way data binding • Templates HTML • Injeção de dependência • Diretivas • Roteamento Features
  40. 40. MVC no frontend
  41. 41. Diretivas <body ng-app="tasks" ng-controller="TasksCtrl"> <ion-item ng-repeat="task in tasks" item="task" class="item-remove-animate"> {{ task.name }} <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(task)"> </ion-delete-button> <ion-option-button class="button-calm" ng-click="edit(task)"> Edit </ion-option-button> <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button> </ion-item>
  42. 42. Data Binding $scope.tasks = TasksService.all(); <body ng-app="tasks" ng-controller="TasksCtrl"> <ion-item ng-repeat="task in tasks" item="task" class="item-remove- animate">
  43. 43. Injeção de Dependência .controller('TasksCtrl', function($scope, $ionicModal, $ionicPopup, TasksService)
  44. 44. Templates e Roteamento config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: "/app", abstract: true, templateUrl: "templates/menu.html" }) .state('app.cors-disabled', { url: "/cors-disabled", views: { 'menuContent': { templateUrl: "templates/cors-disabled.html", controller: 'CORSDisabledCtrl' } } }) .state('app.cors-enabled', { url: "/cors-enabled", views: { 'menuContent': { templateUrl: "templates/cors-enabled.html", controller: 'CORSEnabledCtrl' } } }); // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/app/home'); });
  45. 45. Módulos angular.module('starter.controllers', ['ngCordova'])
  46. 46. <div class="list"> <div class="item item-divider"> Candy Bars </div> <a class="item" href="#"> Butterfinger </a> <a class="item" href="#"> Kit Kat </a> ... </div> List
  47. 47. <ion-list> <ion-item ng-repeat="item in items" item="item"> List Item {{ item.id }} </ion-item> </ion-list> Complex List • Diretiva AngularJS • Swiping para ver os botões • Reorder • Delete
  48. 48. Complex List • Similar ao ng-repeat do Angular • Inspirado pelo iOS UICollectionView • Scroll milhares de items items • Apenas renderiza items visíveis • Scroll com performance <div class="list"> <div collection-repeat="c in contacts"> <h2>{{ c.name }}</h2> <p>{{ c.email }}</p> </div> </div>
  49. 49. Navigation • Usa AngularUI Router • Mostra botãoVoltar quando possível • Transições obedecem direção da pag • Funciona com botãoVoltar - Android <ion-nav-bar> <ion-nav-back-button> Back </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view>
  50. 50. Tabs • Nested views • Cada tab tem próprio history • Estados abstraídos no router - Angular <ion-tabs> <ion-tab title="Home" icon="ion-home"> <ion-nav-view name="home"></ion-nav-view> </ion-tab> <ion-tab title="About" icon="ion-information"> <ion-nav-view name="about"></ion-nav-view> </ion-tab> <ion-tab title="Contact" icon="ion-ios7-world"> <ion-nav-view name="contact"></ion-nav-view> </ion-tab> </ion-tabs>
  51. 51. Side Menu <ion-side-menus> <ion-side-menu-content> <ion-nav-view name="menuContent"></ion-nav-view> </ion-side-menu-content> <ion-side-menu side="left"> <ion-header-bar class="bar-assertive"> <h1 class="title">Left Menu</h1> </ion-header-bar> <ion-content> ... </ion-content> </ion-side-menu> </ion-side-menus>
  52. 52. Slide Box <ion-slide-box on-slide-changed="change(index)"> <ion-slide> Slide 1 </ion-slide> <ion-slide> Slide 2 </ion-slide> <ion-slide> Slide 3 </ion-slide> </ion-slide-box>
  53. 53. Action Sheet • Serviço AngularJS • Injeção nos controllers $ionicActionSheet.show({ titleText: 'Action Sheet Example', buttons: [ { text: 'Share' }, { text: 'Move' }, ], destructiveText: 'Delete', cancelText: 'Cancel', buttonClicked: function(index) { console.log('BUTTON CLICKED', index); return true; } });
  54. 54. Instalação npm install -g cordova ionic
  55. 55. ionic start myApp tabs Criando uma app ionic start myApp sidemenu ionic start myApp blank
  56. 56. ionic serve
  57. 57. Estrutura Projeto Familiar? Projeto Cordova Usa lib do Ionic Angular
  58. 58. Overview Código Fonte Ionic
  59. 59. ionic platform add android ionic build android ionic emulate android Desenv Nativo: Local
  60. 60. ionic serve -l
  61. 61. Plugins
  62. 62. http://ngcordova.com/
  63. 63. • Extensão Angular • Abstração do uso dos plugins Cordova • Tanto faz usar o plugin diretamente ou ngCordova
  64. 64. .controller('ContactsCtrl', function ($scope, $log, $cordovaContacts) { $scope.pickContact = function () { document.addEventListener("deviceready", function () { $cordovaContacts.pickContact().then(function (result) { console.log(JSON.stringify(result)); $scope.selectedContact = result; }) }, false); }; $scope.saveContact = function (contact) { document.addEventListener("deviceready", function () { $cordovaContacts.save(contact).then(function (result) { console.log(JSON.stringify(result)); }) }, false); }; $scope.removeContact = function (contact) { document.addEventListener("deviceready", function () { $cordovaContacts.remove(contact).then(function (result) { console.log(JSON.stringify(result)); }) }, false); }; })
  65. 65. createContact: function(){ var myContact = navigator.contacts.create({"displayName": "AAA Test Phonegap"}); if (myContact){ myContact.save(onSuccess,onError); } function onSuccess(contact) { alert("Save Success"); } function onError(contactError) { alert("Error = " + contactError.code); } }
  66. 66. Serviços e Ferramentas
  67. 67. http://creator.ionic.io/
  68. 68. http://view.ionic.io/
  69. 69. http://play.ionic.io/
  70. 70. Ferramentas de DEBUG
  71. 71. https://www.genuitec.com/products/gapdebug/
  72. 72. Opções para fazer Build
  73. 73. Build pela IDE
  74. 74. cordova platform add android Add Plataforma phonegap platform add android ionic platform add android
  75. 75. Phonegap Build
  76. 76. https://build.phonegap.com/
  77. 77. Ionic no Phonegap Build?
  78. 78. Ionic no Phonegap Build?
  79. 79. https://github.com/IonicBrazil
  80. 80. http://loiane.com fb.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  81. 81. Obrigada!

×