การทำให้แอป 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: รหัสภาษาตั้งต้นที่ใช้เป็นค่า 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

Time saving: ทำให้กระบวนการปรับให้เหมาะกับท้องถิ่นและการรวบรวมสตริงที่น่าเบื่อเป็นแบบอัตโนมัติ ช่วยประหยัดเวลาที่มีค่าของคุณ.
Cost-effective: ลดความจำเป็นในการแปลด้วยคน ช่วยลดค่าใช้จ่ายในการปรับให้เหมาะกับท้องถิ่น.
Improved accuracy: การแปลที่ขับเคลื่อนด้วย AI รับประกันผลลัพธ์ที่ถูกต้องตามบริบทและมีคุณภาพสูง.
Scalable Solution: สามารถเพิ่มการรองรับภาษาใหม่ได้อย่างง่ายดายเมื่อแอปของคุณและฐานลูกค้าเติบโต.

เริ่มใช้งานวันนี้!

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

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