Mini curso: Ionic Framework
77 gostaram•6,823 visualizações
O documento resume um mini curso sobre aplicativos híbridos usando Phonegap e Ionic. Em particular, o documento discute: 1) Uma introdução aos aplicativos híbridos e Phonegap; 2) Como criar um projeto básico usando Cordova ou Phonegap; 3) Como testar e emular aplicativos localmente; e 4) Uma visão geral do framework Ionic para criar interfaces de usuário para aplicativos híbridos.
![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);
}](https://image.slidesharecdn.com/ionic-150711133205-lva1-app6891/85/Mini-curso-Ionic-Framework-40-320.jpg)
![Módulos
angular.module('starter.controllers', ['ngCordova'])](https://image.slidesharecdn.com/ionic-150711133205-lva1-app6891/85/Mini-curso-Ionic-Framework-63-320.jpg)
![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;
}
});](https://image.slidesharecdn.com/ionic-150711133205-lva1-app6891/85/Mini-curso-Ionic-Framework-72-320.jpg)
Mini curso: Ionic Framework
- 2. • 9+ XP TI • Java, Sencha, Phonegap/Ionic • http://loiane.com • @loiane • Meus livros: Loiane Groner
- 3. • Apps híbridas • Phonegap e Cordova • Ionic Stack • Angular JS • O que é Ionic • Demo • Ferramentas • Build para App Stores Agenda
- 7. Nativo Web
- 11. Phonegap
- 13. Seu Código
- 14. WebView Nativa (Browser) Seu Código
- 15. APIs Nativas WebView Nativa (Browser) Seu Código
- 16. App Nativa: .apk, .ipa, etc APIs Nativas WebView Nativa (Browser) Seu Código
- 17. 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
- 19. Phonegap Phonegap Dev App Phonegap Build Phonegap Enterprise Cordova Comunidade Código fonte Plugins APIs Ponte com plataforma nativa
- 20. Instalação
- 23. sudo npm install -g cordova sudo npm install -g phonegap Linux ou Mac OS
- 24. npm install -g cordova npm install -g phonegap Windows
- 26. cordova create hello com.loiane.hello HelloWorld phonegap create hello com.loiane.hello HelloWorld
- 28. 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)
- 31. cordova platform add android Add Plataforma phonegap platform add android
- 34. cordova emulate android Emular phonegap emulate android
- 35. Plugins
- 37. Contacts
- 38. cordova plugin add org.apache.cordova.contacts phonegap plugin add org.apache.cordova.contacts
- 39. cordova plugin add cordova-plugin-contacts > 5.x https://www.npmjs.com/package/cordova-plugin-contacts
- 40. 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); }
- 42. pickContact: function(){ navigator.contacts.pickContact(function(contact){ alert('The following contact has been selected:' + JSON.stringify(contact)); },function(err){ console.log('Error: ' + err); }); }
- 44. 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); } }
- 46. Views
- 48. • Phonegap e Cordova não possuem componentes
- 49. • Phonegap e Cordova não possuem componentes
- 50. • Phonegap e Cordova não possuem componentes • Necessário usar bibliotecas ou frameworks
- 56. • Criado em 2009 • JavaScript MVC • Programação declarativa • Amplamente adotado pelo mercado
- 57. • MVC: Model View Controller • 2 way data binding • Templates HTML • Injeção de dependência • Diretivas • Roteamento Features
- 58. MVC no frontend
- 59. 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>
- 60. 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">
- 61. Injeção de Dependência .controller('TasksCtrl', function($scope, $ionicModal, $ionicPopup, TasksService)
- 62. 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'); });
- 65. <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
- 66. <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
- 67. 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>
- 68. 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>
- 69. 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>
- 70. 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>
- 71. 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>
- 72. 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; } });
- 74. Instalação npm install -g cordova ionic
- 75. ionic start myApp tabs Criando uma app ionic start myApp sidemenu ionic start myApp blank
- 76. ionic serve
- 77. Estrutura Projeto Familiar? Projeto Cordova Usa lib do Ionic Angular
- 79. ionic platform add android ionic build android ionic emulate android Desenv Nativo: Local
- 81. ionic serve -l
- 83. Plugins
- 85. • Extensão Angular • Abstração do uso dos plugins Cordova • Tanto faz usar o plugin diretamente ou ngCordova
- 86. .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); }; })
- 87. 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); } }
- 102. Ferramentas de DEBUG
- 105. Opções para fazer Build
- 106. Build pela IDE
- 107. cordova platform add android Add Plataforma phonegap platform add android ionic platform add android
- 109. Phonegap Build
- 112. Ionic no Phonegap Build?
- 113. Ionic no Phonegap Build?
- 116. Obrigada!