유니티 Webgl 파이어베이스(firebase) - Realtime Database 푸쉬 #8

---

1. 오늘 공부할 내용

유니티 Webgl 파이어베이스로 실시간데이터베이스 Push에 대해 다룹니다.

푸쉬와 쓰기는 해당 경로에 데이터를 넣는다는 점은 같으나 쓰기는 해당 경로에 다른 값이 있는 경우 값이 덮어쓰기가 되며 푸쉬는 해당 경로에 UID를 키로 데이터가 추가되는 형식입니다.

01

Push 와 Set의 차이

참고 링크: 

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

---

2. 자바스크립트 라이브러리 파일 작업

1) Assets\FirebaseWebGL\Plugins\firebasedatabase.jslib 파일에 아래의 함수를 추가합니다.

    PushJSON: 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).push().set(parsedValue).then(function(unused) {
                window.unityInstance.SendMessage(parsedObjectName, parsedCallback, "Success: " + parsedValue + " was pushed to " + parsedPath);
            });

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

#코드 설명

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

firebase.database().ref(parsedPath) 데이터 경로명을 매개변수로 전달합니다.

push().set(parsedValue) Push할 데이터를 매개변수로 전달합니다. 

---

3. 유니티 스크립트 작업

1) Assets\FirebaseWebGL\Scripts\FirebaseDatabase.cs 에 아래의 함수를 추가합니다.

        [DllImport("__Internal")]
        public static extern void PushJSON(string path, string value, string objectName, string callback, string fallback);

#코드 설명

자바스크립트 라이브러리 파일에 방금 추가한 PushJSON 함수를 링크거는 함수입니다. 링크거는 함수의 이름과 매개변수가 동일해야 합니다. 해당 함수가 호출되면 자바스크립트의 PushJSON 함수가 실행됩니다.

 

2) Assets\Scripts\DatabaseHandler.cs

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

#코드 설명

위에서 만든 Static 함수를 호출하는 함수입니다. 매개변수로 데이터경로, 입력할 데이터, 콜백과 폴백 함수가 있는 스크립트가 참조된 오브젝트의 이름, 성공시 호출될 함수이름, 실패시 호출될 함수이름을 전달합니다.

 

---

4. 유니티 UI 작업

PushData 버튼을 만들고 DatabaseHandler.PushJSON 함수를 클릭이벤트로 연결합니다.

---

5. Index.html 수정

1) 빌드가 완료되면 빌드된 폴더로 이동해서 Index.html을 비쥬얼스튜디오로 열어줍니다.

2) Index.html의 </Body>위에 파이어베이스 JS SDK의 CDN 구성요소와 인증, 실시간데이터 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>

 

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

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

 

4) Index.html 을 저장하고 빌드된 폴더를 압축합니다.

---

6. 웹사이트에 등록 후 테스트

1) https://itch.io/ 에 압축한 파일을 업로드하고 Push 테스트를 진행합니다.