خواندن و نوشتن داده ها در وب

(اختیاری) نمونه اولیه و آزمایش با Firebase Local Emulator Suite

قبل از صحبت در مورد نحوه خواندن و نوشتن برنامه شما از Realtime Database ، بیایید مجموعه‌ای از ابزارهایی را که می‌توانید برای نمونه‌سازی و آزمایش عملکرد Realtime Database استفاده کنید، معرفی می‌کنیم: Firebase Local Emulator Suite . اگر در حال آزمایش مدل های مختلف داده، بهینه سازی قوانین امنیتی خود هستید یا برای یافتن مقرون به صرفه ترین راه برای تعامل با back-end تلاش می کنید، اینکه بتوانید به صورت محلی بدون استقرار سرویس های زنده کار کنید می تواند ایده خوبی باشد.

شبیه ساز Realtime Database بخشی از Local Emulator Suite است که به برنامه شما امکان می دهد با محتوای پایگاه داده شبیه سازی شده و پیکربندی شما و همچنین به صورت اختیاری منابع پروژه شبیه سازی شده شما (توابع، سایر پایگاه های داده و قوانین امنیتی) تعامل داشته باشد.

استفاده از شبیه ساز Realtime Database فقط شامل چند مرحله است:

  1. افزودن یک خط کد به پیکربندی آزمایشی برنامه برای اتصال به شبیه ساز.
  2. از ریشه دایرکتوری پروژه محلی خود، firebase emulators:start اجرا کنید.
  3. برقراری تماس از کد نمونه اولیه برنامه خود با استفاده از یک SDK پلتفرم Realtime Database به طور معمول، یا با استفاده از Realtime Database REST API.

یک بررسی دقیق شامل Realtime Database و Cloud Functions در دسترس است. همچنین باید نگاهی به معرفی Local Emulator Suite داشته باشید.

یک مرجع پایگاه داده دریافت کنید

برای خواندن یا نوشتن داده ها از پایگاه داده، به یک نمونه از firebase.database.Reference نیاز دارید:

Web

import { getDatabase } from "firebase/database";

const database = getDatabase();
rtdb_get_reference.js

Web 

var database = firebase.database();
index.js

داده ها را بنویسید

این سند اصول بازیابی داده ها و نحوه سفارش و فیلتر کردن داده های Firebase را پوشش می دهد.

داده های Firebase با پیوست کردن یک شنونده ناهمزمان به firebase.database.Reference بازیابی می شود. شنونده یک بار برای وضعیت اولیه داده ها و بار دیگر هر زمان که داده ها تغییر کند فعال می شود.

عملیات نوشتن اولیه

برای عملیات نوشتن اولیه، می‌توانید از set() برای ذخیره داده‌ها در یک مرجع مشخص استفاده کنید و هر داده موجود در آن مسیر را جایگزین کنید. به عنوان مثال یک برنامه وبلاگ نویسی اجتماعی ممکن است یک کاربر با set() به صورت زیر اضافه کند:

Web

import { getDatabase, ref, set } from "firebase/database";

