THE FUTURE MARKETACADEMY
Your classroomRoom 01 · AI Lab
School of AI

Pag-code gamit ang AI: ang una mong proyekto mula ideya hanggang gumaganang app

Step 4 of 7 in AI Lab

Next in your path: 1.1.2 AI at Work: research, writing and analysis with AI

What you'll be able to do
  • Maipaliwanag sa simpleng salita kung ano ang code, at kung ano ang ginagawa at hindi ginagawa ng AI coding assistant.
  • Maglarawan ng maliit na ideya ng app nang sapat na linaw para mabuo ito ng AI assistant.
  • Gamitin ang Claude Code para bumuo at magbukas ng maliit na web app (tip calculator) sa sarili mong computer.
  • Mabasa sa pangunahing antas ang code na isinulat nito: mga file, variable, function at button.
  • Masubukan ang app, mag-ulat ng bug sa tamang paraan at bawiin ang pagbabagong ayaw mo.
  • Malaman kung ano ang dapat mong laging suriin mismo: mga pahintulot, mga sikreto, at kung talagang gumagana ang app.

Bago ang course na ito: Command Line Basics (course 7.11). Dapat kaya mong magbukas ng terminal, gumamit ng pwd, cd at ls, at alam mo kung bakit hindi ka kailanman nagpa-paste ng command na hindi mo naiintindihan. Kung bago sa iyo ang terminal, kunin muna ang 7.11. Ang kursong ito ay ang Beginner na hakbang bago ang Claude Code Basics (course 1.5).

Words in this course 42Open the Vocabulary Hall
01

Ano ang code, at ano ang ginagawa ng AI coding assistant

In simple words

Ang code ay listahan ng mga tagubiling sinusunod ng computer, parang recipe. Ang AI coding assistant ay katulong na kayang isulat ang recipe, lutuin ito at tikman, pero ikaw ang magpapasya kung anong putahe ang gagawin at kung masarap ba ito.

Key facts
  • Ang code ay nakasulat na mga tagubilin para sa computer. Ang program o app ay code na tumatakbo. Ang bug ay pagkakamali sa code na nagpapagawa sa app ng mali.
  • Gumagamit ang maliit na web page ng tatlong wikang naiintindihan ng bawat browser:
WikaTrabahoPaghahambing sa kusina
HTMLAng nilalaman at istruktura: mga heading, teksto, button, kahonAng mga sangkap sa mesa
CSSAng hitsura: kulay, espasyo, fontKung paano nakaayos ang plato
JavaScriptAng gawi: kung ano ang nangyayari kapag nag-click kaAng mga hakbang sa pagluluto
  • Ang file ay may hawak na code. Ang folder (tinatawag ding directory) ay may hawak na mga file. Natutunan mo ang dalawa sa Command Line Basics.
  • Inilalarawan ng Anthropic ang Claude Code bilang agentic na coding tool. Kapag binigyan mo ito ng gawain, gumagana ito sa tatlong yugtong nagsasanib: nangangalap ito ng konteksto (binabasa ang mga file mo), kumikilos (nag-eedit ng mga file, nagpapatakbo ng mga command), at nagpapatunay ng mga resulta (halimbawa sa pagpapatakbo ng mga test). Puwede mo itong pigilan anumang oras.
  • Nababasa ng Claude Code ang project folder mo, nag-eedit ng mga file at nagpapatakbo ng mga command sa terminal mo. Puwede itong magkamali, kaya nananatili ka sa loop: ito ang nagmumungkahi, ikaw ang aaprub.
  • Tumatakbo ang Claude Code sa terminal, sa VS Code at JetBrains, sa desktop app at sa web sa claude.ai/code. Pareho ang makina sa likod ng lahat ng ito.
  • Hindi inaalis ng AI assistant ang pangangailangang maunawaan ang resulta. Nakakatipid ito ng pag-type. Ikaw pa rin ang magpapasya kung ano ang bubuuin at ikaw pa rin ang magsusuri kung gumagana ito.
Step by step
  1. Magbukas ng notebook o text file at isulat ang tatlong heading: HTML, CSS, JavaScript.
  2. Sa tabi ng bawat heading, isulat sa sarili mong salita ang trabaho nito (istruktura, hitsura, gawi).
  3. Magbukas ng anumang web page sa browser mo, mag-right-click sa isang button at piliin ang Inspect (maaaring magkaiba ang pangalan kada browser). Hanapin ang mga HTML tag.
  4. Isulat ang isang bagay sa page na iyon na HTML (isang heading), isang CSS (isang kulay) at isang JavaScript (bagay na nagbabago kapag nag-click).
  5. Basahin ang Overview page ng docs ng Claude Code at hanapin ang listahan ng mga lugar kung saan mo ito magagamit.
  6. Tingnan: maipapaliwanag mo ang tatlong wika gamit ang paghahambing sa kusina, at masasabi mo kung ano ang ibig sabihin ng "gather context, take action, verify".
Watch on YouTube
What Claude Code is, in a beginner tutorialAyyazTech · YouTube · youtube.com

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

