[Workshop] ใช้ AI สร้าง Sale page มี Contact form แบบไม่ต้องเขียน Code เองด้วย Bolt.new

บทความนี้เป็นบทความประกอบ Video ใช้ AI สร้าง Sale page แบบ No-Code ด้วย Bolt.new

Bolt.new คือโปรแกรมที่ใช้ Generative AI (Claude 3.5 Sonnet) ในการช่วยเราเขียนโค้ดโดยเพียงแค่เราพิมคำสั่งอธิบายโปรเจคที่เราต้องการ เพียงเท่านี้ โปรแกรมก็จะเริ่มเขียนโค้ดให้เราเองได้แล้ว

หากต้องการแก้ไขส่วนที่ AI เขียนโค้ดมาให้ก็เพียงแค่พิมคำสั่งให้ระบบแก้ไขตัวเองได้เลย Bolt.new ยังสามารถจัดการเรื่องการ Deployment ในตัวผ่าน Netlify และเชื่อมต่อกับ Database ด้วย Supabase

นอกจาก Bolt.new แล้วยังมีโปรแกรมอื่น ๆ ที่มีความสามารถคล้าย ๆ กัน เช่น v0, lovable, Replit AI

ตัวอย่างเว็บไซต์ที่เสร็จสมบูรณ์แล้ว

ถึงแม้ว่า Workshop นี้จะบอกว่าไม่ต้องเขียนโค้ดก็ตาม แต่ผู้เขียนก็ยังเชื่อว่า ถ้าคุณจำคำสั่งง่าย ๆ เพิ่มแค่ไม่กี่ตัว มันจะช่วยทำให้การทำงาน มีประสิทธิภาพ และลดค่าใช้จ่ายได้เยอะมาก ๆ ทีเดียว ดังนั้นใน Workshop จะเสนอทางเลือกทั้งการเขียนโค้ดเล็ก ๆ น้อย กับการไม่เขียนโค้ดเลยประกอบ

ภาพรวม / Project Overview

การสร้าง Website มีได้หลายวิธี และแต่ละวิธีก็มีข้อดี ข้อเสียแตกต่างกันออกไป อ่านบทความ พัฒนาโปรแกรมยังไงให้คุ้มค่า เขียนโปรแกรม VS Low-Code VS โปรแกรมสำเร็จรูป เพิ่มเติมเพื่อให้เลือกวิธีการได้เหมาะสม

และในกรณีนี้โปรแกรมอย่าง Bolt.new เป็นเครื่องมือแบบใหม่ ที่สร้างสั่งการเป็นภาษาพูด (Prompt) เพื่อสร้างเว็บไซต์ที่เราต้องการ และสามารถดูผลลัพธ์ได้ทันที ในส่วนนี้จะแนะนำภาพรวมของ Project ก่อนตัดสินใจลงมือทำ

โครงสร้างภาพรวมของ Project คือ

• การพัฒนา (Development) จะใช้ Bolt.new ในการพัฒนา Frontend หรือส่วนการแสดงผลทั้งหมด
• ใช้ Netlify ในการช่วย Deployment และทำตัวเหมือน Backend ในการเก็บข้อมูล Contact form

ประโยชน์ทางธุรกิจ / Business Overview

ใน Workshop เป็นการทดลองใช้งาน Bolt.new เพื่อสร้างเว็บไซต์หน้าเดียวที่ขายบริการให้คำปรึกษาเกี่ยวกับ Marketing Technology มี Contact form สำหรับให้ผู้เข้าชมส่งข้อมูลให้ทีมงานติดต่อกลับ

โดยส่วน Contact form จะใช้ฟีเจอร์ Netlify form ในการเก็บข้อมูล แทนการเก็บข้อมูลใน Database

รายละเอียด Contact form

หากเพิ่มข้อมูลที่จำเป็นไม่ครบจะส่งข้อมูลไม่ได้

