Salut les codeurs !
Cet article présente un démarreur à pile complète open source qui utilise une interface utilisateur React optimisée par Firebase pour la couche d'authentification. Réagissez Horizon Firebase peut être téléchargé à partir de Github et basé sur la licence permissive (MIT), utilisé dans des projets commerciaux et des activités d'apprentissage en ligne. Pour les nouveaux arrivants, Réagir est une bibliothèque JS de premier plan utilisée pour coder des interfaces utilisateur interactives et Firebase est un service backend populaire créé par Google. Thanks for reading!
Cette interface utilisateur étonnante est conçue et fournie gratuitement par Simple, une agence Web créative qui utilise Charka UI comme bibliothèque d'interface utilisateur principale.
✨ Caractéristiques du produit
- Base de code de l'interface utilisateur alimentée par Chakra UI
- 7 exemples de pages : tableau de bord, marché NFT, profil utilisateur
- Plus de 70 composants - bien documentés ici
- Mode sombre, prise en charge RTL
- Backend Firebase
- Connexion sociale via Google
- Authentification classique (utilisateur/mot de passe)
La version du modèle (sans authentification) peut être trouvée et téléchargée depuis la page officielle : Interface utilisateur Horizon.
✨ Comment utiliser le produit
Pour construire le produit dans un environnement local, nous avons besoin de quelques outils de base comme Git et une version décente de NodeJS (16.x ou supérieure).
Pour construire le produit dans un environnement local, nous avons besoin de quelques outils de base comme Git et une version décente de NodeJS (16.x ou supérieure).
👉 Étape 1 – Cloner les sources
$ git clone https://github.com/app-generator/react-horizon-ui-chakra-firebase.git
$ cd react-horizon-ui-chakra-firebase
👉 Étape 2 – Installer les dépendances
$ npm i
// OR
$ yarn
👉 Étape 3 – Configurer les identifiants 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'
}
};
👉 Étape 4 – Démarrer l'application
$ npm run start
// OR
$ yarn start
Une fois la configuration terminée, nous devrions pouvoir accéder à l'application dans le navigateur, enregistrer de nouveaux utilisateurs ou s'authentifier à l'aide de la connexion sociale Google.
React Horizon Firebase – Page NFT
✨ Présentation de la base de feu
Cette section présente quelques points clés de ce service incroyable et présente également les étapes pour créer une application Firebase simple.
Firebase est une plateforme développée par Google pour créer des applications mobiles et web. Il s'agit d'un Backend-as-a-Service (BaaS). Il fournit aux développeurs divers outils et services pour les aider à développer des applications de qualité et à développer leur base d'utilisateurs.
Firebase permet aux développeurs de se concentrer sur la création d'expériences utilisateur fantastiques. Vous n'avez pas besoin de gérer des serveurs ou d'écrire des API. Firebase est votre serveur, votre API et votre magasin de données ; tous écrits de manière si générique que vous pouvez le modifier pour répondre à la plupart de vos besoins.
✨Pourquoi utiliser Firebase
- 👉
Realtime Database: Firebase vous envoie de nouvelles données dès qu'elles sont mises à jour via WebSockets. - 👉
Authentication: Firebase auth dispose d'un système d'authentification par e-mail/mot de passe intégré qui prend en charge OAuth2 pour Google, Facebook, Twitter et GitHub. - 👉
Static Files Hosting: Il dispose d'un service d'hébergement de fichiers statique simple qui sert vos fichiers via CDN, les rendant disponibles plus rapidement. - 👉
Push Notifications: Il aide à connecter les appareils des utilisateurs et les serveurs afin que l'envoi de notifications natives/push devienne simple et fiable. - 👉
Analytics: Firebase offre un moyen transparent de s'intégrer à Google Analytics. - 👉
Crash Reporting: Il fournit également des rapports de plantage en temps réel pour la surveillance en temps réel et la correction des bogues. - 👉
Remote Configuration: Firebase permet de publier des mises à jour instantanées pour les utilisateurs finaux via une configuration à distance.Test Lab : Le service permet de tester vos applications sur des appareils réels et virtuels fournis par Google.
✨Comment configurer une application Firebase
La première chose est de créer un compte Firebase et d'accéder au Console. Une fois authentifiés, nous devons créer un "Nouveau projet".
👉 Étape #2 – Ajouter un nom au projet
👉 Étape #3 – Activer / désactiver Google Analytics
👉 Étape #4 – Confirmer la création du projet
Une fois le projet créé, vous serez automatiquement redirigé vers le projet.
👉 Étape #5 – Générer un client pour ce projet
Sélectionnez une plate-forme (Android / iOS / Web) pour laquelle vous souhaitez créer une application cliente pour ce projet.
Une fois que nous avons fourni le nom de l'application cliente, nous devrions avoir accès aux informations d'identification utilisées dans Horizon Frontend.
Thanks for reading!Pour plus de ressources, veuillez accéder à :
