React Native Firebase: Panduan Lengkap – Codewithaden

Saya pertama kali skeptis tentang Firebase , tapi setelah menggunakannya, sepertinya Firebase mungkin dapat mempercepat pengembangan aplikasi seluler dan web yang meluas. Dalam aplikasi seluler atau web tradisional, kemajuan saat Anda membangun sesuatu yang lain.

Bereaksi Firebase Asli

Untuk bekerja dengan firebase dengan react asli, gunakan Firebase kemasan. Paket Firebase menyediakan Firebase.initializeApp () berfungsi inisialisasi Firebase di Bereaksi asli . Itu menyediakan Ref () fungsi yang dapat kami rantai dan gunakan dorongan() Fungsi untuk menambahkan elemen ke Database Realtime Firebase

Cukup teori dan mari kita sampai ke yang praktis. Mari kita mulai contoh kita dengan menginstal proyek React Native.

Langkah 1: Instal React Native.

Instal CLI Native React menggunakan perintah berikut.

# for mac users

sudo npm install -g react-native-cli

# for windows users: open cmd on admin mode and type 

npm install -g react-native-cli 

Sekarang, buat proyek kami menggunakan perintah berikut.

react-native init RNFbase 

Masuk ke proyek itu.

cd RNFbase 

Mulai server paket dan simulator menggunakan perintah berikut.

react-native run-ios --simulator="iPhone X" 

Anda akan melihat layar ini.

React

Jika Anda menghadapi peringatan kuning seperti ismounted (…) sudah usang di kelas JavaScript React Class ‚ÄĚdengan dependensi ini, Kemudian tambahkan kode berikut di dalam App.js mengajukan.

// App.js

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']); 

Langkah 2: Pasang ketergantungan Firebase.

Ketik perintah berikut untuk menginstal firebase.

yarn add firebase

# or

npm install firebase --save 

Langkah 3: Buat direktori yang diperlukan.

Di akar proyek, buat satu direktori disebut SRC. Di direktori itu, buat tiga folder.

  1. Layar
  2. komponen
  3. jasa

Layar Folder berisi layar yang perlu kami tampilkan kepada pengguna. Dalam kasus kami, kami akan membuat tiga Layar.

Komponen Folder berisi komponen seluler yang akan kami gunakan untuk menampilkan data dari API

Jasa Folder berisi file jaringan. Ini adalah file di mana kami akan menulis kode untuk membuat permintaan ke server dan mendapatkan respons dari server.

Langkah 4: Buat dua layar.

Di dalam SRC >> Layar folder, buat file berikut.

  1. Home.js
  2. Additem.js
  3. Listitem.js

Home.js adalah murni Bereaksi asli kelas.

// Home.js

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

export default class Home extends Component {
  render() {
    return (
      
        Home Screen
      
    )
  }
} 

Hal yang sama berlaku untuk Additem.js mengajukan.

// AddItem.js

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

export default class AddItem extends Component {
  render() {
    return (
      
        Add Item
      
    )
  }
} 

Juga, sama untuk Listitem.js mengajukan.

// ListItem.js

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

export default class ListItem extends Component {
  render() {
    return (
      
        List Item
      
    )
  }
} 

Langkah 5: Mengintegrasikan Navigasi Asli Bereaksi.

Kita perlu menginstal Navigasi Bereaksi Perpustakaan untuk mentransisikan aplikasi dari satu layar ke layar lain.

yarn add react-navigation

# or

npm install react-navigation --save 

Sekarang, setelah menginstal, pergi ke App.js mengajukan. Kami akan menggunakan Stacknavigator untuk transit dari satu layar ke layar lainnya. Ini rute untuk aplikasi kami.

// 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 (
      
    );
  }
} 

Kami telah memasukkan kedua layar di sini dan meneruskan layar itu ke Fungsi StackNavigator. Ini akan menangani transisi layar kami. Tampilan homescreen seperti berikut ini.

React

Langkah 6: Buat database di konsol Firebase.

Pergi ke https://firebase.google.com dan masuk ke akun Google Anda, dan buat proyek baru.

Di Bereaksi asli , kami mengambil konfigurasi basis data sebagai aplikasi web, jadi buka bagian aplikasi web Anda dan dapatkan objek konfigurasi. Selanjutnya, kita perlu menghubungkan aplikasi kita ke Firebase

Buat folder baru di dalam SRC folder, dipanggil konfigurasi, Dan dalam hal itu, buat file baru dipanggil db.js. Kemudian , Tulis kode berikut di dalamnya.

// db.js

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

Anda memiliki nilai konfigurasi, jadi Anda perlu menyalin seluruh konfigurasi dari aplikasi Firebase Anda.

Langkah 7: Buat formulir Tambah data.

Tulis kode berikut di dalam Additem.js mengajukan.

// 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 (
      
        Add Item
        
        
              
                  Add
              
            
      
    )
  }
}

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'
  }
}); 

Jadi, saya telah mendefinisikan beberapa gaya dasar dari bentuk kami. Jadi kami Additem.js Layar terlihat seperti ini.

Firebase

Langkah 8: Buat file layanan untuk menambahkan data ke Firebase.

Di dalam jasa folder, buat satu file yang dipanggil Itemservice.js.

// ItemService.js

import { db } from '../config/db';

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

Sekarang, kita perlu mengimpor file layanan ini ke Additem.js mengajukan.

// 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 (
      
        Add Item
        
        
              
                  Add
              
            
      
    )
  }
}

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'
  }
}); 

Saya telah mengimpor Tambahkan Barang fungsi dan lulus nilai kotak teks kami ke fungsi itu dan juga mengimpor Peringatan Komponen untuk menampilkan kotak peringatan yang mengatakan bahwa data kami telah berhasil disimpan.

React

Anda juga dapat melihat data di Firebase

Firebase

Langkah 9: Tampilkan item.

Tulis kode berikut di dalam Listitem.js mengajukan.

// 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 (
            
                {
                    this.state.items.length > 0
                    ? 
                    : No items
                }
            
        )
    }
} 

Oke, sekarang kita perlu membuat ItemComponent.js file di dalam SRC >> komponen map. Ini akan menampilkan data kami dari firebase.

// 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 (
      
        {this.props.items.map((item, index) => {
            return (
                
                    {item.name}
                
            )
        })}
      
    );
  }
} 

React

Ini bukan desain yang cukup banyak tetapi, saya hanya ingin Anda melihat bagaimana itu dapat terhubung dengan Firebase, dan kami dapat mengambil data dan menampilkannya di layar. Itulah moto utama tutorial ini.

Hanya itu saja; Saya tahu ada banyak hal yang dapat kami perbaiki ini tetapi, kami akan menangani satu per satu di tutorial mendatang.

Itu untuk tutorial ini. Terima kasih telah mengambilnya.

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *