فایربیس Firebase چیست؟ مزایا و نحوه استفاده از آن در React Native

در دنیای پرشتاب توسعه نرم‌افزار، پلتفرم‌ها و ابزارهای متعددی برای تسهیل فرآیند برنامه‌نویسی و افزایش سرعت توسعه اپلیکیشن‌ها به وجود آمده‌اند. یکی از پیشرفته‌ترین این ابزارها، فایربیس (Firebase) است؛ پلتفرمی از سوی گوگل که به توسعه‌دهندگان این امکان را می‌دهد تا اپلیکیشن‌های موبایل و وب را به‌طور سریع و کارآمد ایجاد، پیاده‌سازی و مدیریت کنند. این پلتفرم مجموعه‌ای از سرویس‌ها مانند پایگاه داده بلادرنگ، احراز هویت، ذخیره‌سازی فایل، توابع ابری و موارد دیگر را در اختیار توسعه‌دهندگان قرار می‌دهد. هدف ما در این مقاله این است که به این پرسش پاسخ دهیم: “فایربیس چیست؟” و با تحلیل مزایا و چالش‌های آن، نحوه استفاده از فایربیس را بررسی کنیم.

در کنار این موضوعات، در این مقاله نگاهی به React Native Firebase خواهیم انداخت؛ کتابخانه‌ای که به توسعه‌دهندگان React Native این امکان را می‌دهد تا به‌راحتی از سرویس‌های فایربیس در اپلیکیشن‌های خود استفاده کنند. اگر شما هم علاقه‌مند به یادگیری نحوه استفاده از React Native Firebase هستید و می‌خواهید قدم به قدم با آن کار کنید، در ادامه مقاله با ما همراه باشید تا با یک مثال عملی به بررسی این ابزار بپردازیم.

مقاله پیشنهادی: همه چیز درباره React native router flux

فایربیس (Firebase) چیست؟

تاریخچه فایربیس

فایربیس در سال ۲۰۱۱ توسط اندرو لی و جیمز تاملین به‌عنوان یک استارتاپ مستقل راه‌اندازی شد. ایده اولیه این پلتفرم، ارائه یک پایگاه داده بلادرنگ برای برنامه‌های وب و موبایل بود تا توسعه‌دهندگان بتوانند داده‌ها را به‌صورت زنده و هم‌زمان بین کاربران همگام‌سازی کنند. این نوآوری به سرعت مورد توجه جامعه توسعه‌دهندگان قرار گرفت و فایربیس را به یک ابزار محبوب در صنعت نرم‌افزار تبدیل کرد.

موفقیت چشمگیر این فناوری باعث شد که در سال ۲۰۱۴، گوگل این شرکت را خریداری کند و آن را به یکی از ستون‌های اصلی خود در حوزه توسعه نرم‌افزار تبدیل نماید. پس از این تصاحب، فایربیس از یک سرویس پایگاه داده فراتر رفت و به یک پلتفرم جامع با مجموعه‌ای از ابزارهای متنوع برای توسعه، مدیریت و تحلیل برنامه‌های کاربردی تبدیل شد. امروزه، فایربیس به‌عنوان یکی از راهکارهای پیشرو در صنعت توسعه اپلیکیشن شناخته می‌شود و توسط هزاران شرکت و توسعه‌دهنده در سراسر جهان مورد استفاده قرار می‌گیرد.

آموزش پیشنهادی

جامع ترین آموزش برنامه نویسی اندروید با کاتلین و جت پک کامپوز

• آموزش کامل نصب و راه اندازی نرم افزار اندروید استودیو
• بررسی بازار کار فریلنسری و آماده سازی برای مصاحبه استخدامی
• آموزش برنامه نویسی اندروید با کمک Chat GPT و گوگل جمنای
• آموزش جامع طراحی رابط کاربری با جت پک کامپوز
• آموزش فریمورک Ktor برای API نویسی با کاتلین

مشاهده دوره

معماری و امکانات فایربیس

معماری فایربیس بر پایه زیرساخت‌های قدرتمند سرویس‌های ابری گوگل بنا شده است و به توسعه‌دهندگان این امکان را می‌دهد که بدون نیاز به مدیریت پیچیدگی‌های سرور، برنامه‌های خود را توسعه دهند و مقیاس‌پذیر کنند. این پلتفرم از مجموعه‌ای از سرویس‌های مستقل اما کاملاً یکپارچه تشکیل شده است که هر کدام نقش کلیدی در توسعه و اجرای برنامه‌های کاربردی دارند.

