Ruby's Duckie

Contact

Day 2 Vibe Coding : The Backbone for Any Software 🤯

สวัสดี ruby’s duckie คนดีคนเดิมจ้าาาาาา ✨ หลังจากที่ได้เรียน mini gemini bootcamp จาก web ที่สอน data ที่เก่งที่สุดจาก พี่ทอย Data Rockie ก็อดไม่ได้ที่จะ Document แบ่งปัน รวมถึงเก็บไว้อ่านเองด้วยยยยยยยย เยี่ยมเลยละ 😆👍🏻 มาเรื่มกันดีกว่า อิอิ

Software 101

  • เป็นชุดคำสั่งที่ทำให้ระบบคอมพิวเตอร์ทำงานได้ มักจะถูกแบ่งออกเป็น 2 ส่วน :
    • frontend หน้าที่เราสามารถมองเห็น มีปุ่มต่างๆให้เรากด กรอก login เข้าไปในระบบ
    • Backend จะทำการเช็ค Sysmtem -> ทำให้สามารถส่งข้อมูลกลับไปได้ ว่าคนที่ login เข้ามามี acount แล้วหรือยัง ถ้ายังก็จะส่งกลับไปว่า “You Don’t Have Account, Please Sign in”
    • Software = Data ทั้งสองเรื่องนี้แทบจะเป็นเรื่องเดียวกัน เพราะทั้งคู่สามารถสร้าง Value ให้เราได้

🚀 Frontend ส่ง request ไปหา Backend , Backend ส่ง Respond ไปที่ Frontend

โดยทั้งสองส่วนนี้จะมี API (Application Programming Interface) ทำหน้าที่เป็นเหมือน ผู้สื่อสาร หรือสะพานเชื่อมส่งข้อมูลข้ามไปข้ามมา เหมือนเป็น translator ให้หลายๆ ภาษา โดยจะมี Role ว่าต้องส่งข้อมูลหรือ protocal แบบไหนถึงจะสามารถคุยกับ backend ได้เข้าใจ ซึ่งข้อมูลที่ได้สิ่งนั้นคือ respond ที่ Backend ส่งให้

💻 Logic ในโลกของ Software และการเขียนโปรแกรมง่ายๆ

มันคือกระบวนการในการเขียนโปรแกรมมีเอาไว้เพื่อ Process Data ลองนึกถึงสมการง่าย ๆ ของชีวิต เช่น

ถ้ายอดซื้อเกิน 1,000 บาท ให้ลด 10% แต่ถ้าเป็นสินค้าหมวดไอที ไม่ต้องลด 💖

เหมือนเป็นระบบที่เราต้องเขียนให้โปรแกรมวิ่งตามระบบที่เราตั้งเอาไว้

mini-gemini-bootcamp : data rockie

🌐 Build Our Server

ก่อนที่เราจะเริ่มสร้าง simple API server เราต้องทำอะไรบ้างง ?

  • Create working directory file ด้วย mkdir Api-101 จากนั่น cd เข้าไปในไฟล์
  • เรียก Gemini Cli ขึ้นมาเพื่อมาได้เลย โดยจะให้ทำการ mock CRM Mini Databse ขึ้นมาง่ายๆ ซัก 10 customers !
hi gemini ! Build a lightweight, local CRM API server (port 8000) using only vanilla Node.js (no Express or external 
   frameworks)and http library.                                                                                         
   this is requirement.                                                                                                 
   1. Mini CRM customersCreate a database.xml file to serve as a mini-database. Include 10 sample CRM contact records.  
   2. Use the native http module to handle requests.                                                                    
   lets plan how to do this. Keep it simple.

Genimi จะเรียก @Plan mode ขึ้นมา ให้เรา Allow ตาม Step ได้เลยย จากนั้นเราจะ Save plans เอาไว้อ่านในอนาคตว่าเราทำอะไรไปบ้าง

Ours_plan.md

Implementation Plan: Vanilla Node.js Mini CRM API

Objective

Build a lightweight, read-only local CRM API server on port 8000 using only vanilla Node.js (http module) and an XML file for storage, without any external frameworks like Express.

