ارسال اطلاعات به Firebase

Sending Information to Firebase

تا این قسمت به خوبی پیش آمده ایم و حالا یک پایگاه داده firebase داریم. برای تمرین کار با درخواست های AJAX و HTTP باید فرم ساده ای را ایجاد کنیم تا بتوانیم اطلاعات درون آن را از طریق یک درخواست HTTP به firebase ارسال کنیم. بنابراین به فایل App.vue رفته و می گوییم:

<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
  <h1>Http</h1>
  <div class="form-group">
    <label>Username</label>
    <input class="form-control" type="text" v-model="user.username" />
  </div>
  <div class="form-group">
    <label>Mail</label>
    <input class="form-control" type="text" v-model="user.email" />
  </div>
  <button class="btn btn-primary" @click="submit">Submit</button>
</div>

یعنی دو فیلد نام کاربر و ایمیل کاربر را دارم و با v-model آن ها را به خصوصیت مربوطه شان متصل کرده ام (البته هنوز این خصوصیات را تعریف نکرده ایم). سپس دکمه submit را داریم که با کلیک روی آن متدی به نام submit اجرا خواهد شد. حالا به قسمت script می رویم تا خصوصیت مورد نظر را تعریف کنیم:

<script>
export default {
  data() {
    return {
      user: {
        username: "",
        email: ""
      }
    };
  },
  methods: {
    submit() {
      console.log(this.user);
    }
  }
};
</script>

من در ابتدا user را به شکل یک شیء تعریف کرده ام و درون آن دو خصوصیت username و email را گذاشته ام (همانطور که در template آن را به V-model متصل کرده بودیم). در نهایت متد submit نیز فقط مقدار تایپ شده توسط ما را درون کنسول مرورگر چاپ می کند. حالا به مرورگر می رویم و این کدها را تست می کنیم تا مطمئن شویم فرم به درستی کار می کند. اگر فرم را پر کرده و پس از ثبت اطلاعات را درون کنسول دیدید، یعنی همه چیز درست است. توجه کنید که فعلا فقط فرم را تست کردیم و هنوز درخواست HTTP را ارسال نکرده ایم.

برای ارسال درخواست HTTP به سرور firebase خود باید از vue-resource استفاده کنیم. از آنجایی که در جلسات قبل vue-resource را به صورت سراسری در main.js ثبت کردیم، تمام اشیاء Vue ما به خصوصیات آن دسترسی خواهند داشت. یکی از این خصوصیت http$ است:

<script>
export default {
  data() {
    return {
      user: {
        username: "",
        email: ""
      }
    };
  },
  methods: {
    submit() {
      this.$http.post();
    }
  }
};
</script>

خصوصیت http$ به صورت پیش فرض در Vue وجود ندارد بلکه به خاطر پکیج vue-resource قابلیت استفاده از آن را داریم. یکی از متدهای درون http$ متدی به نام post است که برای ارسال درخواست های post مورد استفاده قرار می گیرد و ما می توانیم داده های خود را با آن به firebase ارسال کنیم. اولین پارامتری که باید به post بدهیم، همان آدرس پایگاه داده ما است:

submit() {
  this.$http.post("https://vuejs-http-roxoir.firebaseio.com/");
}

اما این به تنهایی کافی نیست. در firebase باید در انتهای این URL یک نام انتخاب کنیم که data node ما می شود (به زبان ساده یک شیء که اطلاعات ارسالی درون آن ذخیره شود). انتخاب این نام به سلیقه شما است اما حتما باید پسوند json را در آخر آن قرار دهید:

submit() {
  this.$http.post("https://vuejs-http-roxoir.firebaseio.com/data.json");
}

همانطور که می بینید، من نام data را انتخاب کرده ام. آرگومان دوم ما باید اطلاعاتی باشد که قرار است به firebase ارسال شود (همان اطلاعات کاربر) بنابراین:

submit() {
  this.$http.post("https://vuejs-http-roxoir.firebaseio.com/data.json", this.user);
}

پکیج vue-resource از promise ها استفاده می کند (promise ها یک API جدید تر در جاوا اسکریپت برای ارسال درخواست های HTTP هستند و ربطی به Vue ندارند) بنابراین برای دریافت پاسخ firebase از then استفاده می کنیم:

methods: {
  submit() {
    this.$http
      .post("https://vuejs-http-roxoir.firebaseio.com/data.json", this.user)
      .then(
        response => {
          console.log(response);
        },
        error => {
          console.log(error);
        }
      );
  }
}

من then را اضافه کرده ام که در آرگومان اول خود پاسخ سرور (response) و در آرگومان دوم خطاهای اتفاق افتاده (error) را به ما می دهد. ما باید مثل کد بالا این پاسخ ها و خطاها را به صورت یک تابع دریافت کنیم (من از توابع arrow function استفاده کرده ام اما می توانید از توابع عادی نیز استفاده کنید) و هر کاری با داده ها خواستیم انجام بدهیم. حالا کدها را ذخیره کرده و به مرورگر بروید. با پر کردن فرم و ارسال آن باید در قسمت کنسول مرورگر کد زیر را ببینید:

همانطور که می بینید در قسمت body خصوصیتی به نام name داریم که در همان کلید ما در پایگاه داده است (در ادامه متوجه می شوید) و ok روی true و Status روی 200 است بنابراین درخواست ما موفقیت آمیز بوده است. status: 200 یکی از کدهای اعلام وضعیت در درخواست های HTTP است و اگر با این کدها آشنایی ندارید پیشنهاد می دهم مقاله «آشنایی با Status Codeهای پروتکل HTTP» را مطالعه کنید.

حالا اگر به داشبورد خود در firebase برویم چنین چیزی را می بینیم:

داده های ما با موفقیت وارد firebase شده اند

اگر یادتان باشد گفتم باید نامی را برای data node خود انتخاب کنیم و من نام data را برایش انتخاب کردم. حالا می توانید ببینید که این data درون Firebase ایجاد شده است. همچنین خصوصیت name که در body بود نیز در همین قسمت قابل مشاهده است و درون آن داده های خودمان را داریم. این name یک آیدی یکتا است که شما بدانید داده هایتان در کجا قرار دارند. به طور مثال اگر یک بار دیگر فرم برنامه را ثبت کنم و دوباره به پایگاه داده بروم چنین چیزی را می بینم:

رشته های طولانی همان id های ما هستند که در MySQL به صورت عددی بودند

یعنی در data ممکن است داده های زیادی داشته باشیم و برای اینکه این داده ها در هم ادغام نشوند name را داریم که آیدی خاص آن داده ها است و توسط firebase و به صورت خودکار ایجاد می شود. ساختار firebase بر اساس پایگاه داده MongoDB است بنابراین اگر MongoDB را دیده باشید هیچ کدام از این مسائل برایتان جدید نخواهد بود.