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

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

ทำไมต้องเลือก TacoTranslate สำหรับ React?

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

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

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

npm install tacotranslate

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

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

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

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

.env

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:

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 ลับของคุณ และอาจป้องกันโปรเจกต์การแปลของคุณจากการถูกทำให้บวมด้วยข้อความที่ไม่พึงประสงค์