Desenvolvimento de Aplicativos utilizando o framework IONIC

1. Desenvolvimento de
Aplicativo Utilizando o
Framework IONIC
Ministrante: Julio Cartier M. Gomes
E-mail: juliocartier@gmail.com ||
julio.gomes@alunos.ufersa.edu.br

2. Nativo vs Híbrido
2

3. Nativo vs Híbrido
● O app Nativo é desenvolvido para utilização em uma plataforma
específica, como iOS, Android ou Windows Phone.
● O app Híbrido permite construir aplicativos usando JavaScript, HTML e
CSS. Tornando-se possível realizar a transferência do código para a sua
plataforma nativa (Android, iOS e Windows Phone).
3

4. Vantagens Híbrido
● Os app híbridos são mais fáceis de serem migrados para outras
plataformas, pois diversos frameworks possibilitam a criação
multiplataforma.
● A tecnologia por trás dos frameworks desenvolvedora de aplicativos
híbridos melhora a cada dia, reduzindo a sua diferença entre os apps
nativos.
4

5. Desvantagens Híbrido
● A execução do projeto de um aplicativo híbrido é bem semelhante aos
mobile (web) app, no entanto, seu projeto envolve algumas etapas extras,
e isso acaba comprometendo o custo da sua concepção.
● Não tem todos os plugins, é necessário criar algum plugin específico em
plataforma nativa.
5

6. Instalação
● NodeJS
● NPM
● Cordova
● Ionic
6

7. O que é o NodeJS e NPM?
● NPM (Gerenciador de Pacotes do Node). O NPM é duas coisas: Primeiro, e
mais importante, é um repositório online para publicação de projetos de
código aberto para o Node.js; segundo, ele é um utilitário de linha de
comando que interage com este repositório online, que ajuda na
instalação de pacotes, gerenciamento de versão e gerenciamento de
dependências.
7

8. O que é Cordova?
● O cordova permite criar aplicações híbridas para diferentes plataformas
mobile com base no componente WebView. Este funciona como um
browser, mas sem aquela barra de endereço ou botões para o usuário.
8

9. O que é IONIC?
● É uma ferramenta de software livre para a criação de aplicativo móveis de
alto desempenho, com alta qualidade.
● HMTL, CSS e JavaScript.
9

10. Instalação NodeJS e NPM
● Windows
10

11. Instalação NodeJS e NPM
● Windows
11

12. Instalação NodeJS e NPM
● Linux (Ubuntu x64)
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-
an-ubuntu-14-04-server
12

13. Versão NPM e Node
npm --version
node --version
É superior há 9.4.0?
É superior há 5.6.0?
13

14. Instalação Cordova e Ionic
npm install -g ionic cordova
14

15. Versão Cordova e IONIC
cordova --version
ionic --version
É superior há 3.0.0?
É superior há 7.0.0?
15

16. Diferença entre Ionic 3 e Ionic 4
16

17. Tipos de Menu
17

18. Antes de tudo vamos criar uma pasta?
mkdir ProjetosIonic
18

19. Inicializando
ionic start myApp sidemenu
19

20. 20

21. 21

22. 22

23. 23

24. 24

25. myApp/src/pages/home/home.html
<ion-list>
<ion-item>
<ion-label fixed>Username</ion-label>
<ion-input type="text" [(ngModel)]="username"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>
</ion-list>
<button ion-button full (click)="passeDados(username,password)"
round>Login</button>
25

26. myApp/src/pages/home/home.ts
public passeDados(username : any, password : any){
let username = this.username;
let password = this.password;
console.log(username, password);
}
26

27. myApp/src/pages/home/home.ts
public passeDados(username : any, password : any){
let username = this.username;
let password = this.password;
console.log(username, password);
}
27

28. Criando uma nova página
ionic generate page menuprincipal
28

29. myApp/src/app/app.module.ts
import { MenuPrincipalPageModule } from '../pages/menu-principal/menu-principal.module';
29

30. myApp/src/app/app.module.ts
imports: [
BrowserModule,
MenuPrincipalPageModule,
IonicModule.forRoot(MyApp),
]
30

31. myApp/src/pages/menu-principal/menu-principal.ts
import { MenuPrincipalPage } from '../menu-principal/menu-principal';
31

32. myApp/src/pages/home/home.ts
public passeDados(username : any, password : any){
let username = this.username;
let password = this.password;
let dados = {userName: username, passWord: password};
console.log(dados);
this.navCtrl.setRoot(MenuPrincipalPage, dados);
}
32

