การทำให้แอป 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 ที่ root ของโปรเจกต์คุณได้

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

TACOTRANSLATE_DEFAULT_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

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

การตั้งค่า TacoTranslate

เริ่มต้นใช้งาน TacoTranslate ในแอป React ของคุณโดยการห่อแอปของคุณด้วยผู้ให้บริการ context ของ 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

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

เริ่มต้นวันนี้เลย!

แอป React ของคุณจะถูกแปลโดยอัตโนมัติเมื่อคุณเพิ่มสตริงใดๆ ลงในคอมโพเนนต์ Translate. โปรดทราบว่าเฉพาะสภาพแวดล้อมที่มีสิทธิ์ read/write บนคีย์ API เท่านั้นที่จะสามารถสร้างสตริงใหม่เพื่อแปลได้

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