• ชื่อ: ข้อมูลที่จำเป็น
• นามสกุล: ข้อมูลที่จำเป็น
• อีเมล: ข้อมูลที่จำเป็น และต้องเป็น E-mail format
• เบอร์โทรศัพท์: ข้อมูลที่ไม่จำเป็น
• ข้อความ: ข้อมูลที่จำเป็น

รายละเอียดอื่น ๆ

• ตัวอย่าง Sale page website

ค่าใช้จ่ายที่อาจจะเกิดขึ้น / Cost Breakdown

สำหรับการทำ Project นี้เพื่อใช้งานจริง สามารถแบ่งค่าใช้จ่ายที่เกิดขึ้นได้ดังนี้

Bolt.new

Bolt.new ใช้เพื่อ Prompt เพื่อสร้างเว็บไซต์คิดเป็นค่าใช้จ่ายเป็น token ในการใช้งาน AI ของ Platform โดยมีรายละเอียดดังนี้

• Free plan จะใช้ได้เพียง 150,000 token ต่อวัน และ 1 million token ต่อเดือน (เมื่อเต็ม Quota จะใช้งานต่อไม่ได้)
• Pro plan คิดราคาเริ่มต้นที่ $20 (ประมาณ 700 บาท) ต่อ 10 million Token ต่อเดือน

รายละเอียดเกี่ยวกับราคาของ Bolt.new

Netlify platform

Netlify เป็น Platform สำหรับการ Host website ของเรา โดยคิดค่าบริการแบบ Pay per usage (ยิ่งคนเข้าใช้งานเว็บไซต์เยอะ ยิ่งจ่ายแพง) โดยใน Workshop นี้ใช้ 2 ฟีเจอร์ใน Netlify ดังนี้

• Netlify form ระบบจัดการแบบฟอร์มใช้งานได้ฟรี 100 records ต่อเดือน (สามารถ export ข้อมูลเป็นไฟล์ CSV ได้) และคิด $19 (ประมาณ 700 บาท) ต่อเดือนเมื่อใช้งานเกิน Quota
• Netlify hosting การเช่า hosting ของ Netlify ใช้งานได้ฟรี ประมาณ 100GB (Bandwidth) ต่อเดือน และ $55 (ประมาณ 1,800 บาท) ต่อเดือนเมื่อใช้งานเกิน Quota

รายละเอียดเกี่ยวกับราคาของ Netlify

Domain name (ส่วนเสริม)

Domain name คือส่วนเสริมที่เราสามารถเปลี่ยน URL ของ Website จาก project_name.netlify.app เป็น URL ที่เราต้องการได้

ค่า Domain name จะคิดค่าใช้จ่ายตามชื่อของมัน มีค่าใช้จ่ายประมาณ 400 – 1000 บาท ต่อปี โดยมีหลายเว็บไซต์ที่ให้บริการเช่า Domain name เช่น namecheap.com, godaddy.com

แนวคิดการพัฒนา / Task Breakdown

ขั้นตอนในการลงมือทำไล่เป็นขั้นตอนจากง่ายไปยาก โดยหากทำตามขั้นตอนเหล่านี้จะสามารถเห็นภาพรวมของการพัฒนาได้ดียิ่งขึ้น

1. ออกแบบและสร้าง Prompt สำหรับสั่งการ Bolt.new
   หัวใจสำคัญของการใช้ AI เขียนโค้ดสร้างเว็บไซต์คือ การมี Brief การทำงานที่ละเอียด ซึ่งครอบคลุมตั้งแต่ข้อกำหนดทางเทคนิค และฟีเจอร์การใช้งาน
2. ใช้งาน Bolt.new เพื่อปรับแต่งเว็บไซต์เพิ่มเติมต่อจาก Prompt อันแรก
   โดยทำได้หลายวิธีเช่น
   1. แก้ไขข้อความ, เพิ่มรูปภาพใหม่ผ่านการแก้ไขใน Code editor
   2. การ Preview การแก้ไขใน Website และตรวจสอบการแสดงผลในหน้าจอแต่ละแบบ
   3. การ Prompt เพิ่มเติมเพื่อแก้ไข และการใช้ Inspector mode
