![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)
Carregado porLoiane Groner
Mini curso: Ionic Framework
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.
Mini curso: Ionic Framework
- 1.
- 2. • 9+ XPTI • 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
- 4.
- 7.
- 11.
- 13.
- 14.
- 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 umaapp phonegap É uma instância do browser nativo 100% largura e altura Browser nativo (WebView) sem barra de favoritos sem barra para mudar url
- 18.
- 19. Phonegap Phonegap Dev App PhonegapBuild Phonegap Enterprise Cordova Comunidade Código fonte Plugins APIs Ponte com plataforma nativa
- 20.
- 21.
- 22.
- 23. sudo npm install-g cordova sudo npm install -g phonegap Linux ou Mac OS
- 24. npm install -gcordova npm install -g phonegap Windows
- 25.
- 26. cordova create hellocom.loiane.hello HelloWorld phonegap create hello com.loiane.hello HelloWorld
- 28. www: código fonteda 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)
- 29.
- 31. cordova platform addandroid Add Plataforma phonegap platform add android
- 34. cordova emulate android Emular phonegapemulate android
- 35.
- 37.
- 38. cordova plugin addorg.apache.cordova.contacts phonegap plugin add org.apache.cordova.contacts
- 39. cordova plugin addcordova-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 followingcontact 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.
- 48. • Phonegap eCordova não possuem componentes
- 49. • Phonegap eCordova não possuem componentes
- 50. • Phonegap eCordova não possuem componentes • Necessário usar bibliotecas ou frameworks
- 52.
- 53.
- 56. • Criado em2009 • JavaScript MVC • Programação declarativa • Amplamente adotado pelo mercado
- 57. • MVC: ModelView Controller • 2 way data binding • Templates HTML • Injeção de dependência • Diretivas • Roteamento Features
- 58.
- 59. Diretivas <body ng-app="tasks" ng-controller="TasksCtrl"> <ion-itemng-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'); });
- 63.
- 65. <div class="list"> <div class="itemitem-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 initems" 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 • Similarao 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 AngularUIRouter • 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-menuside="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> Slide1 </ion-slide> <ion-slide> Slide 2 </ion-slide> <ion-slide> Slide 3 </ion-slide> </ion-slide-box>
- 72. Action Sheet • ServiçoAngularJS • 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 -gcordova ionic
- 75. ionic start myApptabs Criando uma app ionic start myApp sidemenu ionic start myApp blank
- 76.
- 77. Estrutura Projeto Familiar? Projeto Cordova Usalib do Ionic Angular
- 78.
- 79. ionic platform addandroid ionic build android ionic emulate android Desenv Nativo: Local
- 81.
- 83.
- 84.
- 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); } }
- 88.
- 90.
- 94.
- 98.
- 102.
- 103.
- 105. Opções para fazerBuild
- 106.
- 107. cordova platform addandroid Add Plataforma phonegap platform add android ionic platform add android
- 109.
- 110.
- 112. Ionic no PhonegapBuild?
- 113. Ionic no PhonegapBuild?
- 114.
- 115.
- 116.