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

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