เปิดตัวเว็บไซต์พอร์ตโฟลิโอด้วย AI

1. บทนำ

ภาพรวม

การสร้างด้วย AI เริ่มต้นจากที่ใดได้บ้างในวันนี้ สำหรับพวกเราส่วนใหญ่แล้ว การเริ่มต้นจะมาจากการค้นหาหรือต้นแบบ Google AI Studio มีโหมดสร้างอันทรงพลัง (มักเรียกว่า "Vibe Coding") ที่ช่วยให้คุณออกแบบ ทดสอบ และสร้างเว็บแอปพลิเคชันโดยใช้การสร้างโค้ดที่ขับเคลื่อนโดยโมเดล Gemini

ใน Codelab นี้ คุณจะได้สร้างเว็บไซต์พอร์ตโฟลิโอส่วนตัว เอเจนต์ AI Studio จะเขียนโค้ดส่วนหน้า เมื่อแอปพร้อมใช้งานแล้ว คุณจะติดตั้งใช้งานแอปไปยัง Cloud Run ได้โดยตรงด้วยการคลิกเพียงครั้งเดียว

สิ่งที่คุณต้องทำ

  • แจ้ง Google AI Studio ให้สร้างต้นแบบเว็บไซต์พอร์ตโฟลิโอส่วนตัว
  • ทดสอบแอปพลิเคชันในแซนด์บ็อกซ์ตัวอย่างแบบอินเทอร์แอกทีฟ
  • ติดตั้งใช้งานแอปพลิเคชันไปยัง Cloud Run โดยตรงจาก UI ของ Google AI Studio

สิ่งที่คุณจะได้เรียนรู้

  • วิธีใช้โหมดสร้างของ Google AI Studio เพื่อสร้างต้นแบบบริการส่วนหน้าอย่างรวดเร็วโดยใช้ภาษามนุษย์
  • วิธีติดตั้งใช้งานแอปพลิเคชัน AI Studio เป็นคอนเทนเนอร์แบบ Serverless ใน Cloud Run

2. การตั้งค่าโปรเจ็กต์

ก่อนเปิดตัว AI Studio ให้ตรวจสอบสถานะบัญชีและข้อกำหนดเบื้องต้น

ข้อมูลบัญชี Google และระดับ

  1. หากยังไม่มีบัญชี Google ให้สร้างบัญชี Google
    • เคล็ดลับ: ใช้บัญชี Google ส่วนตัวสำหรับ Lab นี้หากเป็นไปได้ บัญชีกลุ่ม บัญชีบริษัท หรือบัญชีโรงเรียนอาจบังคับใช้นโยบาย Workspace ที่ปิดใช้ฟีเจอร์ทดลองหรือการผสานรวมระบบคลาวด์
  2. ตรวจสอบรายละเอียดการเรียกเก็บเงินสำหรับการติดตั้งใช้งาน
    • ระดับเริ่มต้นของ Google Cloud: อนุญาตให้เผยแพร่แอปพลิเคชันแบบฟูลสแต็กได้สูงสุด 2 รายการในภูมิภาคที่เลือกโดยไม่มีค่าใช้จ่าย โดยไม่ต้องสร้างบัญชีสำหรับการเรียกเก็บเงินของ Google Cloud แบบเต็ม
    • การติดตั้งใช้งานมาตรฐาน: เชื่อมต่อกับโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google แบบชำระเงินที่มีอยู่และขยายขีดจำกัดพื้นที่เก็บข้อมูล ทรัพยากร CPU และ API

3. สร้างเว็บไซต์พอร์ตโฟลิโอในโหมดสร้างของ AI Studio

สร้างโครงสร้างแอปพลิเคชันและแจ้งให้ผู้ช่วยเขียนโค้ด AI สร้างเลย์เอาต์ฟรอนท์เอนด์

  1. ไปที่แผงแอป Google AI Studio แล้วคลิกแอปใหม่
  2. ในช่องพรอมต์แชท ให้ป้อนคำอธิบายสำหรับแอปพลิเคชันพอร์ตโฟลิโอของคุณ ดังนี้ 
    Build a professional personal portfolio website. The site should
