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

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

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

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

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

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

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

npm install tacotranslate

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

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

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

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

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

Ρύθμιση του 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 component οπουδήποτε μέσα στην εφαρμογή σας για να εμφανίσετε μεταφρασμένο κείμενο! Φροντίστε να δείτε την τεκμηρίωσή μας για περισσότερες πληροφορίες και για οδηγούς υλοποίησης ειδικούς για τη ρύθμισή σας.

import {Translate} from 'tacotranslate/react';

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

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

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

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

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

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

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Κατασκευάστηκε στη Νορβηγία