„Zenith' – Eine Serene Meditation App mit React, Tolgee und Tailwind CSS

In diesem Beitrag freue ich mich, Zenith vorzustellen, eine Meditations-App, die Benutzern mit einer Auswahl beruhigender Klänge, einer benutzerfreundlichen Oberfläche und Unterstützung dabei helfen soll, Ruhe und Konzentration zu finden für mehrere Sprachen. Ich werde durch die Kernfunktionen der App, den Tech-Stack, die Einrichtung und auch die Integration von Tolgee in React gehen.

DEMO

Funktionen

• Beruhigende Klänge: Benutzer können aus einer Vielzahl beruhigender Klänge wählen, die speziell auf die Verbesserung von Meditationssitzungen zugeschnitten sind.
• Lokalisierung: Durch die Integration von Tolgee können Benutzer weltweit die App in ihrer Muttersprache erleben.
• Responsive Design: Tailwind CSS ermöglicht ein flüssiges, mobilfreundliches Erlebnis auf allen Geräten.
• Benutzerfreundliche Oberfläche: Das einfache Layout legt Wert auf Zugänglichkeit und einfache Navigation.

Tech Stack

• Reagieren: Das Frontend der App verwendet React, ideal für die Erstellung einer reibungslosen, interaktiven Benutzeroberfläche.
• Tolgee: Tolgee vereinfacht den mehrsprachigen Support und macht es einfach, Lokalisierung für ein globales Publikum anzubieten.
• Tailwind CSS: Tailwind hilft mit seinem Utility-First-Ansatz dabei, schnell ein klares, ansprechendes Design zu erstellen.

Erste Schritte mit Zenith

Möchten Sie es ausprobieren? So bringen Sie die App auf Ihrem Computer zum Laufen.

Klonen Sie das Repository:

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

Abhängigkeiten installieren:

npm install

Führen Sie die App aus:

npm run dev

Besuchen Sie dann http://localhost:5173 in Ihrem Browser, um die App zu erkunden.

Mit Zenith

• Wählen Sie Ihre bevorzugte Sprache mit der Sprachumschaltung aus.
• Durchsuchen Sie die verfügbaren beruhigenden Klänge und klicken Sie zum Abspielen.
• Verwenden Sie den Timer, um die Dauer Ihrer Sitzung festzulegen.
• Genießen Sie Ihre Meditationssitzung.

Integration von Tolgee in React

Dokumentation

Was ist Tolgee?

Tolgee ist eine Open-Source-Lokalisierungs- und Übersetzungsplattform, die sich reibungslos in verschiedene Frameworks, einschließlich React, integrieren lässt. Es bietet ein In-App-Übersetzungstool, mit dem Entwickler schnell mehrsprachige Anwendungen erstellen und Übersetzungen problemlos verwalten können.

So integrieren Sie Tolgee in eine React-Anwendung

Tolgee vereinfacht die Lokalisierung, indem es eine einfache Einrichtung und leistungsstarke Tools zum Verwalten von Übersetzungen direkt in der App-Oberfläche bietet. Hier finden Sie eine Schritt-für-Schritt-Anleitung zur Integration von Tolgee in eine React-Anwendung und deren Verwendung zur Schaffung eines mehrsprachigen Erlebnisses.

Schritt 1: Installieren Sie Tolgee

Fügen Sie zunächst die Tolgee-Bibliothek zu Ihrem React-Projekt hinzu. Tolgee bietet sowohl NPM- als auch Garnpakete an. Wählen Sie also das Paket aus, das für Sie am besten geeignet ist.

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

Schritt 2: Richten Sie Tolgee in Ihrer Anwendung ein

Jetzt initialisieren Sie Tolgee in Ihrer App. Importieren Sie zunächst die erforderlichen Komponenten aus der Tolgee-Bibliothek und binden Sie Ihre App dann in den TolgeeProvider von Tolgee ein. Dieser Anbieter ermöglicht die Übersetzungs- und Lokalisierungsfunktionen von Tolgee in Ihrer gesamten App.

In Ihrer Haupt-App-Datei (z. B. App.js oder index.js) richten Sie den TolgeeProvider wie folgt ein:

npm install

Schritt 3: Übersetzungen hinzufügen

Tolgee verwendet für jede Übersetzung einen eindeutigen Schlüssel, auf den in der gesamten App verwiesen werden kann. Sie können Ihre Übersetzungen über die Tolgee-Plattform oder direkt in Ihrem Code verwalten.

Beispiel für das Hinzufügen von Text zur Lokalisierung

Verwenden Sie die T-Komponente oder den UseTranslate-Hook von Tolgee, um Text zu definieren, der übersetzt werden muss. So können Sie diese in Ihren Komponenten verwenden:

Mit dem Komponente

npm run dev

Auf der Tolgee-Plattform würden Sie die wichtige Begrüßungsnachricht den Übersetzungen zuordnen, z. B. „Willkommen bei Zenith“ auf Englisch und anderen entsprechenden Ausdrücken in verschiedenen Sprachen.

Verwendung des useTranslate-Hooks

Für komplexere Szenarien ist der useTranslate-Hook hilfreich.

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

Schritt 4: In-Kontext-Bearbeitung mit Tolgee DevTools

Tolgees kontextbezogene Bearbeitung ist ein großer Vorteil – sie ermöglicht Ihnen die Bearbeitung von Übersetzungen direkt in Ihrer App. Wenn DevTools aktiviert ist, können Sie auf jeden Text klicken, um seine Übersetzung in Echtzeit zu bearbeiten und so den Übersetzungsworkflow zu optimieren.

Um auf DevTools zuzugreifen, stellen Sie sicher, dass Sie die App in verpackt haben. (wie oben gezeigt) und befinden sich im Entwicklungsmodus. Auf diese Weise können Sie Übersetzungen anpassen oder hinzufügen, ohne zur Tolgee-Plattform hin und her wechseln zu müssen.

Zusammenfassung

Zenith vereint beruhigende Klänge, eine benutzerfreundliche Oberfläche und mehrsprachige Unterstützung, um ein wirklich zugängliches Meditationserlebnis zu bieten. Durch die Nutzung von Tools wie React für das Frontend, Tailwind CSS für responsives Design und Tolgee für nahtlose Lokalisierung ist Zenith darauf ausgelegt, Benutzern dabei zu helfen, über Sprachen und Geräte hinweg Frieden zu finden.

Ob Sie ein Entwickler sind, der mehr über Lokalisierung erfahren möchte, oder einfach jemand, der sich für Meditations-Apps interessiert, ich hoffe, dieser Beitrag war aufschlussreich. Probieren Sie gerne die DEMO aus und sehen Sie, wie Zenith Ihnen helfen kann, Ihre eigene Ruhe zu finden.

Viel Spaß beim Codieren und viel Spaß beim Meditieren!

Das obige ist der detaillierte Inhalt von„Zenith' – Eine Serene Meditation App mit React, Tolgee und Tailwind CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!