function writeUserData(userId, name, email, imageUrl) {
  const db = getDatabase();
  set(ref(db, 'users/' + userId), {
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}
rtdb_write_new_user.js

Web

function writeUserData(userId, name, email, imageUrl) {
  firebase.database().ref('users/' + userId).set({
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}
read-and-write.js

با استفاده از set() داده ها را در مکان مشخص شده، از جمله گره های فرزند، بازنویسی می کند.

داده ها را بخوانید

به رویدادهای ارزشی گوش دهید

برای خواندن داده ها در یک مسیر و گوش دادن به تغییرات، از onValue() برای مشاهده رویدادها استفاده کنید. شما می توانید از این رویداد برای خواندن عکس های فوری استاتیک از مطالب در یک مسیر مشخص استفاده کنید، همانطور که در زمان رویداد وجود داشته است. این روش یک بار در زمانی که شنونده متصل می شود و دوباره هر بار که داده ها، از جمله کودکان، تغییر می کنند، فعال می شود. پاسخ تماس رویداد یک عکس فوری حاوی تمام داده‌ها در آن مکان، از جمله داده‌های فرزند ارسال می‌شود. اگر داده ای وجود نداشته باشد، عکس فوری با فراخوانی exists() exizes false و زمانی که val() را بر روی آن فراخوانی می کنید، null خواهد شد.

مثال زیر یک برنامه وبلاگ نویسی اجتماعی را نشان می دهد که تعداد ستاره یک پست را از پایگاه داده بازیابی می کند:

Web

import { getDatabase, ref, onValue } from "firebase/database";

const db = getDatabase();
const starCountRef = ref(db, 'posts/' + postId + '/starCount');
onValue(starCountRef, (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});
rtdb_social_listen_star_count.js

Web

var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value', (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});
read-and-write.js

شنونده یک snapshot دریافت می کند که حاوی داده ها در مکان مشخص شده در پایگاه داده در زمان رویداد است. شما می توانید داده های موجود در snapshot را با متد val() بازیابی کنید.

یک بار داده ها را بخوانید

یک بار داده ها را با get() بخوانید

SDK برای مدیریت تعاملات با سرورهای پایگاه داده، چه برنامه شما آنلاین یا آفلاین باشد، طراحی شده است.

به طور کلی، باید از تکنیک‌های رویداد ارزشی که در بالا توضیح داده شد برای خواندن داده‌ها استفاده کنید تا از به‌روزرسانی‌های داده‌ها از باطن مطلع شوید. تکنیک‌های شنونده استفاده و صورت‌حساب شما را کاهش می‌دهند، و بهینه‌سازی شده‌اند تا بهترین تجربه را هنگام آنلاین شدن و آفلاین شدن کاربرانتان ارائه دهند.

اگر فقط یک بار به داده ها نیاز دارید، می توانید از get() برای گرفتن عکس فوری از داده ها از پایگاه داده استفاده کنید. اگر به هر دلیلی get() نتواند مقدار سرور را برگرداند، کلاینت حافظه نهان محلی ذخیره‌سازی را بررسی می‌کند و در صورتی که مقدار هنوز پیدا نشد، خطایی را برمی‌گرداند.

استفاده غیرضروری از get() می تواند استفاده از پهنای باند را افزایش دهد و منجر به از دست دادن عملکرد شود، که می توان با استفاده از یک شنونده بلادرنگ همانطور که در بالا نشان داده شده است، جلوگیری کرد.

Web

import { getDatabase, ref, child, get } from "firebase/database";

const dbRef = ref(getDatabase());
get(child(dbRef, `users/${userId}`)).then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});
rtdb_read_once_get.js

Web 

const dbRef = firebase.database().ref();
dbRef.child("users").child(userId).get().then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});
read-and-write.js

یک بار داده ها را با ناظر بخوانید

در برخی موارد ممکن است بخواهید به جای بررسی مقدار به روز شده در سرور، مقدار از حافظه نهان محلی بلافاصله برگردانده شود. در این موارد می‌توانید once() برای دریافت داده‌ها از کش دیسک محلی بلافاصله استفاده کنید.

این برای داده‌هایی مفید است که فقط یک بار باید بارگیری شوند و انتظار نمی‌رود مرتباً تغییر کنند یا به گوش دادن فعال نیاز داشته باشند. به عنوان مثال، برنامه وبلاگ نویسی در مثال های قبلی از این روش برای بارگیری نمایه کاربر هنگام شروع نوشتن یک پست جدید استفاده می کند:

Web

import { getDatabase, ref, onValue } from "firebase/database";
import { getAuth } from "firebase/auth";

const db = getDatabase();
const auth = getAuth();

const userId = auth.currentUser.uid;
return onValue(ref(db, '/users/' + userId), (snapshot) => {
  const username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
}, {
  onlyOnce: true
});
rtdb_social_single_value_read.js

Web 

var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/users/' + userId).once('value').then((snapshot) => {
  var username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
});
read-and-write.js

به روز رسانی یا حذف داده ها

فیلدهای خاص را به روز کنید

برای نوشتن همزمان روی فرزندان خاص یک گره بدون بازنویسی سایر گره های فرزند، از متد update() استفاده کنید.

هنگام فراخوانی update() می توانید مقادیر فرزند سطح پایین تر را با تعیین مسیری برای کلید به روز کنید. اگر داده‌ها در مکان‌های مختلف ذخیره می‌شوند تا مقیاس بهتری داشته باشند، می‌توانید تمام نمونه‌های آن داده‌ها را با استفاده از خروجی فن‌آوری داده به‌روزرسانی کنید.

به عنوان مثال، یک برنامه وبلاگ نویسی اجتماعی ممکن است یک پست ایجاد کند و به طور همزمان آن را به فید فعالیت اخیر و فید فعالیت کاربر پست کننده با استفاده از کدی مانند این به روز کند:

Web

import { getDatabase, ref, child, push, update } from "firebase/database";

function writeNewPost(uid, username, picture, title, body) {
  const db = getDatabase();

  // A post entry.
  const postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  const newPostKey = push(child(ref(db), 'posts')).key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  const updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return update(ref(db), updates);
}
rtdb_social_write_fan_out.js

Web

