Vamos pescar no mercado de baixo.
Começaremos com o Firebase,
a oferta premium do Google.
Vamos entender um pouco sobre o Firebase,
configurar um servidor Firebase,
e então vamos olhar
para o aplicativo angular, que eu vou retrofit com base
no aplicativo angular anterior que você viu na palestra anterior.
Vamos modificá-lo para fazer uso do Firebase como o backend.
Assim, como poderíamos ver no final desta lição,
este exercício e o seguinte exercício,
podemos facilmente pegar um aplicativo angular e reajustá-lo para fazer uso do
Firebase como o backend como um provedor de serviços.
Para começar a jornada,
vamos até firebase.google.com para entender um pouco sobre o Firebase.
Uma espécie de tópico de fazer uma apresentação completa sobre o Firebase,
eu vou rapidamente executá-lo através do que foi
explicado no próprio site Firebase porque eles fornecem
detalhes suficientes sobre como o próprio Firebase suporta vários recursos.
Então vamos percorrer este site para entender como o Firebase funciona.
Então, se você acessar o site, como você pode ver,
ele diz que o Firebase ajuda você a criar aplicativos móveis melhores e expandir seus negócios.
E então, como você vê aqui,
ele explica os detalhes sobre como ele permite que você crie seus aplicativos
rapidamente sem precisar gerenciar a infraestrutura de back-end para seu aplicativo,
e um único console que reúne vários produtos que funcionam juntos.
Então, esses são todos os produtos oferecidos pelo Google que funcionam juntos para atender às suas necessidades de back-end.
E também aqui, você pode aproveitar
muitos dos produtos complementares que estão disponíveis no Google.
Então, em particular, neste exercício,
estaremos aproveitando o Cloud Firestore,
a nova provisão do Google.
Analisaremos mais detalhes sobre isso mais tarde.
Analisamos como podemos usar o suporte de autenticação
fornecido pelo Firebase para autenticar usuários.
Analisaremos o armazenamento em nuvem para armazenar nossos arquivos de imagem e distribuí-los.
E então também veremos como podemos aproveitar tudo isso junto com
o módulo de nó relacionado ao Firebase-que podemos incorporar junto com o módulo de
nó angularfire2 em nosso aplicativo angular para que
possamos nos comunicar com nosso backend Firebase como um serviço.
Além disso, olhando mais detalhadamente,
vemos como o
traço Firebase em si fornece vários recursos, como permitir que você implemente
diferentes recursos de usuário para integração diferente de seu aplicativo e
como é fácil integrar seu backend com um iOS,
Android ou o aplicativo web .
Em particular, vamos olhar para a aplicação web e usando JavaScript e
também o uso de como vamos
incorporar isso em nossa aplicação angular um pouco mais tarde.
Além disso, o Firebase fornece um banco de dados em
tempo real, tanto o banco de dados original em tempo real,
como o novo Cloud Firestone,
permitem sincronizar automaticamente os dados entre vários dispositivos do usuário.
Portanto, quaisquer alterações feitas
no lado do servidor serão automaticamente refletidas para todos os clientes
e, claro, você pode ler mais detalhes sobre o Firebase neste site.
E é muito fácil começar porque a oferta básica é gratuita para os usuários.
Então vamos começar a usar o Firebase.
Vamos configurar nossa conta do Firebase e, em seguida, acessar e configurar nosso back-end como um servidor,
que então aproveitaremos de nosso aplicativo angular.
Então este é um passeio rápido pelo Firebase,
mas em vez de apenas olhar para eles,
vamos entrar e realmente sujar nossas mãos,
configurando uma base Firebase de
volta para o serviço e, em seguida, usá-lo em nosso aplicativo angular.
Então, para começar,
como você vai ver para a borda direita aqui,
ele diz ir para o console.
Obviamente, você deve ter uma conta do Google para poder usar o Firebase.
Escusado será dizer,
e você deve estar conectado à sua conta do Google.
Então, como você pode ver,
eu já estou na minha conta do Google.
Então isso vai me dar acesso ao meu console.
Se você não estiver conectado,
então é melhor fazer login na sua conta do Google.
Então, quando você for para o console,
isso o levará ao console de serviços do Firebase aqui,
onde você pode configurar projetos.
Então, quando você vai para o console,
como você pode ver, ele diz adicionar um projeto.
E, como você pode ver,
eu já tentei configurar
outro projeto Firebase antes de explicar para você.
Então vamos montar um projeto aqui.
Então, vamos clicar no projeto add,
e isso deve trazer uma pequena janela agradável,
onde você pode digitar informações.
Então vamos chamar este projeto como ConfusionServer,
como você esperaria e configurá-lo para onde quer que você esteja no momento.
Então eu vou configurá-lo para usar
Hong Kong e criar um projeto.
E uma vez que seu projeto é criado,
isso é o que você será apresentado pelo Firebase.
E, aqui, você veria que a primeira coisa que você gostaria de pegar
são informações sobre sua configuração do Firebase para
que você possa usá-lo dentro de seu aplicativo angular.
Então, para fazer isso,
clique neste botão aqui.
É o que diz, adicione o Firebase ao seu aplicativo web.
E isso irá fornecer-lhe um monte de informações que
você deve copiar e salvar porque eu vou estar
fazendo uso desta informação para configurar
minha aplicação angular um pouco mais tarde no próximo exercício.
Portanto, salve essas informações em um local conveniente para que você
possa fazer uso dessas informações ao configurar o site do seu cliente.
No próximo passo, vou criar um par de contas aqui.
Então deixe-me clicar na autenticação aqui.
E quando a autenticação for ativada,
configuraremos os métodos de login que usaremos para nosso servidor Firebase
e, no meu caso,
usarei a senha de e-mail como uma das opções.
Então, vamos ativar a senha de e-mail.
Também habilitarei o login no Google.
Então esses dois estão habilitados.
Se desejar, você pode habilitar outras maneiras de autenticar os usuários.
Em seguida, indo para os usuários, agora,
se você entrar neste aplicativo com sua conta do Google,
esse usuário será automaticamente adicionado ao seu sistema.
Mas agora, vou configurar um usuário com um e-mail e senha.
Então vou configurar um admin@confusion.net,
e vou configurar uma senha aqui e adicionar o usuário.
Portanto, este será um usuário,
que pode entrar com a combinação de e-mail-senha.
Também podemos nos cadastrar para acessar isso usando nossa Conta do Google.
Então, meu aplicativo angular,
eu vou configurar para usar tanto a maneira de senha de e-mail de entrar
e, bem como por login baseado em conta do Google.
Depois disso, vamos para o armazenamento.
Então vamos configurar o armazenamento em seguida.
Portanto, o armazenamento é onde você pode configurar uma maneira
de carregar arquivos para o seu servidor e, em seguida, torná-los disponíveis para uso.
Então este armazenamento, eu vou configurar meu armazenamento para armazenar
as imagens que vamos usar e salvar do nosso site de servidor.
Então, quando você configura o armazenamento,
ele aparecerá com o conjunto de regras de segurança,
que especificam que tipo de operações serão permitidas pelo usuário.
Então diz allow read,
write: if request.auth não é igual a null, o
que significa que somente os usuários que fizeram
login neste servidor poderão ler e gravar.
Agora, eu vou mudar isso para permitir leituras para qualquer pessoa,
mas as gravações serão permitidas apenas por usuários autenticados.
Então vamos dizer, entendi,
e então eu vou começar.
Então, nas regras,
vou entrar nas regras aqui e depois modificar as regras para
permitir que os usuários possam ler a partir do servidor.
Agora, podemos configurá-lo em nível de pasta específica,
mas como este é um aplicativo simples,
vou configurá-lo em todo o nível de armazenamento.
Então, aqui, eu vou dizer, permitir leitura,
e então eu vou modificar esta regra para dizer permitir leitura,
e eu vou dizer, permitir gravação se solicitação.
Então, como você pode ver,
os usuários terão permissão para ler do armazenamento.
Qualquer usuário terá permissão para ler, mesmo sem autenticação,
mas a escrita é restrita apenas aos usuários que fazem login no sistema.
Então esta é uma simples modificação das regras de acesso,
das regras de segurança.
Você pode ser mais elaborado sobre isso,
mas no exemplo simples,
eu vou ficar com isso.
E então publicaremos essas regras no nosso servidor.
Em seguida, voltando para os arquivos, nos arquivos,
eu vou criar uma nova pasta aqui chamada imagens.
Agora, como você pode ver,
as regras podem ser configuradas para esta pasta de imagens específica,
então ele permitirá que os usuários leiam somente a partir dessas pastas de imagens e, em seguida, somente
usuários autorizados a fazer upload para esta pasta de imagens, se assim o desejar.
Mas, agora, vou deixá-lo como tal,
como o conjunto genérico de regra que configurei lá.
Agora, indo para a pasta de imagens.
Vou enviar um monte de imagens para esta pasta aqui.
Então deixe-me pegar um monte de imagens que eu tenho para a minha aplicação.
E então, anteriormente, eu tinha usado essas imagens em meus outros aplicativos.
Vou selecionar todas essas imagens e depois enviá-las para o armazenamento do Google aqui.
Essas imagens estão disponíveis em
seu arquivo images.zip que eu forneci no exercício anterior,
na lição anterior.
Então, basta baixar o arquivo images.zip,
ou se você já baixou,
você deve ter essas imagens com você para que você possa enviá-las para o arquivo.
Quando você carregar essas imagens,
você pode clicar em qualquer uma dessas imagens e também notar que abaixo,
ele lhe dá esta localização de arquivo.
Você precisa copiar este URL para este local de arquivo porque quando configuramos nosso banco de dados,
no campo de imagens de nossos dados JSON,
vamos configurar cada um deles com este URL para a imagem correspondente.
Em seguida, vamos passar para esse banco de dados.
No banco de dados, você tem duas opções.
Você pode usar o banco de dados em tempo real mais antigo,
que é suportado pelo Google,
e na verdade a maioria dos aplicativos atuais que usam o Firebase usará o banco de dados em tempo real.
Mas então, neste curso,
vamos explorar o mais novo Firestore beta.
O Firestore beta fornece um banco de dados em tempo real muito mais abrangente.
Portanto, este é o banco de dados em tempo real da próxima geração e fornece
maneiras muito mais avançadas de fazer consultas e
escalar automaticamente seu armazenamento para nós.
Então vamos com o Firestore beta.
Agora, uma das razões novamente para eu começar com
o Firestore beta é simplesmente porque ele
nos permite armazenar as informações na forma de documentos e coleções.
Agora, a partir da nossa experiência com o MongoDB,
já sabemos como funcionam os documentos
e as coleções, e é por isso que o Firestore beta é uma escolha muito melhor para nós,
já que já sabemos como isso é configurado.
Se você quiser usar o padrão do banco de dados em tempo real padrão,
você pode optar por fazê-lo.
Mas o banco de dados em tempo real armazena todos os seus dados em
uma árvore grande e tem uma quantidade limitada de capacidade de consulta.
Então, para as regras de segurança para o meu Firestore,
eu vou usar o modo de teste,
onde eu vou deixá-lo aberto para que as pessoas leiam e escrevam no momento.
E isso é bom, porque estamos apenas testando o banco de dados, mas normalmente,
eu sugiro usar uma maneira mais configurada de trabalhar com seu banco de dados aqui.
Então vamos começar com um modo de teste para começar.
E então vamos definir as regras de segurança como esta para começar.
Você pode usar uma configuração de ferramenta de segurança mais elaborada.
Então, como você viu com o armazenamento,
nós tínhamos configurado de tal forma que as leituras são permitidas por
qualquer pessoa, mas as gravações são permitidas apenas por usuários autorizados.
Podemos configurar uma funcionalidade semelhante aqui também.
Então este é o servidor de confusões.
E então, nas regras,
deixe-me ir para esse depósito e então apenas copie a regra do armazenamento aqui,
e vamos configurar o mesmo tipo de restrição aqui.
Assim, permitiremos que qualquer pessoa leia, mas apenas
usuários autorizados a escrever no banco de dados.
Então, voltando para o banco de dados, nas regras,
podemos dizer permitir ler: e então a segunda linha eu vou substituir isso,
dizendo permitir escrever se request.auth não é igual a null.
Assim, apenas as pessoas que estão logadas
poderão fazer modificações nos dados para que,
pelo menos, tenhamos alguma proteção nos meus dados.
Agora, aqui, podemos adicionar graficamente os dados à nossa aplicação.
E isso, eu acho a maneira mais rápida de adicionar os dados.
Se você configurar o site do cliente,
você pode postar dados do site do cliente também, mas
, agora, iniciaremos adicionando três coleções aqui.
Então, a primeira coleção que vou somar é pratos.
E podemos adicionar documentos aos pratos, para
que possamos adicionar nosso primeiro documento.
Então, para adicionar um documento aos pratos,
lembre-se que eu lhe dei o arquivo db.json lá.
Então você pode ir com o arquivo db.json e, em seguida, adicionar,
passo a passo, cada um dos pratos que temos.
Então, aqui, eu vou configurar o primeiro prato aqui.
Assim, para o prato, podemos permitir que o Firebase atribua automaticamente o ID para o nosso documento.
Então vou deixar que atribua automaticamente.
Então vamos adicionar no primeiro prato aqui.
O nome do campo e o primeiro prato aqui.
Então nós temos que cuidadosamente adicionar,
pouco a pouco, cada um dos pratos aqui.
Então vamos dizer nome,
e então vamos dizer categoria, que é rede elétrica.
E então vamos adicionar na imagem,
que eu vou voltar e adicionar em um pouco mais tarde porque eu preciso copiar
o URL da imagem do meu armazenamento e usá-lo aqui.
Então vamos tê-lo rotulado como Hot, preço.
Então temos categoria,
nome, categoria, imagem, rótulo, preço,
descrição, que eu vou copiar e colar do meu arquivo db.json.
E, finalmente, a bandeira em destaque,
que eu vou definir como um booleano e definir isso como verdadeiro neste caso.
Então este será o nosso primeiro documento que vamos adicionar em nosso banco de dados aqui.
Então você notaria imediatamente que,
em nosso banco de dados, o primeiro documento é adicionado.
Então vamos ver pratos e o primeiro documento,
e você pode ver as informações sobre este documento configurado aqui.
Então temos categoria, descrição,
destaque, imagem, rótulo, nome e preço.
Nós também adicionaremos mais um campo aqui chamado CreateDAT,
e este será um carimbo de data/hora.
E o carimbo de data/hora seria hoje e então eu deixo lá o valor de tempo como tal.
Então, podemos adicionar carimbos de data/hora também a isso, e, também,
adicionaremos mais um carimbo de data/hora como UpdateDAT e com o carimbo de data/hora aqui.
Então temos mais dois carimbos de data/hora aqui.
Agora, para a imagem,
vamos para o depósito aqui.
E a partir do nosso armazenamento, nas imagens,
vamos selecionar o arquivo de imagem aqui
e, em seguida, ir para o local do arquivo e, em seguida, copiar este URL aqui.
Então, se nós apenas clicar sobre
isso, esse URL será copiado.
Então vamos voltar para
esse banco de dados e, em seguida,
editar o campo de imagem e, em seguida, adicionar esse URL lá.
Assim, você pode ir em frente e adicionar os pratos restantes,
as promoções e também os líderes.
Então, uma vez que você concluir todas as etapas, o
que levará algum tempo para você fazer passo a passo.
Deixei você terminar de adicionar toda essa informação à sua base.
Então, depois de completar inserindo todos os dados em seu banco de dados,
seus pratos devem ter quatro pratos aqui.
Novamente, certifique-se de inicializar
o campo de imagem com o URL desse armazenamento para essa imagem específica.
Então você terá um, dois, três e quatro pratos.
Então você terá quatro líderes correspondentemente.
Um, dois, três e quatro e uma promoção está aqui.
Novamente, certifique-se de inicializar as imagens para cada uma
delas adequadamente no armazenamento do Firebase.
Com isso, nosso servidor está completamente configurado.
Portanto, nosso servidor Firebase tem todos os dados necessários para que ele atenda aos nossos planos.
Agora vamos passar para o próximo exercício,
onde vamos configurar nosso cliente angular para poder acessar
esse backend Firebase como um serviço e, em seguida, recuperar
dados e, em seguida, enviar dados para seu servidor Firebase.
Com isso, completamos este exercício.
Neste exercício, vimos como é fácil
configurar nosso back-end do Firebase como um serviço para autenticação,
armazenar arquivos e distribuí-los e também armazenar informações no
banco de dados do Cloud Firestore na forma de coleções e documentos dentro de coleções.
Com isso, completamos este exercício.