การแปลภาษาที่ง่ายดายสำหรับแอป React

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

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

npm install tacotranslate

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

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

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

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

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

โปรดมั่นใจว่าจะไม่เปิดเผย read/write API key ที่เป็นความลับไปยังสภาพแวดล้อมการใช้งานจริงฝั่งคลไєнท์

การตั้งค่า 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 key เท่านั้นที่จะสามารถสร้างข้อความใหม่เพื่อแปลได้

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

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

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