كيفية إرسال نموذج HTML إلى أوراق Google ... بدون نماذج Google

نماذج Google هي خدمة رائعة. نماذج سهلة ورائعة مع نتائج مخزنة في أوراق Google. ولكن ماذا لو كنت لا تريد أن يبدو النموذج الخاص بك مثل نموذج Google؟ كيف يمكنك إنشاء نموذج HTML الخاص بك وتسجيل الاستجابات في أوراق Google؟

الجواب صعب بشكل مدهش. قد يظن المرء أن Google Forms سيكون لها واجهة برمجة تطبيقات لتلقي طلبات AJAX ، لكن ، للأسف ، ليست هذه هي الحالة. لذلك سنقوم بقطع وسيط نماذج Google وإرسال طلبات AJAX الخاصة بنا مباشرةً إلى صفحات Google.

إعداد ورقة جوجل

نظرًا لأننا نتخطى نماذج Google ، فتوجه مباشرة إلى جداول بيانات Google وقم بإنشاء جدول بيانات جديد. الشيء الوحيد الذي يتعين علينا القيام به لجدول البيانات نفسه هو تعيين أسماء الأعمدة لكل حقل نموذج سنقوم بجمعه.

ضع أسماء كل حقل نموذج في الصف 1. الترتيب غير مهم ، لكن يجب أن يتطابق اسم الخلية في جدول البيانات مع اسم إدخال النموذج. إنه حساس لحالة الأحرف ، لذا اختر أسماءك بعناية!

تكوين البرنامج النصي Google

الآن وقد قمنا بإعداد ورقة Google الخاصة بنا مع حقول النماذج الخاصة بنا ، فقد حان الوقت لكتابة البرنامج النصي الذي سيتيح لنا إرسال بيانات النماذج الخاصة بنا إليها. من جدول البيانات الذي أنشأناه للتو ، انتقل إلى قائمة "الأدوات" وحدد "Script Editor" من القائمة المنسدلة.

سيؤدي هذا إلى فتح Google Script جديد سيبدو كالتالي:

تخلص من هذه الوظيفة عديمة الفائدة. لدينا منطقتنا لهذه الوظيفة!

احذف تلك الوظيفة المسماة بطريقة إبداعية وانسخ / الصق الصورة التالية:

سيقوم البرنامج النصي أعلاه بتكوين ورقة Google الخاصة بك للتعامل مع طلب GET (دالة doGet ()) ، ويخبر جدول البيانات أين يضع البيانات المستلمة (الأسطر 21-38) ، ويعين نوع MIME المسموح به (setMimeType (ContentService.MimeType.JSON) )). اعطها قراءة — هل قام Patera بعمل رائع في شرح البرنامج النصي مع تعليقاته لذا تركتهم هناك. (يمكن العثور على جوهر الأصلي هنا.)

احفظ البرنامج النصي واسمه اسمًا مناسبًا. ثم انتقل إلى قائمة "Run" وحدد "setup".

قد يُطلب منك إعطاء البرامج النصية من Google لاستخدام حسابك في Google.

بمجرد أن تحصل على إذن منك ، انتقل إلى قائمة "نشر" واختر "نشر كتطبيق ويب".

سيتم بعد ذلك تقديم بعض الخيارات لتخصيص البرنامج النصي الخاص بك.

يعد الخياران الأخيران من هذه الخيارات الثلاثة مهمين للغاية لتعيين بشكل صحيح وإلا فلن تتمكن من الوصول إلى البرنامج النصي الخاص بك مع طلب AJAX. يجب تنفيذ التطبيق بنفسك ويجب أن تمنح "أي شخص ، حتى مجهول" ، إمكانية الوصول إلى التطبيق. بدون هذه الإعدادات ، سيرفض البرنامج النصي أي طلب من خادم آخر ، مثل طلب AJAX الخاص بالنموذج ، لأنه لن يتم تكوينه للسماح بمشاركة الموارد عبر المصادر (CORS).

بمجرد تهيئة هذه الخيارات ، تابع وانقر على "نشر".

سيتم تقديم عنوان URL لتطبيق الويب الخاص بك. هذا هو المكان الذي سنرسل إليه طلب AJAX ، لذا انسخ عنوان URL هذا واحفظه لاحقًا.