اجزای اصلی معماری فایربیس و کاربرد آنها

در این بخش به بررسی اجزای معماری فایربیس می‌پردازیم. این ابزارها فایربیس را به یک پلتفرم جامع و کارآمد برای توسعه‌دهندگان تبدیل می‌کند که می‌توانند بر تجربه کاربری و ویژگی‌های جدید تمرکز کنند.

• پایگاه داده ابری:
  • Realtime Database: پایگاه داده بی‌درنگ برای اپلیکیشن‌هایی با به‌روزرسانی لحظه‌ای (مثل چت آنلاین).
  • Cloud Firestore: پایگاه داده مقیاس‌پذیر برای داده‌های ساختاریافته و پرس‌وجوهای پیچیده.
• احراز هویت کاربران: سیستم احراز هویت با روش‌های مختلف مانند ایمیل، حساب‌های گوگل، فیس‌بوک و شماره تلفن برای امنیت بالا و سهولت ورود.
• میزبانی وب: سرویس میزبانی سریع و امن با پشتیبانی از HTTPS، SSL رایگان و CDN برای افزایش سرعت بارگذاری.
• ذخیره‌سازی فایل‌ها: سرویس ذخیره‌سازی ابری برای مدیریت فایل‌های حجیم مثل تصاویر و ویدیوها، مناسب برای شبکه‌های اجتماعی و پلتفرم‌های آموزشی.
• ارسال نوتیفیکیشن و پیام‌رسانی: امکان ارسال نوتیفیکیشن‌های Push و پیام‌های درون‌برنامه‌ای برای تعامل بهتر با کاربران.
• پردازش ابری و توابع سرورلس: قابلیت اجرای کد بدون نیاز به سرور اختصاصی با استفاده از توابع سرورلس.
• آنالیز و بررسی عملکرد: ابزار تحلیل داده برای ارزیابی رفتار کاربران و بهبود استراتژی‌های توسعه اپلیکیشن.

مزایای فایربیس

فایربیس به عنوان یکی از محبوب‌ترین پلتفرم‌های توسعه نرم‌افزار، ابزارهای قدرتمندی را در اختیار برنامه‌نویسان قرار می‌دهد که فرآیند ساخت و مدیریت اپلیکیشن‌ها را تسهیل می‌کند. یکی از مهم‌ترین مزایای این پلتفرم، توسعه سریع و آسان است. فایربیس با ارائه سرویس‌های از پیش آماده مانند پایگاه داده بلادرنگ، احراز هویت و میزبانی وب، به برنامه‌نویسان کمک می‌کند تا بدون نیاز به پیکربندی‌های پیچیده، پروژه‌های خود را در کمترین زمان ممکن راه‌اندازی کنند. این ویژگی به‌ویژه برای استارتاپ‌ها و تیم‌های کوچک که به دنبال عرضه سریع محصول هستند، بسیار کاربردی است.

علاوه بر سرعت توسعه، فایربیس هزینه‌های زیرساختی را نیز کاهش می‌دهد. عدم نیاز به مدیریت سرورها و پایگاه داده‌های پیچیده باعث می‌شود که تیم‌های توسعه بتوانند بودجه و منابع خود را به جای مسائل فنی، بر روی بهبود تجربه کاربری متمرکز کنند. این پلتفرم همچنین مقیاس‌پذیری بالایی دارد، چرا که از زیرساخت‌های ابری گوگل بهره می‌برد و به راحتی می‌تواند با افزایش تعداد کاربران و حجم داده‌ها، بدون افت کیفیت یا نیاز به تغییرات اساسی، گسترش یابد.

در بحث امنیت، فایربیس از سیستم احراز هویت پیشرفته و قوانین امنیتی Firestore برای کنترل دقیق دسترسی به داده‌ها استفاده می‌کند. همچنین، بهره‌گیری از پروتکل‌های امنیتی قدرتمند گوگل، موجب حفاظت از اطلاعات کاربران در برابر تهدیدات مختلف می‌شود. این سطح از امنیت به توسعه‌دهندگان اطمینان می‌دهد که داده‌های کاربرانشان در محیطی ایمن ذخیره و مدیریت می‌شود.

