Pelokalan mudah untuk aplikasi React

Bagaimana ia berfungsi

Pasang pakej TacoTranslate melalui npm:

npm install tacotranslate

Setelah modul dipasang, anda perlu membuat akaun TacoTranslate, sebuah projek terjemahan, dan kunci API yang berkaitan. Buat akaun di sini. Ia percuma, dan tidak memerlukan anda memasukkan maklumat kad kredit.

Dalam UI aplikasi TacoTranslate, buat projek, dan navigasi ke tab kekunci API. Buat satu kekunci read, dan satu kekunci read/write. Kami akan menyimpannya sebagai pembolehubah persekitaran. Kekunci read ialah apa yang kami panggil public, dan kekunci read/write ialah secret. Sebagai contoh, anda boleh menambahkannya ke dalam fail .env di akar projek anda.

Anda juga perlu menambah dua pembolehubah persekitaran lagi: TACOTRANSLATE_DEFAULT_LOCALE dan TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kod lokal sandaran lalai. Dalam contoh ini, kami akan menetapkannya kepada en untuk Bahasa Inggeris.
• TACOTRANSLATE_ORIGIN: “folder” di mana rentetan anda akan disimpan, seperti URL laman web anda. Baca lebih lanjut mengenai origins di sini.

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

Jangan sekali-kali membocorkan kekunci API rahsia read/write ke persekitaran produksi sisi klien.

Menyiapkan TacoTranslate

Inisialisasikan TacoTranslate dalam aplikasi React anda dengan membalut aplikasi anda dalam penyedia konteks 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>
	);
}

Anda kini boleh menggunakan komponen Translate di mana-mana dalam aplikasi anda untuk memaparkan teks yang diterjemahkan! Pastikan untuk melihat dokumentasi kami untuk maklumat lanjut, dan untuk panduan pelaksanaan khusus bagi tetapan anda.

import {Translate} from 'tacotranslate/react';

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

Kelebihan menggunakan TacoTranslate

• Menjimatkan masa: Mengautomasikan proses lokalizasi yang membosankan dan pengumpulan rentetan teks, menjimatkan masa anda yang berharga.
• Kos efektif: Mengurangkan keperluan untuk terjemahan manual, sekaligus menurunkan kos lokalizasi anda.
• Ketepatan yang lebih baik: Terjemahan yang dikuasakan oleh AI memastikan hasil yang tepat mengikut konteks dan berkualiti tinggi.
• Penyelesaian yang boleh diskalakan: Mudah menambah sokongan untuk bahasa baharu apabila aplikasi dan asas pelanggan anda berkembang.

Mulakan hari ini!

Aplikasi React anda akan diterjemahkan secara automatik apabila anda menambah sebarang rentetan ke komponen Translate. Perlu diingat bahawa hanya persekitaran yang mempunyai kebenaran read/write pada kunci API yang akan dapat mencipta rentetan baru untuk diterjemahkan.

Kami mengesyorkan agar anda mempunyai persekitaran staging tertutup dan selamat di mana anda boleh menguji aplikasi pengeluaran anda, menambah rentetan baru sebelum dilancarkan. Ini akan menghalang sesiapa daripada mencuri kunci API rahsia anda, dan berpotensi membengkakkan projek terjemahan anda dengan menambah rentetan yang tidak sah.

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!