Пользовательский интерфейс React Horizon — стартовый Firebase с открытым исходным кодом

Переиздано Платоном

Читают: 0

Привет кодерам!

В этой статье представлен полнофункциональный стартовый пакет с открытым исходным кодом, который использует пользовательский интерфейс React на базе Firebase для уровня аутентификации. Реагировать на Horizon Firebase можно загрузить с Github и на основе разрешающей лицензии (MIT) использовать в коммерческих проектах и деятельности по электронному обучению. Для новичков, реагировать — ведущая библиотека JS, используемая для кодирования интерактивных пользовательских интерфейсов и Firebase — это популярный серверный сервис, созданный Google. Thanks for reading!

Этот удивительный пользовательский интерфейс создан и предоставляется бесплатно компанией Простой, креативное веб-агентство, использующее Charka UI в качестве основной библиотеки пользовательского интерфейса.

✨ Особенности продукта

Кодовая база пользовательского интерфейса на основе пользовательского интерфейса Chakra
7 примеров страниц: панель инструментов, NFT Market, профиль пользователя
70+ компонентов — хорошо задокументированы здесь
Темный режим, поддержка RTL
Серверная часть Firebase
Социальный вход через Google
Классическая аутентификация (пользователь/пароль)

Версию шаблона (без аутентификации) можно найти и скачать с официальной страницы: Интерфейс горизонта.

✨ Как использовать продукт

Чтобы создать продукт в локальной среде, нам понадобится несколько основных инструментов, таких как Git, и достойная версия NodeJS (16.x или выше).

👉 Шаг 1 - Клонировать исходники

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

👉 Шаг 2 - Установить зависимости

$ npm i
// OR
$ yarn

👉 Шаг 3 – Настройте учетные данные 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'
    }
};

👉 Шаг 4 - Запустите приложение

$ npm run start 
// OR
$ yarn start

После завершения настройки мы сможем получить доступ к приложению в браузере, зарегистрировать новых пользователей или пройти аутентификацию с помощью социальной сети Google.

React Horizon Firebase — страница входа

React Horizon Firebase — Страница NFT

React Horizon Firebase — Страница NFT

✨ Введение в Firebase

В этом разделе представлены несколько ключевых моментов этого замечательного сервиса, а также представлены шаги по созданию простого приложения Firebase.

Firebase — это платформа, разработанная Google для создания мобильных и веб-приложений. Это Backend-as-a-Service (BaaS). Он предоставляет разработчикам различные инструменты и услуги, которые помогают им разрабатывать качественные приложения и расширять базу пользователей.

Firebase позволяет разработчикам сосредоточиться на создании фантастических пользовательских интерфейсов. Вам не нужно управлять серверами или писать API. Firebase — это ваш сервер, API и хранилище данных; все написано настолько общим образом, что вы можете изменить его, чтобы удовлетворить большинство ваших потребностей.

✨Зачем использовать Firebase

👉 Realtime Database: Firebase отправляет вам новые данные, как только они обновляются через WebSockets.
👉 Authentication: Firebase auth имеет встроенную систему аутентификации по электронной почте/паролю, которая поддерживает OAuth2 для Google, Facebook, Twitter и GitHub.
👉 Static Files Hosting: у него есть простая служба статического файлового хостинга, которая обслуживает ваши файлы через CDN, делая их доступными быстрее.
👉 Push Notifications: он помогает подключать пользовательские устройства и серверы, чтобы отправка нативных/push-уведомлений стала простой и надежной.
👉 Analytics: Firebase обеспечивает простой способ интеграции с Google Analytics.
👉 Crash Reporting: он также предоставляет отчеты о сбоях в режиме реального времени для мониторинга и исправления ошибок в реальном времени.
👉 Remote Configuration: Firebase позволяет публиковать мгновенные обновления для конечных пользователей посредством удаленной настройки. Тестовая лаборатория: служба помогает тестировать ваши приложения на реальных и виртуальных устройствах, предоставляемых Google.