Skip to content

MahalliyBaza - sizga Firebase uslubidagi sodda, kuchli, foydalanuvchi brauzerida saqlanadigan, IndexedDB ma'lumotlar bazasida ishlashni osonlashtiradigan offlayn ma'lumotlar bazasini taqdim etadi.

Notifications You must be signed in to change notification settings

otabekoff/mahalliybaza

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MahalliyBaza

Firebasega uslubidagi, offalyn, mahalliy ma'lumotlar bazasi.

MahalliyBaza sizga Firebase uslubidagi sodda, kuchli, foydalanuvchi brauzerida saqlanadigan,IndexedDB ma'lumotlar bazasida ishlashni osonlashtiradigan offlayn ma'lumotlar bazasini taqdim etadi.

Siz xohlagancha ma'lumot bazalarini yaratishingiz mumkin.

Ma'lumot bazalari Collectionlar(to'plam) va Documentlar(hujjatlar)ga birlashtirilgan (xuddi Firebase Cloud Firestore kabi).

  • Ma'lumotlar bazalarida collectionlar mavjud (misol: foydalanuvchilar)
  • Collectionlarda documentlar mavjud (misol: { id: 1, ism: 'Otabek', yosh: 19 }

MahalliyBaza LocalForage yordamida tuzilgan.

Boshlashdan avval bilib qo'yishingiz yaxshi bo'lgan atamalar.

Atamalar... Quyida ishlatilish mumkin bo'lgan ma'nolarda keltirildi.

  • Metod -
  • Order -
  • OrderBy -
  • Ascending -
  • Descending -
  • Key(s) -
  • Limit -
  • Field - maydon. O'zgaruvchi kaliti va qiymati.
  • Document - hujjat yoki ma'lumot.
  • Collection - documentlar to'plami.
  • Databaza yoki database - ma'lumotlar bazasi. Collectionlar saqlanadigan joy.
  • Add - qo'shish. Get - olish.
  • Update - yangilash.
  • Set - Bu yerda qayta yozish orqali yangilash, o'rnatish ma'nosida.
  • Delete - o'chirish.
  • Overwrite - ustiga yozish / qayta yozish.
  • Promise(s) -
  • Async/await -
  • Console -
  • Log -
  • Error -
  • Then -
  • Playground -

Mundarija

Ishni Boshlash

O'rnatish va ishga tushirish

Script tegi yordamida

Ishlab chiqish (development) varianti. Ushbu variant siz proyekt ustida ishlayotgan paytingizda tekshirish uchun ancha qulayliklar yaratib beradi. Misol ucun: yangi qo'shilagan, o'zgartirilgan, o'chirilgan va hkz ma'lumotlar to'grisida sizga browseringiz dev-tools(F12 yoki CTRL+SHIFT+I) oynasining console bo'limida rang bilan ajratilgan habarlar yozish imkonini beradi.

<script src="https://unpkg.com/mahalliybaza/dist/mahalliybaza.dev.js"></script>

<script>
  let db = new MahalliyBaza('db')
</script>

# Yoki

<script src="./mahalliybaza.dev.js"></script>

<script>
  let db = new MahalliyBaza('db')
</script>

Yoki, hajmi kichiklashtirilgan, ishlab chiqarish (production) variantidan foydlaning. Bu variantni siz proyektni tamomlaganingizdan keyin foydalanuvchilarga taqdim etganingizda ishlatishingiz mumkin. Bunda, qo'shilgan, yangilangan, o'chirilgan va hkz ma'lumotlar haqida browser dev-tools console bo'limida habarlar ko'rsatilmaydi. Va ishlab chiqish variantiga qaraganda fayl hajmi kamroq bo'ladi.

<script src="https://unpkg.com/mahalliybaza/dist/mahalliybaza.min.js"></script>

<script>
  let db = new MahalliyBaza('db')
</script>

# Yoki

<script src="./mahalliybaza.min.js"></script>

<script>
  let db = new MahalliyBaza('db')
</script>

NPM bilan

npm install mahalliybaza --save
import MahalliyBaza from 'mahalliybaza'

let db = new MahalliyBaza('db')

NuxtJS bilan

npm install mahalliybaza
// plugins/mahalliybaza.js

import MahalliyBaza from 'mahalliybaza'
let db = new MahalliyBaza('db')
export default (context,inject) => {
  inject('db', db)
}
// nuxt.config.js

export default {
  ...
  plugins: [
    { src: "~/plugins/MahalliyBaza", mode: "client" }
  ],
  ...
}
<!-- pages/index.vue -->

<script>
export default {
  head: {
    title: 'Nuxt - bosh sahifa'
  },
  mounted() {
    this.$db.collection('foydalanuvchilar').add({
      id: 1,
      ism: 'Otabek',
      yosh: 19
    })
  }
}
</script>

Video Darslik

Tez kunda... Videodarslik tayyorlanmoqda.

Qisqa Kirish

To'plamga(endilikda collection) hujjat/ma'lumot(endilikda document) qo'shish bilan boshlang. Collection metodida to'plam nomini kiriting (to'plam avtomatik ravishda yaratiladi), keyin add usuli bilan qo'shmoqchi bo'lgan documentni (ma'lumotni) kiriting:

db.collection('foydalanuvchilar').add({
  id: 1,
  ism: 'Otabek',
  yosh: 19
})

Juda ham oddiy!

Collectionga ba'zi ma'lumotlarni qo'shgandan so'ng, siz get metodi bilan butun collectionni olishingiz mumkin:

db.collection('foydalanuvchilar').get().then(foydalanuvchilar => {
  console.log(foydalanuvchilar)
})

//  [
//    { id: 1, ism: 'Otabek', yosh: 19 },
//    { id: 2, ism: 'Abdulaziz', yosh: 34 }
//  ]

Ma'lumot Qo'shish

Collectionga document qo'shish

Misol uchun:

db.collection('foydalanuvchilar').add({
  id: 1,
  ism: 'Otabek',
  yosh: 19
})

Documentni yangilash

Mavjud documentni(qisman yok butunlay) yangilash mumkin. Buning uchun update metodidan foydalaning. Documentga mos kelish uchun faqat maydon va qiymat (odatda id) bo'lgan obyektni kiriting.

Diqqat! agar faqat aynan qaysidir maydonlarning o'zi yangilashi kerak bo'lsa o'sha maydonlarni o'zinigina update metodi ichiga kiriting.

db.collection('foydalanuvchilar').doc({ id: 1 }).update({
  ism: 'Abdulaziz'
})

//  [
//    { id: 1, ism: 'Abdulaziz', yosh: 19 },
//    { id: 2, ism: 'Abdulaziz', yosh: 34 }
//  ]

Diqqat: Agar siz bergan mezon bo'yicha bittadan ko'p documentlar topilsa, misol: .doc({ ism: 'Otabek' }) bo'yicha, unday holatda barcha mos tushgan (topilgan) documentlar yangilanadi.

Documentni o'rnatish (ustiga yozish)

Mavjud documentni set() metodi orqali yangilash. Bunda set() metodi ichida barcha yangilanishi kerak bo'lgan document maydonlari taqdim etilishi kerak. Chunki set() metodi databazadagi collection ichidagi documentga kiritilayotgan yangi maydonlarning o'zini saqlab, eski saqlangan maydonlarni o'chirib yuboradi. Va update() metodi kabi berilgan maydonlarning o'zinigina yangilab, yangisini kiritib, qolganlarini o'z holatida qoldirmaydi. Yani update metodiga o'xshamagan holda, documentni to'liq qayta yozadi. Shuning uchun barcha kerakli maydonlarni set metodi ichida berish kerak.

db.collection('foydalanuvchilar').doc({ id: 2 }).set({
  id: 4, 
  ism: 'Jakhongir',
  yosh: 27
})

//  [
//    { id: 1, ism: 'Otabek', yosh: 19 },
//    { id: 4, ism: 'Jakhongir', yosh: 27 }
//  ]

Diqqat: Agar siz bergan mezon bo'yicha bittadan ko'p documentlar topilsa, misol: .doc({ ism: 'Otabek' }) bo'yicha, unday holatda barcha mos tushgan (topilgan) documentlar o'rnatiladi (qayta yoziladi).

Collectionni o'rnatish (ustiga yozish)

Documentlarning to'plami bo'lgan butun collection o'rnatish metodi bilan qayta yozish orqali yangilanadi.

db.collection('foydalanuvchilar')
  .set([
    {
      id: 1,
      ism: 'Abdulakhad',
      yosh: 20
    },
    {
      id: 2, 
      ism: 'Abdurahmon',
      yosh: 14
    }
  ])

//  [
//    { id: 1, ism: 'Abdulakhad', yosh: 20 },
//    { id: 2, ism: 'Abdurahmon', yosh: 14 }
//  ]

Ma'lumotni olish

Collectionni olish

Collectiondan barcha narsalarni olish. Collection arrayda qaytariladi.

db.collection('foydalanuvchilar').get().then(foydalanuvchilar => {
  console.log(foydalanuvchilar)
})

//  [
//    { id: 1, ism: 'Ahrorxo'ja', yosh: 17 },
//    { id: 2, ism: 'Ulugbek', yosh: 18 }
//  ]

Collectionni tartiblash

Collectionni olish va uni ma'lum bir maydon bo'yicha tartiblash (ascending).

orderBy metodi ikkita argument qabul qiladi. Birinchisi, qarab tartiblanishi kerak bo'lgan maydon. Ikkinchisi, tartiblanish uslubi. Tartiblanish uslubi ikki hil: 1. asc (ascending yani yuqoriga) va desc (descending pastga) qarab tartiblash.

db.collection('foydalanuvchilar').orderBy('yosh').get().then(foydalanuvchilar => {
  console.log('foydalanuvchilar: ', foydalanuvchilar)
})

//  [
//    { id: 2, ism: 'Otabek', yosh: 19 },
//    { id: 1, ism: 'Abdulaziz', yosh: 47 }
//  ]

Collectionni olish va ma'lum bir maydon bo'yicha tartiblash (descending).

db.collection('foydalanuvchilar').orderBy('ism', 'desc').get().then(foydalanuvchilar => {
  console.log('foydalanuvchilar: ', foydalanuvchilar)
})

//  [
//    { id: 2, ism: 'Ulugbek', yosh: 18 },
//    { id: 1, ism: 'Ahrorxo'ja', yosh: 17 }
//  ]

Collectionni checklash

Collection tartiblash va uni ma'lum miqdordagi documentlar bilan checklash.

db.collection('foydalanuvchilar').orderBy('ism', 'desc').limit(1).get().then(foydalanuvchilar => {
  console.log('foydalanuvchilar: ', foydalanuvchilar)
})

//  [
//    { id: 2, ism: 'Ulugbek', yosh: 18 }
//  ]

Documentni olish

Collectiondan individual documentni olish

db.collection('foydalanuvchilar').doc({ id: 1 }).get().then(document => {
  console.log(document)
})

// { id: 1, ism: 'Abdurahmon', yosh: 14 }

Ma'lumotni o'chirish

Documentni o'chirish

Collectiondan documentni o'chirish.

db.collection('foydalanuvchilar').doc({ id: 1 }).delete()

//  [
//    { id: 2, ism: 'Abdulaziz', yosh: 34 }
//  ]

Diqqat: Agar siz bergan mezon bo'yicha bittadan ko'p documentlar topilsa, misol: .doc({ ism: 'Otabek' }) bo'yicha, unday holatda barcha mos tushgan (topilgan) documentlar o'chiriladi.

Collectionni o'chirish

Collectionni va undagi barcha documentlarni o'chirib tashlash.

db.collection('foydalanuvchilar').delete()

Ma'lumotlar bazasini o'chirish

Ma'lumotlar bazasi va undagi barcha documentlarni o'chirib tashlash.

db.delete()

Kalitlardan yuqori darajada foydalanish

Sizning documentlaringiz IndexedDB storeda key bilan saqlanadi:

IndexedDB Store - Keys

Odatda, MahalliyBaza bu keylar uchun tasodifiy, tartiblangan, yagona IDlarni yaratadi.

Ammo siz ushbu keylarning (kalitlarning) nomini boshqarishni(o'zgartirishni) xohlashingiz mumkin. Masalan siz:

  • Document qo'shganda o'z keyingizni ko'rsatishingiz.
  • Uni documentlarni tanlash (olayotganda, yangilayotganda, o'rnatayotganda yoki o'chirayotganda) ishlatishingiz
  • Va collectionni olayotganingizda barcha keylarni document maydonlari sifatida qaytarishingiz mumkin. Masalan quyidagidek.
[
  {
    key: 'kalit-2',
    data: {
      { id: 2, ism: 'Abdulaziz', yosh: 34 }
    }
  },
  {
    key: 'kalit-1',
    data: {
      { id: 1, ism: 'Adxamboy', yosh: 21 }
    }
  }
]

Siz bularning barchasini MahalliyBaza orqali qilishingiz mumkin:

Document qo'shish va o'z kalitingizni kiritish

Document ma'lumotlarini kiritgandan so'ng, ikkinchi parametr sifatida (IndexedDB store tomonidan foydalaniladigan) keyni kiriting kiriting:

db.collection('foydalanuvchilar').add({
  id: 1,
  ism: 'Otabek',
  yosh: 19
}, 'kalit-1')

Yoki, siz shunchaki set metodini ishlatishingiz mumkin:

db.collection('foydalanuvchilar').doc('kalit-1').set({
  id: 1, 
  ism: 'Abdulakhad',
  yosh: 20
})

IndexedDB da quyidagicha ko'rinadi:

IndexedDB Store - Own Keys

Kalitlarni o'z ichiga olgan collectionni o'natish (ustiga yozish)

To'liq collectionni documentlar arrayi bilan (qayta yozish orqali) o'rnating va har bir document uchun keyni kiriting. `{keys: true}" parametri kiritganingizga ishonch hosil qiling. Bu tanlangan collectionni to'liq qayta yozadi.

db.collection('foydalanuvchilar')
  .set([
    {
      id: 1,
      ism: 'Otabek',
      yosh: 19,
      _key: 'kalit-1'
    },
    {
      id: 2, 
      ism: 'Ulugbek',
      yosh: 18,
      _key: 'kalit-2'
    }
  ], { keys: true })

Documentni kalit bilan olish, yangilash, o'rnatish (qayta yozish) yoki o'chirish (document mezonlari o'rniga)

Documentni doc" metodi bilan tanlayotganda, maydon nomi va qiymati ko'rsatilgan obyekt kiritish o'rniga, shunchaki key bilan string (yoki number) kiriting:

// kalit bilan docuementni olish
db.collection('foydalanuvchilar').doc('kalit-1').get().then(document => {
  console.log(document)
})

// documentni key bilan yangilash
db.collection('foydalanuvchilar').doc('kalit-1').update({
  ism: 'Abdurahmon'
})

// documentni key bilan o'rnatish
db.collection('foydalanuvchilar').doc('kalit-2').set({
  id: 4, 
  ism: 'Adxamboy',
  yosh: 21
})

// documentni key bilan o'chirish
db.collection('foydalanuvchilar').doc('kalit-1').delete()

Collectionni olish va kalitlarni ma'lumotlar bilan birga qaytarish.

Collectionni olayotganda, shunchaki { keys: true } ni get metodi ichida yozib qo'ying:

db.collection('foydalanuvchilar').orderBy('ism', 'desc').get({ keys: true }).then(foydalanuvchilar => {
  console.log('foydalanuvchilar: ', foydalanuvchilar)
})

//  [
  //   {
  //      key: 'kalit-2',
  //      data: {
  //        { id: 1, ism: 'Abdulaziz', yosh: 34 }
  //      }
  //    },
//    {
//      key: 'kalit-1',
//      data: {
//        { id: 2, ism: 'Otabek', yosh:  19}
//      }
//    }
//  ]

Promiselar bilan ishlash

Amallar muvaffaqiyatli bo'lganida yoki xato yuz berganda, barcha operatsiyalarga promise(va'dalar)ni qo'shishingiz va biror narsa bajarishingiz mumkin.

Misol uchun databazaga yangi collection qo'shilganda, u qo'shilganligi haqida browser dev-tools console bo'limida habar chiqarishingiz mumkin.

Documentni qo'shib, keyin biron ish bajarish

db.collection('foydalanuvchilar')
  .add({
    id: 1,
    ism: 'Otabek',
    yosh: 47
  }, 'kalit-1')
  .then(response => {
    console.log("Qo'shish muavvafaqiyatli amalga oshdi.")
  })
  .catch(error => {
    console.log("Xatolik yuz berdi, qaytadan harakat qilib ko'ring.")
  })

// Siz xatoni add() metodi ichida object o'rniga
// string, number yoki boolean yozish bilan
// tekshirib ko'rishingiz mumkin.

Documentni yangilab, keyin biron bir ishni bajarish

db.collection('foydalanuvchilar')
  .doc({ id: 1 })
  .update({
    ism: 'Abdurahmon'
  })
  .then(response => {
    console.log('Yangilash muvaffaqiyatli amalga oshdi.')
  })
  .catch(error => {
    console.log("Xatolik yuz berdi, qaytadan harakat qilib ko'ring.")
  })
  
// Siz xatolikni update() metodi ichiga hech narsa
// yozmaslik orqali tekshirib ko'rishingiz mumkin.

Documentni o'rnatib (ustiga yozib), keyin biron ish bajarish

db.collection('foydalanuvchilar')
  .doc({ id: 1 })
  .set({
    id: 1, 
    ism: 'Ulugbek',
    yosh: 27
  })
  .then(response => {
    console.log("O\'rnatish muvaffaqiyatli amalga oshdi.")
  })
  .catch(error => {
    console.log("Xatolik yuz berdi, qaytadan harakat qilib ko'ring.")
  })

// Siz xatolikni set() metodi ichiga hech narsa
// yozmaslik orqali tekshirib ko'rishingiz mumkin.

Documentni o'chirib tashlab, keyin biron ish bajarish

db.collection('foydalanuvchilar')
  .doc({ id: 1 })
  .delete()
  .then(response => {
    console.log("O'chirish muvaffaqiyatli amalga oshdi.")
  })
  .catch(error => {
    console.log("Xatolik yuz berdi, qaytadan harakat qilib ko'ring.")
  })

  // Siz xatolikni doc() metodi ichiga hech narsa
  // yozmaslik orqali tekshirib ko'rishingiz mumkin

Collectionni o'chirib tashlab, keyin biron ish bajarish

db.collection('foydalanuvchilar')
  .delete()
  .then(response => {
    console.log("Collection muvaffaqiyatli o'chirildi.")
  })
  .catch(error => {
    console.log("Xatolik yuz berdi, boshqatdan harakat qilib ko'ring.")
  })
  
// Siz xatolikni collection() metodi ichiga hech narsa
// yozmaslik orqali tekshirib ko'rishingiz mumkin

Ma'lumotlar bazasini o'chirib tashlab, keyin biron ish bajarish

db.delete()
  .then(response => {
    console.log("Ma'lumotlar bazasi muvaffaqiyatli o'chirildi.")
  })
  .catch(error => {
    console.log("Xatolik yuz berdi, boshqatdan harakat qilib ko'ring.")
  })
  
// Eslatma: ba'zida ma'lumotlar bazasini o'chirib
// tashlaganingizda, sahifani qayta yuklamaguningizcha
// Chrome Dev-tools vositalarida o'zgarish bo'lmaydi

Async / Await

Bundan tashqari, barcha operatsiyalar bilan Async / Await dan foydalanishingiz mumkin

Document qo'shish (Async Await bilan)

async function qoshish() {
  await db.collection('foydalanuvchilar').add({
    id: 1,
    ism: 'Otabek',
    yosh: 19
  })
  console.log("Birinchi foydalanuvchi qo'shildi")
  await db.collection('foydalanuvchilar').add({
    id: 2,
    ism: 'Abdulaziz',
    yosh: 19
  })
  console.log("Ikkinchi foydalanuvchi qo'shildi")
}
qoshish()

Documentlarni yangilash (Async Await bilan)

async function yangilash() {
  let natija = await db.collection('foydalanuvchilar')
    .doc({ id: 1 })
    .update({
      ism: 'Abdulakhad'
    })
  console.log(natija)
}
yangilash()

Documentlarni o'rnatish (ustiga yozish, Async Await bilan)

async function ornatish() {
  let natija = await db.collection('foydalanuvchilar')
    .doc({ id: 2 })
    .set({
      id: 4, 
      ism: 'Abdurahmon',
      yosh: 14
    })
    console.log(natija)
}
ornatish()

Collectionni olish va xatolarni ushlash (Async Await bilan)

async function foydalanuvchilarniOlish() {
  try {
    let foydalanuvchilar = await db.collection('foydalanuvchilar')
      .orderBy('yosh')
      .get()
    console.log('foydalanuvchilar: ', foydalanuvchilar)
  }
  catch(error) {
    console.log('xatolik: ', error)
  }
}
foydalanuvchilarniOlish()

// Siz xatolikni collection() metodi ichiga hech narsa
// yozmaslik orqali tekshirib ko'rishingiz mumkin.

Sozlash

Consoledagi Loglarni o'chirish

Odatda, MahalliyBaza ishlab chiqish (development) variantida quyidagi kabi ajoyib loglarni browserning dev-tools console bo'limida chiqarib boradi:

Consoleda chiqadigan loglar

Siz bu loglarni db.config.debug boolean maydonigaa false qiymatini berish orqali o'zgartirishingiz mumkin.

Ma'lumotlar bazasini ishga tushirgandan so'ng va boshqa biror narsa bajarishdan oldin quyidagi kodni kiritish kerak:

import MahalliyBaza from 'mahalliybaza'
let db = new MahalliyBaza('db')

db.config.debug = false

// Buyog'iga databaza bilan biror narsa qilish kerak

Playground

Tez kunda... Playground tayyorlanish jarayonida.

Savol yoki takliflar

Ushbu MahalliyBaza nomli kutubxona borasida savollar, fikrlar, e'tirozlar, Ushbu reponing issues bo'limida qoldiring. Shuningdex, xatoliklar bo'lsa, o'zbekcha tarjimalarni yashilash bo'yicha fikrlar bo'lsa ham yuqoridagi issues bo'limida qoldiring. Albatta javob beramiz. E'tiboringiz uchun kattakon rahmat.

About

MahalliyBaza - sizga Firebase uslubidagi sodda, kuchli, foydalanuvchi brauzerida saqlanadigan, IndexedDB ma'lumotlar bazasida ishlashni osonlashtiradigan offlayn ma'lumotlar bazasini taqdim etadi.

Topics

Resources

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published