have a modern, responsive design and sections for my biography,
projects showcase, skills, and links to my professional profiles
(e.g., GitHub, LinkedIn).
  3. คลิกสร้างเพื่อเริ่มกระบวนการสร้างแอปพลิเคชัน

4. ทดสอบและทำซ้ำ

ก่อนเปิดตัวบริการแบบสด ให้เรียกใช้การตรวจสอบความถูกต้องในตัวอย่างแบบอินเทอร์แอกทีฟ

  1. เปิดบานหน้าต่างแสดงตัวอย่างภายใน Google AI Studio
  2. โต้ตอบกับปุ่มนำทาง ลิงก์ หรือเลย์เอาต์ใดก็ได้ในแซนด์บ็อกซ์ตัวอย่างเพื่อยืนยันประสบการณ์การมองเห็น
    • หมายเหตุเกี่ยวกับการแก้ไขข้อผิดพลาด: ระหว่างการสร้างหรือการทดสอบ คุณอาจพบปัญหาขณะรันไทม์หรือข้อผิดพลาดในการคอมไพล์เป็นครั้งคราว หากเกิดกรณีนี้ขึ้น AI Studio จะแสดงปุ่มแก้ไขในแชท ซึ่งช่วยให้คุณขอให้เอเจนต์วินิจฉัยและแก้ไขปัญหาโดยอัตโนมัติได้
    ตำแหน่งปุ่มแก้ไขใน Google AI Studio
  3. หากต้องการเปลี่ยนสไตล์หรือลักษณะการทำงาน ให้สั่งเอเจนต์ผ่านหน้าต่างแชท เช่น
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Include a new section to showcase my recent presentations and talks."
  4. รอให้ตัวแทนอัปเดตฐานของโค้ดและตรวจสอบเบราว์เซอร์แสดงตัวอย่างเพื่อดูการอัปเดต

5. ทำให้ใช้งานได้กับ Cloud Run

เมื่อต้นแบบทำงานได้อย่างสมบูรณ์แล้ว ให้ทำให้ใช้งานได้เป็นบริการสาธารณะใน Cloud Run

  1. ที่มุมขวาบนของ Google AI Studio ให้คลิกปุ่มเผยแพร่เพื่อเริ่มวิซาร์ดการติดตั้งใช้งานตำแหน่งปุ่มเผยแพร่ของ Google AI Studio
  2. คลิกเริ่มต้นใช้งานเพื่อกำหนดค่าโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google
    • ตรวจสอบว่าเมนูแบบเลื่อนลงของโปรเจ็กต์ Google Cloud เป้าหมายตรงกับโปรเจ็กต์ที่คุณเชื่อมโยงกับพื้นที่ทำงาน
    • AI Studio จะสร้างตัวระบุบริการที่ไม่ซ้ำกันสำหรับอินสแตนซ์ Cloud Run โดยอัตโนมัติ
  3. หากเป็นการติดตั้งใช้งานครั้งแรกและคุณใช้พารามิเตอร์มาตรฐานของ Google Cloud ระบบอาจแจ้งให้คุณระบุประเภทองค์กรและให้รายละเอียดการเรียกเก็บเงิน
  4. คลิกเผยแพร่แอป
  5. ขั้นตอนการสร้างคอนเทนเนอร์ การลงทะเบียนคอนเทนเนอร์ และการติดตั้งใช้งานบริการจะเกิดขึ้นในเบื้องหลัง โดยปกติแล้วกระบวนการนี้จะใช้เวลา 2-4 นาที
  6. เมื่อการติดตั้งใช้งานเสร็จสิ้น ให้คัดลอก URL ของแอปที่สร้างขึ้น แล้วไปที่ลิงก์แอปพลิเคชันที่ใช้งานจริงในแท็บเบราว์เซอร์
  7. ทดสอบเว็บแอปพลิเคชันที่ใช้งานจริงในเบราว์เซอร์

6. (ไม่บังคับ) เพิ่มโดเมนที่กำหนดเอง

โดยค่าเริ่มต้น Cloud Run จะโฮสต์บริการของคุณในโดเมนย่อย run.app ที่ Google จัดการ หากต้องการใช้โดเมนส่วนตัว (เช่น yourname.com หรือ portfolio.yourname.com) คุณสามารถแมปโดเมนที่กำหนดเองกับบริการได้

