CIA-Taplist

About

This repo sets up a digital taplist using a github pages deployment for the frontend and a Google Sheet + Apps Script for the database/backend. The page is laid out for 8 taps and to be displayed on a monitor in portrait orientation.

Setup Instructions

1. Fork this repo

Google Sheet Setup

2. Create a copy of this google sheet

3. Copy the spreadsheet ID from the URL (i.e. docs.google.com/spreadsheets/d/----THIS-VALUE-HERE----/)

4. In the sheet, select App Script from the Extension menu

5. Change line 31 and line 106 to reference the current spreadsheet

   • Before: var doc = SpreadsheetApp.openById("1y2t5XG_PkP_vOl66ghIpP1yk6WuhaZ0u8bPeNA-vo8E")
   • After: var doc = SpreadsheetApp.openById("---YOUR-ID-FROM-STEP-2---")

6. Click "Run" in the menu bar

   • When prompted for authorization, click Review Permissions
   • A Google Auth prompt will appear. Click your username
   • Google will display a warning: "Google hasn't verified this app". Click Advanced at the bottom of the prompt then Go to Recieve Post Data (Unsafe)
   • Click "Allow" to allow the app to change the spreadsheet on your behalf

7. Click "Deploy" in the top right corner

   • Enter a description
   • Execute as "Me"
   • "Anyone" has access

8. Get the script ID

   • Select Project Settings (gear icon) from the left menu
   • Copy the Script ID

Github Repo Setup

9. Change the login.js and index.js repo files

   • Open each of the files above
   • Replace the current script ID with your script ID (format: "https://script.google.com/macros/s/----YOUR-SCRIPT-ID-HERE----/exec")
   • Commit the changes

10. Deploy to Github Pages

    • Select Settings in the github repo
    • Click Pages on the left menu
    • Deploy from "master" branch
    • Your site should be live at https://YOUR_GITHUB_USERNAME.github.io/CIA-taplist/

11. Update the links and QR codes

    • Use a QR code generator to generate a QR code link to the Google Form that was created when you copied the sheet
    • Replace addOnDeckBeer.png image with your updated QR code
    • Use a QR code generator to generate a QR code link to the "login" page (i.e. https://YOUR_GITHUB_USERNAME.github.io/CIA-taplist/login)
    • Replace login.png image with your updated QR code
    • Commit your changes

12. Update the club images

    • Change this img src property to update the club logo at the top of the page
    • You can also change the AHA logo if you desire
    • Commit your changes

13. Change the password

    • The tap edit page is 'protected' by a low security passphrase.
    • Change this to whatever you want (it's currently CIAlers). Or, leave it blank!