رد فعل نموذج ردود الفعل الأصلية باستخدام AWS + برقية

صورة

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

رسل ، هذا بديل رائع ، وهذا هو الطريق الذي اخترته. توفر Telegram إحدى أسهل الطرق لإنشاء برامج التتبُّع (إن لم تكن أسهل). في مكانها يمكن أن يكون أي شيء - رسل آخرين ، مكالمات هاتفية (Amazon Connect) أو Yandex Dialogs.

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

الخطوة 1: بوت في Telegram ، لا يمكن أن يكون أسهل


نرسل رسالة @BotFatherمع الفريق /newbot، نعين الاسم وهذا كل شيء! لدينا رمز مميز . نحتفظ بها لأنفسنا.

بالإضافة إلى ذلك ، نحتاج chat_id- تحديد الدردشة التي سيتم إرسال الرسائل إليها. تعلم chat_idقليلا أصعب من الحصول على رمز مميز ، لحسن الحظ ، هناك قارب تحت الاسم @my_id_botالذي سيكشف الخاص بك chat_id.

ونتيجة لذلك ، لدينا رمز مميز سنستخدمه "للتحدث" مع برنامج الروبوت الخاص بنا ، chat_idوسيتم استخدامه لإرسال رسالة إليك شخصيًا. الآن يمكنك إرسال أمر إلى الروبوت الخاص بنا /startويمكننا المضي قدمًا.

يتم عرض Telegram كمثال ، وبسبب سهولة استخدام الروبوتات ، قد يكون هناك رسول آخر أو مشغل آخر في مكانه.

الخطوة الثانية: لامدا كوسيط


أحد الخيارات لإعداد Telegram هو تضمين رمز الطلب بالكامل و "التحدث" مع Telegram API في رمز تطبيق React Native نفسه - وهو خيار جيد للاختبار. في حالتي ، تم بالفعل تكوين واجهة برمجة تطبيقات مع العديد من وظائف Lambda النشطة ، لذلك يتضمن خياري Lambda كطبقة وسيطة بين التطبيق وواجهة Telegram API. يمكن استخدام التعليمات البرمجية والتعليمات أدناه في مشروع React Native نفسه.

استخدمت إطار عمل Serverless لإنشاء وظيفة جديدة باستخدام المعلمات أدناه (التنسيق yaml).

sendTelegramMessage:
  description: used for contact form (${self:custom.stage})
  handler: lib/additional/sendMessageTelegram.handler
  environment: ${file(env_contact.yml):${self:custom.stage}}
  events:
    - http:
      path: contact
      method: POST
      private: false
  package:
    include:
      - lib/additional/sendMessageTelegram.js

تذكر أن رمزية و chat_idيجب أن تكون مخفية بدقة. في هذه الحالة ، أستخدم ملف متغير البيئة الذي سيتم استخدامه في لامدا. كما ترى من الأسطر أعلاه ، سيعمل Serverless على تهيئة Gateway API لطلبات POST. لاحظ أيضًا أنه في هذه الحالة ، واجهة برمجة التطبيقات مفتوحة للجميع دون أي قيود.

وهنا جزء من رمز Lambda الذي سيقبل طلبنا. تجمع الواجهة الأمامية المعلومات فقط - البريد الإلكتروني والرسالة ، وترسل الطلب إلى وظيفتنا ، التي ستعالج الطلب في Telegram API.

exports.handler = async (event) => {
  if (!event.body) {
    return createResponse(400, " ");
  }

  const data = JSON.parse(event.body);

  if (!data.email || !data.message) {
    return createResponse(400, " 'email'  'message' ");
  }

  try {
    const telegram = getTelegramConfig();

    await fetch(`${telegram.url}/bot${telegram.token}/sendMessage?${telegram.params(data.email, data.message)}`)

    return createResponse(200, " ");
  } catch (e) {
    return createResponse(500, e.message);
  }
};

وظيفتان مساعدتان getTelegramConfigلإنشاء عنوان URL للطلب ولإنشاء createResponseاستجابة قياسية برمز الحالة والرسالة.

const getTelegramConfig = () => {
  const token = process.env.TELEGRAM_BOT_TOKEN;
  const chatId = process.env.TELEGRAM_MAIN_CONTACT;

  if (!token || !chatId) {
    throw new Error("  ");
  }

  return {
    url: "https://api.telegram.org",
    token,
    params: (email, message) => qp.encode({
      chat_id: chatId,
      parse_mode: "Markdown",
      text: "  " + email + ": ```" + message + "```"
    })
  };
};

const createResponse = (statusCode, message) => ({
  statusCode,
  body: JSON.stringify({ message }, null, 2)
});

qp.encodeتستخدم لتحويل كائن إلى سلسلة مثل ?param1=value¶m2=value.

الآن ، إذا قمنا بتقديم طلب POST مع المحتوى أدناه ، فسوف نتلقى رسالتنا على Telegram.

{
    "email": "privet@gmail.com",
    "message": "   .  . , ,  ,   . ,        .         ,   .  ,  .  .   ,     .          .  .    ,   "
}

صورة

الخطوة 3: "اتصل بنا" في تطبيق React الأصلي


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

جزء من JSX . Button- هذا هو مكونه مع معلمات إضافية disabledلحالة ( ) غير النشطة وحالة التنزيل ( loading). النمط هو أيضا حسب تقديرك.

<View style={styles.container}>
  <TextInput
    value={sendersEmail}
    keyboardType="email-address"
    autoCapitalize="none"
    autoCompleteType="email"
    style={styles.input}
    onChangeText={onEmailChange}
    selectionColor="#555"
    placeholder=" "
    placeholderTextColor="#CCC"
    clearButtonMode="always"
    returnKeyType="done"
    disableFullscreenUI
  />
  <TextInput
    value={message}
    style={{ ...styles.input, ...styles.messageInput }}
    onChangeText={onMessageChange}
    selectionColor="#555"
    placeholder=" ..."
    placeholderTextColor="#CCC"
    clearButtonMode="always"
    returnKeyType="done"
    multiline
    textAlignVertical="top"
    disableFullscreenUI
  />
  <Button
    title=""
    loading={loading}
    disabled={disabled}
    onPress={onSendPress}
  />
</View>

جزء جافا سكريبت.

const [ sendersEmail, setSendersEmail ] = useState("");
  const [ message, setMessage ] = useState("");

  const [ loading, setLoading ] = useState(false);

  const onEmailChange = (value) => {
    setSendersEmail(value);
  };

  const onMessageChange = (value) => {
    setMessage(value);
  };

  const onSendPress = () => {
    setLoading(true);

    const url = "https://api.example.com/contact";

    fetch(url, {
      method: "POST",
      body: JSON.stringify({
        email: sendersEmail,
        message
      })
    })
    .then(() => {
      setLoading(false);
    })
    .catch(() => {
      setLoading(false);

      Alert.alert("", "    .");
    });
  };

  const isValidEmail = () => {
    const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    return emailRegex.test(sendersEmail.toLowerCase());
  };


  const disabled = message.length < 10 || !isValidEmail();

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

صورة

مثله.

ما المفقود


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

روابط مفيدة


باللغة الإنجليزية
https://core.telegram.org/bots/api#sendmessage
https://core.telegram.org/bots/api#markdown-style
https://facebook.imtqy.com/react-native/docs/ إدخال النص

All Articles