3. เชื่อมต่อ Bolt.new กับ Netlify
4. เชื่อมต่อและทดสอบ Contact form ผ่าน Netlify form
5. เชื่อม Domain name เข้ากับ Netlify (ส่วนเสริม)

สิ่งที่ต้องเตรียม / Project Prerequisites

• Bolt.new account สมัครเข้าใช้งานที่นี่ https://bolt.new/
• Domain name (ส่วนเสริม)
• ไฟล์รูปภาพที่ใช้ใน Project
  • URL ภาพจาก Unsplash
  • ไฟล์รูปภาพให้ดาวน์โหลดออกมาเผื่อใช้อัปโหลดใน Project

ขั้นตอนการลงมือทำ / How to

1. เตรียม Prompt สำหรับใช้งานกับ Bolt.new

Prompt ที่ใช้ทำงานกับ Bolt.new ควรมีองค์ประกอบดังนี้ (ควรกรอกข้อมูลให้ครบแล้วค่อยไปแก้ไขใน Bolt.new ภายหลัง)

• Technical Requirements
  ส่วนรายละเอียดทางเทคนิคที่สำคัญ
  • Technology stack ที่ใช้งาน
    • Framework: Astro.js
      เหตุผลที่เลือกเพราะเรียบง่าย สามารถแก้ไขไฟล์ HTML ได้เองเลย
    • Programming language: Typescript
      เหตุผลที่เลือกเพราะสามารถส่งต่องานให้ Software Engineer ต่อได้ง่าย
    • Styling Framework: Tailwind CSS
      เหตุผลที่เลือกเพราะเป็นที่นิยม สามารถเขียน Style ลงในไฟล์ HTML ตรง ๆ ได้
    • Deployment Platform: Netlify
    • Package Manager: NPM
  • การปรับแต่งทาง SEO
  • Netlify form
  • การใส่ placeholder content
  • Coding rules เพื่อ AI ทำงานตามรูปแบบของเรา
    ยิ่ง AI เขียนแบ่งเป็นหลายไฟล์จะทำให้เสีย Token น้อยลงในการแก้ไขแต่ละครั้ง
• Design requirements
  ส่วนเสริม ใส่หรือไม่ใส่ก็ได้ (แนะนำให้ไปปรับแต่งใน Code editor แทน เพราะ Brief เรื่อง Design ทำได้ยาก หากไม่มีการใช้ Mockup file ประกอบ)
  • Typeface ที่ใช้
  • Mood and Tone ที่ต้องการ
• Business requirements
  ส่วนข้อมูลเกี่ยวกับตัวบริษัท (แนะนำให้ใส่ส่วนนี้ให้ละเอียดที่สุด เพื่อป้องกันการ Hallucination ของ AI)
  • Company name
  • Tag line
  • Address
  • Customer representative
  • Email
  • Telephone
• Contact form
  • First name (required)
  • Last name (required)
  • E-mail (required)
  • Telephone (no required)
  • Message (required)
• SEO meta tag
  ส่วนข้อความที่จะแสดงผลกับ Search Engine
  • Meta title
  • Meta description
• Content
  ส่วนข้อความทั้งหมดบนหน้าเว็บไซต์
  (ข้อความทั้งหมดจะส่งผลต่อการสร้าง Layout ของ Website)

Prompt ฉบับเต็ม

Prompt นี้เป็น Prompt ตัวอย่างสามารถปรับแต่งให้เข้ากับโจทย์ของตัวเอง หรือให้ Generative AI ช่วยปรับ Prompt ให้เราก็ได้

Create a single-page website with contact form for a MarTech consultant service.

# Technical Requirements

## Technology Stack

- **Frontend Framework**: Astro
- **Programming Language**: TypeScript
- **Styling Framework**: Tailwind CSS
- **Deployment Platform**: Netlify
- **Package Manager**: NPM

