firebase mini skills
firebase mini skills project
Introduction
These firebase mini skills assume you have NOT undertaken our 12COMP class.
You should, however, look at the last mini skill; process different record types as you may not have implemented this in 12COMP.
You may wish to revisit some of the other tasks if you need a refresher.
NOTE: The videos are made for year 12 and so there are references to 12COMP as opposed to 13COMP
what is firebase?
create a firebase realtime database
naming it 13COMP-2023-firstname-lastname
add firebase data via the console
explain the skeleton code
Look at mrBob's 13COMP firebase skeleton code
connect to firebase & login via Google
a) Look at the Repl team's project 13COMP firebase mini skills
Tailor the html file; set author to firstname lastname
Set the test_call.js module's firebase path to userDetails
Go to the firebase console and copy your firebaseConfig into the fb_io.js module
Save the project
Run the program : using:
repl.it click on the "open in a new tab" icon
P5.js web editor via File - share - present
write to firebase
a) Add code to:
Ask the user for the score & save it
Write a record to firebase
Save the project
Run the program using:
repl.it click on the "open in a new tab" icon
P5.js web editor via File - share - present
timing issues with a DB in the cloud
So what if the firebase read takes "too long"?
write to firebase & using a callback
a) Add a callback to the write to:
Determine the write result
Update the screen with the write result
Log any write errors
Save the project
Run the program using:
repl.it click on the "open in a new tab" icon
P5.js web editor via File - share - present
read a specific firebase record
a) Add code to:
Read the user's firebase record once the user has entered their name.
Display the user's firebase score on the screen.
Save the project
Run the program using:
repl.it click on the "open in a new tab" icon
P5.js web editor via File - share - present
read all firebase records in the path
a) Add code to:
Read all firebase records in the path.
Display the records on the screen.
Save the project
Run the program using:
repl.it click on the "open in a new tab" icon
P5.js web editor via File - share - present
read all records in a path - part 1
read all records in a path - part 2
process different record types
a) Add code to:
Pass the read record & read all functions the name of the function to process the data.
Modify the read record & read all functions to call a function to process the data.
Define your process data functions.
Save the project
Run the program using:
repl.it click on the "open in a new tab" icon
P5.js web editor via File - share - present
firebase realtime rules
Watch the videos and use the rules playground to try out various rules
CLICK IMAGE BELOW FOR NEW VIDEO EXPLAINING FIREBASE RULES
rules - part 2
rules - part 3; role base authorisation
validation
"first_name": {".validate": "newData.isString()"}
"first_name": {
".validate": "newData.isString() &&
newData.val().length < 100"
}
"age": {".validate":
"newData.isNumber() && newData.val() >= 18 && newData.val() <= 65"
}
"angle": {".validate": "newData.isNumber() &&
(newData.val() == 0 ||
newData.val() == 90 ||
newData.val() == 180 ||
newData.val() == 270)"
}
first_name must be a string
first_name must be a string and its length must not exceed 100 characters
age must be a number between 18 and 65
angle must be a number and can only be one of the values specified (0,90,180 or 270).
readon or Listeners
To remove the readon or listener use the .off command:
database.ref(_path + '/' + _key).off();
NOTE: you can also label your readon/listener and then use that to remove the readon/listener:
?????.off();
Running your firebase program from your editor
point to the firebase modules in the cloud:
