كيفية تحويل Google Sheets إلى REST API وربطها بتطبيق React

مقدمة: لماذا استخدام Google Sheets كواجهة REST API؟

إذا كنت تبحث عن طريقة سريعة ومنخفضة التكلفة لتخزين بيانات النماذج القادمة من تطبيق React، فإن استخدام Google Sheets كواجهة REST API يُعد حلاً عملياً ومناسباً للمشاريع الصغيرة، والنماذج التجريبية، وصفحات الهبوط، وأدوات جمع البيانات البسيطة. الفكرة هنا هي تحويل جدول بيانات عادي إلى نقطة استقبال للطلبات بحيث تتمكن من إرسال بيانات المستخدم مباشرة من الواجهة الأمامية دون الحاجة إلى بناء خادم خلفي كامل.

في هذا الدليل، ستتعلم خطوة بخطوة كيفية إنشاء نموذج في React، ثم ربطه بجدول Google Sheets باستخدام خدمة وسيطة مثل sheet.best، وأخيراً إرسال البيانات عبر طلب POST بطريقة واضحة وسهلة التطبيق.

إنشاء مشروع React من البداية

لبداية مرتبة، أنشئ تطبيق React جديداً باستخدام أداة create-react-app. هذه الخطوة توفّر لك هيكل مشروع جاهزاً للعمل دون إعدادات معقدة.

نفّذ الأمر التالي داخل الطرفية:

npx create-react-app react-googlesheets

تثبيت Semantic UI لتصميم النموذج

مكتبة Semantic UI تساعدك على بناء واجهات أنيقة ومتجاوبة بسرعة، وتوفر عناصر جاهزة مثل الأزرار، وحقول الإدخال، والحاويات، والعناوين.

لتثبيت الحزم المطلوبة، استخدم الأمر التالي:

npm install semantic-ui-react semantic-ui-css

بعد اكتمال التثبيت، افتح ملف index.js وأضف سطر الاستيراد التالي في الأعلى:

import 'semantic-ui-css/semantic.min.css'

بعد ذلك، شغّل المشروع عبر الأمر:

npm start

إنشاء نموذج إدخال البيانات في React

سنقوم الآن بإنشاء نموذج بسيط يجمع أربع قيم من المستخدم: الاسم، والعمر، والراتب، والهواية. في هذه المرحلة، الهدف هو تجهيز واجهة الإدخال فقط قبل ربطها بعملية الإرسال.

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';

export default class App extends Component {
  render() {
    return (
      <Container fluid className="container">
        <Header as='h2'>React Google Sheets!</Header>
        <Form className="form">
          <Form.Field>
            <label>Name</label>
            <input placeholder='Enter your name' />
          </Form.Field>
          <Form.Field>
            <label>Age</label>
            <input placeholder='Enter your age' />
          </Form.Field>
          <Form.Field>
            <label>Salary</label>
            <input placeholder='Enter your salary' />
          </Form.Field>
          <Form.Field>
            <label>Hobby</label>
            <input placeholder='Enter your hobby' />
          </Form.Field>
          <Button color="blue" type='submit'>Submit</Button>
        </Form>
      </Container>
    )
  }
}

وأضف التنسيقات التالية داخل ملف App.css:

.form {
  width: 500px;
}

.container {
  padding: 20px;
}

بهذا ستحصل على واجهة نموذج بسيطة وواضحة يمكن البناء عليها لاحقاً.

إضافة الحالة state والتعامل مع الحقول

بعد الانتهاء من الواجهة، ننتقل إلى الجزء الوظيفي. نحتاج إلى تخزين قيم الحقول داخل state، ثم تحديثها تلقائياً كلما أدخل المستخدم بيانات جديدة. كما سنجهّز دالة لمعالجة الإرسال.

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '',
      age: '',
      salary: '',
      hobby: ''
    }
  }

  changeHandler = (e) => {
    this.setState({ [e.target.name]: e.target.value })
  }

  submitHandler = e => {
    e.preventDefault();
    console.log(this.state);
  }

  render() {
    const { name, age, salary, hobby } = this.state;

    return (
      <Container fluid className="container">
        <Header as='h2'>React Google Sheets!</Header>
        <Form className="form" onSubmit={this.submitHandler}>
          <Form.Field>
            <label>Name</label>
            <input placeholder='Enter your name' type="text" name="name" value={name} onChange={this.changeHandler} />
          </Form.Field>
          <Form.Field>
            <label>Age</label>
            <input placeholder='Enter your age' type="number" name="age" value={age} onChange={this.changeHandler} />
          </Form.Field>
          <Form.Field>
            <label>Salary</label>
            <input placeholder='Enter your salary' type="number" name="salary" value={salary} onChange={this.changeHandler} />
          </Form.Field>
          <Form.Field>
            <label>Hobby</label>
            <input placeholder='Enter your hobby' type="text" name="hobby" value={hobby} onChange={this.changeHandler} />
          </Form.Field>
          <Button color="blue" type='submit'>Submit</Button>
        </Form>
      </Container>
    )
  }
}

ما الذي يحدث في هذا الكود؟

• تم إنشاء أربع خصائص داخل state: name وage وsalary وhobby.
• دالة changeHandler تتولى تحديث القيمة المناسبة اعتماداً على خاصية name في كل حقل.
• دالة submitHandler تمنع إعادة تحميل الصفحة باستخدام e.preventDefault()، ثم تعرض البيانات في وحدة التحكم.
• تم ربط النموذج بالحدث onSubmit وربط كل حقل بالحدث onChange.

