ทำเว็บป้ายยา กับ Notion API แบบฟรี ๆ ด้วย Google Antigravity

เราเองก็ทำ Shopee Affiliate อยู่บ้างเล็กน้อย คอยแปะที่ story บ้าง ใต้เม้นบ้าง

และก็อยากรวมที่เจนลิ้งไว้ในที่เดียว แต่ตัวเว็บหน้าร้าน Shopee Affiliate ก็ custom อะไรไม่ได้

ถ้าเราลองทำเองล่ะ จะเป็นยังไง? และจะทำยังไงได้บ้าง? และถ้าอยากใส่รีวิวของเราด้วยล่ะ

เลยลองไปถาม Gemini เพื่อนรัก ในหัวคือถ้าทำเป็น markdown น่าจะยุ่งยากแน่ ๆ เลย ในการจัดการรูปและวิดีโอ แต่เพื่อนรักบอกว่าใช้ Notion API กับ next.js สิ อื้มน่าสนใจ แถมเสกหน้าเว็บหน้าตาดี แต่ยังใช้จริงไม่ได้เนอะ เพราะตัว Gemini มันจะให้ HTML มาไฟล์เดียว และเราต้องไปต่อ key จาก Notion ด้วย

ตอนแรกอยากลอง Claude Code ที่กำลังฮิต ๆ แต่ต้องจ่ายเงินก่อน ก็เลยลองอีกตัว ที่ชื่อว่า Google Antgravity ตอน version แรก (ตอนนี้เป็น version สองล่ะ) แล้วมันใช้ฟรีด้วย ก็เลยจัดไป

แล้วออกมาเป็นยังไง ไปดูกัน

ปล. ตอนที่เราลองทำเป็น version 1 อยู่นะ

-

📁 สร้าง database บน Notion

มาที่ขั้นตอนที่ดูจะง่ายที่สุด เริ่มที่ฝั่ง Notion กันก่อน

เริ่มจากสร้างหน้าใหม่ กด Database เพื่อเพิ่ม database ใหม่

ต่อมาเพิ่ม property ต่าง ๆ ซึ่งโดย default จะมีพวก field ต่าง ๆ มาให้ เรามาปรับเปลี่ยนเป็นดังนี้

- slug: เป็น type text เอาไว้เป็น url ห้อยข้างหลัง เมื่อเปิดดูรีวิวของของชิ้นนั้น ๆ

- shopeeUrl: เป็น url คือลิ้งที่เราเจนไว้สำหรับ affilate

- tag: เป็น multi-select ของชึ้นนึงก็เข้าหลายหมวดหมู่

- published: เป็น checkbox อันไหนติ๊กแล้วคือเอาขึ้นได้

ส่วนข้างในเป็น content ที่เราป้ายยาไว้ ก็เขียนไปตามสไตล์ของเราได้เลย ด้วย markdown เนอะ

เรื่องรูป เรา upload บน page cover ด้านบนได้เลย เราจะเอาไปแสดงใน item ทั้งหมด แต่ข้อเสียที่เจอคือ บางทีเหมือนไฟล์มาเสีย เพราะตัวลิ้งรูปมีอายุแค่ชั่วโมงเดียว เดี๋ยวเราอาจจะเปลี่ยนวิธีนิดหน่อย

-

🌐 Notion API

เราอยู่ในหน้าที่เพิ่งสร้าง database ไปเนอะ กดสามจุดด้านขวามือ แล้วเลื่อนลงมาตรง Connections → Manage Connections จะขึ้นหน้า popup อันใหม่มา ให้กด Go to developer portal

จากนั้นมันจะเปิดหน้าใหม่มา เป็นหน้า Develops ให้ไปแท็บ Connections แล้วกด “+ New Connection” ใส่ชื่อให้เรียกร้อย เลือกเป็น Access Token แล้วมันสร้าง connection ใหม่ให้เรา แล้วก็มาตั้งค่าบางอย่างกัน

