การแปลภาษาอย่างง่ายดายสำหรับแอปพลิเคชัน React

วิธีการทำงาน

ติดตั้งแพ็กเกจ TacoTranslate ผ่านทาง npm:

npm install tacotranslate

เมื่อคุณติดตั้งโมดูลแล้ว คุณจะต้องสร้างบัญชี TacoTranslate โปรเจกต์แปลภาษา และคีย์ API ที่เกี่ยวข้อง สร้างบัญชีที่นี่ ฟรี และ ไม่ต้องใช้บัตรเครดิต

ภายในอินเทอร์เฟซผู้ใช้ของแอปพลิเคชัน TacoTranslate ให้สร้างโปรเจกต์ และไปที่แท็บ API keys ของโปรเจกต์นั้น สร้าง key read หนึ่งอัน และ key read/write หนึ่งอัน เราจะบันทึก key เหล่านี้เป็น environment variables โดย key read คือสิ่งที่เราเรียกว่า public และ key read/write คือ secret ตัวอย่างเช่น คุณสามารถเพิ่ม key เหล่านี้ในไฟล์ .env ที่อยู่ในโฟลเดอร์รูทของโปรเจกต์ของคุณได้เลย

คุณยังจำเป็นต้องเพิ่มตัวแปรสภาพแวดล้อมอีกสองตัว: TACOTRANSLATE_DEFAULT_LOCALE และ TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: รหัสภาษาตั้งต้นสำหรับการสำรองข้อมูล ในตัวอย่างนี้ เราจะตั้งค่าเป็น en สำหรับภาษาอังกฤษ
• TACOTRANSLATE_ORIGIN: “โฟลเดอร์” ที่จะเก็บสตริงของคุณ เช่น URL ของเว็บไซต์ของคุณ อ่านเพิ่มเติมเกี่ยวกับ origins ได้ที่นี่

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

โปรดอย่าเปิดเผยกุญแจ API ลับ read/write ให้กับสภาพแวดล้อมการผลิตบนฝั่งไคลเอนต์เด็ดขาด

การตั้งค่า TacoTranslate

เริ่มต้นใช้งาน TacoTranslate ในแอปพลิเคชัน React ของคุณโดยการห่อแอปพลิเคชันของคุณด้วย TacoTranslate context provider:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

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

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

ประโยชน์ของการใช้ TacoTranslate

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

เริ่มต้นวันนี้เลย!

แอป React ของคุณจะถูกแปลโดยอัตโนมัติเมื่อคุณเพิ่มสตริงใด ๆ ลงในคอมโพเนนต์ Translate. โปรดทราบว่าเฉพาะสภาพแวดล้อมที่มีสิทธิ์ read/write บนคีย์ API เท่านั้นที่จะสามารถสร้างสตริงใหม่เพื่อแปลได้

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

โปรด ดูตัวอย่างครบถ้วน ได้ที่โปรไฟล์ GitHub ของเรา หากคุณพบปัญหาใด ๆ อย่าลังเลที่จะ ติดต่อเรา เรายินดีอย่างยิ่งที่จะช่วยเหลือคุณ

TacoTranslate ช่วยให้คุณทำการแปลภาษาสำหรับแอป React ของคุณได้อย่างรวดเร็วและอัตโนมัติในทุกภาษา แปลฟรีเลย!