Get best of the week

Formulaire de réaction native React à l'aide d'AWS + Telegram

image

Avant de commencer à intégrer le formulaire de rétroaction dans l'un de mes derniers projets, j'ai essayé de trouver une approche non standard pour résoudre le problème. La messagerie électronique a besoin d'une sorte de serveur SMTP, et c'est juste ennuyeux, en particulier pour les start-ups avec un faible flux de messages.

Messagers, c'est une excellente alternative, et c'est la voie que j'ai choisie. Le télégramme fournit l'une des façons les plus simples de créer des bots (sinon la plus simple). À sa place peut être n'importe quoi - d'autres messagers, appels téléphoniques (Amazon Connect) ou Yandex Dialogs.

Nous n'essayons pas de créer un chatbot ou une interface pour la correspondance, nous voulons que cela ressemble à un formulaire de rétroaction normal lorsque l'expéditeur ne s'attend pas à une réponse immédiate. Dans l'exemple ci-dessous, le destinataire pourra répondre à l'utilisateur par e-mail, qu'il laissera dans le champ du formulaire.

Étape 1: bot dans Telegram, ça ne peut pas être plus facile


Nous envoyons un message @BotFatheravec l'équipe /newbot, définissons le nom et c'est tout! Nous avons obtenu un jeton . Nous le gardons pour nous.

De plus, nous avons besoin chat_id- de l'identification du chat auquel les messages seront envoyés. Apprenez votre chat_idpetit plus difficile que d'obtenir un jeton , heureusement, il y a un bateau sous le nom @my_id_botqui vous révélera chat_id.

En conséquence, nous avons un jeton que nous utiliserons pour "parler" avec notre bot et chat_idqui sera utilisé pour vous envoyer un message personnellement. Vous pouvez maintenant envoyer une commande à notre bot /startet nous pouvons continuer.

Le télégramme est présenté à titre d'exemple et en raison de la facilité d'utilisation des robots, il peut y avoir un autre messager ou un autre déclencheur à sa place.

Étape 2: Lambda en tant qu'intermédiaire


L'une des options de configuration de Telegram consiste à intégrer l'intégralité du code de demande et de conversation avec l'API Telegram dans le code d'application React Native lui-même - une bonne option pour le test. Dans mon cas, une API avec plusieurs fonctions Lambda actives était déjà configurée, donc mon option inclut Lambda comme couche intermédiaire entre l'application et l'API Telegram. Le code et les instructions ci-dessous peuvent être utilisés dans le projet React Native lui-même.

J'ai utilisé le framework Serverless pour créer une nouvelle fonction avec les paramètres ci-dessous (format 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

N'oubliez pas que le jeton et chat_iddoit être strictement caché. Dans ce cas, j'utilise le fichier de variables d'environnement qui sera utilisé dans Lambda. Comme vous pouvez le voir sur les lignes ci-dessus, Serverless configurera l'API de passerelle pour les requêtes POST. Notez également que dans ce cas, l'API est ouverte à tous sans aucune restriction.

Et voici la partie du code Lambda qui acceptera notre demande. Notre front-end recueille simplement des informations - e-mail et message, et enverra la demande à notre fonction, qui traitera la demande dans l'API 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);
  }
};

Deux fonctions d'assistance getTelegramConfigpour créer une URL de demande et createResponsepour générer une réponse standard avec un code d'état et un message.

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.encodeutilisé pour convertir un objet en une chaîne comme ?param1=value¶m2=value.

Maintenant, si nous faisons une demande POST avec le contenu ci-dessous, nous recevrons notre message sur Telegram.

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

image

Étape 3: «Contactez-nous» dans l'application React Native


Partie restante de l'extrémité avant. Autant que possible, nécessitant au moins 10 caractères pour le message et vérifiant l'adresse e-mail. Fait

partie de JSX . Button- c'est son composant avec des paramètres supplémentaires de disabledstatut inactif ( ) et de téléchargement ( loading). Le style est également à votre discrétion.

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

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

Le bouton Soumettre sera inactif jusqu'à ce que l'utilisateur entre la bonne adresse e-mail et au moins un message de 10 caractères. N'oubliez pas que dans cet exemple, l'API est ouverte.

image

Comme ça.

Que manque-t-il


  • Je n'ai pas touché une partie de l'API, c'est un sujet séparé, de nombreux autres articles peuvent être trouvés à ce sujet. Je vous recommande également de vous familiariser avec le framework Serverless.
  • Dans cet exemple, nous recevons un message par télégramme, mais nous devrons répondre par e-mail. Il existe de nombreuses options différentes et ce n'est qu'un exemple.

Liens utiles


En anglais
https://core.telegram.org/bots/api#sendmessage
https://core.telegram.org/bots/api#markdown-style
https://facebook.imtqy.com/react-native/docs/ saisie de texte

More articles:


All Articles