React Horizon UI – Open Source Firebase Starter

Opublikowane ponownie przez Plato

Obserwuje: 0

Witajcie koderzy!

W tym artykule przedstawiono pełnowymiarowy starter typu open source, który używa interfejsu React obsługiwanego przez Firebase dla warstwy uwierzytelniania. Baza ogniowa React Horizon można pobrać z Github i w oparciu o licencję permisywną (MIT), wykorzystywaną w projektach komercyjnych i działaniach eLearningowych. Dla nowicjuszy, React to wiodąca biblioteka JS używana do kodowania interaktywnych interfejsów użytkownika i Ognisko to popularna usługa backendu wypiekana przez Google. Thanks for reading!

Ten niesamowity interfejs użytkownika został stworzony i udostępniony za darmo przez Prosty, kreatywna agencja internetowa, która używa interfejsu Charka jako głównej biblioteki interfejsu.

✨ Cechy produktu

Baza kodu interfejsu użytkownika obsługiwana przez interfejs użytkownika Chakra
7 przykładowych stron: Dashboard, NFT Market, User Profile
70+ komponentów – ładnie udokumentowane tutaj
Tryb ciemny, obsługa RTL
Zaplecze Firebase
Logowanie społecznościowe przez Google
Uwierzytelnianie klasyczne (użytkownik/hasło)

Wersję szablonu (bez uwierzytelnienia) można znaleźć i pobrać z oficjalnej strony: Interfejs użytkownika horyzontu.

✨Jak korzystać z produktu

Aby zbudować produkt w środowisku lokalnym, potrzebujemy kilku podstawowych narzędzi, takich jak Git i przyzwoitej wersji NodeJS (16.x lub nowszy).

???? Krok 1 – Sklonuj źródła

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

???? Krok 2 – Zainstaluj zależności

$ npm i
// OR
$ yarn

???? Krok 3 – Skonfiguruj poświadczenia 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'
    }
};

???? Krok 4 – Uruchom aplikację

$ npm run start 
// OR
$ yarn start

Po zakończeniu konfiguracji powinniśmy być w stanie uzyskać dostęp do aplikacji w przeglądarce, zarejestrować nowych użytkowników lub uwierzytelnić się za pomocą logowania społecznościowego Google.

React Horizon Firebase – strona logowania

React Horizon Firebase – strona NFT

React Horizon Firebase – strona NFT

✨ Wprowadzenie do Firebase

W tej sekcji przedstawiono kilka kluczowych punktów tej niesamowitej usługi, a także przedstawiono kroki tworzenia prostej aplikacji Firebase.

Firebase to platforma opracowana przez Google do tworzenia aplikacji mobilnych i internetowych. Jest to Backend jako usługa (BaaS). Zapewnia programistom różne narzędzia i usługi, które pomagają im tworzyć wysokiej jakości aplikacje i powiększać bazę użytkowników.

Firebase pozwala programistom skupić się na tworzeniu fantastycznych doświadczeń użytkowników. Nie musisz zarządzać serwerami ani pisać interfejsów API. Firebase to Twój serwer, interfejs API i magazyn danych; wszystko napisane tak ogólnie, że możesz je modyfikować, aby dopasować je do większości swoich potrzeb.

✨Dlaczego używać Firebase

???? Realtime Database: Firebase wysyła nowe dane, gdy tylko zostaną zaktualizowane przez WebSockets.
???? Authentication: Uwierzytelnianie Firebase ma wbudowany system uwierzytelniania poczty e-mail/hasła, który obsługuje OAuth2 dla Google, Facebooka, Twittera i GitHub.
???? Static Files Hosting: Posiada łatwą, statyczną usługę hostingu plików, która obsługuje Twoje pliki przez CDN, dzięki czemu są one szybciej dostępne.
???? Push Notifications: Pomaga łączyć urządzenia i serwery użytkowników, dzięki czemu wysyłanie powiadomień natywnych/push staje się proste i niezawodne.
???? Analytics: Firebase zapewnia bezproblemową integrację z Google Analytics.
???? Crash Reporting: Zapewnia również raportowanie w czasie rzeczywistym o awariach w celu monitorowania w czasie rzeczywistym i naprawiania błędów.
???? Remote Configuration: Firebase umożliwia publikowanie natychmiastowych aktualizacji dla użytkowników końcowych poprzez zdalną konfigurację.Test Lab: Usługa pomaga testować Twoje aplikacje na rzeczywistych i wirtualnych urządzeniach dostarczonych przez Google.