React Horizon UI - ตัวเริ่มต้น Firebase แบบโอเพ่นซอร์ส

เผยแพร่ซ้ำโดยเพลโต

ผู้ติดตาม: 0

สวัสดีชาวโค้ด!

บทความนี้นำเสนอ open-source full-stack starter ที่ใช้ React UI ที่ขับเคลื่อนโดย Firebase สำหรับเลเยอร์การรับรองความถูกต้อง ตอบโต้ Horizon Firebase สามารถดาวน์โหลดได้จาก Github และอิงตามใบอนุญาตอนุญาต (MIT) ซึ่งใช้ในโครงการเชิงพาณิชย์และกิจกรรมอีเลิร์นนิง สำหรับผู้มาใหม่ เกิดปฏิกิริยา เป็นไลบรารี JS ชั้นนำที่ใช้เขียนโค้ดอินเทอร์เฟซผู้ใช้แบบโต้ตอบและ Firebase เป็นบริการแบ็กเอนด์ยอดนิยมที่จัดทำโดย Google Thanks for reading!

UI ที่น่าทึ่งนี้สร้างขึ้นและให้บริการฟรีโดย เรียบง่ายเว็บเอเจนซี่สร้างสรรค์ที่ใช้ Charka UI เป็นไลบรารี UI หลัก

✨ คุณสมบัติของผลิตภัณฑ์

ฐานรหัส UI ขับเคลื่อนโดย Chakra UI
7 หน้าตัวอย่าง: Dashboard, NFT Market, User Profile
70+ ส่วนประกอบ – บันทึกไว้อย่างดีที่นี่
โหมดมืด รองรับ RTL
แบ็กเอนด์ Firebase
เข้าสู่ระบบโซเชียลผ่าน Google
การตรวจสอบสิทธิ์แบบคลาสสิก (ผู้ใช้/รหัสผ่าน)

เวอร์ชันเทมเพลต (ไม่มีการตรวจสอบสิทธิ์) สามารถค้นหาและดาวน์โหลดได้จากหน้าอย่างเป็นทางการ: UI ของขอบฟ้า.

✨วิธีใช้งานสินค้า

ในการสร้างผลิตภัณฑ์ในสภาพแวดล้อมท้องถิ่น เราจำเป็นต้องมีเครื่องมือพื้นฐานบางอย่าง เช่น Git และเวอร์ชัน NodeJS ที่เหมาะสม (16.x หรือสูงกว่า)

???? ขั้นตอนที่ 1 – โคลนแหล่งที่มา

$ git clone https://github.com/app-generator/react-horizon-ui-chakra-firebase.git
$ cd react-horizon-ui-chakra-firebase

???? ขั้นตอนที่ 2 – ติดตั้งการพึ่งพา

$ npm i
// OR
$ yarn

???? ขั้นตอนที่ 3 – กำหนดค่าข้อมูลประจำตัว Firebase



const config = {
    ...
    firebase: {                                               
        apiKey: 'YOUR_API_KEY',                            
        authDomain: 'YOUR_DOMAIN_HERE',                    
        projectId: 'YOUR_PROJECT_ID',                      
        storageBucket: 'YOUR_STORAGE_BUCKET',              
        messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',     
        appId: 'YOUR_APP_ID',                   
        measurementId: 'YOUR_TRACKER_ID'
    }
};

???? ขั้นตอนที่ 4 – เริ่มแอพ

$ npm run start 
// OR
$ yarn start

เมื่อการตั้งค่าเสร็จสมบูรณ์ เราควรสามารถเข้าถึงแอปในเบราว์เซอร์ ลงทะเบียนผู้ใช้ใหม่ หรือตรวจสอบสิทธิ์โดยใช้การเข้าสู่ระบบโซเชียลของ Google

React Horizon Firebase - หน้าลงชื่อเข้าใช้

React Horizon Firebase – หน้า NFT

React Horizon Firebase - หน้า NFT

✨ แนะนำ Firebase

ส่วนนี้นำเสนอประเด็นสำคัญบางประการของบริการที่น่าทึ่งนี้ และยังนำเสนอขั้นตอนในการสร้างแอป Firebase อย่างง่าย

Firebase เป็นแพลตฟอร์มที่พัฒนาโดย Google สำหรับสร้างแอปพลิเคชันมือถือและเว็บ มันคือ Backend-as-a-Service (BaaS) มีเครื่องมือและบริการต่างๆ แก่นักพัฒนาเพื่อช่วยในการพัฒนาแอปที่มีคุณภาพและขยายฐานผู้ใช้

Firebase ช่วยให้นักพัฒนามีอิสระในการมุ่งเน้นไปที่การสร้างประสบการณ์ผู้ใช้ที่ยอดเยี่ยม คุณไม่จำเป็นต้องจัดการเซิร์ฟเวอร์หรือเขียน API Firebase คือเซิร์ฟเวอร์, API และที่เก็บข้อมูลของคุณ ทั้งหมดเขียนโดยทั่วไปเพื่อให้คุณสามารถปรับเปลี่ยนเพื่อให้เหมาะกับความต้องการของคุณมากที่สุด

✨ทำไมต้องใช้ Firebase

???? Realtime Database: Firebase จะส่งข้อมูลใหม่ให้คุณทันทีที่มีการอัปเดตผ่าน WebSockets
???? Authentication: Firebase auth มีระบบตรวจสอบอีเมล/รหัสผ่านในตัวที่รองรับ OAuth2 สำหรับ Google, Facebook, Twitter และ GitHub
???? Static Files Hosting: มีบริการ File Hosting แบบสแตติกที่ใช้งานง่ายซึ่งให้บริการไฟล์ของคุณผ่าน CDN ทำให้ใช้งานได้เร็วขึ้น
???? Push Notifications: ช่วยเชื่อมต่ออุปกรณ์ของผู้ใช้และเซิร์ฟเวอร์เพื่อให้การส่งการแจ้งเตือนแบบเนทีฟ/พุชกลายเป็นเรื่องง่ายและเชื่อถือได้
???? Analytics: Firebase มอบวิธีการผสานรวมกับ Google Analytics ได้อย่างราบรื่น
???? Crash Reporting: นอกจากนี้ยังมีการรายงานข้อขัดข้องแบบเรียลไทม์สำหรับการตรวจสอบและแก้ไขจุดบกพร่องตามเวลาจริง
???? Remote Configuration: Firebase อนุญาตให้เผยแพร่การอัปเดตทันทีสำหรับผู้ใช้ปลายทางผ่านการกำหนดค่าระยะไกลTest Lab: บริการนี้ช่วยทดสอบแอปพลิเคชันของคุณบนอุปกรณ์จริงและอุปกรณ์เสมือนที่ Google ให้บริการ