ทำเว็บย่อลิงก์ของตัวเองในคลิปเดียว !! ด้วย Go, Gin, GORM, React (และ Vite)
ในบทความนี้จะเราจะมาทำเว็บย่อลิงก์ของตัวเองในคลิปเดียว เพียงแค่ใช้ Go, Gin, GORM, React และ Vite
ขั้นตอนที่ 1: ติดตั้ง Go, Gin, และ GORM
เริ่มต้นด้วยการติดตั้ง Go และเฟรมเวิร์ค Gin และ ORM ที่สุดคือ GORM ด้วยคำสั่งต่อไปนี้
go get -u github.com/gin-gonic/gin
go get -u gorm.io/gorm
ขั้นตอนที่ 2: สร้างโครงสร้างข้อมูลของเราด้วย GORM
ต่อมาเราต้องสร้างโครงสร้างข้อมูลที่เราจะใช้ในเว็บย่อลิงก์ของเรา โดยใช้ GORM เราสามารถสร้างโครงสร้างข้อมูลด้วยภาษา Go ดังนี้
type Link struct {
ID uint
URL string
Code string
}
ขั้นตอนที่ 3: สร้าง API ด้วย Gin
จากนั้นเราต้องสร้าง API ที่จะให้บริการการสร้างลิงก์และการเรียกดูลิงก์ โดยใช้เฟรมเวิร์ค Gin เราสามารถสร้าง API ด้วยภาษา Go แบบง่ายดาย ดังตัวอย่างนี้
func main() {
router := gin.Default()
// สร้างลิงก์
router.POST("/create-link", func(c *gin.Context) {
// โค้ดสร้างลิงก์
})
// เรียกดูลิงก์
router.GET("/links/:code", func(c *gin.Context) {
// โค้ดเรียกดูลิงก์
})
router.Run(":8080")
}
ขั้นตอนที่ 4: สร้างหน้าเว็บด้วย React และ Vite
สุดท้ายเราจะสร้างหน้าเว็บที่จะให้ผู้ใช้สามารถสร้างลิงก์และเรียกดูลิงก์ที่เราสร้างขึ้นมา โดยใช้ React และ Vite เราสามารถสร้างหน้าเว็บแบบเรียลไทม์โดยใช้ JavaScript อย่างง่ายดาย
import React, { useState } from 'react';
function App() {
const [url, setUrl] = useState('');
const [link, setLink] = useState('');
const createLink = () => {
// โค้ดสร้างลิงก์
}
const getLink = (code) => {
// โค้ดเรียกดูลิงก์
}
return (
setLink(e.target.value)} />
);
}
export default App;
กำลังจะเรียนวิศวะคอม ซื้อไอแพดหรือแมคบุคดีครับ
ขอบคุณมากครับ