Bản địa hóa dễ dàng cho các ứng dụng React

Cách hoạt động

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

npm install tacotranslate

Khi bạn đã cài đặt mô-đun, bạn cần tạo một tài khoản TacoTranslate, một dự án dịch 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 cung cấp thẻ tín dụng.

Trong giao diện ứng dụng TacoTranslate, hãy tạo một dự án và chuyển đến tab Khóa API (API keys). 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 các biến môi trường. Khóa read chính là cái mà chúng tôi gọi là public và khóa read/write chính là secret. Ví dụ, bạn có thể thêm chúng vào một tệp .env ở thư mục gốc của dự án.

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

• TACOTRANSLATE_DEFAULT_LOCALE: Mã locale dự phòng mặc định. Trong ví dụ này, chúng tôi sẽ đặt nó là en cho tiếng Anh.
• TACOTRANSLATE_ORIGIN: “thư mục” nơi các chuỗi văn bản của bạn sẽ được lưu trữ, chẳng hạn như URL của trang web của bạn. Đọc thêm về origins ở đây.

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

Hãy chắc chắn rằng tuyệt đối không để lộ khóa API bí mật read/write ra môi trường production 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 trong provider ngữ cảnh của 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ây giờ bạn có thể sử dụng thành phần Translate ở bất kỳ đâu trong ứng dụng của mình để hiển thị văn bản đã được dịch! Hãy tham khảo 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 phù hợp với thiết lập 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 văn bản tẻ nhạt, giúp bạn tiết kiệm thời gian quý báu.
• Tiết kiệm chi phí: Giảm nhu cầu dịch thủ công, giúp hạ thấp chi phí địa phương hóa của bạn.
• Độ chính xác được cải thiện: Các bản dịch được hỗ trợ bởi AI đảm bảo kết quả chính xác theo bối cảnh và chất lượng cao.
• Giải pháp có thể mở rộng: Dễ dàng thêm hỗ trợ cho 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 thành phần Translate. 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 nghị bạn nên có một môi trường staging đóng và được bảo mật nơi bạn có thể kiểm thử ứng dụng production của mình, thêm các chuỗi mới trước khi đưa lên môi trường thực tế. Điều này sẽ ngăn chặn bất kỳ ai từ việc đánh cắp khóa API bí mật của bạn, và có khả năng làm phình to dự án dịch của bạn bằng cách thêm các chuỗi độc hại.

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!