Why I Took on this Project
Around my second to third week at ECTS, Mr. Klins told be about a dream where the Google Drive Resource was on a website, so it was easier to use and more personalized for our school use. I have had a lot of time in backend and frontend, so i told him I would try to make his dream come true; thus, here we are now! After MANY hours of making the API work and HUNDREDS of ChatGPT prompts, we are finally at a working CMS!
Objectives and Goals
There were some requirements that he wanted for the CMS. They were not too hard, but they were a must for down the road.
- Login via School Account (TODO: Working Login)
- Commenting System (Complete)
- Rating System (TODO: Not Started)
Initial Challenges
I am not going to lie to you, everything was a challenge. The main problem looking back on the weeks I spent on this was that google doesn’t have good documentation for things. Permissions was a HUGE problem writing the code. Now back to the start to finish. The frontend was hell (at this time isn’t close to being done). Connecting to google cloud service via service accounts isn’t very hard to do. The problem is that there is no document on the permissions service accounts have (The only thing I figured out is that they are different from normal google accounts). So once I got that to work, I got a blank react to show files. IT WORKED but not for anything other than Google Docs, Google Sheets etc. So I tried to use <video> for the videos. I’m not going to explain in detail on why it doesn’t work and the process I did to figure it out (unless I get comments that you want it), but in simple forms, there must have been a permissions update recently that didn’t allow <video> to display drive files. I tried iframes too. The solution I found was using a different link.
The next problem I had was the comment system. I’m just going to say, Permission testing is nice, BUT NOT WHEN YOU’RE IN DEVELOPMENT PROCESSING. I probably spent a week trying to get it to work by checking if it had access to the file, then it would add a comment after. That was the problem, service accounts can’t check if it has access for some reason. Anyway, after I learned that, the comment went through and worked. The only problem is that it would use the service account as the commenter, so I tried adding a username form for the user to send with it, but it didn’t work. So my solution was to make another auth for logging in via Google for comments and using the service account to view the CMS Folder.
Lessons Learned
- What Worked Well
- Passport.js – Great and easy to manage login and auth system for backend
- Bootstrap – Great for easy styling
- Areas for Improvement
- Planning – I had no planning or any documentations other than requirements. I should have made a list of URLs for the backend to have. List of permissions I would need. Most of all, research BEFORE more deeply then limiting myself to only the way I set upped before researching.
- Documentations During Coding instead of after.
Conclusion: Future Plans
- Future Enhancements
- Limiting to only ECTS organization can access the ECTS (plan to this week actually)
- Better Display (currently it is at base minimal Styling)
- Cross-Device Usage
- Admin Permissions
- Searching
- Rating System
This is Part One of this document, I plan to make more parts when they get done. See you next time!
