React Horizon UI - منبع باز Firebase Starter

بازنشر افلاطون

دنبال: 0

سلام کدگذاران

این مقاله یک شروع کننده فول استک منبع باز ارائه می دهد که از یک رابط کاربری React با پشتیبانی از Firebase برای لایه احراز هویت استفاده می کند. React Horizon Firebase را می توان از Github دانلود کرد و بر اساس مجوز مجاز (MIT) در پروژه های تجاری و فعالیت های آموزش الکترونیکی استفاده کرد. برای تازه واردان، واکنش نشان می دهند یک کتابخانه JS پیشرو است که برای کدنویسی رابط های کاربری تعاملی و آتش نشانی یک سرویس پشتیبان محبوب است که توسط گوگل ساخته شده است. Thanks for reading!

این رابط کاربری شگفت‌انگیز توسط ساخته شده و به صورت رایگان ارائه شده است ساده، یک آژانس وب خلاق که از Charka UI به عنوان کتابخانه اصلی UI استفاده می کند.

✨ ویژگی های محصول

پایگاه کد UI با رابط کاربری چاکرا طراحی شده است
7 صفحه نمونه: داشبورد، بازار NFT، نمایه کاربر
70+ مؤلفه - به خوبی در اینجا مستند شده است
حالت تاریک، پشتیبانی از RTL
Firebase Backend
ورود به شبکه اجتماعی از طریق گوگل
احراز هویت کلاسیک (کاربر/رمز عبور)

نسخه قالب (بدون احراز هویت) را می توان از صفحه رسمی پیدا و دانلود کرد: رابط کاربری Horizon.

✨ نحوه استفاده از محصول

برای ساخت محصول در یک محیط محلی، به چند ابزار اساسی مانند 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 پلتفرمی است که توسط گوگل برای ایجاد اپلیکیشن های موبایل و وب توسعه یافته است. این یک 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: به اتصال دستگاه های کاربر و سرورها کمک می کند تا ارسال اعلان های بومی/فشار ساده و قابل اعتماد شود.
؟؟؟؟ Analytics: Firebase راهی بی‌نظیر برای ادغام با Google Analytics ارائه می‌کند.
؟؟؟؟ Crash Reporting: همچنین گزارش خرابی در زمان واقعی را برای نظارت و رفع اشکالات در زمان واقعی ارائه می دهد.
؟؟؟؟ Remote Configuration: Firebase امکان انتشار به‌روزرسانی‌های فوری را برای کاربران نهایی از طریق پیکربندی از راه دور فراهم می‌کند. آزمایشگاه تست: این سرویس به آزمایش برنامه‌های شما در دستگاه‌های واقعی و مجازی ارائه‌شده توسط Google کمک می‌کند.