Full-Stack Basics: mga server, database at deployment

01

Paano nagkakabit-kabit ang isang full-stack app

In simple words

Ang restaurant ay may tatlong bahagi. Ang dining room ang front end: ang nakikita ng mga bisita. Ang kusina ang server: tumatanggap ito ng order at nagluluto. Ang pantry ang database: kung saan nakatago ang pagkain. Hindi kailanman pumapasok ang bisita sa pantry. Humihingi siya sa waiter, kukunin ng kusina ang kailangan, at babalik ang isang plato.

Bago ang course na ito: Front-End Development: responsive layouts and JavaScript apps (course 7.7.2). Dapat marunong ka nang gumawa ng responsive na page, magsulat ng JavaScript na nagre-render ng data, tumawag ng API gamit ang fetch, mag-handle ng loading at error state, at mag-publish ng static site. Hanggang ngayon, server ng iba ang sumasagot sa fetch mo. Sa course na ito, ikaw mismo ang bubuo ng server na iyon, pati database at login. Ang proyekto natin ay "Study Notes": nagsa-sign up ang mga tao, nagla-log in at nagtatago ng pribadong mga note.

Key facts

Front end = HTML, CSS at JavaScript na tumatakbo sa browser. Back end = code na tumatakbo sa server. Database = kung saan ligtas na nakatago ang data sa pagitan ng mga pagbisita. Ang "Full stack" ay nangangahulugang kaya mong gumawa sa lahat ng tatlo.
Nag-uusap ang browser at server gamit ang HTTP. Nagpapadala ang browser ng request (isang method gaya ng GET o POST, isang path gaya ng /api/notes, mga header at minsan isang body). Nagbabalik ang server ng response (isang status code, mga header at isang body).
Pinapatakbo ng Node.js ang JavaScript sa labas ng browser. Ang built-in nitong node:http module ay kayang gumawa ng web server nang walang dagdag na package.
Ang server ay nakikinig sa isang port. Sa sarili mong computer, ang localhost:3000 ay nangangahulugang "ang computer na ito, port 3000".
Ang API na sumasagot sa JSON ay nagpapahintulot sa anumang front end (web page, phone app, test script) na gamitin ang parehong server.
Ang Node.js 22.13 at mas bago ay may kasamang node:sqlite, isang built-in na SQLite database. Minamarkahan pa rin ito ng Node.js documentation bilang experimental sa mga version na iyon, kaya naglalabas ang Node ng "ExperimentalWarning" kapag ginamit mo ito. Inaasahan ito sa course na ito.
Huwag kailanman magtiwala sa browser. Kahit sino ay maaaring magpadala ng anumang request sa server mo gamit ang mga tool maliban sa page mo. Ang lahat ng mahalagang check (mga patakaran sa input, sino ang may-ari ng ano) ay dapat tumakbo sa server.

Halimbawa (ang una mong server, nasubukan)

const http = require("node:http");

const server = http.createServer(function (req, res) {
 if (req.method === "GET" && req.url === "/health") {
  res.writeHead(200, { "Content-Type": "application/json" });
  res.end(JSON.stringify({ ok: true }));
  return;
 }
 res.writeHead(404, { "Content-Type": "application/json" });
 res.end(JSON.stringify({ error: "Not found" }));
});

server.listen(3000, function () {
 console.log("Open http://localhost:3000/health");
});

Resulta ng test: ang GET /health ay sumagot ng 200 na may {"ok":true}; ang anumang ibang path ay sumagot ng 404 na may {"error":"Not found"}.

Step by step

I-install ang Node.js mula sa nodejs.org (piliin ang LTS version), tapos i-type ang node --version sa terminal. Kailangan mo ng 22.13 o mas bago.
Gumawa ng folder na study-notes at buksan ito sa code editor at sa terminal mo.
Gumawa ng hello.js at i-paste ang halimbawang code.
Patakbuhin ang node hello.js. Dapat makita mo ang "Open localhost:3000/health".
Buksan ang address na iyon sa browser mo. Dapat makita mo ang {"ok":true}.
Subukan ang localhost:3000/anything. Dapat makuha mo ang sagot na "Not found".
Ihinto ang server gamit ang Ctrl+C sa terminal.
Check: sa DevTools, Network tab, nagpapakita ang /health request ng status 200 at ang isa ay 404 (maaaring magkaiba ang mga pangalan depende sa version).

Watch on YouTube

How to create a simple HTTP server in Node.jsProgrammingKnowledge · YouTube · youtube.com

Videos by other creators on YouTube, for reference. They are not made by or affiliated with The Future Market.

LESSON 01Paano nagkakabit-kabit ang isang full-stack app

LESSON 01 / ANIMATED LESSON / ENGLISH VOICE00:00 / 01:00

Voice

Read the video script

