Ionic 3 com Firebase | Update, Delete, Toast & Concluindo

E chegamos ao final de nossa série Ionic 3 com Firebase, mais espcificamente usando o Realtime Database.  Nesta aula nós vamos criar a parte de atualização & remoção de cursos de nosso catálogo de cursos.

Neste post vou seguir uma pegada diferente, vamos levar o texto mais como um guia para o video mostrando os passos principais seguidos.

Então vamos lá!

Aulas passadas:

Update & Delete

Em nosso video tivemos três momentos, o momento da implementação do update & delete, o momento da implementação da page edit & por fim os testes e correções.

Os métodos, de update & delete, estão os abaixo:


update(course) {

return this.list('courses').update(course.key, course);

}


remove(course) {

return this.db.list('courses') .remove(course.key);

}

Geramos ainda um provider para usarmos o componente Toast do ionic. Para gerar use o comando abaixo, no seu terminal u cmd(Windows):

ionic g provider ToastrService

O conteúdo do nosso ToastrServiceProvider está abaixo:

Page Edit

Partindo para nossa página de edição de curso, para gerá-la basta executar o comando abaixo:

ionic g page edit

Segue nossa página na integrar, html & classe ts respectivamente:

Passos finais

Para concluirmos fizemos pequenas alterações em nossa home page. Primeiramente na lista, ao invês de passarmos somente a key para método goToSingle, passaremos o objeto inteiro para utilização na tela de edição, ficou da seguinte forma:

<pre><!--...-->
 <ion-list>
    <button ion-item *ngFor="let c of courses|async" (click)="goToSingle(c)">
      {{c.title}} - {{c.price|currency:"BRL"}}
    </button>
  </ion-list>
<!--...--></pre>

Alteramos também nosso método goToSingle para irmos para a página edit ao clicar no item da lista:


goToSingle(course) {

this.navCtrl.push(EditPage, { 'course': course });

}

Concluindo

Com isso chegamos ao final da nossa série, assista o video abaixo para pegar os detalhes dos passos comentamos acima.

Espero que esse material te ajude imensamente!

Em breve vamos lançar a plataforma Ionic Hero, com diversos conteúdos sobre Ionic e seu ecossistema. Inscreva-se na lista de espera clicando aqui.

Abs e sucesso!

 

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *