4.1 App Screen 1 (UI + Backend integration)
Finally the first screen of my web app is ready. Hasura provides awesome API’s to make user management and data query for building back-end of any app and my web app's back-end solely depends on them.
Function of App screen 1:
To store result of a student whose id is entered. Before storing the result the student must be registered (Foreign key constraint).
Sections where I used Hasura APIs:
Hasura Data API To store the result of students in Result table of database.
Hasura Auth API To perform admin login, logout and maintaining sessions.
For Backend I used
Hasura Platform
Node.js
Express.js
Docker
Kubernetes
Additional library used
1. Bootstrap
2. Sweet Alert
Web app Screens
Home Screen
Registration screen
Successful registration
Admin Login screen
Enter admin ID and password
Marks entry screen ( First Major screen of my webapp )
Backend Integration
I used the AJAX -XMLHttpRequest to insert marks in Result table.
function pushresult(){
var request= new XMLHttpRequest();
request.onreadystatechange= function(){
if(request.readyState===XMLHttpRequest.DONE ){
if(request.status===200){
console.log(this.responseText);
sweetAlert("Your response sent", "Click Ok to enter marks for another student", "success");
}else{
sweetAlert("Response not sent", JSON.parse(this.responseText).error, "error");
}
}
}
var id= Number(document.getElementById("id").value);
var physics= Number(document.getElementById("physics").value);
var chemistry= Number(document.getElementById("chemistry").value);
var mathematics= Number(document.getElementById("mathematics").value);
var biology= Number(document.getElementById("biology").value);
var english= Number(document.getElementById("english").value);
var computer_science= Number(document.getElementById("computer_science").value);
var remarks= document.getElementById("remarks").value;
request.open('POST', "https://data.cockerel94.hasura-app.io/v1/query", true);
request.withCredentials=true;
request.setRequestHeader('Content-type','application/json');
request.setRequestHeader('Authorization','Bearer');
request.send(JSON.stringify({ type:"insert", args:{ table:"Result", objects:[ { id:id, physics:physics, chemistry:chemistry, mathematics:mathematics, biology:biology, english:english, computer_science:computer_science, remarks:remarks } ] }})); };
Links to my webapp:
