\'Zenith\' – Apl Meditasi Tenang dengan CSS React, Tolgee dan Tailwind

Dalam siaran ini, saya teruja untuk berkongsi Zenith, aplikasi meditasi yang direka untuk membantu pengguna mencari ketenangan dan fokus dengan pilihan bunyi yang menenangkan, antara muka mesra pengguna dan sokongan untuk pelbagai bahasa. Saya akan menelusuri ciri teras apl, susunan teknologi, cara menyediakannya dan juga penyepaduan tolgee dalam tindak balas.

DEMO

Ciri

• Bunyi Yang Menenangkan: Pengguna boleh memilih daripada pelbagai bunyi yang menenangkan yang disesuaikan untuk meningkatkan sesi meditasi.
• Penyetempatan: Penyepaduan Tolgee membolehkan pengguna di seluruh dunia mengalami apl dalam bahasa ibunda mereka.
• Reka Bentuk Responsif: Tailwind CSS mendayakan pengalaman yang lancar dan mesra mudah alih merentas peranti.
• Antara Muka Mesra Pengguna: Reka letak yang ringkas mengutamakan kebolehaksesan dan kemudahan navigasi.

Timbunan Teknologi

• React: Bahagian hadapan apl menggunakan React, sesuai untuk mencipta UI interaktif yang lancar.
• Tolgee: Tolgee memudahkan sokongan berbilang bahasa, menjadikannya mudah untuk menawarkan penyetempatan untuk khalayak global.
• CSS Tailwind: Tailwind membantu mencipta reka bentuk yang bersih dan responsif dengan cepat dengan pendekatan mengutamakan utilitinya.

Bermula dengan Zenith

Berminat untuk mencubanya? Begini cara untuk menjalankan apl pada mesin anda.

Klon Repositori:

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

Pasang Ketergantungan:

npm install

Jalankan Apl:

npm run dev

Kemudian, lawati http://localhost:5173 dalam penyemak imbas anda untuk meneroka apl.

Menggunakan Zenith

• Pilih bahasa pilihan anda menggunakan togol bahasa.
• Semak imbas bunyi menenangkan yang tersedia dan klik untuk bermain.
• Gunakan pemasa untuk menetapkan tempoh sesi anda.
• Nikmati sesi meditasi anda.

Integrasi Tolgee dalam React

Dokumentasi

Apa itu Tolgee?

Tolgee ialah platform penyetempatan dan terjemahan sumber terbuka yang disepadukan dengan lancar dengan pelbagai rangka kerja, termasuk React. Ia menyediakan alat terjemahan dalam apl yang membolehkan pembangun membuat aplikasi berbilang bahasa dengan cepat dan mengurus terjemahan dengan mudah.

Cara Mengintegrasikan Tolgee ke dalam Aplikasi React

Tolgee memudahkan penyetempatan dengan menawarkan persediaan mudah dan alatan berkuasa untuk mengurus terjemahan terus dalam antara muka apl. Berikut ialah panduan langkah demi langkah untuk menyepadukan Tolgee dengan aplikasi React dan menggunakannya untuk mencipta pengalaman berbilang bahasa.

Langkah 1: Pasang Tolgee

Mula-mula, tambahkan pustaka Tolgee pada projek React anda. Tolgee menawarkan pakej NPM dan Yarn, jadi pilih mana-mana yang paling sesuai untuk anda.

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

Langkah 2: Sediakan Tolgee dalam Aplikasi Anda

Sekarang, mulakan Tolgee dalam apl anda. Mulakan dengan mengimport komponen yang diperlukan daripada pustaka Tolgee, kemudian bungkus apl anda dalam TolgeeProvider Tolgee. Pembekal ini mendayakan ciri terjemahan dan penyetempatan Tolgee di seluruh apl anda.

Dalam fail apl utama anda (cth., App.js atau index.js), sediakan TolgeeProvider seperti ini:

npm install

Langkah 3: Menambah Terjemahan

Tolgee menggunakan kunci unik untuk setiap terjemahan, yang boleh dirujuk di seluruh apl. Anda boleh mengurus terjemahan anda melalui platform Tolgee atau terus dalam kod anda.

Contoh Menambah Teks untuk Penyetempatan

Gunakan komponen T atau gunakan cangkuk Terjemah daripada Tolgee untuk menentukan teks yang memerlukan terjemahan. Begini cara anda boleh menggunakan ini dalam komponen anda:

Menggunakan Komponen

npm run dev

Dalam platform Tolgee, anda akan memetakan selamat datang_message utama kepada terjemahannya, seperti "Selamat Datang ke Zenith" dalam bahasa Inggeris dan frasa lain yang setara dalam bahasa yang berbeza.

Menggunakan useTranslate Hook

Untuk senario yang lebih kompleks, cangkuk useTranslate berguna.

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

Langkah 4: Penyuntingan Dalam Konteks dengan Tolgee DevTools

Pengeditan dalam konteks Tolgee ialah kelebihan utama—ia membolehkan anda mengedit terjemahan terus dalam apl anda. Dengan DevTools didayakan, anda boleh mengklik mana-mana teks untuk mengedit terjemahannya dalam masa nyata, memperkemas aliran kerja terjemahan.

Untuk mengakses DevTools, pastikan anda telah membungkus apl itu dalam (seperti yang ditunjukkan di atas) dan berada dalam mod pembangunan. Ini membolehkan anda melaraskan atau menambah terjemahan tanpa berulang-alik ke platform Tolgee.

Membungkus

Zenith menghimpunkan bunyi yang menenangkan, antara muka mesra pengguna dan sokongan berbilang bahasa untuk memberikan pengalaman meditasi yang benar-benar boleh diakses. Dengan memanfaatkan alatan seperti React untuk bahagian hadapan, Tailwind CSS untuk reka bentuk responsif dan Tolgee untuk penyetempatan yang lancar, Zenith direka untuk membantu pengguna mencari ketenangan merentas bahasa dan peranti.

Sama ada anda seorang pembangun yang ingin mengetahui lebih lanjut tentang penyetempatan atau sekadar seseorang yang berminat dengan apl meditasi, saya harap siaran ini memberi maklumat yang mendalam. Jangan ragu untuk mencuba DEMO dan lihat cara Zenith boleh membantu anda mencari ketenangan anda sendiri.

Selamat pengekodan, dan selamat bermeditasi!

Atas ialah kandungan terperinci \'Zenith\' – Apl Meditasi Tenang dengan CSS React, Tolgee dan Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!