유니티 Webgl 파이어베이스(firebase) - Realtime Database 업데이트 #9

---

오늘 공부할 내용

오늘은 실시간 데이터베이스 업데이트에 대해 다룹니다.

업데이트는 특정 경로의 하위 경로 중 1개의 경로의 값만 변경하고 싶을 때 사용합니다.

참고 링크:

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

---

2. 자바스크립트 라이브러리 수정

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

    UpdateJSON: 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);

        var postData = { Score : parsedValue };

        try {

            firebase.database().ref(parsedPath).update(postData).then(function(unused) {
                window.unityInstance.SendMessage(parsedObjectName, parsedCallback, "Success: " + parsedValue + " was updated in " + parsedPath);
            });

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

#코드 설명

update()  매개변수로 변경하려는 경로의 키와 값을 전달해야 합니다.

그래서 postData 라는 Test용도의 데이타를 만들었습니다. parsedPath 경로에 Score 라는 항위 경로에 paredValue 값을 업데이트하는 코드입니다.

---

3. 유니티 스크립트 수정

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

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

#코드 설명

자바스크립트 라이브러리에 있는 함수를 링크거는 함수입니다. 함수의 이름과 매개변수는 링크걸려는 함수의 이름과 매개변수와 동일해야 합니다.

 

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

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

#코드 설명

Static 함수를 호출하는 코드입니다.

두번째 매개변수 valueInputField.text 이녀셕 대신 Dictionary<string, object> 형식으로 보내서 위에 자바스크립트 라이브러리에서 임시로 만든  var postData = { Score : parsedValue }; 를 대신할 수 있습니다.

---

4. 유니티 UI 작업

1) UpdateData 버튼을 만들고 위에서 만든 FirebaseDatabase.UpdateJSON 가 클릭이벤트로 호출되도록 연결합니다.

 

---

5. 빌드 후 Index.html 수정

1) Webgl 로 빌드를 진행합니다.

2) 빌드가 완료된 폴더로 이동해서 Index.html 파일을 비주얼 스튜디오로 열어줍니다.

3) </Body> 윗라인에 파이어베이스 SDK 구성요소 CDN코드(인증, 실시간데이터가 포함된)를 추가합니다.

      <!-- 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>

4) window.unityInstance = unityInstance; 를               }).then((unityInstance) => { 아랫 줄에 추가합니다.

5) Index.html 파일을 저장하고 빌드된 폴더를 통째로 압축합니다.

---

5. 테스트

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