Ekip i\u00e7i ileti\u015fimi g\u00fc\u00e7lendirmek ve projelerde verimlili\u011fi art\u0131rmak g\u00fcn\u00fcm\u00fcz\u00fcn dijital \u00e7al\u0131\u015fma ortamlar\u0131nda kritik bir \u00f6neme sahip. Peki, pop\u00fcler i\u015fbirli\u011fi platformu Zulip’in sundu\u011fu sohbet deneyimini kendi Next.js projenize nas\u0131l entegre edebilirsiniz? Bu makalede, modern web teknolojileriyle donanm\u0131\u015f, ger\u00e7ek zamanl\u0131 ve \u00f6l\u00e7eklenebilir bir sohbet uygulamas\u0131 olu\u015fturman\u0131n inceliklerini ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. \u00d6zellikle, g\u00fc\u00e7l\u00fc frontend yetenekleriyle bilinen Next.js ve sohbet altyap\u0131s\u0131 i\u00e7in sundu\u011fu \u00e7\u00f6z\u00fcmlerle \u00f6ne \u00e7\u0131kan Velt’i kullanarak, i\u015fbirli\u011fine dayal\u0131 bir ileti\u015fim platformunun temelini nas\u0131l ataca\u011f\u0131n\u0131z\u0131 \u00f6\u011freneceksiniz. Geli\u015ftirme s\u00fcrecinin ba\u015f\u0131ndan itibaren kar\u015f\u0131la\u015fabilece\u011finiz zorluklar\u0131 ve bunlar\u0131n \u00fcstesinden gelme yollar\u0131n\u0131 da ele alaca\u011f\u0131z. Bu rehber, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in faydal\u0131 olacak \u015fekilde tasarland\u0131. Hadi, kod d\u00fcnyas\u0131na dal\u0131p harika bir sohbet deneyimi yaratal\u0131m!<\/p>\n
G\u00fcn\u00fcm\u00fczde proje y\u00f6netimi ve ekip i\u00e7i koordinasyon, h\u0131zla de\u011fi\u015fen i\u015f d\u00fcnyas\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline geldi. Bu s\u00fcre\u00e7te etkili ileti\u015fim ara\u00e7lar\u0131, projelerin ba\u015far\u0131s\u0131 i\u00e7in adeta bir can damar\u0131 niteli\u011finde. Zulip gibi geli\u015fmi\u015f sohbet platformlar\u0131, sunduklar\u0131 konu tabanl\u0131 sohbet yap\u0131s\u0131 ve g\u00fc\u00e7l\u00fc entegrasyon yetenekleriyle \u00f6ne \u00e7\u0131k\u0131yor. Ancak, her projenin kendine \u00f6zg\u00fc ihtiya\u00e7lar\u0131 ve tasar\u0131m gereksinimleri olabilir. \u0130\u015fte tam da bu noktada, kendi \u00f6zel sohbet \u00e7\u00f6z\u00fcm\u00fcm\u00fcz\u00fc geli\u015ftirmek devreye giriyor. Peki, bu \u00f6zel \u00e7\u00f6z\u00fcm i\u00e7in neden Next.js ve Velt ikilisini tercih etmeliyiz? Next.js, sunucu taraf\u0131 i\u015fleme (SSR), statik site \u00fcretimi (SSG) ve API rotalar\u0131 gibi \u00f6zellikleriyle geli\u015ftiricilere esnek ve performansl\u0131 bir frontend (\u00f6n y\u00fcz) geli\u015ftirme deneyimi sunar. Bu, h\u0131zl\u0131 y\u00fcklenen, SEO dostu ve kullan\u0131c\u0131 dostu aray\u00fczler olu\u015fturmam\u0131z\u0131 sa\u011flar. Dahas\u0131, Next.js’in React ekosistemine entegrasyonu, mevcut bile\u015fenleri ve k\u00fct\u00fcphaneleri kolayca kullanmam\u0131za olanak tan\u0131r. <\/p>\n
Di\u011fer yandan, Velt, ger\u00e7ek zamanl\u0131 ileti\u015fim altyap\u0131s\u0131n\u0131 kolayca entegre etmemizi sa\u011flayan bir platformdur. WebSocket teknolojisini temel alarak, sunucu ile istemci aras\u0131ndaki s\u00fcrekli ve \u00e7ift y\u00f6nl\u00fc ileti\u015fimi y\u00f6netir. Velt’in sundu\u011fu haz\u0131r SDK’lar ve API’ler sayesinde, s\u0131f\u0131rdan bir WebSocket sunucusu kurmak ve y\u00f6netmek gibi karma\u015f\u0131k i\u015flerle u\u011fra\u015fmak yerine, do\u011frudan sohbet \u00f6zelliklerine odaklanabiliriz. Bu, geli\u015ftirme s\u00fcrecini \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r ve hata olas\u0131l\u0131\u011f\u0131n\u0131 azalt\u0131r. Zulip’in “stream” ve “topic” gibi yap\u0131lar\u0131, mesajlar\u0131n organize edilmesinde b\u00fcy\u00fck rol oynar. Biz de Next.js’in bile\u015fen tabanl\u0131 yap\u0131s\u0131n\u0131 kullanarak bu organizasyonu frontend’de ba\u015far\u0131l\u0131 bir \u015fekilde modelleyebiliriz. \u00d6rne\u011fin, her bir “stream” (ak\u0131\u015f) i\u00e7in ayr\u0131 bir bile\u015fen olu\u015fturabilir, bu bile\u015fenlerin i\u00e7inde de “topic”lere (konulara) g\u00f6re mesajlar\u0131 grupland\u0131rabiliriz. Bu yakla\u015f\u0131m, kullan\u0131c\u0131lar\u0131n arad\u0131klar\u0131 bilgiye daha h\u0131zl\u0131 ula\u015fmas\u0131n\u0131 sa\u011flayarak genel kullan\u0131c\u0131 deneyimini iyile\u015ftirir. <\/p>\n
Bir di\u011fer \u00f6nemli nokta ise \u00f6l\u00e7eklenebilirlik. Next.js’in sunucu taraf\u0131 yetenekleri, uygulaman\u0131n artan kullan\u0131c\u0131 trafi\u011fiyle ba\u015fa \u00e7\u0131kmas\u0131na yard\u0131mc\u0131 olurken, Velt’in altyap\u0131s\u0131 da ger\u00e7ek zamanl\u0131 mesajla\u015fma i\u00e7in gerekli \u00f6l\u00e7eklenebilirli\u011fi sa\u011flar. Bu kombinasyon, k\u00fc\u00e7\u00fck bir ekip i\u00e7in ba\u015flayan bir uygulaman\u0131n, zamanla b\u00fcy\u00fcyen bir toplulu\u011fun ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131layabilecek hale gelmesini m\u00fcmk\u00fcn k\u0131lar. \u00d6rne\u011fin, bir e-ticaret sitesi d\u00fc\u015f\u00fcnelim. Bu sitede, m\u00fc\u015fterilerin \u00fcr\u00fcnler hakk\u0131nda sorular sorabilece\u011fi, destek taleplerinde bulunabilece\u011fi ve hatta di\u011fer m\u00fc\u015fterilerle deneyimlerini payla\u015fabilece\u011fi \u00f6zel sohbet kanallar\u0131 olu\u015fturulabilir. Next.js ile dinamik \u00fcr\u00fcn sayfalar\u0131 ve kullan\u0131c\u0131 profilleri olu\u015ftururken, Velt ile de bu sayfalar \u00fczerinde anl\u0131k m\u00fc\u015fteri deste\u011fi veya topluluk etkile\u015fimi sa\u011flayabiliriz. Bu, m\u00fc\u015fteri memnuniyetini art\u0131rman\u0131n yan\u0131 s\u0131ra, \u00fcr\u00fcnler hakk\u0131nda de\u011ferli geri bildirimler toplamak i\u00e7in de harika bir f\u0131rsatt\u0131r. K\u0131sacas\u0131, Next.js’in esnekli\u011fi ve Velt’in g\u00fc\u00e7l\u00fc ileti\u015fim altyap\u0131s\u0131, Zulip benzeri bir sohbet uygulamas\u0131n\u0131 hem h\u0131zl\u0131 hem de etkili bir \u015fekilde hayata ge\u00e7irmemizi sa\u011flar.<\/p>\n
Bu projeye ba\u015flamadan \u00f6nce, kullanaca\u011f\u0131m\u0131z temel teknolojilerin ve mimari yakla\u015f\u0131m\u0131n ne anlama geldi\u011fini anlamak \u00f6nemlidir. Bu, projenin ilerleyen a\u015famalar\u0131nda kar\u015f\u0131la\u015fabilece\u011fimiz sorunlar\u0131 daha kolay \u00e7\u00f6zmemizi sa\u011flayacakt\u0131r. \u00d6ncelikle, Next.js’ten bahsedelim. Next.js, React \u00fczerine in\u015fa edilmi\u015f bir frontend (\u00f6n y\u00fcz) framework’\u00fcd\u00fcr. Temel amac\u0131, React uygulamalar\u0131n\u0131 daha verimli ve \u00f6l\u00e7eklenebilir hale getirmektir. Bunu yaparken sundu\u011fu ba\u015fl\u0131ca \u00f6zellikler \u015funlard\u0131r: Sunucu Taraf\u0131 \u0130\u015fleme (SSR): Sayfalar\u0131n sunucuda olu\u015fturulup istemciye g\u00f6nderilmesi anlam\u0131na gelir. Bu, ilk sayfa y\u00fcklenme s\u00fcresini azalt\u0131r ve SEO (Arama Motoru Optimizasyonu) performans\u0131n\u0131 art\u0131r\u0131r. Statik Site \u00dcretimi (SSG): Sayfalar\u0131n derleme zaman\u0131nda statik HTML dosyalar\u0131 olarak \u00fcretilmesidir. Bu, en h\u0131zl\u0131 y\u00fckleme s\u00fcrelerini sunar ve \u00f6zellikle i\u00e7erik odakl\u0131 siteler i\u00e7in idealdir. API Rotalar\u0131: Next.js, uygulaman\u0131z i\u00e7inde kendi backend (arka y\u00fcz) API’lerinizi olu\u015fturman\u0131za olanak tan\u0131r. Bu, basit CRUD (Create, Read, Update, Delete) i\u015flemleri veya daha karma\u015f\u0131k veri y\u00f6netimi i\u00e7in harika bir \u00e7\u00f6z\u00fcmd\u00fcr. <\/p>\n
\u015eimdi de Velt’e gelelim. Velt, ger\u00e7ek zamanl\u0131 mesajla\u015fma altyap\u0131s\u0131 sunan bir hizmettir. Genellikle WebSocket teknolojisini kullanarak, sunucu ve istemci aras\u0131nda s\u00fcrekli a\u00e7\u0131k bir ba\u011flant\u0131 kurar. Bu sayede, mesajlar\u0131n an\u0131nda iletilmesi sa\u011flan\u0131r. Velt’in sundu\u011fu avantajlar \u015funlard\u0131r: Haz\u0131r Altyap\u0131: Kendi WebSocket sunucunuzu kurmak, y\u00f6netmek ve \u00f6l\u00e7eklendirmek yerine, Velt’in sundu\u011fu haz\u0131r altyap\u0131y\u0131 kullan\u0131rs\u0131n\u0131z. Bu, geli\u015ftirme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r. SDK ve API’ler: Velt, \u00e7e\u015fitli programlama dilleri i\u00e7in sa\u011flad\u0131\u011f\u0131 Software Development Kit (SDK) ve Application Programming Interface (API) ile entegrasyonu kolayla\u015ft\u0131r\u0131r. Ger\u00e7ek Zamanl\u0131 \u00d6zellikler: Mesaj g\u00f6nderme, alma, kullan\u0131c\u0131 \u00e7evrimi\u00e7i\/\u00e7evrimd\u0131\u015f\u0131 durumunu takip etme gibi ger\u00e7ek zamanl\u0131 \u00f6zellikler i\u00e7in haz\u0131r \u00e7\u00f6z\u00fcmler sunar. <\/p>\n
Bu iki teknolojiyi bir araya getirdi\u011fimizde, ortaya \u00e7\u0131kan mimari \u015f\u00f6yle \u015fekillenecektir: Frontend (Next.js): Kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc y\u00f6netir. Mesajlar\u0131n g\u00f6r\u00fcnt\u00fclenmesi, yeni mesajlar\u0131n g\u00f6nderilmesi, kanallar\u0131n ve konular\u0131n y\u00f6netilmesi gibi i\u015flevler burada ger\u00e7ekle\u015fir. Next.js, React bile\u015fenleri arac\u0131l\u0131\u011f\u0131yla bu aray\u00fcz\u00fc olu\u015fturacakt\u0131r. Backend (Next.js API Rotalar\u0131 ve Velt): Mesajlar\u0131n depolanmas\u0131, kullan\u0131c\u0131 kimlik do\u011frulamas\u0131 ve yetkilendirme gibi i\u015flemler i\u00e7in Next.js’in API rotalar\u0131 kullan\u0131labilir. Ancak, ger\u00e7ek zamanl\u0131 mesaj iletimi i\u00e7in Velt’in altyap\u0131s\u0131 devreye girecektir. Velt, mesajlar\u0131n istemciler aras\u0131nda an\u0131nda iletilmesini sa\u011flayacak olan WebSocket ba\u011flant\u0131lar\u0131n\u0131 y\u00f6netecek. <\/p>\n
Veritaban\u0131: Mesajlar\u0131n, kullan\u0131c\u0131lar\u0131n ve kanal bilgilerinin kal\u0131c\u0131 olarak saklanmas\u0131 i\u00e7in bir veritaban\u0131na ihtiya\u00e7 duyulacakt\u0131r. Bu, PostgreSQL, MongoDB, Firebase gibi herhangi bir NoSQL veya SQL veritaban\u0131 olabilir. Velt’in kendi veritaban\u0131 \u00e7\u00f6z\u00fcmleri de olabilir, bu nedenle Velt’in dok\u00fcmantasyonunu kontrol etmek \u00f6nemlidir. <\/p>\n
\u0130\u015f ak\u0131\u015f\u0131 \u015fu \u015fekilde \u00f6zetlenebilir: Kullan\u0131c\u0131 bir mesaj g\u00f6nderdi\u011finde, Next.js frontend’i bu mesaj\u0131 Velt’e iletir. Velt, mesaj\u0131 ilgili di\u011fer kullan\u0131c\u0131lara veya kanallara an\u0131nda iletir. Mesajlar, ayn\u0131 zamanda kal\u0131c\u0131 depolama i\u00e7in veritaban\u0131na da kaydedilir. Kullan\u0131c\u0131lar \u00e7evrimi\u00e7i oldu\u011funda veya yeni mesajlar geldi\u011finde, Velt bu bilgiyi istemcilere an\u0131nda bildirir ve Next.js frontend’i aray\u00fcz\u00fc g\u00fcnceller. Bu mimari, hem h\u0131zl\u0131 hem de \u00f6l\u00e7eklenebilir bir sohbet uygulamas\u0131 olu\u015fturmak i\u00e7in sa\u011flam bir temel sunar. <\/p>\n
Her b\u00fcy\u00fck projenin temeli sa\u011flam bir kurulumla at\u0131l\u0131r. Bu a\u015famada, Next.js projemizi olu\u015fturacak ve Velt entegrasyonu i\u00e7in gerekli ilk ad\u0131mlar\u0131 ataca\u011f\u0131z. Bu ad\u0131mlar, projenizin gelecekteki geli\u015fimini kolayla\u015ft\u0131racak ve olas\u0131 sorunlar\u0131 en aza indirecektir. \u0130lk olarak, Next.js projemizi olu\u015fturmak i\u00e7in terminalimizi a\u00e7al\u0131m ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131ral\u0131m:<\/p>\n
npx create-next-app@latest zulip-chat-app<\/code><\/pre>\nBu komut, zulip-chat-app<\/code> ad\u0131nda yeni bir Next.js projesi olu\u015fturacakt\u0131r. Kurulum s\u0131ras\u0131nda size baz\u0131 sorular sorulabilir; projenizin ihtiya\u00e7lar\u0131na g\u00f6re bunlar\u0131 yan\u0131tlayabilirsiniz. TypeScript kullanmak isteyebilirsiniz, bu da kodunuzu daha g\u00fcvenli hale getirecektir. Proje olu\u015ftuktan sonra, proje dizinine gidelim:<\/p>\ncd zulip-chat-app<\/code><\/pre>\n\u015eimdi s\u0131ra Velt entegrasyonuna geldi. Velt’i projemize dahil etmek i\u00e7in \u00f6ncelikle bir Velt hesab\u0131 olu\u015fturman\u0131z ve bir proje ayarlaman\u0131z gerekecektir. Velt’in web sitesine giderek hesap olu\u015fturma i\u015flemini tamamlay\u0131n ve ard\u0131ndan yeni bir sohbet projesi ba\u015flat\u0131n. Bu size bir API anahtar\u0131 (API Key) ve muhtemelen bir App ID gibi bilgiler verecektir. Bu bilgileri g\u00fcvenli bir \u015fekilde saklay\u0131n, \u00e7\u00fcnk\u00fc uygulaman\u0131z\u0131n Velt ile ileti\u015fim kurmas\u0131 i\u00e7in gerekecekler.<\/p>\n
Next.js projemizde, Velt SDK’s\u0131n\u0131 kurmam\u0131z gerekecek. Terminalde \u015fu komutu \u00e7al\u0131\u015ft\u0131rarak bunu yapabiliriz:<\/p>\n
npm install velt-chat-sdk<\/code><\/pre>\nveya e\u011fer yarn kullan\u0131yorsan\u0131z:<\/p>\n
yarn add velt-chat-sdk<\/code><\/pre>\nKurulum tamamland\u0131ktan sonra, Velt’i uygulaman\u0131z\u0131n global yap\u0131s\u0131na entegre etmeniz gerekecek. Bu genellikle _app.js<\/code> (veya _app.tsx<\/code> e\u011fer TypeScript kullan\u0131yorsan\u0131z) dosyas\u0131nda yap\u0131l\u0131r. Bu dosya, uygulaman\u0131zdaki t\u00fcm sayfalar i\u00e7in bir kapsay\u0131c\u0131 g\u00f6revi g\u00f6r\u00fcr.<\/p>\n\n \/\/ pages\/_app.js\n import '..\/styles\/globals.css';\n import { VeltClient } from 'velt-chat-sdk';\n import React from 'react';\n\n function MyApp({ Component, pageProps }) {\n \/\/ Velt'i ba\u015flat\u0131n. Velt API anahtar\u0131n\u0131z\u0131 ve di\u011fer gerekli bilgileri buraya ekleyin.\n \/\/ Bu bilgileri environment de\u011fi\u015fkenlerinden almak en iyi pratiktir.\n const veltClient = new VeltClient({\n apiKey: process.env.VELT_API_KEY,\n appId: process.env.VELT_APP_ID,\n \/\/ Di\u011fer Velt yap\u0131land\u0131rmalar\u0131 buraya eklenebilir\n });\n\n return (\n {\/* VeltProvider bile\u015fenini kullanman\u0131z gerekebilir *\/}\n Yukar\u0131daki \u00f6rnekte, Velt’i ba\u015flatmak i\u00e7in VeltClient<\/code> kullan\u0131lm\u0131\u015ft\u0131r. Ger\u00e7ek uygulamada, VELT_API_KEY<\/code> ve VELT_APP_ID<\/code> gibi hassas bilgileri do\u011frudan kod i\u00e7ine yazmak yerine, .env<\/code> dosyalar\u0131 arac\u0131l\u0131\u011f\u0131yla environment de\u011fi\u015fkenleri olarak tan\u0131mlamak en g\u00fcvenli yakla\u015f\u0131md\u0131r. Proje k\u00f6k dizininizde .env.local<\/code> ad\u0131nda bir dosya olu\u015fturarak bu de\u011fi\u015fkenleri tan\u0131mlayabilirsiniz:<\/p>\n\n # .env.local\n VELT_API_KEY=your_velt_api_key_here\n VELT_APP_ID=your_velt_app_id_here\n <\/code><\/pre>\nBu de\u011fi\u015fkenlerin Next.js taraf\u0131ndan tan\u0131nmas\u0131 i\u00e7in uygulaman\u0131z\u0131 yeniden ba\u015flatman\u0131z gerekebilir. Ayr\u0131ca, Velt’in SDK’s\u0131n\u0131n sundu\u011fu VeltProvider<\/code> gibi bile\u015fenleri kullanman\u0131z gerekip gerekmedi\u011fini Velt’in g\u00fcncel dok\u00fcmantasyonundan kontrol etmelisiniz. Bu ilk yap\u0131land\u0131rmalar, sohbet uygulaman\u0131z\u0131n temelini olu\u015fturacakt\u0131r. Bundan sonra, kullan\u0131c\u0131 kimlik do\u011frulamas\u0131, kanal olu\u015fturma ve mesajla\u015fma gibi daha spesifik \u00f6zelliklere odaklanabiliriz.<\/p>\nKullan\u0131c\u0131 Kimlik Do\u011frulamas\u0131 ve Y\u00f6netimi<\/h2>\n
Herhangi bir i\u015fbirli\u011fi arac\u0131nda oldu\u011fu gibi, sohbet uygulamam\u0131zda da kullan\u0131c\u0131lar\u0131n kimliklerini do\u011frulamak ve y\u00f6netmek hayati \u00f6nem ta\u015f\u0131r. Bu, hem g\u00fcvenli\u011fi sa\u011flamak hem de kullan\u0131c\u0131lar\u0131n kendi verilerini ve etkile\u015fimlerini kontrol etmelerine olanak tan\u0131r. Next.js ile bu s\u00fcreci \u00e7e\u015fitli \u015fekillerde y\u00f6netebiliriz. En yayg\u0131n yakla\u015f\u0131mlardan biri, NextAuth.js gibi bir kimlik do\u011frulama k\u00fct\u00fcphanesi kullanmakt\u0131r. NextAuth.js, pop\u00fcler kimlik sa\u011flay\u0131c\u0131larla (Google, GitHub, e-posta\/\u015fifre vb.) entegrasyonu kolayla\u015ft\u0131r\u0131r ve sunucu taraf\u0131nda g\u00fcvenli bir \u015fekilde kimlik do\u011frulama i\u015flemlerini y\u00f6netir.<\/p>\n
Kurulumu genellikle \u015fu \u015fekildedir:<\/p>\n
npm install next-auth<\/code><\/pre>\nArd\u0131ndan, Next.js API rotalar\u0131 i\u00e7inde bir [...nextauth].js<\/code> dosyas\u0131 olu\u015fturarak NextAuth.js’i yap\u0131land\u0131rabilirsiniz:<\/p>\n\n \/\/ pages\/api\/auth\/[...nextauth].js\n import NextAuth from 'next-auth';\n import Providers from 'next-auth\/providers';\n\n export default NextAuth({\n providers: [\n Providers.Google({\n clientId: process.env.GOOGLE_CLIENT_ID,\n clientSecret: process.env.GOOGLE_CLIENT_SECRET,\n }),\n \/\/ Di\u011fer sa\u011flay\u0131c\u0131lar buraya eklenebilir\n ],\n session: {\n strategy: 'jwt', \/\/ veya 'database'\n },\n callbacks: {\n async jwt(token, user, account, profile, isNewUser) {\n \/\/ Kullan\u0131c\u0131 bilgilerinizi token'a ekleyebilirsiniz\n if (account) {\n token.id = user.id;\n token.accessToken = account.access_token;\n }\n return token;\n },\n async session(session, token) {\n \/\/ Token'daki bilgileri session'a aktar\u0131n\n session.user.id = token.id;\n return session;\n },\n },\n \/\/ Di\u011fer yap\u0131land\u0131rmalar (sayfa rotalar\u0131, veritaban\u0131 vb.)\n });\n <\/code><\/pre>\nBu yap\u0131land\u0131rma ile kullan\u0131c\u0131lar, se\u00e7tikleri sa\u011flay\u0131c\u0131 arac\u0131l\u0131\u011f\u0131yla uygulamaya giri\u015f yapabilirler. Giri\u015f yapt\u0131ktan sonra, kullan\u0131c\u0131 bilgilerine (kullan\u0131c\u0131 ad\u0131, e-posta, profil resmi vb.) eri\u015febilir ve bu bilgileri Velt’e ileterek kullan\u0131c\u0131lar\u0131 Velt sisteminde de tan\u0131mlayabiliriz. Velt’in SDK’s\u0131, genellikle bir kullan\u0131c\u0131 kimli\u011fi (user ID) ve iste\u011fe ba\u011fl\u0131 olarak bir kullan\u0131c\u0131 ad\u0131 veya profil resmi gibi bilgileri kabul eder. Bu bilgileri kullanarak, Velt’i o kullan\u0131c\u0131 i\u00e7in ba\u015flatabiliriz.<\/p>\n
Bir \u00f6rnek senaryo d\u00fc\u015f\u00fcnelim: Kullan\u0131c\u0131 Google ile giri\u015f yapt\u0131ktan sonra, Next.js frontend’i Google’dan ald\u0131\u011f\u0131 kullan\u0131c\u0131 bilgilerini (\u00f6rne\u011fin, user.id<\/code> ve user.name<\/code>) al\u0131p Velt SDK’s\u0131na ileterek Velt’i ba\u015flat\u0131r. Bu, Velt’in o kullan\u0131c\u0131y\u0131 tan\u0131mas\u0131n\u0131 ve sohbet mesajlar\u0131n\u0131 do\u011fru ki\u015fiye iletmesini sa\u011flar. Velt’in dok\u00fcmantasyonunda, kullan\u0131c\u0131lar\u0131 ba\u015flatmak i\u00e7in client.user.set()<\/code> gibi bir fonksiyon bulunabilir. <\/p>\n\n \/\/ \u00d6rnek: Velt'i kullan\u0131c\u0131 bilgileriyle ba\u015flatma\n import { useSession } from 'next-auth\/client';\n import { VeltClient } from 'velt-chat-sdk';\n import React, { useEffect } from 'react';\n\n function ChatComponent() {\n const [session, loading] = useSession();\n const veltClient = \/\/ ... VeltClient \u00f6rne\u011fi ...\n\n useEffect(() => {\n if (session) {\n veltClient.user.set({\n id: session.user.id, \/\/ NextAuth'tan gelen kullan\u0131c\u0131 ID'si\n name: session.user.name,\n avatar: session.user.image,\n });\n }\n }, [session, veltClient]);\n\n \/\/ ... sohbet aray\u00fcz\u00fc kodlar\u0131 ...\n }\n <\/code><\/pre>\nKullan\u0131c\u0131 y\u00f6netimi sadece kimlik do\u011frulamayla s\u0131n\u0131rl\u0131 de\u011fildir. Uygulaman\u0131z\u0131n i\u00e7inde kullan\u0131c\u0131lar\u0131n profillerini d\u00fczenleyebilmeleri, \u00e7evrimi\u00e7i\/\u00e7evrimd\u0131\u015f\u0131 durumlar\u0131n\u0131 g\u00f6rebilmeleri gibi \u00f6zellikler de ekleyebilirsiniz. Bu t\u00fcr bilgileri de Velt’in sa\u011flad\u0131\u011f\u0131 API’ler arac\u0131l\u0131\u011f\u0131yla y\u00f6netebilirsiniz. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n profil resmini g\u00fcncelledi\u011finde, bu de\u011fi\u015fikli\u011fi hem Next.js uygulaman\u0131zdaki veritaban\u0131na hem de Velt’e bildirmeniz gerekebilir.<\/p>\n
Kanal ve Konu Yap\u0131s\u0131 Nas\u0131l Kurulur?<\/h2>\n
Zulip’in en g\u00fc\u00e7l\u00fc yanlar\u0131ndan biri, mesajlar\u0131 organize etmek i\u00e7in kulland\u0131\u011f\u0131 “stream” (ak\u0131\u015f) ve “topic” (konu) yap\u0131s\u0131d\u0131r. Bu yap\u0131, sohbet odalar\u0131n\u0131 daha y\u00f6netilebilir hale getirir ve bilgi karma\u015fas\u0131n\u0131 \u00f6nler. Biz de Next.js ve Velt ile benzer bir yap\u0131y\u0131 nas\u0131l kurabiliriz, inceleyelim. \u0130lk olarak, kanal ve konu verilerimizi saklamak i\u00e7in bir veritaban\u0131na ihtiyac\u0131m\u0131z olacak. Bu, kullan\u0131c\u0131 bilgileriyle birlikte y\u00f6netilecektir. Veritaban\u0131 modelimiz, channels<\/code> ve topics<\/code> gibi tablolar\u0131 i\u00e7erebilir. Her kanal\u0131n birden fazla konusu olabilir ve her konu da birden fazla mesaj i\u00e7erebilir.<\/p>\nNext.js API rotalar\u0131n\u0131 kullanarak bu verileri y\u00f6netebiliriz. \u00d6rne\u011fin, yeni bir kanal olu\u015fturmak i\u00e7in bir POST iste\u011fi alacak bir API rotas\u0131 yazabiliriz. Bu rota, iste\u011fi al\u0131p veritaban\u0131na yeni bir kanal kayd\u0131 ekleyecektir. Benzer \u015fekilde, konular\u0131 listelemek, belirli bir kanaldaki konular\u0131 getirmek ve mesajlar\u0131 listelemek i\u00e7in de API rotalar\u0131 olu\u015fturabiliriz.<\/p>\n
\n \/\/ \u00d6rnek: Yeni kanal olu\u015fturma API rotas\u0131 (pages\/api\/channels.js)\n import { PrismaClient } from '@prisma\/client'; \/\/ \u00d6rnek olarak Prisma ORM kullan\u0131l\u0131yor\n\n const prisma = new PrismaClient();\n\n export default async function handler(req, res) {\n if (req.method === 'POST') {\n const { name, description } = req.body;\n try {\n const newChannel = await prisma.channel.create({\n data: {\n name,\n description,\n },\n });\n res.status(201).json(newChannel);\n } catch (error) {\n res.status(500).json({ message: 'Kanal olu\u015fturulamad\u0131', error });\n }\n } else {\n \/\/ Di\u011fer HTTP metotlar\u0131 i\u00e7in (GET, PUT, DELETE)\n res.setHeader('Allow', ['POST']);\n res.status(405).end(Method ${req.method} Not Allowed<\/code>);\n }\n }\n <\/code><\/pre>\nFrontend taraf\u0131nda ise, bu API rotalar\u0131n\u0131 kullanarak kullan\u0131c\u0131lar\u0131n kanallar\u0131 g\u00f6r\u00fcnt\u00fclemesini, yeni kanallar olu\u015fturmas\u0131n\u0131 ve belirli bir kanala kat\u0131lmas\u0131n\u0131 sa\u011flayabiliriz. Bu, genellikle React bile\u015fenleri kullan\u0131larak yap\u0131l\u0131r. \u00d6rne\u011fin, bir ChannelList<\/code> bile\u015feni, API’den kanallar\u0131 \u00e7ekip bir liste halinde g\u00f6sterebilir. Bir CreateChannelForm<\/code> bile\u015feni ise yeni kanal olu\u015fturma i\u015flemini tetikler.<\/p>\nVelt’in rol\u00fc ise, bu kanal ve konu yap\u0131s\u0131n\u0131n ger\u00e7ek zamanl\u0131 ileti\u015fimini sa\u011flamakt\u0131r. Kullan\u0131c\u0131lar bir kanala kat\u0131ld\u0131\u011f\u0131nda veya bir konuya mesaj g\u00f6nderdi\u011finde, bu olaylar Velt arac\u0131l\u0131\u011f\u0131yla di\u011fer kullan\u0131c\u0131lara iletilir. Velt’in SDK’s\u0131, genellikle “kanallara abone olma” (subscribe) ve “kanallardan ayr\u0131lma” (unsubscribe) gibi fonksiyonlar sunar. Bu fonksiyonlar, belirli bir kanaldaki mesajlar\u0131 dinlememizi sa\u011flar.<\/p>\n
\n \/\/ \u00d6rnek: Bir kanala abone olma\n import React, { useEffect } from 'react';\n import { VeltClient } from 'velt-chat-sdk';\n\n function ChannelView({ channelId }) {\n const veltClient = \/\/ ... VeltClient \u00f6rne\u011fi ...\n\n useEffect(() => {\n if (channelId) {\n veltClient.subscribeToChannel(channelId); \/\/ Velt'te kanal ad\u0131 veya ID'si kullan\u0131labilir\n }\n\n return () => {\n if (channelId) {\n veltClient.unsubscribeFromChannel(channelId);\n }\n };\n }, [channelId, veltClient]);\n\n \/\/ ... kanal mesajlar\u0131n\u0131 g\u00f6sterme kodlar\u0131 ...\n }\n <\/code><\/pre>\nVelt’in sundu\u011fu “topic” yap\u0131s\u0131 da Zulip’tekine benzer \u015fekilde kullan\u0131labilir. Bir kanala abone olduktan sonra, belirli bir konuya odaklanmak i\u00e7in Velt’in ilgili fonksiyonlar\u0131n\u0131 kullanabilirsiniz. Bu, kullan\u0131c\u0131lar\u0131n sadece ilgilendikleri konularla ilgili mesajlar\u0131 g\u00f6rmelerini sa\u011flar ve sohbet ak\u0131\u015f\u0131n\u0131 daha verimli hale getirir.<\/p>\n
Ger\u00e7ek d\u00fcnya senaryosu: Bir proje y\u00f6netimi ekibi d\u00fc\u015f\u00fcnelim. Proje A<\/code> ad\u0131nda bir kanal olu\u015fturulabilir. Bu kanal\u0131n i\u00e7inde Tasar\u0131m<\/code>, Geli\u015ftirme<\/code>, Test<\/code> gibi konular tan\u0131mlanabilir. Bir geli\u015ftirici, Geli\u015ftirme<\/code> konusu alt\u0131nda bir soru sordu\u011funda, sadece o konuya abone olan ki\u015filer bu mesaj\u0131 g\u00f6r\u00fcr. Bu, di\u011fer konularla ilgilenen ki\u015filerin dikkatlerinin da\u011f\u0131lmas\u0131n\u0131 engeller.<\/p>\nGer\u00e7ek Zamanl\u0131 Mesajla\u015fma ve Bildirimler<\/h2>\n
Bir sohbet uygulamas\u0131n\u0131n kalbi, ger\u00e7ek zamanl\u0131 mesajla\u015fma yetene\u011fidir. Kullan\u0131c\u0131lar mesaj g\u00f6nderdi\u011finde, bu mesajlar\u0131n an\u0131nda di\u011fer kullan\u0131c\u0131lara ula\u015fmas\u0131 beklenir. Velt, bu ihtiyac\u0131 kar\u015f\u0131lamak i\u00e7in ideal bir \u00e7\u00f6z\u00fcmd\u00fcr. Velt’in WebSocket altyap\u0131s\u0131 sayesinde, mesajlar sunucuya ula\u015ft\u0131\u011f\u0131 anda ilgili istemcilere iletilir. Bu, anl\u0131k ileti\u015fim deneyimini sa\u011flar.<\/p>\n
Mesaj g\u00f6nderme i\u015flemi, genellikle frontend’de bir form arac\u0131l\u0131\u011f\u0131yla tetiklenir. Kullan\u0131c\u0131 mesaj\u0131n\u0131 yazd\u0131\u011f\u0131nda ve g\u00f6nder butonuna t\u0131klad\u0131\u011f\u0131nda, Next.js frontend’i bu mesaj\u0131 al\u0131r ve Velt SDK’s\u0131n\u0131 kullanarak Velt’e iletir. Velt, bu mesaj\u0131 al\u0131p ilgili kanaldaki veya konudaki di\u011fer t\u00fcm aktif kullan\u0131c\u0131lara da\u011f\u0131t\u0131r.<\/p>\n
\n \/\/ \u00d6rnek: Mesaj g\u00f6nderme fonksiyonu\n import React, { useState } from 'react';\n import { VeltClient } from 'velt-chat-sdk';\n\n function MessageInput({ channelId, topicId }) {\n const [messageText, setMessageText] = useState('');\n const veltClient = \/\/ ... VeltClient \u00f6rne\u011fi ...\n\n const sendMessage = async () => {\n if (messageText.trim() === '') return;\n\n try {\n await veltClient.sendMessage({\n channelId: channelId,\n topicId: topicId, \/\/ Konu bazl\u0131 mesajla\u015fma i\u00e7in\n text: messageText,\n \/\/ Di\u011fer meta veriler (kullan\u0131c\u0131 bilgisi vb.) Velt taraf\u0131ndan otomatik eklenebilir\n });\n setMessageText(''); \/\/ Mesaj g\u00f6nderildikten sonra alan\u0131 temizle\n } catch (error) {\n console.error('Mesaj g\u00f6nderilemedi:', error);\n \/\/ Hata y\u00f6netimi\n }\n };\n\n return (\n \n setMessageText(e.target.value)}\n placeholder=\"Mesaj\u0131n\u0131z\u0131 yaz\u0131n...\"\n \/>\n