\'Zenith\' – React, Tolgee 및 Tailwind CSS를 사용하는 고요한 명상 앱

이 게시물에서는 차분한 소리, 사용자 친화적인 인터페이스 및 지원을 통해 사용자가 평온함과 집중력을 찾을 수 있도록 고안된 명상 앱인 Zenith를 공유하게 되어 기쁩니다. 여러 언어의 경우. 앱의 핵심 기능, 기술 스택, 설정 방법 및 Tolgee의 반응 통합에 대해 살펴보겠습니다.

데모

특징

• 진정하는 소리: 사용자는 명상 세션을 향상시키기 위해 맞춤화된 다양한 차분한 소리 중에서 선택할 수 있습니다.
• 현지화: Tolgee의 통합을 통해 전 세계 사용자가 모국어로 앱을 경험할 수 있습니다.
• 반응형 디자인: Tailwind CSS는 다양한 기기에서 유연하고 모바일 친화적인 환경을 제공합니다.
• 사용자 친화적인 인터페이스: 단순한 레이아웃으로 접근성과 탐색 용이성을 우선시합니다.

테크스택

• React: 앱의 프런트엔드는 매끄럽고 대화형 UI를 만드는 데 이상적인 React를 사용합니다.
• Tolgee: Tolgee는 다국어 지원을 단순화하여 전 세계 사용자에게 현지화 서비스를 쉽게 제공합니다.
• Tailwind CSS: Tailwind는 유틸리티 우선 접근 방식을 통해 깔끔하고 반응성이 뛰어난 디자인을 빠르게 만드는 데 도움이 됩니다.

제니스 시작하기

시도해보고 싶으신가요? 컴퓨터에서 앱을 실행하는 방법은 다음과 같습니다.

저장소를 복제합니다.

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

설치 종속성:

npm install

앱을 실행합니다:

npm run dev

그런 다음 브라우저에서 http://localhost:5173을 방문하여 앱을 탐색하세요.

제니스 사용

• 언어 토글을 사용해 원하는 언어를 선택하세요.
• 사용 가능한 편안한 소리를 찾아보고 클릭하여 재생하세요.
• 타이머를 사용하여 세션 기간을 설정하세요.
• 명상시간을 즐겨보세요.

React에 Tolgee 통합

문서

톨지란 무엇인가요?

Tolgee는 React를 포함한 다양한 프레임워크와 원활하게 통합되는 오픈 소스 현지화 및 번역 플랫폼입니다. 개발자가 다국어 애플리케이션을 빠르게 만들고 쉽게 번역을 관리할 수 있는 앱 내 번역 도구를 제공합니다.

Tolgee를 React 애플리케이션에 통합하는 방법

Tolgee는 앱 인터페이스 내에서 번역을 직접 관리할 수 있는 쉬운 설정과 강력한 도구를 제공하여 현지화를 단순화합니다. 다음은 Tolgee를 React 애플리케이션과 통합하고 이를 사용하여 다국어 환경을 만드는 방법에 대한 단계별 가이드입니다.

1단계: Tolgee 설치

먼저 Tolgee 라이브러리를 React 프로젝트에 추가하세요. Tolgee는 NPM과 Yarn 패키지를 모두 제공하므로 가장 적합한 패키지를 선택하세요.

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

2단계: 애플리케이션에 Tolgee 설정

이제 앱에서 Tolgee를 초기화하세요. Tolgee 라이브러리에서 필요한 구성 요소를 가져온 다음 Tolgee의 TolgeeProvider에서 앱을 래핑합니다. 이 공급자는 앱 전체에서 Tolgee의 번역 및 현지화 기능을 활성화합니다.

기본 앱 파일(예: App.js 또는 index.js)에서 다음과 같이 TolgeeProvider를 설정합니다.

npm install

3단계: 번역 추가

Tolgee는 각 번역마다 앱 전체에서 참조할 수 있는 고유 키를 사용합니다. Tolgee 플랫폼을 통해 또는 코드 내에서 직접 번역을 관리할 수 있습니다.

현지화를 위한 텍스트 추가 예

T 구성요소를 사용하거나 Tolgee의 번역 후크를 사용하여 번역이 필요한 텍스트를 정의하세요. 구성요소에서 이를 사용하는 방법은 다음과 같습니다.

구성요소

npm run dev

Tolgee 플랫폼에서는 영어의 "Welcome to Zenith" 및 다른 언어의 기타 동등한 문구와 같은 번역에 키 Welcome_message를 매핑합니다.

useTranslate 후크 사용

더 복잡한 시나리오의 경우 useTranslate 후크가 도움이 됩니다.

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

4단계: Tolgee DevTools를 사용한 상황에 맞는 편집

Tolgee의 상황에 맞는 편집 기능은 앱 내에서 직접 번역을 편집할 수 있다는 점에서 큰 장점입니다. DevTools를 활성화하면 텍스트를 클릭하여 실시간으로 번역을 편집할 수 있어 번역 작업 흐름이 간소화됩니다.

DevTools에 액세스하려면 앱을 (위에 표시된 대로) 개발 모드에 있습니다. 이를 통해 Tolgee 플랫폼을 왔다 갔다 하지 않고도 번역을 조정하거나 추가할 수 있습니다.

마무리

Zenith는 편안한 사운드, 사용자 친화적인 인터페이스, 다국어 지원을 결합하여 진정으로 접근 가능한 명상 경험을 제공합니다. 프런트엔드용 React, 반응형 디자인용 Tailwind CSS, 원활한 현지화용 Tolgee와 같은 도구를 활용하여 Zenith는 사용자가 언어와 기기 전반에서 평화를 찾을 수 있도록 제작되었습니다.

현지화에 대해 더 자세히 알아보고 싶은 개발자이거나 단순히 명상 앱에 관심이 있는 사람이라면 이 게시물이 통찰력 있는 정보가 되었기를 바랍니다. 데모를 통해 Zenith가 자신의 평온함을 찾는 데 어떻게 도움이 되는지 확인해 보세요.

즐거운 코딩, 행복한 명상!

위 내용은 \'Zenith\' – React, Tolgee 및 Tailwind CSS를 사용하는 고요한 명상 앱의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!