Lokalisasi tanpa hambatan untuk aplikasi React

Cara kerjanya

Pasang paket TacoTranslate melalui npm:

npm install tacotranslate

Setelah modul terpasang, Anda perlu membuat akun TacoTranslate, sebuah proyek terjemahan, dan kunci API yang terkait. Buat akun di sini. Ini gratis, dan tidak mengharuskan Anda menambahkan kartu kredit.

Di dalam antarmuka aplikasi TacoTranslate, buat sebuah proyek, dan navigasikan ke tab API keys-nya. Buat satu kunci read dan satu kunci read/write. Kami akan menyimpannya sebagai variabel lingkungan. Kunci read adalah yang kami sebut sebagai public dan kunci read/write adalah secret. Sebagai contoh, Anda bisa menambahkannya ke dalam berkas .env di root proyek Anda.

Anda juga perlu menambahkan dua variabel lingkungan lagi: TACOTRANSLATE_DEFAULT_LOCALE dan TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Kode lokal fallback default. Dalam contoh ini, kami akan mengaturnya ke en untuk bahasa Inggris.
• TACOTRANSLATE_ORIGIN: “Folder” tempat string Anda akan disimpan, seperti URL situs web Anda. Baca lebih lanjut tentang origins di sini.

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

Pastikan untuk tidak pernah membocorkan kunci API rahasia read/write ke lingkungan produksi sisi klien.

Mengatur TacoTranslate

Inisialisasi TacoTranslate dalam aplikasi React Anda dengan membungkus aplikasi Anda di 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 sekarang dapat menggunakan komponen Translate di mana saja dalam aplikasi Anda untuk menampilkan teks yang diterjemahkan! Pastikan untuk memeriksa dokumentasi kami untuk informasi lebih lanjut, serta panduan implementasi yang spesifik untuk pengaturan Anda.

import {Translate} from 'tacotranslate/react';

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

Manfaat menggunakan TacoTranslate

• Menghemat waktu: Mengotomatisasi proses lokalizasi dan pengumpulan string yang membosankan, menghemat waktu berharga Anda.
• Efisien biaya: Mengurangi kebutuhan terjemahan manual, menurunkan biaya lokalisasi Anda.
• Akurasi yang lebih baik: Terjemahan berbasis AI memastikan hasil yang akurat secara kontekstual dan berkualitas tinggi.
• Solusi yang dapat diskalakan: Mudah menambahkan dukungan untuk bahasa baru seiring pertumbuhan aplikasi dan basis pelanggan Anda.

Mulai hari ini!

Aplikasi React Anda akan diterjemahkan secara otomatis ketika Anda menambahkan string apapun ke dalam komponen Translate. Perlu diperhatikan bahwa hanya lingkungan dengan izin read/write pada kunci API yang dapat membuat string baru untuk diterjemahkan.

Kami menyarankan memiliki lingkungan staging yang tertutup dan aman di mana Anda dapat menguji aplikasi produksi Anda, menambahkan string baru sebelum diluncurkan. Ini akan mencegah siapa pun mencuri kunci API rahasia Anda, dan berpotensi membengkakkan proyek terjemahan Anda dengan menambahkan string yang tidak diinginkan.

Pastikan untuk melihat contoh lengkap di profil GitHub kami. Jika Anda mengalami masalah, jangan ragu untuk menghubungi kami, dan kami akan dengan senang hati membantu.

TacoTranslate memungkinkan Anda melakukan lokalisasi otomatis pada aplikasi React Anda dengan cepat ke dan dari bahasa apa pun. Terjemahkan secara gratis!