GUI requirements for StudentAddScreen
In a similar fashion, we will list down the components required on the second screen (Table 2). The
purpose of the second screen is to add the students’ names so that their attendance can be verified.
1. Drag and drop the components mentioned in Table 2 to the viewer. 2. If you have dragged and placed everything, the layout will look something like what’s shown in Figure 8.
We need to configure the Firebase component to connect to the demo project we created using the steps mentioned above. For that, just assign the URL of your project to the Firebase URL property of the Firebase component in the designer.
Now we will head towards the block editor to define the various types of behaviour; so let’s discuss the actual functionality that we expect from our application.
1. From the very first screen, the user should be able to scan the barcode.
2. The barcode will consist of the student’s name and roll number, separated by a comma.
3. If the student’s name from the barcode doesn’t match with the database, the user needs to add that particular student by going to the second screen.
4. Once the barcode is scanned, the result will be stored into the Firebase DB with the date on which this task was performed.
5. The project bucket will be named after the month, so that each month, a new folder will be created and attendance records will be separated for each date.
So let’s move on and add these types of behaviour using the block
editor. I hope you remember how to switch from the designer to the block editor. There is a button available right above the Properties pane to do this.