33. myApp/src/pages/menu-principal/menu-principal.ts
usuario: any = this.navParams.get('userName');
senha: any = this.navParams.get('passWord');
33

34. myApp/src/pages/menu-principal/menu-principal.ts
import { HomePage } from '../home/home';
34

35. myApp/src/pages/menu-principal/menu-principal.ts
public sair(){
this.navCtrl.setRoot(HomePage);
}
35

36. myApp/src/pages/menu-principal/menu-principal.htm
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Menu Principal</ion-title>
<ion-buttons end>
<button right ion-button color="dark" clear (click)="sair()">Sair</button>
</ion-buttons>
</ion-navbar>
</ion-header>
36

37. myApp/src/app/app.component.ts
this.pages = [
{ title: 'Menu Principal', component: MenuPrincipalPage },
{ title: 'List', component: ListPage }
];
37

38. myApp/src/app/app.component.ts
openPage(page) {
this.nav.push(page.component);
}
38

39. Native Storage
● O Native Storage é uma maneira fácil de armazenar pares chave / valor e
objetos JSON.
● Ao executar em um contexto de aplicativo nativo, o Storage priorizará o
uso do SQLite, pois é um dos bancos de dados mais estáveis e
amplamente usados.
● Ao executar na Web ou em um Progressive Web App, o Storage tentará
usar IndexedDB, WebSQL e localstorage, nessa ordem.
39

40. Instalando o Native Storage
40
ionic cordova plugin add cordova-sqlite-storage
npm install --save @ionic/storage

41. Criando um Provider
41
ionic g provider contato

42. myApp/src/providers/contato/contato.ts
42

43. myApp/src/providers/contato/contato.ts
43
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { Storage } from '@ionic/storage';
import { DatePipe } from '@angular/common';

44. myApp/src/providers/contato/contato.ts
● Criando Um Construtor
44
constructor(private storage: Storage, private datepipe: DatePipe) {
console.log('Hello ContatoProvider Provider');
}

45. myApp/src/providers/contato/contato.ts
● Criando Classes
45
export class Contato {
nome: string;
telefone: number;
dataAniversario: Date;
}
export class ContatoLista {
key: string;
contato: Contato;
}

46. myApp/src/providers/contato/contato.ts
● Criando o método Inserir
46
public inserir(contato: Contato) {
let key = this.datepipe.transform(new Date(), "ddMMyyyyHHmmss");
return this.save(key, contato);
}

47. myApp/src/providers/contato/contato.ts
● Criando o método atualizar
47
public atualizar(key: string, contato: Contato) {
return this.save(key, contato);
}

48. myApp/src/providers/contato/contato.ts
● Criando o método salvar
48
private save(key: string, contato: Contato) {
return this.storage.set(key, contato);
}

49. myApp/src/providers/contato/contato.ts
● Criando o método remover
49
public remove(key: string) {
return this.storage.remove(key);
}

50. myApp/src/providers/contato/contato.ts
● Criando o método Listar
50
public getAll() {
let contatos: ContatoLista[] = [];
return this.storage.forEach((value: Contato, key: string, iterationNumber:
Number) => {
let contato = new ContatoLista();
contato.key = key;
contato.contato = value;
contatos.push(contato);
}).then(() => {
return Promise.resolve(contatos);
}).catch((error) => {
return Promise.reject(error);
});
}

51. Criando outra página
ionic generate page adicionar-contato
51

52. myApp/src/app/app.module.ts
52
import { ContatoProvider } from '../providers/contato/contato';
import { AdicionarContatoPageModule } from
'../pages/adicionar-contato/adicionar-contato.module';
import { IonicStorageModule } from '@ionic/storage';
import { DatePipe } from '@angular/common';

53. myApp/src/app/app.module.ts
53
imports: [
BrowserModule,
MenuPrincipalPageModule,
AdicionarContatoPageModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],

54. myApp/src/app/app.module.ts
54
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
DatePipe,
ContatoProvider
]

55. myApp/src/pages/adicionar-contato/adicionar-contato.ts
import { IonicPage, NavController, NavParams, ToastController } from
'ionic-angular';
import { ContatoProvider, Contato } from '../../providers/contato/contato';
55

56. myApp/src/pages/adicionar-contato/adicionar-contato.ts
model: Contato;
key: string;
56

