4adk.com
ref ( file. name); storageRef. put ( file); thumbnail = " + config [ "storageBucket"] + "/o/" + file. name + "? alt=media";}); document. getElementById ( "add-data"). onclick = function ( e) { var title = document. getElementById ( 'title'). value; var content = document. getElementById ( 'content'). value; var rootRef = firebase. database (). ref (); var storesRef = rootRef. child ( 'app/data/'); var newStoreRef = storesRef. push (); newStoreRef. set ( { title: title, content: content, thumbnail: thumbnail}); alert ( "Success");} คำสั่งในการรับค่า File ที่ต้องการอัพโหลดนั้นจะผ่านส่วนของ การเรียก getElementById ของ Javascript ส่วนของ id ที่ชื่อ "filebutton" หรือปุ่มอัพโหลดรูปภาพ ดังนั้นเราต้องทำการแทรกรูปภาพแล้วทำการอัพโหลดให้เสร็จเป็นที่เรียบร้อยก่อน var storageRef = firebase. name + "? alt=media"; บรรทัดข้างต้นคือการ put ไฟล์รูปภาพไปยัง Storage ส่วนการบันทึกข้อมูลลง Real Time Database ของ Firebase นั้น ตัวอย่างในบทเรียนนี้จะทำการสร้าง node "app/data" ก่อนแล้วค่อย push ค่า node ใหม่ลงไปด้วยคำสั่ง: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 document.
getElementById ( 'contact-form'); var contactSuccess = document. getElementById ( 'contact-success'); var contactError = document. getElementById ( 'contact-error'); var sendBtn = document. getElementById ( 'send-data'); var onMessageComplete = function ( error) { sendBtn. disabled = false; if ( error) { contactError. innerHTML = 'Sorry. Could not send Data. ';} else { contactSuccess. innerHTML = "Success! "; // hide the form contactFrom. style. display = 'none';}}; function sendData ( formObj) { var myFirebaseRef = new Firebase ( "
display === "")? "block": "none"; success. innerHTML = "User Logged in with Credentials:
" + "Name: " + fireBase_name + "
" + "Email: " + fireBase_email + "
" + "emailVerified: " + fireBase_emailVerified + "
" + "uid: " + fireBase_uid + "
"; window. location. href = "";}}); firebase. signOut (). then ( function () { // Sign-out successful. }, function ( error) { // An error happened. }); หลังขั้นตอนนี้ให้สร้างหน้า ขึ้นมาเปล่าๆ เพื่อให้เวลาเข้าระบบเสร็จ redirect ไปหน้านั้น การทำงานหลักๆคือ เมื่อกดปุ่ม sign-in จะมีการเรียกตรวจสอบ Field ของ Textbox ว่าว่างหรือมีข้อมูลยาวตามที่ตกลงหรือไม่ หลังจากนั้น การทำงานเข้าระบบจริงๆ คือส่วนนี้: firebase.
และ firebase/ เพื่อให้สามารถใช้ Firebase บน React ได้ และ ไฟล์ firebase/ เพื่อเป็นตัวไว้ Initial Project Firebase ดังนี้ จะเห็นว่า เราทำการ import ตัว firebase/app และ firebase/auth เพื่อให้สามารถใช้ function ในโมดูล auth ได้ จากนั้น ทำการ export default เฉพาะตัว () ที่เป็น function การ authentication อย่างเดียวครับ ทั้งนี้ทั้งนั้น สามารถ export default firebase ก็ได้ แต่เวลาเรียกใช้งาน auth ก็ต้องเป็น ().
สอน Firebase Firestore ตอนที่ 1 - ทำความรู้จัก Firestore - YouTube