بعد تجربة النموذج وتعبئة الحقول، ستظهر القيم التي أدخلها المستخدم داخل وحدة التحكم console.

تحويل Google Sheets إلى واجهة REST API

الآن نصل إلى الجزء الأهم: استقبال البيانات داخل Google Sheets كما لو أنك تتعامل مع واجهة برمجية حقيقية. لتحقيق ذلك، سنستخدم خدمة sheet.best التي تقوم بربط جدول البيانات بنقطة API endpoint جاهزة.

الخطوة 1: إنشاء جدول بيانات جديد

1. افتح Google Sheets.
2. اختر File ثم New ثم Spreadsheet.
3. سمِّ الجدول بالاسم الذي تريده ثم احفظه.

الخطوة 2: تعديل صلاحيات المشاركة

اضغط على زر المشاركة في أعلى الشاشة، ثم عدّل الإذن بحيث يصبح الجدول قابلاً للوصول بالطريقة التي تسمح للخدمة الوسيطة بالاتصال به.

الخطوة 3: ربط الجدول مع خدمة sheet.best

انسخ رابط الجدول، ثم انتقل إلى موقع sheet.best وأنشئ حساباً مجانياً. بعد ذلك:

1. أنشئ اتصالاً جديداً New Connection.
2. ألصق رابط Google Sheets في حقل Connection URL.
3. اضغط على Connect.

بعد إتمام الربط، ستنتقل إلى صفحة الاتصالات. افتح تفاصيل الاتصال الجديد ثم انسخ CONNECTION URL، لأنه سيكون نقطة النهاية التي سنرسل إليها بيانات النموذج.

تثبيت Axios لإرسال طلبات POST

لإرسال البيانات من تطبيق React إلى الجدول، سنستخدم مكتبة Axios. وهي مكتبة مشهورة لإجراء طلبات HTTP بشكل مبسط.

ثبّت المكتبة عبر الأمر التالي:

npm install axios

ثم قم باستيرادها داخل الملف الذي يحتوي على مكوّن التطبيق.

إرسال البيانات من React إلى Google Sheets

الآن حدّث دالة submitHandler لتنفّذ طلب POST إلى رابط الاتصال الذي نسخته من sheet.best.

submitHandler = e => {
  e.preventDefault();
  console.log(this.state);
  axios.post('url', this.state)
    .then(response => {
      console.log(response);
    })
}

بعد ذلك، استبدل كلمة url برابط الاتصال الفعلي:

submitHandler = e => {
  e.preventDefault();
  console.log(this.state);
  axios.post('https://sheet.best/api/sheets/a6e67deb-2f00-43c3-89d3-b331341d53ed', this.state)
    .then(response => {
      console.log(response);
    })
}

ملاحظة مهمة حول أسماء الأعمدة

قبل تجربة الإرسال، افتح جدول Google Sheets وأضف أسماء الأعمدة في الصف الأول بالشكل التالي تماماً:

• name
• age
• salary
• hobby

يجب أن تتطابق هذه الأسماء حرفياً مع المفاتيح الموجودة داخل state، لأن الربط يعتمد على تطابق الأسماء مع حساسية حالة الأحرف case-sensitive.

اختبار النتيجة النهائية

بعد تشغيل التطبيق وتعبئة الحقول، اضغط على زر الإرسال. إذا تم إعداد كل شيء بشكل صحيح، فستجد البيانات تُضاف إلى جدول Google Sheets سطراً بعد سطر.

فوائد هذه الطريقة وحدودها

متى تكون مناسبة؟

• عند بناء نموذج تواصل أو تسجيل بسيط.
• في النماذج الأولية Prototypes والتجارب السريعة.
• عندما لا ترغب في إعداد خادم خلفي في المراحل الأولى.
• لجمع البيانات في مشاريع صغيرة أو داخلية.

ما القيود التي يجب الانتباه لها؟

• هذا الحل ليس بديلاً كاملاً عن قاعدة بيانات احترافية.
• مستوى الأمان والتحكم أقل من الحلول الخلفية التقليدية.
• قد لا يكون مناسباً للتطبيقات الكبيرة أو الحساسة.
• الاعتماد على خدمة وسيطة يعني أن استقرار التكامل مرتبط بها.

أفضل ممارسات لتحسين الجودة التقنية

• أضف تحققاً من صحة الحقول validation قبل الإرسال.
• اعرض رسالة نجاح أو فشل للمستخدم بدلاً من الاكتفاء بـ console.log().
• امنع الإرسال المتكرر بتعطيل الزر مؤقتاً أثناء الطلب.
• فكّر في استخدام متغيرات البيئة environment variables لإخفاء الروابط الحساسة نسبياً.
• إذا تطور المشروع، انقل منطق الحفظ إلى خادم خلفي فعلي أو خدمة backend مناسبة.

الخلاصة التقنية

تحويل Google Sheets إلى واجهة REST API يُعد حلاً ذكياً وسريعاً للمشاريع الصغيرة التي تحتاج إلى حفظ البيانات دون تعقيد بناء خادم خلفي. ومع استخدام React وAxios وخدمة مثل sheet.best، يمكنك إنشاء دورة إدخال بيانات كاملة خلال وقت قصير. تقنياً، هذه الطريقة ممتازة للانطلاق السريع وإثبات الفكرة، لكنها ليست الخيار النهائي للتطبيقات التي تتطلب أماناً عالياً أو قابلية توسع كبيرة.