I've got sample clock already working and I'm planning to make a Firebase real-time clock so whatever I do - close browser or refresh browser, the time value is always stored in database.

I can save and retrieve values from my Firebase Database using  Firebase REST API
https://firebase.google.com/docs/reference/rest/database/ and the POST/GET methods of Outsystems.

How would I go about using the Firebase Component:
https://www.outsystems.com/forge/component-overview/1406/firebase

to achieve this?

Do I drag a JS Interface block and put all my Firebase Javascript code there, or is there a better Outsystems way?

Source Code for Timer (https://codingwithsara.com/stopwatch-with-javascript/#Sample_Code):

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Stopwatch</title>
    <link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
    <style>
        * {
            font-family: 'Inconsolata', monospace;
            font-weight: 400;
        }
        .container {
            width: 600px;
            margin: 100px auto;
        }
        h1 {
            text-align: center;
        }
        table {
            width: 100%;
            text-align: center;
        }
        th {
            font-weight: 700;
        }
        td {
            padding: 30px;
        }      
        #table01 input[type="button"] {
            width: 120px;
            height: 40px;
            background-color: mediumaquamarine;
            margin-top: 30px;
            font-size: 18px;
            font-weight: 700;
        }
        #table02 input[type="button"] , #resetAllBtn {
            width: 120px;
            height: 40px;
            background-color: lightgrey;
            font-size: 18px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>STOPWATCH</h1>
    <br><br>
    <table border="1" cellspacing="0" id="table01">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>
                <h2 id="timerLabel1">00:00.00</h2>
                <br>
                <input type="button" value="START" id="start1">
                <input type="button" value="RESET" id="reset1">
            </td>
            <td>
                <h2 id="timerLabel2">00:00.00</h2>
                <br>
                <input type="button" value="START" id="start2">
                <input type="button" value="RESET" id="reset2">
            </td>
            <td>
                <h2 id="timerLabel3">00:00.00</h2>
                <br>
                <input type="button" value="START" id="start3">
                <input type="button" value="RESET" id="reset3">
            </td>
        </tr>
    </table>
    <br><br>
    <table id="table02">
        <tr>
            <td><button onclick="location.href='index.html'" id="resetAllBtn">RESET</button></td>
            <td><input type="button" value="START" id="moveAllBtn"></td>
        </tr>
    </table>
     
    <script>
         
        function init() {
             
            var stopwatch1 = new Timer("timerLabel1", "start1");
            document.getElementById("start1").onclick = function(){
                stopwatch1.start();
            }
            document.getElementById("reset1").onclick = function(){
                stopwatch1.reset();
            }
             
            var stopwatch2 = new Timer("timerLabel2", "start2");
            document.getElementById("start2").onclick = function(){
                stopwatch2.start();
            }
            document.getElementById("reset2").onclick = function(){
                stopwatch2.reset();
            }
             
            var stopwatch3 = new Timer("timerLabel3", "start3");
            document.getElementById("start3").onclick = function(){
                stopwatch3.start();
            }
            document.getElementById("reset3").onclick = function(){
                stopwatch3.reset();
            }
             
             
            document.getElementById("moveAllBtn").onclick = function(){
                 
                if (document.getElementById("moveAllBtn").value == 'START') {
                    stopwatch1.status = 0;
                    stopwatch2.status = 0;
                    stopwatch3.status = 0;
                     
                } else {
                    stopwatch1.status = 1;
                    stopwatch2.status = 1;
                    stopwatch3.status = 1;
                }
                 
                stopwatch1.start();
                stopwatch2.start();
                stopwatch3.start();
                 
            }       
             
        }
         
         
        function Timer(timerLabelId, startBtnId) {
            this.status = 0;
            this.time = 0;
            this.timerLabel = document.getElementById(timerLabelId);
            this.startBtn = document.getElementById(startBtnId);
        }
         
        Timer.prototype.start = function() {
             
            if (this.status == 0) {
                this.status = 1;
                this.startBtn.value = "STOP";
                this.count();
                 
            } else {
                this.status = 0;
                this.startBtn.value = "START";
  
            }           
        }
         
        Timer.prototype.count = function() {
             
            if (this.status == 1) {
                var that = this;
                setTimeout(function(){
                    that.time++;
                    that.timerLabel.innerHTML = getTime(that.time);
                    that.count();
                }, 10);
                document.getElementById("moveAllBtn").value = 'STOP';
                 
            } else {
                document.getElementById("moveAllBtn").value = 'START';
            }
        }
         
        Timer.prototype.reset = function() {
            this.status = 0;
            this.time = 0;
            this.startBtn.value = "START";
            this.timerLabel.innerHTML = "00:00.00";
        }
         
         
        function getTime(time) {
             
            var min = Math.floor(time/100/60);
            var sec = Math.floor(time/100);
            var mSec = time%100;
             
            if (min < 10) {
                min = "0" + min;
            }
            if (sec >= 60) {
                sec = sec % 60;
            }
            if (sec < 10) {
                sec = "0" + sec;
            }
             
            return min + ":" + sec + "." + mSec;
             
        }
         
        init();
  
    </script>
</div>
</body>
</html>