## Form Implementation Requirements

Manage forms and submissions without any server-side code.

 Add an HTML form to your site with a netlify attribute in the <form> tag, enable form detection, and you’ll automatically receive form submissions in your Netlify dashboard. Netlify parses HTML forms directly at deploy time, so there’s no need to make an API call.

example code

```html
<form name="contact" netlify>
  <p>
    <label>Name <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Email <input type="email" name="email" /></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>
```

## SEO Optimization Requirements

- Implement proper heading hierarchy (h1 → h2 → h3)
- Ensure single h1 per page
- Use semantic HTML5 elements
- Ensure all images have descriptive alt text
- Implement responsive design for all devices

## Special Instruction

- Fill image assets with Unsplash stock images you know exist.
- Use svgs for icon or logos if component requires them.
- Use modules instead of just a single file.
- Remove the starter file e.g. Welcome.astro
- All color palette need to register inside tailwind config to easy to adjust later with readable name e.g. hero-background
- Maintain all existing content during the second iteration as I will incorporate it into my project.
- Provide clear instructions for replacing content, font, themes, or images in this project.
- This project is intended to be a single-page website only. Do not add any additional pages or dead links to this project.

# Design requirements
- Typeface (Google font): 
Primary font: IBM Plex Sans Thai for heading
Secondary font: Sarabun for body

- Style: Modern, Minimal

# Business requirements
Company name: Helix Consulting
Tag line: Marketing technology expert in your area.
Address: 123 Automation Avenue Luxury Heights, CA 90210
Email: info@helix-consulting.com
Telephone: +66 0879060345

# SEO content
Meta title: Helix Consultant | Marketing technology expert in your area
Meta description: Expert marketing technology consulting from Helix to elevate your digital strategy. Increase ROI with local, personalized MarTech solutions tailored to your business needs.

# Content
## Header
Fixed header with logo image and contact button
Smooth scroll to sections

## Hero section
(Full-width background image (use Unsplash: "modern-office-workspace"))
**Transform Your Digital Presence**
At Helix Consulting, we blend innovative marketing technology with strategic expertise to help your business thrive in the digital landscape. As your local MarTech partner, we deliver customized solutions that drive measurable results and sustainable growth.
Contact us

## Why us section
**Why Choose Helix Consulting?**
**Local Expertise, Global Standards**
Based in Luxury Heights, we understand the unique challenges and opportunities of the local market while implementing solutions that meet international best practices.

**Data-Driven Approach**
We transform raw data into actionable insights, helping you make informed decisions that maximize your marketing ROI and business performance.

**Tailored Solutions**
No two businesses are alike. We create customized MarTech strategies aligned with your specific goals, industry, and target audience.

**Seamless Integration**
Our experts ensure that your marketing technology stack works harmoniously with your existing systems, creating a unified ecosystem that enhances efficiency.

**Long-Term Partnership**
We're committed to your ongoing success, providing continuous support, optimization, and strategic guidance as your business evolves.

## Service section
**Our Services**
**MarTech Consultation**
Our strategic consultants assess your current marketing technology ecosystem, identify gaps and opportunities, and develop a comprehensive roadmap tailored to your business objectives.

**MarTech Implementation**
We transform strategy into reality by expertly implementing the right marketing technology solutions for your business needs.
- CRM system integration
- Marketing automation setup
- Analytics platform configuration
- Customer journey mapping tools

## Contact form
**Let's Work Together**
Ready to transform your digital strategy? Get in touch with us today.
- First name (required field)
- Last name (required field)
- E-mail (required field)
- Telephone (no required field)
- Message (required field)

## Footer
© Helix Consulting. All Rights Reserved.

2. Prompt เพื่อสร้าง Website ด้วย Bolt.new

เริ่มใช้งาน Bolt.new เพื่อ Prompt สร้าง Website ได้เลย !

เบื้องหลัง Bolt ทำอะไรให้เราบ้าง ?

• สร้าง Files และ Folders ต่าง ๆ ให้เรา
• ลงส่วนเสริมต่าง ๆ ที่จำเป็นตาม Technical requirements ด้วยคำสั่ง npm install ตาม package.json
• เปิด Server ให้เรา ด้วยคำสั่ง npm run dev

กรณีที่เกิด Error preview ไม่สำเร็จเราสามารถใช้คำสั่ง Please, try to attempt fix “ERROR_MESSAGE”

3. การแก้ไขข้อความผ่านการใช้ Code editor ใน Bolt.new

ในส่วนนี้เราจะแก้ไขข้อความจาก “Transform Your Digital Presence” เป็น “Navigate Your Digital Presence”

• Search หา Keyword ที่ต้องการแก้ไขด้วยกดการปุ่ม Search หาคำว่า “Transform Your Digital Presence”
• แก้ไขข้อความเป็น “Navigate Your Digital Presence”
• กด Save และดูผลลัพธ์ตรง Tab Preview
• กรณีที่ผลลัพธ์ไม่ถูกต้อง สามารถกด undo ด้วย Ctrl + Z หรือ Command + Z

4. การแก้ไขรูปภาพผ่านการใช้ Code editor และ Inspector mode ใน Bolt.new

ในส่วนนี้เราจะลองเปลี่ยนภาพบน Website กัน ซึ่งการเปลี่ยนภาพบน Website ทำได้ทั้งการ Upload รูปภาพเข้าไปเอง หรือใส่ URL ของรูปภาพนั้น ๆ

กรณีที่ต้องการ Upload รูปภาพเข้าไปเอง: โยนไฟล์รูปภาพไปที่ Folder public และ คลิกขวาเพื่อ copy relative path ไว้
ตัวอย่างไฟล์ภาพ blue-gradient.jpg จะได้ relative path เป็น public/blue-gradient.jpg

กรณีที่ต้องการใช้รูปภาพที่มีอยู่แล้วบน Internet: ให้ไป copy URL ของภาพนั้น ๆ
ตัวอย่างไฟล์ URL ภาพ

ใช้ Inspector mode เพื่อเลือกส่วนที่ต้องการปรับ และ Prompt ให้ Bolt.new เปลี่ยนรูปภาพให้ตาม URL หรือตาม Relative path ดังนี้

I want to create/change image source to “relative_path_or_url” Please maintain my original text without any edits.

ตัวอย่าง I want to create/change image source to “public/blue-gradient.jpg”. Please maintain my original text without any edits.

กด Save และดูผลลัพธ์ตรง Tab Preview

สิ่งที่ Bolt.new ทำคือการเปลี่ยนค่าใน src ของ img element ในจุดที่เราต้อง ซึ่งหากเราสามารถทำเองได้ เราจะไม่ต้อง prompt ให้เสีย token รายละเอียดเกี่ยวกับ Image element

ใน Part นี้จะเลือกเปลี่ยนภาพพื้นหลังตรง Hero หรือเปลี่ยนภาพเป็น Logo ใน Header ก็ได้

5. การแก้ไข Theme ของ Website ผ่านการใช้ Code editor ใน Bolt.new

ในส่วนการแก้ไข Theme สี ต่าง พวกค่าโค้ดสีจะถูกเก็บอยู่ tailwind.config file

ให้หาไฟล์นี้ และลองแก้ไขสีไปเรื่อยจนเห็นความแตกต่าง (สังเกตว่า AI จะตั้งชื่อ สี ให้เราตามหาได้ง่ายแล้วเช่น primary, secondary เป็นต้น)

6. Prompt เพิ่มเติมเพื่อแก้ไข Website ส่วนที่มีความซับซ้อน

ในส่วนนี้จะเป็นการแก้ไข Website ที่มีความซับซ้อนขึ้น เราเลยจะให้ Bolt.new เขียนโค้ดให้แทนเป็นหลัก

การใช้ Inspector ควบคู่กับการ Prompt

