Smart Attendance Register in App Inventor 2
App Inventor is a visual block-building language for creating Android apps. Over the past few months, we have been developing simple Android apps through a series of articles, each covering a particular aspect of App Inventor. Read on for the latest addit
Android devices are beginning to play a larger role in our lives. Whether it is accessing entertainment websites, networking on social media, watching videos over the Internet, chatting with relatives, making reservations/bookings or performing banking transactions, Android has become a crucial need.
Tech enthusiasts like you keep thinking up ways to make Android even smarter by developing useful apps. App Inventor is a great tool for this purpose. So let’s proceed in our quest of mastering App Inventor by creating a more complex and useful Android application.
The theme of the application
Taking attendance is a teacher’s first task. The class attendance register and pen are the only tools to accomplish this task. What if we provide a digital solution to handle this task? Sounds interesting, right? So let’s try to build a smart attendance register for our class so that the teacher need not note these details on a piece of paper and then update them onto computers.
Our application will be smart enough to capture attendance and update the records on the database, which will be persistent till we wish to clear it.
In an earlier tutorial on App Inventor, we had explored how to create a Web database using an open source cloud enabled Firebase database. In this tutorial, we will use all the expertise we’ve acquired to deliver a fully working application.
For those who’ve missed the last tutorial, I would like to revise things quickly. In our application we are going to use Firebase, a Google provided cloud database, which is open source and freely available for use.
Features of Firebase
1. Firebase uses a GUI based data centre so that you can visually see all the entries and can manage them.
2. Being on the cloud, it is accessible to any device, on the go.
3. Smart authentication provides secure access.
4. Its real-time database reflects changes as soon as the data is updated.
5. It allows the addition of collaborators so that multiple people can manage the database. 6. No coding is required for fetching and storing data.
Creating a project in the Firebase database
1. To use Firebase, you must have a working Google account. The same will be needed to run App Inventor.
2. Type https://console.firebase.google. com/ in the address bar of the browser you are using and hit Enter. 3. If asked for login credentials, give your Google account credentials and proceed.
4. Follow the on-screen instructions which are generally about accepting the terms of usage, etc.
5. Once everything is done, you will
see the screen shown in Figure 1.
6. Click on ‘Create New Project’.
7. Give the name of the project and specify the country/region, as shown in Figure 2.
8. Once your project is created, you will see the dashboard of your application. It will be similar to that displayed in Figure 3.
9. Now select Database from the left-hand palette and then ‘Rules’ from the next page, which will display something like what’s shown in Figure 4.
10. This time, we want to give all users access of the database; hence, we need to change the rules. You can manually do this by typing values as shown in Figure 5. Once done, click on the Publish button.
So you have now successfully created an empty space for your project in the Firebase database, and given read and write permissions to all the users who have the URL.
If you are new to this Android journey, do go through a few of the articles in this series, targeted at beginners, to familiarise yourself with App Inventor.
GUI requirements
For every application, we have a graphical user interface or GUI, which helps the user to interact with the on-screen components. How each component responds to user actions is defined in the block editor section. In this application, we will have multiple screens and will define the look and feel for each of them.
There are two GUI screens and their names are:
1. Screen1
2. StudentAddScreen