How does it work
- With the app installed on their Android/iOS device , the store employees Sign-up on the app with their EmployeeID, Fullname and password
- On successful Sign-In/Sign-up,they can Snap their picture from within the premises of the store and select the Check-in option, this registers their check-in time along with their image which are visible on the dashbord. At the end of the day, the employees can checkout by Snapping their picture within the store premises and select Check-out.
- All of these details will be visible via admin login on the dashboard wherein Employee-ID,email,Check-in/out, Time,Duration and their captured image will be displayed
- Go through the installation.md file for critical project specific setup examples and guides.
- Create User/User Auth using firebase.
- AttendanceCam view to capture Images
- Upload View via Cloudinary
- User gets to see the last submitted attendance date and type.
- A separate Dashboard to monitor uploaded attendance
Initial App Fireup
- On firing up the app the user location tracking gets enabled and location coords are captured. The initial loading screen moves ahead only on success as location capture is critical to the app. This flow uses the navigator to track the Geolocation.
- The initial Login screen also has a loggedIn/loggedOut state check which checks for user login state each time the app boots up . You remain logged in until you hit logout
- The users can login using their credentials or create a new userID( based on their email). Authentication flows are based on the Firebase Email and password web based authentication and the Firebase Create user Auth flows.
- Forgot password – The users are directed to a forgot password view where they enter their registered email. If the registered email is correct a reset password link is sent to the users’ email-id. Firebase reset-password is used here.
Attendance Cam View
- This utilizes the react-native-camera to access the camera module. On capture the image is fetched from the source and this image is fed to Cloudinary.
- The lat/long coordinates are destructured to get the location details using reverse-geocoding.
- A firebase DB fetch call checks if the user has previously registered attendance. If yes the last registered value along with date/time and type of attendance is fetched.
- Uploaded Image is fetched from Cloudinary and the user data along with location, date/time of upload and Check-in/Check-out type is uploaded to Firebase DB.
- Upon successful upload ,the user is directed to this screen.
React and React Native version
- firebase – The Firebase Command Line Tools
- react-native-fcm – React native module for firebase cloud messaging and local notification
- react-native-camera – A Camera component for React Native.
- react-native-geocoders – Geocoding services for react native
- react-native-hockeyapp – HockeyApp integration for React Native with Android and iOS support
- react-native-progress – Progress indicators and spinners for React Native using ReactART
- react-native-router-flux – React Native Router based on new React Native Navigation API
- axios – Promise based HTTP client for the browser and node.js
- sha1 – a native js function for hashing messages with the SHA-1 algorithm.
- Cloudinary – Cloud based Image Management.
Code developed by Chumbak..