Key Files & Context

  • database.xml: The local mini-database containing 10 sample CRM contact records.
  • server.js: The vanilla Node.js server script.

Implementation Steps

1. Create database.xml

Create the XML file with a clear structure and 10 sample customer records.

1 <?xml version=”1.0″ encoding=”UTF-8″?>

2 <crm>

3     <customers>

4         <customer>

5             <id>1</id>

6             <name>Alice Smith</name>

7             <email>alice@example.com</email>

8             <company>Tech Corp</company>

9             <status>Active</status>

10         </customer>

11         <!– 9 more sample records –>

12     </customers>

13 </crm>

2. Create server.js

Implement the server using native Node.js modules (http, fs, path).

  • Import http, fs, and path.
  • Define the database.xml file path.
  • Create an HTTP server using http.createServer.
  • Set the default response header Content-Type: application/xml.
  • Implement basic routing:
  • GET /api/customers: Use fs.readFile to read database.xml and pipe it or send it as the response body.
  • Other routes: Return a 404 Not Found response.
  • Start the server listening on port 8000.

Verification & Testing

  1. Start the server using node server.js.
  2. Verify the server starts successfully on port 8000.
  3. Use a browser or curl http://localhost:8000/api/customers to verify that the XML payload is returned correctly.
  4. Test an invalid route (e.g., curl http://localhost:8000/unknown) to ensure it returns a 404 error.

ลังจากที่เรา OK กับ Plan ที่สร้างมาเเล้วให้เราสั่งให้ gemini รันให้ได้เลยย ~ 🚀 ซึ่งเราจะไปดื่มน้ำ กินกาแฟหรือไปซักผ้าก็ได้ระหว่างนี้ แต่ๆ

ไม่ทันได้ลุกหรอ 😂 แปปเดียวก็เสร็จจจจจจ สุดยอดดดดด !! หลังจากเสร็จจะมีข้อความบอกว่า

เอ้ยย อย่าเพิ่งลุกไปกาแฟ ฉันทำเสร็จแล้ว ruby ! นายมาทดสอบ api ต่อได้เลย 🤯 😱

เริ่มตื่นเต้นขึ้นมาแล้วเลยละทุกคนน จะเห็นว่าเราจะได้มา 3 ไฟล์ ประกอบด้วย

  • ours_plan.md
  • database.xml
  • server.js

แล้วเราทำการเริ่มเชื่อม API ของเราเองได้เลย ผ่าน teminal ด้วยคำสั่ง node server.js แล้วเอาลิงค์ locolhost ไปใส่ใน brower ได้เลยย ถ้าไม่มีปัญหาอะไรจะได้ xml data structure ออกมาแบบนี้

API Endpoint ✨ คือส่วนที่เป็น http://localhpst:8000/api/custumers

Make A Request 🦉

  • Use Excel for send Request Data. (aviable only Windown) 
=Webservice(Url)
  • How to Query the Data from this API
=FILTERXML(xml, xpath)

Common XPath Patterns

  • Direct Path: /root/element/sub-element
  • Search Anywhere: //sub-element (finds all occurrences regardless of where they are)
  • Filter by Attribute: //element[@id='123']/sub-element (finds the sub-element only if the parent element has the ID attribute of 123)
  • Use Teminal send Request Data with curl function.
  • Use Shell send Request Data with invork-WebRequest -uri function.

Query Parameter

เรา Add Query filter id ในไฟล์ server.js ของเรา เพื่อที่เราจะได้สามารถ query data มาได้

hi gemini ! looks good. Can you add query parameter id 
to filter data base on customer id. 😆
What gemini doing….

✨ I have updated the CRM API to support filtering by customer ID!

Changes:

  1. Updated server.js: Now uses the native URL class to parse query parameters. It uses a regular expression to find and extract the specific <customer> block from the XML file when an id

is provided.

  1. Updated ours_plan.md: Added the query parameter logic to the implementation plan.

How to use the filter:

Start the server:

1 node server.js

Then you can filter by ID like this:

The server correctly returns a 404 Customer not found if you provide an ID that doesn’t exist in the database.

เมื่อเราลอง test server ที่ id 1, 2 แล้วจะได้ return custumer id ที่เรา query ไปออกมา และถ้าหาก test ?id = 99 แล้วพบว่าไม่มีจะขึ้นว่า 404 Not Found

จากนั้นให้เราทำการ test ดูว่า ?id=9 มีไหม อย่าลืม node server.js ก่อนใน server run on และ ทุกครั้งที่เราเสร็จงานเราต้องทำการปิด server ของเราด้วยห้ามลืม control + C

ตัวอย่าง Teminal : query at ?id=9

Web Browser : query at ?id=5

http://localhost:8000/api/customers?id=5

Vibe Coding on The Web 🐶

รู้หรือไม่ ? จริงๆแล้วเราสามารถ vibe coding ในเว็บของ gemini ได้เหมือนกัน ใช้สะดวกเวลาที่เราออกไปข้างนอกแล้วเรามีแค่มือถือ ก็สามารถคุย ถาม และใน remder code ให้เราได้เลย ก่อนที่เราจะไปถึงจุดนั้น ให้เราสมัครใช้งาน Cloudflare ได้ฟรีๆ ที่ https://www.cloudflare.com/ ได้เลยยย เย้ ง่ายยยย 🍌

แล้วทำไมต้องมี Cloudflare ?

🍌 cloudflare เป็นตัวกลางด้านเครือข่ายระหว่างผู้เข้าชมเว็บไซต์และเซิร์ฟเวอร์หลัก

how to ! vibe Codind with Web base.

1. Gemini Web base → สร้าง code พร้อมใช้งาน

  • สั่งให้ gemini สร้าง mini CRM ด้วย XML file แล้วเราจะ push ขึ้น cloudflare worker
i want to create simple vanila JS api. crm mini database with 10 sample data, using crm-custumers.xml file.
deployed on cloundflare
can you write a basic script for me and config.toml files.
  • สั่งให้ Canvas Extract files Docs สร้างออกมาเพื่อเอาไปใช้งานต่อ

Folder Structure :

my-crm-api/ 
├── index.js # The worker logic (main API script) 
├── crm-customers.xml # Sample data 
└── wrangler.toml # Deployment configuration

Wrangler คือ Command-line tool สำหรับจัดการโปรเจกต์ Cloudflare Workers และ Pages. ต้องมีก่อนถึงจะสามารถ deployments ได้

npm install wrangler --save-dev

2. เข้า Teminial เรียก Gemini มาช่วย Build จากไฟล์ที่เราได้

Hi gemini, I want to build a simple cloudflare workers, Js api. are you ready to work. 
I have all the code ready, can you set up the projects structure for me.
  • จากนั้น Gemini จะถามเกี่ยวกับ Folder Stucture ว่าต้องการให้จัดรูปแบบไหน ซึ่งเราสามารถ copy ไปวางได้เลย
  • ทำการ fill code ที่เราได้จาก gemini ใส่เข้าไปในไฟล์ที่เราสร้างขึ้นมา ด้วยคำสั่ง This is……
This is crm-customers.xml
  • เมื่อใส่ครบทุกไฟล์แล้วให้เรา Install Dependencies ซึ่งไฟล์ของเราพร้อมแล้ว package.json ให้เรา npm install ได้เลย
  • สั่งให้ Walanger ทำงาน npm run dev ใน local server

หลังจากที่เรา run คำสั่งครบทุกอย่างแล้ว ไม่มี error หรือต้องแก้อะไร ทาง gemini ก็จะส่ง Endpoint ซึ่งเราสามารถ fillter ได้เหมือนกับที่เราทำ teminal เลย เหมือนกันน

3. Deploying the CRM API to Cloudflare Workers.

gemini : Lets deploy to cloudflare.
  • ก่อนจะเข้าไปถึงขั้นนั้นจะมีการ login + auth ก่อนว่า นี่ใช้เราจริงไหม หรือเป็น User on Cloundflare ยัง ?

เท่านี้ก็เสร็จเรียบร้อย

https://crm-api.penpicha-kong2.workers.dev

การ query จะเหมือนกันเลย เช่น

จบแล้ว เป็นยังไงติดขัดตรงไหน สามารถมาแชร์กันได้เลยเด้ออออ 😆

Leave a comment