Dans le cadre de mon jeu avec Tolgee, j'ai essayé de traduire dub.co, une société open source bien établie, dans d'autres langues ! Cela m'a pris 1 heure, et les résultats sont étonnants !
Dans ce tutoriel, je vais vous présenter une approche simple et efficace de la localisation dans une application Next.js utilisant Tolgee - une plateforme conçue pour une gestion rapide et autonome des traductions.
Vous apprendrez également comment intégrer Tolgee à Dub.co, une plateforme de gestion de liens populaire permettant aux utilisateurs d'accéder et d'interagir avec l'application dans leurs langues préférées.
Pour bien comprendre ce tutoriel, vous devez avoir une compréhension de base de React ou Next.js.
Vous devrez également configurer les éléments suivants :
Tolgee est une plateforme de localisation conviviale pour les développeurs qui vous permet de traduire votre application dans n'importe quelle langue sans modifier votre code. Il est conçu pour les applications Web mais prend également en charge les applications mobiles et de bureau.
Avec Tolgee, vous n'avez pas besoin de rechercher des clés dans votre code source, de modifier des fichiers de localisation ou d'exporter manuellement des données pour les traducteurs. Tolgee propose une traduction contextuelle, une mémoire de traduction pour garder une trace des chaînes déjà traduites, des traductions automatiques et automatiques, et bien d'autres.
S'il vous plaît, aidez-nous avec une étoile. ?
Cela nous aiderait à créer plus d'articles comme celui-ci ?
Start le référentiel Tolgee ⭐
Dub.co est une plateforme de gestion de liens open source qui permet aux équipes marketing d'ajouter des analyses puissantes à leurs liens, de créer des liens courts, de générer des codes QR pour les liens, et bien d'autres encore. Il a été créé par Steven Tey (anciennement de Vercel).
Suivez ces étapes pour configurer Dub.co sur votre ordinateur :
Clonez le référentiel GitHub Dub.co en exécutant l'extrait de code ci-dessous.
git clone https://github.com/dubinc/dub.git
Naviguez dans le dossier dub et installez les dépendances du projet :
git clone https://github.com/dubinc/dub.git
Dans le dossier apps/web , renommez le fichier .env.example en .env.
Créez un nouveau compte Tinybird et copiez votre Jeton d'authentification administrateur dans le fichier .env .
pnpm install
Naviguez dans le répertoire packages/tinybird et installez la CLI Tinybird à l'aide de la commande suivante :
TINYBIRD_API_KEY=<your_admin_auth_token>
Exécutez la commande suivante dans votre terminal et saisissez votre jeton d'authentification administrateur lorsque vous êtes invité à vous authentifier à l'aide de la CLI Tinybird :
pip3 install tinybird-cli
Publiez la source de données et les points de terminaison Tinybird en exécutant l'extrait de code ci-dessous :
tb auth
Créez une base de données Upstash et copiez les informations d'identification suivantes de la section API REST vers le fichier .env :
tb push
Accédez à l'onglet QStash et copiez les informations d'identification suivantes dans le fichier .env .
UPSTASH_REDIS_REST_URL=<your_rest_url> UPSTASH_REDIS_REST_TOKEN=<your_rest_token>
Ensuite, dans le répertoire apps/web , exécutez la commande suivante pour démarrer la pile Docker Compose :
QSTASH_TOKEN= QSTASH_CURRENT_SIGNING_KEY= QSTASH_NEXT_SIGNING_KEY=
Générez le client Prisma et créez ses tables de base de données à l'aide des commandes suivantes :
docker-compose up
Dub.co prend en charge plusieurs méthodes d'authentification. Créez une application GitHub et copiez l'URL ci-dessous comme URL de rappel.
npx prisma generate npx prisma db push
Enfin, démarrez le serveur de développement :
http://localhost:8888/api/auth/callback/github
Vous pouvez accéder à l'application Web en accédant à http://localhost:8888 dans votre navigateur, créez un espace de travail et commencez. Si vous rencontrez des problèmes, reportez-vous au guide d'installation complet pour une assistance plus détaillée.
Dans cette section, vous apprendrez comment ajouter Tolgee à une application Next.js et la configurer pour prendre en charge plusieurs langues, permettant aux utilisateurs d'accéder à l'application dans leur langue préférée.
Pour implémenter la localisation dans les applications Next.js, vous devrez installer le SDK Tolgee React.
pnpm dev
Ensuite, créez un compte Tolgee Platform et connectez-vous à votre tableau de bord.
Ajoutez un nouveau projet en cliquant sur le bouton Projet et en sélectionnant vos langues préférées pour le projet. Pour cette application, nous utiliserons cinq langues : l'anglais (comme langue de base), le chinois, l'hindi, l'espagnol et l'arabe.
Cliquez sur l'icône de profil dans le coin supérieur droit de votre tableau de bord, puis sélectionnez Clés API du projet pour créer une clé API pour votre projet Tolgee.
Créez un .env.development.local et copiez votre clé API dans le fichier :
git clone https://github.com/dubinc/dub.git
Sélectionnez Traductions dans le menu de la barre latérale et ajoutez une nouvelle traduction au projet.
Vous pouvez créer une clé de traduction, ajouter le contenu ou la chaîne que vous devez traduire, fournir une description, puis l'enregistrer.
Tolgee propose par défaut diverses options de traduction automatique, vous permettant de traduire facilement le contenu dans les langues disponibles dans votre projet.
Félicitations ! Vous avez configuré avec succès la plateforme Tolgee pour les traductions au sein de votre application. Ensuite, configurons Tolgee au sein du projet Dub.co pour générer facilement des traductions directement dans l'application.
Dans cette section, je vais vous guider dans la configuration de Tolgee pour prendre en charge les interactions client-serveur au sein du projet Dub.co.
Tout d'abord, installez le package Tolgee CLI.
pnpm install
Exécutez l'extrait de code suivant pour vous connecter à votre plateforme Tolgee à l'aide de la clé API de votre projet.
TINYBIRD_API_KEY=<your_admin_auth_token>
Ensuite, créez un dossier i18n dans le répertoire apps/web. Ce dossier stockera les fichiers JSON contenant les traductions pour les différentes langues disponibles dans le projet de plateforme Tolgee.
pip3 install tinybird-cli
Dans le répertoire apps/web, récupérez les traductions de langue créées dans votre projet Tolgee en exécutant l'extrait de code ci-dessous :
tb auth
L'extrait de code ci-dessus remplit automatiquement le dossier i18n avec les différentes traductions linguistiques créées au sein de la plateforme Tolgee.
tb push
Créez un dossier tolgee qui contiendra les configurations Tolgee dans le répertoire apps/web :
git clone https://github.com/dubinc/dub.git
Ajoutez un fichier shared.ts dans le répertoire tolgee, puis copiez l'extrait de code suivant dans le fichier :
pnpm install
L'extrait de code ci-dessus configure Tolgee avec les langues par défaut et de secours pour activer la localisation au sein de l'application.
Ensuite, créez un fichier client.tsx dans le répertoire tolgee, puis copiez l'extrait de code ci-dessous dans le fichier :
TINYBIRD_API_KEY=<your_admin_auth_token>
Le fichier client.tsx sert à traduire les composants clients et active également la fonctionnalité en contexte pour les composants rendus par le serveur. L'extrait de code ci-dessus définit le composant TolgeeNextProvider, qui enveloppe l'intégralité de l'application Dub.co, fournissant les configurations nécessaires pour gérer les changements de langue et les traductions.
Créez un fichier locale.ts personnalisé dans le dossier tolgee et copiez-y l'extrait de code suivant :
pip3 install tinybird-cli
Enfin, créez un fichier server.tsx dans le dossier tolgee, puis copiez l'extrait de code suivant dans le fichier :
tb auth
L'application utilise le cache du serveur React pour partager l'instance Tolgee entre les composants dans un seul rendu. Cela permet à l'application d'utiliser l'instance Tolgee n'importe où dans les composants du serveur.
Félicitations ! Vous avez configuré Tolgee avec succès et êtes maintenant prêt à commencer à ajouter des traductions à divers contenus de l'application.
Ici, vous apprendrez comment traduire du contenu dans votre application Web et découvrirez comment Tolgee permet une traduction facile dans l'application.
Pour commencer, vous devez envelopper l'intégralité de l'application Dub.co avec le composant TolgeeNextProvider, défini dans tolgee/client.tsx. Accédez au dossier apps/web/app, puis accédez au répertoire app.dub.co/(dashboard) et mettez à jour le fichier layout.tsx comme indiqué ci-dessous :
tb push
L'extrait de code ci-dessus enveloppe les itinéraires du tableau de bord avec le fournisseur Tolgee, permettant le changement de langue et la localisation dans toute l'application.
Tolgee propose deux hooks pour vous aider à sélectionner et traduire du texte dans votre application : useTolgee et useTranslate.
Mettez à jour le fichier page.tsx dans le répertoire app.dub.co/(dashboard)/[slug] en ajoutant l'extrait de code suivant :
"utiliser le client" ;
importer { PageContent } depuis "@/ui/layout/page-content" ;
importer WorkspaceLinksClient depuis "./page-client" ;
//? Installations Tolgée
importer { useTolgee, useTranslate } depuis "@tolgee/react" ;
importer { setUserLocale } depuis "tolgee/locale" ;
exporter la fonction par défaut WorkspaceLinks() {
const {t} = useTranslate();
const tolgee = useTolgee(["endingLanguage"]);
const langage = tolgee.getPendingLanguage();
retour (
<PageContent title="Liens">
{/**-- Entrée HTML pour sélectionner la langue préférée --*/}
<div className="flex w-full flex-col px-10">
<p>Sélectionner la langue</p>
<sélectionner
defaultValue={langue}
className="arrondi-sm"
nom="locale"
>
<p>L'extrait de code ci-dessus affiche une balise HTML <strong><select> qui permet aux utilisateurs de choisir et de basculer entre différentes langues. L'élément <strong>{t("hello")}</strong> utilise la fonction de traduction de Tolgee pour restituer une valeur de la clé "hello" en fonction de la langue sélectionnée.
<p><img src="https://img.php.cn/upload/article/000/000/000/173093241088271.jpg" alt="I have localized the best short-linking platform in the world"></p>
<p>Enfin, vous pouvez mettre à jour le contenu restant dans toute l'application pour prendre en charge les changements de langue, permettant aux utilisateurs d'afficher tous les composants dans la langue sélectionnée.</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173093241165470.jpg" alt="I have localized the best short-linking platform in the world"></p>
<p>Tolgee propose également une fonctionnalité de traduction en contexte, vous permettant de traduire des chaînes directement dans votre application, que ce soit en développement ou en production, simplement en cliquant sur le texte et en maintenant la touche Alt ou Option enfoncée.</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173093241362494.jpg" alt="I have localized the best short-linking platform in the world"></p>
<p>Félicitations ! Vous avez terminé avec succès le projet de ce tutoriel.</p>
<p>Le code source de ce tutoriel est disponible ici :</p>
<p>https://github.com/JanCizmar/dub-with-tolgee</p>
<hr>
<h2>
Conclusion
</h2>
<p>Jusqu'à présent, vous avez appris à ajouter la localisation à vos applications logicielles à l'aide de Tolgee, à mettre en œuvre la prise en charge de plusieurs langues et à rendre le changement de langue transparent dans un projet réel.</p>
<p>Tolgee est une plate-forme de localisation rapide axée sur les développeurs qui vous permet de fournir du contexte à votre contenu et de générer des traductions en quelques secondes. Il prend également en charge plusieurs frameworks JavaScript, notamment Vue, Angular et Svelte, et s'intègre à des outils comme Figma et une API REST pour plus de flexibilité.</p>
<p>Si vous cherchez à créer une expérience personnalisée pour vos utilisateurs, Tolgee est un excellent choix. N'hésitez pas à contribuer et à mettre en vedette notre référentiel GitHub, et à rejoindre notre communauté Slack pour vous connecter avec les autres et interagir avec l'équipe.</p><p>Merci d'avoir lu !</p>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
