Hallo codeurs!
Dit artikel presenteert een open-source full-stack starter die een React UI, mogelijk gemaakt door Firebase, gebruikt voor de authenticatielaag. Reageer Horizon Firebase kan worden gedownload van Github en op basis van de permissieve (MIT) licentie, gebruikt in commerciële projecten en eLearning-activiteiten. Voor nieuwkomers, Reageren is een toonaangevende JS-bibliotheek die wordt gebruikt om interactieve gebruikersinterfaces te coderen en Firebase is een populaire backend-service die is gemaakt door Google. Thanks for reading!
Deze geweldige gebruikersinterface is gemaakt en gratis beschikbaar gesteld door eenvoudig, een creatief webbureau dat Charka UI gebruikt als de belangrijkste UI-bibliotheek.
✨Productkenmerken
- UI-codebase mogelijk gemaakt door Chakra UI
- 7 voorbeeldpagina's: Dashboard, NFT Market, Gebruikersprofiel
- 70+ componenten - hier mooi gedocumenteerd
- Donkere modus, RTL-ondersteuning
- Firebase-backend
- Sociaal inloggen via Google
- Klassieke authenticatie (gebruiker/wachtwoord)
De sjabloonversie (zonder authenticatie) kan worden gevonden en gedownload van de officiële pagina: Horizon-gebruikersinterface.
✨ Hoe het product te gebruiken
Om het product in een lokale omgeving te bouwen, hebben we een paar basistools nodig, zoals Git en een degelijke NodeJS-versie (16.x of hoger).
Om het product in een lokale omgeving te bouwen, hebben we een paar basistools nodig, zoals Git en een degelijke NodeJS-versie (16.x of hoger).
👉 Stap 1 – Kloon de bronnen
$ git clone https://github.com/app-generator/react-horizon-ui-chakra-firebase.git
$ cd react-horizon-ui-chakra-firebase
👉 Stap 2 – Afhankelijkheden installeren
$ npm i
// OR
$ yarn
👉 Stap 3 – Configureer de Firebase-inloggegevens
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'
}
};
👉 Stap 4 – Start de app
$ npm run start
// OR
$ yarn start
Zodra de installatie is voltooid, moeten we toegang hebben tot de app in de browser, nieuwe gebruikers kunnen registreren of kunnen authenticeren met behulp van Google social login.
React Horizon Firebase – NFT-pagina
✨ Firebase-introductie
In dit gedeelte worden een paar hoofdpunten van deze geweldige service gepresenteerd en worden ook de stappen gepresenteerd om een eenvoudige Firebase-app te bouwen.
Firebase is een door Google ontwikkeld platform voor het maken van mobiele en webapplicaties. Het is een Backend-as-a-Service (BaaS). Het biedt ontwikkelaars verschillende tools en services om hen te helpen hoogwaardige apps te ontwikkelen en hun gebruikersbestand te laten groeien.
Firebase geeft ontwikkelaars de vrijheid om zich te concentreren op het creëren van fantastische gebruikerservaringen. U hoeft geen servers te beheren of API's te schrijven. Firebase is uw server, API en datastore; allemaal zo generiek geschreven dat u het kunt aanpassen aan de meeste van uw behoeften.
✨Waarom Firebase gebruiken
- 👉
Realtime Database: Firebase stuurt u nieuwe gegevens zodra deze zijn bijgewerkt via WebSockets. - 👉
Authentication: Firebase auth heeft een ingebouwd e-mail-/wachtwoordverificatiesysteem dat OAuth2 ondersteunt voor Google, Facebook, Twitter en GitHub. - 👉
Static Files Hosting: Het heeft een eenvoudige statische File Hosting-service die uw bestanden via CDN bedient, waardoor ze sneller beschikbaar zijn. - 👉
Push Notifications: Het helpt gebruikersapparaten en servers met elkaar te verbinden, zodat het verzenden van native/push-meldingen eenvoudig en betrouwbaar wordt. - 👉
Analytics: Firebase biedt een naadloze manier om te integreren met Google Analytics. - 👉
Crash Reporting: Het biedt ook realtime crashrapportage voor realtime monitoring en het oplossen van bugs. - 👉
Remote Configuration: Firebase maakt het publiceren van directe updates voor eindgebruikers mogelijk via configuratie op afstand.Test Lab: de service helpt bij het testen van uw applicaties op echte en virtuele apparaten die door Google worden geleverd.
✨Een Firebase-app configureren
Het eerste is om een Firebase-account aan te maken en toegang te krijgen tot de troosten. Zodra we zijn geverifieerd, moeten we een "Nieuw project" maken.
👉 Stap #2 – Voeg een naam toe aan het project
👉 Stap #3 – Schakel Google Analytics in / uit
👉 Stap #4 – Bevestig de aanmaak van het project
Nadat het project is aangemaakt, wordt u automatisch doorgestuurd naar het project.
👉 Stap #5 – Genereer een klant voor dit project
Selecteer een platform (Android / iOS / Web) waarvoor u een clienttoepassing voor dit project wilt maken.
Zodra we de naam voor de client-app hebben opgegeven, zouden we toegang moeten hebben tot de inloggegevens die in de Horizon Frontend worden gebruikt.
Thanks for reading!Ga voor meer bronnen naar:
