[MÚSICA]
No exercício anterior, já tínhamos configurado nosso
back-end Firebase como um serviço com o novo projeto.
E também configurar muitos dados em nosso banco de dados e, em seguida, configurar nosso armazenamento e
configurar nosso servidor Firebase para atuar como o backend do nosso aplicativo React.
Neste exercício, vamos olhar para uma versão modificada do nosso aplicativo React,
que faz uso do back-end Firebase como um serviço para
obter os dados e também armazenar informações para os usuários no servidor.
Além disso, aproveitaremos o suporte de autenticação que o Firebase
fornece 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, Eu forneci a
você a versão Firebase do nosso aplicativo React.
Então digite git clone https://github.com/jmuppala/conFusion-Rea -
CT-firebase.git.
E, em seguida, clonar o repositório Git.
E uma vez que o repositório Git é clonado para
o seu computador, em seguida, mova para a pasta Confusion-react-Firebase que será criada neste ponto.
E então você notaria que um monte de arquivos já estão instalados lá.
Vamos em frente e fazer uma instalação de fio para instalar todos os
módulos de nó em que esta aplicação Angular é dependente.
Esta versão também instalará módulos de nó adicionais chamados Firebase.
Vou explicar um pouco mais sobre esses módulos de nó mais tarde neste exercício.
Quando a instalação do projeto estiver concluída, abra o projeto em um editor.
E, em seguida, no projeto, vá para a pasta código-fonte > Firebase e
, em seguida, abra o arquivo config.js.
E no arquivo config.js, você verá um conjunto de configuração do Firebase
que você precisa configurar com sua própria configuração do Firebase server.
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, copie essas informações e
, em seguida, cole essas informações em seu arquivo config.js.
Para substituí-los por sua configuração específica de servidores Firebase para
todas essas informações.
E uma vez que isso é concluído, em seguida, você pode iniciar o seu
aplicativo React digitando yarn start no prompt.
Uma vez que seu aplicativo React é compilado, e assim
aqui você veria a página inicial, a página sobre, como vemos aqui.
E o cardápio.
E a página de contato.
Vamos fazer login nós mesmos,
deixe-me voltar para a página inicial e então nós vamos fazer login nós mesmos.
Então, quando você clicar no botão 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 inicial aqui chamado Login with Google.
Então deixe-me fazer login com minha conta do Google.
Então, quando você clica no Login with Google, ele abrirá outra
janela do navegador onde você será solicitado a autorizar o uso da sua conta do Google.
Então você verá, no canto direito, você verá imediatamente seu nome
sendo exibido aqui, e com o botão de login agora transformado em um botão de logout.
Então, neste ponto, você deve ser capaz de ver seus favoritos.
E neste caso, já que não temos favoritos,
então estará vazio neste momento.
Deixe-me voltar ao menu e, em seguida, adicionar alguns itens aos 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 aos meus favoritos.
Ad então agora quando você vai para os meus favoritos, você verá um par
de pratos adicionados em seus favoritos, como você esperaria.
E novamente, você pode excluir os pratos clicando na
cruz de exclusão para remover o item de sua lista de favoritos, como mostrado aqui.
Agora também podemos adicionar, como você percebe, podemos ir a qualquer prato e,
em seguida, adicionar comentários sobre esse prato.
Permitam-me, portanto, acrescentar aqui um comentário.
E no momento em que você enviar o comentário, você verá imediatamente que
seu comentário será exibido aqui com o nome do autor também incluído aqui.
E com essa 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.
Então, é assim que seu aplicativo funciona com esse
Firebase como o back-end como um serviço.
Agora, é claro, você deve estar se perguntando, como redesenhamos nosso aplicativo para
fazer uso do Firebase em vez de usar o
servidor Express MongoDB padrão que construímos anteriormente?
Para configurar seu aplicativo para se comunicar com o servidor Firebase,
você precisa instalar o módulo Firebase.
O módulo Firebase, como você vê aqui, fornece a ferramenta e a
infraestrutura que permitem que você se comunique com o servidor Firebase.
E para instalar isso em seu aplicativo,
você digita a instalação menos salvar firebase.
Agora, como fazer uso destes?
Ilustrarei isso executando rapidamente você através do código modificado
onde usamos o Firebase para modificar o aplicativo que desenvolvemos
anteriormente para fazer uso do Firebase server como o back-end como um serviço.
Vamos fazer um tour rápido através do nosso aplicativo React modificado para entender
como ele foi reconfigurado para se comunicar com nosso servidor Firebase.
Começaremos nossa jornada no arquivo package.json.
E no arquivo package.json,
você vai notar que eu adicionei no módulo npm Firebase para isso.
Então, quando você clona o repositório Git e faz a instalação do yarn,
o módulo Firebase é instalado automaticamente em seu aplicativo.
Se você estava configurando um novo aplicativo React para
se comunicar com o servidor,
então você precisa instalar explicitamente o módulo Firebase em seu aplicativo.
Agora, depois disso, você notará mudanças na pasta Firebase.
Aqui já vimos o arquivo de configuração.
O outro arquivo que você notará aqui é chamado firebase.js.
Agora é aqui que configuramos nosso aplicativo para se comunicar com
o Firebase Server.
Então, estamos importando a configuração aqui.
E depois importando a base de fogo da base.
E então você inicia o aplicativo aqui fornecendo a configuração para o firebase,
então é aqui que você fornece todas as informações de configuração para
que seu cliente possa se comunicar com o Firebase Server.
Além disso, estou exportando algumas dessas exportações
daqui chamadas auth, fireauth e assim por diante.
Estes farei uso nos criadores de ação
para me comunicar com meu Firebase Server.
Agora, depois disso, as principais modificações estarão no arquivo ActionCreators.
Agora eu não adicionei nenhuma nova ação, mas em vez disso toda a comunicação
com o servidor agora é modificada para se comunicar com o nosso Firebase Server.
Então, em vez de usar a busca, como fizemos anteriormente,
agora vamos usar firestore.
Como você pode ver, eu importei o auth, firestore,
fireauth e firebasestore do módulo firebase que
configurei anteriormente na pasta firebase.
E então tudo isso me permitirá me comunicar com meu Firebase Server.
Para buscar uma coleção do meu Firebase,
simplesmente dizemos firestore.collection e, em seguida, fornecemos o nome da coleção.
E então você pode adicionar à coleção dizendo, adicione, como você pode ver aqui,
que leva o item específico que você está adicionando à sua coleção lá.
Então esse é o documento que estamos adicionando em nossa coleção.
Então isso é para o comentário post, como você pode ver aqui.
E quando você postar isso, então você será fornecido de volta com um DocRef,
que é a referência para o documento,
que então você pode usar para ir e buscar o documento do seu servidor.
Agora, a maneira como o Firebase funciona é que ele fornecerá
o ID separadamente do conteúdo real dos documentos.
Portanto, o Firebase mantém o ID e os próprios dados do documento separadamente.
Então aqui eu tenho que combinar explicitamente os dois juntos em
um objeto JavaScript aqui, chamado comentário aqui.
Então, como você vê no documento, então você percebe que quando eu
inserir um item em uma coleção, ele retorna um DocRef aqui.
E a partir do DocRef, posso obter a identificação do documento.
E então o que eu estou fazendo aqui é eu estou indo e
buscar o documento correspondente aqui.
E então uma vez que o documento é buscado, agora, é claro, o documento deve existir,
então isso deve ser sempre verdade, porque acabamos de inserir o documento.
Mas só por uma questão de completude, estou fazendo uma verificação explícita para isso.
E então, depois disso, os dados que estão no documento são
obtidos dizendo doc.data, como você vê aqui.
E, em seguida, o ID do documento é obtido por doc.id.
Portanto, estes dois são separados.
Mas dentro do nosso código React, nós sempre armazenamos o id e
os dados juntos como um único documento JSON aqui, ou objeto JavaScript aqui.
Então é por isso que eu estou combinando os dois juntos
em um único objeto JavaScript aqui fazendo isso.
Você vai me ver repetidamente fazendo isso para, digamos, por exemplo,
para promoções audaciosas e assim por diante, também nos ActionCreators.
E depois disso eu estou adicionando o comentário na minha loja Redux aqui,
e o resto do código permanece como tal.
Da mesma forma, para buscar pratos,
você verá como estamos pegando vários pratos da Firebase.
Então estamos vendo pratos de coleta de fogo obter e obter os pratos.
Agora, quando você obter isso, então ele vai me dar um valor instantâneo,
que é o instantâneo do estado atual desta coleção, e
a partir disso, eu tenho que entrar e recuperar cada e cada prato.
E então eu estou reconstruindo minha variedade de pratos aqui.
Agora note que, como eu disse, o id e os dados são separados, então
eu preciso combiná-los juntos, porque é assim que eu uso os dados no meu
aplicativo React, então eu estou empurrando isso para a matriz de pratos.
E, finalmente, devolvendo os pratos que serão inseridos na minha
loja Redux aqui.
Portanto, este tipo de mudanças foram feitas nos ActionCreators.
Agora, o processo de login e logout será tratado abaixo.
Assim, para o login, a auth que importamos do firebase,
o auth é aquele que me permite fazer o login e logout.
Então, se você estiver fazendo login usando e-mail e senha,
ele fornece com este método chamado SignInWithEmailAndPassword.
E então você fornece o e-mail e senha como os dois parâmetros aqui.
E então isso permitirá que você faça login.
E quando você faz login, a autenticação fornece esse objeto chamado CurrentUser na autenticação.
Então você obtém as informações do usuário dizendo Auth.CurrentUser aqui.
E também estou armazenando as informações do usuário no meu banco de dados.
Agora eu não estou rastreando explicitamente nenhum token e
coisas assim porque isso é automaticamente rastreado por auth para mim,
que é fornecido pelo módulo npm Firebase.
Então eu estou apenas aproveitando isso para rastrear o uso atual.
Se o usuário atual for nulo, então eu sei que meu cliente
não tem nenhum usuário conectado ao servidor.
E da mesma forma, para sair do usuário eu simplesmente digo Auth.Signout.
Agora, novamente, a documentação de como fazer uso do
módulo Filebase npm está disponível na documentação do Firebase.
Assim, você pode facilmente procurar isso para entender como aproveitar o
Firebase para fazer uso de todas essas diferentes funções
que estão disponíveis no módulo Firebase npm.
Além disso, para os favoritos, nós postamos um favorito e
então você precisa postar itens, então você diria adicionar, e
quando você precisa obter um item, você vai dizer obter.
E você pode até mesmo obter um item de um documento específico nas coleções.
Se você quiser um documento específico na coleção, você dirá .doc.
E então você fornece o ID do documento aqui.
Então é assim que você pode obter um documento específico.
Também exclua favoritos e busque favoritos e assim por diante.
Agora, para que os favoritos sejam armazenados no meu Firebase,
os favoritos são armazenados como o ID do usuário e o ID do prato aqui.
Agora firestore em si não tem nenhuma maneira de preencher as
informações do prato no ID do prato.
Então eu estou apenas buscando todas as informações do prato,
então este é cada favorito é um par, usuário e par de identificação prato.
Então eu só estou trazendo isso para os meus favoritos aqui.
Mas isso também significa que eu preciso modificar meu componente favorito para que
ele possa usar o ID do prato e, em seguida, indexar para os pratos que
são armazenados na minha loja Redux, e obter a informação do prato.
Ou a alternativa seria ir para o servidor e, em seguida, buscar as informações.
Mas desde que eu já tenho os dados sobre os pratos na minha loja Redux,
porque eu já fiz os pratos buscar todas as informações
sobre os pratos.
Eu estou apenas indo diretamente para o objeto pratos no meu Redux rasgou e
buscar esta informação.
Portanto, isso também significa que há modificações no componente principal.
No componente principal, você notaria que quando eu faço o favorito aqui para
o detalhe do prato, eu simplesmente teria que comparar o prato com aquele DishID.
Então, o prato aqui no meu favorito é o próprio DishID, então
eu só preciso fazer a comparação.
Portanto, haverá uma pequena mudança para esta linha no DISHID.
E também você notará que quando eu chamo os favoritos,
além de fornecer seus favoritos,
eu também forneço os pratos como um dos adereços para meus favoritos.
Então essa é outra mudança que você notará no componente principal.
E da mesma forma, no componente favorito,
você notará que dentro do componente favorito abaixo aqui,
você notará que, quando eu estiver renderizando o componente favorito.
Então, aqui mesmo nesta função aqui, const favoritos,
o que eu estou fazendo é que eu estou indo para os pratos favoritos,
pratos é uma matriz de todos os DISHIDs aqui, então eu mapear através disso.
Então olhe para cada DishID, em seguida, a partir dos pratos,
eu filtrei esse prato particular.
E então obteve o DisHID, então
aqui você vai me ver usando o filtro de matriz JavaScript aqui.
Ele irá filtrar essa informação específica do prato e
, em seguida, renderizar esse prato particular.
Então este é um trabalho adicional que eu preciso fazer no meu
componente favorito, a fim de renderizar cada um dos pratos lá.
Então, esse tipo de modificações menores que você notará em alguns dos componentes,
especificamente o detalhe do prato, o favorito e o componente principal.
É aí que algumas pequenas alterações foram feitas para facilitar o
aplicativo React para poder aproveitar o Firebase Server.
Então, esta é uma revisão rápida de como
meu aplicativo React foi modificado para se comunicar com meu Firebase Server.
Agora, como com Angular, tivemos o Angularfire também, o que
nos proporcionava uma maneira de alavancar junto com o Firebase para nos comunicarmos com o servidor.
React não tem nenhum equivalente, então eu estou usando diretamente o
módulo Firebase npm que fornece a base básica de acesso ao Firebase Server.
E, em seguida, aproveitando as funções que ele fornece para se comunicar com meu
Firebase Server.
Passe algum tempo novamente passando por esse código para entender como
aproveitei os módulos npm do Firebase para me comunicar
com meu Firebase Server que configurei no exercício anterior.
Com isso, eu lhe dei uma visão geral rápida de como você pode configurar seu
aplicativo React 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.
Agora, com isso, concluo este exercício em particular em que
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.
[ MUSIC]