Saya telah menyetempatkan platform pautan pendek terbaik di dunia

Sebagai sebahagian daripada bermain dengan Tolgee, saya telah mencuba menterjemah dub.co, sebuah syarikat sumber terbuka yang mantap, ke dalam bahasa lain! Saya mengambil masa 1 jam, dan hasilnya sangat mengagumkan!

---

Dalam tutorial ini, saya akan membimbing anda melalui pendekatan penyetempatan yang mudah dan cekap dalam aplikasi Next.js menggunakan Tolgee - platform yang direka untuk pengurusan terjemahan yang pantas dan autonomi.

Anda juga akan belajar cara mengintegrasikan Tolgee dengan Dub.co, platform pengurusan pautan popular yang membolehkan pengguna mengakses dan berinteraksi dengan aplikasi dalam bahasa pilihan mereka.

Prasyarat

Untuk memahami tutorial ini sepenuhnya, anda perlu mempunyai pemahaman asas tentang React atau Next.js.

Anda juga perlu menyediakan yang berikut:

• Projek Tolgee - projek sedia ada dengan sekurang-kurangnya dua terjemahan bahasa.
• Tolgee CLI - membolehkan anda berinteraksi dengan platform Tolgee dari komputer anda menggunakan baris arahan.
• Docker - diperlukan untuk menjalankan Dub.co. Ia ialah platform sumber terbuka yang menggunakan kontena untuk memudahkan membuat, menggunakan dan menjalankan aplikasi.
• Docker Compose - aplikasi perisian untuk mentakrif dan menjalankan aplikasi Docker berbilang bekas.
• Python (versi 3.8 atau lebih tinggi): diperlukan untuk mengkonfigurasi beberapa pakej Dub.co.

---

Apa itu Tolgee?

Tolgee ialah platform penyetempatan mesra pembangun yang membolehkan anda menterjemah aplikasi anda ke dalam mana-mana bahasa tanpa mengubah suai kod anda. Ia direka untuk aplikasi web tetapi turut menyokong aplikasi mudah alih dan desktop.

Dengan Tolgee, anda tidak perlu mencari kunci dalam kod sumber anda, mengedit fail penyetempatan atau melaksanakan data pengeksportan manual untuk penterjemah. Tolgee menawarkan terjemahan dalam konteks, memori terjemahan untuk menjejaki rentetan yang telah diterjemahkan, terjemahan mesin dan auto, dan banyak lagi.

Tolong bantu kami dengan bintang. ?

Ini akan membantu kami mencipta lebih banyak artikel seperti ini ?

Bintangkan repositori Tolgee ⭐

---

Cara menyediakan Dub.co pada komputer tempatan anda

Dub.co ialah platform pengurusan pautan sumber terbuka yang membolehkan pasukan pemasaran menambah analitis yang berkuasa pada pautan mereka, membuat pautan pendek, menjana kod QR untuk pautan dan banyak lagi. Ia dicipta oleh Steven Tey (sebelum ini Vercel).

Ikuti langkah ini untuk menyediakan Dub.co pada komputer anda:

Klon repositori GitHub Dub.co dengan menjalankan coretan kod di bawah.

git clone https://github.com/dubinc/dub.git

Navigasi ke dalam folder dub dan pasang kebergantungan projek:

git clone https://github.com/dubinc/dub.git

Dalam folder apl/web , namakan semula .env.example fail kepada .env.

Buat akaun Tinybird baharu dan salin Token Pengesahan Pentadbiran anda ke dalam .env fail.

pnpm install

Navigasi ke dalam direktori pakej/tinybird dan pasang CLI Tinybird menggunakan arahan berikut:

TINYBIRD_API_KEY=<your_admin_auth_token>
</your_admin_auth_token>

Laksanakan arahan berikut dalam terminal anda dan masukkan Token Pengesahan Pentadbiran anda apabila digesa untuk mengesahkan menggunakan Tinybird CLI:

pip3 install tinybird-cli

Terbitkan sumber data dan titik akhir Tinybird dengan menjalankan coretan kod di bawah:

tb auth

Buat pangkalan data Upstash dan salin bukti kelayakan berikut daripada bahagian REST API ke .env fail:

tb push

Navigasi ke tab QStash dan salin bukti kelayakan berikut ke dalam .env fail.

UPSTASH_REDIS_REST_URL=<your_rest_url>
UPSTASH_REDIS_REST_TOKEN=<your_rest_token>
</your_rest_token></your_rest_url>

Seterusnya, dalam apl/web direktori, jalankan arahan berikut untuk memulakan tindanan Karang Docker:

QSTASH_TOKEN=
QSTASH_CURRENT_SIGNING_KEY=
QSTASH_NEXT_SIGNING_KEY=

Jana klien Prisma dan buat jadual pangkalan datanya menggunakan arahan berikut:

docker-compose up

Dub.co menyokong berbilang kaedah pengesahan. Buat apl GitHub dan salin URL di bawah sebagai URL panggil baliknya.

npx prisma generate
npx prisma db push

Akhir sekali, mulakan pelayan pembangunan:

http://localhost:8888/api/auth/callback/github

Anda boleh mengakses aplikasi web dengan menavigasi ke http://localhost:8888 dalam penyemak imbas anda, buat ruang kerja dan mulakan. Jika anda menghadapi sebarang masalah, rujuk panduan pemasangan lengkap untuk mendapatkan bantuan yang lebih terperinci.

---

Bagaimana untuk mengkonfigurasi Tolgee dalam aplikasi Next.js

Dalam bahagian ini, anda akan belajar cara menambahkan Tolgee pada aplikasi Next.js dan mengkonfigurasinya untuk menyokong berbilang bahasa, membenarkan pengguna mengakses apl itu dalam bahasa pilihan mereka.

Untuk melaksanakan penyetempatan dalam aplikasi Next.js, anda perlu memasang Tolgee React SDK.

pnpm dev

Seterusnya, buat akaun Platform Tolgee dan log masuk ke papan pemuka anda.

Tambah projek baharu dengan mengklik butang Projek dan memilih bahasa pilihan anda untuk projek itu. Untuk aplikasi ini, kami akan menggunakan lima bahasa: Inggeris (sebagai bahasa asas), Cina, Hindi, Sepanyol dan Arab.

Klik ikon profil di penjuru kanan sebelah atas papan pemuka anda, kemudian pilih Kunci API Projek untuk mencipta kunci API untuk projek Tolgee anda.

Buat .env.development.local dan salin kunci API anda ke dalam fail:

git clone https://github.com/dubinc/dub.git

Pilih Terjemahan daripada menu bar sisi dan tambah terjemahan baharu pada projek.

Anda boleh membuat kunci terjemahan, menambah kandungan atau rentetan yang anda perlukan untuk menterjemah, memberikan penerangan dan kemudian menyimpannya.

Tolgee menyediakan pelbagai pilihan terjemahan mesin secara lalai, membolehkan anda menterjemah kandungan dengan mudah ke dalam bahasa yang tersedia dalam projek anda.

Tahniah! Anda telah berjaya menyediakan platform Tolgee untuk terjemahan dalam aplikasi anda. Seterusnya, mari kita konfigurasikan Tolgee dalam projek Dub.co untuk menjana terjemahan dengan mudah secara terus dalam aplikasi.

Bagaimana untuk menyediakan penyetempatan dalam Dub.co

Dalam bahagian ini, saya akan membimbing anda melalui konfigurasi Tolgee untuk menyokong interaksi pelayan-pelanggan dalam projek Dub.co.

Mula-mula, pasang pakej Tolgee CLI.

pnpm install

Jalankan coretan kod berikut untuk log masuk ke platform Tolgee anda menggunakan kunci API projek anda.

TINYBIRD_API_KEY=<your_admin_auth_token>
</your_admin_auth_token>

Seterusnya, buat folder i18n dalam direktori apl/web. Folder ini akan menyimpan fail JSON yang mengandungi terjemahan untuk pelbagai bahasa yang tersedia dalam projek platform Tolgee.

pip3 install tinybird-cli

Dalam direktori apl/web, dapatkan terjemahan bahasa yang dibuat dalam projek Tolgee anda dengan menjalankan coretan kod di bawah:

tb auth

Coretan kod di atas secara automatik mengisi folder i18n dengan pelbagai terjemahan bahasa yang dibuat dalam platform Tolgee.

tb push

Buat folder tolgee yang akan mengandungi konfigurasi Tolgee dalam direktori apl/web:

git clone https://github.com/dubinc/dub.git

Tambahkan fail shared.ts dalam direktori tolgee, kemudian salin coretan kod berikut ke dalam fail:

pnpm install

Coretan kod di atas mengkonfigurasi Tolgee dengan bahasa lalai dan sandaran untuk mendayakan penyetempatan dalam aplikasi.

Seterusnya, cipta fail client.tsx dalam direktori tolgee, kemudian salin coretan kod di bawah ke dalam fail:

TINYBIRD_API_KEY=<your_admin_auth_token>
</your_admin_auth_token>

Fail client.tsx berfungsi untuk menterjemah komponen klien dan juga mendayakan kefungsian dalam konteks untuk komponen yang diberikan pelayan. Coretan kod di atas mentakrifkan komponen TolgeeNextProvider, yang membungkus keseluruhan aplikasi Dub.co, menyediakan konfigurasi yang diperlukan untuk mengurus perubahan dan terjemahan bahasa.

Buat fail locale.ts tersuai dalam folder tolgee dan salin coretan kod berikut ke dalamnya:

pip3 install tinybird-cli

Akhir sekali, buat fail server.tsx dalam folder tolgee, kemudian salin coretan kod berikut ke dalam fail:

tb auth

Aplikasi menggunakan cache pelayan React untuk berkongsi contoh Tolgee merentas komponen dalam satu paparan. Ini membolehkan apl menggunakan tika Tolgee di mana-mana sahaja dalam komponen pelayan.

