No exercício anterior,
já tínhamos configurado nosso backend Firebase como
um serviço com o novo projeto e também configuramos muitos
dados em nosso banco de dados e, em seguida, configuramos nosso armazenamento e
configuramos nosso Firebase Server para atuar como o backend para nosso aplicativo Angular.
Neste exercício, vamos olhar para uma versão modificada do
nosso aplicativo Angular que faz uso do backend Firebase como
um serviço para obter os dados e
também armazenar informações para os usuários nos servidores.
Além disso, aproveitaremos
o suporte de autenticação fornecido pelo Firebase para autenticar usuários
usando uma abordagem de e-mail e senha e também usando uma conta do Google.
Para começar este exercício,
vá para um local conveniente no seu computador e, em
seguida, clone o repositório Git dado onde eu
forneci a versão Angular Firebase da nossa aplicação Angular.
Então digite, git clone
https://github.com/jmuppala/confusion-Angular6-Firebase.git
e, em seguida, clone
o repositório Git e uma vez que o repositório Git é clonado para o seu computador,
em seguida, mover para a
pasta Firebase angular confusão que será criado neste ponto e
, em seguida, você observe que um monte de arquivos já estão instalados lá.
Vamos em frente e fazer uma instalação npm para instalar
todos os módulos de nó em que esta aplicação Angular é dependente.
Esta versão também irá instalar
dois módulos de nó adicionais chamados Firebase e, em seguida, Angular fogo dois.
Vou explicar um pouco mais sobre esses dois módulos de nós mais tarde neste exercício.
Assim que a instalação do projeto estiver concluída,
abra o projeto em um editor e, em seguida, no projeto,
vá para a pasta de ambientes de origem e,
em seguida, abra o arquivo environment.ts e no arquivo environment.ts,
você verá um conjunto de configuração do Firebase que você
precisa configurar com seu própria configuração do servidor Firebase.
Como vimos no exercício anterior,
podemos obter todas essas informações quando clicamos
neste botão aqui chamado “Adicionar Firebase ao seu aplicativo web” e, em seguida,
copiar essas informações e, em seguida, colar
essas informações em seu arquivo ambiment.ts para substituí-los por seu Configuração
de servidores Firebase para toda essa informação e uma vez concluída,
então você pode iniciar seu aplicativo Angular digitando “ng serve” no prompt.
Uma vez que seu aplicativo Angular é compilado com “ng serve”, em
seguida, vá para um navegador e, em seguida, digite localhost :4200 para carregar em
seu aplicativo Angular e você vai notar que seu aplicativo Angular é compilado
e, em seguida, carregado em seu navegador como antes.
Então, uma vez que seu aplicativo Angular está funcionando,
você vai notar que esta versão do aplicativo Angular vai estar fazendo uso
do servidor Firebase que você configurou
no exercício anterior e então aqui você veria a página “Home”,
a página “Sobre” como vemos aqui e a
“ Menu” e a página “Contato” e, obviamente, como não estamos logados no momento,
a página “Meus Favoritos” exibirá um erro informando que nenhum usuário está conectado.
Então, vamos nos conectar.
Deixe-me voltar para a “Homepage” e, em seguida, vamos entrar nós mesmos.
Então, quando você clicar no botão de login,
você verá o formulário típico aqui com o e-mail e as informações de senha.
Você também verá um botão adicional aqui chamado “Login with Google”.
Então deixe-me fazer login com minha conta do Google.
Então, quando você clica em “Login with Google”,
ele abrirá outra janela do navegador onde você será solicitado a
autorizar o uso de sua conta do Google por este servidor Firebase.
Então, deixe-me ir em frente e autorizar
este aplicativo e, em seguida, uma vez que a autorização é concluída,
então você verá que seu
aplicativo Angular baseado no Firebase será iniciado e, no canto direito,
você verá imediatamente seu nome sendo
exibido aqui e com o “Login” agora transformado em um botão “Logout”.
Então, neste momento,
você deve ser capaz de ver seus favoritos
e, neste caso, já que não temos nenhum favorito,
então ele vai estar vazio neste momento.
Deixe-me voltar ao “Menu” e, em seguida, adicionar alguns itens em “Meus Favoritos”.
Então, vou adicionar este prato aos meus favoritos.
Então, quando eu clicar neste prato,
você verá imediatamente o ícone se transformar em um coração cheio e deixe-me também selecionar
mais um prato e adicioná-lo em “Meus
Favoritos” e então agora quando você vai para o “Meus Favoritos”,
você verá o par de pratos adicionados em
seus favoritos como você esperar e novamente,
você pode excluir os pratos clicando na opção “Excluir” aqui e, em seguida, clique
na cruz para remover o item de sua lista de favoritos, como mostrado aqui.
Agora, também podemos adicionar como você percebeu,
podemos ir a qualquer prato e, em seguida, adicionar comentários sobre esse prato.
Então, deixe-me adicionar um comentário
aqui e no momento em que você enviar o comentário,
você verá imediatamente que seus comentários serão exibidos aqui com
o nome do autor do comentário também incluído aqui e com a data como mostrado aqui.
Então, você pode ver que o envio
de comentários do usuário será suportado para qualquer prato específico.
Deixe-me adicionar mais um favorito e assim este usuário terá alguns favoritos.
Deixe-me “Fazer logout” deste usuário.
Volte para a “Página inicial” e, em seguida, “Logout” deste usuário.
Agora vamos fazer login usando a outra conta.
Então, eu tinha- Eu tinha configurado
esta conta de senha de e-mail mais cedo e então vamos
fazer login como este outro usuário e uma vez que o outro usuário está logado,
deixe-me novamente ir para o “Menu” e adicionar um par de itens nos
favoritos para este usuário em particular
e assim quando você voltar para “Meus Favoritos”,
você verá esses itens listados para o segundo usuário.
Agora, da mesma forma para este usuário,
deixe-me novamente enviar outro comentário por este usuário.
Então-
e você
veria que os comentários enviados pelo segundo usuário também é adicionado ao aplicativo.
Então, é assim que seu aplicativo Angular funciona
com o Firebase como o backend como um serviço.
Agora é claro que você deve estar se perguntando,
como nós redesenhamos nosso aplicativo Angular para fazer uso do Firebase em vez
de usar o servidor Standard Express plus MongoDB que nós construímos anteriormente?
Para configurar seu aplicativo Angular para se comunicar com o Firebase Server,
há dois módulos de nós que você precisa instalar em
seu aplicativo Angular e um deles é o módulo Firebase.
O módulo Firebase como você vê aqui,
fornece as ferramentas e infra-estrutura que permite que você se comunique
com o servidor Firebase e para instalar isso em seu aplicativo
, você digita, npm install menos salvar Firebase.
Agora, junto com isso,
há outro módulo chamado Angular Fire 2.
Então, o Fogo Angular 2.
Além disso, mais uma vez eu forneci os links para estes dois módulos nos recursos adicionais.
O AngularFire 2 é a biblioteca oficial
para suporte Firebase e Angular e, como você pode ver,
é um suporte observável baseado para arquivos Angulares.
Então, isso funciona para adicionar ao módulo Firebase npm e, em seguida,
dá-lhe interface baseada observável que podemos usar em seu aplicativo Angular.
Então, estaríamos alavancando o AngularFire 2.
Então, para fazer uso do AngularFire2,
você precisa instalar tanto Firebase quanto AngularFire 2.
Então, em um tiro,
instale ambos em sua aplicação Angular.
Agora, a versão do aplicativo Angular que eu forneci para você
instala automaticamente ambos como você verá quando você examinar o arquivo package.json.
Agora, como fazer uso desses dois,
vou ilustrar que, executando rapidamente você através
do código modificado para os serviços e um par de componentes onde
fazemos uso do Firebase e AngularFire2
para modificar o aplicativo Angular que desenvolvemos
anteriormente para fazer uso do Firebase Server como o backend como um serviço.
Para entender mais sobre como
aproveitamos o Firebase e o AngularFire 2 em nosso aplicativo Angular,
nossa primeira parada é no arquivo package.json.
Então, no arquivo package.json,
você notará que instalei AngularFire2 aqui e também instalamos o
Firebase para usar nesta versão do aplicativo Angular que eu forneço para você.
Então, note que estes dois serão instalados automaticamente quando você digitar “npm
install” após clonar este repositório git que eu forneci para você.
Se você estava começando com um novo aplicativo Angular,
então você deve estar instalando tanto AngularFire 2 quanto Firebase,
a fim de aproveitar o uso do Firebase como o backend como um serviço.
Agora, tendo instalado esses dois,
vamos aprender como fazer uso deles dentro de nossos serviços.
Então, a melhor maneira de aprender a fazer uso de
ambos é visitar alguns dos serviços que
configuramos em nosso aplicativo e entender como
aproveitamos o uso do AngularFire2 e do Firebase.
Então, vamos começar com o arquivo dish.service.ts.
Então, se você for para o arquivo dish.service.ts,
você vai notar que aqui,
neste serviço de prato,
você vai me ver importando este AngularFiRestore, AngularFireDocument
e AngularFireCollection de AngularFire para Firestore aqui.
Então, que traz em tudo o que eu preciso do meu módulo AngularFiRestore npm,
também você vai notar que eu estou importando tudo de
Firebase/aplicativo como Firebase para o meu serviço prato aqui.
Então, uma vez que tenhamos importado esses dois,
vamos dar uma olhada rápida em como reconfiguramos nosso serviço de pratos aqui.
Então, se você entrar no serviço de prato,
você vai notar que eu não estou mais usando cliente HTTP.
Em vez disso, estou injetando AFS que é o AngularFiRestore no construtor aqui.
O AngularFiRestore é aquele que me dá
acesso ao backend do Firebase como um serviço.
Agora, lembre-se também que já configuramos todos os detalhes do
nosso servidor e também o projeto filestore no arquivo environment.ts anteriormente.
Então, você deve ter configurado essas informações já lá
sobre como seu aplicativo Angular deve estar aproveitando
seu projeto baseado em Firestore no
seu servidor Firestore para acessar os dados que você configurou lá.
Então, isso me dará acesso à minha nuvem
Firestore dentro do meu projeto Firebase que configurei.
Agora, o AuthService é, naturalmente, o mesmo Authservice que já usamos antes,
mas foi modificado para fazer uso do suporte Angular para Firebase.
Visitaremos o AuthService para saber como ele foi atualizado.
Agora, o AuthService nos dará acesso a
este método chamado getAuthState que retornará em um observável.
Este observável, quando subscrevemos,
nos dará a informação como um usuário que contém a informação do usuário.
Então, eu vou obter isso e, em seguida, configurar o CurrentUser no meu aplicativo
como o usuário retornado por este observável aqui.
Então, quando visitamos AuthService,
aprenderemos o que esse GetAuthState retornará para
nós e assim as informações do
CurrentUser podem ser obtidas de qualquer um
dos outros serviços porque já estamos injetando AuthService aqui.
Agora, vamos dar uma olhada em como GetDails método é implementado aqui.
Agora, anteriormente no método GetDishines,
estávamos usando o cliente HTTP para acessar o servidor na base URL+/Dishes.
Agora, neste caso,
para acessar uma coleção no meu servidor Firebase, diremos isso.afs.
Então, isso é o que AngularFire2 fornece para nós.
AFS como você vê é o AngularFiRestore que temos injetado aqui e por isso dizemos
this.afs.collection e aqui
vamos especificar a coleção específica que estamos acessando aqui.
Lembre-se que tínhamos preparado os pratos, as promoções
e as coleções de líderes no meu servidor Firebase.
Então, isso diretamente me dá acesso
à minha coleção de pratos aqui e da coleção de pratos,
eu posso fazer.ValueChanges que
irá retornar todas as informações na coleção de negócios para mim,
ou eu posso fazer.Snapshotchanges que irá
retornar informações adicionais, incluindo o ID dos pratos.
Então, se em vez de fazer SnapshotChanges,
se eu disser valueChanges,
ele retornará apenas as informações do prato, mas não retornará
os IDs dos pratos, mas desde
que eu vou precisar dos IDs dos meus pratos, então é por isso que eu estou usando o.Snapshotchanges neste caso.
Então, When.SnapshotChanges é chamado,
isso irá retornar como você vê um observável que
eu mapear e assim o valor de retorno que é chamado como ações e essas ações
, novamente, será um observável que eu vou mapear cada ação
nessas ações e, em seguida, extrair os dados da ação que é Retornou aqui.
Portanto, a ação é um valor que é retornado de para cada uma das ações
e esta ação contém uma carga útil e contém dentro que um campo escuro aqui.
Agora, isso é algo que eu descobri lendo
a documentação para AngularFire2 e
então quando chamamos essa função de dados nesta action.payload.doc,
isso vai me dar os dados.
Os dados para esse prato específico que é
obtido a partir da minha coleção de pratos no lado do servidor.
Então cada documento lá será devolvido aqui e
então eu obter o ID para isso dizendo action.payload.doc.id.
Então é aí que o ID do que será
carregado e então eu vou juntar os dois juntos e retornar
isso como um documento prato de volta para os meus vários componentes de lá,
eu vou chamar este método getDishes.
Então, como você se lembra,
a partir do componente de menu,
estou chamando o método GetDishages para obter
as informações sobre todos os pratos da minha coleção.
Colecção. Então, cada um desses prato que é retornado como um doc será reconstruído em
um objeto JavaScript com o ID inserido aqui e também
os dados que são extraídos deste payload.doc.data ação.
Agora isso é algo que você aprende lendo a documentação do AngularFire2.
Agora, já que eu já fiz essa parte,
eu estou mostrando o código exato que você deve
usar para extrair os dados e, em seguida, fornecer
esses dados de volta para o seu componente que vai chamar o método getDails aqui.
Então, fazendo isso para cada um dos documentos lá,
este documento será reconstruído para
o objeto prato que
usamos em nossa aplicação Angular e assim podemos até ter acesso ao ID.
Se você apenas fizer alterações de valor,
ele simplesmente retornará todos os documentos em si, mas sem os IDs dos documentos.
Então, este trabalho adicional precisa ser feito dentro do seu serviço, a fim de
retornar as informações da maneira certa para
que MyComponents possa fazer uso dessas informações.
Da mesma forma, para um método getDish,
então observe como estou acessando as informações de um prato específico.
Novamente, vamos dizer isso.afs e então você vai notar que eu sou
saying.doc e, em seguida, aqui para o método the.doc,
Eu forneço pratos barra e, em seguida, o ID do prato específico.
Agora, a razão pela qual eu tinha fornecido ID,
o ID aqui está vindo como o parâmetro para o método getDish aqui.
Agora, para que este ID seja fornecido,
eu preciso ser capaz de fornecer esse ID
no método GetDishages para que quando meu menu é construído,
cada prato terá seu ID anexado a ele lá.
Esse ID é passado aqui e eu vou estar acessando o documento neste momento.
Então, o AngularFire2 permite que você acesse
um documento específico que está dentro de uma coleção dizendo o nome da coleção barra,
mais o ID do documento ou você pode dizer this.afs.collection pratos exatamente como você ouviu,
pratos de coleta e then.doc e, em seguida, fornecer doc e ID dentro colchetes Lá.
Então, essa é outra maneira de abordar um prato específico.
Novamente, estou assinando SnapShotChanges e isso retornará uma ação que é
mapeada novamente no mesmo formato para
construir o objeto prato aqui junto com o ID aqui.
Agora, Firebase mantém o ID separado do
próprio documento e é por isso que eu tenho que fazer explicitamente
esta reconstrução a fim de obter
o documento dish de uma forma que é utilizável por MyComponents.
Então eu construí meu próprio servidor usando Express e MongoDB,
o ID automaticamente estava lá no próprio documento e por isso foi muito
fácil recuperar isso e fornecê-lo de volta para o lado do cliente.
Agora, para o GetFeaturedDish,
lembre-se que para o GetFeaturedDish,
estamos procurando aqueles pratos onde o recurso é definido como verdadeiro.
Agora, este é o lugar onde o AngularFire2 nos permite
construir uma consulta e fornecer essa consulta aqui para essa coleção.
Aqui eu estou dizendo este.afs coleção pratos aqui,
então eu ainda estou usando a coleção, mas então olhar para
o segundo parâmetro para esta chamada aqui.
Aqui diz ref onde o ref se refere a cada documento que está nesta coleção.
Este ref diz o ref e este é o lugar onde eu posso
usar esta consulta configurar ouves assim que diz.where.
Então, o que significa que cada um dos documentos onde o destaque,
como você pode ver, a sintaxe é bastante fácil de seguir aqui que diz onde destaque.
Agora, observe que o recurso é fornecido como uma string aqui,
e então o próximo,
o operador é igual a, então você pode até dizer maior que, menor
que, maior ou igual a menor ou igual a qualquer uma dessas coisas,
mas observe que isso deve estar dentro das aspas aqui e então você vai dizer que é verdade.
Assim, onde quer que a propriedade featured do documento esteja definida como true,
extraia todos eles.
Então, esta consulta irá extrair apenas os documentos
da coleção de pratos onde o recurso é definido como true,
e em seguida, retornar apenas os documentos dessa coleção aqui,
e de lá eu estou indo mudanças instantâneas e isso irá
retornar uma matriz de documentos e de lá eu vou mapeá-los
em documentos prato individuais e, em seguida, desde
que eu assegurei que apenas um desses documentos terá o recurso definido como verdadeiro.
Então, ele vai retornar apenas um deles, mas ele vai retorná-lo como um array.
Então, é por isso que eu estou construindo isso
com colchetes zero o primeiro elemento da matriz,
e de fato ele irá conter apenas um elemento porque apenas um elemento na minha coleção
irá corresponder a esta consulta particular que eu tenho configurado aqui com a onda aqui.
Existem outras configurações de consulta aqui você também pode usar algo chamado ordem por.
Então, você pode ordenar a coleção por uma determinada propriedade,
e algum outro conjunto de opções de consulta que estão disponíveis.
Agora, isso é suportado pelo Firebase em sua nuvem Firestore,
e é isso que podemos aproveitar usando AngularFire2 para projetar
o código em seu aplicativo Angular para fazer a consulta do lado do cliente em si.
Então, isso vai retornar o prato de recurso específico.
Agora, novamente GetDishid vai ser semelhante ao que fizemos anteriormente.
Então, nenhuma modificação lá.
Agora, para o PostComment novamente
porque Firebase com a nuvem Firestore beta,
não tem o conceito de população,
e assim por diante que vimos anteriormente.
Então, o que eu vou fazer para os comentários é que eu vou postar esses comentários como
uma coleção para o qual é fechado dentro de cada prato em si.
Então, cada prato terá sua própria coleção de comentários sobre esse prato específico.
Quando eu postar o comentário eu vou usar o DishID,
e depois as informações do comentário.
Então, o que eu faço aqui é que eu vou primeiro
consultar os pratos e, em seguida, obter esse prato particular.
Então, você pode ver que eu estou usando a outra maneira de consultar um documento específico.
Então, aqui estou dizendo este afs.collection ('pratos') .doc DisHid.
Então, eu posso usar essa maneira de acessar um documento específico, se eu quiser.
A outra maneira é claro que você já viu com
o método GetDish onde eu digo pratos doc barra mais ID.
Então, duas maneiras diferentes de abordar um documento específico dentro de
uma coleção aqui e, em seguida, DishID e, em seguida, coleção e comentários.
Então, desta forma ele está dizendo
nesta coleção para este documento específico com aquele DishID,
há uma coleção que está incluída
neste documento e que a coleção tem o nome comentários.
Então, este é um aninhamento de uma coleção
dentro de um documento que está em outra conexão de nível superior.
Então, esse tipo de aninhamento de coleções é permitido pelo
Firebase Cloud Store Beta com até 100 níveis de profundidade, se você quiser escolher.
Então, dentro desta coleção,
vou acrescentar.
Então, como você adiciona um documento a uma coleção?
Para adicionar um documento à sua coleção,
use o método add em uma coleção aqui.
Então, você pode ver que nos comentários da coleção,
eu estou fazendo um add aqui e,
em seguida, este é o documento real que vai ser adicionado aqui.
Então, no próprio documento,
você verá que eu tenho a propriedade autor aqui onde eu configurei o ID atual,
e também eu configurei o primeiro nome para o autor aqui,
Eu só sirvo a primeira vez aqui então aqui eu digo este nome de exibição do usuário atual.
Se o nome de exibição for verdadeiro, então eu vou configurá-lo para este nome de exibição do usuário atual.
Se a conta do usuário não tem um nome de exibição como anexado a ele, então eu vou simplesmente
usar este e-mail de usuário atual como a propriedade do primeiro nome aqui.
Então, este documento que contém o comentário,
automaticamente também carrega este primeiro campo de nome
e é isso que eu vou estar usando para renderizar
as informações quando eu renderizar os comentários no meu componente DishDetail.
Então, note que eu estou realmente duplicando informações aqui em cada um dos comentários.
Mas tudo bem, uma vez que estes são armazenados como
documentos Json no Firebase, não há problema em
duplicar algumas das informações nos comentários aqui.
Mas se você quiser mais detalhes do usuário atual,
você já tem uma referência ao id do usuário aqui para que você possa realmente ir buscar
o documento para o usuário em particular e, em seguida,
obter mais informações sobre o usuário que você escolher.
Agora, quando eu usei Mongo DB mais Mongo de,
você viu que eu vou apenas usar o ID do usuário atual para
o autor e, em seguida, eu vou usar o populate para preencher essas informações.
Agora, o Cloud Firestore beta neste momento não tem
nenhum conceito deste preenchimento tanto quanto eu posso ver na documentação,
talvez uma versão futura possa suportar uma maneira de
extrair informações de outro documento e
preenchê-las automaticamente no documento atual.
Quando isso acontece, então este código terá que ser modificado para tirar proveito disso.
Mas no momento em que vejo, o
Firestore beta não tem a capacidade de
preencher informações de outro documento para o documento atual.
Então é por isso que eu estou apenas replicando apenas aquele pedaço de
informação que eu realmente preciso quando eu renderizar o comentário no
meu componente dishdetail aqui e, em seguida, abaixo
aqui você pode ver que eu tenho a classificação eo comentário aqui e, em seguida, também,
notar que eu estou criando
esses dois campos adicionais no meu comentário aqui chamados “CreateDAT” e “UpdateDAT”.
Observe como estou colocando o carimbo de data/hora para o “CreateDAT”.
O Firebase, agora o que é este Firebase que estou usando aqui,
este Firebase é exatamente o que eu importei aqui como do Firebase app.
Então isso me fornece como você vê aqui abaixo,
que me fornece este mesmo valor de campo Firestore.
Então esta chamada para o campo firestorm valores timestamp servidor,
irá retornar o timestamp atual para
mim e essa é a informação que eu vou estar armazenando no “CreateDAT”.
Agora, quando inseri todos os documentos aqui,
você viu que eu criei manualmente este campo “CreateDat” para cada um dos documentos.
Agora esta é uma maneira de fazer o mesmo dentro do
nosso código Angular no
lado do cliente e a mesma coisa para o campo “UpdateDAT” que você verá aqui.
Então, quando você postar um novo comentário,
você vê que é assim que você vai adicionar um novo comentário nesse servidor.
Agora, isso retorna uma promessa e então essa é a informação
que estou usando aqui para construir esta promessa aqui.
Então este outro método aqui dizendo “GetComments”,
este “GetComments como você pode ver ele está acessando pratos de coleção AFS,
doc DISHID e, em seguida, comentários de coleção e o aviso de que aqui,
Eu não vou ser exigindo cada ID comentários
que eu não vou estar usando no meu Angular petição de qualquer maneira,
então em vez de usar mudanças instantâneas,
eu estou apenas usando mudanças de valor e isso irá retornar
todos os documentos nesta coleção de comentários para este documento particular
o DisHID da coleção de pratos aqui e que serão devolvidos
e esses comentários que eu estarei renderizando em o meu componente de detalhe.
Agora, em Mongos, você viu que o fato de eu ter incluído o UserID significa
que eu poderia fazer copulação desta informação agora com Firebase, não
há nenhuma maneira de preencher a informação comum aqui,
então é por isso que eu estou explicitamente indo e, em seguida, preenchendo os comentários no
meu dishdetail componente para buscar todos os comentários sobre
este prato particular quando eu renderizá-los no componente dishdetail.
Então você vê, que eu tive que ajustar
o código Angular um pouco a fim de lidar com o fato de que o
Firebase não suporta certas coisas que mongos suporta
pelo menos no momento em que o Cloud Firestore beta não suporta essas coisas,
e então eu tive que trabalhar em torno de lidar com o Firebase permite que eu
armazene e recupere do site do servidor Firebase.
Agora, também é interessante para nós fazer uma rápida visita ao serviço Auth aqui.
O serviço Auth aqui novamente,
observe que no serviço Auth aqui estou importando este AngularFireAuth
do submódulo AngularFire para npm aqui.
Então, aqui você pode ver que estou importando AngularFireAuth e isso
me dá acesso ao aspecto de autenticação do Firebase.
Agora, vamos ver como a autenticação Firebase realmente funciona com nosso aplicativo Angular.
Agora vamos começar isso olhando para como o login é implementado.
Então, aqui é onde eu imploro o login,
onde eu estou usando o e-mail e a senha.
Então, esta parte quando eu importar o AngularFireAuth aqui,
observe que o construtor eu estou injetando o AngularFireAuth no meu construtor.
Então isso irá injetar o serviço AngularFireAuth
no meu construtor e isso me dá acesso
à autenticação Firebase no site do servidor para que eu possa autenticar usuários.
Então, se eu quiser autenticar um usuário que está entrando com o e-mail e a senha.
Esta função de login é a que vai ser chamada
quando eu digitar meu e-mail e senha na caixa de
diálogo de login que eu apareço e,
em seguida, clique no botão enviar ou no botão de login aqui,
esta função de login vai ser chamada e
as informações do usuário, mas eu recupero do componente de login é passado aqui.
Então, quando ele vem aqui,
eu vou usar este Afauth como você vê Eu apenas injetado no construtor,
e este fornece este objeto Auth aqui,
que fornece este método chamado “login com e-mail e senha”.
Então este login com e-mail e senha leva dois parâmetros aqui como você
esperaria o nome de usuário do usuário ou o e-mail e a senha aqui.
Então, essas duas informações que eu estou fornecendo
como os dois parâmetros para este login com e-mail e senha.
Então, quando você clicar em que você verá que ele
diz que o primeiro deve ser e-mail e o segundo deve ser senha.
Agora, a maneira que eu configurei,
este objeto de usuário que está chegando contém o e-mail no
user.username aqui e a senha na propriedade password do objeto usuário.
Então, quando isso é obtido,
então eu vou postar esta informação e então quando isso for concluído com sucesso,
isso significa que o usuário está logado corretamente,
se houver um erro,
então você pegar o erro aqui agora eu
não estou fazendo nada especificamente com o erro que você pode
deseja imprimir esta mensagem de erro para indicar que o usuário não pode fazer login e assim por diante.
Então, eu não implementei essa parte do negócio aqui,
eu estou apenas deixando aqui mesmo se você quiser registrar o console
esta informação você pode fazer isso quando ocorrem erros.
Agora, para sair, no Firebase.
Mais uma vez, pegamos a ajuda do Afauth que injetamos e Auth nele,
e isso fornece este método chamado “sair”,
que quando chamado vai sair do
usuário conectado atualmente e assim que é uma maneira de lidar com isso.
Agora, você deve estar se perguntando como eu lidar com a parte de login do Google.
Agora isso também é tratado com o Afauth para que o módulo AngularFire2 que eu estou usando,
fornece esta informação para estes métodos para nós através
do módulo Firebase que também é usado em AngularFire2,
e assim este fornece este método chamado login com pop e quando
fazemos login com pop- Aqui em cima note o que eu estou especificando aqui.
Então, eu estou dizendo “novo firebase.auth.googleAuthProvider”.
Agora, você também pode fazer firebase.auth.FaceBookAuthProvider e outros.
Então, como você viu no exercício anterior, o
Firebase permite que você faça login de terceiros usando Google,
Facebook, GitHub e Twitter.
Então você pode configurá-los adequadamente,
já que eu ativei apenas a autorização do Google.
Então é assim que eu vou configurá-lo para usar
minha autorização do Google aqui e esta única linha de código que eu coloquei aqui,
é a que faz com que o pop-up do navegador que me sugere para autorizar
meu Firebase para usar a autorização do Google usando minha conta do Google aqui.
Então essa é a segunda parte que eu montei aqui.
Portanto, observe que o serviço Auth
simplificou significativamente em comparação com o que fizemos com a versão anterior deste aplicativo.
Então você pode comparar as duas versões para ver como isso é diferente da outra.
Agora, não só que este Afauth que nós injetamos aqui,
AngularFireAuth parte que nós injetamos aqui,
também fornece este observável chamado “AuthState”.
Este AuthState observável, pode ser inscrito e este “AuthState” observável,
como você vê aqui,
que eu declarei aqui como um firebase.user observável.
Então, essa é a informação que é aplicada aqui e também podemos configurar
outra variável aqui chamado usuário atual que é do tipo Firebase usuário aqui.
Então, este AfauthState é um observável que
eu posso assinar e sempre que este AuthState muda,
o AuthState mantém o controle do estado de autenticação do usuário
se o usuário está logado ou desconectado e se o usuário está logado,
então este irá então se inscrever irá me retornar o e
a partir das informações do usuário podemos recuperar um monte de informações, incluindo o nome de exibição,
o e-mail, o ID do perfil e, em seguida, a
imagem do avatar para o usuário se ele tiver sido configurado para as contas específicas.
Todos estes ser-nos-ão fornecidos automaticamente pelo utilizador.
Então, quando você clicar em “usuário” e, em seguida, ponto,
você verá que ele fornece todas essas informações para nós.
Portanto, é um e-mail de nome de exibição,
se o e-mail é verificado ou não e assim por diante.
Então, algumas das coisas que nos interessam especificamente.
URL da foto que pode ser usado para recuperar as informações do avatar para o usuário,
ID do provedor que especifica quem está
fornecendo essas informações para você isso seria ou ID do Facebook, ID
do Google e ID do GitHub e assim por diante e informações adicionais até mesmo o token de atualização.
Então você vê um monte de informações sendo
disponibilizadas para você através do objeto de usuário que é
retornado por este Authstate quando você se inscrever para ele
e também deixe-me chamar a sua atenção para o UID o ID do usuário,
e isso é o que pode ser usado para indexar o usuário em nosso aplicativo.
Então esse é o serviço de autenticação da maneira que eu o
configurei para usar a autenticação Firebase neste aplicativo.
Então, duas alterações que eu refleti para mostrar
como meus serviços são modificados para usar o Firebase.
Muitas das atualizações que eu fiz para o meu aplicativo Angular estão todos
nos serviços para fazer uso do Firebase instalado.
Então, por causa do bebê estruturado de aplicação Angular,
os componentes estavam simplesmente dependendo dos
serviços e os serviços eram aqueles que estamos falando com o back-end.
Então, muitas das atualizações que eu fiz para o
meu aplicativo Angular envolvem apenas atualizar esses serviços para
usar o back-end Firebase do Google como um serviço com os dois módulos npm,
Firebase e AngularFireAuth aqui.
Então, você veria que grande parte das atualizações é restrita a
todos esses serviços que eu tenho na pasta de serviços do meu aplicativo Angular.
Claro, eu precisava fazer um pouco de
ajustes mínimos no componente dishdetail
e no componente de cabeçalho para fazê-lo funcionar com o Firebase.
Você pode fazer uma visita rápida ao headercomponent.ts,
o headercomponent.html e o dishdetailcomponent.tsfile para ver como o código
mudou entre a versão anterior
e a versão atual do aplicativo Angular,
a versão anterior, quero dizer a versão que usamos para
comunicando com o nosso
servidor X mais Mongo DB que usamos no exercício anterior.
Agora, mais um lugar onde você poderia me ver fazendo modificações,
curiosamente, é no serviço favorito.
No serviço favorito,
a maneira como eu armazenei os favoritos do usuário,
é que os favoritos é uma coleção no
meu site do servidor e o favorito em si contém documentos.
Cada documento contém o ID do usuário e o ID do prato.
Então, um determinado usuário poderia ter
vários documentos cada um deles armazenando o ID do usuário e o ID do prato.
Assim, uma coleção deles juntos definirá todos os favoritos para um determinado usuário.
Descobri que esta é uma maneira melhor de organizar esses dados no Firebase.
Em nosso MongoDB mais mongos,
você viu que eu tinha incorporado na matriz de IDs prato no
documento favoritos e, em seguida, definir o esquema favorito dessa forma.
Aqui, estou usando
um documento separado para rastrear cada um dos favoritos para cada um dos usuários.
Agora, como o Firebase suporta consultas, então,
eu posso consultar meu Firebase e extrair todos os documentos que têm os mesmos IDs de usuário,
que corresponde ao usuário que está conectado no momento e, em seguida,
extrair os IDs de prato correspondentes dos favoritos.
Então eu vou e, em seguida, consultar o meu servidor
e obter a informação prato para cada um desses pratos.
Então, envolve várias viagens para o servidor, a fim de obter
todas as informações meus pratos favoritos antes de eu poder renderizar minha lista de favoritos.
Mas, essa é a melhor maneira que eu poderia obter Firebase para trabalhar com meu aplicativo Angular.
Talvez, em uma data futura, o
Firebase Cloud Firestone possa se estender para
permitir que algo como preencher o que fizemos com mongos.
Nesse caso, estarei atualizando o código para usar essa forma
de obter todas as informações do prato automaticamente.
Assim, a carga de construir este documento composto será deslocada para o site do servidor.
Neste momento, o meu cliente está a fazer muito do trabalho aqui.
Agora, quando você entrar aqui,
você verá que no método getFavorites,
você verá como eu estou acessando meus favoritos aqui.
Então, quando eu faço “Getfavorites” Eu estou consultando
esta coleção de favoritos, mas observe que aqui,
eu digo “ref onde está este ID de usuário”.
Este ID de usuário obtenho aqui.
Então, no construtor do meu servidor favorito,
estou subscrevendo este serviço de Auth o estado Get Auth no serviço Auth.
Então, no serviço Auth se você entrar,
você verá esse método chamado Get Auth state aqui.
O estado Get Auth retorna o this.authState,
que eu defini bem ali.
Então, isso será um observável como você me vê declarando aqui.
Então, esse observável é o que eu vou
usar dentro do meu serviço favorito e, em seguida, assinar para isso.
Assim, sempre que as informações do usuário mudarem, isso será refletido automaticamente aqui.
Então, você viu que mesmo no aplicativo anterior eu tinha usado um observável,
a fim de refletir as informações do usuário no meu componente de cabeçalho.
Tipo semelhante de abordagem,
que estou usando no meu componente favorito aqui,
para obter o ID de usuário para o usuário conectado no momento.
Então, quando eu consultar minha coleção Favoritos,
eu vou consultar e extrair apenas os documentos onde o usuário corresponde a isso.
Então eu só estou usando as mudanças de valor aqui.
Então, eu só estou extraindo todos os documentos,
que eu não me importo com o ID do próprio documento favorito neste momento.
Então, eu só estou extraindo todos eles e usando-os.
Se o usuário não estiver conectado e, como você pode ver,
estou lançando um erro aqui com o observável dizendo,
“nenhum usuário conectado” que é o que é exibido no meu discurso favorito lá.
Agora, o IsFavorites também é atualizado aqui,
mas no IsFavorites o que eu estou fazendo é que eu estou indo para o banco de dados.
Agora aqui, vou acessar o banco de dados dizendo,
“DB é igual a firebase.firestore”.
Lembre-se que estou importando Firebase aqui,
importando estrela como Firebase aqui.
O Angular Firestore em si não me fornece um método de
fazer várias consultas compostas aqui.
O Fogo Angular ou o Fogo Angular não me fornece isso.
Então, é por isso que eu tenho que recorrer ao Firebase Firestore.
Então, quando eu digo Firebase Firestore,
isso me dá uma referência ao banco de dados Firestore e, em seguida, eu posso ir para este banco de dados
e, em seguida, dizer “favoritos de coleção de banco de dados” e, em seguida, eu posso fazer várias consultas aqui.
Então, eu estou dizendo, .where user é this.wheredish é o ID do prato.
Então, se eu quiser obter um favorito específico.
Para verificar se um prato específico é o favorito de um usuário obtenho
aquele documento em particular onde o usuário e o prato combinam com esses dois,
se eles não coincidirem, então ele retornará com um vazio.
Então, que eu extrair e, em seguida, retornar este valor aqui.
Agora, então eu postar favoritos,
você vê como eu estou fazendo isso eu estou dizendo esta coleção AFS favoritos e eu vou dizer “adicionar”.
Veja o documento que estou armazenando nos meus favoritos.
O documento em si contém o ID do usuário e o ID do prato.
Então, estes dois pedaços de informação incluídos aqui e se
não, em seguida, ele vai rejeitar a promessa sem nenhum usuário conectado aqui.
Da mesma forma, para o favorito excluir que eu implementei aqui.
Passe algum tempo novamente passando por esse código para entender como
aproveitei os módulos Firebase e Angular fire para npm
para me comunicar com meu servidor Firebase que configurei no exercício anterior.
Com isso, eu lhe dei uma visão geral rápida de
como você pode configurar seu aplicativo Angular para interagir com o
Firebase back-end como um serviço e, em seguida, ser
capaz de suportar várias operações que você tem dentro de seu aplicativo Angular.
Como já demonstrado anteriormente,
este aplicativo Angular se parece exatamente com
a versão anterior do aplicativo Angular, onde estávamos
usando nossa própria versão do nosso servidor Express MongoDB.
Agora, com isso eu concluo este exercício em particular em que eu ilustrei
nesta lição sobre back-end como um serviço e também demonstrei o
Firebase como um exemplo de um back-end como um serviço.