LISTA

Attendance tracking application for LISTO and GILAS.

This README is meant for the developers.

📚 What do I need to learn first?

• JavaScript ES6 (basics only)
• React.js (focus on functional components)
• React-OnsenUI (Use this link more as a cheatsheet, than a tutorial)
• Git & Github (push, pull, clone, merge, repository, pull request, etc.)

📩 Installing what you need for development

• Node.js We will need this to run npm commands in the command prompt. Download it here.

• Git After learning about Git & Github, you can now continue to install it through here. We will need this so we can work on the same project remotely.

...starting from here you should be on the folder named lista/ that you downloaded or cloned using git.

• React We will need this so that we can run our React code. Installation is straightforward, after installing Node.js, simply open your command prompt and type npm install react

• OnsenUI and React-OnsenUI We will use this as a framework so our app looks more native-ish. Install OnsenUI by typing npm install onsenui and React-OnsenUI through npm install react-onsenui

• HTML5QRCODE This is a free library we will be using in order to detect QR Code. Same as React, just type in npm install html5-qrcode

• Gapi This is Google's client library for browser-side JavaScript to easily connect with Google APIs. . To install simply type in npm install gapi-script

Note: that you no longer need to install Cordova, you can run your code by typing npm run start (after saving your changes to your code, it automatically recompiles it so you do not need to re-run it). Cordova installation is difficult, but if you still wish to install it, you can through here, you should then install the required softwares for Cordova android development through here.

If you opted to install Cordova and it's required software, you can build the apk by running npx yarn run build and running cordova build android (You might need to plug your phone to your computer and enable USB Debugging through your phone's Developer Settings. If yarn is not recognized, you might need to run npm install yarn before building the apk)

When you run your app in your laptop or PC, you may need to grant it permissions for camera and/or microphone.

Try opening DevTools by pressing F12 and opening console (to see errors, warnings and results). Then toggling device emulation, so you can see how it looks like in a mobile phone.

🧬 Code structure

You do not need to make changes to the following folders and files:

📁 config/ - Automatically generated folder that contains configuration for webpack which is what compiles our React to native javascript and compress it.

📁 node_modules/ - Contains libraries and frameworks that we use. This is automatically generated and modified by npm when we add, modify, or delete libraries and frameworks (also called as packages)

📁 platforms/ - Automatically generated, this folder contains different platforms and native files that Cordova will compile to. Android is the main platform.

📁 scripts/ - This is created automatically by React to handle our commands, whether to run it or build it, we usually only use the start.js through npm run start

📁 www/ - Everything in here is automatically generated by our compiler. This is raw javascript, html, and css files that will be used by Cordova to build our app.

📜 config.xml

📜 package-lock.json

📜 package.json

---

✍️ Feel free to edit the following folders and files:

📁 public/

This contains the html files as well as photos, videos, sounds that we will use in the app.

📜 favicon.ico - is the icon of our app when shown in browser

📜 index.html - Visible part of the app. We usually do not need to make any changes here.

📁 src/

This contains the javascript files that we will use for the main logic of the app along with some few .css files. You can add any .js or .css file here as needed. 📜 index.js - You do not need to modify this file. This is the entrypoint of the app and only starts the main component and imports the css files.

📜 App.js - Main component of our app, this is where the QR Code logic happens, feel free to modify.

📜 index.css - Every design of our app is in here.

---

⚖️ Code of conduct

• If installation of anything in here goes wrong, contact me
• After making changes and you are satisfied with it, contact me if you want to merge it to the main Git branch first.
• Always ask for permission before deleting or modifying any code written by others.
• Please feel free to add useful tips here in README.

Make sure to run git pull first on your project so we work on the same versions.

✔️ Development To-Do

Please add more here so we don't lose track of our progress.

• Adjust size of QR Code Camera and it's position.
• Choose color theme for the app (Blue & Yellow)
• Make app logo and replace public/favicon.ico
• Once QR Code scan is successful, app should write the student's name, guild in the respective section they belong in google sheets. Refer to this tutorial. For the meantime, we can just display the name, guild, and section.
• Display a creative error message if camera error or parse error
• Switch to different camera if camera is clicked
• Allow app users to modify which google spreadsheet link to update
• Once QR Code is scanned, search by guild or section, then search by name, then update red attendance to green to mark as present
• Add a better layout to student information section
• Make sidemenu work
• Editable input for google sheets id
• Generate a permanent access token
• Add sidemenu content
• Creative error handling