\'Zenith\' – Une application de méditation sereine avec React, Tolgee et Tailwind CSS

Dans cet article, je suis ravi de partager Zenith, une application de méditation conçue pour aider les utilisateurs à trouver le calme et la concentration avec une sélection de sons apaisants, une interface conviviale et une assistance. pour plusieurs langues. Je vais passer en revue les fonctionnalités principales de l'application, la pile technologique, comment la configurer et également l'intégration de Tolgee dans React.

DÉMO

Caractéristiques

• Sons apaisants : les utilisateurs peuvent choisir parmi une variété de sons apaisants adaptés pour améliorer les séances de méditation.
• Localisation : l'intégration de Tolgee permet aux utilisateurs du monde entier de découvrir l'application dans leur langue maternelle.
• Conception réactive : Tailwind CSS permet une expérience fluide et adaptée aux appareils mobiles sur tous les appareils.
• Interface conviviale : la mise en page simple donne la priorité à l'accessibilité et à la facilité de navigation.

Pile technologique

• React : l'interface de l'application utilise React, idéal pour créer une interface utilisateur fluide et interactive.
• Tolgee : Tolgee simplifie la prise en charge multilingue, ce qui permet de proposer facilement la localisation à un public mondial.
• Tailwind CSS : Tailwind aide à créer rapidement une conception propre et réactive grâce à son approche axée sur l'utilitaire.

Premiers pas avec Zénith

Vous souhaitez l'essayer ? Voici comment faire fonctionner l’application sur votre ordinateur.

Clonez le référentiel :

git clone https://github.com/tolgee/tolgee-platform.git
cd demos/meditation-app

Installer les dépendances :

npm install

Exécutez l'application :

npm run dev

Ensuite, visitez http://localhost:5173 dans votre navigateur pour explorer l'application.

Utiliser Zénith

• Sélectionnez votre langue préférée à l'aide du bouton de changement de langue.
• Parcourez les sons apaisants disponibles et cliquez pour jouer.
• Utilisez la minuterie pour régler la durée de votre session.
• Profitez de votre séance de méditation.

Intégration de Tolgee dans React

Documentation

Qu’est-ce que Tolgee ?

Tolgee est une plateforme de localisation et de traduction open source qui s'intègre facilement à divers frameworks, dont React. Il fournit un outil de traduction intégré à l'application qui permet aux développeurs de créer rapidement des applications multilingues et de gérer facilement les traductions.

Comment intégrer Tolgee dans une application React

Tolgee simplifie la localisation en offrant une configuration simple et des outils puissants pour gérer les traductions directement dans l'interface de l'application. Voici un guide étape par étape pour intégrer Tolgee à une application React et l'utiliser pour créer une expérience multilingue.

Étape 1 : Installer Tolgee

Tout d'abord, ajoutez la bibliothèque Tolgee à votre projet React. Tolgee propose à la fois des packages NPM et Yarn, alors choisissez celui qui vous convient le mieux.

git clone https://github.com/tolgee/tolgee-platform.git
cd demos/meditation-app

Étape 2 : Configurez Tolgee dans votre application

Maintenant, initialisez Tolgee dans votre application. Commencez par importer les composants nécessaires depuis la bibliothèque Tolgee, puis enveloppez votre application dans TolgeeProvider de Tolgee. Ce fournisseur active les fonctionnalités de traduction et de localisation de Tolgee dans toute votre application.

Dans le fichier de votre application principal (par exemple, App.js ou index.js), configurez TolgeeProvider comme ceci :

npm install

Étape 3 : Ajouter des traductions

Tolgee utilise une clé unique pour chaque traduction, qui peut être référencée dans toute l'application. Vous pouvez gérer vos traductions via la plateforme Tolgee ou directement dans votre code.

Exemple d'ajout de texte pour la localisation

Utilisez le composant T ou le hook useTranslate de Tolgee pour définir le texte qui doit être traduit. Voici comment vous pouvez les utiliser dans vos composants :

En utilisant l'option Composant

npm run dev

Dans la plateforme Tolgee, vous mapperez la clé Welcome_message à ses traductions, comme « Welcome to Zenith » en anglais, et d'autres expressions équivalentes dans différentes langues.

Utilisation du crochet useTranslate

Pour des scénarios plus complexes, le hook useTranslate est utile.

npm install @tolgee/react
# or
yarn add @tolgee/react

Étape 4 : Édition en contexte avec Tolgee DevTools

L'édition contextuelle de Tolgee est un avantage majeur : elle vous permet d'éditer les traductions directement dans votre application. Avec DevTools activé, vous pouvez cliquer sur n'importe quel texte pour modifier sa traduction en temps réel, rationalisant ainsi le flux de travail de traduction.

Pour accéder à DevTools, assurez-vous d'avoir enveloppé l'application dans (comme indiqué ci-dessus) et sont en mode développement. Cela vous permet d'ajuster ou d'ajouter des traductions sans avoir à faire des allers-retours vers la plateforme Tolgee.

Conclusion

Zenith rassemble des sons apaisants, une interface conviviale et un support multilingue pour offrir une expérience de méditation véritablement accessible. En tirant parti d'outils tels que React pour le frontend, Tailwind CSS pour une conception réactive et Tolgee pour une localisation transparente, Zenith est conçu pour aider les utilisateurs à trouver la paix dans toutes les langues et tous les appareils.

Que vous soyez un développeur cherchant à en savoir plus sur la localisation ou simplement une personne intéressée par les applications de méditation, j'espère que cet article a été instructif. N'hésitez pas à essayer la DEMO et voyez comment Zenith peut vous aider à trouver votre propre calme.

Bon codage et bonne méditation !

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!