یکی دیگر از مزایای مهم فایربیس، مستندات جامع و پشتیبانی گسترده آن است. این پلتفرم دارای راهنماهای کامل، انجمن‌های تخصصی و یک جامعه کاربری فعال است که به توسعه‌دهندگان کمک می‌کند تا مشکلات خود را به سرعت حل کرده و بهترین روش‌های پیاده‌سازی را بیابند.

در نهایت، فایربیس با حذف پیچیدگی‌های مرتبط با مدیریت سرور و ایجاد API، به توسعه‌دهندگان این امکان را می‌دهد که به جای درگیری با مسائل زیرساختی، تمرکز خود را بر روی منطق برنامه‌نویسی و بهبود عملکرد اپلیکیشن معطوف کنند. این ویژگی، باعث افزایش بهره‌وری و کاهش زمان توسعه می‌شود و در نتیجه، فایربیس را به گزینه‌ای ایده‌آل برای توسعه‌دهندگان در تمامی سطوح تبدیل می‌کند.

چالش‌ها و نقاط ضعف استفاده از Firebase

با وجود مزایای متعدد، فایربیس محدودیت‌هایی دارد که باید در نظر گرفته شوند. یکی از چالش‌های اصلی، وابستگی به گوگل است؛ هرگونه تغییر در سیاست‌ها یا اختلال در سرویس‌ها می‌تواند بر عملکرد برنامه‌ها تأثیر بگذارد. از نظر فنی، سرویس‌هایی مانند Realtime Database و Cloud Firestore دارای محدودیت‌هایی در مدیریت داده‌های حجیم و انجام پرس‌وجوهای پیچیده هستند.

هزینه‌های فایربیس نیز می‌تواند چالش‌برانگیز باشد. اگرچه پلن رایگان دارد، اما با افزایش استفاده از خدمات، هزینه‌ها به‌طور غیرمنتظره‌ای بالا می‌رود که برای استارتاپ‌ها مشکل‌ساز است. علاوه بر این، یادگیری و پیکربندی صحیح فایربیس نیازمند تجربه است و توسعه‌دهندگان برای استفاده از قابلیت‌های پیشرفته آن باید زمان کافی برای آموزش اختصاص دهند.

نحوه نصب و شروع به کار با React Native Firebase

برای اینکه با نحوه کار React Native Firebase آشنا شویم میخواهیم به ساخت یک نرم افزار ساده بپردازیم و ببینیم چگونه میتوان از React Native Firebase در آن استفاده کرد. در ابتدا و بعد از نصب ری اکت باید به نصب React Native Firebase بپردازیم برای این کار میتوانیم از NPM یا روش های دیگر استفاده کنیم.

yarn add firebase



# or



npm install firebase --save

بعد از نصب React Native Firebase حال باید دایرکتوری های مورد نظر خود را بسازیم. برای اینکار در مسیر اصلی پروژه یک دایرکتوری به نام src میسازیم و در درون آن سه پوشه screen و components و services را میسازیم. در درون فولدر اسکرین در حقیقت صفحه ای که قرار است برای کاربر به نمایش در بیاید و نمایش داده شود وجود دارد. در فولدر بعدی که کامپوننت است به نشان دادن داده ها از API می پردازیم و همچنین در فولدر services به فایل های شبکه و نحوه اتصال برنامه به سرور و دیتا سنتر میپردازیم. بعد از اینکه این مراحل را انجام دادیم صفحات مورد نیاز خود را در مسیر src  >>  screens میسازیم. این فولدر ها شامل Home.js و AddItem.js و ListItem.js می شود. Home.js در حقیقت یک کلاس خالص ری اکت نیتیو است و به شکل زیر نوشته می شود.

// Home.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class Home extends Component {
  render() {
    return (
      <View>
        <Text>Home Screen</Text>
      </View>
    )
  }
}

به همین روش برای دو screen دیگر نیز کد ها را می نویسیم.

// AddItem.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class AddItem extends Component {
  render() {
    return (
      <View>
        <Text>Add Item</Text>
      </View>
    )
  }
}

// ListItem.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class ListItem extends Component {
  render() {
    return (
      <View>
        <Text>List Item</Text>
      </View>
    )
  }
}

حال و پس از ساخت screen های مورد نظر خود باید از React Native Navigation استفاده کنیم تا بتوانیم به سادگی بین screen ها جا به جا شویم. ابتدا به شکل زیر ری اکت نیتیو نویگیشن را نصب می کنیم

yarn add react-navigation # or npm install react-navigation --save

  حال از فایل App.js و از StackNavigator برای جابه جایی بین صفحات استفاده می کنیم.

