Dalam artikel ini, kami akan membina papan Kanban masa nyata dalam Next.js menggunakan WebSockets, dengan sokongan pangkalan data, sokongan AI melalui Vercel AI SDK dan penyetempatan melalui Tolgee.
Apa yang Anda Akan Pelajari: ✨
Bintangkan repositori Tolgee ⭐
Adakah anda bersedia untuk membina papan Kanban yang unik dengan sokongan AI dan penyetempatan? ?
Mulakan aplikasi Next.js baharu dengan arahan berikut:
ℹ️ Anda boleh menggunakan mana-mana pengurus pakej pilihan anda. Untuk projek ini, saya akan menggunakan npm.
npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm
Seterusnya, navigasi ke projek Next.js yang baru dibuat:
cd kanban-ai-realtime-localization
Kami memerlukan beberapa kebergantungan. Jalankan arahan ini untuk memasang semua kebergantungan yang diperlukan untuk projek kami:
npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd
Untuk komponen UI, kami akan menggunakan shadcn/ui. Mulakan dengan tetapan lalai dengan arahan ini:
npx shadcn@latest init -d
Sekarang, mari tambahkan beberapa komponen UI yang akan kami gunakan dalam aplikasi kami nanti. Untuk menambah komponen boleh guna semula daripada shadcn/ui, jalankan arahan ini:
npx shadcn@latest add button card input label select textarea toast
Di dalam direktori apl/komponen/ui, beberapa fail tambahan akan ditambahkan untuk komponen ini, yang akan kami gunakan semasa membina UI untuk aplikasi kami.
Inisialisasikan Prisma dengan arahan berikut:
npx prisma init
Selepas anda menjalankan arahan ini, fail schema.prisma baharu harus dibuat dalam direktori prisma di akar projek anda.
Ubah suai fail schema.prisma yang baru dibuat untuk menggunakan PostgreSQL sebagai pangkalan data dan sertakan model Pengguna dan Tugas.
// ? prisma/schema.prisma
// This is your Prisma schema file,
// learn more about it in the docs: <https://pris.ly/d/prisma-schema>
// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: <https://pris.ly/cli/accelerate-init>
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id String @id @default(cuid())
email String @unique
password String
tasks Task[] @relation("UserTasks")
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model Task {
id String @id @default(cuid())
title String
description String?
userId String
column Int
order Int
createdBy User @relation("UserTasks", fields: [userId], references: [id])
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Modelnya mudah: setiap pengguna boleh mempunyai berbilang tugas, dengan setiap tugas dipautkan kepada pengguna tertentu. Tugasan mempunyai nilai lajur integer yang mewakili statusnya (0 untuk berterusan, 1 untuk belum selesai dan 2 untuk selesai). Nilai pesanan menentukan kedudukan setiap tugas dalam lajur yang ditetapkan.
Sekarang model kami sudah sedia, kami perlu menolaknya ke pangkalan data kami. Untuk ini, kami memerlukan URL sambungan.
Jika anda sudah mempunyai akses kepada pangkalan data dengan Neon atau perkhidmatan lain, itu bagus. Isi fail .env dengan URL sambungan. Anda tidak perlu menyediakan pangkalan data secara setempat dengan docker.
Jika anda mengikuti dan hanya ingin mencuba projek dengan pangkalan data PostgreSQL setempat menggunakan Docker, tambahkan pembolehubah baharu bernama DATABASE_URL dengan nilai rentetan sambungan ini pada fail .env.
npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm
Untuk menjalankan pangkalan data secara setempat, pastikan anda telah memasang Docker. Buat direktori baharu bernama skrip dalam akar projek dan tambahkan fail yang dipanggil start-local-db-docker.sh dengan baris kod berikut:
cd kanban-ai-realtime-localization
Skrip ini pada asasnya membaca fail .env untuk pembolehubah DATABASE_URL dan mengekstrak semua data yang berkaitan seperti nama pengguna, kata laluan, nama pangkalan data dan mencipta bekas jika ia tidak wujud. Jika sudah, ia hanya memutarkan bekas sedia ada.
Jalankan skrip ini untuk mencipta dan menjalankan bekas PostgreSQL yang akan mengehoskan semua data pengguna untuk aplikasi kami.
npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd
Sekarang, kita sepatutnya mempunyai bekas yang sedang berjalan dengan PostgreSQL. Anda boleh menyemak sama ada itu berlaku dengan menjalankan arahan ini:
npx shadcn@latest init -d
Sekarang, kami memerlukan cara untuk membuat instantiate pelanggan Prisma untuk berinteraksi dengan pangkalan data.
Buat index.ts fail baharu di dalam direktori src/db dan tambah baris kod berikut:
npx shadcn@latest add button card input label select textarea toast
Kami menyediakan tika tunggal PrismaClient untuk memastikan hanya satu tika dibuat dan digunakan semula merentas aplikasi anda, terutamanya membantu dalam mod pembangunan.
Kami kini boleh menggunakan db pemalar yang dieksport untuk berinteraksi dengan pangkalan data kami dalam aplikasi kami.
Jalankan arahan berikut untuk menolak perubahan anda dalam skema anda ke pangkalan data.
npx prisma init
Kini, untuk memastikan jenis yang dikemas kini berfungsi dalam IDE, jalankan arahan berikut untuk menjana jenis baharu berdasarkan skema kami yang dikemas kini.
// ? prisma/schema.prisma
// This is your Prisma schema file,
// learn more about it in the docs: <https://pris.ly/d/prisma-schema>
// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: <https://pris.ly/cli/accelerate-init>
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id String @id @default(cuid())
email String @unique
password String
tasks Task[] @relation("UserTasks")
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model Task {
id String @id @default(cuid())
title String
description String?
userId String
column Int
order Int
createdBy User @relation("UserTasks", fields: [userId], references: [id])
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Ini sahaja yang kami perlukan untuk menyediakan pangkalan data aplikasi kami. ?
Untuk mendayakan penyetempatan dalam aplikasi Next.js anda dengan Tolgee, ikut langkah berikut:
Fail ini mengendalikan pengesanan bahasa dan pengurusan kuki.
// ? .env # If you are using local DB with docker DATABASE_URL=postgresql://postgres:password@localhost:5432/kanban-board
Fungsi setLanguage menyimpan bahasa yang dipilih (tempatan) sebagai kuki dengan tamat tempoh satu tahun, membolehkan apl mengingati pilihan bahasa pengguna merentas sesi.
Fungsi getLanguage menyemak bahasa yang disimpan dalam kuki. Jika bahasa yang sah ditemui, ia mengembalikannya; jika tidak, ia cuba mengesan bahasa daripada pengepala penyemak imbas jika dijalankan dalam penyemak imbas. Jika pengesanan gagal atau persekitaran bukan penyemak imbas, ia lalai kepada DEFAULT_LANGUAGE.
Fail ini mengandungi pemalar dan fungsi dikongsi untuk mengendalikan penyetempatan, termasuk mengambil data statik untuk terjemahan
npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm
Fungsi getStaticData bertanggungjawab untuk memuatkan terjemahan untuk bahasa dan ruang nama tertentu untuk mengambil semula kandungan setempat. Ia mengambil fail JSON daripada direktori mesej, mengikut bahasa dan ruang nama, kemudian menggabungkan semuanya ke dalam satu objek dan mengembalikannya.
Untuk pemilihan bahasa dalam aplikasi kami, kami akan menyediakan pengguna dengan empat pilihan bahasa yang berbeza (Bahasa Inggeris, Czech, Perancis dan Jerman). Anda boleh menambah sokongan kepada bahasa lain jika anda suka.
Di dalam direktori mesej di akar projek, kami akan menyimpan data statik yang berbeza untuk perkataan dan ayat yang berbeza.
ℹ️ Anda boleh mencari pautan kepada fail terjemahan statik ini dalam repositori saya. Tiada apa yang perlu dijelaskan dalam fail itu kerana ia adalah sekumpulan ayat terjemahan dalam bahasa lain yang berbeza.
Fungsi TolgeeBase menyediakan Tolgee dengan alatan untuk mengendalikan terjemahan. Ia menambah sokongan untuk pemformatan mesej ICU (FormatIcu) dan termasuk DevTools untuk penyahpepijatan. Fungsi ini menggunakan kunci API dan URL daripada pembolehubah persekitaran dan menetapkan bahasa Inggeris (en) sebagai bahasa sandaran.
Kami menggunakan dua pembolehubah env berbeza, isikan fail .env dengan kunci API ini. Daftar untuk akaun di Tolgee dan dapatkan akses kepada TOLGEE_API_KEYS, tetapi untuk aplikasi ini, kunci API itu tidak diperlukan.
cd kanban-ai-realtime-localization
Fail ini mengkonfigurasi tika Tolgee untuk pemaparan sebelah pelayan, menyediakan pengendalian terjemahan.
npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd
Kod ini mencipta contoh Tolgee untuk pengendalian terjemahan sebelah pelayan. Ia bermula dengan menetapkan getLocale untuk menggunakan fungsi getLanguage, yang mendapatkan semula bahasa pilihan pengguna. Kemudian, dalam createTolgee, ia memulakan Tolgee dengan data terjemahan untuk semua bahasa yang disokong melalui getStaticData.
Ia juga menetapkan Tolgee untuk menggunakan bahasa yang disediakan (dari getLanguage) dan mengkonfigurasi fungsi pengambilan tersuai untuk sentiasa memuatkan data baharu dengan menetapkan pengesahan semula: 0, menghalang cache permintaan terjemahan.
Ini menyediakan penyedia Tolgee untuk pemaparan sebelah pelanggan.
npx shadcn@latest init -d
Kod ini menyediakan penyedia Tolgee sebelah pelanggan untuk terjemahan. TolgeeProviderClient mengambil bahasa, staticData dan kanak-kanak sebagai prop, dan ia memulakan Tolgee dengan bahasa dan data yang ditentukan. Di dalam useEffect, ia mendengar perubahan bahasa dengan permanentChange, menyegarkan halaman melalui router.refresh() setiap kali bahasa dikemas kini.
Akhir sekali, TolgeeProvider memaparkan kanak-kanak, menggunakan pilihan ssr untuk pramuat terjemahan dan memaparkan "Memuatkan..." jika terjemahan tidak tersedia serta-merta.
Akhir sekali, bungkus aplikasi anda dengan
npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm
Di sini mula-mula kami mendapat akses kepada tempat pengguna berdasarkan pengepala atau daripada kuki yang kami tetapkan daripada fungsi tersebut. Kemudian kami menyediakan tempat itu kepada
tag.Itu sahaja yang kami perlukan untuk menyediakan Tolgee dalam aplikasi Next.js kami. ✨Ini akan menjadi proses standard yang perlu anda lakukan untuk melaksanakan lokasi dengan Tolgee dalam mana-mana aplikasi Next.js.
Kami akan menggunakan NextAuth untuk pengesahan dalam aplikasi kami. Mula-mula, mari mulakan dengan mentakrifkan skema Zod baharu yang akan kami gunakan untuk mengesahkan data yang dilalui pengguna.
Tentukan skema Zod (AuthSchema) untuk mengesahkan input pengguna untuk e-mel dan kata laluan semasa log masuk dan pendaftaran. Ini memastikan format e-mel adalah betul dan kata laluan memenuhi keperluan panjang yang ditentukan.
cd kanban-ai-realtime-localization
Kami memerlukan medan e-mel ialah e-mel yang tepat dan bukan sebarang rentetan lain dan kami mahu medan kata laluan mempunyai panjang minimum 8 aksara dan panjang maksimum 20 aksara. Kami akan menggunakan skema pengesahan ini di beberapa tempat untuk mengesahkan data yang dilalui pengguna dalam borang log masuk/daftar kami untuk menyemak sama ada ia memenuhi kriteria.
Anda menyediakan NextAuth dalam route.ts di bawah src/app/api/auth/[...nextauth], menggunakan CredentialsProvider untuk pengesahan. Fungsi kebenaran mengesahkan bukti kelayakan, menyemak kewujudan pengguna dan mengesahkan kata laluan.
npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd
Logik fungsi kebenaran bertanggungjawab untuk log masuk pengguna atau tidak. Fungsi dalam persediaan ini menyemak sama ada e-mel dan kata laluan yang diberikan sepadan dengan pengguna sedia ada dalam pangkalan data.
Kami hanya menggunakan pengesahan berasaskan Kredensial. Pertama, ia mengesahkan kelayakan menggunakan AuthSchema untuk pengesahan medan. Jika pengesahan berjaya, ia mencari pengguna melalui e-mel dalam pangkalan data. Jika pengguna ditemui, ia kemudian membandingkan kata laluan yang dicincang dalam pangkalan data dengan input kata laluan. Jika kedua-dua semakan lulus, ia mengembalikan data pengguna (tidak termasuk kata laluan).
Seperti yang anda duga, di sini kami memerlukan pembolehubah NEXTAUTH_SECRET untuk ditakrifkan di dalam fail .env. Isi fail .env dengan dua pembolehubah ini:
npx shadcn@latest init -d
Dalam src/app/api/auth/register/route.ts, kami mencipta titik akhir untuk pendaftaran pengguna yang mencincang kata laluan dan menyimpan data pengguna dalam pangkalan data. Kami kemudiannya mengembalikan respons yang sesuai berdasarkan kejayaan pengesahan.
npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm
Di sini, kami menghuraikan data yang diterima daripada klien dan mengesahkannya dengan AuthSchema yang kami tulis sebelum ini. Kemudian, kami mencipta cincang dengan nilai putaran 12. Ini menghasilkan teks yang disulitkan yang akan kami simpan dalam pangkalan data kami, dan akhirnya, kami mengembalikan pengguna.
Sekarang untuk menjadikan aplikasi kami lebih kukuh, mari tambah perisian tengah yang menyemak penggunaSession pada bila-bila masa pengguna melawati laluan tertentu, dan jika mereka tidak disahkan mereka tidak dibenarkan melawati laluan tersebut.
Kami menambah perisian tengah untuk menyekat akses kepada laluan /kanban untuk pengguna yang tidak disahkan.
cd kanban-ai-realtime-localization
Di sini, kami mengatakan bahawa pengguna tidak sepatutnya boleh melawati laluan “/kanban” jika mereka tidak disahkan.
Kami telah selesai dengan logik bahagian belakang untuk mengendalikan pengesahan. Mari kita usahakan beberapa logik pihak pelanggan.
Komponen Navbar kami akan terdiri daripada beberapa komponen yang lebih kecil juga. Kami akan mempunyai butang untuk log masuk, mendaftar, log keluar dan teg pilih untuk membolehkan pengguna menukar bahasa.
Mari mula bekerja pada komponen ini!
Di dalam direktori src/app/components buat fail baharu lang-selector.tsx dengan baris kod berikut:
npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd
Komponen tersebut sepatutnya cukup jelas. Kami menggunakan
? NOTA: Perhatikan bagaimana kami tidak mengekod sebarang teks dalam kod; sebaliknya, kami menggunakan komponen daripada Tolgee untuk memaparkan teks. Dengan cara ini, apabila pengguna menukar bahasa, teks berubah dengan sewajarnya. Jika kita mengodkan teks, melaksanakan terjemahan tidak akan berkesan. Kami akan terus menggunakan pendekatan ini pada masa hadapan.
Kami menggunakan
Begitu juga, Di dalam direktori komponen ini cipta fail baharu yang dipanggil logout-btn.tsx dengan baris kod berikut:
npx shadcn@latest init -d
Sama seperti sebelumnya, apabila pengguna mengklik pada Butang, kami mencetuskan fungsi handleLogout yang kemudiannya cuba log keluar pengguna dan jika berlaku sebarang ralat, ia kemudian menunjukkan pemberitahuan roti bakar dengan mesej ralat yang diterjemahkan.
Kami menggunakan keadaan pemuatan kami untuk memaparkan ikon pemuat apabila melog keluar pengguna.
Akhir sekali, kini kedua-dua komponen yang lebih kecil yang kami perlukan tersedia, mari kita gunakan
npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm
Komponen Navbar ini mencipta bar navigasi untuk aplikasi kami. Ia menyemak sama ada pengguna log masuk menggunakan getServerSession. Jika pengguna disahkan, butang log keluar ditunjukkan. Jika tidak, ia menunjukkan pautan kepada pengguna untuk log masuk dan mendaftar.
Sekarang, kami telah selesai mengendalikan logik bahagian belakang untuk pengesahan dan juga selesai melaksanakan Tolgee pada aplikasi kami. Mari kita usahakan beberapa logik pihak pelanggan dan bina beberapa UI.
Di dalam direktori apl/komponen, buat log masuk fail baharu.tsx dengan baris kod berikut:
cd kanban-ai-realtime-localization
Komponen Log Masuk ini memaparkan borang log masuk untuk e-mel dan kata laluan, dengan kedua-dua medan input berfungsi sebagai komponen terkawal. Selepas penyerahan borang, ia memanggil signIn daripada next-auth untuk mengendalikan pengesahan. Jika log masuk gagal, mesej ralat yang diterjemahkan dipaparkan melalui pemberitahuan roti bakar. Log masuk yang berjaya mengubah hala pengguna ke halaman utama.
Kami juga mempunyai pembolehubah keadaan pemuatan yang berasingan, yang kami gunakan untuk menunjukkan ikon animasi pemuatan semasa mengelog pengguna ke dalam aplikasi kami.
Pada masa ini, ini hanyalah komponen yang kami cipta; ia belum lagi dipaparkan dalam aplikasi kami. Untuk berbuat demikian, kami perlu memaparkan komponen ini dalam direktori apl aplikasi kami.
Di dalam direktori src/app/login, buat fail baharu bernama page.tsx dengan baris kod berikut:
npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd
Dalam halaman log masuk, kami mula-mula menyemak sama ada pengguna mempunyai sesi aktif. Jika pengguna mempunyai sesi aktif, kami hanya mengubah hala mereka ke laluan "/kanban" (yang akan kami laksanakan sebentar lagi). Jika pengguna tidak mempunyai sesi aktif, kami memaparkan
Kami kini telah menyelesaikan pelaksanaan halaman Log Masuk; begitu juga, mari bina halaman Daftar.
Di dalam direktori apl/komponen, cipta fail register.tsx baharu dengan baris kod berikut:
npx shadcn@latest init -d
Input e-mel dan kata laluan dalam komponen ini berfungsi sebagai komponen terkawal, sama seperti yang terdapat pada halaman log masuk. Di sini, kami menggunakan React Query untuk memudahkan proses membuat permintaan POST. Pendekatan ini menghapuskan keperluan untuk mengurus keadaan berasingan untuk pemuatan atau pengendalian ralat.
Apabila pengguna mengklik butang hantar dalam borang, permintaan POST dibuat ke laluan API kami untuk mendaftarkan pengguna dalam pangkalan data yang kami kerjakan sebelum ini. Jika pendaftaran berjaya, pengguna dialihkan ke halaman log masuk. Jika tidak, mesej roti bakar dipaparkan dengan mesej ralat yang diterjemahkan.
Apabila pengguna mengklik butang hantar, permintaan POST dihantar ke laluan API kami untuk mendaftarkan pengguna dalam pangkalan data yang kami sediakan sebelum ini. Setelah pendaftaran berjaya, pengguna dialihkan ke halaman log masuk. Jika pendaftaran gagal, kami memaparkan mesej roti bakar dengan mesej ralat yang diterjemahkan menggunakan kekunci yang berkaitan.
Di dalam direktori src/app/register, buat fail baharu bernama page.tsx dengan baris kod berikut:
npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm
Dengan halaman ini disediakan, kami telah melengkapkan aliran pengesahan permohonan kami. Anda kini sepatutnya mempunyai aplikasi didayakan pengesahan yang berfungsi dengan sokongan penyetempatan.
Dalam bahagian ini, kami akan menyediakan pelayan WebSocket untuk aplikasi kami. Mula-mula kita buat fungsi yang membantu kita mendapatkan akses kepada soket.
Di dalam direktori src/config, cipta fail socket.ts baharu dengan baris kod berikut:
cd kanban-ai-realtime-localization
Kod ini mentakrifkan fungsi getSocket yang memulakan sambungan klien Socket.IO ke URL yang ditentukan dalam pembolehubah persekitaran NEXT_PUBLIC_APP_URL, memastikan soket dibuat sekali sahaja. Jika soket sudah dimulakan, ia hanya mengembalikan tika soket sedia ada.
Kini, kami perlu mengurus sambungan socket.io kami dan menyediakan cara untuk komponen kami mengakses tika soket. Di dalam direktori src/providers, buat fail socket-provider.tsx baharu dengan baris kod berikut:
npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd
Kod ini mencipta konteks React untuk mengurus sambungan Socket.IO, menyediakan cangkuk useSocket untuk mengakses contoh soket. SocketProviderClient memulakan soket menggunakan fungsi getSocket dan menyambungkannya, kemudian membalut anak-anaknya dalam penyedia konteks untuk berkongsi tika soket sepanjang aplikasi.
Kini, kami perlu membungkus aplikasi kami dengan pembekal soket ini untuk mendapatkan akses menggunakan WebSocket untuk menghantar dan menerima data.
Di dalam direktori yang sama, buat pembekal fail baharu.tsx yang akan kami gunakan untuk membungkus komponen anak kami dengan QueryClientProvider daripada @tanstack/react-query dan SocketProviderClient kami yang baru dibuat.
Tambah baris kod berikut pada fail:
npx shadcn@latest init -d
Sekarang, apa yang perlu kami lakukan ialah, bungkus aplikasi kami dengan
Ubah suai susun atur.tsx dalam akar projek dengan baris kod berikut:
npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm
Kini, kami bersedia untuk mencipta pelayan Socket.io kami sendiri. Cipta server.ts fail baharu dan tambah baris kod berikut:
cd kanban-ai-realtime-localization
Kini, fail server.ts ini menjadi pintu masuk ke aplikasi kami. Kami boleh melakukan hampir apa sahaja yang kami akan lakukan dengan pelayan socket.io dengan rangka kerja bahagian belakang seperti express.js.
Kami kini boleh mendengar sebarang acara yang serupa dengan mendengar 'sambungan' dan 'putus sambungan' di sini. Kami akan mengubah suai fail ini pada masa hadapan untuk mendengar acara tersuai kami.
Sekarang, buat fail baharu tsconfig.server.json yang akan menyimpan tetapan khusus untuk pelayan kami. Tambahkan baris kod berikut:
npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd
Fail tsconfig.server.json ini memanjangkan konfigurasi TypeScript asas yang terdapat dalam tsconfig.json dan menentukan beberapa tetapan tersuai untuk projek kami. Ia menggunakan CommonJS untuk output modul, dan mengarahkan fail yang disusun ke direktori dist. PilihanModul terpencil ditetapkan kepada palsu, membenarkan fail yang mungkin tidak lengkap, manakala noEmit adalah palsu, membenarkan fail output dijana. Akhirnya, ia hanya memasukkan fail server.ts dalam proses penyusunan.
Untuk pelayan pembangunan kami, kami akan menggunakan nodemon dan juga kini kami menggunakan fail server.ts sebagai pelayan kami. Jadi, ubah suai skrip dalam fail package.json kepada ini:
npx shadcn@latest init -d
Selain itu, kita perlu mengubah suai konfigurasi nodemon untuk melihat perubahan dalam fail server.ts dan menukar arahan pelaksanaannya.
Buat fail baharu nodemon.json dalam akar projek dengan konfigurasi berikut:
npx shadcn@latest add button card input label select textarea toast
Akhirnya, kini kami telah selesai dengan semua pra-kerja untuk lembaga kami. Mari kita berusaha untuk memaparkan dan mencipta tugasan untuk papan kami.
Di dalam direktori src/komponen, cipta fail task.tsx baharu dengan baris kod berikut:
npx prisma init
Kami akan menggunakan ini untuk memaparkan tugasan dalam aplikasi kami. Di sini, kami pada asasnya menerima objek tugasan sebagai prop dan menggunakan komponen Kad untuk mempersembahkan kandungan tugasan dalam fesyen seperti kad. Kami menggunakan pakej date-fns untuk memformat tarikh dengan cara yang lebih mudah dibaca.
Sekarang, mari kita cipta komponen yang boleh kita gunakan untuk menambah tugasan pada papan kita. Di dalam direktori src/komponen, cipta fail baharu add-task.tsx dengan baris kod berikut:
// ? prisma/schema.prisma
// This is your Prisma schema file,
// learn more about it in the docs: <https://pris.ly/d/prisma-schema>
// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: <https://pris.ly/cli/accelerate-init>
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model User {
id String @id @default(cuid())
email String @unique
password String
tasks Task[] @relation("UserTasks")
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model Task {
id String @id @default(cuid())
title String
description String?
userId String
column Int
order Int
createdBy User @relation("UserTasks", fields: [userId], references: [id])
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Komponen ini mempunyai banyak perkara yang berlaku. Terdapat dua medan input, kedua-duanya adalah komponen terkawal. Walau bagaimanapun, kawasan teks ditetapkan kepada readOnly kerana ia dimaksudkan untuk diisi oleh AI dan bukannya oleh pengguna. Kami menggunakan dua pembolehubah keadaan, tajuk dan perihalan, untuk mengurus medan tajuk dan perihalan.
Apabila pengguna mengklik butang serah, permintaan API dibuat ke titik akhir penciptaan tugas kami, yang menambahkan tugasan baharu untuk pengguna dalam pangkalan data dan mengembalikannya. Jika sebarang ralat berlaku, roti bakar memaparkan mesej ralat yang diterjemahkan. Setelah berjaya, kami menetapkan semula medan input dan memancarkan peristiwa yang pelayan akan ambil, mencetuskan kemas kini pada komponen papan untuk memaparkan semua tugasan.
Kait useChat, yang diakses daripada AI SDK Vercel, amat menarik di sini. Ia menyediakan akses kepada medan seperti sejarah mesej dan mesej input semasa, bersama-sama dengan pembolehubah isPending, yang menjejaki sama ada respons AI masih dimuatkan.
Apabila pengguna mengklik butang Jana, kami menyerahkan tajuk kepada AI. Sebaik sahaja kami menerima respons, kami menyemak medan mesej menggunakan cangkuk useEffect. Jika mesej pembantu dikemas kini, kami menetapkan perihalan kepada mesej baharu ini.
Kini, kami akan mengemas kini fail server.ts untuk turut mendengar acara yang dibuat tugasan. Ubah suai fail server.ts dalam akar projek dengan baris kod berikut:
npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm
Di sini, kami mendengar acara itu, dan sebaik sahaja ia diterima, kami memancarkannya ke semua soket yang disambungkan. Ia kemudiannya diterima oleh
Sekarang, dalam
Mari kita buat fail skema untuk pengesahan input daripada pengguna dan AI. Di dalam direktori src/lib/validators, cipta fail message.ts baharu dengan baris kod berikut:
cd kanban-ai-realtime-localization
Kini, kita boleh menggunakan skema ini untuk membuat kesimpulan jenis tindak balas daripada AI untuk mendapatkan pengesahan jenis dalam laluan API kami.
Akhir sekali, Di dalam direktori src/api/chat, buat fail route.ts baharu dengan baris kod berikut:
npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd
Dalam laluan API ini, kami mulakan dengan mengesahkan input untuk memastikan ia termasuk tatasusunan mesej di mana setiap objek mempunyai medan peranan dan kandungan. Seterusnya, kami mengekstrak mesej pengguna terkini (iaitu, soalan atau permintaan terkini kepada AI) daripada tatasusunan ini. Dengan mesej ini di tangan, kami menghantarnya ke fungsi streamText, menggesa AI menjana penerangan tugas berdasarkan kandungan mesej.
Akhir sekali, kami mengembalikan respons sebagai aliran data, membenarkan pelanggan mengemas kini tatasusunan mesej dalam masa nyata. Respons penstriman ini mencetuskan cangkuk useEffect, yang mengemas kini medan penerangan, memaparkan penerangan yang dijana AI terus dalam kawasan teks.
Di dalam direktori src/lib/validators, cipta fail baharu create-task.ts dengan baris kod berikut:
npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm
Skema CreateTaskSchema mentakrifkan struktur untuk mencipta tugasan. Ia memerlukan tajuk antara 1 dan 50 aksara dan termasuk penerangan pilihan.
Jenis yang disimpulkan, TCreateTaskSchema, menyediakan keselamatan jenis untuk struktur ini, membolehkan kami menggunakannya untuk menaip yang konsisten dalam kedua-dua kod sisi klien dan sisi pelayan.
Sekarang, mari kita usahakan titik akhir penciptaan tugas, iaitu /api/tasks/[userId]/create.
Buat direktori baharu dengan laluan ini dan buat route.ts di dalam fail dengan baris kod berikut:
cd kanban-ai-realtime-localization
Laluan API ini mencipta tugasan baharu. Ia mula-mula menyemak sesi pengguna yang sah dengan getServerSession. Jika tiada sesi aktif (pengguna tidak log masuk), ia mengembalikan ralat 401 Tanpa Kebenaran. Seterusnya, ia mengesahkan badan permintaan dengan CreateTaskSchema, dan jika pengesahan gagal, ia bertindak balas dengan status 422 dan butiran ralat.
Jika input adalah sah, ia mengira tugasan dalam lajur lalai (0 - berterusan) untuk pesanan, kemudian mencipta tugas baharu dalam pangkalan data dengan tajuk yang disediakan, penerangan pilihan, ID pengguna, lajur dan nilai pesanan, yang ialah panjang tatasusunan. Tugas baru dikembalikan pada kejayaan; jika tidak, ia mengembalikan Ralat Pelayan Dalaman.
? Di sini, kami akan membina komponen UI utama dan beberapa API untuk mengemas kini tugas di Papan kami
Sekarang, mari buat
Di dalam direktori src/komponen, buat papan fail baharu.tsx dengan baris kod berikut:
npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd
Ini ialah komponen di mana kami akan menggunakan ciri utama papan Kanban, iaitu, seret dan lepas item. Untuk ini, kami akan menggunakan pakej kami yang dipasang sebelum ini, react-beautiful-dnd. Komponen mula-mula mengambil sesi pengguna menggunakan getSession dan menetapkannya dalam keadaan. Setelah sesi tersedia, ia membuat panggilan API untuk mengambil tugasan untuk pengguna log masuk dan menyimpannya dalam tugasan.
Ia mendengar acara dua soket —tugasan dikemas kini, yang mengemas kini senarai tugasan dan tugasan dibuat, yang menambahkan tugasan baharu pada senarai tugasan semasa.
Tugas dikumpulkan mengikut status lajur (0 untuk "Berterusan," 1 untuk "Belum selesai," dan 2 untuk "Selesai") menggunakan fungsi tasksByStatus. Komponen memetakan status ini untuk memaparkan setiap lajur dengan tugasan yang sepadan.
Pembungkus DragDropContext mendayakan fungsi drag-and-drop. Apabila tugasan dialihkan, handleDragEnd menghantar pesanan tugasan baharu kepada pelayan melalui acara soket untuk penyegerakan.
Setiap lajur ialah kawasan Droppable yang mengandungi komponen Tugasan boleh seret, membolehkan pengguna menyusun semula tugas dalam dan merentas lajur.
Sekarang, mari kita bekerja pada laluan /api/tasks yang bertanggungjawab untuk mengembalikan senarai tugas pengguna daripada pangkalan data.
Di dalam apl/api/tasks, cipta fail route.ts dengan baris kod berikut:
npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm
Fungsi GET dalam laluan API ini mengambil maklumat pengguna, termasuk tugas mereka. Ia bermula dengan mengesahkan pengesahan menggunakan getServerSession. Jika sesi tidak hadir, status 401 Tidak dibenarkan dikembalikan.
Laluan mengekstrak e-mel dan userId daripada parameter pertanyaan URL permintaan. Jika userId tiada atau e-mel pengguna sesi tidak sepadan dengan e-mel yang diberikan, status 403 Forbidden dikembalikan.
Seterusnya, ia menanyakan pangkalan data untuk pengguna dengan e-mel dan ID yang ditentukan, hanya memilih ID dan tugasan pengguna. Jika tiada pengguna ditemui, status 404 Not Found dikembalikan. Jika pengguna wujud, data mereka dihantar dalam respons.
Sekarang, kita hampir selesai; kita hanya perlu mendengar acara seret tugasan daripada
Ubah suai fail server.ts dalam akar projek dengan baris kod berikut:
cd kanban-ai-realtime-localization
Acara seret tugas bertanggungjawab untuk mengendalikan fungsi seret dan lepas tugas dalam papan Kanban anda. Apabila tugasan diseret dari satu kedudukan ke kedudukan yang lain, peristiwa ini dicetuskan, membenarkan pelayan mengemas kini status dan kedudukan tugasan dalam pangkalan data.
Apabila pelanggan mengeluarkan acara 'task-drag', ia menghantar muatan yang mengandungi sumber dan lokasi destinasi tugasan yang diseret, serta alamat e-mel pengguna. Pelayan mendengar acara ini.
Pelayan kemudian memanggil fungsi handleTaskDrag, menghantar e-mel pengguna, sumber dan destinasi sebagai hujah. Fungsi ini bertanggungjawab untuk mengambil pengguna daripada pangkalan data menggunakan alamat e-mel mereka, memastikan kemas kini tugasan dikaitkan dengan pengguna yang betul.
Dalam handleTaskDrag, fungsi mendapatkan semula tugas pengguna daripada pangkalan data dan kemudian memanggil updateTasksInDB, yang memproses logik kemas kini tugas. Fungsi ini mengemas kini lajur dan susunan tugasan berdasarkan operasi seret dan lepas, memastikan tugasan disusun semula dengan betul dalam pangkalan data.
Jika tugasan berjaya dikemas kini, tugasan yang dikemas kini akan dipancarkan kembali kepada semua pelanggan yang disambungkan menggunakan io.sockets.emit, menyiarkan perubahan supaya antara muka pengguna boleh dikemas kini dalam masa nyata.
Sekarang kita mempunyai kedua-dua
Di dalam direktori src/app/kanban, buat halaman fail baharu.tsx dengan baris kod berikut:
npx create-next-app@latest kanban-ai-realtime-localization --typescript --tailwind --eslint --app --src-dir --use-npm
Ia bermula dengan menyemak sesi pengguna dengan getServerSession, mengubah hala ke halaman log masuk jika sesi tidak hadir. Kenyataan ini mungkin tidak akan dilaksanakan kerana kami membina fail middleware.ts lebih awal dalam direktori src, yang menyatakan bahawa mana-mana laluan bermula dengan /kanban tidak boleh diakses oleh pengguna yang tidak disahkan.
Walau bagaimanapun, tidak ada salahnya untuk menambah lapisan pengesahan tambahan, kerana Next.js menyahgandakan sebarang permintaan pendua yang serupa. Selepas mengesahkan sesi, ia mendapatkan semula ID pengguna daripada pangkalan data; jika pengguna tidak ditemui, ia akan mengubah hala ke halaman pendaftaran.
Akhir sekali, ia memaparkan komponen AddTask dan Board, melepasi ID pengguna sebagai prop.
Terdapat satu perkara terakhir yang tinggal: jika anda perasan, dalam
Di dalam direktori src/app/kanban/[taskId], buat halaman fail baharu.tsx dengan baris kod berikut:
cd kanban-ai-realtime-localization
Perkara yang sama berlaku di sini: kami mula-mula mengesahkan sesi. Seperti yang dinyatakan sebelum ini, ini tidak boleh dilaksanakan kerana perisian tengah yang telah kami sediakan.
Kemudian, kami hanya mengambil tugasan daripada pangkalan data menggunakan taskId yang kami terima sebagai prop. Jika tugasan tidak wujud, kami mengubah hala pengguna ke halaman /kanban. Jika ia wujud, kami memaparkan tajuk dan penerangan tugasan.
Akhir sekali, mari kita bekerja pada halaman Utama akar aplikasi (/ laluan) kita. Ubah suai src/app/page.tsx dengan baris kod berikut:
npm install @ai-sdk/openai @tolgee/react @tolgee/web @tolgee/format-icu @tanstack/react-query @prisma/client ai socket.io socket.io-client prisma next-auth date-fns nodemon ts-node zod tsconfig-paths react-beautiful-dnd
Di sini, kami hanya menyemak sama ada pengguna itu disahkan. Jika ya, mereka dihantar ke laluan /kanban; jika tidak, ia akan diubah hala ke halaman log masuk.
Itu sahaja yang perlu kami lakukan untuk memastikan papan Kanban kami berfungsi dengan sempurna. Kini, anda sepatutnya mempunyai papan Kanban yang berfungsi sepenuhnya dengan pengesahan, penyetempatan dan sokongan masa nyata. ?
Wah! ? Kami telah mencapai banyak perkara bersama hari ini.
Jika anda berjaya sejauh ini, anda telah berjaya membina papan Kanban yang dikuasakan AI dan penyetempatan dari awal bersama-sama dengan bantuan catatan blog. Beri diri anda tepukan yang sewajarnya di belakang!
Bintangkan repositori Tolgee ⭐
Ikuti Tolgee untuk lebih banyak kandungan seperti ini.
Kongsi pendapat anda di bahagian komen di bawah! ?
Terima kasih banyak kerana membaca! ? ?
Atas ialah kandungan terperinci Membina Papan Kanban dengan Next.js, Vercel AI dan Tolgee. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
