{"id":26075,"date":"2021-06-11T16:47:00","date_gmt":"2021-06-11T13:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=26075"},"modified":"2021-10-18T03:01:39","modified_gmt":"2021-10-18T00:01:39","slug":"come-collegare-il-database-in-tempo-reale-di-firebase-al-modulo-del-tuo-sito-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-collegare-il-database-in-tempo-reale-di-firebase-al-modulo-del-tuo-sito-web\/","title":{"rendered":"Come collegare il database in tempo reale di Firebase al modulo del tuo sito web"},"content":{"rendered":"

Stai cercando di archiviare i dati dei moduli del tuo sito Web su Firebase? Se s\u00ec, allora sei nel posto giusto. In questo articolo, ti mostro come connettere il database in tempo reale di Firebase con il modulo e archiviare i suoi dati su Firebase.<\/p>\n

Il database in tempo reale di Firebase \u00e8 un database NoSQL ospitato nel cloud. In Firebase, i dati vengono archiviati come JSON e sincronizzati in tempo reale con tutti i client connessi creati utilizzando SDK iOS, Android e JavaScript. Quando diciamo in tempo reale significa dati scambiati tra applicazioni e database in tempo reale (senza ritardi). Puoi leggere ulteriori informazioni sulle funzionalit\u00e0 di Firebase nella loro documentazione<\/a>.<\/p>\n

Per questo tutorial, creer\u00f2 un semplice modulo di contatto e memorizzer\u00f2 i dati del modulo nel database in tempo reale di Firebase. Per inviare i dati dal modulo a Firebase utilizzer\u00f2 JavaScript SDK.<\/p>\n

Configurazione Firebase<\/h3>\n

Per iniziare, vai<\/a> su Firebase Console<\/a> e crea un nuovo progetto. L’utente pu\u00f2 anche scegliere un progetto esistente. Una volta creato un nuovo progetto, verrai reindirizzato a una pagina in cui otterresti il \u200b\u200bcodice JavaScript di Firebase. Fare clic sull’icona di un codice che aprir\u00e0 un popup.<\/p>\n

\"Come<\/a>\"Come<\/a><\/p>\n

Copia il codice mostrato nel popup che richiede nei passaggi successivi. Dal menu di sinistra, cliccare su ‘Database’ e poi su ‘Crea database’ nella sezione Realtime Database.<\/p>\n

\"Come<\/a><\/p>\n

Si aprir\u00e0 un popup, scegliere la modalit\u00e0 di prova e infine fare clic sul pulsante "Abilita".<\/p>\n

\"Come<\/a><\/p>\n

Verrai reindirizzato alla schermata successiva in cui vedrai il tuo database in tempo reale. Al momento non ci sono dati, quindi il tuo database \u00e8 vuoto.<\/p>\n

\"Come<\/a><\/p>\n

Collega il database in tempo reale di Firebase al modulo del tuo sito web<\/h3>\n

Abbiamo finito con la configurazione di Firebase. La prossima cosa da fare \u00e8 creare un modulo e memorizzare i dati del modulo su Firebase. Costruiamo un semplice modulo di contatto su Bootstrap. Crea un file index.html e aggiungi il codice sottostante.<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Firebase<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css\" integrity=\"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk\" crossorigin=\"anonymous\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2>Contact Form<\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"alert alert-success success-message\" style=\"display:none;\">Form submitted successfully.<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<form id=\"contactForm\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleFullName\">Full Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control fullname\" id=\"exampleFullName\" placeholder=\"Enter Full Name\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleEmail\">Email<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"email\" class=\"form-control email\" id=\"exampleEmail\" placeholder=\"Enter Email\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleSubject\">Subject<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control subject\" id=\"exampleSubject\" placeholder=\"Enter Subject\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"exampleMessage\">Message<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<textarea class=\"form-control message\" id=\"exampleMessage\" placeholder=\"Enter Message\" cols=\"30\" rows=\"10\" required><\/textarea>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-primary\">Submit<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/form>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/www.gstatic.com\/firebasejs\/7.15.5\/firebase-app.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/www.gstatic.com\/firebasejs\/7.15.5\/firebase-database.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"js\/main.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Nel codice sopra, ho incluso un file JS Firebase prima del main.js<\/code>quale ho copiato prima pi\u00f9 il JS di Realtime Database. Crea un main.js<\/code>file nella cartella ‘js’. Questo file JS avr\u00e0 una logica effettiva per interagire con Firebase. Aggiungi il codice copiato da Firebase nella parte superiore del main.js<\/code>file.<\/p>\n
\/\/ Paste the code from Firebase\nvar config = {\n\u00a0\u00a0\u00a0\u00a0apiKey: \"YOUR_API_KEY\",\n\u00a0\u00a0\u00a0\u00a0authDomain: \"Your_AuthDomain\",\n\u00a0\u00a0\u00a0\u00a0databaseURL: \"YOUR_DATABAE_URL\",\n\u00a0\u00a0\u00a0\u00a0projectId: \"YOUR_PROJECT_ID\",\n\u00a0\u00a0\u00a0\u00a0storageBucket: \"YOUR_STORAGE_BUCKET\",\n\u00a0\u00a0\u00a0\u00a0messagingSenderId: \"YOUR_SENDER_ID\",\n\u00a0\u00a0\u00a0\u00a0appId: \"YOUR_APP_ID\"\n};\nfirebase.initializeApp(config);<\/code><\/pre>\n
Successivamente, crea una raccolta in cui verranno archiviati i dati del modulo. Puoi dare qualsiasi nome alla collezione. Nel mio caso, creo una raccolta chiamata ‘contactformmessages’.<\/p>\n
\/\/ Reference messages collection\nvar messagesRef = firebase.database().ref('contactformmessages');<\/code><\/pre>\n
Infine, prenderemo tutti i valori del modulo e li passeremo a Firebase al momento dell’invio del modulo nel modo seguente.<\/p>\n
$('#contactForm').submit(function(e) {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0var newMessageRef = messagesRef.push();\n\u00a0\u00a0\u00a0\u00a0newMessageRef.set({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name: $('.fullname').val(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0email: $('.email').val(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0subject: $('.subject').val(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0message: $('.message').val()\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('.success-message').show();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('#contactForm')[0].reset();\n});<\/code><\/pre>\n
Ora, prova a inviare un modulo con valori fittizi e vai al database in tempo reale di Firebase, dovresti vedere i tuoi dati memorizzati nel database. Apparir\u00e0 come sotto.<\/p>\n
\"Come<\/a><\/p>\n
Leggi i dati dal database in tempo reale di Firebase<\/h3>\n
Devi imparare a scrivere dati nel Realtime Database di Firebase. Potresti anche volerlo leggere da Firebase. La lettura dei dati da Firebase \u00e8 facile e richiede solo poche righe di codice JavaScript. Abbiamo creato una raccolta di messaggi come messagesRef<\/code>. Utilizzando questa variabile \u00e8 possibile leggere i dati come segue.<\/p>\n
messagesRef.once('value').then((snapshot) => {\n\u00a0\u00a0\u00a0\u00a0Object.keys(snapshot.val()).forEach((key) => {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Name: ${snapshot.val()[key].name}`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Email: ${snapshot.val()[key].email}`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Subject: ${snapshot.val()[key].subject}`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Message: ${snapshot.val()[key].message}`);\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Spero che tu abbia imparato a collegare Firebase al modulo del sito web. Per favore condividi i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.<\/p>\n
articoli Correlati<\/h4>\n