1 การเพิ่มโครงการ คลิกที่เพิมโครงการ ระบุชื่อโครงการ ตัวอย่างใช้ขื่อว่า todo คลิกปุ่มสร้างโครงการ 3. 2 คัดลอกค่า Config ของ Firebase เพื่อเชื่อมต่อกับ React Js เมื่อสร้างโครงการ todo เรียบร้อยแล้ว ให้คลิกที่ ปุ่ม > ให้ทำการ คัดลอกค่า ที่อยู่ในตัวแปร var config ของ firebase เก็บไว้ก่อนครับ (เราจะนำค่านี้ไปใส่ใน React อีกครั้งครับ) 3. 3 การสร้างฐานข้อมูล Realtime Database คลิกที่เมนู database ด้านซ้ายมือ จากนั้น เลือนหา คำว่า Realtime database คลิกปุ่ม สร้างฐานข้อมูล เลือก เริ่มต้นในโหมดทดสอบ หากเรียบร้อยแล้ว firebase จะแสดง หน้า ฐานข้อมูล Realtime database ดังภาพ เขียน Code ด้วย Visual Studio Code หากใครยังไม่มี สามารถไป Download ได้ที่ สร้างไฟล์ ไว้ที่ Folder todo/src/ แล้วให้นำค่า config ของ firebase ที่คัดลอกไว้จาก ข้อ 3. 2 ด้านบน มาใส่แทนค่าตัวอย่างครับ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import * as firebase from 'firebase'; //insert config from firebase const config = { apiKey: "AIzaSyALLdhasdfs6Yh4FHxMQTkKCq1R-EgPA", authDomain: "", databaseURL: ", projectId: "auth-10df3ed", storageBucket: "", messagingSenderId: "563454061114013"}; firebase.
สินค้า (2 ชนิด) รหัสสินค้า P-8897X3 1, 016. 00 บาท รหัสสินค้า P-8897 339. 00 บาท แสดงสินค้าที่ 1-2 จากทั้งหมด 2 ชิ้น ค้นหาสินค้า หมวดหมู่สินค้า ติดต่อเรา Line@: @PharmaShop4U ระบบสมาชิก เว็บเพื่อนบ้าน สินค้าสุ่ม รหัสสินค้า 5S4Aหลอด50. 89. 00 บาท รหัสสินค้า BD_INSULIN(31G)_10*10_x3. 210. 00 บาท รหัสสินค้า SKU-13664 75. 00 - 119. 00 บาท รหัสสินค้า Harro_Sham150_x3 1, 196. 00 บาท รหัสสินค้า HIM_Lip10 53. 00 บาท รหัสสินค้า Vick5. 60. 00 บาท รหัสสินค้า P-7644 95. 00 บาท รหัสสินค้า SME_MARO3D 354. 00 บาท สินค้าหมด รหัสสินค้า SKU-11451 1, 050. 00 บาท รหัสสินค้า Harro_50Blue_x3 284. 00 บาท รหัสสินค้า Pregaine200 158. 00 บาท รหัสสินค้า Reiscareฟ้า50. 35. 00 บาท รหัสสินค้า Palmer_MasgLo250 295. 00 บาท รหัสสินค้า ชาวหินฟ้า25_x3. 100. 00 บาท รหัสสินค้า P-9670x3 566. 00 บาท PharmaShop4U {{is_joined? 'เป็นสมาชิกแล้ว':'Join เป็นสมาชิกร้าน'}} 1353 สมัครสมาชิกร้านนี้ เพื่อรับสิทธิพิเศษ บัตรประชาชน บุ๊คแบ๊งค์ คุ้มครองโดย LnwPay
ReactNative ทำ Login facebook ด้วย firebase ใครกำลังมองหาอยู่ทำตามนี้เลยครับ (react-native 0. 57. 2) 1. เข้า สร้าง project firebase download ไฟล์ แล้ววางไว้ที่ android/app 2. install react-native-firebase () npm install react - native - firebase -- save donate ให้กับทีมพัฒนา => 3. สั่ง link react native กับ project android/ios เพราะ react-native-firebase มีการเรียกใช้งานส่วนที่เป็น native code เป็นการ add config ของ react native ให้กับ project android/ios react - native link react - native - firebase ต่อครับ link แค่ช่วยส่วนหนึ่งแต่ไม่ใช่ทั้งหมด (แล้วแต่ library ที่ใช้ด้วย) ฝั่ง Android () (link ทำให้) add คำสั่ง เข้าไปในไฟล์ android/ ทำให้ android studio มองเห็น project ฝั่ง ReactNative (react-native-firebase) (link ทำให้แต่ต้องตามไปเปลี่ยนถ้า Gradle plugin 3. +) เพิ่ม dependencies เข้าไปยัง android/app/ ถ้า Gradle plugin 3. + ให้เปลี่ยนคำสั่ง compile เป็น implement (ทำเอง) ไฟล์ android/app/ เพิ่มคำสั่งที่ด้านล่างสุดของไฟล์ apply plugin: '' (ทำเอง) เพิ่ม Firebase dependencies implementation "" implementation "" implementation "" (ทำเอง) ไฟล์ android/ เพิ่ม dependencies classpath '' เปิดไฟล์ MainApplication import io.
invertase. firebase. auth. RNFirebaseAuthPackage; (link ทำให้) import class RNFirebaseAuthPackage และ new object ใส่ใน array ไว้ตามภาพ ทำให้มีการเข้าถึง native code ตอน run reactnative app ได้ กด Sync project ที่ android studio ถ้าไม่มีอะไรผิดพลาดก็จะได้หน้าตาประมาณนี้ครับ (ถ้ามีแก้ไขไปตาม error log ที่แสดงครับ เป็นได้หลายกรณี) ฝั่ง ios (ต้องใช้เครื่อง mac และลง xcode ให้เรียบร้อยก่อนครับ) add ios app เข้าไป firebase project จากนั้น download ไฟล์ เพื่อนำไปใส่ใน project ios (เปิด xcode ลากไฟล์ใส่ folder ตามชื่อ project) เพิ่ม code เพื่อ import firebase lib และเริ่มการใช้งานที่ไฟล์ ios/[APP NAME]/AppDelegate. m ตามภาพครับ ต่อนะครับ ไปที่ Podfile (ใครยังไม่สร้างหาวิธี pod init เองนะครับ ขอข้ามขั้นตอนการสร้าง Podfile ไป) จากนั้นก็เปิด terminal มา ไปยัง folder ios สั่ง run pod install xcode -> Product -> build ทดสอบดูว่าผ่านไหม ถ้า Build Success ก็ค่อยไปทำข้อ 4 4. ทำ Facebook Login ฝั่ง android ติดตั้ง react-native-fbsdk npm install react - native - fbsdk -- save link react - native link react - native - fbsdk (ทำเอง) เพิ่ม android/app/ implementation ":facebook-android-sdk:${}" (ทำเอง) config เพิ่มที่ MainApplication () import com.
บทความนี้จะพูดถึงวิธีการอัพโหลดไฟล์ต่าง ๆ ไปยัง Firebase ซึ่งเป็น Cloud storage ที่กำลังมาแรงอยู่ในขณะนี้ โดยใช้ React ในการสร้างส่วนติดต่อกับผู้ใช้งาน สิ่งที่ต้องเตรียม (Prerequisite) 1. สร้าง Firebase Project สำหรับใช้งาน Cloud Storage 2. กำหนดสิทธิ์การเข้าถึง Cloud storage ให้เป็น Public สามารถกำหนดได้โดยไปที่ Firebase console > Storage > RULES แล้วกำหนดค่าดังนี้ service orage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write;}}} 3. สร้าง React project ด้วย create-react-app 4.
สวัสดีครับ ในบทความนี้จะเป็นบทความแรกที่เขียนเกี่ยวกับ ReactJs และ Firebase ครับ เนื่องจากบทความที่ผ่าน ๆ มาจะเกี่ยวกับการใช้งาน JQuery หรือ PHP เป็นส่วนใหญ่ครับ ในบทความนี้จะเป็นการแนะนำตัวอย่างการใช้งานเบื้องต้น จะไม่ได้อธิบายถึง คำสั่ง หรือ หลักการทำงานต่าง ๆ ของคำสั่ง เช่น state, props หรือ component ต่าง ๆ (เพราะผมก็ไม่รู้เหมือนกันครับ 555) สามารถหาดูเพิ่มเติมใด้จากเว็บอื่น ๆ เนื่องจากมีท่านอื่น ๆ อธิบายใว้ดีมากแล้วครับ 1. ติดตั้ง Node Js ไปที่ โหลดตัวที่เป็น LTS ก็ได้ครับ จากนั้นติดตั้งให้เรียบร้อยครับ 2.
removeคืออะไร ให้ตามไปอ่านเพิ่มเติมได้ที่ เราจะยังลบข้อมูลตอนนี้ไม่ได้ เพราะว่าเราจะไม่ได้ทำการส่ง Config Firebase และ MessageKey ที่เอาไว้ Reference value ตอน Delete ข้อมูลบน Firebase มาเลย ซึ่งทั้งหมดนี่ก็ต้องถูกส่งผ่านมาจาก นั่นเอง!!!
อ้าวงี้มันก็ไม่ Security สิ ในตัวอย่างนี้เราทำการ Demo Project เราจึงตั้งค่าแบบนี้ หากใครจะนำ Project ขึ้น Production นั้นต้องทำการตรวจสอบสิทธิ์การเข้าถึงข้อมูลกันด้วยนะ โอเค ตอนนี้เราก็จะสามารถ Create ข้อมูลลงบน Firebase ได้แล้ว เย้!!! แล้วเราต้องแก้ไขอะไรอีกละ?
Cloud Firestore คือบริการฐานข้อมูลประเภท NoSQL ที่จัดเก็บข้อมูลแบบ Online ซึ่งสามารถใช้งานได้ฟรีหากอยู่ในข้อจำกัดที่กำหนดไว้ บทความนี้เราจะลองมาเขียนโปรแกรม CRUD ด้วย React Hooks เพื่อใช้งานบริการฐานข้อมูลฟรีตัวนี้กันดูครับ โดยบทความนี้จะไม่ขอพูดถึงพื้นฐานเกี่ยวกับ Cloud Firestore และฐานข้อมูลประเภท NoSQL นะครับ ข้อจำกัดของการใช้งาน Firestore แบบฟรี Firebase Account เราสามารถใช้ Google Account เพื่อสมัคร Firebase Account และสร้าง Firebase Project ได้ที่ หลังจากสร้าง Firebase Project ก็สามารถดูค่า Configuration เพื่อใช้สำหรับการตั้งค่าในขั้นตอนต่อไป ได้จากการคลิ๊กตามลำดับที่ 1. และ 2.