การทำให้แอป React รองรับหลายภาษาได้อย่างง่ายดาย

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

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

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

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

ติดตั้งแพ็กเกจ TacoTranslate ผ่าน npm:

npm install tacotranslate

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

ในส่วนติดต่อผู้ใช้ของแอป 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 ของคุณโดยการห่อแอปของคุณไว้ภายในตัวจัดเตรียมบริบท (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 ลับของคุณ และป้องกันไม่ให้โปรเจ็กต์การแปลของคุณบวมจากการเพิ่มสตริงที่ไม่พึงประสงค์