Text-to-SQL frontend

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

ซึ่ง Text to SQL จะช่วยให้ นักพัฒนาสามารถสื่อสารกับฐานข้อมูลได้นั้นเอง ยกตัวเช่น เราถามคำสั่งง่ายๆ เช่น  เขียน SQL ในรูปแบบ PostgresSQL โดยหาค่าความสูงเฉลี่ยของนักเรียน

‍

Understand the project requirements and architecture

ขั้นตอนแรก เราจะมาเข้าใจ ของตัวงานหรือโปรเจ็คกัน ซึ่งในโปรเจคนี้จะประกอบไปด้วย requirement หลักสำคัญดังต่อไปนี้

1. มีตัวของ table ที่แสดงข้อมูลของทาง database
2. เราพูดคุยกับ database โดยการออกคำสั่ง กับ database ได้
3. เราสามารถเพิ่ม ข้อมูล ลงใน table ได้

Design the frontend architecture

ในครั้งนี้เราจะเลือกในงรอบนี้ที่เราเลือกในที่นี่เราเลือกframeworkเป็น NextJS

โดย Lib ต่างที่เราเลือกมี ดังต่อไปนี้

1. react-hook-form ไว้สำหรับจัดการ form ต่าง

1. React Hook Form - performant, flexible and extensible form library
2. @tanstack/react-query ใช้ในการเชื่อมต่อ api ซึ่ง useQuery มี state  เช่น loading ,isSucces,isError ทำให้เราไม่ต้องจัดการ state เองให้ยุ่งยาก

1. TanStack | High Quality Open-Source Software for Web Developers
2. TailwindCss เราเลือกใช้ในการจัดการ style ต่างๆ และ tailwind-merge  

1. Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
2. Zod สำหรับการ validate input ข้อมูลต่างๆ

1. TypeScript-first schema validation with static type inference

Implement the frontend

เราก็จะมาเริ่ม Implement ในส่วนของ Frontend กัน ซึ่งในการสรา้ง Project เราก็สั่งด้วยคำสั่ง

npx create-next-app

เมื่อเรา create เสร็จเเล้ว ก็จะสั้ง

yarn dev

จากนั้นเรามาเริ่ม ทำการ Implement  กัน เราก็จะเริ่มจากการขึ้น UI ก่อนเลย หลังจากเราขึ้น ตัว UI ของเราได้ครบเเล้ว  เราก็จะมาจัดการตัว Form ของเรา ด้วย zod เราจะมี schema

export const askScheme = z.object({
  endpoint: z.string().url().optional().or(z.literal('')),
  query: z.string(),
  bot: z.string({}).optional(),
})

และ จัดการตัว react-hook-form  ข้อดีของ react hook  form นี้ช่วยในเรื่องของ performance  การลดrender ของ DOM ได้ เมื่อเทียบกับการที่เราใช้ useState  ในการทำ Input เลยทีเดียว

const methods = useForm <IOpenAIForm>({
    resolver: zodResolver(askScheme),
    mode: 'onChange',
    shouldFocusError: true,
    defaultValues: {
      endpoint: endpointAPi,
    },
  })

  const {
    handleSubmit,
    setError,
    setValue,
    control,
    formState: { errors },
  } = methods

เมื่อเรา Implement เสร็จเเล้ว ก็จะได้หน้าตาของ UI ในแบบนี้

Integrate the frontend with the backend

ในส่วนนี้เราจะมาเชื่อมต่อกับส่วนของ Backend กัน ซึ่ง lib ที่เราจะใช้หลักๆ คือ axios กับ @tanstack/react-query

ซึ่งในการต่อ API เราจะมีการดึง data มาลองตัวคือ colunm กับ data

  const [
    { isLoading, data: column, refetch: refetchColum },
    { isLoading: isLoadAlldata, data: allData, refetch: refetchAllData },
  ] = useQueries({
    queries: [
      {
        queryKey: ['getInfo'],
        queryFn: () => axios.get('/getInfo').then((res) => res.data),
      },
      {
        queryKey: ['getAllData'],
        queryFn: () => axios.get('/getAllData').then((res) => res.data),
      },
    ],
  })

และในส่วนของการ chat   และการ random data ให้กับ ตาราง

  const { mutateAsync: queryPromt } = useMutation({
    mutationFn: ({ query_str }: { query_str: string }) => {
      return axios.get(`/queryWithPrompt?query_str=${query_str}`)
    },
    onError: () => {
      setError('bot', {
        message: 'There was an error fetching the response.',
      })
    },
  })

  const { mutateAsync: randomData } = useMutation({
    mutationFn: () => {
      return axios.get(`/addRandomData`)
    },
  })

จากนั้น เราจะนำ data  ที่เราได้ ไปเชื่อมกับ UI และจัด state ต่างๆ ไม่ว่าการ loading  หรือ errors

Test the frontend

ในขั้นตอนนี้เราก็จะมา test กันว่า เป็นไปตามผลที่เราคาดหวังหรือต้องการรึเปล่า ทั้งในด้านของ function ทำตามต้องการไหม หรือ ด้าน UI ถูกต้องไหม ไหนลองเเชทดูสิ

พอเราทำการลองเล่น สิ่งที่หนึงที่เห็นคือ ตัว block ขยับ เลยปรับแก้เพื่อความเรียบร้อย  ตามอันนี้ก็เป็นการ Test manual เเต่ว่า เราสามารถทำให้ดีกว่านี้ โดยการเขียน Unit test ก็ได้นะ 😆

Deploy the frontend

ในขั้นตอนนี้เราก็จะมาทำการ deploy กัน ซึ่งในส่วน เราก็จะจัดการ config หรือ env ต่างๆ ให้เรียบร้อยก่อนการ deploy เช่น env สำหรับการเชื่อม API ซึ่งในโปรเจ็คนี้เรามีอยู่ นั้นเอง

.env

NEXT_PUBLIC_API = your endpoint

‍

ทิ้งท้ายบทความสำหรับ Text2SQL

Text-to-SQL frontend

Text-to-SQL backend

Github frontend

Github backend

FAQ Facebook Group