Courses/AI Kitchen/Episode 7
Open to the World
Going properly public: environments, one-click deploy, your own domain with DNS and HTTPS, customer accounts, payments, Postgres, Docker and SSH.
Customers want to pay online and keep their points at both cafés. Lan learns the difference between the test kitchen and the real kitchen, opens the doors with one button, gets an address of her own, builds customer accounts (and sees why passwords are hashed), takes money safely with a payment gateway and webhooks, moves to a bigger order book, packs a lunchbox (Docker) for her own server, and decides what customer data not to collect.
26 new words, from Environment to Consent. Honest note: money and personal data carry legal and security weight. Use a well-known payment provider, and get expert help for anything serious.
What you will learn
- Development, staging and production environments
- Deploying a website, and your own domain with DNS and HTTPS
- Customer accounts, authentication and password hashing
- Taking payments safely with a payment gateway and webhooks
- Moving from SQLite to Postgres, plus Docker and SSH in plain words
- Privacy: what to collect and what not to
- Environment
- each kitchen with its own tools
- Development
- the test kitchen on your machine
- Staging
- the dress rehearsal
- Production
- the real customers' tables
- Hosting
- renting a shopfront online
- Build
- boxing the dish before delivery
- Preview
- a sneak peek for family
- Domain
- the shop's name sign
- DNS
- the phone book: name to number
- HTTPS
- a sealed envelope with a lock
- Account
- the membership card
- Authentication
- checking the card at the door
- Password hash
- a blended password
- Payment gateway
- the bank's card machine, online
- Webhook
- the bell that rings the shop
- Sandbox
- test mode with toy money
- SQLite
- the counter notebook
- Postgres
- the head-office ledger
- Migration
- copying the old book into the new
- Docker
- the lunchbox packing service
- Container
- a running lunchbox
- Server
- a kitchen you rent
- SSH
- the back-door key
- Privacy
- the right to your own information
- Personal data
- information about one person
- Consent
- the customer's agreement
Task: Open the Env Manager, see which env files your project has, and check that secret keys are hidden.
Task: Deploy a Preview of your project, open the link on your phone, and ask someone at home to taste it.
Help me deploy a preview of this project to Vercel, and explain each step you take.
Task: Think of three domain names for your project, check whether they're free, then click the padlock on a site you use often.
Task: Ask your chef whether your project stores passwords as hashes.
Check for me: are user passwords in this project stored as hashes? Explain it in plain words.
Task: In the HTTP panel, create two environments, Local and Staging, and switch between them to see the request address change.
Task: Click a database file (.db) in the file tree to open it in the Database panel, then look at its tables and count the rows.
Task: Open the Docker Manager and the SSH Manager in 1DevTool. Just look, no need to run anything.
Task: Ask your chef to list every piece of information your app asks users for, then cross out what you don't truly need.
List all the personal data this project collects, and suggest removing anything that isn't truly needed.
Generated from the episode’s subtitles. Click a line to jump there.
Tu: Last time, right on Tết, the loyalty app gave customers double points. Lan calmly rolled back, found the bug, and swapped out the leaked key.
Lan: And wrote a whole lessons book. I'm not scared of bugs anymore.
Customer: Lan, I forgot my cash. Can I pay through the app?
Lan: Not yet, sorry. Could you do a bank transfer for now?
Customer: Also, I had a drink at your second branch yesterday, but my card here has no stamp. Don't the two shops share a card?
Lan: Um... let me ask the chef.
Lan: Tu, customers want to pay online and collect points at both shops. Just hearing that scares me.
Tu: Being scared is right. Until now, our app has been like a little shop down an alley, only regulars came by. Now you're opening onto the main street. A main-street shop needs a sign, proper locks on the doors, and a real cash register. This episode,
Tu: we'll do them one at a time.
Tu: Eight chapters: the test kitchen and the real kitchen, the open-the-doors button, your own address, customer accounts, taking money safely, a bigger order book, the lunchbox, and finally keeping customers' secrets.
Lan: Sounds like I'm learning to open a whole chain.
Tu: Review from last time: if an API key leaks, what's the first thing you do?
Lan: Swap in a new key right away. That's called rotating it. Deleting the picture isn't enough.
Lan: Yesterday I changed the white coffee price right on the live site. I missed a zero, and customers saw white coffee for three thousand đồng.
Tu: So you tasted the dish right at the customer's table. A big restaurant always has two places. A test kitchen, where chefs try things and season freely. And the real kitchen, where dishes go out to customers.
Tu: In software, the test kitchen is development. The chef works on your computer, at the localhost address we learned in episode one. In the middle is staging. It's like the dress rehearsal before opening day:
Tu: exactly like the real shop, but only family gets to taste. And production is the real kitchen, where real customers pay real money. Every dish that gets here has been through the other two first.
Lan: So my three-thousand-đồng price should have been caught at the dress rehearsal.
Tu: Each of these places is called an environment. Each environment has its own tools: its own keys, its own order book. The test kitchen uses toy money and a scratch order book. The real kitchen uses real money and the real order book. Never mix them up.
Tu: 1DevTool has an Env Manager. Each environment is its own file: dot env local for the test kitchen, dot env production for the real one. Secret keys are hidden behind dots. You click to reveal them, so a screenshot won't leak them like last time.
Lan: Last episode's lesson is already paying off.
Bin: Auntie, this is just like my games! New updates always go to a test server first, and only when testers say it's fine does it go to the main server.
Tu: Exactly, Bin. The test server is staging, the main server is production.
Lan: Turns out gamers have understood this for ages.
Tu: New words: environment, development, staging, and production.
Tu: Try it now: open the Env Manager, see how many environments your project has, and check that the secret keys are hidden.
Chapter 2: One button to open the doors
Tu: Quick question: which environment is the dress rehearsal before opening?
Lan: Staging! And the real customers' tables are production.
Lan: Back in episode one, on opening day, you put the site online for me. This time I want to do it myself.
Tu: Great. Taking the dish from the kitchen to the table is called deploying, you know that one. And the place your shop lives online is called hosting. Hosting is like renting a shopfront. You don't build the building,
Tu: you rent a nice spot with power and water ready, and move your dishes in.
Tu: Every deploy has three steps. One: build, packing the dish up neatly, like boxing it before delivery. Two: deliver the box to the host. Three: serve it, and your site gets an address customers can visit.
Lan: Like the café's delivery scooter! Box it, ride it over, hand it over.
Tu: One more common word: preview. It's a sneak-peek version with its own address, for family to check before the real thing. A preview is the dress rehearsal from last chapter, except it's online, and anyone with the link can see it.
Tu: 1DevTool has a Deploy panel. It reads your project and works out what kind of dish it is, which build command it needs, and which folder the box ends up in. You pick a host, Vercel or Cloudflare Pages.
Tu: You paste your access token once, and it stays on your computer. Then choose the Target. Preview is the rehearsal, Production is the real thing. Press Deploy, and watch the log run right in the panel.
Lan: No extra websites to open. I like it.
Lan: Head chef, please deploy a preview of the checkout page for me.
AI Head Chef: Sure. Built, uploaded. Here's the preview link. You and Bin can taste it on your phones first.
Lan: Family tastes first, customers later. Just like the lesson.
Tu: A few honest notes. One: the Deploy button in 1DevTool is part of Pro. The free version can still deploy, you just ask the chef to type the commands in the terminal. Two: hosts usually have free plans, which are enough for a small shop.
Tu: You only pay more when the crowds come. Three: hosts keep your old versions. If the new one breaks, go back to the previous one, just like our save-game button.
Tu: New words: hosting, build, and preview.
Tu: Try it now: deploy a preview, open the link on your phone, and have someone at home taste it first.
Chapter 3: An address of your own
Tu: Review time: what's a preview?
Lan: A sneak-peek version for family to taste, before the real one.
Lan: The real site is up, but the address is so long, a jumble of letters and numbers ending with the host's name. Who could remember that?
Tu: Because you're in the host's building, you carry their address. You need a sign with your own name: caphemay dot V N.
Lan: Where do I buy a sign with my own name?
Tu: From a domain registrar. A few hundred thousand đồng a year. That name is called a domain.
Tu: But computers don't find places by name, they go by street number. Every server has a string of numbers called an IP address. DNS is the internet's giant phone book. The customer types the shop name, the phone book looks up the number,
Tu: and the browser goes to the right door.
Lan: So when I buy a domain, I write my shop's name in the phone book, next to the host's number.
Tu: Exactly. The host's website tells you which lines to add. Then you wait a few minutes, sometimes a few hours.
Tu: One more thing: HTTPS. It's the little padlock in the address bar. Without the lock, information travels like a postcard, anyone who handles it can read it. With the lock, it's a sealed envelope.
Lan: Taking customers' money by postcard? That would be a disaster.
Tu: The good news: hosts usually add the lock for free. Once your domain is connected, you get HTTPS. But still check it yourself. Don't just take anyone's word for it, not even the AI chef's.
Tu: Open the site in 1DevTool's Browser panel. The address bar tells you which kitchen you're in. Localhost is the test kitchen on your computer. An address starting with https, with the padlock, is the real kitchen customers see.
Lan: I'll open both side by side and compare everything.
Tu: Picture this: the domain is the sign, DNS is the guard at the end of the alley giving directions, HTTPS is the courier with sealed envelopes, and hosting is the landlady renting out the shopfront...
Lan: Okay, okay, that's enough. Your alley is more crowded than my café.
Tu: New words: domain, DNS, and HTTPS.
Tu: Try it now: think of three domain names for your project and check whether they're free. Then click the padlock on a site you use and see what it says.
Chapter 4: Customer accounts
Tu: Review: what is DNS like?
Lan: A phone book that turns a shop's name into a street number.
Customer: Lan, so how will the app know it's me, whichever shop I visit?
Lan: You'll get an account. Log in once, and stamps from both shops go on one card.
Customer: Will I have to remember yet another password?
Lan: Let me ask the chef and get back to you.
Tu: Each customer has an account, like a membership card with their name and stamps. Checking that the person knocking really owns that card is called authentication. The usual way is an email plus a password. Or you email a login link,
Tu: so customers don't need to remember a password at all.
Lan: Head chef, build the login for me. Will you write it all from scratch?
AI Head Chef: Better not. The login is the front door, the first place burglars try. I'll use a well-known login library that lots of sites already rely on. Here's the plan for your approval: a customers table,
AI Head Chef: a sign-up page, a login page, and a reset-password link.
Lan: Approved. For the front door you buy a good lock, you don't forge your own.
Tu: And the most important part: the shop must never keep a customer's real password. The password goes into a blender. Out comes a jumble of characters called a password hash. Once it's blended, nobody can put the fruit back together.
Lan: Then when a customer logs in, how do you know the password is right?
Tu: Blend the password they just typed, and compare the two smoothies. If they match, it's the right person.
Tu: Open the Database panel and look at the customers table. Names, emails, stamp counts. And the password column is nothing but jumbled characters.
Lan: Even I, the owner, can't read my customers' passwords. That's reassuring.
Tu: Right. Even if the book leaks, the thieves only get a pile of smoothies.
Tu: New words: account, authentication, and password hash.
Tu: Try it now: ask your chef whether your project stores passwords as hashes, and have it explain in plain words.
Chapter 5: Taking money safely
Tu: Quick question: what is a password hash like?
Lan: A smoothie. Once it's blended, you can't get the fruit back.
Lan: Now for money. I was going to have the chef make a box where customers type their card number, and save it in the order book. Handy, right?
Tu: Stop! I have to say this loudly: our shop never holds customers' card numbers itself. In the real shop, you don't build your own card machine. You use the bank's. Online it's the same: use a well-known payment gateway.
Tu: The customer taps pay and goes to the payment gateway's page. The card number stays with them, the shop never sees it. Once paid, the gateway rings the shop's bell: this order is paid. That bell is called a webhook.
Tu: Only when the bell rings does the shop mark the order paid, add a stamp, and make the drink.
Lan: So the shop just listens for the bell, and never holds anyone's card.
Tu: The gateway is called a payment gateway. The bell is called a webhook. And every payment gateway has a test mode called a sandbox. Toy money and fake cards, so you can test freely in the test kitchen.
Lan: Oh no, Mochi just walked on the keyboard. She pressed pay three times in a row!
Tu: Don't worry, we're in the sandbox. Mochi just spent toy money three times.
Lan: Phew. Actually that's useful: now I know to check whether the app charges three times if a customer taps three times.
Tu: To test the bell, open the HTTP panel. I saved a request that pretends to be the payment gateway, sent to the shop's webhook address. There's an environment picker: Local, Staging, Production.
Tu: Change it once and the whole set of requests switches kitchens. Underneath are automatic checks: the status must be two hundred, and the order must be marked as paid.
Lan: So I press Send and know whether the bell rings properly, without waiting for a real customer.
AI Head Chef: The payment gateway keys are in each environment's env file. Test keys for the test kitchen, real keys for the real one.
Lan: And never pasted into a screenshot. I learned that one the hard way last episode.
Tu: New words: payment gateway, webhook, and sandbox.
Tu: Try it now: in the HTTP panel, create two environments, Local and Staging, and switch between them to watch the request address change.
Chapter 6: A bigger order book
Tu: Review: what is a webhook like?
Lan: The bell the payment gateway rings to say an order is paid.
Lan: Both shops now write orders and add stamps. But our order book is a small file inside the project.
Tu: Right, that's SQLite. Like a notebook on the counter. One shop, one person writing, it's perfect. But two shops writing in one notebook means passing it back and forth. You need a ledger at head office that everyone can write in at once.
Tu: The notebook is SQLite: light, tidy, great when you're starting out. The ledger is Postgres, a database that runs on its own server. Many shops and many people can write at once without stepping on each other's toes.
Tu: And copying from the notebook into the ledger without missing an order is called a migration.
Lan: What if something gets lost in the copying?
Tu: That's why, before copying, we take a backup of the old book, like you learned last episode. After copying, count the rows on both sides.
Tu: 1DevTool's Database panel opens both kinds of book. Here's the list: SQLite, Postgres, MySQL, and more than ten others. Open the notebook and the ledger side by side, count the orders in each, and compare table by table.
Lan: So I only need one place to look at every book.
AI Head Chef: I read both books through 1DevTool's database tools, so I never need to hold the database password. The copy's done. The notebook has one thousand two hundred orders, and so does the ledger.
AI Taster: I tested writing orders from both shops at once. No orders lost, no stamps counted twice.
Lan: Our taster remembers last episode well.
Tu: New words: SQLite, Postgres, and migration.
Tu: Try it now: click a database file in the file tree and it opens straight in the Database panel. See which tables it has, and count the rows.
Chapter 7: The lunchbox
Tu: Quick question: what's copying the old book into the new one called?
Lan: Migration! And back up first.
Bin: Auntie, the app runs perfectly on my computer. But on the second branch's computer it's all red errors.
Tu: The most famous sentence in programming: but it works on my machine! Bin's computer has all the spices, the branch computer is missing a few. The fix is to pack everything into one lunchbox.
Tu: This lunchbox holds everything: the main dish is the app, the spices are the libraries, and even how to reheat it. Open it anywhere and it tastes the same. The most popular packing tool is called Docker.
Tu: A box that's open and running is called a container.
Lan: One recipe, as many boxes as you like. Like our office lunch orders.
Tu: 1DevTool has a Docker Manager. Each row is a box. This one holds the café's Postgres ledger, and it's running. Click a box to see its log, its settings, and how much of the computer's power it's using.
Lan: Without typing a single command.
Lan: So will I ever need my own server?
Tu: Not now. The host takes care of everything. But when the café grows, you can rent your own machine, called a server. Like renting a whole kitchen of your own. To get into that kitchen from far away, people use SSH.
Tu: It's like a back-door key, only the right key gets you in.
Tu: To sum up: Docker packs the box, a container is a running box, a server is a kitchen you rent, and SSH is the back-door key.
Tu: In 1DevTool, the SSH Manager keeps that whole bunch of keys. One row per server, with its name, user, and which key opens it. From here you can open a folder on the server like any normal project.
Tu: Open a terminal and you're standing in that faraway kitchen.
Lan: Every key with its door, clear at a glance.
Bin: Auntie, once the lunchbox is packed you can take it anywhere, like the café's delivery scooter!
Lan: You explain it better than Tu does.
Tu: Hey, metaphors are my job!
Tu: Honestly: for a small shop, a host is enough. Don't rent your own kitchen just because it sounds impressive. With your own server, everything is on you: updates, backups, locks. If it breaks at midnight, you're the one getting up.
Tu: When you really need one, bring in someone experienced to work with you.
Tu: New words: Docker, container, server, and SSH.
Tu: Try it now: open the Docker Manager and the SSH Manager and see what's on your computer. Just look, no need to run anything.
Chapter 8: Keeping customers' secrets
Tu: One last review: what is SSH like?
Lan: The back-door key to a faraway kitchen.
Customer: Lan, why does the sign-up ask for my birthday, my home address, and even my ID number?
Lan: What? I don't need your ID number!
Customer: It scared me a bit, so I haven't signed up yet.
Lan: Head chef, why does the sign-up form ask for an ID number?
AI Head Chef: I thought the more information we have, the more useful it'd be later.
Lan: No. If the shop doesn't need it, don't ask. Keep only the name, the email, and the birthday if the customer wants a birthday gift.
Tu: Here's the golden rule of personal data: keep only what you truly need. The left column is what the shop needs: an email to log in, a name to greet them, a birthday if they want a gift. The right column is what the shop doesn't keep: ID numbers,
Tu: home addresses unless it's a delivery, and card numbers, because the gateway handles those.
Lan: The less you keep, the less harm if it leaks.
Tu: Personal data is anything that can point to a specific person. Protecting it is called privacy. And consent means the customer agrees. Want to send promotions? Ask first, and only send if they say yes.
Tu: I'll be straight with you, no jokes in this chapter. One: holding customers' money and data comes with legal responsibility. Vietnam has its own rules on protecting personal data. Two: always use a trusted, well-known payment gateway.
Tu: Never store customers' card numbers yourself. Three: the AI chef writes good code, but AI isn't a lawyer. For anything serious, ask a qualified person.
Lan: Can the AI chef read my customers' data?
Tu: Only what you let it see. When you ask for a bug fix, show it a test book with fake names, not the real one.
Lan: What if the data leaks one day?
Tu: Do what we did last episode: calmly close the hole, change the keys, then tell customers honestly.
Lan: And if a customer wants their account deleted?
Tu: Then it has to be deletable, for real. Ask the chef to add a Delete account button right in the app.
Tu: New words: privacy, personal data, and consent.
Tu: Try it now: have your chef list everything your app asks users for, then cross out whatever you don't truly need.
Customer: Lan, the sign-up form is so short now. I've signed up. Paying... done! And my stamp from the second branch is there too.
Lan: Cloud Café's first online payment! What did you order?
Customer: One white coffee, please.
Lan: White coffee again!
Tu: Let's look back. The golden rule for opening up to the world has four steps. One: test in the test kitchen first. Two: lock the doors tight, from HTTPS to blended passwords. Three: keep as little data as you can. Four: for serious things,
Tu: ask an expert.
Lan: Test first, lock tight, keep little, ask an expert. Got it.
Tu: This episode you learned environment, development, staging, production. Then hosting, build, preview. Domain, DNS, HTTPS. Account, authentication, password hash. Payment gateway, webhook, sandbox.
Tu: Then SQLite, Postgres, migration. Docker, container, server, SSH. And privacy, personal data, consent.
Lan: Twenty-six more words! My café is really on the main street now.
Tu: Did you notice? At the start you were scared of the word payment. Now you take money online, have your own address, and one ledger for both shops.
Lan: And I know what I can do myself and what needs an expert. That's what really counts.
Customer: Hi Lan, I run the bubble tea shop across the street. I love your loyalty app. Could I buy it from you?
Lan: Sell... the app? I've never even thought about that.
Tu: Next time, the season finale: From Café to Company.
Tu: Download 1DevTool, try your first preview deploy, and remember: test in the test kitchen first.
Lan: See you at Cloud Café for episode eight!
AI Head Chef: I've added HTTPS, blended the passwords, locked every door. Now even I can't get into the kitchen.
Lan: Where's the key, head chef?
AI Head Chef: In the env file... which I also locked.