ทางออกที่ดีที่สุดสำหรับการทำสากล (i18n) ในแอป React

คุณกำลังมองหาวิธีขยายแอป 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: รหัสภาษาสำรองเริ่มต้น ในตัวอย่างนี้ เราจะตั้งเป็น 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 เท่านั้นที่จะสามารถสร้างสตริงใหม่เพื่อนำมาแปลได้

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