روابط الويب لـ Dialogflow: كيفية التطوير محليًا ونشرها على وظائف السحاب

عندما بدأ فريقنا في بناء chatbot Nila في LINE HACK 2018 ، عرفنا قدرًا كبيرًا عن جون سنو حول كيفية بناء ربط الويب. البعض منا لديه بعض الخبرة في Firebase وكتابة وظائف سحابة ، لذلك افترضنا أن الأمر سيكون سهلاً للغاية ، خاصةً عندما وجدنا محرر Inline Editor - لكننا انتهينا من بناء الإصدار الأول بالكامل على Glitch ، وهي بيئة حية لتشغيل Node .js التطبيقات. في حين أن Glitch رائعة للتعلم ، فقد كان من الممكن أن نجعل حياتنا أسهل من خلال تهيئة بيئة تنمية محلية.

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

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

1. ابدأ بقالب وقم بتشغيله محليًا

بينما يكون التركيز هو روابط الويب Dialogflow في هذه المقالة ، فإنني أظن أن هذه الخطوات هي نفسها لتطوير أي ربط ويب. إذا كنت تستخدم Dialogflow ، فقد تبدأ بـ Inline Editor للوفاء. أول شيء فعله هو الاستيلاء على هذا الرمز وتعديله ليتم تشغيله محليًا.

في simpleServer.js ، أخذت رمز الوفاء Dialogflow من Inline Editor ، وأزلت كود Firebase المحدد وأضفت صريحًا لخدمة ربط الويب. ستحتاج إلى package.json مع التبعيات للتعبير الصريح ، وفاء الحوار ، والإجراءات على جوجل. قم بتشغيل ربط الويب بواسطة العقدة simpleServer.js ثم افتح http: // localhost: 8080 / للتحقق من أنه يعمل.

2. استخدم ngrok لخدمة http المحلية إلى https العامة

Ngrok هي خدمة مجانية تمنحك عنوان URL https آمنًا عامًا لخادم الويب المحلي لديك. يمكنك تثبيت ngrok على مستوى العالم (قم بتنزيل التطبيق الثنائي أو تثبيت npm على المستوى العالمي) ، لكن تفضيلي هو التثبيت باعتباره تبعية dev:

npm تثبيت ngrok - حفظ ديف

ثم قم بتعديل package.json:

  ...
  "البرامج النصية": {
    "النفق": "ngrok http 8080"
  }،

الآن في أي وقت تريد فيه إنشاء عنوان URL https إلى بيئة التطوير المحلية لديك ، يمكنك فقط استخدام نفق تشغيل npm. سيتم تشغيل Ngrok وإنشاء https URL:

تشغيل ngrok للحصول على عنوان URL https عام لخادمك المحلي

يمكنك الآن نسخ عنوان URL لـ https ضمن "إعادة توجيه" (المظللة باللون الأحمر) ليكون ربط الويب الخاص بك للوفاء في Dialogflow:

قم بتهيئة وفاء Dialogflow لاستخدام عنوان URL لإعادة توجيه ngrok

في هذه المرحلة ، سأختبر أن كل شيء يعمل عن طريق إرسال "مرحبًا" في وحدة التحكم في اختبار Dialogflow:

السبب في أنني أفضل التثبيت كاعتماد على dev هو أنه عندما ينضم مطور آخر إلى الفريق ، فلن يحتاج إلى تثبيت أي شيء إضافي - يمكنهم فقط استخدام نفق تشغيل npm لإنشاء عنوان URL https الخاص بهم.

يمكنك إنهاء ngrok باستخدام Ctrl-C (وستتوقف عن تقديم عنوان URL العام). في كل مرة تقوم فيها بإعادة تشغيل ngrok ، ستتلقى عنوان URL جديدًا ، مما يعني أنك ستحتاج إلى تحديث URL في وحدة التحكم Dialogflow. طريقة واحدة لحل هذا هو الترقية إلى واحدة من خطط ngrok المدفوعة.

3. إعادة تحميل (nodemon) وتصحيح الأخطاء (رمز VS)

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

Nodemon هو أفضل صديق لـ Node.js ، حيث يقوم بإعادة تشغيل الخادم كلما اكتشف التغييرات. مثل ngrok ، أقوم بتثبيته بمثابة تبعية dev:

npm تثبيت nodemon - حفظ ديف

وتعديل البرامج النصية package.json مرة أخرى:

  "البرامج النصية": {
    "dev": "nodemon --pectpect simpleServer.js"،
    "النفق": "ngrok http 8080"
  }،

