React Horizon UI - Açık Kaynak Firebase Starter

Plato tarafından yeniden yayınlandı

İzleyiciler: 0

Merhaba kodlayıcılar!

Bu makale, kimlik doğrulama katmanı için Firebase tarafından desteklenen bir React UI kullanan açık kaynaklı bir tam yığın başlatıcı sunar. Horizon Firebase'e tepki verin Github'dan indirilebilir ve ticari projelerde ve e-Öğrenim faaliyetlerinde kullanılan izinli (MIT) lisansa dayalıdır. Yeni gelenler için, React etkileşimli kullanıcı arayüzlerini kodlamak için kullanılan lider bir JS kütüphanesidir ve Firebase Google tarafından hazırlanan popüler bir arka uç hizmetidir. Thanks for reading!

Bu harika kullanıcı arayüzü tarafından hazırlanmış ve ücretsiz olarak sağlanmıştır. basit, ana UI kitaplığı olarak Charka UI'yi kullanan yaratıcı bir web ajansı.

✨ Ürün Özellikleri

Chakra UI tarafından desteklenen UI kod tabanı
7 örnek sayfa: Dashboard, NFT Market, Kullanıcı Profili
70+ Bileşen – burada güzel bir şekilde belgelenmiştir
Karanlık Mod, RTL Desteği
Firebase Arka Uç
Google üzerinden Sosyal Giriş
Klasik Kimlik Doğrulama (kullanıcı/şifre)

Şablon sürümü (kimlik doğrulaması olmadan) resmi sayfadan bulunabilir ve indirilebilir: Ufuk Kullanıcı Arayüzü.

✨Ürün nasıl kullanılır?

Ürünü yerel bir ortamda oluşturmak için Git gibi birkaç temel araca ve iyi bir NodeJS sürümüne (16.x veya üstü) ihtiyacımız var.

👉 1. Adım – Kaynakları klonlayın

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

👉 2. Adım – Bağımlılıkları yükleyin

$ npm i
// OR
$ yarn

👉 3. Adım – Firebase kimlik bilgilerini yapılandırın



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. Adım – Uygulamayı başlatın

$ npm run start 
// OR
$ yarn start

Kurulum tamamlandıktan sonra, tarayıcıda uygulamaya erişebilmeli, yeni kullanıcıları kaydedebilmeli veya Google sosyal girişini kullanarak kimlik doğrulaması yapabilmeliyiz.

React Horizon Firebase - Giriş Sayfası

React Horizon Firebase – NFT Sayfası

React Horizon Firebase - NFT Sayfası

✨ Firebase Tanıtımı

Bu bölüm, bu harika hizmetin birkaç önemli noktasını sunar ve ayrıca basit bir Firebase uygulaması oluşturma adımlarını sunar.

Firebase, Google tarafından mobil ve web uygulamaları oluşturmak için geliştirilmiş bir platformdur. Bu bir Hizmet Olarak Arka Uçtur (BaaS). Geliştiricilere kaliteli uygulamalar geliştirmelerine ve kullanıcı tabanlarını büyütmelerine yardımcı olacak çeşitli araçlar ve hizmetler sağlar.

Firebase, geliştiricilerin harika kullanıcı deneyimleri oluşturmaya odaklanmasını sağlar. Sunucuları yönetmeniz veya API yazmanız gerekmez. Firebase sizin sunucunuz, API'niz ve veri deponuzdur; hepsi o kadar genel yazılmıştır ki, gereksinimlerinizin çoğuna uyacak şekilde değiştirebilirsiniz.

✨Neden Firebase'i kullanıyorsunuz?

👉 Realtime Database: Firebase, WebSockets aracılığıyla güncellenir güncellenmez size yeni veriler gönderir.
👉 Authentication: Firebase auth, Google, Facebook, Twitter ve GitHub için OAuth2'yi destekleyen yerleşik bir e-posta/parola doğrulama sistemine sahiptir.
👉 Static Files Hosting: Kolay bir statik Dosya Barındırma hizmetine sahiptir ve dosyalarınızı CDN üzerinden sunarak daha hızlı kullanılabilir hale getirir.
👉 Push Notifications: Yerel/anında iletme bildirimleri göndermenin basit ve güvenilir hale gelmesi için kullanıcı cihazlarının ve sunucularının bağlanmasına yardımcı olur.
👉 Analytics: Firebase, Google analytics ile entegrasyon için sorunsuz bir yol sağlar.
👉 Crash Reporting: Ayrıca, gerçek zamanlı izleme ve hataların düzeltilmesi için gerçek zamanlı kilitlenme raporlaması sağlar.
👉 Remote Configuration: Firebase, uzaktan yapılandırma yoluyla son kullanıcılar için anlık güncellemelerin yayınlanmasına izin verir.Test Lab: Hizmet, uygulamalarınızı Google tarafından sağlanan gerçek ve sanal cihazlarda test etmenize yardımcı olur.