Mini Curso Phonegap e Ionic

Loiane Groner
http://loiane.com
Mini Curso

• 9+ XP TI
• Java, Sencha, Phonegap/Ionic
• http://loiane.com
• @loiane
• Meus livros:
Loiane Groner

• Apps híbridas
• Phonegap e Cordova
• Ionic Stack
• Angular JS
• O que é Ionic
• Demo
• Ferramentas
• Build para App Stores
Agenda

WebView Nativa (Browser)
Seu Código

APIs Nativas
Seu Código

App Nativa: .apk, .ipa, etc
APIs Nativas
Seu Código

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

Phonegap
Phonegap Dev App
Phonegap Build
Phonegap Enterprise
Cordova
Comunidade
Código fonte
Plugins
APIs
Ponte com plataforma nativa

sudo npm install -g cordova
sudo npm install -g phonegap
Linux ou Mac OS

npm install -g cordova
npm install -g phonegap
Windows

cordova create hello com.loiane.hello HelloWorld
phonegap create hello com.loiane.hello HelloWorld

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
conﬁg.xml: arquivo de conﬁguração das
plataformas e projeto (também usado com
phonegap build)

Testando e Emulando
Localmente

cordova platform add android
Add Plataforma
phonegap platform add android

cordova emulate android
Emular
phonegap emulate android

cordova plugin add org.apache.cordova.contacts
phonegap plugin add org.apache.cordova.contacts

cordova plugin add cordova-plugin-contacts
> 5.x
https://www.npmjs.com/package/cordova-plugin-contacts

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);
}

pickContact: function(){
navigator.contacts.pickContact(function(contact){
alert('The following contact has been selected:' + JSON.stringify(contact));
},function(err){
console.log('Error: ' + err);
});
}

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);
}
}

• Phonegap e Cordova não possuem
componentes

• Phonegap e Cordova não possuem
componentes
• Necessário usar bibliotecas ou
frameworks

Topcoat
DOM
Architecture
UI
Full Stack

Ionic
Angular.JS
WebView
Cordova
Dispositivo
Stack

• Criado em 2009
• JavaScript MVC
• Programação declarativa
• Amplamente adotado pelo mercado

• MVC: Model View Controller
• 2 way data binding
• Templates HTML
• Injeção de dependência
• Diretivas
• Roteamento
Features

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>

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">

Injeção de Dependência
.controller('TasksCtrl', function($scope, $ionicModal, $ionicPopup, TasksService)

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');
});

Módulos
angular.module('starter.controllers', ['ngCordova'])

<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

<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

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>

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>

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>

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>

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>

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;
}
});

Instalação
npm install -g cordova ionic

ionic start myApp tabs
Criando uma app
ionic start myApp sidemenu
ionic start myApp blank

Estrutura Projeto
Familiar?
Projeto Cordova
Usa lib do Ionic
Angular

ionic platform add android
ionic build android
ionic emulate android
Desenv Nativo: Local

• Extensão Angular
• Abstração do uso dos plugins Cordova
• Tanto faz usar o plugin diretamente ou ngCordova

.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) {
$cordovaContacts.save(contact).then(function (result) {
})
}, false);
};
$scope.removeContact = function (contact) {
$cordovaContacts.remove(contact).then(function (result) {
})
}, false);
};
})

https://www.genuitec.com/products/gapdebug/

cordova platform add android
Add Plataforma
phonegap platform add android
ionic platform add android

https://github.com/IonicBrazil

http://loiane.com
fb.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg

Mini Curso Phonegap e Ionic

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

Similar to Mini Curso Phonegap e Ionic

Similar to Mini Curso Phonegap e Ionic (20)

Mini Curso Phonegap e Ionic