= Hospede um site dinâmico no Google Firebase usando Node.js e Cloud Firestore DB =
Tushar Kapoor: (httpswww.tusharck.com/)
URL Git de demonstração: httpsgithub.com/tusharck/firebase-demo
= Por que Firebase Hosting? =
O Firebase é uma plataforma de aplicativos abrangente construída na infraestrutura do Google, portanto, fornece uma maneira segura, rápida, gratuita (opções pagas também disponíveis para recursos adicionais) e fácil de hospedar seu conteúdo no aplicações web ou móveis
== Principais recursos e benefícios do nível gratuito: ==
- Dá domínio personalizado gratuito&
SSL(SSL fornece uma camada de segurança padrão para httpsconnections
- Cloud Firestore: um banco de dados flexível e escalável para sincronização de dados em tempo real entre aplicativos cliente
- Outros recursos: Cloud Functions, Cloud Messaging (FCM), Crashlytics, Dynamic Links, Hosting, ML Kit, Storage, Performance Monitoring, Predictions and Test Lab (A funcionalidade e os recursos desses produtos podem ser aumentados com a compra de um plano pago, mas os serviços de nível gratuito são muito bons. Para ver os planos, verifique os preços do Firebase)
- Escalonamento automático de recursos
= Etapas para hospedar seu site dinâmico no Firebase =
== Requisitos ==
**1. Conta do Google**Se você não tem uma conta do Google, você precisa se inscrever para uma. Você pode fazer isso acessando httpsaccounts.google.com/SignUp. **2. Node.js e npm** Mac/WindowsVocê pode baixar o instalador em httpsnodejs.org/en/download/. Linux
Siga as etapas abaixo para instalar o Node.js:
1. Abra um terminal
2. Execute os seguintes comandos:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
configuração_13.x| sudo bash -sudo apt install nodejs ** Eu usei Nota: ** **
setup_13.xporque na época do tutorial a versão mais recente era
**13**você pode verificar a versão mais recente acessando httpsnodejs.org/en/
Para verificar se Node.js e npm foram instalados com sucesso, execute os seguintes comandos, que mostrarão a versão instalada:
nó -v
npm -v
**3. Firebase-CLI (Command-Line InterfaceEstas são as ferramentas para gerenciar, visualizar e implantar os projetos do Firebase
npm install -g firebase-tools
= Etapa 1: Criar projeto do Firebase =
- Acesse httpsfirebase.google.com e
Entrar no canto superior direito
- Clique em
Vá para o console, no canto superior direito
- Em seguida, clique em
Criar projeto, conforme mostrado abaixo
4. O próximo passo é inserir o nome do seu projeto e clicar em continuar
5. Pressione continuar para habilitar o Google Analytics para seu projeto Firebase (se você não quiser, marque para desabilitar)
6. Selecione o local mais próximo para o Google Analytics
7. Clique em
**Crie o projeto e espere carregar. Então você verá algo como abaixo
= Etapa 2: inicializar o login do Firebase =
- Abra uma linha de comando/terminal, crie e vá para um novo diretório
mkdir meu-firebase-projectcd meu-firebase-project
2. Para hospedar um site no Firebase, faça login no firebase usando o seguinte comando. Depois de executar o comando, uma janela do navegador será aberta solicitando que você faça login no firebase usando suas credenciais do Google. Digite as credenciais lá e o Firebase fará login no seu sistema
logon do firebase
= Etapa 3: inicializar o projeto Firebase em seu sistema =
- Agora temos que inicializar o projeto que criamos no Firebase console no sistema. Para fazer execute o comando abaixo
firebase init
2. Pressione a tecla para baixo e selecione
**duas coisas **pressionando a tecla **barra de espaço
- Funções
- Hospedagem
Então
**pressione Enter** para continuar
3. Em seguida, selecione
então aperte enter
**Use um projeto existente**
4. Pressione Enter no
**my-firebase-project** **ou o nome do projeto que você usouou o nome do projeto que você usou
5. Selecione
**Javascript** e pressione enter
6. Você pode dizer
**Não** para Você quer usar o ESLint para detectar prováveis bugs e impor estilo?
7. Digite
**Sim** para instalar as dependências com npm
8. Aqui temos que fazer duas tarefas:
- Você deve selecionar o diretório no qual seu site e ativos residirão. Por padrão é
pubicvocê pode pressionar enter para continuar ou pode mudar para o nome do diretório desejado
- Tipos
Simpara a página de aplicativo único para que seus URLs dinâmicos possam ser redirecionados para o destino adequado
9. Teste o aplicativo firebase em seu sistema local executando o seguinte comando. Então vá para
**httplocalhost:5000** para ver seu site básico em execução
firebase serve --apenas hospedagem,funções
Você deve ver algo como isto abaixo depois de abrir o
**httplocalhost:5000** URL
10. Feche o servidor do terminal
= Etapa 4: Instalando pacotes e criando diretório de exibições para site dinâmico =
- Aqui vamos alternar dentro do diretório de funções para fazer isso use
funções de cd
**2. Install Express**É uma estrutura de aplicativo da web Node.js mínima e flexível
npm eu expresso --save
**3. Instalar Handle Bars**É um mecanismo de modelagem para Node.js usado para o front-end dinâmico do site
npm i guidão --save
**4. Instalar consolidar**
npm eu consolide --save
5. Crie uma pasta chamada
**views** dentro da pasta **functions** na qual armazenaremos todo o código do frontend
mkdir
Visualizações
6. Volte para o diretório principal executando o seguinte comando:
cd .
= Etapa 5: configurar o Firestore (Cloud Database) =
== Configuração do banco de dados ==
- Acesse httpsconsole.firebase.google.com/
- Selecione seu projeto
- Selecione
Banco de dados do painel à esquerda
4. Clique em
**Criar banco de dados**
5. Selecione Iniciar no modo de teste porque, caso contrário, você não conseguirá acessar o banco de dados do seu sistema. Mudaremos essa configuração assim que terminarmos o desenvolvimento do site
Então clique
**Próximo** depois de fazer isso
6. Selecione a localização do seu Firestore DB
**Depois de definir este local, você não poderá alterá-lo posteriormente. Observação: **
== CriarDados ==
- Clique em iniciar coleção
2. Digite o
**ID da coleção que você pode experimentar por enquanto
3. Insira os dados de amostra. Digitar
**sample_doc **como o **ID do documento. **Digite **Título** dentro do ** Campo. Eu gosto de Nuvem** dentro do **Valor Em seguida, clique em **Salvar**
= Etapa 6: Construindo o conteúdo dinâmico do site =
Iremos dividir a parte em duas partes, na primeira veremos como buscar os dados do Firestore e utilizar no site. Na segunda parte, veremos como enviar os dados do formulário
**Primeiro, faremos o download das credenciais para acessar o Firestore**
2. Clique em
**configurações** no painel esquerdo e vá para **Configurações do projeto**
3. Vá para
**Contas de serviço** e clique em **Gerar nova chave privada
4. Clique em
**Gerar Chave Abrirá um pop-up para baixar a chave. Armazene a chave dentro da pasta **funções** do seu site
== Obtendo do Firestore ==
- Abrir
index.jdentro da pasta de funções
2. Precisamos definir algumas das bibliotecas que queremos usar em nosso aplicativo. Estas são as mesmas bibliotecas que instalamos anteriormente
funções const = require('firebase-functionsconst express = require('expressconst engines = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3. Aqui definimos algumas coisas:
- Inicialize o aplicativo usando expresso
- Vamos definir nosso motor como guidão
- Em seguida, diremos ao expresso que nosso código de front-end estará dentro da pasta views
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. Autorize seu aplicativo a acessar seu Firestore DB
*Observação:*
1. Mudança
**YOUR_SDK_NAMEjson com o arquivo que você baixou para **credenciais para acessar o Firestore2. Altere a URL do banco de dados para a URL do seu banco de dados. Para ver o URL, você pode **Configurações >Conta de serviço**
var serviceAccount = requer
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Função para buscar dados do Firestore
- O ID da coleção é
amostra
- ID do documento é
sample_doc
Definimos o acima ao inserir os dados de amostra
função assíncrona getFirestoreconst firestore_con = aguarde admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Esse documento não existe }
else {return doc.data
.catch(err =>{ console.log('Erro ao obter documento', errreturn writeResult
}
**Usamos o Note: ** **async** porque temos que esperar que a operação de promessa seja concluída entre o banco de dados e nosso site
6. Crie a rota e envie o resultado para o front end
app.getasync (solicitação, resposta) var db_result = await getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Criar
**index.hbs** dentro da pasta **views**. hbs é um arquivo handelbars Nota: **
8. Escreva este código HTML básico dentro
**index.hbs** para ver o resultado obtido
Tushar Chand Kapoor
