Narrative for SD Module #33
Description
AP CSP Presentation Script: The San Diego Food Quest
This script outlines the talking points and actions for presenting the "San Diego - CREATE" submodule for the AP CSP Night at the Museum event.
- Introduction & The Big Idea
Action: Have the page loaded and visible on your screen.
"Good evening everyone, and thank you for coming! My name is [Your Name], and for my AP Computer Science Principles project, I wanted to explore how the apps we use every day—like DoorDash, Instagram, or even just saving a contact in our phone—actually handle data."
"Specifically, I focused on one of the most fundamental concepts in all of programming: CRUD. It stands for Create, Read, Update, and Delete, and it’s the backbone of almost every application."
"To make this concept fun and interactive, I created the San Diego Food Quest. This webpage is the first part of a larger project, and it focuses entirely on the 'C' in CRUD: Create."
"The idea is simple: what if we could learn how data is created by pretending to build a digital menu for San Diego? On this page, we're not just looking at code; we're going to actually create new food dishes and add them to our own mini-database that lives right here in the browser." - The User Interface Tour
Action: Briefly point to different parts of the screen as you talk.
"Before we dive in, let me quickly show you around."
"At the top, we have a Progress Tracker. As we complete each task, you'll see this update in real-time, which is a great way to see our progress."
"The main content is broken down into six tasks. Each task is a hands-on activity designed to teach a different aspect of 'creating' data."
"For each task, you'll see a description, an interactive element—like a code editor or a form—and a terminal window right below it. This terminal is like a little console that shows us the output and confirms that our actions are working." - Task 1 & 2: Conceptual Foundation
Action: Scroll to Task 1. You can optionally click "Run" to show the output.
"To start, we don't jump straight into databases. First, we need a blueprint for our data. In programming, we often use something called a Class."
"Here in Task 1, I've defined a FishTaco class. Think of it like a recipe card: it defines all the properties a fish taco should have, like fishType, toppings, and price. By running this code, we create a digital 'instance' of a fish taco. It’s the first step in organizing our data."
Action: Scroll to Task 2.
"Task 2 builds on that. We created a BurritoCart class. This is like a container—it can hold multiple burrito objects. This simulates how an app might manage a collection of items, like a shopping cart on Amazon, before you check out." - Task 3: Interactive Creation (The Fun Part!)
Action: This is a great place to get the parents involved.
"Now, let's actually create something together. Task 3 lets us build a Baja Bowl using a web form, which is something we all do online every day."
"First, we have our fields: Dish Name, Category, and Calories."
"And every dish needs ingredients. Can I get a suggestion for an ingredient?"
Action: Let a parent suggest one, like "rice" or "beans".
"Great! I'll add 'rice', quantity '1', and unit 'cup'."
Action: Type the ingredient in and click the "Add" button.
"As you can see, it appears in our list."
Action: Now, click the "Create Dish (POST)" button.
"When I click this 'Create' button, two things happen. First, the page simulates sending this data to a server. This is the CREATE operation in action. Second, look at the terminal: we get a success message back from our mock server, confirming that our 'Baja Bowl' was created with a unique ID and a timestamp. The progress tracker at the top also updated to show Task 3 is complete!" - Task 4 & 5: Automation and Efficiency
Action: Scroll down to Task 4.
"While forms are great for users, developers often need to create data automatically. Task 4 shows how we can do this with code."
"Inside this editor is a pre-written script to create 'Carne Asada Fries.' When I click Run, it does the exact same thing as the form—it sends the data and gets a success response—but it does it programmatically. This is super important for things like automated testing or loading initial data into an app."
Action: Click "Run" and point to the terminal output.
Action: Scroll to Task 5.
"Task 5 takes this one step further. What if we have a whole menu to add? We don't want to send one request for every single dish. That would be slow. Instead, we do a bulk operation."
"This 'Seed Pantry' button will create three different dishes all in a single network request. It’s much more efficient."
Action: Click the "Seed Pantry" button and show the terminal.
"As you can see, the server confirms that all three dishes were created successfully." - Task 6: The Payoff - Verifying Our Work
Action: Scroll to Task 6, the final task.
"So we've spent all this time creating data in different ways. But how do we know it’s actually all there?"
"That’s what the 'R' in CRUD, Read, is for. Our final task, Task 6, simulates fetching all the San Diego dishes from our database."
"When I click View Pantry..."
Action: Click the button and scroll through the terminal output.
"...look at that! The terminal now shows a list of every single dish we created tonight:"
"Here is the Baja Bowl we built together from the form."
"Here are the Carne Asada Fries we created with our script."
"And here are the three dishes we added with the 'Seed Pantry' button."
"This final step proves that all of our CREATE operations were successful and our data is now saved and ready to be used." - Conclusion & Thank You
"So, in just a few minutes, we've walked through the entire lifecycle of creating data—from designing a blueprint with a class, to building it with a form, to automating it with code."
"This project was a really fun way for me to understand the fundamental building blocks of the applications I use every day. Thank you so much for your time and for letting me share it with you!"