// App.js import React, { Component } from 'react';import {  Platform,  StyleSheet,  Text,  View} from 'react-native';import { StackNavigator } from 'react-navigation';import Home from './src/screens/Home';import AddItem from './src/screens/AddItem';import ListItem from './src/screens/ListItem';import { YellowBox } from 'react-native'; YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']); const AppNavigator = StackNavigator({  HomeScreen: { screen: Home },  AddItemScreen: { screen: AddItem },  ListItemScreen: { screen: ListItem }}); export default class App extends Component {  render() {    return (      <AppNavigator />    );  }}

بعد از اینکار ما یک صفحه خانگی به شکل زیر خواهیم داشت که وظیفه ترانزیشن بین صفحات آن بر عهده StackNavigator function است. بعد از انجام این مرحله نیاز است که از طریق سایت  https://firebase.google.com یک پروژه جدید ایجاد کنیم. حال نیاز است که config پایگاه داده مورد نیاز را به صورت یک شی از درون قسمت وب اپ برداریم. حال نیاز است که اپلیکیشن خود را به fire base متصل کنیم. برای اینکار در فولدر src یک فولدر config میسازیم و در درون آن فایل db.js را ساخته و کد زیر را در آن وارد می کنیم.

// db.js import Firebase from 'firebase'; let config = {    apiKey: "",    authDomain: "",    databaseURL: "",    projectId: "",    storageBucket: "",    messagingSenderId: ""  };let app = Firebase.initializeApp(config);export const db = app.database();

  حال شما configuration values را دارید. الان نیاز دارید تا تمام کانفیگ را از اپ فایر بیس کپی کنید.

ساخت فرم برای اضافه کردن داده

بعد از انجام این ماحل نوبت به مرحله بعدی یعنی ساخت فرم برای اضافه کردن داده را انجام میدهیم. کد زیر را در AddItem.js مینویسیم.

// AddItem.js import React, { Component } from 'react';import {  View,  Text,  StyleSheet,  TextInput,  TouchableHighlight} from 'react-native'; export default class AddItem extends Component {  constructor(props) {      super(props);      this.state = {        name: '',        error: false      }      this.handleChange = this.handleChange.bind(this);      this.handleSubmit = this.handleSubmit.bind(this);    }    handleChange(e) {      this.setState({        name: e.nativeEvent.text      });    }    handleSubmit() {      console.log(this.state.name)    }  render() {    return (      <View style={styles.main}>        <Text style={styles.title}>Add Item</Text>        <TextInput              style={styles.itemInput}              onChange={this.handleChange}            />        <TouchableHighlight                style = {styles.button}                underlayColor= "white"                onPress = {this.handleSubmit}              >              <Text                  style={styles.buttonText}>                  Add              </Text>            </TouchableHighlight>      </View>    )  }} const styles = StyleSheet.create({  main: {    flex: 1,    padding: 30,    flexDirection: 'column',    justifyContent: 'center',    backgroundColor: '#2a8ab7'  },  title: {    marginBottom: 20,    fontSize: 25,    textAlign: 'center'  },  itemInput: {    height: 50,    padding: 4,    marginRight: 5,    fontSize: 23,    borderWidth: 1,    borderColor: 'white',    borderRadius: 8,    color: 'white'  },  buttonText: {    fontSize: 18,    color: '#111',    alignSelf: 'center'  },  button: {    height: 45,    flexDirection: 'row',    backgroundColor:'white',    borderColor: 'white',    borderWidth: 1,    borderRadius: 8,    marginBottom: 10,    marginTop: 10,    alignSelf: 'stretch',    justifyContent: 'center'  }});

بعد از نوشتن کد زیر باید تصویری مطابق شکل زیر را مشاهده کنید.

اضافه کردن داده به پوشه service

حال باید دیتا های خود را درپوشه services اضافه کنیم تا این کار را در فایلی که به نام ItemService.js ساخته ایم انجام میدهیم.

// ItemService.js import { db } from '../config/db'; export const addItem =  (item) => {    db.ref('/items').push({        name: item    });}

  حال نیاز است که این فایل سرویس ها را در درون AddItem.js قرار دهیم.

