Nell'articolo Introduzione a Firebase è stata fornita una panoramica di Firebase. Ti è stato mostrato come configurare un account Firebase e creare un progetto Firebase, il tutto gratuitamente! In questo articolo, ti basi su ciò che hai appreso configurando un database basato su NoSQL Cloud e quindi creando una pagina Web molto semplice per aggiungere elementi ad esso. Il database memorizzerà semplicemente i giochi di parole insieme a una categoria e un identificatore. La figura 1 mostra la pagina Web che verrà utilizzata per aggiungere gli elementi.
Figura 1: Una pagina web che scrive su un database NoSQL di Firestore.
Configurazione del database Cloud Firestore in Firebase
Per iniziare, torna a Firebase e crea un nuovo progetto. Puoi accedere a Firebase andando su https://console.firebase.google.com/. Questa pagina ti darà la possibilità di aggiungere un nuovo progetto, come mostrato nella Figura 2. Puoi trovare maggiori informazioni sulla creazione del progetto nell'articolo precedente.
Figura 2: Aggiunta di un nuovo progetto Firebase.
Ho chiamato il mio progetto "The Pun Project". Dopo aver creato un nuovo progetto, verrai indirizzato alla Firebase Console come mostrato nella Figura 3.
Figura 3: La console Firebase
Nella Console potrai creare il database che utilizzerà la pagina web. Il primo passo per farlo è fare clic sull'opzione Database nel menu di navigazione a sinistra. Verrà visualizzata una schermata come mostrato nella Figura 4 che ti consentirà di creare un Cloud Firestore, che sarà il tuo database NoSQL.
Figura 4: La schermata iniziale per creare un Cloud Firestore
Facendo clic sul pulsante Crea database inizierà il processo di esplorazione dei passaggi per la creazione del database. La prima decisione da prendere, come mostrato nella Figura 5, è se il database verrà avviato in modalità produzione o test. Per mantenere questo articolo semplice e incentrato sull'aggiunta di dati, verrà selezionata la modalità test. Quando viene creata una base di database pronta per la produzione, ti consigliamo di aggiungere più sicurezza rispetto a quella fornita nella modalità di test.
Figura 5: Selezione della modalità per il database Firestore
Con la modalità selezionata, il passaggio successivo consiste nell'indicare la posizione in cui si desidera creare il database. Stai creando il tuo database nel cloud, quindi puoi scegliere le posizioni su quali server desideri utilizzare. Facendo clic sul menu a discesa della posizione di Cloud Firestore mostrato nella Figura 6, potrai scegliere una posizione multiregionale o regionale. Suggerisco che se ti trovi in Nord America, selezioni la posizione nam5 (us-central). Se sei altrove, scegli la regione più vicina alla tua posizione.
Figura 6: Selezione di una regione per il database Firestore
Con la tua regione selezionata, fai clic sul pulsante Fine e Firebase eseguirà il provisioning del tuo database Cloud Firestore. Una volta completato il provisioning, sarai pronto per la pagina della console del database, come mostrato nella Figura 7, dove puoi iniziare a utilizzare il tuo database online.
Figura 7: La console del database in Firebase
Raccolte e documenti in NoSQL
Se hai seguito, a questo punto hai creato un database basato su NoSQL Cloud nel Cloud Firestore di Firebase. Entrare nei dettagli di NoSQL va oltre lo scopo di questo articolo, ma fornirò l'evidenziazione di ciò che è necessario sapere per eseguire l'aggiunta di dati di esempio che è stata promessa in questo articolo.
Un database NoSQL è composto da raccolte che contengono documenti . Un documento contiene fondamentalmente i campi che prevedi di archiviare. Ad esempio, in questo articolo viene creata una raccolta di giochi di parole. La collezione di giochi di parole conterrà documenti. Ogni documento sarà un gioco di parole diverso.
In Firebase, puoi fare clic sul collegamento "+ Avvia raccolta" mostrato nella Figura 7 per visualizzare una finestra di dialogo che ti consentirà di creare la raccolta di giochi di parole. Come illustrato nella figura 8, viene richiesto di aggiungere un ID raccolta. In questo caso, chiameremo la raccolta "Giochi di parole".
Figura 8: Creazione di una raccolta Cloud Firestore
Una volta creata la raccolta, sarai in grado di creare documenti all'interno della raccolta come mostrato nella Figura 9. Anche in questo caso, un documento è fondamentalmente un record all'interno del tuo database NoSQL. Poiché questo è NoSQL, non ci sono regole rigide che ti obbligano ad assicurarti che ogni campo sia in ogni documento (record) o che ogni documento all'interno di una raccolta corrisponda anche. Questo è lasciato a te.
Figura 9: Aggiunta di un documento a una raccolta
Ogni documento che crei dovrà avere un ID documento. Puoi inserire questo ID oppure puoi scegliere di lasciarlo vuoto e un ID verrà generato automaticamente. Per mantenere le cose più leggibili nell'esempio usando i giochi di parole, assegnerò al primo documento un ID di Pun0001.
Utilizzando la console per aggiungere documenti, per ogni documento è necessario specificare non solo i valori dei dati, ma anche il nome dei campi e le tipologie. Un menu a discesa ti consente di selezionare il tipo di dati che desideri aggiungere.
Nella figura 10 sono stati aggiunti due campi stringa che verranno utilizzati per l'esempio di gioco di parole. Si tratta di una Categoria e il testo del gioco di parole (PunText ).
Figura 10: Impostazione di un documento di gioco di parole.
Quando si fa clic sul pulsante Salva nella finestra di dialogo mostrata in Figura 10, il documento (che è fondamentalmente un record) verrà creato come mostrato in Figura 11. A questo punto è stato creato un database Cloud Firestore sul Cloud e un record ( documento) è stato aggiunto! Più precisamente, è stata creata una raccolta chiamata "Puns" che ha un documento chiamato "Pun0001" che contiene campi chiamati Categoria e PunText.
Figura 11: Il database di Cloud Firestore con un documento aggiunto!
Si noti che a questo punto, se si desidera aggiungere ulteriori record utilizzando la console, fare clic sul collegamento "+ Aggiungi documento" mostrato al centro della Figura 11. È quindi possibile aggiungere ulteriori giochi di parole con ID, categorie e testo del gioco di parole. Dovresti fare attenzione per assicurarti che ogni volta che aggiungi un nuovo gioco di parole usi gli stessi nomi di campo.
Anche se potresti pensare che sia noioso dover reinserire i nomi dei campi, ciò è dovuto alla flessibilità di NoSQL. Un modo per aggirare questo problema è creare un'applicazione web che faccia quella parte del lavoro per te!
Nota:nella Figura 11 noterai che ci sono un paio di posti in cui puoi iniziare nuove raccolte. È oltre lo scopo di questo articolo approfondire la struttura delle raccolte e dei documenti NoSQL.
Creazione di un'applicazione Web per accedere a Cloud Firestore
Con la configurazione di Cloud Firestore, ora puoi aggiungere dati dall'esterno del sito Firebase. Per fare ciò, dovrai prima acquisire alcune informazioni da Firebase che ti consentiranno di associare la tua app web al progetto Firebase che hai creato.
Inizia facendo clic sul collegamento Panoramica del progetto nella parte in alto a sinistra del menu di navigazione. Questo ti porterà a una pagina di panoramica del tuo progetto come mostrato nella Figura 12.
Figura 12: La pagina di panoramica del progetto Firebase
In questa pagina vedrai che ci sono icone per quattro tipi di progetti che possono essere selezionati. Questi sono per iOS, Android, Web e Unity. Fare clic sull'icona per indicare che è in corso l'esecuzione di un'app Web. Verrà visualizzata la finestra di dialogo mostrata nella Figura 13 che richiederà un nome per l'applicazione. Il nome creato viene utilizzato per coordinare l'app Web creata con il progetto Firebase e le funzionalità all'interno del progetto Firebase. Per questa demo, utilizzo il nome "My Punny Web App" e faccio clic sul pulsante Registra app.
Una volta cliccato, ti verrà presentata una schermata che include il codice HTML che aggiungerai alla tua applicazione Web. Questo codice HTML è ciò che lega Firebase alla tua app.
Figura 13: Il codice Firebase per l'app Web.
Ti consigliamo di copiare questo codice da incollare nella pagina HTML che creeremo più avanti nei passaggi successivi di questo articolo. Se esci dalla pagina mostrata nella Figura 13, puoi sempre tornare a questo codice dell'app dalla console Firebase. Basta fare clic sull'ingranaggio accanto al collegamento Panoramica del progetto nell'angolo in alto a destra e selezionare Impostazioni progetto. La pagina risultante includerà informazioni sul tuo progetto
Creazione della Pagina Web/App per accedere a Firestore
Con tutto impostato sul lato Firebase, è il momento di creare la pagina Web che consentirà di aggiungere dati. Il Listato 1 contiene l'HTML di base per visualizzare la pagina mostrata in precedenza nella Figura 1.
Listato 1: HTML di base per la pagina 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>
Il Listato 1 è HTML di base. Vengono impostati tre campi per consentire all'utente di inserire i dati. A ciascuno viene assegnato un ID che sarà necessario per associare i dati inseriti a un documento che verrà aggiunto al Firestore. un pulsante è incluso anche con un evento per memorizzare i dati. Attualmente, quella funzione non è stata scritta; questo è l'obiettivo di questo articolo! Ho anche incluso un collegamento a un file JavaScript esterno chiamato pun.js. Inizialmente, quel file è vuoto, ma verrà modificato a breve!
È all'interno del Listato 1 che vorrai incollare il codice che è stato copiato da Firebase in precedenza. Il codice mostrato nella Figura 13 dovrebbe essere incollato vicino alla fine del tag body, in questo caso appena prima dell'inclusione dello script puns.js. Ho incollato il codice della mia app per i giochi di parole nel Listato 2.
Listato 2: La pagina html con il codice Firestore aggiunto.
<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>
Con l'aggiunta dello script al tuo HTML, hai cablato la tua applicazione per accedere a Firebase. Tuttavia, è necessario aggiungere un'altra riga di codice. Mentre il codice generato fornirà le connessioni a Firebase, è necessario aggiungere un collegamento aggiuntivo per ottenere il codice che accederà al database di Cloud Firestore all'interno di Firebase. Ti consigliamo di aggiungere la seguente riga di origine dello script agli elenchi:
Questo può essere aggiunto subito dopo la chiamata a:
Il passaggio successivo consiste nell'aggiungere la logica che assocerà i campi inseriti dall'utente ai campi da aggiungere al database di Firestore. Questo verrà fatto nel file puns.js per mantenere pulito il codice.
Il processo consiste nel creare prima una variabile di database che sarà collegata al database Firebase Cloud Firestore. Quindi sarà necessario creare variabili che possono essere riempite con i valori inseriti dall'utente nella nostra pagina. Questo verrà fatto con le chiamate standard document.getElementById(). Infine, la variabile visualizzata dalla pagina Web deve essere aggiunta al database di Cloud Firestore come campi all'interno di un documento all'interno della raccolta di giochi di parole. Il Listato 3 mostra il JavaScript che può realizzare tutto questo.
Listato 3: Il file 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);
});
}
Si noti che nel Listato 3 il database è stato creato con la variabile chiamata db. Questa variabile viene quindi utilizzata per creare il nuovo documento (record) specificando il nome della raccolta che è stata chiamata Giochi di parole nel processo mostrato in Figura 8. Questo è seguito dal nome del documento, che in questo caso è il nostro ID gioco di parole raccolto da l'utente e inserirlo nella variabile inputPun. All'interno del documento vengono aggiunti due campi, operazione che viene eseguita all'interno del set. Per aggiungere i campi, viene elencato il nome del campo, quindi i due punti e infine il valore della stringa da aggiungere. In questo caso, inputCategory viene aggiunto al campo Categoria e inputText viene aggiunto al campo PunText.
L'elenco include anche alcuni test e logica di errore per registrare un messaggio sulla console. Se apri la console per sviluppatori del tuo browser, vedrai un messaggio "Documento riuscito" visualizzato quando un documento viene aggiunto al tuo Cloud Firestore come mostrato nella Figura 14.
Figura 14: Un documento aggiunto con successo.
È possibile confermare che il documento è stato aggiunto tornando al progetto nella console di Firebase e guardando il database (facendo clic su Database nel menu di navigazione a sinistra). La figura 15 mostra che l'aggiunta del nuovo gioco di parole ha avuto successo.
Figura 15: La collezione Giochi di parole con il nuovo documento pun002
Concludendo
Molto è stato trattato in questo articolo sull'aggiunta di documenti a un database NoSQL Firebase Cloud Firestore. Hai imparato come farlo sia dalla Console che da una semplice app web. Questo è solo un inizio per mostrare quanto può essere facile l'aggiunta. Detto questo, aggiungendo in un solo passaggio un sistema CRUD. C'è ancora molto da imparare! Oh, e se ti piacciono i giochi di parole, dai un'occhiata al mio libro, Punny or Not Book of Puns, disponibile su Amazon!
# # #