ขั้นตอนที่ 1: เพิ่มการแมปโดเมนใน Cloud Run

  1. ไปที่หน้าการแมปโดเมนของ Cloud Run ในคอนโซล Google Cloud
  2. คลิกเพิ่มการจับคู่
  3. เลือกบริการ Cloud Run ที่ต้องการแมปจากเมนูแบบเลื่อนลง
  4. ป้อนชื่อโดเมนที่กำหนดเอง (เช่น yourname.com หรือ portfolio.yourname.com)
  5. คลิกถัดไปหรือดำเนินการต่อ Cloud Run จะแสดงระเบียน DNS (เช่น ระเบียน A/AAAA หรือ CNAME) ที่คุณต้องสร้างกับผู้รับจดทะเบียนโดเมน

ขั้นตอนที่ 2: กำหนดค่าผู้รับจดทะเบียน DNS

  1. ลงชื่อเข้าใช้แผงการดูแลระบบของผู้รับจดทะเบียนโดเมน (เช่น Squarespace, GoDaddy หรือ Namecheap)
  2. เปิดหน้าการจัดการ DNS หรือการกำหนดค่าการตั้งค่า DNS สำหรับโดเมน
  3. สร้างระเบียน DNS ที่ตรงกับค่าที่แสดงในวิซาร์ดการแมป Cloud Run
    • สำหรับการแมปโดเมน Apex (เช่น yourname.com) ให้เพิ่มระเบียน A และ AAAA ที่ระบุไว้
    • สำหรับการแมปโดเมนย่อย (เช่น portfolio.yourname.com) ให้เพิ่มระเบียน CNAME ที่ระบุไว้
  4. บันทึกการเปลี่ยนแปลงการกำหนดค่า DNS

ขั้นตอนที่ 3: รอการจัดสรรใบรับรอง SSL

เมื่อการเปลี่ยนแปลง DNS มีผลแล้ว ให้ดำเนินการดังนี้

  1. Google Cloud จะจัดสรรใบรับรอง SSL/TLS ที่มีการจัดการให้โดยอัตโนมัติสำหรับการเชื่อมต่อที่ปลอดภัย
  2. โดยปกติขั้นตอนนี้จะใช้เวลาประมาณ 15 นาที แต่ก็อาจใช้เวลาถึง 24 ชั่วโมง ทั้งนี้ขึ้นอยู่กับการเผยแพร่ DNS
  3. เมื่อเสร็จแล้ว โดเมนที่กำหนดเองจะนำไปยังเว็บไซต์ผลงานของคุณอย่างปลอดภัย

7. ล้าง

หากต้องการหลีกเลี่ยงค่าใช้จ่ายในการเรียกเก็บเงินที่ไม่คาดคิดหรือล้างข้อมูลทรัพยากรในพื้นที่ทำงาน ให้ทำดังนี้

  1. ไปที่หน้าแอปใน Google AI Studio
  2. ค้นหาแอปพลิเคชันของคุณในตารางกริดหรือรายการ
  3. คลิกไอคอนถังขยะเพื่อลบสถานะแอปและยกเลิกการเผยแพร่บริการจาก Cloud Run
  4. หากคุณติดตั้งใช้งานโดยใช้โปรเจ็กต์ Standard และต้องการปิดทรัพยากรทั้งหมดโดยสมบูรณ์ ให้ไปที่การตั้งค่าโปรเจ็กต์ในคอนโซล Google Cloud แล้วลบโปรเจ็กต์พื้นฐาน

8. บทสรุป

ยินดีด้วย คุณได้ออกแบบ พัฒนา และติดตั้งใช้งานเว็บไซต์พอร์ตโฟลิโอโดยตรงจาก Google AI Studio

ดูข้อมูลเพิ่มเติม

ไปที่ลิงก์นี้เพื่อรับป้ายเส้นทางของครีเอเตอร์ที่เสร็จสมบูรณ์

หากต้องการเดินทางต่อ โปรดไปที่ goo.gle/builders เพื่อเข้าสู่แล็บถัดไป