[Host] "Ang front end ay ang dining room. Ang server ay ang kusina. Ang database ay ang pantry."
[Screen: nagpapadala ang browser ng GET /health, sumasagot ang server ng 200 na may JSON] "Nagpapadala ng request ang browser. Nagpapadala ng response ang server na may status code at body."
[Screen: tumatakbo ang hello.js sa terminal] "Sampung linya ng Node.js at mayroon ka nang sariling server sa localhost."
[Text on screen: Huwag magtiwala sa browser] "Isang patakaran para sa buong course: ang server ang nagche-check ng lahat, dahil kahit sino ay puwedeng magpadala rito ng request."

Try it now

Patakbuhin ang unang server. Magdagdag ng pangalawang route, GET /time, na sumasagot ng kasalukuyang oras bilang JSON. Tapos iguhit ang larawan ng restaurant para sa Study Notes: lagyan ng label ang dining room, kusina at pantry gamit ang mga totoong bahagi (page, Node.js server, SQLite file).

ClaudeStuck? Copy a ready-made prompt for Claude

Copy this, open Claude, paste it, and Claude will walk you through the lesson step by step.

For a grown-up: Claude is for adults (18+). Copy this, paste it into Claude, and use the answer to explain the lesson to your child.

I'm learning "Full-Stack Basics: mga server, database at deployment" on The Future Market. Lesson 1: "Paano nagkakabit-kabit ang isang full-stack app".

What the lesson teaches:
- Front end = HTML, CSS at JavaScript na tumatakbo sa browser. Back end = code na tumatakbo sa server. Database = kung saan ligtas na nakatago ang data sa pagitan ng mga pagbisita. Ang "Full stack" ay nangangahulugang kaya mong gumawa sa lahat ng tatlo.
- Nag-uusap ang browser at server gamit ang HTTP. Nagpapadala ang browser ng request (isang method gaya ng GET o POST, isang path gaya ng /api/notes, mga header at minsan isang body). Nagbabalik ang server ng response (isang status code, mga header at isang body).
- Pinapatakbo ng Node.js ang JavaScript sa labas ng browser. Ang built-in nitong node:http module ay kayang gumawa ng web server nang walang dagdag na package.
- Ang server ay nakikinig sa isang port. Sa sarili mong computer, ang  ay nangangahulugang "ang computer na ito, port 3000".
- Ang API na sumasagot sa JSON ay nagpapahintulot sa anumang front end (web page, phone app, test script) na gamitin ang parehong server.
- Ang Node.js 22.13 at mas bago ay may kasamang node:sqlite, isang built-in na SQLite database. Minamarkahan pa rin ito ng Node.js documentation bilang experimental sa mga version na iyon, kaya naglalabas ang Node ng "ExperimentalWarning" kapag ginamit mo ito. Inaasahan ito sa course na ito.
- Huwag kailanman magtiwala sa browser. Kahit sino ay maaaring magpadala ng anumang request sa server mo gamit ang mga tool maliban sa page mo. Ang lahat ng mahalagang check (mga patakaran sa input, sino ang may-ari ng ano) ay dapat tumakbo sa server.

The exercise I'm working on:
Patakbuhin ang unang server. Magdagdag ng pangalawang route, GET /time, na sumasagot ng kasalukuyang oras bilang JSON. Tapos iguhit ang larawan ng restaurant para sa Study Notes: lagyan ng label ang dining room, kusina at pantry gamit ang mga totoong bahagi (page, Node.js server, SQLite file).

I'm stuck. Please:
1. Explain the main idea in plain, simple words with one everyday example.
2. Walk me through the exercise one small step at a time. Ask me what I've done so far before giving the next step.
3. Don't just give me the final answer. Help me do it myself, and check my work when I share it.

I'm a parent helping my child (about 8 years old) with a lesson called "Paano nagkakabit-kabit ang isang full-stack app" from the course "Full-Stack Basics: mga server, database at deployment".

Here's what the lesson says:
Ang restaurant ay may tatlong bahagi. Ang dining room ang front end: ang nakikita ng mga bisita. Ang kusina ang server: tumatanggap ito ng order at nagluluto. Ang pantry ang database: kung saan nakatago ang pagkain. Hindi kailanman pumapasok ang bisita sa pantry. Humihingi siya sa waiter, kukunin ng kusina ang kailangan, at babalik ang isang plato.

The activity:
Patakbuhin ang unang server. Magdagdag ng pangalawang route, GET /time, na sumasagot ng kasalukuyang oras bilang JSON. Tapos iguhit ang larawan ng restaurant para sa Study Notes: lagyan ng label ang dining room, kusina at pantry gamit ang mga totoong bahagi (page, Node.js server, SQLite file).

Please explain this so an 8-year-old understands: short sentences, a fun everyday example, and no hard words.
Then give me 3 simple questions I can ask my child to check they understood, and a way to do the activity together, one tiny step at a time.

Open Claude

Sources

MDN Web Docs, an overview of HTTP: developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Overview
Node.js documentation, HTTP: nodejs.org/api/http.html
Node.js documentation, SQLite: nodejs.org/api/sqlite.html

My notes

I learned this

02