Giải pháp tốt nhất cho quốc tế hóa (i18n) trong các ứng dụng React

Bạn có đang muốn mở rộng ứng dụng React của mình tới các thị trường mới không? TacoTranslate giúp việc bản địa hóa các ứng dụng React của bạn trở nên cực kỳ dễ dàng, cho phép bạn tiếp cận khán giả toàn cầu mà không gặp khó khăn.

Tại sao chọn TacoTranslate cho React?

Tích hợp liền mạch: Được thiết kế riêng cho các ứng dụng React, TacoTranslate tích hợp dễ dàng vào quy trình làm việc hiện tại của bạn.
Tự động thu thập chuỗi: Không còn phải quản lý tệp JSON thủ công. TacoTranslate tự động thu thập các chuỗi từ mã nguồn của bạn.
Dịch thuật hỗ trợ AI: Tận dụng sức mạnh của AI để cung cấp bản dịch chính xác theo ngữ cảnh phù hợp với tông giọng của ứng dụng bạn.
Hỗ trợ ngôn ngữ ngay lập tức: Thêm hỗ trợ cho các ngôn ngữ mới chỉ với một cú nhấp chuột, giúp ứng dụng của bạn tiếp cận toàn cầu.

Cách hoạt động

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

npm install tacotranslate

Khi bạn đã cài đặt 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 phải thêm thẻ tín dụng.

Trong giao diện ứng dụng TacoTranslate, hãy tạo một dự án và điều hướng tới tab khóa API của nó. Tạo một khóa read và một khóa read/write. Chúng ta sẽ lưu chúng dưới dạng biến môi trường. Khóa read là những gì chúng ta 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 của bạ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 nó thành 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. Đọc thêm về nguồn gốc tại đây.

.env

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 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ờ đây có thể sử dụng thành phần Translate ở bất kỳ đâu trong ứng dụng của bạn để hiển thị văn bản đã dịch! Hãy chắc chắn xem tài liệu của chúng tôi để biết thêm thông tin và 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 quy trình địa phương hóa và thu thập chuỗi thủ công, 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 thuật 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: Các bản dịch do AI hỗ trợ đảm bảo kết quả chính xác về ngữ 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 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 Translate component. Lưu ý rằng chỉ những môi trường có quyền read/write trên khóa API mới có thể tạo 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ể kiểm tra ứ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 việc 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.