Video summary

웹만들기 2차시

Main summary

Key takeaways

Educational

Main ideas / lessons conveyed

  • Session goal: Build and deploy a web-based educational AI tool using Google products plus an AI API.
  • AI tool choice (coding help):
    • The speaker mainly uses Claude for coding tasks, claiming it has the shortest output, fewest errors, and best design.
    • They recommend FunNai as an alternative for viewers who may not have access to Claude.
    • They mention GPT as another option but say it produces more errors.
  • What Jeminai/FunNai can do (teaching context):
    • The tool includes a storybook feature to generate a simple moral education fairy tale with consistent images, plus text/audio.
    • A key advantage highlighted is image consistency, which helps teachers/students produce learning materials or deliverables.
  • Core methodology: “canvas → program” mindset
    • Treat a canvas like a work surface for creating outputs such as PPTs, code, and programs.
    • The workflow for designing an educational web app involves:
      • specifying expected effects,
      • specifying required inputs,
      • then generating the program logic.
  • Educational philosophy (why AI should not replace thinking):
    • Teachers’ broader expertise (philosophy, administration, psychology, subject understanding) still matters.
    • AI is important—especially for students doing assignments—but educators should ensure students don’t become dependent and continue thinking.
  • Why this approach fits schools:
    • The tool can store data in Google Sheets/Drive and run AI analysis.
    • The speaker claims it’s easier than building a monetizable service because full “service” features require heavier real-time complexity.

Detailed instruction / methodology presented (step-by-step)

A) Big-picture architecture (what components are needed)

Understand the big picture/components:

  • Interface (front end): what the user sees/clicks.
  • Server / backend logic: routes actions and coordinates processing.
  • Database / data storage: where records are saved (location matters).
  • Authentication / security: needed for security and to know “who did what.”

B) Recommended “free” implementation stack

  • Store data in:
    • Google Sheets (records such as submissions and timestamps)
    • Google Drive (uploaded files/images)
  • Build the web app using:
    • Google Apps Script (backend + integration with Sheets/Drive)
  • Connect everything with:
    • Jeminai/FunNai via an AI API (natural language + API calls)

C) Create the AI API key (Google AI Studio workflow)

  1. Go to Google AI Studio
  2. Click “Get API Key”
  3. Choose Create API Key
  4. Create Project
  5. Create Key
  6. Copy the API key and insert it into the later guide/app setup.

Privacy instruction:

  • Do not share the key with people outside the class to avoid unwanted usage charges.

Use a provided guide document:

  • The speaker points to a “Web Production Guide” at bit.lyy/ly/
  • Steps include:
    • Copy the document
    • Paste the API key into the copied template
    • Complete the form so the app structure gets created
  • The guide also serves as a setup blueprint for Sheets data recording and app creation.

D) Plan the educational app (example: field trip report analysis)

Define user flow / key functions (from the student perspective):

  1. Enter student ID and name
  2. Choose gender
  3. Enter grade level
  4. Select the field trip institution visited
  5. Upload photos taken during the field experience
  6. Write a reflection paper

Main app features described:

  • Students submit photos + reflection.
  • The system provides feedback by comparing/analyzing the reflection using AI.

E) Set up Google Sheets as the data record

  1. Create a spreadsheet in Google Drive
    • Example title: “field trip report”
  2. Create columns/fields, including:
    • Timestamp (submission date/time)
    • Student grade level
    • Name
    • Gender
    • Experiential learning / institution visited
    • Photo URL
    • Reflection
    • (Also mentioned: AI analysis fields/time/output as part of recorded results)
  3. Add “Yes”/activation toggles as required by the template (as described in the video).

F) Implement the web app in Google Apps Script (front end + back end)

  1. Open Google Sheets → Extensions → Apps Script
  2. Use two core files/parts:
    • index.html = front end
      • UI elements: designed text, buttons, interactions
    • Code.gs = backend
      • Handles routing/logic for button actions and what outputs are returned
  3. Add an HTML file:
    • Add File → HTML
    • Name it Index (index.html)
  4. Insert code produced by AI:
    • Front end: paste generated index.html content into index.html
    • Backend: paste generated Code.gs content into code.gs
  5. In Code.gs, insert required configuration:
    • Paste the API key
    • Retrieve/paste the Google Sheet ID:
      • copy the part of the Sheets URL after /d/
    • Reference the sheet name (e.g., “Sheet1” + specific tab name)
  6. Ensure matching field structure:
    • Copy the AI/template’s sheet field mapping and paste it exactly (with appropriate placement).
  7. Save and verify quickly:
    • The speaker emphasizes: if errors occur, ask for fixes and retry.

G) Deploy the web app

In Apps Script:

  1. Web → Deploy
  2. Choose access settings

Security options described:

  • If you want controlled access: require Google login
  • Otherwise: provide access broadly, but for school use the speaker suggests login so you can identify users.
  1. Grant access approvals
  2. Handle warning prompts:
    • If prompted with a “not safe/danger” warning, proceed using the “Not dangerous” option (as described).

H) Test the app end-to-end

  • Open the web app and test:
    • select a student,
    • choose an institution,
    • upload photos,
    • write reflection text
  • Confirm:
    • AI feedback generation
    • record logging in Google Sheets
    • photo URL/file linkage via Google Drive

Overall takeaway

  • You can create a functional school-suitable AI educational web tool quickly using:
    • Google Sheets + Google Drive + Google Apps Script
    • plus an AI API to analyze student submissions.
  • Focus on education quality and student thinking, not replacing student effort.
  • It’s suitable for educational settings because it’s easier than full commercial “real-time service” products.

Speakers / sources featured

  • Speaker: Unnamed instructor/lecturer (teaching “웹만들기 2차시” / “Web making, 2nd session”)
  • AI tools mentioned (sources):
    • Claude (coding/assistance)
    • GPT
    • Gemini (mentioned for paid-tool comparison)
    • FunNai / Fun Kid (recommended alternative)
  • Google services (sources/tools):
    • Google AI Studio (API key creation)
    • Google Sheets (data storage)
    • Google Drive (file storage/uploads)
    • Google Apps Script (web app development)
  • Other mention: React (from a prior session comparison)

Original video