Firebase

特長

Googleが作成したサーバレスリースサービス
Serverless
サーバがないのではなく、自分でサーバを作成する必要はありません.
必要なサーバー機能を提供する場所でサービスを利用するのは、とても便利です.

作成と設定

プロジェクトを作成するには、アプリケーション/ファイル・リポジトリ/リアルタイム・データベースを作成する必要があります.
アプリケーションの生成は、開発中のアプリケーションにバインドするために必要な作業です.
画像はファイルに保存され、JSONデータはリアルタイムデータベースに管理されているので、別々に作成する必要があります!

アプリケーションの作成

Firebase->プロジェクトの作成->プロジェクト内のアプリケーションの作成->
「WebアプリケーションへのFirebaseの追加」(Firebase管理Xを選択)->「プロジェクト設定」ページでのSDKの表示

ファイルストレージの作成

左側のメニューからStorage->Storageを作成

リアルタイム・データベースの作成

左側のメニューのRealtime Database->作成->ルールの読み取り/書き込みはすべてtrueです.

Firebaseのインストールとバインド

インストールコード

expo install firebase

firebaseConfig.jsの作成

App.FirebaseConfigはjsが存在するフォルダにあります.jsを生成します.
作成したFirebaseと一緒に使用するファイルの優先パラメータを設定します.

firebaseConfig.js

import firebase from "firebase/compat/app";

// 사용할 파이어베이스 서비스 주석을 해제합니다
//import "firebase/compat/auth";
import "firebase/compat/database";
//import "firebase/compat/firestore";
//import "firebase/compat/functions";
import "firebase/compat/storage";

// Initialize Firebase
//파이어베이스 사이트에서 봤던 연결정보를 여기에 가져옵니다
const firebaseConfig = {
  apiKey: "~~~~",
  authDomain: "~~~~",
  databaseURL: "https://sparta-myhoneytip-minbro-default-rtdb.firebaseio.com",
  projectId: "sparta-myhoneytip-minbro",
  storageBucket: "sparta-myhoneytip-minbro.appspot.com",
  messagingSenderId: "~~~~",
  appId: "~~~~",
  measurementId: "~~~~",
};

//사용 방법입니다.
//파이어베이스 연결에 혹시 오류가 있을 경우를 대비한 코드로 알아두면 됩니다.
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export const firebase_db = firebase.database();

生成された

アプリケーションコードがFirebaseConfigディレクトリに入力されます.

データベースURLに、生成されたリアルタイムデータベースリンクを入力します.

Firebaseからのデータのインポート

サンプルコード

MainPage.js

import React, { useState, useEffect } from "react";
import main from "../assets/jordan.jpg";
import {StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from "react-native";
import data from "../data.json";				// 더이상 사용하지 않고 firebase에서 불러온다!
import Card from "../components/Card";
import Loading from "../components/Loading";
import { StatusBar } from "expo-status-bar";
import * as Location from "expo-location";
import { Alert } from "react-native-web";
import axios from "axios";
import {firebase_db} from "../firebaseConfig"

export default function MainPage({ navigation, route }) {
  console.disableYellowBox = true;

  const [state, setState] = useState([]);
  const [cateState, setCateState] = useState([]);
  const [ready, setReady] = useState(true);
  const [weather, setWeather] = useState({ temp: 0, condition: "" });

  useEffect(() => {
    navigation.setOptions({
        title: "나만의 꿀팁",
      });
    firebase_db
      .ref("/tip")
      .once("value")
      .then((snapshot) => {
        console.log("파이어베이스에서 데이터 가져왔습니다!!");
        let tip = snapshot.val();
        setState(tip);
        setCateState(tip);
        getLocation();
        setReady(false);
      });
  }, []);

.
.
.

使用方法

import {firebase_db} from "../firebaseConfig"

FirebaseConfigからエクスポートされたFirebase dbをインポートします.

firebase_db
  .ref("/tip")
  .once("value")
  .then((snapshot) => {
    console.log("파이어베이스에서 데이터 가져왔습니다!!");
    let tip = snapshot.val();
    setState(tip);
    setCateState(tip);
    getLocation();
    setReady(false);
  });

リアルタイムデータベースでは、tipを取得するために関数を使用して「tip」と入力されたデータ(既存のdata.json)を読み込みます.

はまずデータベースからデータを取得するので、settimeout関数は現在使用されていません!

当初settimeoutを使用して画面切り替え速度を調整するのは良い方法ではありませんでした...