Đa ngôn ngữ dễ dàng cho các ứng dụng React

Cách thức hoạt động

Cài đặt gói TacoTranslate qua npm:

npm install tacotranslate

Khi bạn đã cài đặt xong module, bạn sẽ cần tạo một tài khoản TacoTranslate, một dự án dịch thuật và các khóa API liên quan. Tạo tài khoản tại đây. Miễn phí, và không yêu cầu bạn thêm thẻ tín dụng.

Trong giao diện ứng dụng TacoTranslate, tạo một dự án, sau đó chuyển đến tab API keys của dự án đó. Tạo một khóa read và một khóa read/write. Chúng tôi sẽ lưu chúng dưới dạng biến môi trường. Khóa read là cái mà chúng tôi gọi là public và khóa read/write là secret. Ví dụ, bạn có thể thêm chúng vào một file .env ở thư mục gốc của dự án.

Bạn cũng cần thêm hai biến môi trường nữa: TACOTRANSLATE_DEFAULT_LOCALE và TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Mã ngôn ngữ dự phòng mặc định. Trong ví dụ này, chúng tôi sẽ đặt là en cho tiếng Anh.
• TACOTRANSLATE_ORIGIN: “Thư mục” nơi các chuỗi của bạn sẽ được lưu trữ, chẳng hạn như URL của trang web của bạn. Tìm hiểu thêm về nguồn gốc tại đây.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Hãy đảm bảo rằng bạn không bao giờ để lộ khóa API bí mật read/write ra môi trường sản xuất phía client.

Thiết lập TacoTranslate

Khởi tạo TacoTranslate trong ứng dụng React của bạn bằng cách bao bọc ứng dụng của bạn trong nhà cung cấp ngữ cảnh 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>
	);
}

Bạn giờ có thể sử dụng Translate component ở bất cứ đâu trong ứng dụng của bạn để hiển thị văn bản đã dịch! Hãy chắc chắn kiểm tra tài liệu của chúng tôi để biết thêm thông tin và các hướng dẫn triển khai cụ thể cho cấu hình của bạn.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Lợi ích khi sử dụng TacoTranslate

• Tiết kiệm thời gian: Tự động hóa quá trình địa phương hóa và thu thập chuỗi ký tự nhàm chán, giúp bạn tiết kiệm thời gian quý báu.
• Hiệu quả về chi phí: Giảm nhu cầu dịch thủ công, hạ thấp chi phí địa phương hóa của bạn.
• Độ chính xác được cải thiện: Dịch thuật dựa trên AI đảm bảo kết quả chính xác theo ngữ cảnh và chất lượng cao.
• Giải pháp mở rộng: Dễ dàng thêm hỗ trợ cho các ngôn ngữ mới khi ứng dụng và cơ sở khách hàng của bạn phát triển.

Bắt đầu ngay hôm nay!

Ứng dụng React của bạn sẽ được dịch tự động khi bạn thêm bất kỳ chuỗi nào vào một Translate component. Lưu ý rằng chỉ các môi trường có quyền read/write trên khóa API mới có thể tạo các chuỗi mới để dịch.

Chúng tôi khuyên bạn nên có một môi trường staging đóng và bảo mật, nơi bạn có thể thử nghiệm ứng dụng sản xuất của mình, thêm các chuỗi mới trước khi đưa vào hoạt động. Điều này sẽ ngăn chặn bất kỳ ai đánh cắp khóa API bí mật của bạn, và có thể làm phình to dự án dịch thuật của bạn bằng cách thêm các chuỗi không mong muốn.

Hãy chắc chắn xem các ví dụ đầy đủ trên hồ sơ GitHub của chúng tôi. Nếu bạn gặp bất kỳ vấn đề nào, đừng ngần ngại liên hệ, và chúng tôi sẽ rất vui được giúp đỡ.

TacoTranslate cho phép bạn tự động địa phương hóa các ứng dụng React của mình một cách nhanh chóng sang và từ bất kỳ ngôn ngữ nào. Dịch miễn phí!