유니티 Webgl 파이어베이스(firebase) - Realtime Database 삭제 #10

---

1. 오늘 공부할 내용

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

---

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

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

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

        try {

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

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

#코드 설명

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

firebase.database().ref(parsedPath).remove() parsedPath 경로에 있는 데이터를 삭제하는 코드입니다. 

---

3. 유니티 스크립트 작업

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

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

#코드 설명

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

 

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

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

#코드 설명

위에서 만든 FirebaseDatabase.DeleteJSON 를 실행하는 함수입니다.

 

---

4. 유니티 UI 작업

DeleteData 버튼을 만들고 위에서 만든 DatabaseHandler.DeleteJSON 함수가 클릭이벤트로 호출되도록 연결합니다.

---

5. 빌드 후 Index.html 파일 수정

1) Webgl 로 빌드합니다. 

2) 빌드가 완료되면 빌드가 완료된 폴더로 갑니다.

3) Index.html 파일을 비주얼스튜디오로 열고 파이어베이스 JS SDK CDN 코드를 </Body> 위에 추가합니다. 인증과 실시간데이터베이스 코드가 포함되어야 합니다.

      <!-- 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; 를 loadingBar.style.display = "none"; 위에 추가합니다.

          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. 테스트 하기

1) Index.html 을 저장하고 빌드 파일이 들어있는 폴더를 통째로 압축합니다.

2) https://itch.io/ 로 이동해서 압축한 파일을 업로드하고 테스트를 진행합니다.