Buscar

Criando Aplicativo de tarefas com Ionic 3

Prévia do material em texto

Tutorial – Criando Aplicativo 
de tarefas com Ionic 3
Nesse tutorial irei mostrar como criar, de forma rápida, um aplicativo
usando o Framework Ionic, integrado aos serviços do Firebase.
Para o desenvolvimento seguiremos os seguintes passos.
Configurando o ambiente de 
desenvolvimento
Para o aplicativo que iremos desenvolver será necessário instalar os
seguintes programas:
Node.js link de download
Git link de download
Sublime Text 3 link de download
Após a instalação dos programas acima será necessário instalar o
Framework Ionic, para isso usaremos o cmd.
Para abrir o cmd vá ao menu iniciar do windows e digite cmd.
Já com o cmd aberto, insira o seguinte comando:
npm install -g cordova ionic
O comando geralmente demora um pouco dependendo da velocidade da
internet. Nele estamos especificando que será instalado de forma global
o Cordova e o Ionic.
Criando o projeto
Finalizada as configurações do ambiente de desenvolvimento poderemos
criar o projeto.
Mais uma vez no cmd será necessário inserir os seguintes comandos:
mkdir tarefas-app3
cd tarefas-app3
ionic start tarefasApp tabs
O primeiro comando serve para criar uma pasta com o nome “tarefas-app3”,
o segundo comando serve para navegar para dentro da pasta tarefas-app3 e
por fim o último comando serve para criar o projeto, para saber mais clique
aqui. A primeira parte do comando ionic informa que estamos usando
o ionic CLI, a segunda, start, informa que estamos criando um projeto, a
terceira, tarefasApp, é o nome do projeto e por fim o tabs informa que
usaremos um template de projeto.
O resultado do último comando pode ser visto na imagem abaixo.
Depois de criado o aplicativo iremos navegar até a pasta com o comando:
cd tarefasApp
Agora já dentro da pasta poderemos testar o projeto com o comando.
ionic serve --lab
O resultado será algo parecido com a imagem abaixo.
Também será aberta uma janela do navegador como na imagem abaixo, se a
janela não abrir copie o endereço http://localhost:8100 e cole no navegador.
Na visualização teremos o nosso aplicativo para as três principais
plataformas de desenvolvimento mobile.
Criando página de login
Agora que já está tudo configurado e funcionando voltaremos ao cmd para
criar a página de login, para isso navegue até a pasta do aplicativo, caso não
esteja nela, e adicione o seguinte comando.
ionic g page login
Esse comando serve para gerar uma página, o “g” indica gerar, o “page”
indica o que vai ser gerado e o “login” é o nome da página que vamos gerar.
Essa página será usada para a autenticação e o cadastro dos usuário do
nosso aplicativo. Ao final do comando voltaremos ao Sublime Text e
podemos verificar as pastas e arquivos que foram criados conforme a
imagem.
Por enquanto não vamos mexer nos arquivos que foram criados,
primeiramente iremos apenas configurar o serviço de autenticação.
Configurando o serviço de autenticação no 
Firebase
Se você não possuí um e-mail do Gmail será necessário criar um para
acessar o Firebase, para criar clique aqui.
Se você já possui então pode ir direto para a página inicial do Firebase.
No canto superior da tela, como na imagem acima, exite dois links: um é
o GO TO CONSOLE e o outro é o FAZER LOGIN, ambos vão nos
direcionar para a página de autenticação do Firebase, no nosso exemplo
iremos clicar no primeiro link GO TO CONSOLE.
Após o login como o e-mail e a senha você será direcionados para a página 
de projetos.
Se não existir nenhum projeto criado teremos duas opções Adicionar
projeto e Explorar projeto de demonstração, para nosso exemplo
você deve selecionar a opção Adicionar projeto.
Ao clicar em adicionar projeto aparecerá uma tela que solicitará as
informações do “Nome do projeto” e “País/Região”, no nome vamos
adicionar Tarefas App e no País/região selecionaremos Brasil. Após
inserir os dados clique em CRIAR PROJETO.
Agora que já foi criado o projeto vamos configurar o serviço de autenticação.
No menu esquerdo da página clique na opção Authentication.
Aparecerá uma tela com diversos provedores de login, usaremos o E-
mail/Senha. Para ativar clique sobre eles.
Mova o botão Ativar e clique em salvar. Depois de ativar o serviço você
precisa copiar as configurações para adicionar no aplicativo, para isso clique
no link CONFIGURAÇÕES DA WEB.
Clicando no link será apresentado uma tela com as configurações do 
Firebase.
Agora crie um arquivo dentro da pasta src como o nome config.ts como o
seguinte conteúdo.
export const config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
Note que as configurações são iguais as fornecidas pelo Firebase, porém sem
os valores, então substitua os valores das chaves no arquivo pelos valores 
que foram fornecidos pelo Firebase.
Lembrando que para um aplicativo de uso real você não deve repassar as
configurações do Firebase para outras pessoas.
Adicionando o Firebase no aplicativo
Feito o cadastro no Firebase e configurada a opção de autenticação vamos
voltar para o aplicativo e criar as configurações para funcionamento.
Para adicionar os serviços do Firebase no aplicativo usaremos a
biblioteca AngularFire. Com ela teremos acesso à todas as funcionalidades
do Firebase, para instalar a biblioteca vamos voltar ao cmd, já dentro da
pasta do projeto vamos inserir o seguinte comando:
npm install firebase angularfire2
O comando irá fazer o download do Firebase e do AngularFire, ele
apresentará uma saída parecida com a imagem.
Terminada a instalação da biblioteca teremos que inserir as configurações
necessárias para que a biblioteca funcione no aplicativo. As configurações
devem ser adicionadas no arquivo src/app/app.module.ts, que ficará
como o arquivo apresentado abaixo:
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ALTERAÇÃO 01 PASSO 6°
// Importações para funcionamento do Firebase e da Autenticação
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> FIM DA ALTERAÇÃO 01
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
// Configurações do FIREBASE
import { config } from '../config';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ALTERAÇÃO 03 PASSO 6°
// Configurações do Firebase
AngularFireModule.initializeApp(config),
// Configuração do serviço de autenticação do firebase
AngularFireAuthModule,
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> FIM DA ALTERAÇÃO 03
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Para testar se está tudo funcionando corretamente novamente utilize o 
comando.
ionic serve --lab
Se tudo estiver correto o aplicativo será aberto no navegador sem erros.
Criando o serviço de autenticação
Depois de configurado o Firebase criaremoso serviço de autenticação, ele
será usado na página de login do nosso aplicativo para cadastro e
autenticação dos usuários.
Primeiro vamos criar uma pasta chamada models dentro da pasta src do
aplicativo. Na pasta models vamos criar um arquivo com o nome user.ts e
vamos inserir o seguinte conteúdo.
export interface User {
email: string;
password: string;
}
Esse código serve para criar uma interface do usuário que usaremos para o 
cadastro e a autenticação.
Após criar o arquivo user.ts vamos criar o serviço de autenticação usando o
seguinte comando:
ionic g provider auth
Esse comando irá criar uma pasta chamada providers em nosso aplicativo
e dentro dessa pasta outra chamada auth. Na pasta auth vamos editar o
arquivo auth.ts e deixá-lo como no exemplo abaixo.
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
// ÍNICIO
// Imports que deverão ser adicionados
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { User } from '../../models/user';
// FIM
@Injectable()
export class AuthProvider {
// Atributo usuário que será usado para cadastro e autenticação
user: Observable<firebase.User>;
constructor(private firebaseAuth: AngularFireAuth) {
this.user = firebaseAuth.authState;
}
// Metodo de cadastro
register(user: User) {
return this.firebaseAuth.auth.createUserWithEmailAndPassword(user.email, user.password);
}
// Método de login
login(user: User) {
return this.firebaseAuth.auth.signInWithEmailAndPassword(user.email, user.password);
}
// Método de logout
logout() {
return this.firebaseAuth.auth.signOut();
}
}
Agora que já criamos o serviço de autenticação vamos para o próximo passo.
8° Adicionado o serviço de autenticação na página de login
Depois de criado o serviço de autenticação podemos voltar para a página
de login e adicionar a autenticação e o cadastro de usuários.
O primeiro passo é editar o nosso arquivo app.modules.ts, que fica dentro
da pasta src\app, para registrar a nossa página de login.
Com a edição o arquivo ficará da seguinte forma.
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
// Importações para funcionamento do Firebase e da Autenticação
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AuthProvider } from '../providers/auth/auth';
// Importação da página de login
import { LoginPage } from '../pages/login/login';
// Configurações do FIREBASE
import { config } from '../config';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage, // Registrando a página de login
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
// Configurações do Firebase
AngularFireModule.initializeApp(config),
// Configuração do serviço de autenticação do firebase
AngularFireAuthModule,
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage, // Registrando a página de login
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthProvider
]
})
export class AppModule {}
O próximo arquivo que vamos editar é o app.componet.ts, localizado 
também na pasta src\app, nesse arquivo iremos substituir a página 
principal do template pela página de login.
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
// ALTERAÇÃO 01 PASSO 8°
// Remoção da importação desnecessária
//import { TabsPage } from '../pages/tabs/tabs';
// Importação da página de login
import { LoginPage } from '../pages/login/login';
// FIM DA ALTERAÇÃO 01
@Component({
templateUrl: 'app.html'
})
export class MyApp {
// ALTERAÇÃO 02 PASSO 8°
//rootPage:any = TabsPage;
// Substituição da página principal para a pádina de login
// assim o usuário ao entrar no aplicativo já irá para página de login
rootPage:any = LoginPage;
// FIM DA ALTERAÇÃO 02
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}
Agora que já fizemos as configurações necessária podemos editar os 
arquivos da página de login. O primeiro é o login.ts localizado na 
pasta src\pages\login, ele ficará da seguinte forma.
import { Component } from '@angular/core';
// Nesse import adicionamos o AlertController que será usado para apresentar a mensagem do nosso
aplicativo
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
// Importação do nosso modelo de usuário
import { User } from '../../models/user';
// Importação do nosso serviço de autenticação
import { AuthProvider } from '../../providers/auth/auth';
// Importação da página que o usuário será redirecionado após o login
import { TabsPage } from '../tabs/tabs';
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
// Definindo o nosso atributo usuário do tipo User
public user = {} as User;
// Aqui no contrutor vamos adicionar o AuthProvider e o AlertController
constructor(public navCtrl: NavController, public navParams: NavParams,
private auth: AuthProvider, private alertCtrl: AlertController
) { }
// Método para exibir as nossas mensagens de erro.
alert(title, message) {
let al = this.alertCtrl.create({
title: title,
subTitle: message,
buttons: ['Fechar']
});
al.present();
}
// Método usado para login do usuário
// Recebe como parametro um tipo user e tenta fazer o login
async login(user: User) {
// Valida se foi informado email e password
if(user.email == "" || user.password == "")
{
this.alert('Erro', 'É necessário informar o email e senha');
} else {
try {
// Chama o método para fazer login
const result = await this.auth.login(user);
if (result) {
// Se ocorrer tudo bem redireciona para a página tabs
this.navCtrl.setRoot(TabsPage);
}
} catch (e) {
this.alert('Erro ao logar', e.message);
}
}
}
async register(user: User) {
// Valida se foi informado email e password
if(user.email == "" || user.password == "")
{ 
this.alert('Erro', 'É necessário informar o email e senha');
} else {
try {
// Chama o método para cadastrar usuário
const result = await this.auth.register(user);
if (result) {
// Se ocorrer tudo bem redireciona para a página tabs
this.navCtrl.setRoot(TabsPage);
}
} catch (e) {
this.alert('Erro ao cadastrar', e.message);
}
}
}
ionViewDidLoad() {
// Toda vez que um usuário acessar a página de login ele será deslogado
this.auth.logout();
}
}
Depois vamos editar o arquivo login.html também localizado na 
pasta src\pages\login.
<ion-header>
<ion-navbar color="primary">
<ion-title>Controlede Tarefas</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card>
<ion-card-header class="login">
<ion-icon style="zoom:8;" name="lock"></ion-icon>
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-label floating>E-mail</ion-label>
<ion-input type="text" [(ngModel)]="user.email"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Senha</ion-label>
<ion-input type="password" [(ngModel)]="user.password"></ion-input>
</ion-item>
<button ion-button block (click)="login(user)">Login</button>
<button ion-button block color="secondary" (click)="register(user)">Cadastro</button>
</ion-card-content>
</ion-card>
</ion-content>
Após a edição dos arquivos vamos novamente testar o aplicativo com o 
comando:
ionic serve --lab
Se os passos foram seguidos corretamente então o navegador será aberto e 
apresentará o resultado conforme a imagem.
Configurando o banco de dados no Firebase
Agora que já estamos com o serviço de login configurado vamos configurar o
serviço de banco de dados do nosso aplicativo.
Como o nosso aplicativo tem o objetivo de gerenciar uma lista de tarefas
precisamos salvar as tarefas em algum lugar, e é por isso que vamos usar
novamente o Firebase.
Primeiro vamos voltar para o console do Firebase, clique aqui , já no console
no menu esquerdo vamos clicar na opção Database.
Vamos selecionar a opção TESTAR A VERSÃO BETA DO
FIRESTORE conforme destacado na imagem a baixo.
Ao clicar será apresentado uma tela como na imagem abaixo, deixe como 
está e clique em ATIVAR.
Após ativar o serviço temos que configurá-lo para que apenas usuários 
autenticados tenham acesso ao banco de dados, clicaremos então na 
aba REGRAS e substituiremos o if false por if request.auth != null.
Antes da alteração.
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if false;
}
}
}
Após a alteração.
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}
No Firebase console faremos apenas isso.
Criando o serviço de tarefas
Agora que o nosso banco de dados já está pronto para ser usado vamos 
configurar o serviço que irá gerenciar as tarefas.
Primeiro é necessário criarmos o modelo de tarefas, como o de usuários que 
criamos, dentro da pasta models que fica em src\models.
O arquivo deve ser nomeado como tarefas.ts e vai ter o seguinte código.
export interface Tarefas {
id?: string;
nome: string;
finalizada: boolean;
}
Agora que já temos o modelo das tarefas vamos criar o serviço responsável 
por criar, editar, listar e excluir as tarefas.
Para criar o serviço abra o cmd navegue até a pasta do projeto e use o 
comando:
ionic g provider tarefas
Ao finalizar o comando terá criado a pasta tarefas dentro da 
pasta providers conforme a imagem.
Agora que já temos o serviço criado vamos editar o arquivo para que ele 
consiga gerenciar as tarefas dos usuários. O resultado será o código abaixo.
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
// Importações necessárias
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import { AuthProvider } from '../../providers/auth/auth'
import { Tarefas } from '../../models/tarefas'
@Injectable()
export class TarefasProvider {
// Definição do caminho onde será salvo os dados
// dos usuários
private caminho: string = '';
// Coleção de tarefas
private tarefasColllection: AngularFirestoreCollection<Tarefas>;
// Lista de tarefas
tasks: Observable<Tarefas[]>;
// Parametros que vamos injetar no construtor
constructor(private afs: AngularFirestore, private auth: AuthProvider) {
// Verificando ser o usuário está logado para criarmos o caminho
this.auth.user.subscribe(auth => {
// Verifica se está logado e adiciona o caminho, usaremos o email
// como caminho para ficar mais fácil identificar as tarefas de cada usuário
if(auth != null)
{
this.caminho = '/' + auth.email;
this.tarefasColllection = afs.collection<Tarefas>(this.caminho, ref => {
return ref;
});
} else {
this.caminho = '';
}
});
}
// Este método será retorna um lista de tarefas pode ser
// as finalizadas ou as que ainda não foram finalizadas
// para filtrar passamos o parametro finalizada
pegarTarefas(finalizada: boolean) {
return this.afs
.collection<Tarefas>(this.caminho, ref => {
return ref.where('finalizada', '==', finalizada);
})
.snapshotChanges()
.map(actions => {
return actions.map(a => {
const data = a.payload.doc.data() as Tarefas;
const id = a.payload.doc.id;
return { id, ...data };
})
});
}
// Método usado para adicionar uma tarefa
adicionar(tarefa: Tarefas) {
this.tarefasColllection.add(tarefa);
}
// Método usado para atualizar uma tarefa
atualizar (id: string, task:Tarefas) {
this.tarefasColllection.doc(id).update(task);
}
// Método usado para excluir uma tarefa
excluir (id: string) {
this.tarefasColllection.doc(id).delete();
}
}
Agora que já temos o serviço de tarefas pronto vamos criar as páginas para 
adicionar tarefas e listar as tarefas finalizadas. As tarefas que ainda não 
foram finalizadas serão listadas na página home do nosso aplicativo.
Para criar as páginas vamos abrir o cmd, navegar até a pasta do nosso 
projeto e adicionar os seguintes comandos:
ionic g page adicionarTarefa
ionic g page tarefasFinalizadas
Os comandos acima irão criar duas páginas, a primeira usaremos para 
cadastrar as tarefas e a segunda usaremos para listar as tarefas que já foram 
finalizadas.
Agora vamos editar a página que usaremos para adicionar as tarefas, 
primeiro faremos algumas alterações no arquivo adicionar-tarefa.ts, no 
final da edição ele deve ficar como o arquivo abaixo.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
// Importações necessárias
// Importação do serviço de tarefas
import { TarefasProvider } from '../../providers/tarefas/tarefas';
// Importação do modelo de tarefas
import { Tarefas } from '../../models/tarefas'
// Importação da página tabs que o usuário será direcionado
// ao finalizar a edição de uma tarefa
import { TabsPage } from '../tabs/tabs';
@IonicPage()
@Component({
selector: 'page-adicionar-tarefa',
templateUrl: 'adicionar-tarefa.html',
})
export class AdicionarTarefaPage {
// Definição do atributo tarefa que será usado para o cadastro
public tarefa = {} as Tarefas;
// Adicionando o serviço de tarefa no construtor
constructor(public navCtrl: NavController, public navParams: NavParams,
private tarefasProvider:TarefasProvider) {
}
// Método que será usado para adicionar uma tarefa
adicionarTarefa(tarefa: Tarefas) {
tarefa.finalizada = false;
this.tarefasProvider.adicionar(tarefa);
this.navCtrl.setRoot(TabsPage);
}
ionViewDidLoad() {
console.log('ionViewDidLoad AdicionarTarefaPage');
}
}
Depois editaremos o arquivo adicionar-tarefa.html onde adicionaremos 
o formulário para cadastrar as tarefas. O arquivo deve ficar como no 
exemplo abaixo.
<ion-header>
<ion-navbar>
<ion-title>Adicionar Tarefa</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card>
<ion-card-content>
<ion-item>
<ion-label floating>Nome da tarefa</ion-label>
<ion-input type="text" [(ngModel)]="tarefa.nome" maxlength="50"></ion-input>
</ion-item>
<button ion-button color="secondary" block (click)="adicionarTarefa(tarefa)">
Adicionar
</button>
</ion-card-content>
</ion-card>
</ion-content>
Finalizada apágina de adicionar-tarefa vamos para a página home do 
nosso aplicativo adicionar o código para listar as tarefas que não foram 
finalizadas e adicionar os botões de adicionar tarefas, e sair do aplicativo.
Vamos editar primeiro o arquivo home.ts da página home, ele deve ficar 
como no exemplo abaixo.
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
// Imports adicionados
import { Observable } from 'rxjs/Observable';
// Serviço de autenticação que será usado para fazer o logout
import { AuthProvider } from '../../providers/auth/auth'
// Página de login, para onde o usuário que fizer logout sera direcionado
import { LoginPage } from '../login/login';
// Página para adicionar uma tarefa
import { AdicionarTarefaPage } from '../adicionar-tarefa/adicionar-tarefa';
// Serviço de tarefas
import { TarefasProvider } from '../../providers/tarefas/tarefas';
// Modelo de tarefas
import { Tarefas } from '../../models/tarefas'
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
// Atributo de lista de tarefas
tarefas: Observable<Tarefas[]>;
// Adição dos serviços de autenticação e de tarefas no construtor
constructor(public navCtrl: NavController, private auth: AuthProvider, 
private tarefasProvider:TarefasProvider) {
}
// Método para adicionar uma tarefa
adicionar () {
this.navCtrl.push(AdicionarTarefaPage);
}
// Método para setar uma tarefa como finalizada
finalizar(tarefa: Tarefas) {
tarefa.finalizada = true;
this.tarefasProvider.atualizar(tarefa.id, tarefa);
}
// Método para exluir uma tarefa
excluir(id: string) {
this.tarefasProvider.excluir(id);
}
// Método para sair do aplicativo e direcionar para o login
sair() {
this.auth.logout().then(value => {
this.navCtrl.setRoot(LoginPage);
});
}
ionViewDidLoad() {
// Busca todas as tarefas do usuário que não foram concluídas
this.tarefas = this.tarefasProvider.pegarTarefas(false);
}
}
Agora edite o arquivo home.html e adicione o conteúdo.
<ion-header>
<ion-navbar>
<ion-title>Minhas Tarefas</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="adicionar()">
<ion-icon name="add"></ion-icon>
</button>
<button ion-button icon-only (click)="sair()">
<ion-icon name="close-circle"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let tarefa of tarefas | async"> 
{{ tarefa.nome }}
<button clear="" ion-button item-end icon-left (click)="finalizar(tarefa)">
<ion-icon name="checkbox"></ion-icon>
</button>
<button clear="" ion-button item-end icon-left color="danger" (click)="excluir(tarefa.id)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-content>
Após configurar as páginas adicionar-tarefa e a página home vamos 
adicionar as configurações finais no arquivo app.module.ts, o resultado 
deve ser um arquivo igual ao apresentado abaixo.
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
// Importações para funcionamento do Firebase e da Autenticação
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
// Para usar o serviço de banco de dados é necessário importar o AngularFirestoreModule
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AuthProvider } from '../providers/auth/auth';
// Importação da página de login
import { LoginPage } from '../pages/login/login';
import { TarefasProvider } from '../providers/tarefas/tarefas';
// Adicionado páginas de Adicionar tarefa e listar tarefas concluídas
import { AdicionarTarefaPage } from '../pages/adicionar-tarefa/adicionar-tarefa';
import { TarefasFinalizadasPage } from '../pages/tarefas-finalizadas/tarefas-finalizadas';
// Configurações do FIREBASE
import { config } from '../config';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage, // Registrando a página de login
AdicionarTarefaPage, // Registrando a página de adicionar tarefa
TarefasFinalizadasPage, // Registrando a página de tarefas finalizadas
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
// Configurações do Firebase
AngularFireModule.initializeApp(config),
// Configuração do serviço de autenticação do firebase
AngularFireAuthModule,
// Configuração do serviço de banco de dados do firebase
AngularFirestoreModule,
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage, // Registrando a página de login
AdicionarTarefaPage, // Registrando a página de adicionar tarefa
TarefasFinalizadasPage, // Registrando a página de tarefas finalizadas
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthProvider,
TarefasProvider
]
})
export class AppModule {}
Agora vamos testar se está tudo funcionando, mais uma vez use o comando:
ionic serve --lab
Como já conseguimos adicionar e listar as nossas tarefas que não foram 
concluídas, agora iremos editar a página que irá exibir as tarefas que já 
foram concluídas.
O primeiro arquivo que vamos editar é o tarefas-finalizadas.ts, que deve 
ficar como no código abaixo:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
// Imports adicionados
import { Observable } from 'rxjs/Observable';
// Serviço de tarefas
import { TarefasProvider } from '../../providers/tarefas/tarefas';
// Modelo de tarefas
import { Tarefas } from '../../models/tarefas'
@IonicPage()
@Component({
selector: 'page-tarefas-finalizadas',
templateUrl: 'tarefas-finalizadas.html',
})
export class TarefasFinalizadasPage {
// Atributo de lista de tarefas
tarefas: Observable<Tarefas[]>;
constructor(public navCtrl: NavController, public navParams: NavParams, 
private tarefasProvider:TarefasProvider) {
}
// Método para exluir uma tarefa
excluir(id: string) {
this.tarefasProvider.excluir(id);
}
ionViewDidLoad() {
this.tarefas = this.tarefasProvider.pegarTarefas(true);
}
}
O segundo será o arquivo tarefas-finalizadas.hmtl.
<ion-header>
<ion-navbar>
<ion-title>Tarefas Finalizadas</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item *ngFor="let tarefa of tarefas | async"> 
{{ tarefa.nome }}
<button clear="" ion-button item-end icon-left color="danger" (click)="excluir(tarefa.id)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item>
</ion-content>
Por fim, vamos editar a página tabs para remover as 
páginas about e contact. Editaremos primeiro o arquivo tabs.ts, que deve
ficar com o código abaixo:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
// Páginas que serão usadas para redirecionamento
import { HomePage } from '../home/home';
import { LoginPage } from '../login/login';
import { TarefasFinalizadasPage } from '../tarefas-finalizadas/tarefas-finalizadas';
// Serviço de autenticação
import { AuthProvider } from '../../providers/auth/auth'
@Component({
templateUrl:'tabs.html'
})
export class TabsPage {
// Paginas que teremos no tabs
tab1Root = HomePage;
tab2Root = TarefasFinalizadasPage;
constructor(public navCtrl: NavController, private auth: AuthProvider) {
// Usado para direcionar o usuário que não estiver logado para a página de login
this.auth.user.subscribe(
(auth) => {
if (auth == null) {
this.navCtrl.setRoot(LoginPage);
}
});
}
}
Depois editaremos o arquivo tabs.html.
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Tarefas" tabIcon="list"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Concluídas" tabIcon="checkbox"></ion-tab>
</ion-tabs>
Agora que finalizamos todos os passos vamos testar novamente o nosso 
aplicativo.
ionic serve --lab
O resultado será como o apresentado na imagem abaixo.
Bom, nosso tutorial foi concluído, qualquer dúvida ou sugestão envie um e-
mail para dev@gustavopinho.com, se for algum erro mande o print da tela 
também.
O projeto completo pode ser visualizado no 
link https://github.com/gustavopinho/tarefas-app.
Apresentação.
Obrigado!
Bônus
Como já concluímos o nosso tutorial vou apresentar para vocês 
uma forma simples de testarmos o aplicativo em um Smartphone 
de verdade.
Criar cadastro no site
Para criar o cadastro acesse o 
link https://dashboard.ionicjs.com/signup lembre de escolhe a opção 
gratuita.
Após preencher o cadastro você será direcionado para a página de escolha 
do plano, lembre-se de escolher o plano gratuito.
Depois que já escolheu o plano você deve criar um aplicativo, a sugestão é 
usar o mesmo nome do aplicativo do tutorial.
Criado o aplicativo agora é possível conectar o aplicativo que criamos na 
conta do Ionic Pro, para isso siga as instruções oferecidas na própria página.
Depois que seguir os passos apresentados baixe o aplicativo do ionicview no 
seu Smartphone e logue com a conta que cadastrou no Ionic Pro.
Depois de logar no aplicativo, se você seguiu todos os passos corretamente, 
será possível testar o seu aplicativo no Smartphone.
	Tutorial – Criando Aplicativo de tarefas com Ionic 3
	Configurando o ambiente de desenvolvimento
	Criando o projeto
	Criando página de login
	Configurando o serviço de autenticação no Firebase
	Adicionando o Firebase no aplicativo
	Criando o serviço de autenticação
	8° Adicionado o serviço de autenticação na página de login
	Configurando o banco de dados no Firebase
	Criando o serviço de tarefas
	Bônus
	Criar cadastro no site

Outros materiais