function writeNewPost(uid, username, picture, title, body) {
  // A post entry.
  var postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  var newPostKey = firebase.database().ref().child('posts').push().key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  var updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return firebase.database().ref().update(updates);
}
read-and-write.js

این مثال از push() برای ایجاد یک پست در گره حاوی پست برای همه کاربران در /posts/$postid استفاده می کند و همزمان کلید را بازیابی می کند. سپس می‌توان از کلید برای ایجاد ورودی دوم در پست‌های کاربر در /user-posts/$userid/$postid استفاده کرد.

با استفاده از این مسیرها، می‌توانید به‌روزرسانی‌های همزمان چندین مکان در درخت JSON را با یک فراخوانی برای update() انجام دهید، مانند اینکه چگونه این مثال پست جدید را در هر دو مکان ایجاد می‌کند. به‌روزرسانی‌های همزمان ساخته شده به این روش اتمی هستند: یا همه به‌روزرسانی‌ها موفق می‌شوند یا همه به‌روزرسانی‌ها با شکست مواجه می‌شوند.

یک پاسخ به تماس تکمیلی اضافه کنید

اگر می‌خواهید بدانید چه زمانی داده‌های شما تعهد شده است، می‌توانید یک تماس تکمیلی اضافه کنید. هر دو set() و update() یک فراخوان تکمیل اختیاری می گیرند که زمانی فراخوانی می شود که نوشتن به پایگاه داده متعهد شده باشد. اگر تماس ناموفق بود، به تماس با یک شی خطا ارسال می شود که نشان می دهد چرا شکست رخ داده است.

Web

import { getDatabase, ref, set } from "firebase/database";

const db = getDatabase();
set(ref(db, 'users/' + userId), {
  username: name,
  email: email,
  profile_picture : imageUrl
})
.then(() => {
  // Data saved successfully!
})
.catch((error) => {
  // The write failed...
});
rtdb_social_completion_callback.js

Web 

firebase.database().ref('users/' + userId).set({
  username: name,
  email: email,
  profile_picture : imageUrl
}, (error) => {
  if (error) {
    // The write failed...
  } else {
    // Data saved successfully!
  }
});
read-and-write.js

داده ها را حذف کنید

ساده ترین راه برای حذف داده ها فراخوانی remove() بر روی مرجعی به مکان آن داده است.

همچنین می توانید با تعیین null به عنوان مقدار برای عملیات نوشتن دیگری مانند set() یا update() حذف کنید. می‌توانید از این تکنیک با update() برای حذف چند فرزند در یک تماس API استفاده کنید.

یک Promise دریافت کنید

برای اینکه بدانید چه زمانی داده های شما به سرور Firebase Realtime Database متعهد شده است، می توانید از Promise استفاده کنید. هر دو set() و update() می‌توانند یک Promise برگردانند که می‌توانید از آن برای اطلاع از اینکه نوشتن به پایگاه داده متعهد است استفاده کنید.

شنوندگان را جدا کنید

با فراخوانی متد off() در مرجع پایگاه داده Firebase، تماس‌های برگشتی حذف می‌شوند.

شما می توانید یک شنونده را با ارسال آن به عنوان پارامتر به off() حذف کنید. فراخوانی off() در مکان بدون آرگومان، تمام شنوندگان را در آن مکان حذف می کند.

فراخوانی off() در شنونده والد به طور خودکار شنوندگان ثبت شده در گره های فرزند آن را حذف نمی کند. off() همچنین باید در هر شنونده کودک فراخوانی شود تا پاسخ تماس را حذف کند.

ذخیره داده ها به عنوان تراکنش

هنگام کار با داده هایی که ممکن است توسط تغییرات همزمان خراب شوند، مانند شمارنده های افزایشی، می توانید از عملیات تراکنش استفاده کنید. می توانید به این عملیات یک عملکرد به روز رسانی و یک پاسخ تماس تکمیل اختیاری بدهید. تابع به روز رسانی وضعیت فعلی داده ها را به عنوان آرگومان می گیرد و حالت دلخواه جدیدی را که می خواهید بنویسید برمی گرداند. اگر مشتری دیگری قبل از اینکه مقدار جدید با موفقیت نوشته شود، در مکان بنویسد، تابع به روز رسانی شما دوباره با مقدار فعلی جدید فراخوانی می شود و نوشتن مجدداً امتحان می شود.

به عنوان مثال، در مثال برنامه وبلاگ نویسی اجتماعی، می‌توانید به کاربران اجازه دهید پست‌ها را ستاره‌دار و از بین ببرند و تعداد ستاره‌هایی که یک پست دریافت کرده را به شرح زیر پیگیری کنند:

Web

import { getDatabase, ref, runTransaction } from "firebase/database";