// AddItem.js import React, { Component } from 'react';import {  View,  Text,  StyleSheet,  TextInput,  TouchableHighlight,  AlertIOS} from 'react-native';import { addItem } from '../services/ItemService'; export default class AddItem extends Component {  constructor(props) {      super(props);      this.state = {        name: ''      }      this.handleChange = this.handleChange.bind(this);      this.handleSubmit = this.handleSubmit.bind(this);    }    handleChange(e) {      this.setState({        name: e.nativeEvent.text      });    }    handleSubmit() {      addItem(this.state.name);      AlertIOS.alert(        'Item saved successfully'       );    }  render() {    return (      <View style={styles.main}>        <Text style={styles.title}>Add Item</Text>        <TextInput              style={styles.itemInput}              onChange={this.handleChange}            />        <TouchableHighlight                style = {styles.button}                underlayColor= "white"                onPress = {this.handleSubmit}              >              <Text                  style={styles.buttonText}>                  Add              </Text>            </TouchableHighlight>      </View>    )  }} const styles = StyleSheet.create({  main: {    flex: 1,    padding: 30,    flexDirection: 'column',    justifyContent: 'center',    backgroundColor: '#2a8ab7'  },  title: {    marginBottom: 20,    fontSize: 25,    textAlign: 'center'  },  itemInput: {    height: 50,    padding: 4,    marginRight: 5,    fontSize: 23,    borderWidth: 1,    borderColor: 'white',    borderRadius: 8,    color: 'white'  },  buttonText: {    fontSize: 18,    color: '#111',    alignSelf: 'center'  },  button: {    height: 45,    flexDirection: 'row',    backgroundColor:'white',    borderColor: 'white',    borderWidth: 1,    borderRadius: 8,    marginBottom: 10,    marginTop: 10,    alignSelf: 'stretch',    justifyContent: 'center'  }});

بعد از اینکه فانکشن addItem را در درون برنامه قرار دادیم و متغیر های تکست باکس خود را به آن انتقال دادیم یک مولفه AlertIOS را به آن اضافه میکنیم تا به ما پیامی مبنی بر ذخیره شدن داده ها نمایش دهد. شما همچنین میتوانید دیتا ذخیره شده در fire base را نیز مشاهده کنید.

نمایش آیتم ها

کد زیر را در درون فایل ListItem.js مینویسیم.

// ListItem.js import React, { Component } from 'react';import { View, Text, StyleSheet} from 'react-native';import ItemComponent from '../components/ItemComponent'; import { db } from '../config/db'; let itemsRef = db.ref('/items'); const styles = StyleSheet.create({    container: {      flex: 1,      justifyContent: 'center',      backgroundColor: '#B6A6BB',    }  }) export default class ListItem extends Component {     state = {        items: []    }     componentDidMount() {        itemsRef.on('value', (snapshot) => {            let data = snapshot.val();            let items = Object.values(data);            this.setState({items});         });    }        render() {        return (            <View style={styles.container}>                {                    this.state.items.length > 0                    ? <ItemComponent items={this.state.items} />                    : <Text>No items</Text>                }            </View>        )    }}

  خب بعد از انجام این کار زمان آن رسیده تا ItemComponent.js را در مسیر src  >>  components ایجاد کنیم تا اطلاعات ما در فایر بیس را برای ما نمایش دهد.

// ItemComponent.js import React, { Component } from 'react';import {  View, Text, StyleSheet} from 'react-native';import PropTypes from 'prop-types'; const styles = StyleSheet.create({    itemsList: {        flex: 1,        flexDirection: 'column',        justifyContent: 'space-around',    },    itemtext: {        fontSize: 24,        fontWeight: 'bold',        textAlign: 'center',    }}); export default class ItemComponent extends Component {   static propTypes = {      items: PropTypes.array.isRequired  };   render() {    return (      <View style={styles.itemsList}>        {this.props.items.map((item, index) => {            return (                <View key={index}>                    <Text style={styles.itemtext}>{item.name}</Text>                </View>            )        })}      </View>    );  }}

  تصویری که در نهایت برنامه ما پیدا خواهد کرد به شکل زیر خواهد بود. این برنامه دیزاین خاصی ندارد اما برای نمایش نحوه کار فایربیس بسیار مناسب و کار ساز است. با استفاده از این مثال به خوبی میتوانید نحوه کار React Native Firebase را درک کنید و از این ابزار قدرتمند نهایت استفاده را ببرید لازم است باز هم این نکته را یادآوری کنیم که با استفاده از این ابزار هم برای ios و هم برای android شما توانایی کار دارید و در استفاده از React Native Firebase هیچ محدودیتی ندارید.