How to add a clock-in and clock-out feature in Flutter and Firebase?

Question

I am trying to build an app with a feature that allows employees to clock in/ clock out using Flutter and Firebase. As I am a beginner, I have no idea how to continue, and therefore I need your help with the logic part.

How can I add this feature in the flutter app so that whenever a user clicks on the clock-in button, it saves the clock-in time and vice versa?

And later, I am planning to display the time using listview.builder and calculate the total numbers of hours worked that day.

I have already tried building my own, but I think my logic got some problem with it.

My Firebase collection is like this.

    hours > userid > time > 2021-03-04 > timein: 1614842992920 timeout: 1614842992920
                            2021-03-05 > timein: 1614842992920 timeout: 1614842992920
                            2021-03-06 > timein: 1614842992920 timeout: 1614842992920

Now when I try to get the time, I have to be specific with document id i.e 2021-03-04

    hoursCollection.doc(employeeId).collection('time').doc(2021-03-04).get();

Yes, if I use limit(7), it will give me the first seven documents, but to show recent days, I want to get documents in descending order.

I want to get a document from bottom to top, i.e. from 2021-03-06. If you got a better solution, please let me know, and I am happy to change the entire code base.

Try using Firestore's order by method, like at this post: https://stackoverflow.com/questions/50224638/order-firestore-data-by-timestamp-in-ascending-order. You should just need to change the direction to descending. — JaffaKetchup, Mar 04 '21 at 12:06

score 1 · Accepted Answer · answered Apr 20 '21 at 08:40

I would suggest restructuring your data model to make it easier to access the data you want to present. A small change will make your application more scalable. For example, this structure provides a list for a specific date so you can filter on userid. Have a look at this article for some ideas.

{
    "hour":{
      "GyCyBHFYRGJHDIKSIEZEH":{
        "2021-03-04":[
          {
            "timein":"1614842992920",
            "timeout":"1614842992920",
            "userid": "JHYRHD"
          },
          {
            "timein":"1614845792920",
            "timeout":"1614842992920",
            "userid": "JHYHYGD"
          },
        ]
      },
      "HyhHgudhKDSKSY7p7mYfW":{
        "2021-03-05":[
          {
            "timein":"1614842992920",
            "timeout":"1614842992920",
            "userid": "JHYGHD"
          }
        ]
      }
    }
  }

How to add a clock-in and clock-out feature in Flutter and Firebase?

1 Answers1