バックエンドシステムのFirebaseデータベースに連絡先を保存

Question

Firebaseデータベースを使用して、単一ページのWebサイトからの連絡先フォームの送信を保存します。そのデータは、最終的に認証が必要なバックエンドテクノロジと統合されますが、このフォームは簡単なコンタクト要求です。

フォームデータを送信するために、下のモジュールでgulp/webpackセットアップを実行しています。データを保存すると、サンプルのFirebase FunctionをNodemailerとともに使用して、連絡先の詳細を電子メールでgmailアカウントに送信する予定です。

これまで私はフォームを摂取することができませんでした！私は何か間違っているのですか？私はReactでこれを成功させてしまったので、Babel/ES6のセットアップがうまくいかないのは少し混乱しています。 （私はこの機能をメインのJSファイルで呼び出しています）

何か助けてください！下記をご覧ください：すべての

import * as firebase from 'firebase'; 

// Initialize Firebase 
try { 
    var config = { 
    apiKey: "<HIDDEN FOR SECURITY>", 
    authDomain: "<HIDDEN FOR SECURITY>", 
    databaseURL: "<HIDDEN FOR SECURITY>", 
    projectId: "<HIDDEN FOR SECURITY>", 
    storageBucket: "<HIDDEN FOR SECURITY>", 
    messagingSenderId: "<HIDDEN FOR SECURITY>" 
    }; 
    firebase.initializeApp(config); 
} catch (e) { 

} 

function ContactForm() { 
// Shortcuts to DOM Elements. 
this.contactForm = document.getElementById('contact-form'); 
this.contactName = document.getElementById('contact-name'); 
this.contactEmail = document.getElementById('contact-email'); 
this.contactPhone = document.getElementById('contact-phone'); 
this.contactZipcode = document.getElementById('contact-zipcode'); 
this.contactMessage = document.getElementById('contact-message'); 
this.contactSubmit = document.getElementById('contact-submit'); 
} 

/** 
* Saves a new contact to the Firebase DB. 
*/ 

ContactForm.prototype.ContactSubmit = function(name, email, phone, zipcode, 
message) { 
    var firebaseRef = firebase.database().ref('contacts'); 
    firebaseRef.child("contact").set({ 
    name, 
    email, 
    phone, 
    zipcode, 
    message 
    }).then(() => { 
    console.log('stored to firebase'); 
    }, (e) => { 
    console.log('failed to store to firebase'); 
    }); 

    var contactRef = firebaseRef.child().push(contact); 
    return contactRef; 
} 

    // Saves message on form submit. 
ContactForm.prototype.onsubmit = function(e) { 
    e.preventDefault(); 
    var name = contactName.value; 
    var email = contactEmail.value; 
    var phone = contactPhone.value; 
    var zipcode = contactZipcode.value; 
    var message = contactMessage.value; 
    if (name && email && phone && zipcode && message) { 
     return ContactSubmit(name, email, phone, zipcode, 
message).then(function() { 
     contactSubmit.click(); 
     }); 
     contactName.value = ''; 
     contactEmail.value = ''; 
     contactPhone.value = ''; 
     contactZipcode.value = ''; 
     contactMessage.value = ''; 
    } 
    }; 

export default ContactForm; 

Answer 1

まず、あなたがこの行に子への参照を持っていない：

var contactRef = firebaseRef.child().push(contact); 

はそれに加えて、私が見ることができるという変数（ありません。.. 。）これはcontactと呼ばれるので、これは（.push(contact)）は動作しません。また、ユーザーは連絡先データを1つのオブジェクトプロパティ（「連絡先」オブジェクトの「連絡先」子）に保存しています。以下に示すよう：

firebaseRef.child("contact").set({ ... }); 
// You need to distinguish them by either using the user's uid or using the push() 

あなたが何をしたいのか（。上記のコードのコメントで述べたように、私は後者を使用することを選択した）別のユーザーの連絡先情報を識別する方法を持っています。例：あなたはthisキーワードを指定せずにContactSubmitを呼び出すContactForm.prototype.onsubmitで

var contactRef = firebaseRef.push({ ... }, error => { /* Do stuff when done */ }) 

。そして、同じ関数呼び出しでは、あなたがここで再びthisを使用することを忘れ：

.then(function() { 
    contactSubmit.click(); 
    }) 

を今、私は再びあなたのコードを見てきましたことを、私はあなたにもthis

// here 
var name = contactName.value; 
// ... till here... 
var message = contactMessage.value; 

Iを使用することを忘れてしまったことに気づきましたなぜあなたがやっていることが過度のように感じるのか分かりません。速いものをコードしてみてください。そこ

/** 
 
* Saves a new contact to the Firebase DB. 
 
*/ 
 

 
// When the contactForm's been submitted, stop it from doing the normal thing of redirecting and do all this stuff below 
 
contactForm.addEventlistener('submit', function(_eve) { 
 
    _eve.preventDefault(); 
 

 
    // Get references to DOM Elements 
 
    var name = document.getElementById('contact-name'), 
 
    email = document.getElementById('contact-email'), 
 
    phone = document.getElementById('contact-phone'), 
 
    zipcode = document.getElementById('contact-zipcode'), 
 
    message = document.getElementById('contact-message'); 
 

 
    var firebaseRef = firebase.database().ref('contacts'); 
 
    firebaseRef.push({ 
 
     name, 
 
     email, 
 
     phone, 
 
     zipcode, 
 
     message, 
 
     id: uuid.v4() // or uuid() if you used the gist, or uuid.v1() if you are using the time based uuid generator. 
 
    }) 
 
    .then(() => { 
 
     console.log('stored to firebase'); 
 
     name.value = ''; 
 
     email.value = ''; 
 
     phone.value = ''; 
 
     zipcode.value = ''; 
 
     message.value = ''; 
 
    }) 
 
    .catch((e) => { 
 
     console.log('Error:', e); 
 
    }); 
 
}, false);

。これはうまくいくはずです。ユーザーがフォームを送信すると、そのトラックにフォームが停止し、必要な値を取り、Firebaseにプッシュします。あなたは終わった。

ちなみに、Firebaseに保存されているプロパティは、ユーザーを識別するのに役立ちます。これは、uidやその他の方法によって決まります。