Development Projects

This chapter contains hands-on development tasks designed to help you apply what you’ve learned and contribute to our church’s technical projects. Each page in this chapter outlines a self-contained project, complete with step-by-step instructions, goals, and deliverables. Start with the first project and work through them at your own pace. As new needs arise, we’ll continue adding more projects here.

BookStack + Google Apps Script Integration Demo

Overview

This project will help you get familiar with our technical setup by integrating a Google Apps Script web app into our BookStack knowledge base. You will be working with Docker, Google Apps Script, and BookStack.

Objectives

Prerequisites

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

Note:

Tasks

1. Set Up BookStack with Docker

Expected Outcome: BookStack app is running locally in Docker.

2. Create a Google Apps Script Web App

  1. Go to script.google.com.
  2. Create a new project and paste the following code:
function doGet() {
  return HtmlService.createHtmlOutput("<h1>Hello World</h1>");
}
  1. Deploy the script as 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

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

Embedding external content via iframes may require additional configuration in BookStack to allow such content. Refer to the BookStack documentation 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 short demo video showing:

Upload the video to the following Google Drive folder:
Upload Link

Questions or Issues?

If you run into any problems or have questions, reach out to Thian-Peng directly on Signal.

Digital Signature Form

Overview

This project will help you gain hands-on experience with modern frontend technologies and Google Apps Script integration. You will build a digital Code of Conduct application form for Children’s Ministry as a Google Apps Script web app, designed to be embedded into our BookStack knowledge base and 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

Prerequisites

Tasks

1. Plan & Research

2. Set Up Your Development Environment

3. Build the Application Form Web App

4. Set Up Google Sheets Integration

5. Generate and Store PDF

6. Deploy and Embed

Final Deliverable

Questions or Issues?

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

Church Offering Deposit Form

Overview

This project builds upon the digital signature form project to create a mobile-friendly offering deposit entry form. The form will streamline the process of recording multiple donations collected during church offerings, with digital signatures from two counting staff members.

Due Date: August 31, 2025

Objectives

Prerequisites

Before starting, ensure you have completed the digital signature project and are familiar with:

Database Structure Setup

1. Create Required Google Sheets

Create three Google Sheets in your project folder:

Sheet 1: "Offering Deposits" (Main Data Sheet)

Columns: Date, Name, Payment Form, Amount, Offering, Note, Counter 1, Counter 2, Timestamp, PDF File ID, Drive Link, Status

Sheet 2: "Offering Counting Staff"

Columns: Name, Active Status Pre-populate with:

Sheet 3: "Funds"

Columns: Fund Name, Active Status, Display Order Pre-populate with:

Development Tasks

  1. Create Efficient Deposit Entry Interface
    Design for Speed:
    • Use a repeatable row component for deposits
    • Implement "Add Another" functionality
    • Auto-calculate running totals
    • Validate data as user enters data
  2. Implement Dual Digital Signature
  3. Backend Data Processing
  4. PDF Generation with Signatures
  5. Data Validation & Error Handling
  6. Optimize
    • When entering the person who makes the donation, provide the ability to select people who make donations previously to allow rapid selection.

Technical Specifications

Mobile Breakpoints:

User Experience Flow

  1. Setup Phase: Select date and two counting staff members
  2. Data Entry: Add deposits one by one with quick workflow
  3. Review: Show summary with totals by fund type
  4. Signatures: Capture both staff signatures
  5. Submission: Generate PDF and save to sheets
  6. Confirmation: Show success message with PDF link

Final Deliverable

Required Outputs:

Testing Checklist:

Questions or Issues?

If you encounter challenges during development, especially with mobile optimization or performance issues, reach out to Thian-Peng directly via Signal.

This project emphasizes practical mobile UX for rapid data entry while maintaining the robust backend architecture from the digital signature project.