- Capabilities เนื่องจากเราอยากเอาข้อมูลใน database มาแสดงเพียงอย่างเดียว ดังนั้น Read Content น่าจะเพียงพอแล้ว เพราะคนแก้ content คือเรา

- User capabilities: เนื่องจากเว็บนี้ดึงข้อมูลขึ้นมาแสดง เลยเลือก No user information เพราะไม่จำเป็นต้องแสดงข้อมูลของเรา

ตรง Access token จะเอามาใช้ตอนช่วงตอนทำหน้าเว็บเนอะ

ต่อมาไปที่แท็บ Content access ให้เลือก page ที่เราต้องการ โดยกดปุ่ม “Edit access” ติ๊กเลือก page ที่เราต้องการ ในที่นี้คือ ป้ายยาฮับ แล้วกดปุ่ม “save”

เราสร้าง database ไว้สองอัน และรวมในหน้า ป้ายยาฮับ เพื่อให้ง่ายต่อการจัดการ permission

ปล. ก่อนหน้านี้มันให้เลือกเป็น Internal integrations กับ Public integrations สามเดือนผ่านไป ใช้วิธีเดิมไม่ได้ล่ะ มีการเปลี่ยนแปลง

-

🧑‍🚀 Google Antigravity

เราลองเล่น version 1 มา มันแค่ download Antigravity อย่างเดียว แล้วมันสลับ view ที่เป็นตัวแชท กับแก้โค้ดได้

พอมา version 2 ต้อง download 2 โปรแกรม คือ Antigravity 2.0 และ Antigravity IDE กดสลับได้แต่คนละโปรแกรม ซึ่งสำหรับเดฟเราว่าลง Antigravity IDE ก็น่าจะพอแล้วนะ แต่ใน Antigravity 2.0 มันหา chat history ของโปรเจกต์ง่ายกว่า

หลังจาก download โปรแกรมเสร็จ ครั้งแรกจะมีหน้า onboarding ให้ก่อน และ sign-in with google ซึ่งใครสมัคร Google One ที่เป็น Google AI Pro or Ultra จะเป็น developer plan นะ หน้าตาจะคล้าย VS Code เลย

-

เริ่มใช้งานกัน

ก่อนหน้านี้ใน version 1 ตรง agent มี 2 mode คือ

- planing: มีการวางแผนอะไรใด ๆ

- fast: execute ให้เราเลย เหมาะกับ simple task

ใน version 2 จะไม่มีให้เลือกแล้ว

ส่วน model ที่มีให้เลือก

- Gemini 3.5 Flash (Medium) - Fast

- Gemini 3.5 Flash (High) - Fast

- Gemini 3.5 Flash (Low) - Fast

- Gemini 3.1 Pro (Low)

- Gemini 3.1 Pro (High)

- Claude Sonnet 4.6 (Thinking)

- Claude Opus 4.6 (Thinking)

ในฝั่งของ settings เราแก้ Tab Gitignore Access จาก off เป็น on กลัวติดอะไรแปลก ๆ ตอน commit code ไป ส่วนที่เหลือคงไว้

ส่วน prompt ที่เราใส่ในที่นี้ โดยสุดท้ายเราจะ deploy เว็บนี้ขึ้น Vercel นี่แหละ

"""สร้าง website สำหรับป้ายยา รีวิว ติดลิ้ง shopee affilate ด้วย Next.js และ Tailwind CSS ใช้ Google Fonts ด้วย จะแบ่งเนื้อหาเป็นสองส่วน เชื่อมต่อกับ Notion API โดยหน้าเว็บหลักแบ่งเป็น 4 ส่วน คือ

- title และ description ของเว็บนี้ title เป็นคำว่า ป้ายยาฮับ description เป็น รวมของดี ที่ใช้จริง โดย MikkiPastel

- feature review: เป็นแบนเนอร์แนวนอน เน้นมัดรวมหลายชิ้นด้วยกัน ใช้ database บน Notion ที่ชื่อว่า feature items

- item review: แสดงสินค้าแต่ละชิ้นในหน้า grid พร้อมชื่อสินค้า tag ของสินค้า พร้อมปุ่มเปิดไปยังตัว shopee และสามารถ copy link shopee ไปแปะได้ ใช้ database บน Notion ที่ชื่อว่า recommend items

- footer

เมื่อกดแต่ละ item จาก feature review และ item review จะเปิดอีกหน้า เพื่อดูรีวิวเต็ม

แล้วสุดท้ายจะเอาไป deploy บน vercel"""

