โซลูชันที่ดีที่สุดสำหรับการทำให้แอป React รองรับการใช้งานหลายภาษา (i18n)

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

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

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

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

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

npm install tacotranslate

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

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

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

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

.env

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

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