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

فایربیس

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

 فایربیس firebase چیست

React Native Firebase در حقیقت یک لایه سبک جاوا اسکریپت است که شما را به SDK های native Firebase متصل کرده و برای اندروید و IOS کاربرد دارد و Firebase Web SDK را برای ما شبیه سازی می کند. خود Firebase Web SDK  از ری اکت نیتیو پشتیبانی می کند اما به دلیل محدودیت هایی که برای قرار دادن ویژگی ها دارد و همچنین به دلیل ساخته شدن آن برای وب استفاده از آن برای react native کمتر است. استفاده از SDK های ری اکت نیتیو فایر بیس به همراه React Native Firebase در حقیقت باعث می شود که از SDK هایی که در Firebase JS SDK برای دستگاه خود استفاده کنید.

firebase

نکته
دوره های آموزش برنامه نویسی اندروید استودیو

نحوه نصب و شروغ به کار با 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 را دارید. الان نیاز دارید تا تمام کانفیگ را از اپ فایر بیس کپی کنید.

نکته
حتما بخوانید: تفاوت react native و react js به همراه مزایا و معایب + ویدئو کامل

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

بعد از انجام این ماحل نوبت به مرحله بعدی یعنی ساخت فرم برای اضافه کردن داده را انجام میدهیم. کد زیر را در 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 هیچ محدودیتی ندارید.

نکته
مقاله پیشنهادی: نحوه کار با react native elements و ویژگی های آن