بناء نموذج HTML

لذلك ، تم إعداد ورقة Google مع عمود لكل حقل من حقول النماذج الخاصة بنا ، بالإضافة إلى برنامج نصي يقبل بيانات النموذج في طلب AJAX ويكتبها في جدول البيانات. كل ما تبقى هو إنشاء نموذج HTML حتى نتمكن من جمع بعض المعلومات واستمراره في ورقة Google الخاصة بنا!

ليست هناك حاجة لفعل أي شيء يتخيل مع النموذج الخاص بك - فقط تأكد من أن اسم كل إدخال يطابق الاسم الذي استخدمته كأسماء الأعمدة في جدول البيانات الخاص بك. قد يبدو النموذج الخاص بك مثل هذا إذا كنت خائفة من التصميم:

مرة أخرى ، المفتاح هو التأكد من تطابق اسم كل إدخال مع اسم كل عمود في ورقة Google.

أخيرًا ، سنقوم بتوصيل نموذج HTML الخاص بنا مع Google Script الخاص بنا مع القليل من JavaScript / jQuery. لا شيء مجنون جدا هنا ، إما. نحن نمنع إرسال النموذج بشكل طبيعي وبدلاً من ذلك بناء طلب AJAX إلى عنوان URL لتطبيق الويب / البرنامج النصي الذي حصلنا عليه مسبقًا.

الجزء الوحيد المثير للاهتمام هو البيانات التي نرسلها. يتوقع برنامجنا النصي نوع بيانات JSON ، لذا سيتعين علينا تحويل بيانات النموذج الخاصة بنا إلى كائن JSON. اخترت القيام بذلك باستخدام البرنامج النصي jQuery Serialize Object ، والذي يوفر طريقة serializeObject () ، وسوف يحول النموذج الخاص بنا إلى كائن JavaScript. يمكنك حل هذه المشكلة كما تريد - طالما أن بياناتك مبنية مثل JSON!

الآن ، عندما يقوم شخص ما بإرسال نموذج HTML الخاص بك ، يجب تسجيل ردودهم في ورقة Google الخاصة بك. حلو!

نموذج Google أقل من نموذج Google

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

تحديث! إذا كنت تواجه مشكلات ...

شكرًا لجويل أجويرو على معالجة بعض المشكلات التي يواجهها الأشخاص في استخدام هذا الدليل. رده هو هنا واستنساخها أدناه.

  1. قضايا كورس
    إذا كنت ترى خطأً كما يلي: "لا يوجد عنوان" الوصول إلى التحكم - السماح - الأصل "على المورد المطلوب ،" تحقق جيدًا من تقديم طلب GET وليس طلب POST.
  2. عنوان URL لتطبيق الويب
    تنسيق URL ليس هو نفسه كما في مثال ديفيد الأصلي إذا كان لديك حسابات متعددة في Google. على وجه التحديد ، يبدو عنوان URL لتطبيق الويب من Google كما يلي:
    https://script.google.com/macros/u/1/s/.../exec
    يجب إزالة "/ u / 1" لتصل إلى نقطة النهاية ، مما يؤدي إلى ما يلي:
    https://script.google.com/macros/s/.../exec
  3. الوصول إلى المعلمات
    إذا كنت تكافح للوصول إلى المعلمات أو تمرير البيانات بشكل صحيح ، فحاول إرفاقها بنهاية عنوان url بدلاً من ذلك:
    https://script.google.com/macros/s/.../exec؟firstName=Joel
    إذا ذهبت إلى هذا الطريق ، أوصي باستخدام encodeURIComponent للهروب من الأحرف الخاصة (على سبيل المثال: "+" في test+1@example.com).
  4. طلب مكتبات
    استخدمت واجهة برمجة تطبيقات Fetch لتقديم الطلب لأن React يفترض أن يتم شحنها مع polyfill افتراضيًا. إذا كنت لا تستخدم React ، فإنني أوصي بطلب الحزمة الشائعة أو العثور على ملف polyfill حتى تتمكن من تقديم دعم عبر المستعرض.