function toggleStar(uid) {
  const db = getDatabase();
  const postRef = ref(db, '/posts/foo-bar-123');

  runTransaction(postRef, (post) => {
    if (post) {
      if (post.stars && post.stars[uid]) {
        post.starCount--;
        post.stars[uid] = null;
      } else {
        post.starCount++;
        if (!post.stars) {
          post.stars = {};
        }
        post.stars[uid] = true;
      }
    }
    return post;
  });
}
rtdb_social_star_transaction.js

Web

function toggleStar(postRef, uid) {
  postRef.transaction((post) => {
    if (post) {
      if (post.stars && post.stars[uid]) {
        post.starCount--;
        post.stars[uid] = null;
      } else {
        post.starCount++;
        if (!post.stars) {
          post.stars = {};
        }
        post.stars[uid] = true;
      }
    }
    return post;
  });
}
read-and-write.js

استفاده از تراکنش از نادرست بودن تعداد ستاره‌ها جلوگیری می‌کند، اگر چندین کاربر به طور همزمان یک پست را ستاره‌دار کنند یا مشتری داده‌های قدیمی داشته باشد. اگر تراکنش رد شود، سرور مقدار فعلی را به کلاینت برمی گرداند، که تراکنش را دوباره با مقدار به روز شده اجرا می کند. این کار تا زمانی که معامله پذیرفته شود یا تراکنش را لغو کنید تکرار می شود.

افزایش سمت سرور اتمی

در مورد استفاده بالا، ما دو مقدار را برای پایگاه داده می نویسیم: شناسه کاربری که پست را ستاره/برداشته ستاره می کند، و تعداد ستاره افزایش یافته. اگر از قبل می‌دانیم که کاربر پست را ستاره‌دار می‌کند، می‌توانیم به جای تراکنش از عملیات افزایش اتمی استفاده کنیم.

Web

function addStar(uid, key) {
  import { getDatabase, increment, ref, update } from "firebase/database";
  const dbRef = ref(getDatabase());

  const updates = {};
  updates[`posts/${key}/stars/${uid}`] = true;
  updates[`posts/${key}/starCount`] = increment(1);
  updates[`user-posts/${key}/stars/${uid}`] = true;
  updates[`user-posts/${key}/starCount`] = increment(1);
  update(dbRef, updates);
}
rtdb_social_star_increment.js

Web

function addStar(uid, key) {
  const updates = {};
  updates[`posts/${key}/stars/${uid}`] = true;
  updates[`posts/${key}/starCount`] = firebase.database.ServerValue.increment(1);
  updates[`user-posts/${key}/stars/${uid}`] = true;
  updates[`user-posts/${key}/starCount`] = firebase.database.ServerValue.increment(1);
  firebase.database().ref().update(updates);
}
read-and-write.js

این کد از عملیات تراکنش استفاده نمی‌کند، بنابراین در صورت بروز تضاد به‌روزرسانی، به‌طور خودکار دوباره اجرا نمی‌شود. با این حال، از آنجایی که عملیات افزایش مستقیماً در سرور پایگاه داده انجام می شود، هیچ احتمالی برای تداخل وجود ندارد.

اگر می‌خواهید تضادهای خاص برنامه را شناسایی و رد کنید، مانند ستاره‌دار شدن پستی که قبلاً توسط کاربر ستاره‌دار شده است، باید قوانین امنیتی سفارشی را برای آن مورد استفاده بنویسید.

با داده ها به صورت آفلاین کار کنید

اگر یک سرویس گیرنده اتصال شبکه خود را از دست بدهد، برنامه شما به درستی به کار خود ادامه می دهد.

هر کلاینت متصل به پایگاه داده Firebase، نسخه داخلی خود را از هر داده فعال نگهداری می کند. وقتی داده نوشته می شود، ابتدا در این نسخه محلی نوشته می شود. سپس مشتری Firebase آن داده ها را با سرورهای پایگاه داده راه دور و با سایر مشتریان بر اساس "بهترین تلاش" همگام سازی می کند.

در نتیجه، همه نوشته‌ها در پایگاه داده، بلافاصله رویدادهای محلی را راه‌اندازی می‌کنند، قبل از اینکه داده‌ای روی سرور نوشته شود. این بدان معناست که برنامه شما بدون توجه به تأخیر شبکه یا اتصال، پاسخگو باقی می ماند.

پس از برقراری مجدد اتصال، برنامه شما مجموعه مناسبی از رویدادها را دریافت می کند تا کلاینت بدون نیاز به نوشتن کد سفارشی با وضعیت سرور فعلی همگام شود.

در مورد رفتار آفلاین بیشتر در مورد قابلیت های آنلاین و آفلاین بیشتر بدانید ..

مراحل بعدی