Get best of the week

Reaccione el formulario de comentarios nativos con AWS + Telegram

imagen

Antes de comenzar a integrar el formulario de comentarios en uno de mis últimos proyectos, intenté encontrar un enfoque no estándar para resolver el problema. El correo electrónico necesita algún tipo de servidor SMTP, y es aburrido, especialmente para las empresas nuevas con un flujo de mensajes bajo.

Mensajeros, esta es una gran alternativa, y este es el camino que elegí. Telegram proporciona una de las formas más fáciles de crear bots (si no la más fácil). En su lugar puede haber cualquier cosa: otros mensajeros, llamadas telefónicas (Amazon Connect) o Yandex Dialogs.

No estamos tratando de crear un chatbot o una interfaz para la correspondencia, queremos que se vea como un formulario de comentarios normal cuando el remitente no espera una respuesta inmediata. En el ejemplo a continuación, el destinatario podrá responder al usuario por correo electrónico, que dejará en el campo del formulario.

Paso 1: bot en Telegram, no puede ser más fácil


Enviamos un mensaje @BotFathercon el equipo /newbot, establecemos el nombre y listo. Tenemos una ficha . Nos lo guardamos para nosotros.

Además, necesitamos chat_id: la identificación del chat al que se enviarán los mensajes. Aprende tu chat_idpoco más duro que obtener una ficha , afortunadamente, hay un bote con el nombre @my_id_botque revelará tu chat_id.

Como resultado, tenemos un token que usaremos para "hablar" con nuestro bot, y chat_idlo usaremos para enviarle un mensaje personalmente. Ahora puede enviar un comando a nuestro bot /starty podemos seguir adelante.

Telegram se muestra como un ejemplo y, debido a la facilidad de uso de los bots, puede haber otro mensajero u otro desencadenante en su lugar.

Paso 2: Lambda como intermediario


Una de las opciones para configurar Telegram es incrustar todo el código de solicitud y "hablar" con la API de Telegram en el código de la aplicación React Native, una buena opción para la prueba. En mi caso, ya se configuró una API con varias funciones activas de Lambda, por lo que mi opción incluye Lambda como capa intermedia entre la aplicación y la API de Telegram. El código y las instrucciones a continuación se pueden usar en el proyecto React Native.

Utilicé el framework Serverless para crear una nueva función con los siguientes parámetros (formato 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

Recuerde que el token y chat_iddebe estar estrictamente oculto. En este caso, estoy usando el archivo de variable de entorno que se usará en Lambda. Como puede ver en las líneas anteriores, Serverless configurará la API de Gateway para solicitudes POST. También tenga en cuenta que en este caso, la API está abierta a todos sin restricciones.

Y aquí está la parte del código Lambda que aceptará nuestra solicitud. Nuestro front-end solo recopila información: correo electrónico y mensaje, y envía la solicitud a nuestra función, que procesará la solicitud en la API de Telegram.

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

Dos funciones auxiliares getTelegramConfigpara crear una URL de solicitud y createResponsepara generar una respuesta estándar con un código de estado y un mensaje.

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.encodese usa para convertir un objeto en una cadena como ?param1=value¶m2=value.

Ahora, si hacemos una solicitud POST con el contenido a continuación, recibiremos nuestro mensaje en Telegram.

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

imagen

Paso 3: "Contáctenos" en la aplicación React Native


Parte restante de la parte delantera. Tanto como sea posible, requiriendo al menos 10 caracteres para el mensaje y verificando la dirección de correo electrónico.

Parte de JSX . Button- este es su componente con parámetros adicionales de estado inactivo ( disabled) y estado de descarga ( loading). El estilo también queda a tu discreción.

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

Parte de JavaScript.

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

El botón Enviar estará inactivo hasta que el usuario ingrese la dirección de correo electrónico correcta y al menos un mensaje de 10 caracteres. Recuerde que en este ejemplo, la API está abierta.

imagen

Me gusta esto.

Lo que falta


  • No toqué parte de la API, este es un tema separado, se pueden encontrar muchos otros artículos sobre esto. También le recomiendo que se familiarice con el marco sin servidor.
  • En este ejemplo, recibimos un mensaje en Telegram, pero tendremos que responder por correo electrónico. Hay muchas opciones diferentes y esto es solo un ejemplo.

Enlaces útiles


En inglés
https://core.telegram.org/bots/api#sendmessage
https://core.telegram.org/bots/api#markdown-style
https://facebook.imtqy.com/react-native/docs/ entrada de texto

More articles:


All Articles