Get best of the week

Reagieren Sie auf das native Feedback-Formular mit AWS + Telegram

Bild

Bevor ich anfing, das Feedback-Formular in eines meiner letzten Projekte zu integrieren, versuchte ich, einen nicht standardmäßigen Ansatz zur Lösung des Problems zu finden. E-Mail benötigt eine Art SMTP-Server und ist nur langweilig, insbesondere für Start-ups mit geringem Nachrichtenfluss.

Boten, dies ist eine großartige Alternative, und dies ist der Weg, den ich gewählt habe. Telegramm bietet eine der einfachsten Möglichkeiten zum Erstellen von Bots (wenn nicht die einfachste). An seiner Stelle kann alles stehen - andere Messenger, Telefonanrufe (Amazon Connect) oder Yandex Dialogs.

Wir versuchen nicht, einen Chatbot oder eine Schnittstelle für die Korrespondenz zu erstellen. Wir möchten, dass dies wie ein normales Feedback-Formular aussieht, wenn der Absender keine sofortige Antwort erwartet. Im folgenden Beispiel kann der Empfänger dem Benutzer per E-Mail antworten, die er im Formularfeld hinterlässt.

Schritt 1: Bot in Telegramm, es kann nicht einfacher sein


Wir senden eine Nachricht @BotFathermit dem Team /newbot, setzen den Namen und fertig! Wir haben ein Zeichen bekommen . Wir behalten es für uns.

Außerdem benötigen wir chat_id- die Identifikation des Chats, an den Nachrichten gesendet werden. Lerne dein chat_idbisschen härter als einen Token zu bekommen , zum Glück gibt es ein Boot unter dem Namen @my_id_bot, das deines enthüllt chat_id.

Als Ergebnis haben wir ein Token , mit dem wir mit unserem Bot "sprechen" und chat_iddas Ihnen persönlich eine Nachricht sendet. Jetzt können Sie einen Befehl an unseren Bot senden /startund wir können weitermachen.

Das Telegramm wird als Beispiel gezeigt und aufgrund der einfachen Verwendung von Bots kann sich an seiner Stelle ein anderer Messenger oder ein anderer Auslöser befinden.

Schritt 2: Lambda als Vermittler


Eine der Optionen zum Einrichten von Telegramm besteht darin, den gesamten Anforderungscode einzubetten und mit der Telegramm-API in den React Native-Anwendungscode selbst zu „sprechen“ - eine gute Option für den Test. In meinem Fall wurde bereits eine API mit mehreren aktiven Lambda-Funktionen konfiguriert, sodass meine Option Lambda als Zwischenschicht zwischen der Anwendung und der Telegramm-API enthält. Der folgende Code und die folgenden Anweisungen können im React Native-Projekt selbst verwendet werden.

Ich habe das Serverless Framework verwendet, um eine neue Funktion mit den folgenden Parametern (Format yaml) zu erstellen .

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

Denken Sie daran, dass das Token und chat_idstreng versteckt sein muss. In diesem Fall verwende ich die Umgebungsvariablendatei, die in Lambda verwendet wird. Wie Sie in den obigen Zeilen sehen können, konfiguriert Serverless die Gateway-API für POST-Anforderungen. Beachten Sie auch, dass in diesem Fall die API ohne Einschränkungen für alle zugänglich ist.

Und hier ist der Teil des Lambda-Codes, der unsere Anfrage akzeptiert. Unser Front-End sammelt nur Informationen - E-Mail und Nachricht - und sendet die Anfrage an unsere Funktion, die die Anfrage in der Telegramm-API verarbeitet.

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);
  }
};

Zwei Hilfsfunktionen getTelegramConfigzum Erstellen einer Anforderungs-URL und createResponsezum Generieren einer Standardantwort mit einem Statuscode und einer Nachricht.

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.encodewird verwendet, um ein Objekt in eine Zeichenfolge wie zu konvertieren ?param1=value¶m2=value.

Wenn wir nun eine POST-Anfrage mit dem folgenden Inhalt stellen, erhalten wir unsere Nachricht per Telegramm.

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

Bild

Schritt 3: "Kontakt" in der React Native App


Verbleib ein Teil des Frontends. Genauso viel wie möglich, mindestens 10 Zeichen für die Nachricht erforderlich und die E-Mail-Adresse überprüfen.

Teil von JSX . Button- Dies ist seine Komponente mit zusätzlichen Parametern für den disabledStatus inaktiv ( ) und den Download-Status ( loading). Stil liegt auch in Ihrem Ermessen.

<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>

JavaScript-Teil.

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();

Die Schaltfläche Senden ist inaktiv, bis der Benutzer die richtige E-Mail-Adresse und mindestens eine 10-stellige Nachricht eingibt. Denken Sie daran, dass in diesem Beispiel die API geöffnet ist.

Bild

So.

Was fehlt


  • Ich habe einen Teil der API nicht berührt, dies ist ein separates Thema, viele andere Artikel finden Sie dazu. Ich empfehle Ihnen außerdem, sich mit dem Serverless Framework vertraut zu machen.
  • In diesem Beispiel erhalten wir eine Nachricht im Telegramm, müssen jedoch per E-Mail antworten. Es gibt viele verschiedene Möglichkeiten und dies ist nur ein Beispiel.

Nützliche Links


Auf Englisch
https://core.telegram.org/bots/api#sendmessage
https://core.telegram.org/bots/api#markdown-style
https://facebook.imtqy.com/react-native/docs/ Text Eingabe

More articles:


All Articles