การทำ Localization ให้กับแอป React อย่างง่ายดาย

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

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

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

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

ติดตั้งแพ็กเกจ TacoTranslate โดยใช้ npm:

npm install tacotranslate

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

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

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

TACOTRANSLATE_DEFAULT_LOCALE: รหัส 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

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

การตั้งค่า TacoTranslate

เริ่มต้นใช้งาน TacoTranslate ในแอป React ของคุณ โดยห่อแอปของคุณด้วยตัวให้บริการบริบท (context provider) ของ 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 เท่านั้นที่จะสามารถสร้างสตริงใหม่เพื่อแปลได้.

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