Baixe o app para aproveitar ainda mais
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
Compartilhar