TacoTranslate
/
ΤεκμηρίωσηΤιμολόγηση
 
Άρθρο
04 Μαΐ 2025

Η καλύτερη λύση για τη διεθνοποίηση (i18n) σε εφαρμογές React

Θέλετε να επεκτείνετε την εφαρμογή React σας σε νέες αγορές; Το TacoTranslate κάνει εξαιρετικά εύκολη την τοπικοποίηση των εφαρμογών React σας, επιτρέποντάς σας να προσεγγίσετε ένα παγκόσμιο κοινό χωρίς ταλαιπωρία.

Γιατί να επιλέξετε το TacoTranslate για το React;

  • Απρόσκοπτη Ενσωμάτωση: Σχεδιασμένο ειδικά για εφαρμογές React, το TacoTranslate ενσωματώνεται αβίαστα στην υπάρχουσα ροή εργασίας σας.
  • Αυτόματη Συλλογή Συμβολοσειρών: Δεν χρειάζεται πλέον να διαχειρίζεστε χειροκίνητα αρχεία JSON. Το TacoTranslate συλλέγει αυτόματα συμβολοσειρές από τον κώδικά σας.
  • Μεταφράσεις με τεχνητή νοημοσύνη: Εκμεταλλευτείτε τη δύναμη της τεχνητής νοημοσύνης για να παρέχετε μεταφράσεις που είναι συμφραζόμενα ακριβείς και ταιριάζουν στον τόνο της εφαρμογής σας.
  • Άμεση Υποστήριξη Γλωσσών: Προσθέστε υποστήριξη για νέες γλώσσες με ένα μόνο κλικ, κάνοντας την εφαρμογή σας προσβάσιμη παγκοσμίως.

Πώς λειτουργεί

Εγκαταστήστε το πακέτο TacoTranslate μέσω npm:

npm install tacotranslate

Αφού εγκαταστήσετε το πακέτο, θα χρειαστεί να δημιουργήσετε έναν λογαριασμό TacoTranslate, ένα έργο μετάφρασης και τα αντίστοιχα κλειδιά API. Δημιουργήστε έναν λογαριασμό εδώ. Είναι δωρεάν και δεν απαιτείται να καταχωρίσετε πιστωτική κάρτα.

Στο UI της εφαρμογής TacoTranslate, δημιουργήστε ένα έργο και μεταβείτε στην καρτέλα με τα κλειδιά API. Δημιουργήστε ένα read κλειδί και ένα read/write κλειδί. Θα τα αποθηκεύσουμε ως μεταβλητές περιβάλλοντος. Το read κλειδί είναι αυτό που καλούμε public και το read/write κλειδί είναι secret. Για παράδειγμα, μπορείτε να τα προσθέσετε σε ένα αρχείο .env στη ρίζα του έργου σας.

Θα χρειαστεί επίσης να προσθέσετε δύο ακόμη μεταβλητές περιβάλλοντος: TACOTRANSLATE_DEFAULT_LOCALE και TACOTRANSLATE_ORIGIN.

  • TACOTRANSLATE_DEFAULT_LOCALE: Ο προεπιλεγμένος κωδικός τοπικής ρύθμισης (fallback). Σε αυτό το παράδειγμα, θα τον ορίσουμε σε en για τα Αγγλικά.
  • TACOTRANSLATE_ORIGIN: Ο “φάκελος” όπου θα αποθηκεύονται οι συμβολοσειρές σας, όπως η διεύθυνση URL του ιστοτόπου σας. Διαβάστε περισσότερα σχετικά με τις προελεύσεις εδώ.
.env
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Βεβαιωθείτε ότι το μυστικό read/write κλειδί API δεν θα διαρρεύσει ποτέ σε περιβάλλοντα παραγωγής από την πλευρά του πελάτη.

Ρύθμιση του TacoTranslate

Αρχικοποιήστε το TacoTranslate στην εφαρμογή React σας, τυλίγοντας την εφαρμογή σας με τον context provider του 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>
	);
}

Μπορείτε τώρα να χρησιμοποιήσετε το Translate συστατικό οπουδήποτε μέσα στην εφαρμογή σας για να εμφανίσετε μεταφρασμένο κείμενο! Μην ξεχάσετε να δείτε την τεκμηρίωσή μας για περισσότερες πληροφορίες και για οδηγούς υλοποίησης ειδικούς για τη ρύθμισή σας.

import {Translate} from 'tacotranslate/react';

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

Οφέλη από τη χρήση του TacoTranslate

  • Εξοικονόμηση χρόνου: Αυτοματοποιεί την κουραστική διαδικασία της τοπικοποίησης και της συλλογής συμβολοσειρών, εξοικονομώντας πολύτιμο χρόνο.
  • Οικονομικά αποδοτικό: Μειώνει την ανάγκη για χειροκίνητες μεταφράσεις και, κατά συνέπεια, το κόστος τοπικοποίησης.
  • Βελτιωμένη ακρίβεια: Οι μεταφράσεις με τεχνητή νοημοσύνη διασφαλίζουν αποτελέσματα ακριβή στο πλαίσιο και υψηλής ποιότητας.
  • Επεκτάσιμη λύση: Προσθέστε εύκολα υποστήριξη για νέες γλώσσες καθώς η εφαρμογή σας και η βάση πελατών μεγαλώνουν.

Ξεκινήστε σήμερα!

Η εφαρμογή React σας θα μεταφραστεί αυτόματα όταν προσθέσετε οποιεσδήποτε συμβολοσειρές σε ένα Translate στοιχείο. Σημειώστε ότι μόνο περιβάλλοντα που έχουν άδειες read/write για το κλειδί API θα μπορούν να δημιουργούν νέες συμβολοσειρές προς μετάφραση.

Συνιστούμε να διαθέτετε ένα κλειστό και ασφαλές περιβάλλον staging όπου μπορείτε να δοκιμάσετε την παραγωγική εφαρμογή σας και να προσθέσετε νέες συμβολοσειρές πριν το λανσάρισμά της. Αυτό θα αποτρέψει οποιονδήποτε οποιονδήποτε από το να κλέψει το μυστικό κλειδί API σας και, ενδεχομένως, να φουσκώσει το έργο μεταφράσεων προσθέτοντας ανεπιθύμητες συμβολοσειρές.

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!

Ένα προϊόν από NattskiftetΚατασκευασμένο στη Νορβηγία