Digital Signature Form

Overview

This project will help you getgain familiarhands-on experience with ourmodern technicalfrontend setuptechnologies byand integratingGoogle Apps Script integration. You will build a digital Code of Conduct application form for Children’s Ministry as a Google Apps Script web appapp, designed to be embedded into our BookStack knowledge base. You will be working with Docker, Google Apps Script,base and BookStack.to support digital signature and PDF output.

You are encouraged to use AI code assistants (such as Cursor and GitHub Copilot) to accelerate your development and improve code quality.

Objectives

• Set up and run the BookStack app using Docker containers.
• Create and deployBuild a "HelloCode World"of Conduct application form as a Google Apps Script web app, using HTML5, ES6+, CSS3/6, and Web Components for the frontend.
• Accept digital signatures via the web app.
• Generate a PDF of the submitted application, and save it to a specified Google Shared Drive.
• Embed the web app as an iframe in a BookStack page.
• RecordConsult awith shortyour demomentor video(Thian-Peng) toas demonstrateneeded—especially theregarding setup.digital signature capture and PDF generation/storage.

Prerequisites

Before starting, please review the following documentation to ensure a smooth setup:

• BookStack Official Documentation
• Docker Documentation
• Google Apps Script Documentation
• Web Components Overview

Tasks

1. SetPlan Up& BookStack with DockerResearch

• UseStudy the sample forms at:
  • official BookStack Docker guidehttps://training.saskcac.ca/children-ministry/code-conduct or our internal repository if available.
  • Ensurehttps://training.saskcac.ca/children-ministry/application
  the
  BookStack
app
• Review ishow accessibledigital locally,signatures are captured in HTML5 (e.g., using http://localhost:8080<canvas> and libraries like Signature Pad).
• LogResearch inoptions usingfor thePDF defaultgeneration orand configuredsaving credentials.
files

Expected Outcome: BookStack app is running locally in Docker.

---

2. Createto a Shared Drive via Google Apps Script (e.g., using PDF-LIB, or Apps Script’s built-in capabilities).

Consult with your mentor before final implementation of digital signature and PDF storage.

2. Set Up Your Development Environment

• Set up a new Google Apps Script project.
• Scaffold your frontend using HTML5, CSS, ES6+, and Web Components. (Consider using VS Code, Cursor, or other AI-enhanced IDEs.)
• Use a modular approach and write clean, maintainable code.

3. Build the Application Form Web App

• GoRecreate tothe script.google.comCode of Conduct application form as the first milestone.
  • Include all required fields (name, email, etc.).
  • CreateAdd digital signature capture.
• Validate and submit the form data to the backend (Google Apps Script).
• Implement form data handling in Apps Script.

4. Generate and Store PDF

• On submit, generate a newPDF projectversion of the completed application form, including the digital signature.
• Store the generated PDF in the designated Google Shared Drive folder.
• Ensure only authorized users can access the PDF (discuss with mentor).

5. Deploy and pasteEmbed

the following code:

function doGet() {
  return HtmlService.createHtmlOutput("<h1>Hello World</h1>");
}

• Deploy the scriptweb asapp publicly or with appropriate permissions.
• Embed it into a web app:
  • Click Deploy > New deployment.
  • Click Select type and choose Web app.
  • Enter a description, e.g., "Hello World Deployment".
  • Under Execute as, select Me.
  • Under Who has access, select Anyone.
  • Click Deploy.
  • Authorize the script if prompted.
  • Copy the deployment URL.

Expected Outcome: A public URL that displays "Hello World".

---

3. Embed the Web App in BookStack

• Log in to your local BookStack instance.
page
• Create a new Page or editusing an existing one.
• Use the following HTML to embed the web app:

iframe:

<iframe src="YOUR_WEB_APP_URL_HERE" width="100%" height="500"800" style="border: none;"></iframe>

Embedding external content via iframes may require additional configuration in BookStack to allow such content. Refer to

Test the BookStackfull documentationworkflow.

for guidance on adjusting settings to permit iframe embedding.

Expected Outcome: A page in BookStack that shows the embedded "Hello World" web app.

---

Final Deliverable

Please

record
• A working Google Apps Script web app that replicates the Code of Conduct form, accepts digital signatures, generates a shortPDF, demoand stores it in a Google Shared Drive.
• Demo video (2-5 minutes) showing:
  • The BookStackweb app running in(form Docker.fill + signature + PDF output)
  • The PDF saved on Google Drive
  • The form embedded "Hello World" app functioning in BookStack.
  • A brief explanation of your setup.BookStack

• Upload the video to the following Google Drivethis folder:
  Upload Link

---

Questions or Issues?

• If you runget into any problemsstuck or have questions,any questions (especially about digital signatures or PDF storage), reach out to Thian-Peng directly onvia Signal.Signal or your usual channel.

---

Tip: Don’t reinvent the wheel—use AI code assistants like Cursor and GitHub Copilot to help you learn and move faster.

---