ثم ابدأ تشغيل dev dev مع npm run dev.

تمكن الوسيطة --inspect المصحح. في VS Code ، يمكنك إنشاء تكوين تصحيح يعمل مع nodemon كما يلي:

  1. في قائمة "Debug" ، حدد "Open Configurations" لفتح ملف launch.json.
  2. استخدم زر "إضافة تكوين ..." لإضافة تكوين تصحيح "Node.js: Attach" جديد. يجب أن يبدو التكوين الناتج كما يلي:
"التكوينات": [
  {
    "النوع": "العقدة" ،
    "طلب": "إرفاق" ،
    "الاسم": "إرفاق" ،
    "الميناء": 9229
  }
]

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

4. نمط الرمز (اختياري)

بينما نقوم بإعداد VS Code ، قد يكون الوقت مناسب لإعداد linter. أحب استخدام JavaScript Standard Style لأنه بسيط - أنا لا أحب 100٪ من القواعد ولكنه قريب بما فيه الكفاية وأنا أحب حقيقة أنه أسلوب ثابت لذلك لا يوجد وقت للجدال / إضاعة الوقت في التغيير إلى ESLint خيارات. كما أنه سهل التثبيت:

npm تثبيت قياسي - حفظ ديف

أضف أمر الوبر إلى package.json الخاص بك:

"البرامج النصية": {
    ...
    "الوبر": "قياسي"
  }،

ثم يمكنك التحقق من الكود الخاص بك باستخدام npm run lint أو إصلاح جميع الأخطاء مع npm run lint - --fix.

ومع ذلك ، ربما تريد ميزة الإصلاح في المحرر الخاص بك. يحتوي رمز VS على ملحق لـ Standard. بعد تثبيت هذا ، أضف {"مفتاح": "cmd + l" ، "command": "standard.executeAutofix"} إلى keybindings.json ، وتغيير cmd + l لأي اختصار لوحة المفاتيح الذي تريد استخدامه. يمكنك الآن النقر فوق هذا الاختصار للحفاظ على الشفرة في النمط القياسي. :)

5. (أ) نشر في وظائف سحابة ل Firebase

بعد قول وداعًا لـ Cloud Functions عن طريق إزالتها في الخطوة 1 ، فقد حان الوقت للعودة إلى النشر. تذكّر أن رمز وظائف Cloud Cloud الأصلي بدا كما يلي:

export.dialogflowFirebaseFulfillment =
    jobs.https.onRequest ((request، response) => {...})

اتضح أن التطبيق السريع هو أيضًا وظيفة تتطلب طلبًا / استجابة ، لذا فهي تلبي متطلبات وظائف السحاب لـ (طلب ، استجابة) => {...}.

وبالتالي ، يمكننا تقسيم simpleServer.js الموجودة لدينا إلى server.js و app.js. يحتوي ملف app.js على تطبيقنا الذي يمكن تشغيله على Node.js أو وظائف السحاب.

تشغيل تطبيق سريع من خلال وظائف السحاب

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

النتيجة:

لا تنس تثبيت التبعيات الخاصة بـ Firebase: npm install firebase-jobs firebase-admin - حفظ.

بعد ذلك ، النشر ...

إذا لم تكن معتادًا على نشر "وظائف السحاب" ، يمكنك إلقاء نظرة على وثائق Firebase.

الخطوات الأساسية:

  1. تثبيت Firebase CLI: npm install -g firebase-tools @ latest
  2. إنشاء firebase.json تحتوي على:
    {"وظائف": {"source": "."، "preeploy": ["npm run lint"]}}
  3. تشغيل firebase use - إضافة داخل مجلد المشروع الخاص بك لتحديد مشروع Firebase وتعيين اسم مستعار.
  4. قم بتعديل package.json لتوجيه النص "الرئيسي" إلى "cloudFuncs.js":
    "main": "cloudFuncs.js" ،
  5. إذا كنت تريد استخدام Node 8 (ربما تفعل ذلك!) ، فقم أيضًا بإضافة هذا إلى package.json:
    "المحركات": {"العقدة": "8"} ،
  6. محاولة نشر: نشر firebase - وظائف فقط
نشر ربط الويب إلى وظائف سحابة على Firebase

إذا اكتملت عملية النشر بنجاح ، فيمكنك فتح نقطة نهاية الاختبار في متصفحك على: https: // us-central1- [yourprojectid] .cloudfunctions.net / app / (ملاحظة ، الشرطة المائلة الزائدة / مطلوبة لمطابقة المسار السريع).

