유니티 Webgl 파이어베이스(firebase) - Realtime Database 쓰기 #6

---

1. 오늘 공부할 내용

유니티Webgl 파이어베이스로 Realtime Database 쓰기에 대해 다룹니다.

참고 링크

[프로그램 강좌/유니티 + 파이어베이스] - 파이어베이스 유니티 Realtime Database

---

2. 동영상 강좌

---

3. 자바스크립트 라이브러리 작성

1) Assets\FirebaseWebGL\Plugins 에 firebasedatabase.jslib 파일을 만듭니다. 

2) firebasedatabase.jslib 작성

mergeInto(LibraryManager.library, {

    PostJSON: function(path, value, objectName, callback, fallback) {
        var parsedPath = Pointer_stringify(path);
        var parsedValue = Pointer_stringify(value);
        var parsedObjectName = Pointer_stringify(objectName);
        var parsedCallback = Pointer_stringify(callback);
        var parsedFallback = Pointer_stringify(fallback);

        try {

            firebase.database().ref(parsedPath).set(parsedValue).then(function(unused) {
                window.unityInstance.SendMessage(parsedObjectName, parsedCallback, "Success: " + parsedValue + " was posted to " + parsedPath);
            });

        } catch (error) {
            window.unityInstance.SendMessage(parsedObjectName, parsedFallback, JSON.stringify(error, Object.getOwnPropertyNames(error)));
        }
    },
});

#코드 설명

Pointer_stringify 자바스크립트 문자열로 변환해주는 헬퍼함수입니다.

firebase.database().ref(parsedPath).set(parsedValue) 파이어베이스의 리얼데이터베이스 자바스크립트 코드입니다. 매개변수로 데이터가 저장될 Path 경로와 데이터를 전달합니다.

---

4. 유니티 스크립트 작성

1) Assets\FirebaseWebGL\Scripts 에 FirebaseDatabase.cs를 만들고 아래 코드를 입력합니다.

using System.Runtime.InteropServices;

namespace FirebaseWebGL.Scripts.FirebaseBridge
{
    public static class FirebaseDatabase
    {
        [DllImport("__Internal")]
        public static extern void PostJSON(string path, string value, string objectName, string callback, string fallback);
    }
}

#코드 설명

자바스크립트의 함수를 링크하는 코드입니다. 자바스크립트에서 작성한 함수이름과 매개변수와 동일해야 합니다.

 

2) Assets\FirebaseWebGL\Objects 폴더를 만들고 FirebaseError.cs 을 만들고 아래 코드를 작성합니다.

using System;

namespace FirebaseWebGL.Scripts.Objects
{
    [Serializable]
    public class FirebaseError
    {
        public string code;
        public string message;
        public string details;
    }
}

#코드 설명

자바스크립트에서 데이터베이스에서 전달한 에러코드를 JSON으로 형 변환합니다. JSON 데이터를 파싱하기 위한 클래스입니다. (파싱이 맞는 표현인지는..)

 

3) Assets\Scripts 에 DatabaseHandler.cs 를 만들고 아래 코드를 작성합니다.

using UnityEngine;
using UnityEngine.UI;
using FirebaseWebGL.Scripts.FirebaseBridge;
using FirebaseWebGL.Scripts.Objects;


public class DatabaseHandler : MonoBehaviour
{
    public Text statusText;
    public InputField pathInputField;
    public InputField valueInputField;

    private void Start()
    {
        if (Application.platform != RuntimePlatform.WebGLPlayer)
            DisplayError("The code is not running on a WebGL build; as such, the Javascript functions will not be recognized.");
    }

    public void PostJSON() => FirebaseDatabase.PostJSON(pathInputField.text, valueInputField.text, gameObject.name,
            "DisplayInfo", "DisplayErrorObject");

    public void DisplayInfo(string info)
    {
        statusText.text = info;
    }

    public void DisplayErrorObject(string error)
    {
        var parsedError = JsonUtility.FromJson<FirebaseError>(error);
        DisplayError(parsedError.message);
    }

    public void DisplayError(string error)
    {
        statusText.text = error;
    }
}

#코드 설명

PostJSON 함수가 위에서 만든 Static 함수를 호출하는 코드입니다. 이를 통해 링크된 자바스크립트의 함수를 호출해서 데이터를 씁니다. 

DisplayInfo() 성공시 호출되는 함수입니다.

DisplayErrorObject() 실패시 호출되는 함수입니다. JSON 을 FirebaseError 형태로 만들어서 에러메시지를 DisplayError()에 매개변수를 전달합니다.

 

---

5. 유니티 UI 작업

1) 아래와 같이 InputField 두개 버튼 1개를 추가합니다.

 

2) DatabaseHandler.cs 을 Handler 오브젝트의 컴포넌트로 추가합니다. 

3) Handler의 DatabaseHandler 컴포넌트에 변수에 각 UI를 연결합니다.

4) PostDataButton 의 클릭이벤트로 DatabaseHandler.cs의 PostJSON() 이 호출되도록 합니다.

---

6. Index.html 파일 수정

 1) Webgl 로 빌드를 합니다.

2) 빌드가 완료되면 빌드가 된 폴더로 이동해서 Index.html 을 비주얼스튜디오로 엽니다.

3) 파이어베이스 웹 SDK 구성요소를 </Body> 위에 추가합니다. 

4) 파이어베이스 웹 SDK 구성요소 윗 부분에 Firebase JS SDK 인증과 실시간데이터베이스를 추가합니다.

      <!-- The core Firebase JS SDK is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>

      <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-database.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>

      <script>
          // Your web app's Firebase configuration
          // For Firebase JS SDK v7.20.0 and later, measurementId is optional
          var firebaseConfig = {
              apiKey: "AIzaSyBl_EnKaGrPz8ucIPR1U376rEq1xcRhAqE",
              authDomain: "fir-webgl-study.firebaseapp.com",
              projectId: "fir-webgl-study",
              storageBucket: "fir-webgl-study.appspot.com",
              messagingSenderId: "348876701541",
              appId: "1:348876701541:web:39746e4b6edfb18f2e2b8c",
              measurementId: "G-W803ZS40ML",
              googleWebId: "348876701541-qdnp94l10tuotqnp77hluenvgbi4q1hr.apps.googleusercontent.com"
          };
          // Initialize Firebase
          firebase.initializeApp(firebaseConfig);
          firebase.analytics();
      </script>

 

5)  window.unityInstance = unityInstance; 를 }).then((unityInstance) => { 아래에 추가합니다.

          var script = document.createElement("script");
          script.src = loaderUrl;
          script.onload = () => {
              createUnityInstance(canvas, config, (progress) => {
                  progressBarFull.style.width = 100 * progress + "%";
              }).then((unityInstance) => {
                  window.unityInstance = unityInstance;

                  loadingBar.style.display = "none";
                  fullscreenButton.onclick = () => {
                      unityInstance.SetFullscreen(1);
                  };
              }).catch((message) => {
                  alert(message);
              });
          };
          document.body.appendChild(script);
      </script>

 

6) Index.html을 저장하고 Webgl 빌드가 완료된 폴더를 압축합니다.

 

---

7. 파이어베이스 콘솔창 설정

1) 파이어베이스 콘솔창으로 가서 Realtime Database를 활성화 시킵니다. 

2) 원활한 테스트를 위해 규칙에서 read 와 write를 모두 true로 변경합니다.

---

8. 웹 등록 후 테스트

1) https://itch.io/ 에 압축된 파일을 등록하고 테스트를 진행합니다.