Disclaimer
Purpose: This static app is an educational prototype for language practice and developer sharing. It helps learners prepare polite Tagalog phrases for AWS Manila Community Day.
Non-Commercial: This project has no paid feature, no advertising, no registration requirement, and no commercial purpose. It is intended for learning, experimentation, and community preparation.
No Guarantees: Generated language content may contain mistakes. Tagalog translations, grammar explanations, pronunciation guides, and cultural notes should be checked by native speakers before production use.
Scope: This app is not an official AWS product, not an official translation tool, and not a substitute for human language instruction. It is a technical demo with useful learning content.
Community Respect: The app should avoid stereotypes and should teach polite language carefully. Words like po, opo, kayo, and ninyo should be explained as tools for respect, not decoration.
Demo
Kita tayo mamaya sa susunod na session.
Grammatical Breakdown
- Kita: Can mean "see you" in this sentence.
- tayo: Inclusive "we," meaning you and I together.
- mamaya: Means "later."
- sa: Means "at," "in," "on," "to," or "for" depending on context.
- susunod: Means "next" or "will follow."
- session: English event word used naturally in tech-event Filipino-English.
Pronunciation Guide
It is pronounced word by word as:
kee-tah tah-yoh mah-mah-yah sah soo-soo-nohd nah sehs-see-seeohn.
- Kita: kee-tah.
- tayo: tah-yoh.
- mamaya: mah-mah-yah.
- susunod: soo-soo-nohd.
- session: sehs-see-seeohn.
Keep Tagalog vowels steady: a like ah, i like ee, o like oh.
Content Snapshot
Natural Tagalog: Kita tayo mamaya sa susunod na session.
Polite Tagalog: Kita tayo mamaya sa susunod na session po.
Extra Example 1: Sa registration desk, sige: Kita tayo mamaya sa susunod na session.
Extra Example 2: Pag may kausap na volunteer, kita tayo mamaya sa susunod na session.
Extra Example 3: Ayos, kita tayo mamaya sa susunod na session.
Table of Content
Part 1: Start With The Learning Contract
The first section explains how to convert a broad language-learning idea into a stable product contract: sentence category, English input, natural Tagalog, polite Tagalog, friendly Filipino-English, playful Filipino-English, grammar, examples, pronunciation, and cultural context.
Part 2: Use Demo Sentences As Product Anchors
This section shows why the demo phrases should guide the app design. Phrases such as Magpahinga muna tayo sa lilim, Umupo ka sandali kung nahihilo ka, and Paki-check po kung pumasok ang bayad become test cases for tone, politeness, and real event usefulness.
Part 3: Build The Prompt That Generates Useful Cards
This section provides a complete prompt for generating new sentence cards. The prompt asks the AI to separate formal, natural, polite, friendly, and playful outputs instead of mixing them into one confusing answer.
Part 4: Development Skill For Technical Sharing
This section turns the app into a technical sharing topic. It covers schema design, static rendering, responsive layout, prompt versioning, QA checks, and demo-driven iteration.
Part 5: Field Notes For Builders
This section gives practical lessons that can be reused in future community tools: contract-first content, tone-safe language generation, mobile-first review, and prompt compression.
Part 1: Start With The Learning Contract
Goal
Build a beginner-friendly Tagalog learning app that prepares a learner for AWS Manila Community Day. The app should help the learner speak politely to organizers, speakers, volunteers, venue staff, and people met for the first time.
Prompt
The first useful prompt should not ask for “a translation app” only. It should define the product contract.
Create a Tagalog learning app for AWS Manila Community Day preparation.
The user enters an English sentence.
Return a sentence card with:
- Background context
- English Input
- Natural Tagalog
- Polite Tagalog
- Friendly Filipino-English
- Playful Filipino-English
- Tone
- Cultural Context
- Grammatical Breakdown
- Common Context and Idiomatic Use
- Extra Examples
- Pronunciation Guide
- Related emotional, poetic, polite, and practical sentence patterns
Rules:
- Use simple English explanations.
- Use natural Tagalog first.
- Use polite Tagalog with po, opo, kayo, or ninyo when appropriate.
- Separate playful Filipino-English from correct formal Tagalog.
- Include AWS Manila Community Day situations: greetings, introductions, directions, workshops, volunteers, waiting time, and polite goodbye.
- Include examples that a beginner can say aloud at the event.
Result
The app becomes more than a dictionary. It becomes a sentence-card generator with a stable shape that can be rendered by one front end. A card can show one sentence in multiple tones without confusing the learner.
Tips
- Define the sentence-card schema before designing screens.
- Keep each field short enough for mobile reading.
- Make the polite version visible near the natural version.
- Use playful Filipino-English only as a clearly labeled informal style.
- Treat pronunciation and cultural context as first-class learning content.
Demo example
The latest HTML content uses practical, non-duplicated examples across the article cards:
Tagalog: Magpahinga muna tayo sa lilim.
English: Let us rest in the shade first.
Tagalog: Umupo ka sandali kung nahihilo ka.
English: Sit for a moment if you feel dizzy.
Tagalog: Paki-check po kung pumasok ang bayad.
English: Please check if the payment came in.
These examples are small, but they prove the current product direction. They cover health advice, friendship care, market conversation, payment checks, and safe daily Manila communication.
Part 2: Use Demo Sentences As Product Anchors
Goal
Use real demo phrases to test whether the app teaches practical, polite, and culturally aware communication.
Prompt
Use the following demo phrases as anchor examples:
1. Magpahinga muna tayo sa lilim. / Let us rest in the shade first.
2. Umupo ka sandali kung nahihilo ka. / Sit for a moment if you feel dizzy.
3. Paki-check po kung pumasok ang bayad. / Please check if the payment came in.
For each phrase, explain:
- When to use it at AWS Manila Community Day
- Why the polite form matters
- Which words show respect
- How to say it in a friendly casual style
- How to avoid using the playful version in formal situations
Result
The app gets a clear behavioral test. If it can explain these three phrases well, it can support health guidance, friendship care, shopping interactions, payment checks, and daily Manila communication.
Tips
- Pick anchor phrases before generating hundreds of cards.
- Use each anchor phrase as a UI test case.
- Check whether the polite marker appears in the right place.
- Check whether the explanation is beginner-friendly.
- Check whether the playful version is not presented as formal Tagalog.
Product behavior from the anchor phrases
1. Health rest
Natural Tagalog: Magpahinga muna tayo sa lilim.
Polite Tagalog: Magpahinga muna tayo sa lilim.
Use case: Suggesting a short rest in the shade when someone is tired or overheated.
Technical note: The app can tag this as category = health_safety and tone = caring.
2. Dizziness care
Natural Tagalog: Umupo ka sandali kung nahihilo ka.
Polite Tagalog: Umupo po kayo sandali kung nahihilo kayo.
Use case: Advising someone to sit for a moment if they feel dizzy.
Technical note: The app can tag this as category = health_advice and pattern = ____ kung ____.
3. Payment check
Natural Tagalog: Paki-check kung pumasok ang bayad.
Polite Tagalog: Paki-check po kung pumasok ang bayad.
Playful Filipino-English: Payment check muna, all right.
Use case: Politely asking someone to confirm whether a payment came in.
Technical note: The app can tag this as category = payment_check and tone = polite_request.
Part 3: Build The Prompt That Generates Useful Cards
Goal
Create a repeatable generation prompt that produces event-ready cards, not random translations.
Prompt
You are a Tagalog learning coach for a beginner attending AWS Manila Community Day.
Create 10 sentence cards for the category: workshop questions.
Each card must include:
Background context:
English Input:
Natural Tagalog:
Polite Tagalog:
Friendly Filipino-English:
Playful Filipino-English:
Tone:
Cultural Context:
Grammatical Breakdown:
Common Context and Idiomatic Use:
Extra Examples:
Pronunciation Guide:
Related emotional, poetic, polite, and practical sentence patterns:
Rules:
- Natural Tagalog must come before playful Filipino-English.
- Use po, opo, kayo, and ninyo when respect is safer.
- Include practical AWS event vocabulary such as workshop, session, demo, speaker, volunteer, registration, badge, and venue.
- Explain whether the sentence is casual, polite, formal, playful, or event-ready.
- Keep examples short enough for mobile reading.
Result
The generated content can be stored as JSON or Markdown and rendered into the app. Each sentence becomes inspectable, reusable, and easy to improve.
Tips
- Ask for a category, not the whole app, when generating content.
- Limit each generation batch to avoid inconsistent tone.
- Store the prompt beside the generated content for future review.
- Add a human-review status field if the app becomes public.
- Keep the prompt stable and change one requirement at a time.
Example generated card
Background context:
Use this in a Manila daily health or safety situation when someone feels dizzy or tired.
English Input:
Sit for a moment if you feel dizzy.
Natural Tagalog:
Umupo ka sandali kung nahihilo ka.
Polite Tagalog:
Umupo po kayo sandali kung nahihilo kayo.
Friendly Filipino-English:
Sit muna po kung dizzy.
Playful Filipino-English:
Umupo muna, easy lang all right.
Tone:
Caring, practical, and safety-ready.
Cultural Context:
Use the polite version with guards, staff, drivers, vendors, elders, and people you meet for the first time.
Grammatical Breakdown:
- Umupo: sit down
- sandali: for a moment
- kung: if
- nahihilo: feeling dizzy
- po: politeness marker
Common Context and Idiomatic Use:
Use this in health, weather, commute, venue, or waiting situations when someone may need a short rest.
Extra Examples:
1. Magpahinga muna tayo sa lilim. / Let us rest in the shade first.
2. Umupo ka sandali kung nahihilo ka. / Sit for a moment if you feel dizzy.
3. Paki-check po kung pumasok ang bayad. / Please check if the payment came in.
Pronunciation Guide:
oo-MOO-poh kah sahn-DAH-lee koong nah-hee-HEE-loh kah.
Related sentence patterns:
Use ____ kung ____ for simple advice: Umupo ka kung nahihilo ka, Magpahinga ka kung pagod ka.
Part 4: Development Skill For Technical Sharing
Goal
Turn the app build into a useful technical sharing session for developers, students, cloud builders, and community volunteers.
Technical architecture
/tagalog-learning-app
/content
greetings.json
directions.json
workshops.json
volunteers-time.json
/public
index.html
article.html
app.js
styles.css
/prompts
sentence-card-generator.md
qa-checklist.md
Data contract
{
"category": "health_safety_money",
"title": "Manila Daily: Health, Safety, Weather, and Money",
"cards": [
{
"id": "health-safety-001",
"englishInput": "Sit for a moment if you feel dizzy.",
"naturalTagalog": "Umupo ka sandali kung nahihilo ka.",
"politeTagalog": "Umupo po kayo sandali kung nahihilo kayo.",
"friendlyFilipinoEnglish": "Sit muna po kung dizzy.",
"playfulFilipinoEnglish": "Umupo muna, easy lang all right.",
"tone": "caring, practical, health-and-safety-ready",
"culturalContext": "Use the polite version with guards, staff, drivers, vendors, elders, and first-time contacts.",
"grammar": [
{ "term": "Umupo", "meaning": "sit down" },
{ "term": "sandali", "meaning": "for a moment" },
{ "term": "nahihilo", "meaning": "feeling dizzy" },
{ "term": "po", "meaning": "politeness marker" }
]
}
]
}
Rendering logic
function renderCard(card) {
return `
<article class="sentence-card">
<h2>${card.englishInput}</h2>
<p><strong>Natural Tagalog:</strong> ${card.naturalTagalog}</p>
<p><strong>Polite Tagalog:</strong> ${card.politeTagalog}</p>
<p><strong>Friendly Filipino-English:</strong> ${card.friendlyFilipinoEnglish}</p>
<p><strong>Playful Filipino-English:</strong> ${card.playfulFilipinoEnglish}</p>
<p><strong>Tone:</strong> ${card.tone}</p>
</article>
`;
}
Implementation
The attachment shows how the prompt-first product design becomes a static HTML generation pipeline. It defines article metadata, sentence-card datasets, expansion rules, pronunciation helpers, grammar breakdown logic, example generation, card rendering, responsive CSS, article page writing, index page writing, ZIP packaging, and secondary consistency checks.
from pathlib import Path
import html
import zipfile
import textwrap
import re
import json
import os
out_dir = Path(".")
# Article metadata with 20-word summaries
# checked by simple whitespace count in code comments/log output.
articles = [
{
"id": 1,
"slug": "community-greetings-introductions",
"title": "Community Day: Greetings and Respectful Introductions",
"category": "Community Day",
"summary": (
"Practice polite greetings, names, beginner phrases, and warm introductions "
"for meeting speakers, volunteers, students, and builders in Manila confidently."
),
},
{
"id": 2,
"slug": "community-directions-registration",
"title": "Community Day: Directions, Venue, and Registration",
"category": "Community Day",
"summary": (
"Learn useful venue phrases for registration, rooms, seats, restrooms, exits, "
"queues, badges, and polite help requests during the event."
),
},
{
"id": 3,
"slug": "community-workshops-learning",
"title": "Manila Daily: Health, Safety, Weather, and Money",
"category": "Community Day",
"summary": (
"Ask workshop questions, request repeats, discuss demos, serverless ideas, "
"AI solutions, cloud labs, and learning goals with respectful Tagalog."
),
},
{
"id": 4,
"slug": "community-networking-belonging",
"title": "Community Day: Networking, Connect, and Belong",
"category": "Community Day",
"summary": (
"Use friendly phrases to connect with developers, students, leaders, and peers "
"while expressing excitement, humility, gratitude, and belonging."
),
},
{
"id": 5,
"slug": "community-volunteers-time-goodbye",
"title": "Community Day: Volunteers, Waiting, Time, and Goodbye",
"category": "Community Day",
"summary": (
"Thank volunteers, manage waiting time, apologize politely, coordinate arrivals, "
"say goodbye warmly, and respect schedules with practical phrases."
),
},
{
"id": 6,
"slug": "friendship-one-question-one-answer",
"title": "Friendship Tagalog: One Question, One Gentle Answer",
"category": "Friendship",
"summary": (
"Practice original friendship questions about sincerity, answers, hope, courage, "
"and honest feelings without copying any copyrighted song lyrics."
),
},
{
"id": 7,
"slug": "friendship-friends-only-feelings",
"title": "Friendship Tagalog: Friends Only Feelings",
"category": "Friendship",
"summary": (
"Learn gentle phrases about friendship, uncertainty, hope, boundaries, and "
"emotional clarity using respectful, soft, beginner-friendly Tagalog patterns."
),
},
{
"id": 8,
"slug": "friendship-you-are-my-beloved",
"title": "Friendship Tagalog: You Are My Beloved",
"category": "Friendship",
"summary": (
"Explore original poetic devotion phrases about care, affection, trust, support, "
"and choosing someone with warm but simple Tagalog."
),
},
{
"id": 9,
"slug": "friendship-honest-heart-deep-feelings",
"title": "Friendship Tagalog: Honest Heart and Deep Feelings",
"category": "Friendship",
"summary": (
"Build vocabulary for truthful emotions, nervous hearts, sincere admiration, "
"quiet longing, and careful confession in natural polite Tagalog."
),
},
{
"id": 10,
"slug": "friendship-distance-hope-promises",
"title": "Friendship Tagalog: Distance, Hope, and Promises",
"category": "Friendship",
"summary": (
"Practice original phrases about distance, waiting, promises, north and south, "
"hope, patience, and love that remains steady."
),
},
]
community_sets = {
1: [
(
"I am happy to meet you today.",
"Masaya akong makilala ka ngayon.",
"Masaya po akong makilala kayo ngayon.",
"Happy to meet you today, kumusta!",
"Masaya akong makilala ka ngayon, all right.",
"warm, polite, event-ready",
),
(
"Hello, I am learning Tagalog.",
"Kumusta, nag-aaral ako ng Tagalog.",
"Kumusta po, nag-aaral po ako ng Tagalog.",
"Hello po, learning Tagalog ako.",
"Kumusta, learning Tagalog na ako, all right.",
"friendly, beginner-friendly",
),
(
"My name is Martinez.",
"Ako si Martinez.",
"Ako po si Martinez.",
"Hi po, ako si Martinez.",
"Ako si Martinez, ready na ako all right.",
"simple introduction",
),
(
"This is my first time in Manila.",
"First time ko sa Manila.",
"First time ko po sa Manila.",
"First time ko po sa Manila, excited ako.",
"First time ko sa Manila, all right amazed.",
"personal, excited",
),
(
"I want to greet everyone politely.",
"Gusto kong bumati sa lahat nang magalang.",
"Gusto ko pong bumati sa lahat nang magalang.",
"Gusto ko pong mag-greet sa lahat.",
"Gusto kong mag-greet sa lahat, polite mode all right.",
"respectful, practical",
),
(
"Good morning, everyone.",
"Magandang umaga sa lahat.",
"Magandang umaga po sa inyong lahat.",
"Good morning po sa lahat.",
"Magandang umaga, ready na tayo all right.",
"formal greeting",
),
(
"May I sit here?",
"Puwede ba akong umupo dito?",
"Puwede po ba akong umupo dito?",
"Can I sit here po?",
"Puwede ba akong umupo dito, all right?",
"polite request",
),
(
"I am a beginner, so please speak slowly.",
"Baguhan ako, kaya pakibagalan.",
"Baguhan po ako, kaya pakibagalan po.",
"Beginner po ako, slow lang please.",
"Beginner ako, slow lang all right please.",
"humble, practical",
),
(
"I am excited to join Manila Community Day.",
"Excited akong sumali sa Manila Community Day.",
"Excited po akong sumali sa Manila Community Day.",
"Excited po ako for Manila Community Day.",
"Excited na ako sa Community Day, all right.",
"excited, event-ready",
),
(
"Thank you for welcoming me.",
"Salamat sa pagtanggap sa akin.",
"Salamat po sa pagtanggap sa akin.",
"Thank you po for welcoming me.",
"Salamat sa welcome, belong na ako all right.",
"grateful, emotional",
),
],
2: [
(
"Where is the registration area?",
"Saan ang registration area?",
"Saan po ang registration area?",
"Saan po ang registration area, please?",
"Saan ang registration area, ready na ako all right.",
"polite direction",
),
(
"Where is the workshop room?",
"Saan ang workshop room?",
"Saan po ang workshop room?",
"Saan po ang workshop room, please?",
"Saan ang workshop room, workshop mode all right.",
"practical, event-ready",
),
(
"Could you point me to the entrance?",
"Puwede mo ba akong ituro sa entrance?",
"Puwede po ba ninyo akong ituro sa entrance?",
"Pa-point po sa entrance?",
"Point me sa entrance, lost na ako all right.",
"polite help request",
),
(
"Is this the correct line?",
"Tamang pila ba ito?",
"Tamang pila po ba ito?",
"Correct line po ba ito?",
"Tamang pila ba ito, checking all right.",
"queue, practical",
),
(
"Where can I get my badge?",
"Saan ko makukuha ang badge ko?",
"Saan ko po makukuha ang badge ko?",
"Saan po badge pickup?",
"Saan badge ko, excited na all right.",
"registration, polite",
),
(
"Is there a seat available here?",
"May bakanteng upuan ba dito?",
"May bakanteng upuan po ba dito?",
"May seat po ba dito?",
"May seat ba dito, sit na ako all right.",
"polite, seating",
),
(
"Where is the restroom?",
"Saan ang restroom?",
"Saan po ang restroom?",
"Saan po ang CR?",
"Saan ang CR, quick lang all right.",
"practical direction",
),
(
"What time does the next session start?",
"Anong oras magsisimula ang susunod na session?",
"Anong oras po magsisimula ang susunod na session?",
"What time po next session?",
"Next session what time, all right.",
"time, event-ready",
),
(
"Please wait for me for a few minutes.",
"Hintayin mo ako ng ilang minuto.",
"Hintayin n’yo po ako ng ilang minuto.",
"Wait me for a few minutes po.",
"Hintayin mo ako, papunta na ako all right.",
"waiting, coordination",
),
(
"Please check if the payment arrived.",
"Paki-check kung pumasok ang bayad sa venue.",
"Paki-check po kung pumasok ang bayad sa venue.",
"Payment received po ba?",
"Paki-check kung pumasok ang bayad sa venue, all right.",
"payment check",
),
],
}
# Expand each 10 base sentences to 40 by making contextual variants.
community_contexts = [
("at the morning registration", "sa morning registration"),
("before the workshop starts", "bago magsimula ang workshop"),
("while meeting a volunteer", "habang may nakikilalang volunteer"),
("after the session", "pagkatapos ng session"),
]
friendship_contexts = [
("when speaking softly", "kapag marahang nagsasalita"),
("while waiting for an answer", "habang naghihintay ng sagot"),
("in a sincere message", "sa isang tapat na mensahe"),
("with a careful heart", "nang may maingat na puso"),
]
def expand(base, article_id):
contexts = community_contexts if article_id <= 5 else friendship_contexts
cards = []
for i, b in enumerate(base):
for j, (enctx, tlctx) in enumerate(contexts):
eng, nat, pol, friendly, playful, tone = b
# Keep sentence clear; add context in background,
# not necessarily append to every translation.
cards.append(
{
"num": len(cards) + 1,
"background": (
f"Use this sentence {enctx}. It helps connect emotion, culture, "
"politeness, and practical communication."
),
"english": eng,
"natural": nat,
"polite": pol,
"friendly": friendly,
"playful": playful,
"tone": tone,
"context_en": enctx,
"context_tl": tlctx,
}
)
return cards[:40]
for a in articles:
base = community_sets.get(a["id"]) or friendship_sets.get(a["id"])
a["cards"] = expand(base, a["id"])
# Simple pronunciation generation for consistent guides.
pron_map = {
"Kumusta": "koo-MOOS-tah",
"Salamat": "sah-LAH-maht",
"Puwede": "PWEH-deh",
"Saan": "SAH-ahn",
"Ako": "AH-koh",
"po": "poh",
"kayo": "KAH-yoh",
"ninyo": "NEEN-yoh",
"n’yo": "nyoh",
"Gusto": "GOOS-toh",
"Excited": "ek-SAI-ted",
"Nandito": "nahn-DEE-toh",
"Papunta": "pah-POON-tah",
"Hintayin": "hin-tah-YEEN",
"Pasensya": "pah-SEN-shah",
"Mahalaga": "mah-hah-LAH-gah",
"Sasamahan": "sah-sah-MAH-hahn",
"Kahit": "kah-HEET",
"Manila": "mah-NEE-lah",
"Tagalog": "tah-GAH-log",
"magtanong": "mag-tah-NONG",
"pakiulit": "pah-kee-OO-lit",
}
def pronunciation(tl):
# Provide a compact guide using known phrase starts, plus simple fallback.
for k, v in pron_map.items():
if tl.startswith(k) or f" {k}" in tl:
# Highlight first relevant chunk and add readable text.
return (
f"Say it slowly and clearly. Start with: {v}. Keep 'po' soft, "
"and stress the capital syllables in this guide."
)
return (
"Read each vowel clearly: a as ah, e as eh, i as ee, o as oh, u as oo. "
"Keep the final syllable clear."
)
def breakdown(card):
e = card["english"].lower()
nat = card["natural"]
items = []
def add(tag, meaning):
items.append((tag, meaning))
if "thank" in e or "salamat" in nat.lower():
add("Salamat", "thank you; a core gratitude word")
add(
"po",
"politeness marker used with elders, speakers, organizers, volunteers, or new people",
)
add("sa", "for, in, at, or to depending on context")
elif "where" in e or nat.lower().startswith("saan"):
add("Saan", "where; asks for a place or direction")
add("po", "polite marker for respectful questions")
add("ang", "focus marker before the place or thing being asked about")
elif "may i" in e or "could" in e or "please" in e:
add("Puwede / Paki-", "may, can, or please; softens a request")
add("po", "polite marker")
add("ba", "question marker used in yes/no questions")
elif "wait" in e or "way" in e or "late" in e:
add(
"Hintayin / Papunta / Pasensya",
"waiting, on-the-way, and apology words for coordination",
)
add("na", "now or all right; often shows change of state")
add("po", "polite marker")
elif any(
w in e
for w in [
"heart",
"love",
"feel",
"answer",
"friends",
"hope",
"promise",
"dear",
"admire",
]
):
add("puso / damdamin", "heart or feelings; emotional vocabulary")
add("sana", "hope or wish; makes the sentence gentle")
add(
"po / kayo / ninyo",
"respectful forms when the tone should stay careful and polite",
)
elif "excited" in e:
add("Excited ako", "I am excited; common Filipino-English expression")
add("-ng / akong", "linker form connecting I am to the next action")
add("sumali / matuto", "to join or to learn")
else:
add("Ako / ko", "I or my; marks the speaker")
add("ka / kayo", "you; kayo is polite or plural")
add("po", "polite marker used for respect")
return items[:3]
def examples(card, article_id):
if article_id <= 5:
return [
("Magpahinga muna tayo sa lilim.", "Let us rest in the shade first."),
("Umupo ka sandali kung nahihilo ka.", "Sit for a moment if you feel dizzy."),
("Paki-check po kung pumasok ang bayad.", "Please check if the payment came in."),
]
return [
("Sana maintindihan mo ako.", "I hope you understand me."),
("Makikinig po ako nang may respeto.", "I will listen with respect."),
("Tapat ang damdamin ko, all right.", "My feeling is sincere all right."),
]
def sentence_card_html(card, article):
bds = "".join(
f"<li><strong>{html.escape(k)}:</strong> {html.escape(v)}</li>"
for k, v in breakdown(card)
)
exs = "".join(
(
f"<li><strong>Tagalog:</strong> {html.escape(tl)}<br>"
f"<strong>English:</strong> {html.escape(en)}</li>"
)
for tl, en in examples(card, article["id"])
)
related = (
"Event pattern: use the polite version first with speakers, organizers, "
"volunteers, and people you meet for the first time. Casual and playful styles "
"are better with peers after rapport."
if article["id"] <= 5
else (
"Emotional pattern: keep the sentence gentle, avoid pressure, and use sana, "
"po, kayo, or ninyo when respect and careful tone matter."
)
)
return f"""
<article class="sentence-card" id="sentence-{card['num']}">
<h3>Sentence {card['num']}</h3>
<dl class="template">
<dt>Background context:</dt><dd>{html.escape(card['background'])}</dd>
<dt>English Input:</dt><dd>{html.escape(card['english'])}</dd>
<dt>Natural Tagalog:</dt><dd lang="tl">{html.escape(card['natural'])}</dd>
<dt>Polite Tagalog:</dt><dd lang="tl">{html.escape(card['polite'])}</dd>
<dt>Friendly Filipino-English:</dt><dd>{html.escape(card['friendly'])}</dd>
<dt>playful Filipino-English:</dt><dd>{html.escape(card['playful'])}</dd>
<dt>Tone:</dt><dd>{html.escape(card['tone'])}</dd>
<dt>Cultural Context:</dt><dd>Use the polite form with elders, speakers, organizers, volunteers, venue staff, and first-time contacts. Use casual speech with friends or peers when the situation feels relaxed.</dd>
<dt>Grammatical Breakdown:</dt><dd><ul>{bds}</ul></dd>
<dt>Common Context and Idiomatic Use:</dt><dd>This phrase is useful for {html.escape(card['context_en'])}. It teaches both correct Tagalog and a safe respectful option.</dd>
<dt>Extra Examples:</dt><dd><ol>{exs}</ol></dd>
<dt>Pronunciation Guide:</dt><dd>{html.escape(pronunciation(card['polite']))}</dd>
<dt>Related understand emotional, poetic, polite, and practical sentence patterns:</dt><dd>{html.escape(related)}</dd>
</dl>
</article>"""
Development skill
The development skill is designing a repeatable content pipeline: prompt input, structured schema, review checklist, and static renderer. This makes the article useful for technical sharing, not only language learning.
Sharing angle
For technical sharing, do not present the app as “AI magic.” Present it as a disciplined content system:
- Prompt contract controls output consistency.
- JSON schema controls rendering.
- Static HTML proves the learning loop quickly.
- Responsive design makes the app useful on phones.
- Human review protects cultural accuracy.
Part 5: Field Notes For Builders
Field Note 1: contract-first content
Background: A translation app can become messy if every output has a different shape.
Goal: Make every sentence card predictable.
Prompt: Create a card with natural Tagalog, polite Tagalog, friendly Filipino-English, playful Filipino-English, grammar, examples, pronunciation, and cultural context.
Result: The UI can render every card with the same component.
Tips:
- Use one schema.
- Keep field names stable.
- Separate content from design.
- Review one category before scaling.
- Save the generation prompt.
Field Note 2: politeness as product logic
Background: The learner needs to know when to use po, opo, kayo, and ninyo.
Goal: Teach respect through visible alternatives.
Prompt: Always include a polite version when the learner is speaking to elders, speakers, organizers, volunteers, venue staff, or first-time contacts.
Result: The app does not only translate; it teaches social context.
Tips:
- Put polite Tagalog near natural Tagalog.
- Explain who should receive polite speech.
- Avoid overusing polite markers where they sound unnatural.
- Show casual and polite side by side.
- Add a tone label.
Field Note 3: playful style needs boundaries
Background: Filipino-English can make the app fun, but learners may confuse playful style with formal Tagalog.
Goal: Let the app be enjoyable without making learners sound inappropriate in formal contexts.
Prompt: Mark playful Filipino-English as informal and show natural Tagalog first.
Result: A playful line such as Payment check muna, all right becomes a casual option, not the default formal answer.
Tips:
- Label playful output clearly.
- Use it with peers, not formal speakers.
- Explain that na can all right carry the idea of “all right.”
- Keep playful examples short.
- Never replace the natural version with the playful version.
Field Note 4: mobile-first card review
Background: Event learners will often use the app on a phone inside a venue.
Goal: Make the most useful sentence easy to find and say aloud.
Prompt: Put article content first on mobile, then show the article list through a button.
Result: The learner reads the current lesson before navigating away.
Tips:
- Keep labels short.
- Use large tap targets.
- Avoid dense paragraphs inside cards.
- Put pronunciation near the phrase.
- Test with one hand.
Field Note 5: demo-driven QA
Background: A generated app can look complete but still fail the actual event use case.
Goal: Test the app using three demo phrases.
Prompt: Validate every category against Magpahinga muna tayo sa lilim, Umupo ka sandali kung nahihilo ka, and Paki-check po kung pumasok ang bayad.
Result: The app stays grounded in gratitude, respectful questions, and arrival coordination.
Tips:
- Use anchor phrases as regression tests.
- Confirm grammar breakdown exists.
- Confirm polite version exists.
- Confirm playful version is labeled.
- Confirm examples are event-ready.
Closing Reflection
A Tagalog learning app for AWS Manila Community Day is a small technical project with a human purpose. It helps a learner arrive with humility, ask better questions, thank volunteers, and feel ready to belong. The technical lesson is simple: when the prompt becomes a contract, the app becomes easier to build, review, and share.