وعنوان URL لربط الويب هو https: // us-central1- [yourprojectid] .cloudfunctions.net / app / dialogflow.

أخيرًا ، أضف نص نشر إلى package.json ، بحيث يمكنك تشغيل npm run publish-cf للنشر في Firebase في أي وقت:

  "البرامج النصية": {
    ...
    "publish-cf": "نشر firebase
  }،

Node.js المحلي مقابل وظائف السحابة

  • يجب ضبط متغيرات البيئة عبر الأمر firebase. مثال:
    وظائف firebase: config: set apiKey = "THE API KEY"
  • أتمتة الحصول على متغيرات البيئة وإعدادها باستخدام برنامج نصي يتبع نصيحة Allan Hasegawa.
  • المتغيرات العالمية لن تتصرف كما تتوقع:
    "ليس هناك ما يضمن الحفاظ على حالة وظيفة السحاب للدعوات المستقبلية." https://cloud.google.com/functions/docs/bestpractices/tips

5. (ب) النشر في Google App Engine (مكافأة!)

أضافت Google مؤخرًا ميزات تحجيم أكثر مرونة إلى App Engine ودعم Node 10. والفرق بين تشغيل ربط الويب الخاص بك على App Engine و Cloud Functions بسيط للغاية. بناءً على ما أفهمه ، يعمل Firebase على تشغيل الكثير من وظائف السحاب معًا في العديد من الحالات ويقوم بإدارة أي منها يتم إلغاء تنشيطه عند عدم استخدامه. من ناحية أخرى ، يعمل تطبيق Engine على تطبيق واحد أو أكثر من الحالات المخصصة التي يمكن تغيير حجمها تلقائيًا حسب الطلب.

عندما يكون الطلب صفرًا ، يمكن لـ App Engine التوسع إلى مثيلات الصفر - وهذا هو الإعداد الافتراضي الذي يعد جيدًا لإدارة التكاليف عند إجراء التجربة. يحتوي تطبيق Engine على حصص مجانية (28 ساعة مثيل في اليوم) مما يعني أنك قد لا تتحمل أي تكاليف لمثيل واحد (ولكن لا تقتبس من ذلك!).

لقد وجدت أن النشر إلى App Engine أسهل كثيرًا من وظائف Cloud.

  1. قم بتثبيت أداة سطر الأوامر gcloud - راجع الوثائق
  2. تمكين واجهة برمجة تطبيقات Cloud Build لمشروعك على صفحة واجهة برمجة تطبيقات وخدمات Google Cloud Platform.
  3. قم بإنشاء ملف باسم app.yaml في جذر مشروعك ، يحتوي على:
    وقت التشغيل: nodejs8
    أو بدلاً من ذلك لأحدث Node.js يجب أن تقدمه:
    وقت التشغيل: nodejs10
    (إذا اخترت nodejs10 فأنت بحاجة إلى تعديل إصدار العقدة في "محركات" من package.json أيضًا.)
  4. النشر: نشر تطبيق gcloud - مشروع [yourprojectid]

إذا نجحت عملية النشر ، فافتح متصفحك على https: // [yourprojectid] .appspot.com وسيكون رابط الويب الخاص بك متاحًا على https: // [yourprojectid] .appspot.com / dialogflow.

مرة أخرى ، قم بتنظيم البرنامج النصي للنشر على package.json حتى تتمكن من تشغيل npm run publish-ae للنشر في أي وقت:

"البرامج النصية": {
    ...
    "publish-ae": "نشر تطبيق gcloud - مشروع [yourprojectid]"
  }،

ملخص

يجب أن تكون قادرًا الآن على:

  • قم بإنشاء بيئة تطوير محلية لمشروع ربط الويب الخاص بك ، مع إمكانات الفحص والتصحيح — في متصفحك المفضل
  • خدمة بيئتك المحلية كعنوان URL https العام باستخدام ngrok
  • نشر التطبيق على وظائف سحابة على Firebase و إلى Google App Engine

بدأ هذا المشروع كربط ويب لـ Dialogflow ، ولكن التقنيات التي تمت مناقشتها ستعمل مع أي مشروع ربط ويب.

يمكنك العثور على جميع الكود على github: webhook-template. أستخدم هذا كنقطة انطلاق لأي مشروع ربط ويب - آمل أن تجده مفيدًا أيضًا.