First, I'm sorry for the description. This is the best I could do since I have zero knowledge in WEB development and I find it hard to find the specific thing to ask.
I finished to develop an amazing android app and now I'm using Firebase hosting to host my static web page - a simple form with a submit button.
I struggled with this all day and I'm sorry again for my stupidity in this case. So here we go :
I initialized everything I need for the Admin SDK for Node.js according to Google Developers
In addition to all the files Firebase generated for me, in WebStorm I created two files in a "public" directory: index.js and index.html.
I managed to write to the database as admin with this code:
// index.js
const admin = require('firebase-admin');
const serviceAccount = require("C:/myapp/serviceAccountKey.json");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: "https://myapp.firebaseio.com"
});
let db = admin.database();
let ref = db.ref("Guests");
let isInvited = false;
function updateDB() {
ref2.once("value", function (snapshot) {
isInvited = snapshot.val();
if (!isInvited) {
ref.update({
"invited": true,
"arrive": true,
});
}
});
}
If I run this from WebStorm the database will change to the vallues I set. This is a boilerplate. I want that when a user clicks on the submit button in the html file then an update to the database will happen from the js file.
this is the code for the html file:
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
</head>
<body>
<form id="mainForm">
<div>
<label for="arrivalCheckbox">Arrival Confirmation</label>
<input type="checkbox" id="arrivalCheckbox" value="1">
</div>
<div>
<label for="joiners">Joiners</label>
<input type="number" id="joiners" min="0" max="20">
</div>
<button type="submit" id="submitButton">Submit</button>
</form>
<!-- update the version number as needed -->
<script defer src="/__/firebase/7.17.2/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/7.17.2/firebase-auth.js"></script>
<script defer src="/__/firebase/7.17.2/firebase-database.js"></script>
<script defer src="/__/firebase/7.17.2/firebase-messaging.js"></script>
<script defer src="/__/firebase/7.17.2/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<script defer src="index.js"></script>
</body>
</html>
When I try to put the writing to the database part in index.js in a function and then calling in from the html file when using "onSubmit" on the form or "onClick" on the submit button, the writing didn't happen, even if I deploying my app with "firebase deploy".
I have zero knowledge in WEB and very little time to learn.Today is my first day seeing javascript and html. I struggled with this all day and I will be very happy to get some help.
