No artigo, Introdução ao Firebase, foi fornecida uma visão geral do Firebase. Você aprendeu como configurar uma conta do Firebase e criar um projeto do Firebase sem nenhum custo! Neste artigo, você desenvolve o que aprendeu configurando um banco de dados NoSQL baseado em nuvem e, em seguida, criando uma página da Web muito simples para adicionar itens a ele. O banco de dados simplesmente armazenará trocadilhos junto com uma categoria e um identificador. A Figura 1 mostra a página da web que será usada para adicionar os itens.
Figura 1: Uma página da Web gravando em um banco de dados Firestore NoSQL.
Como configurar seu banco de dados do Cloud Firestore no Firebase
Para começar, volte ao Firebase e crie um novo projeto. Você pode acessar o Firebase acessando https://console.firebase.google.com/. Esta página lhe dará a opção de adicionar um novo projeto, conforme mostrado na Figura 2. Você pode encontrar mais informações sobre como criar o projeto no artigo anterior.
Figura 2: Adicionando um novo projeto do Firebase.
Chamei meu projeto de “The Pun Project”. Depois de criar um novo projeto, você será levado ao Firebase Console, conforme mostrado na Figura 3.
Figura 3: O console do Firebase
No Console, você poderá criar o banco de dados que a página da web usará. O primeiro passo para fazer isso é clicar na opção Banco de Dados no menu de navegação à esquerda. Isso abrirá uma tela conforme mostrado na Figura 4 que permitirá que você crie um Cloud Firestore, que será seu banco de dados NoSQL.
Figura 4: A tela inicial para criar um Cloud Firestore
Clicar no botão Criar banco de dados iniciará o processo de percorrer as etapas para criar o banco de dados. A primeira decisão que precisa ser tomada, conforme mostrado na Figura 5, é se o banco de dados será iniciado em modo de produção ou de teste. Para manter este artigo simples e focado na adição de dados, o modo de teste será selecionado. Quando uma base de banco de dados pronta para produção for criada, você desejará adicionar mais segurança a ela do que a fornecida no modo de teste.
Figura 5: Selecionando o modo para seu banco de dados do Firestore
Com o modo selecionado, o próximo passo é indicar o local onde você deseja criar o banco de dados. Você está criando seu banco de dados na Nuvem, então você pode escolher os locais de quais servidores deseja usar. Ao clicar no menu suspenso de localização do Cloud Firestore mostrado na Figura 6, você poderá escolher um local multirregional ou regional. Sugiro que, se você estiver na América do Norte, selecione o local nam5 (us-central). Se você estiver em outro lugar, escolha a região mais próxima da sua localização.
Figura 6: Selecionando uma região para seu banco de dados do Firestore
Com sua região selecionada, clique no botão Concluído e o Firebase provisionará seu banco de dados do Cloud Firestore. Depois que o provisionamento estiver concluído, você estará pronto para a página do console do banco de dados, conforme mostrado na Figura 7, onde você pode começar a usar seu banco de dados online.
Figura 7: O console do banco de dados no Firebase
Coleções e documentos em NoSQL
Se você acompanhou, neste ponto você criou um banco de dados NoSQL baseado em nuvem no Cloud Firestore do Firebase. Está além do escopo deste artigo entrar nos detalhes do NoSQL, mas fornecerei o destaque do que você precisa saber para fazer a adição de dados de exemplo que foi prometida neste artigo.
Um banco de dados NoSQL é composto de coleções que contêm documentos . Um documento contém basicamente os campos que você planeja armazenar. Por exemplo, neste artigo, uma coleção de trocadilhos está sendo criada. A coleção Puns conterá documentos. Cada documento será um trocadilho diferente.
No Firebase, você pode clicar no link “+ Start collection” mostrado na Figura 7 para abrir uma caixa de diálogo que permitirá criar a coleção Puns. Você será solicitado, conforme mostrado na Figura 8, a adicionar um ID de coleção. Nesse caso, chamaremos a coleção de “trocadilhos”.
Figura 8: Como criar uma coleção do Cloud Firestore
Depois que a coleção for criada, você poderá criar documentos dentro da coleção, conforme mostrado na Figura 9. Novamente, um documento é basicamente um registro em seu banco de dados NoSQL. Como isso é NoSQL, não há regras rígidas forçando você a garantir que todos os campos estejam em todos os documentos (registros) ou que todos os documentos de uma coleção correspondam. Isso é deixado para você fazer.
Figura 9: Adicionando um documento a uma coleção
Cada documento que você criar precisará ter um ID de documento. Você pode inserir esse ID ou optar por deixá-lo em branco e um ID será gerado automaticamente. Para manter as coisas mais legíveis no exemplo usando trocadilhos, darei ao primeiro documento um ID de Pun0001.
Ao usar o console para adicionar documentos, para cada documento, você deve especificar não apenas os valores dos dados, mas também o nome dos campos e os tipos. Uma lista suspensa permite que você selecione o tipo de dados que deseja adicionar.
Na figura 10, foram adicionados dois campos de string que serão usados para o exemplo Pun. Estas são uma Categoria e o texto do trocadilho (PunText ).
Figura 10: Configurando um documento de trocadilho.
Quando o botão Salvar é clicado na caixa de diálogo mostrada na Figura 10, o documento (que é basicamente um registro) será criado conforme mostrado na Figura 11. Neste ponto, um banco de dados Cloud Firestore foi criado na nuvem e um registro ( documento) foi adicionado! Mais precisamente, foi criada uma coleção chamada “Puns” que possui um documento chamado “Pun0001” que contém campos chamados Category e PunText.
Figura 11: O banco de dados do Cloud Firestore com um documento adicionado!
Observe que, neste ponto, se você quiser adicionar registros adicionais usando o console, clique no link “+ Adicionar documento” mostrado no meio da Figura 11. Você pode adicionar trocadilhos adicionais com IDs, categorias e texto de trocadilho. Você deve ter cuidado para garantir que, cada vez que adicionar um novo trocadilho, use os mesmos nomes de campo.
Embora você possa pensar que é tedioso ter que digitar novamente os nomes dos campos, isso se deve à flexibilidade do NoSQL. Uma maneira de contornar isso é criar um aplicativo da Web que fará essa parte do trabalho para você!
Nota:Você notará na Figura 11 que há alguns lugares onde você pode iniciar novas coleções. Está além do escopo deste artigo explorar a estrutura das coleções e documentos NoSQL.
Criando um aplicativo da Web para acessar o Cloud Firestore
Com o Cloud Firestore configurado, agora você pode adicionar dados de fora do site do Firebase. Para fazer isso, você precisará primeiro obter algumas informações do Firebase que permitirão associar seu aplicativo da Web ao projeto do Firebase que você criou.
Comece clicando no link Visão geral do projeto na parte superior esquerda do menu de navegação. Isso levará você a uma página de visão geral do seu projeto, conforme mostrado na Figura 12.
Figura 12: A página de visão geral do projeto Firebase
Nesta página, você verá que existem ícones para quatro tipos de projetos que podem ser selecionados. Estes são para iOS, Android, Web e Unity. Clique no ícone para indicar que um aplicativo da web está sendo feito. Isso exibirá a caixa de diálogo mostrada na Figura 13 que solicitará um nome para o aplicativo. O nome que está sendo criado é usado para coordenar o aplicativo da Web que você cria com o projeto do Firebase e os recursos do projeto do Firebase. Para esta demonstração, estou usando o nome “My Punny Web App” e clicando no botão Register app.
Uma vez clicado, você verá uma tela que inclui o código HTML que você adicionará ao seu aplicativo da Web. Esse código HTML é o que vincula o Firebase ao seu aplicativo.
Figura 13: O código do Firebase para o aplicativo da Web.
Você desejará copiar este código para colar na página HTML que criaremos posteriormente nas próximas etapas deste artigo. Se você sair da página mostrada na Figura 13, sempre poderá voltar a este código do aplicativo no Firebase console. Basta clicar na engrenagem ao lado do link Visão geral do projeto no canto superior direito e selecionar Configurações do projeto. A página resultante incluirá informações sobre seu projeto
Criando a página da Web/aplicativo para acessar o Firestore
Com tudo configurado no lado do Firebase, é hora de criar a página da Web que permitirá a adição de dados. A Listagem 1 contém HTML básico para exibir a página mostrada na Figura 1 anterior.
Listagem 1: HTML básico para a página Punny.
<html>
<head>
<title>Punny or Not</title>
</head>
<body>
<div class="main-form">
<h1 id="punTimes">Punny or Not!</h1>
Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br />
Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br />
Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br />
<br /><br />
<button id="saveButton" onclick="storeData()" >Submit</button>
</div>
<script src="./pun.js"></script>
</body>
</html>
A Listagem 1 é HTML básico. Três campos estão sendo configurados para permitir que o usuário insira dados. Cada um recebe um ID que será necessário para associar os dados inseridos a um documento que será adicionado ao Firestore. um botão também está incluído com um evento para armazenar os dados. Atualmente, essa função não foi escrita; esse é o objetivo deste artigo! Também incluí um link para um arquivo JavaScript externo chamado pun.js. Inicialmente, esse arquivo está vazio, mas isso será alterado em breve!
É na Listagem 1 que você deseja colar o código que foi copiado do Firebase anteriormente. O código que foi mostrado na Figura 13 deve ser colado próximo ao final de sua tag body, neste caso, logo antes da inclusão do script puns.js. Colei o código do meu aplicativo de trocadilhos na Listagem 2.
Lista 2: A página html com o código do Firestore adicionado.
<html>
<head>
<title>Punny or Not</title>
</head>
<body>
<div class="main-form">
<h1 id="punTimes">Punny or Not!</h1>
Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br />
Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br />
Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br />
<br /><br />
<button id="saveButton" onclick="storeData()" >Submit</button>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAJUQUXm_oYXAo2M1yukGT8lnTKeuMd53o",
authDomain: "the-pun-project.firebaseapp.com",
databaseURL: "https://the-pun-project.firebaseio.com",
projectId: "the-pun-project",
storageBucket: "the-pun-project.appspot.com",
messagingSenderId: "354041199852",
appId: "1:354041199852:web:4f9a613485174688f0f9c9",
measurementId: "G-4672MVCRK2"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="./pun.js"></script>
</body>
</html>
Com a adição do script ao seu HTML, você conectou seu aplicativo para acessar o Firebase. No entanto, você precisa adicionar mais uma linha de código. Embora o código gerado forneça as conexões com o Firebase, você precisa adicionar um link adicional para obter o código que acessará o banco de dados do Cloud Firestore no Firebase. Você desejará adicionar a seguinte linha de origem do script às listagens:
Isso pode ser adicionado logo após a chamada para:
A próxima etapa é adicionar a lógica que associará os campos inseridos do usuário aos campos que serão adicionados ao banco de dados do Firestore. Isso será feito no arquivo puns.js para manter o código limpo.
O processo é primeiro criar uma variável de banco de dados que será vinculada ao banco de dados do Firebase Cloud Firestore. Em seguida, será necessário criar variáveis que possam ser preenchidas com os valores que o usuário digitou em nossa página. Isso será feito com chamadas padrão document.getElementById(). Por fim, a variável exibida na página da Web precisa ser adicionada ao banco de dados do Cloud Firestore como campos em um documento na coleção de trocadilhos. A Listagem 3 mostra o JavaScript que pode fazer tudo isso.
Listagem 3: O arquivo JavaScript pun.js
var db = firebase.firestore();
function storeData() {
var inputPun = document.getElementById("PunID").value;
var inputCategory = document.getElementById("Category").value;
var inputText = document.getElementById("PunText").value;
db.collection("Puns").doc(inputPun).set({
Category: inputCategory,
PunText: inputText
})
.then(function() {
console.log("Doc successful");
})
.catch(function(error) {
console.error("Error writing doc", error);
});
}
Observe que na Listagem 3, o banco de dados foi criado com a variável chamada db. Essa variável é então usada para criar o novo documento (registro) especificando o nome da coleção que foi chamada de Puns no processo mostrado na Figura 8. Isso é seguido pelo nome do documento, que neste caso é nosso ID de trocadilho obtido de o usuário e coloque na variável, inputPun. Dentro do documento, dois campos estão sendo adicionados, o que é feito dentro do conjunto. Para adicionar os campos, o nome do campo é listado, depois dois pontos e finalmente o valor da string a ser adicionado. Nesse caso, inputCategory está sendo adicionado ao campo Category e inputText está sendo adicionado ao campo PunText.
A listagem também inclui alguns testes e lógica de erro para registrar uma mensagem no console. Se você abrir o console do desenvolvedor do seu navegador, verá uma mensagem "Doc com sucesso" exibida quando um documento for adicionado ao Cloud Firestore, conforme mostrado na Figura 14.
Figura 14: Um documento adicionado com sucesso.
Pode-se confirmar que o documento foi adicionado voltando ao projeto no console do Firebase e examinando o banco de dados (feito clicando em Banco de dados no menu de navegação à esquerda). A Figura 15 mostra que a adição do novo trocadilho foi bem-sucedida.
Figura 15: A coleção Puns com o novo documento pun002
Encerrando
Muito foi abordado neste artigo sobre como adicionar documentos a um banco de dados Firebase Cloud Firestore NoSQL. Você aprendeu como fazer isso no Console e em um aplicativo Web simples. Este é apenas um começo para mostrar como adicionar pode ser fácil. Dito isso, adicionar em apenas uma etapa em um sistema CRUD. Ainda há mais para aprender! Ah, e se você gosta de trocadilhos, dê uma olhada no meu livro, Punny or Not Book of Puns, disponível na Amazon!
# # #
