Solusi terbaik untuk internasionalisasi (i18n) dalam aplikasi React

Apakah Anda ingin memperluas aplikasi React Anda ke pasar baru? TacoTranslate membuat proses lokalisasi aplikasi React sangat mudah, memungkinkan Anda menjangkau audiens global tanpa kerepotan.

Mengapa memilih TacoTranslate untuk React?

Integrasi Tanpa Hambatan: Dirancang khusus untuk aplikasi React, TacoTranslate terintegrasi dengan mudah ke alur kerja Anda yang sudah ada.
Pengumpulan String Otomatis: Tidak perlu lagi mengelola file JSON secara manual. TacoTranslate secara otomatis mengumpulkan string dari basis kode Anda.
Terjemahan Berbasis AI: Manfaatkan kekuatan AI untuk menyediakan terjemahan yang akurat secara kontekstual dan sesuai dengan nada aplikasi Anda.
Dukungan Bahasa Instan: Tambahkan dukungan untuk bahasa baru hanya dengan satu klik, sehingga aplikasi Anda dapat diakses secara global.

Cara kerjanya

Instal paket TacoTranslate melalui npm:

npm install tacotranslate

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

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

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

TACOTRANSLATE_DEFAULT_LOCALE: Kode locale default yang digunakan sebagai cadangan. Dalam contoh ini, kita akan mengaturnya ke en untuk bahasa Inggris.
TACOTRANSLATE_ORIGIN: “folder” tempat string Anda akan disimpan, seperti URL situs web Anda. Baca selengkapnya tentang origins di sini.

.env

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.

Menyiapkan TacoTranslate

Inisialisasikan TacoTranslate dalam aplikasi React Anda dengan membungkus aplikasi Anda menggunakan provider 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 melihat dokumentasi kami untuk informasi lebih lanjut, serta panduan implementasi yang khusus 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 lokalisasi dan pengumpulan string yang melelahkan, sehingga Anda menghemat waktu berharga.
Hemat biaya: Mengurangi kebutuhan akan terjemahan manual, sehingga menurunkan biaya lokalisasi Anda.
Akurasi yang lebih baik: Terjemahan bertenaga AI memastikan hasil yang akurat secara kontekstual dan berkualitas tinggi.
Solusi yang skalabel: Dengan mudah menambahkan dukungan untuk bahasa baru seiring aplikasi dan basis pelanggan Anda berkembang.

Mulai hari ini!

Aplikasi React Anda akan diterjemahkan secara otomatis ketika Anda menambahkan string apa pun ke komponen Translate. Perlu dicatat bahwa hanya lingkungan yang memiliki 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 siapa pun mencuri kunci API rahasia Anda, dan berpotensi membuat proyek terjemahan Anda membengkak dengan menambahkan string yang tidak diinginkan.

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!