React Horizon UI - Pemula Firebase Sumber Terbuka

Diterbitkan Ulang Oleh Plato

Followers: 0

Halo coders!

Artikel ini menyajikan starter full-stack open-source yang menggunakan React UI yang diberdayakan oleh Firebase untuk lapisan otentikasi. Bereaksi Horizon Firebase dapat diunduh dari Github dan berdasarkan lisensi permisif (MIT), digunakan dalam proyek komersial dan aktivitas eLearning. Untuk pendatang baru, Bereaksi adalah perpustakaan JS terkemuka yang digunakan untuk mengkodekan antarmuka pengguna interaktif dan Firebase adalah layanan backend populer yang dibuat oleh Google. Thanks for reading!

UI luar biasa ini dibuat dan disediakan secara gratis oleh sederhana, agensi web kreatif yang menggunakan UI Charka sebagai pustaka UI utama.

Fitur Produk

Basis kode UI didukung oleh Chakra UI
7 halaman contoh: Dasbor, Pasar NFT, Profil Pengguna
70+ Komponen – didokumentasikan dengan baik di sini
Mode Gelap, Dukungan RTL
Backend Firebase
Login Sosial melalui Google
Otentikasi Klasik (pengguna/kata sandi)

Versi template (tanpa otentikasi) dapat ditemukan dan diunduh dari halaman resmi: UI Cakrawala.

Cara menggunakan produk

Untuk membangun produk di lingkungan lokal, kita memerlukan beberapa alat dasar seperti Git dan versi NodeJS yang layak (16.x atau lebih tinggi).

👉 Langkah 1 - Kloning sumbernya

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

👉 Langkah 2 – Instal dependensi

$ npm i
// OR
$ yarn

👉 Langkah 3 – Konfigurasikan kredensial 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'
    }
};

👉 Langkah 4 – Mulai aplikasi

$ npm run start 
// OR
$ yarn start

Setelah penyiapan selesai, kita harus dapat mengakses aplikasi di browser, mendaftarkan pengguna baru, atau mengautentikasi menggunakan login sosial Google.

React Horizon Firebase - Halaman Masuk

React Horizon Firebase – Halaman NFT

React Horizon Firebase - Halaman NFT

Pengenalan Firebase

Bagian ini menyajikan beberapa poin penting dari layanan yang luar biasa ini dan juga menyajikan langkah-langkah untuk membangun aplikasi Firebase sederhana.

Firebase adalah platform yang dikembangkan oleh Google untuk membuat aplikasi seluler dan web. Ini adalah Backend-as-a-Service (BaaS). Ini memberi pengembang berbagai alat dan layanan untuk membantu mereka mengembangkan aplikasi berkualitas dan menumbuhkan basis pengguna mereka.

Firebase membebaskan developer untuk fokus pada pembuatan pengalaman pengguna yang fantastis. Anda tidak perlu mengelola server atau menulis API. Firebase adalah server, API, dan penyimpanan data Anda; semua ditulis secara umum sehingga Anda dapat memodifikasinya agar sesuai dengan sebagian besar kebutuhan Anda.

Mengapa menggunakan Firebase

👉 Realtime Database: Firebase mengirimi Anda data baru segera setelah diperbarui melalui WebSockets.
👉 Authentication: Firebase auth memiliki sistem autentikasi email/sandi bawaan yang mendukung OAuth2 untuk Google, Facebook, Twitter, dan GitHub.
👉 Static Files Hosting: Ini memiliki layanan File Hosting statis mudah yang melayani file Anda melalui CDN, membuatnya tersedia lebih cepat.
👉 Push Notifications: Ini membantu menghubungkan perangkat pengguna dan server sehingga pengiriman pemberitahuan asli/push menjadi sederhana dan dapat diandalkan.
👉 Analytics: Firebase menyediakan cara yang mulus untuk berintegrasi dengan Google analytics.
👉 Crash Reporting: Ini juga menyediakan pelaporan kerusakan waktu-nyata untuk pemantauan waktu-nyata dan perbaikan bug.
👉 Remote Configuration: Firebase memungkinkan penerbitan pembaruan instan untuk pengguna akhir melalui konfigurasi jarak jauh. Test Lab: Layanan ini membantu menguji aplikasi Anda pada perangkat nyata dan virtual yang disediakan oleh Google.