จากนั้นรอแปปนึง มันจะสร้าง implementation plan มาให้ อันไหนอยากให้ปรับเพิ่ม สามารถครอบเพื่อ comment ไปได้เลย เช่น "ของ review มี name (text), slug (text), shopeeUrl (url), tags (multi-select), published (checkbox - จะแสดงบนหน้าเว็บ เมื่อถูกติ๊ก) และเอา content จากข้างใน page มาแสดง"

พอเรา comment จนพอใจแล้ว กด submit ได้เลย มันสร้าง task มาว่าต้องทำอะไรบ้าง เราก็สั่งลุยได้เลย มันจะเขียนโค้ดตาม task ให้เราจนครบเลย หลังจากนั้นเราก็รีวิวทีละไฟล์ได้เลย

ถ้ามีอะไรให้มันแก้ หรืออยากจะ custom บางอย่างเราก็แคปรูปไปบอกมันได้เลยว่าจะเอาแบบนี้ ใด ๆ แก้โค้ดเอง อย่าลืมกด save ด้วย

เมื่อรีวิวและ accept เรียบร้อยแล้ว มาใส่ key และ database id จาก Notion กัน โดยสร้างไฟล์ .env.local ที่ด้านนอก พร้อมใส่ตัวแปรเหล่านี้ไปในไฟล์นี้

```env

NOTION_TOKEN=ntn_abc123...

FEATURE_DB_ID=xxx...

RECOMMEND_DB_ID=yyy..

```

- NOTION_TOKEN: เอามาจากการสร้าง Connection ตอนแรกเลย โดยหน้าตามันจะประมาณนี้ ntn_abc123...

- FEATURE_DB_ID กับ RECOMMEND_DB_ID: ให้ไปที่ Settings → Manage data sources แล้วไปที่ source ที่เราต้องการ กดที่สามจุด เลือก Copy data source ID แล้วเอาไปแปะได้เลย

-

ใช้ AI Credit ไปเท่าไหร่แล้ว?

ในตอนนี้ Google Antigravity ใช้ฟรี แต่มี limit อยู่ สามารถได้ สำหรับชาว MacOS เข้าไปที่ Settings ของแอพ แล้วไปที่ Anitigravity IDE Settings จากนั้นไปที่แท็บ Models เพื่อดู Model Quota ได้

-

🌐 deploy vercel

ก่อนอื่นเราเอาตัว project ขึ้น repo บน Github ก่อน

เนื่องจากตัวเว็บเป็น Next.js ดังนั้นช่องทางการ deploy ออกมาเป็นเว็บที่ทุกคนใช้งานได้ที่เหมาะสมที่สุด คือ Vercel นี่แหละ

ก่อนอื่นไปที่หน้า console ของ Vercel จากนั้นกดปุ่ม “Add New…” เลือก Project

จากนั้นคลิก “Import” กับโปรเจกต์ที่เราต้องการ deploy ออกมาเป็นเว็บจริง

มันจะพาไปหน้า New Project ใส่ key ต่าง ๆ ที่เราใช้ก่อนหน้านี้ที่ .env.local ใน local คลิกตรง Environment Variables แล้วใส่ key และ value ให้เรียบร้อย หรือกด Import .env แล้วโยนไฟล์ไปก็ได้ เมื่อเรียบร้อยแล้วกดปุ่ม “Deploy”

-

🛍️ ใส่ลิ้งเว็บเราใน Shopee Affiliate

สามารถอ่านในนี้ได้เลย

#รวมเรื่องไอที #lemon8ฮาวทู #คลับเกมและเทค #programmer #developer