เราจะกด Icon รูปเมาส์ด้านขวา และชี้ไปใน Section ที่เราสนใจจะเปลี่ยนแปลงการแสดงผล และ Prompt เพิ่มเติม

• ตัวอย่าง Prompt: I want this section to be grid layout with icons. Please maintain my original text without any edits.
• ตัวอย่าง Prompt: I want this section to be two-column layout, Icon-based cards, bulleted lists for features, clean, professional design. Please maintain my original text without any edits.

การใช้ Prompt enhancement

Prompt enhancement feature เหมาะสำหรับคนเข้าใจเรื่องการเขียนโปรแกรม เพราะระบบจะปรับ Prompt เราให้ละเอียดมาก ไม่เหมาะกับมือใหม่

การใช้ Discuss mode

ใช้เพื่อสอบถามเกี่ยวกับโค้ด โดยที่ยังไม่ได้แก้ไข (ข้อแนะนำคือ ถ้าถามอะไรกว้าง ๆ ไปใช้ ChatGPT แทนก็ได้ จะได้ไม่เปลือง Token)

7. เชื่อมต่อ Bolt.new กับ Netlify

เบื้องหลัง Bolt ทำอะไรให้เราบ้าง ?

• สร้าง Project เพื่อเตรียม Deploy ด้วยคำสั่ง npx astro build
• Deploy ไปที่ Netlify

8. ทดสอบการใช้งาน Netlify form

เข้าไปที่ Menu form เพื่อตรวจสอบการทำงานของ form โดยเมื่อเราลองส่งข้อมูลใน Website เข้ามา ข้อมูลจะแสดงผลในนี้ (ตรงส่วนของ Active forms)

Netlify form รองรับการทำ Spam prevention เพิ่มเติมสามารถสั่งการให้ Bolt.new เพิ่มฟีเจอร์ส่วนนี้ได้เลย รายละเอียด

รายละเอียดเกี่ยวกับ Netlify form

9. การตั้งค่า Custom domain name ใน Netlify (ส่วนเสริม)

การตั้งค่า Custom domain name สามารถทำได้ 2 วิธีดังนี้

ไฟล์สำเร็จรูป และแหล่งอ้างอิงอื่น ๆ

เรียนรู้เกี่ยวกับเทคโนโลยีที่ใช้ในโปรเจคนี้เพิ่มเติม

• Basic HTML
• Basic CSS
• Tailwind CSS
• Astro Docs

เรียนรู้เกี่ยวกับเรื่อง SEO

• Basic HTML สำหรับการใช้งานให้เหมาะสมกับหลัก SEO

แนวทางการใช้เครื่องมือกลุ่ม Agentic AI ในการเขียนโค้ด (Vibe Coding)

• 12 Rules to Vibe Code Without Frustration

เรียนรู้เกี่ยวกับเรื่อง Web Security

• Vibe Coding with AI: The Security Risks We’re Ignoring
• Secure Vibe Coding Guide
• A Vibe Coding Security Playbook: Keeping AI-Generated Code Safe
• Vibe Coding Security Top 10
• เครื่องมือ Vibesecurity
• OWASP Top Ten (Security risk ที่ Software engineer ใช้อ้างอิงอัปเดตทุกปี ต้องมีความรู้เรื่อง Technical ถึงจะอ่านเข้าใจ)

เรียนรู้การใช้งาน Bolt.new เพิ่มเติม

• Prompting Effectively: How to talk to Bolt
• Maximizing Token Efficiency: How to use less tokens
• Learning Center

แนวทางการต่อยอดเพิ่มเติม และข้อจำกัดใน Project

ในการใช้เครื่องมือกลุ่มนี้ยังเป็นสิ่งใหม่ที่แต่ละเครื่องมืออาจจะทำงานได้ไม่สมบูรณ์แบบ ในส่วนนี้จะอธิบายถึงข้อจำกัด และแนวทางในการต่อยอดเพิ่มเติม

