DIY Guide for Hosting the Timetable Web-app
So, you want to host one of this for your class, you’ve come to the right place. Time-table
What is this Web-app?
The timetable web-app is a simple app to display the day’s Class Timetable.
It supports the publishing of alternate schedules or fall-back to the regular timetable all in the control of an easy to use Google Form. The app also features Google Account pre-selection, Dark Mode and also a Notification when its time for the next Period!
Assumptions I’m gonna assume a few things here,
- You know how to use Github.
- You have an account in Github.
- You know basics of programming (optional).
- You know how to make Google Forms and Google Sheet Responses.
Forking my Repository
Head over to Github.com and fork my repository.
In your fork, be sure to enable Github pages for your branch. To enable Gh-pages navigate to :
Settings > Github Pages > Select Branch
Wait for Github to respond with
Your site is published at ..../time-table/
Click the link and See if the Deployment is successful and the page loads correctly or not.
Setting Up the Google Form Now to make a Google Form that works as the back-end panel, click the link below to Make a copy of the Form.
Setting Up the Response Sheet
In your form, Go to the Responses tab and Click the
Spreadsheet icon to generate a Responses Sheet.
Go to the Responses Sheet and Click the
Share button on the top right. Copy the ID of the sheet which is in the form. Ensure you grant Only View privileges in the Share Tab.
Copy that ID and keep it for the next step.
Modifying Links in Web-App
In your Github fork, navigate to
Scroll down a bit and look for the variable
Replace the existing ID with the ID you copied in the prev step.
The variable should now look like:
Your WebApp is now configured to source from the sheet!
Adding Supporting Sheets
Open the supporting sheets with the link below,
On the bottom you’ll see 4 sheets
Links | TimeTable | TimeStart | TimeEnd
Right click each of those 4 sheets and Click
Copy to > Existing SpreadSheet and select the Responses Spreadsheet.
Now Open your updated Responses Sheet and ensure you now Have 5 Sheets.
Rename the Main Response Sheet (First Sheet) as
Updating the Sheet
Update the Sheet with your Content.
- Row 1 => Subjects
- Row 2 => Class Room IDs
Paste only the /c/abcd… portion, ignore anything after ‘?’
- Row 3 => Colors as HEX
- Row 4 => Meet Links
Remove anything after ‘?….’
- Fill in your Timetable
- Ensure the period(1st row) and days(1st column) aren’t modified.
Sheet: TimeStart and Sheet: TimeEnd
- Like the previous, Edit the timings for Normal Days.
- If you follow the same timetable for all the days, Copy the same timings to Friday’s row.
Go to your Form, and update the Options for Period 1,2,3,4,5 to the same ones entered in
Ensure the spellings are maintained and no Spaces are present.
Go to your Hosted App using the URL.
Replace your Github Username in the above link and Check it out!
Hope it helps!
Read the More about the Backstory behind this…