|
Axborot texnologiyalari va
|
| bet | 2/2 | | Sana | 13.05.2024 | | Hajmi | 5,1 Mb. | | #228215 |
Bog'liq Oybek Maxsudov (Individual loyiha)Loyihaning arxitekturasi
Loyihada qo’llanilgan stekni aytadigan bo’lsak, frontend qismga uncha urg’u berilmaganligi sababli u sodda HTML, CSS va JS fayllaridan iborat. Ularning tarkibi bilan o’z navbatida tanishamiz.
Loyihaning backend qismi haqida gapiramiz. Asosiy e’tibor backend ga qaratilganligi uchun bu yerda fayllar frontend qismga nisbatan ancha ko’p. Backend framework sifatida NodeJS tanlandi va hozirgi kunda “toza” NodeJS ning o’zida deyarli yozilmayotganligi hisobiga ExpressJS ustiga “obyortka” sifatida yozilgan NestJS frameworkini tanladim. Unda hammasi ajoyi nazarimda, hamma joyda dekoratorlar, DI, hammasi strukturalashtirilgan, ajoyib. Loyihamizda auth qismi mavjud bo’lganligi sababidan ma’lumotlar bazasi vazifasini bajarish uchun PostgreSQL tanlandi. Albatta, u tez, bizning ishimiz uchun qulay va u hammaga tanish “klassika”. Postgres bilan ishlash bir muncha osonlash uchun ORM sifatida Prisma tanlandi. Unda barchasi sodda, keyinroq uning tarkibini keltiramiz.
Dasturiy ta’minotimizda oddiy tekst ko’rinishidagi habarlar almashishdan tashqari istalgan kengaytmadagi fayl almashinuvi ham qo’llab quvvatlanadi. Shuning hisobidan o’sha fayllarimiz saqlanishi kerak bo’ladigan “baza” talab etiladi. Buning uchun loyihada MinIO dan foydalandim. Ha albatta, ma’lumotlarimiz real vaqtda almashinishi uchun bizga WebSocket lar kerak bo’ladi. NodeJS ning o’zida muammosiz WebSocket lar bilan ishlashimiz mumkin, ammo, maxsus shu vazifa uchun ishlab chiqilgan framework lar bu ishni juda yaxshi eplashadi. Biz buning uchun SocketIO framework idan foydalanishni ma’qul ko’rdik.
Qo’llanilgan stekning qisqacha tavsifi tugadi endi bevosita har bir qismning tarkibiga o’tamiz. Demak, frontend qismdan boshladik, fayllar ierarxiyasi quyidagicha:
Ilk kirish faylimiz index.html hisoblanadi. Uning tarkibi quyidagicha:
Shu kirish fayli bizni “Sign up” sahifaga tashlaydi. Unda biz username va password terib ro’yxatdan o’tishimiz mumkin. Brauzerdagi ko’rinishi quyidagicha:
O’ta sodda UI ning sababini yuqorida keltirdim. Agar biz allaqachon ro’yxatdan o’tgan bo’lsak, “Sign in” ssilkasini bosishimiz mumkin va u bizni xuddi shu sahifaga juda o’xshash bo’lgan boshqa sahifaga yo’llaydi.
Quyida brauzerdagi ko’rinish:
Aytaylik biror username va password bilan akkauntga kirdik. Brauzerda quyidagicha ko’rinish hosil bo’ladi:
Qarshimizda xabar yozsak bo’ladigan yoki file yuborishimiz mumkin bo’lgan ko’rinish paydo bo’ldi. Kod jihatidan ma’lum username va password kiritilganda user ga kiritilgan password tekshirildi va to’g’ri bo’lsa joriy sahifaga o’tildi. Bu sahifaning kodi quyida berildi:
Koddan murakkab hech narsa yo’q. Shunchaki, habarlarimiz aks etadigan div elementi hosil qilingan va unga vazifasiga mos messages id si berilgan. Keyin esa mos ravishda matn kiritiladigan input va yonida “Submit” tugmasi uchun yana bir input e’lon qilingan. U bosilganda ma’lum logika bajarilishi kerakligi uchun undagi onclick attributiga “handleSubmitNewMessage” funksiyasi “ilingan”. Bunda nima ketma-ketliklar bajarilayotganini JS faylni o’rganayotganda ko’rib chiqamiz. Navbatdagi satrlarda esa fayl tanlash uchun input va uni yuborish uchun button e’lon qilindi. Shuningdek, yuqorida aytib o’tganimizdek SocketIO dan foydalanayotganimiz uchun unga bo’lgan CDN ssilka bevosita kodga ulab qo’yildi. Keyingi qatorimizda esa o’zimizning logikamiz joylashgan fayl JS fayl ko’rsatildi.
Yuqoridagi “Sign in” va “Sign up” sahifalarida Asosiy qismga oid bo’lmagan Auth logikasi mavjud bo’lganligi uchun ular uchun ssenariyni alohida auth.js fayliga oldik. Hozir shuni ko’rib chiqamiz:
Bu faylda Sign up va Sign in tugmalari bosilsa mos ravishda qanday ketma ketlik bajarilishi kerakligi keltirilmoqda. Bunda har bir reaksiya uchun alohida funksiya e’lon qilingan. Ularda berilgan username va password bilan backend ga so’rov yuborilmoqda. Biz bu so’rovlarni backend qismida “ilib” olamiz.
Endi main-part uchun yozilgan ssenariyni ko’rib chiqamiz.
Ayrim tushuntirishlar kerak, nazarimda. Avval boshda, localhost:80 manzilda WebSocket tarmoq hosil qilinishi aytilmoqda. Keyingi satrlarda, agar habar yuborish bosiladigan bo’lsa, socket orqali yuborilishi, agar “message” eventi bo’yicha backend dan habar keladigan bo’lsa u handle qilinishi aytilmoqda. Keyin yurotilgan habar foydalanuvchining o’ziga tegishli yoki emasligiga qaran brauzerda o’ng yoki chap tomondan tekislab chiqarilishi aytilmoqda.
Yuqoridagi ko’rsatilgan kodda yuboriladigan fayl logikasi keltirilgan. Unga ko’ra tanlangan ixtiyoriy faylni FormData ko’rinishida fetch orqali backendga uzatamiz.
Endi backend qismiga o’tamiz. Backend fayllarining strukturasi quyidagicha:
prisma papkasida yuqorida aytib o’tganimizdek Prsima ORM ga tegishli fayllar joylashga shu jumladan migratsiyalar ham. Quyida uning tarkibi:
Chap tomonda schema.prisma, qolganlari migratsiyalar.
Asosiy qismimiz src diriktoriyasida joylashgan:
Frontend ga mos autentifikatsiyaga oid fayllar auth papkasida, websoketlarga oid logika chat papkasida va minio klientga bog’liq logika minio papkasida joylashgan. Asosiy qismlar bilan tanishamiz.
auth ga oid servis-class
signup va signin ga mos ravishda funksiyalar e’lin qilindi va ular user dan keladigan username va password ni olib bazaga borib u yoki bu ishni qilib qaytishadi. Bu yerda bazada to’g’ridan to’g’ri parolning o’zi emas balki uning hashlangan ko’rinishi saqlanadi. Buning uchun bcrypt dan foydalandim.
chat papka tarkibidagi chat.controller.ts fayli yuqoridagi kabi class e’lon qilingan. Shu orqali userdan kelgan fayllarimiz “ushlanadi”. Shunga mos ravishda servicemiz ham mavjud:
Service da kelgan fayllarni minio bazasiga object sifatida joylash logikasi amalga oshirilmoqda.
chat.gateway.ts faylida esa yuqoridagi kon yozilgan. Bunda “message” va “file-message” eventlariga subscribe qilyapti va shu eventlar sodir bo’lganda shunchaki user dan kelgan ma’lumotlar xoh text bo’lsin, xoh biror bir fayl websocket lar orqali barcha hozir “tirik” bo’lgan socket larga yuborilmoqda.
Real-time chatdan natijaviy skrin:
Xulosa
Xulosa o’rnida shuni aytmoqchimanki, bu yerda ko’rsatilgan, tavsiflab ochib berishga harakat qilingan loyiha shunchaki vasakor ravishda qilindi. Ko’zlagan asosiy maqsadimiz kundalik hayotimizda aksariyatimiz foydalanadiganimiz ijtimoiy tarmoqlardan biri Telegram “orqa tomonda” - serverda qanday ishlayotgani, ishlatilayotgan texnologiyalar haqiqatda juda qiziqligini o’zimiz ishlatib ko’rib, “ushlab ko’rib” o’rganishimiz edi. Albatta, startup, yangi g’oya bo’lmasada shu kabi tarmoqlarning simulyatorlarini “yasab” ko’rish juda maroqli va o’zgacha zavq bag’ishlaydi. Qolaversa bu loyiha to’liq ishlaydi. Loyihaning to’liq kodini GitHub sahifamdan topishingiz mumkin (https://github.com/Oybek-uzb). Va u shunday loyihalashtirilganki o’zgartirishlarni oson qo’shish mumkin.
Foydalanilgan adabiyotlar
Asosan web-saytlardan foydalanildi:
https://socket.io/
https://www.prisma.io/
https://min.io/
https://learn.javascript.ru/
|
| |