ข้อจำกัดของ Platform ที่ต้องทำด้วยตัวเอง

เพื่อให้การสร้างและดูแล Website มีประสิทธิภาพมากขึ้น ควรทำสิ่งเหล่านี้เพิ่มเติมซึ่งใน Bolt.new อาจจะยังไม่รองรับในตอนนี้

Version control ในการเขียนโปรแกรม การทำ Versioning มีประโยชน์ในการ ย้อนกลับการแก้ไข เวลา Website มีปัญหา หรือเก็บข้อมูลการแก้ไขไว้ ซึ่งจะใช้ Git ในการทำ Versioning และเก็บโค้ดบน GitHub

ความเสี่ยงเกี่ยวกับ Project นี้

การเข้าใจภัยคุกคามที่อาจจะเกิดขึ้นได้เป็นหัวใจสำคัญที่ทำให้ Website ของเราปลอดภัย ในส่วนนี้จะยกตัวอย่างพร้อมทั้งรายละเอียดให้ไปศึกษาเพิ่มเติม

การถูก Spam เข้ามาใน Contact form จนเกิน Quota หรือรบกวนการทำงาน

ในโลกอินเตอร์เน็ต ไม่ได้มีแค่ผู้ใช้งานใช้งาน Website อย่างเดียว แต่อาจจะมี Bot ที่เข้ามาใช้งานซึ่งอาจจะมีความสามารถพิเศษบางอย่างเช่น ส่งข้อมูล, ข้อความ หรือโค้ดแปลก ๆ เข้ามาใน Contact form จำนวนมากในเวลาอันสั้น

Prompt ที่อาจจะช่วยปรับปรุงโค้ดให้ปลอดภัยมากขึ้น

Create a secure contact form implementation that includes comprehensive spam prevention and input validation measures in client side such as a honeypot field.

การใช้งาน Dependency / Package ที่เก่าและมีช่องโหว่

การสร้าง Website ส่วนใหญ่ แม้จะเป็นการเขียนโค้ด แต่ก็ไม่มีใครเขียนทุกอย่างเองจาก 0 อาจจะมีบ้างทีไปยืมโค้ดของคนอื่นมาใช้

เหมือนที่โรงงานผลิตรถยนต์ ก็ไม่ได้ผลิตยางรถยนต์เอง แต่สั่งซื้อจาก Supplier อีกที ซึ่งใน Digital product อาจจะเรียกว่า Dependency, Supply chain, Package

ซึ่งปัญหาอาจจะเกิดขึ้นได้หากเราใช้โค้ดของคนอื่น / Supplier ที่เก่าแล้วและมีช่องโหว่ แต่เราไม่ได้อัปเดตให้ใหม่อยู่เสมอ

Prompt ที่อาจจะช่วยปรับปรุงโค้ดให้ปลอดภัยมากขึ้น

Analyze my project dependencies for security vulnerabilities, and suggest safer alternatives for any packages that are outdated or have known security issues.

เทคนิคขั้นสูงอื่น ๆ

• การตั้งค่า Cross-Origin Resource Sharing (CORS) Policy
• การทำ Hot link protection
• การตั้งค่า Content Security Policy (CSP) เพื่อควบคุมการโหลดข้อมูลบนเว็บไซต์ของเรา
• การทำ Cache เพื่อลดการโหลด Website บน Netlify
• การทำ reCAPTCHA

คำถามที่พบบ่อยเกี่ยวกับ Project นี้

ยังไม่มี

• Facebook
• Twitter
• Line

AI Bolt.new Low-Code No-Code Workshop

Worakarn Ounhattapradit

พีเตอร์ ผู้ตัดสินใจกระโดดข้ามสายงานจากนักออกแบบ มาสู่โลกแห่งเทคโนโลยี สนใจในเทคโนโลยีใหม่ ๆ ที่จะพัฒนาคุณภาพชีวิตคนให้ดีขึ้น อ่านรายละเอียดเพิ่มเติม