Get best of the week

Reagir o formulário de comentários nativos usando o AWS + Telegram

imagem

Antes de começar a integrar o formulário de feedback em um dos meus últimos projetos, tentei encontrar uma abordagem não padrão para resolver o problema. O email precisa de algum tipo de servidor SMTP, e é apenas chato, especialmente para empresas iniciantes com baixo fluxo de mensagens.

Mensageiros, essa é uma ótima alternativa, e esse é o caminho que escolhi. O telegrama fornece uma das maneiras mais fáceis de criar bots (se não o mais fácil). Em seu lugar, pode haver qualquer coisa - outros mensageiros, telefonemas (Amazon Connect) ou Yandex Dialogs.

Não estamos tentando criar um chatbot ou interface para correspondência; queremos que isso pareça um formulário de feedback normal quando o remetente não espera uma resposta imediata. No exemplo abaixo, o destinatário poderá responder ao usuário por email, que ele deixará no campo do formulário.

Etapa 1: bot no Telegram, não pode ser mais fácil


Enviamos uma mensagem @BotFathercom a equipe /newbot, definimos o nome e pronto! Temos um token . Mantemos isso para nós mesmos.

Além disso, precisamos chat_id- a identificação do bate-papo para o qual as mensagens serão enviadas. Aprenda um chat_idpouco mais do que receber um token , felizmente, existe um barco com o nome @my_id_botque revelará o seu chat_id.

Como resultado, temos um token que usaremos para "conversar" com o nosso bot e chat_idserá usado para enviar uma mensagem para você pessoalmente. Agora você pode enviar um comando para o nosso bot /starte podemos seguir em frente.

O telegrama é mostrado como exemplo e, devido à facilidade de uso de bots, pode haver outro messenger ou algum outro gatilho em seu lugar.

Etapa 2: Lambda como intermediário


Uma das opções para configurar o Telegram é incorporar todo o código de solicitação e conversa à API do Telegram no próprio código do aplicativo React Native - uma boa opção para o teste. No meu caso, uma API com várias funções ativas do Lambda já estava configurada; portanto, minha opção inclui o Lambda como uma camada intermediária entre o aplicativo e a API do Telegram. O código e as instruções abaixo podem ser usados ​​no próprio projeto React Native.

Usei a estrutura sem servidor para criar uma nova função com os parâmetros abaixo (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

Lembre-se que o token e chat_iddeve estar estritamente oculto. Nesse caso, estou usando o arquivo de variável de ambiente que será usado no Lambda. Como você pode ver nas linhas acima, o Serverless configurará a API do Gateway para solicitações POST. Observe também que, nesse caso, a API está aberta a todos, sem nenhuma restrição.

E aqui está a parte do código Lambda que aceitará nosso pedido. Nosso front-end apenas coleta informações - e-mail e mensagem e envia a solicitação para nossa função, que processará a solicitação na API do 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);
  }
};

Duas funções auxiliares getTelegramConfigpara criar uma URL de solicitação e createResponsegerar uma resposta padrão com um código de status e uma mensagem.

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.encodeusado para converter um objeto em uma string como ?param1=value¶m2=value.

Agora, se fizermos uma solicitação POST com o conteúdo abaixo, receberemos nossa mensagem no Telegram.

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

imagem

Etapa 3: "Entre em contato" no aplicativo React Native


Parte restante do front-end. Tanto quanto possível, exigindo pelo menos 10 caracteres para a mensagem e verificando o endereço de e-mail.

Parte do JSX . Button- este é seu componente com parâmetros adicionais de disabledstatus inativo ( ) e status de download ( loading). O estilo também é a seu critério.

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

O botão Enviar ficará inativo até que o usuário insira o endereço de e-mail correto e pelo menos uma mensagem de 10 caracteres. Lembre-se de que neste exemplo, a API está aberta.

imagem

Como isso.

O que está faltando


  • Não toquei em parte da API, este é um tópico separado. Muitos outros artigos podem ser encontrados sobre isso. Também recomendo que você se familiarize com a estrutura sem servidor.
  • Neste exemplo, recebemos uma mensagem no Telegram, mas teremos que responder por email. Existem muitas opções diferentes e este é apenas um exemplo.

Links Úteis


Em 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