QR Generator

[navraj213]

teamC

@rsingh145 @mahditahiri71

To-DO

Do research or find a way to do make qr code.

Information

Your branch will be: teamC area to work in is: src/app/components/

[navraj213]

Open Source Camera Scanner

Found camera scanner with barcode and qr code scanning built in. Demo: https://schmich.github.io/instascan/ GitHub: https://github.com/schmich/instascan

Do some research into this and see if we can integrate into our app. It has npm and nodeJs support so, see if you can get working demo in our app and scanning valid qr codes.

[navraj213]

Creating QR CODE

To create the QR code, there is a library called qrcode Documentation: https://www.npmjs.com/package/qrcode

Storing Data

what would be a unique way to create the qr code, and how would the system know the qr code is no longer valid. I was thinking to have a ~2 min timestamp within the qr code and the id. So it would be like the date (11/10/2024 2:42:01 AM) + (student id) = QR CODE Metadata.

Deadlines

I am open to any other suggestions comment them below.

keep in mind we should have a working prototype for this section latest, Wednesday (11/13).

[mahditahiri71]

Worked on a js file which creates qrcodes based on student ID and associates qrcode with a specific ID. Additionally it updates every 2 minutes. Dont wanna commit to the wrong place will show you tomorrow what I have scrum master. Would work well if integrated with a database. Thank you for your time.

[mahditahiri71]

BTW I accidentally closed this issue sorry for that so I reopened it.

[navraj213]

Overview

See commit 441ea15fb202533643858290d9924b2d624cb035

Insight

Added QR Code to integrate well with dashboard. Basically took the code from the components folder you guys created and added it to the dashboard page so, you don't have to enter your ID, and it just looks it up from the database and adds the timestamp. Code found in AttendMate/src/app/student/dashboard/page.tsx

const generateQRCode = (studentId: string) => {
    // Use setInterval to update the QR code every second
    const intervalId = setInterval(() => {
        // Get the current timestamp to make the QR code unique
        const timestamp = Date.now();

        // Define the QR data with the student ID and timestamp
        const qrData = `${studentId}000${timestamp}`; //temp made to test and see if it works
        // change in the future to be more secure

        // Generate the QR code
        QRCode.toDataURL(qrData, (error, url) => {
            if (error) {
                console.error("Error generating QR Code:", error);
                return;
            }
            setQrCode(url); // Set the generated QR code as the image URL
        });
    }, 1000); // Update every 1000 ms (1 second)

    // Cleanup interval when the component unmounts
    return () => clearInterval(intervalId);

How it looks right now on the Dashboard (not complete product)

Next Steps

Create a way to incorporate qrData to include the person's ID + timestamp. Right now I just made it studentID + "000" + timestamp. However, I feel like there could be a better way to kind of hide or encrypt the data. Maybe add class to it? Im not sure. I can't really think of any other additions to make but it looks pretty good right now. You guys have until Wednesday to think and do some research. (this is the line(s) I'm referencing for you to potentially change) https://github.com/nyitgtm/AttendMate/blob/441ea15fb202533643858290d9924b2d624cb035/src/app/student/dashboard/page.tsx#L46

Amazing work so far, deadline for this is Wednesday night (11/13 11:59pm). 👍

[navraj213]

Lets think of something for the qrcode Data.

I was thinking we make it similar to Machester encoding so it'll be like: starting of student ID + student ID + filler bits + timestamp + filler + starting of class + class so for a Student with an ID of 144001 entering CSCI101 at 11:01:05 AM 11/13/2024 would be: I144001$$$1731531446725$$$CCSCI101

Should we leave it as it is or do we feel she would like it if it was encrypted/encoded further?

Area to change: https://github.com/nyitgtm/AttendMate/blob/441ea15fb202533643858290d9924b2d624cb035/src/app/student/dashboard/page.tsx#L46

[navraj213]

Fixed made it:

const qrData = QRCODE$${studentId}$${timestamp};