57. myApp/src/pages/adicionar-contato/adicionar-contato.ts
model: Contato;
key: string;
57

58. myApp/src/pages/adicionar-contato/adicionar-contato.ts
constructor(public navCtrl: NavController, public navParams:
NavParams, private contatoProvider: ContatoProvider, private
toast: ToastController) {
if (this.navParams.data.contato && this.navParams.data.key) {
this.model = this.navParams.data.contato;
this.key = this.navParams.data.key;
} else {
this.model = new Contato();
}
} 58

59. myApp/src/pages/adicionar-contato/adicionar-contato.ts
salvar() {
this.salvarContato()
.then(() => {
this.toast.create({ message: 'Contato salvo.', duration: 3000,
position: 'botton' }).present();
this.navCtrl.pop();
})
.catch(() => {
this.toast.create({ message: 'Erro ao salvar o contato.',
duration: 3000, position: 'botton' }).present();
});
} 59

60. myApp/src/pages/adicionar-contato/adicionar-contato.ts
private salvarContato() {
if (this.key) {
return this.contatoProvider.atualizar(this.key, this.model);
} else {
return this.contatoProvider.inserir(this.model);
}
}
60

61. myApp/src/pages/adicionar-contato/adicionar-contato.html
<ion-list>
<ion-item>
<ion-label stacked>Nome</ion-label>
<ion-input type="text" name="nome" [(ngModel)]="model.nome"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Telefone</ion-label>
<ion-input type="tel" name="phone" [(ngModel)]="model.telefone"></ion-input>
</ion-item>
61

62. myApp/src/pages/menu-principal/menu-principal.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from
'ionic-angular';
import { HomePage } from '../home/home';
import { AdicionarContatoPage } from '../adicionar-contato/adicionar-contato';
import { ContatoProvider, Contato, ContatoLista } from
'../../providers/contato/contato';
62

63. myApp/src/pages/menu-principal/menu-principal.ts
contatos: ContatoLista[];
constructor(public navCtrl: NavController, public navParams: NavParams,
private contatoProvider: ContatoProvider, private toast: ToastController) {
}
63

64. myApp/src/pages/menu-principal/menu-principal.ts
ionViewDidLoad() {
this.contatoProvider.getAll()
.then((result) => {
this.contatos = result;
});
}
64

65. myApp/src/pages/menu-principal/menu-principal.ts
addContato() {
this.navCtrl.push('AdicionarContatoPage');
}
editarContato(item: ContatoLista) {
this.navCtrl.push('AdicionarContatoPage', { key: item.key, contato:
item.contato });
}
65

66. myApp/src/pages/menu-principal/menu-principal.ts
removerContato(item: ContatoLista) {
this.contatoProvider.remove(item.key)
.then(() => {
// Removendo do array de items
var index = this.contatos.indexOf(item);
this.contatos.splice(index, 1);
this.toast.create({ message: 'Contato removido.', duration: 3000, position:
'botton' }).present();
})
}
66

67. myApp/src/pages/menu-principal/menu-principal.html
<ion-list>
<ion-card *ngFor="let item of contatos" [ngClass]="{'item-inactive':
!item.contato.active }">
<ion-card-header>
<h1>{{ item.contato.nome }}</h1>
</ion-card-header>
<ion-card-content>
<p>{{ item.contato.telefone }} </p>
<p>{{ item.contato.dataAniversario | date:'dd/MM/yyyy' }} </p>
</ion-card-content>
67

68. myApp/src/pages/menu-principal/menu-principal.html
<ion-row text-center>
<ion-col>
<button ion-button icon-left clear small (click)="editarContato(item);">
<ion-icon name="create"></ion-icon>
<div>Editar</div>
</button>
</ion-col>
<ion-col>
<button ion-button icon-left clear small (click)="removerContato(item);">
<ion-icon name="trash"></ion-icon>
<div>Excluir</div>
</button> </ion-col> </ion-row>
</ion-card> </ion-list>
68

69. myApp/src/app/app.component.ts
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { MenuPrincipalPage } from '../pages/menu-principal/menu-principal';
import { AdicionarContatoPage } from '../pages/adicionar-contato/adicionar-contato';
69

70. myApp/src/app/app.component.ts
this.pages = [
{ title: 'Menu Principal', component: MenuPrincipalPage },
{ title: 'Adicionar Contato', component: AdicionarContatoPage },
{ title: 'List', component: ListPage }
];
70

71. 71