LESSON 01Ano ang code, at ano ang ginagawa ng AI coding assistant
LESSON 01 / ANIMATED LESSON / ENGLISH VOICE00:00 / 01:00
Read the video script
[Host] "Ano ang code? Listahan ito ng mga tagubiling sinusunod ng computer, parang recipe."
[Text on screen: HTML = istruktura | CSS = hitsura | JavaScript = gawi] "Gumagamit ang web page ng tatlong wika. Ang HTML ay istruktura, ang CSS ay hitsura, ang JavaScript ay kung ano ang nangyayari kapag nag-click ka."
[Screen: binabasa ng Claude Code ang mga file sa project folder] "Ang AI coding assistant tulad ng Claude Code ay nakakabasa ng mga file mo, nag-eedit ng mga ito at nagpapatakbo ng mga command."
[Text on screen: Mangalap ng konteksto, kumilos, magpatunay] "Gumagana ito sa loop: tumingin sa paligid, gumawa ng pagbabago, suriin ang resulta."
[Host] "Ikaw pa rin ang boss. Ikaw ang nagpapasya kung ano ang bubuuin at kung gumagana ito."
Try it now

Pumili ng web page na ginagamit mo araw-araw. Maglista ng tatlong bagay dito na HTML, dalawang CSS at dalawang JavaScript. Saka sumulat ng isang pangungusap: "Matutulungan ako ng AI assistant sa ___, pero kailangan ko pa ring suriin ang ___."

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 "Pag-code gamit ang AI: ang una mong proyekto mula ideya hanggang gumaganang app" on The Future Market. Lesson 1: "Ano ang code, at ano ang ginagawa ng AI coding assistant".

What the lesson teaches:
- Ang code ay nakasulat na mga tagubilin para sa computer. Ang program o app ay code na tumatakbo. Ang bug ay pagkakamali sa code na nagpapagawa sa app ng mali.
- Gumagamit ang maliit na web page ng tatlong wikang naiintindihan ng bawat browser:
- Wika - Trabaho - Paghahambing sa kusina
- HTML - Ang nilalaman at istruktura: mga heading, teksto, button, kahon - Ang mga sangkap sa mesa
- CSS - Ang hitsura: kulay, espasyo, font - Kung paano nakaayos ang plato
- JavaScript - Ang gawi: kung ano ang nangyayari kapag nag-click ka - Ang mga hakbang sa pagluluto
- Ang file ay may hawak na code. Ang folder (tinatawag ding directory) ay may hawak na mga file. Natutunan mo ang dalawa sa Command Line Basics.

The exercise I'm working on:
Pumili ng web page na ginagamit mo araw-araw. Maglista ng tatlong bagay dito na HTML, dalawang CSS at dalawang JavaScript. Saka sumulat ng isang pangungusap: "Matutulungan ako ng AI assistant sa ___, pero kailangan ko pa ring suriin ang ___."

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 "Ano ang code, at ano ang ginagawa ng AI coding assistant" from the course "Pag-code gamit ang AI: ang una mong proyekto mula ideya hanggang gumaganang app".

Here's what the lesson says:
Ang code ay listahan ng mga tagubiling sinusunod ng computer, parang recipe. Ang AI coding assistant ay katulong na kayang isulat ang recipe, lutuin ito at tikman, pero ikaw ang magpapasya kung anong putahe ang gagawin at kung masarap ba ito.

The activity:
Pumili ng web page na ginagamit mo araw-araw. Maglista ng tatlong bagay dito na HTML, dalawang CSS at dalawang JavaScript. Saka sumulat ng isang pangungusap: "Matutulungan ako ng AI assistant sa ___, pero kailangan ko pa ring suriin ang ___."

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
My notes
02

Ihanda ang workspace mo

This lesson is part of full access: every course and every level for one payment.

03

Mula ideya tungo sa malinaw na kahilingan

This lesson is part of full access: every course and every level for one payment.

04

Buuin ang unang bersyon at buksan ito

This lesson is part of full access: every course and every level for one payment.

05

Basahin ang code na isinulat nito

This lesson is part of full access: every course and every level for one payment.

06

Subukan, ayusin at ligtas na bawiin

This lesson is part of full access: every course and every level for one payment.

07

Manatiling ligtas, i-save ang trabaho mo at planuhin ang susunod na proyekto

This lesson is part of full access: every course and every level for one payment.

++

Final project

This lesson is part of full access: every course and every level for one payment.

??

Quiz

  1. Ano ang ginagawa ng HTML, CSS at JavaScript?

  2. Anong tatlong yugto ang dinadaanan ng Claude Code sa isang gawain?

  3. Paano mo susuriin na na-install ang Claude Code?

  4. Saan mo dapat kopyahin ang mga install command?

  5. Pangalanan ang apat na bahagi ng magandang unang kahilingan.

  6. Ano ang ginagawa ng plan mode?

  7. Ano ang variable?

  8. Pangalanan ang dalawang test case bukod sa normal na kaso.

  9. Ano ang dapat laman ng ulat ng bug?

  10. Aling command o key ang nagpapahintulot na bumalik sa naunang punto?

  11. Pinapalitan ba ng mga checkpoint ang Git?

  12. Bakit hindi dapat mapunta ang mga sikreto tulad ng API key sa code o mga prompt mo?

EX

Final exam

This lesson is part of full access: every course and every level for one payment.

CE

Certificate

This lesson is part of full access: every course and every level for one payment.