Tahniah! Anda telah berjaya mengkonfigurasi Tolgee dan kini bersedia untuk mula menambah terjemahan pada pelbagai kandungan dalam aplikasi.

---

Cara menterjemah kandungan aplikasi anda dengan Tolgee

Di sini, anda akan belajar cara menterjemah kandungan dalam aplikasi web anda dan melihat cara Tolgee mendayakan terjemahan dalam apl yang mudah.

Untuk bermula, anda perlu membalut keseluruhan aplikasi Dub.co dengan komponen TolgeeNextProvider, yang ditakrifkan dalam tolgee/client.tsx. Navigasi ke folder apps/web/app, kemudian pergi ke direktori app.dub.co/(dashboard) dan kemas kini fail layout.tsx seperti yang ditunjukkan di bawah:

tb push

Coretan kod di atas membungkus laluan papan pemuka dengan pembekal Tolgee, mendayakan penukaran bahasa dan penyetempatan sepanjang aplikasi.

Tolgee menyediakan dua cangkuk untuk membantu anda memilih dan menterjemah teks dalam aplikasi anda: useTolgee dan useTranslate.

• Kait useTolgee mengembalikan tika Tolgee, membolehkan anda melanggan pelbagai acara yang akan mencetuskan pemaparan semula apabila menterjemah teks.
• Cangkuk useTranslate termasuk fungsi terjemahan (fungsi t) yang menjadikan terjemahan sebenar terus dalam apl.

Kemas kini fail page.tsx dalam direktori app.dub.co/(dashboard)/[slug] dengan menambahkan coretan kod berikut:

"gunakan klien";
import { PageContent } daripada "@/ui/layout/page-content";
import WorkspaceLinksClient daripada "./page-client";
//?? Pemasangan Tolgee
import { useTolgee, useTranslate } daripada "@tolgee/react";
import { setUserLocale } daripada "tolgee/locale";


eksport fungsi lalai WorkspaceLinks() {
  const { t } = useTranslate();
  const tolgee = useTolgee(["PendingLanguage"]);
  bahasa const = tolgee.getPendingLanguage();

  kembali (
    <pagecontent title="Pautan">
    {/**-- Input HTML untuk memilih bahasa pilihan --*/}
      <div classname="flex w-full flex-col px-10">
        <p>Pilih Bahasa</p>
        <pilih defaultvalue="{bahasa}" classname="bulat-sm" name="locale">



<p>Coretan kod di atas memaparkan teg HTML <strong><select></select></strong> yang membolehkan pengguna memilih dan bertukar antara bahasa yang berbeza. Elemen <strong>{t("hello")}</strong> menggunakan fungsi terjemahan Tolgee untuk memberikan nilai kekunci "hello" berdasarkan bahasa yang dipilih.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173093241088271.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="I have localized the best short-linking platform in the world"></p>

<p>Akhir sekali, anda boleh mengemas kini kandungan yang tinggal di seluruh aplikasi untuk menyokong perubahan bahasa, membolehkan pengguna melihat semua komponen dalam bahasa pilihan mereka.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173093241165470.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="I have localized the best short-linking platform in the world"></p>

<p>Tolgee juga menyediakan ciri terjemahan dalam konteks, membolehkan anda menterjemah rentetan terus dalam aplikasi anda, sama ada dalam pembangunan atau pengeluaran, hanya dengan mengklik teks dan menahan kekunci Alt atau Option.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173093241362494.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="I have localized the best short-linking platform in the world"></p>

<p>Tahniah! Anda telah berjaya menyelesaikan projek untuk tutorial ini.</p>

<p>Kod sumber untuk tutorial ini tersedia di sini:</p>

<p>https://github.com/JanCizmar/dub-with-tolgee</p>


<hr>

<h2>
  
  
  Kesimpulan
</h2>

<p>Setakat ini, anda telah mempelajari cara menambahkan penyetempatan pada aplikasi perisian anda menggunakan Tolgee, melaksanakan sokongan untuk berbilang bahasa dan menjadikan penukaran bahasa berjalan lancar dalam projek dunia nyata.</p>

<p>Tolgee ialah platform penyetempatan tertumpu pembangun yang pantas yang membolehkan anda memberikan konteks kepada kandungan anda dan menjana terjemahan dalam beberapa saat. Ia juga menyokong berbilang rangka kerja JavaScript, termasuk Vue, Angular dan Svelte, serta disepadukan dengan alatan seperti Figma dan REST API untuk fleksibiliti.</p>

<p>Jika anda ingin mencipta pengalaman yang diperibadikan untuk pengguna anda, Tolgee ialah pilihan yang sangat baik. Jangan ragu untuk menyumbang dan membintangi repositori GitHub kami, dan sertai komuniti Slack kami untuk berhubung dengan orang lain dan melibatkan diri dengan pasukan.</p><p>Terima kasih kerana membaca!</p>


          </pilih>
</div>

            
        </pagecontent>

Atas ialah kandungan terperinci Saya telah menyetempatkan platform pautan pendek terbaik di dunia. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!