ここでは、次の携帯電話にメッセージを送信する方法があります.jsとtwilio?

36364 ワード
twilio typescript javascript nextjs テキストリンク
を次のようにtwilioを統合します.JSテキストメッセージを送信する?それから、あなたは完璧な場所にいます.
この記事では、次のトワイリオを統合する方法をあなたを歩いていきます.テキストメッセージを送信するためのJS.

インデックス
  • What is Twilio? 🤔
  • Demo
  • Creating Next.js Project 🚀
  • Creating Form 🔤
  • Setup Twilio
  • Building API Route
  • Conclusion
    • Twiilioが何であるかについて、わからない人々のために.


    何がtwilioですか?🤔
    twilioのウェブサービスAPIは、ソフトウェア開発者に電話をして、受けて、テキストメッセージを送受信して、プログラム的に他のコミュニケーション活動を行うのを許します.
    今日、私たちはtwilioメッセージングAPIを使用します.JSテキストメッセージを配信する.では、このパーティを始めましょう.

    デモ

     Next.js + Twilio - Watch Video



    次を作成する.JSプロジェクト🚀
    私はこのプロジェクトのためにTypesScriptプログラミング言語を使用します.もちろん、JavaScriptを使っているならば、JSコードに必要なだけのことについて話します.
    以下のようにします.
    yarn create next-app twilio-nextjs --typescript # yarn users

npx create-next-app twilio-nextjs --typescript # npm users
    JavaScriptの場合:
    yarn create next-app twilio-nextjs # yarn users

npx create-next-app twilio-nextjs # npm users

    フォームの作成🔤
    今、我々はメッセージ受信機の電話番号とメッセージを送るために入力フィールドでフォームを作ります.
    // pages/index.tsx

import type { NextPage } from 'next';
import Head from 'next/head';
import styles from '../styles/Home.module.css';
import { BaseSyntheticEvent, useState } from 'react';

const Home: NextPage = () => {
  const [phone, setPhone] = useState("");
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState(false);

  const sendMessage = async (e: BaseSyntheticEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(false);
    setSuccess(false);
    const res = await fetch('/api/sendMessage', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ phone: phone, message: message }),
    });
    const apiResponse = await res.json();

    if (apiResponse.success) {
      setSuccess(true);
    } else {
      setError(true);
    }
    setLoading(false);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js + Twilio</title>
      </Head>

      <form className={styles.form} onSubmit={sendMessage}>
        <h1 className={styles.title}>Send message using Next.js and Twilio</h1>
        <div className={styles.formGroup}>
          <label htmlFor='phone'>Phone Number</label>
          <input
            onChange={(e) => setPhone(e.target.value)}
            placeholder='Phone Number'
            className={styles.input}
            required
          />
        </div>
        <div className={styles.formGroup}>
          <label htmlFor='message'>Message</label>
          <textarea
            onChange={(e) => setMessage(e.target.value)}
            id='message'
            required
            placeholder='Message'
            className={styles.textarea}
          ></textarea>
        </div>
        <button disabled={loading} type='submit' className={styles.button}>
          Send Message
        </button>
        {success && (
          <p className={styles.success}>Message sent successfully.</p>
        )}
        {error && (
          <p className={styles.error}>
            Something went wrong. Please check the number.
          </p>
        )}
      </form>
    </div>
  );
};

export default Home;
    これを加えるpages/index.tsx or pages/index.js .
    VSコードまたは任意のIDEを使用している場合は、上記のコードをJSファイルに貼り付けるとエラーが表示されます.その後、削除する必要がありますBaseSyntheticEvent and NextPage からpages/index.js ファイルとそれらのエラーが削除されます.
    あなたが次に精通しているならば.それから、あなたは上記のコードを理解するでしょう.そして、もしあなたがそこにいるなら、私はポストリクエストを送りました/api/sendMessage エンドポイント.
    ...
const res = await fetch('/api/sendMessage', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ phone: phone, message: message }),
    });
    const apiResponse = await res.json();

    if (apiResponse.success) {
      setSuccess(true);
    } else {
      setError(true);
    }
...
    このコードはpost へのリクエスト/api/sendMessage 受信機の電話番号とメッセージが送信されるエンドポイント.その後、このAPIのエンドポイントを作成するメッセージをtwilioを使用して送信します.
    さて、まともなスタイリングのために、次のコードをペーストしてくださいstyles/Home.module.css .
    .container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
  width: 500px;
  padding: 20px;
  border-radius: 5px;
}

.formGroup {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
}

.title {
  line-height: 1.15;
  font-size: 1.3rem;
}

.input,
.textarea {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid;
}

.button {
  display: block;
  width: 100%;
  padding: 10px 0;
}

.button:disabled {
  cursor: progress;
}

.success {
  color: green;
}

.error {
  color: red;
}
    次に、次のコマンドを実行してサーバーを実行します.
    yarn dev # yarn users

npm run dev # npm users
    さて、次のようにしてください.


    セットアップ
    移動するhttps://twilio.com/ ログインしてアカウントにログインclick here (あなたがこのリンクを使用した場合は、アップグレードしたら10ドルになるでしょう).したら、あなたのメールを確認し、電話番号を確認してアカウントを作成します.あなたはtwilioダッシュボードにリダイレクトされます.

    For trial you will get $15.50.


    さて、メッセージを送信するためには、1つの番号が必要です.だから、1つの電話番号をしましょう.
    そこから、クリックする必要がありますPhone Number -> Manage -> Buy a number そこから電話番号を検索することができます.
    電話番号を購入しながら、SMSの機能かどうか、その番号ではないかどうかを確認します.

    実際、ネパールに住んでいますが、ネパールではネパール語の番号を要求する必要があります.だから、今のところ、私は米国の番号を使用します.
    クリックBuy あなたが購入したい数.そして、この番号を購入するお金は$15.50 それは試しにtwilioによって与えられた.
    アフター・ユーBuy . をクリックする必要がありますBuy YOUR_NUMBER .

    さて、その数字はあなたです.

    In a trial account, you can't purchase more than one number.


    さて、twilioセットアップは完了です.
    次をつくりましょう.JS APIのルートメッセージを送信します.

    ビルドAPIルート
    今すぐtwilioからメッセージを送信するAPIルートを構築します.しかし、その前に、私たちは.env.local .
    だから、新しい.env.local プロジェクトのルートディレクトリにあるファイル.そして、あなたがtwilioダッシュボードから得ることができるあなた自身の資格情報で以下の内容.

    TWILIO_ACCOUNT_SID=YOUR_ACCOUNT_SID
TWILIO_AUTH_TOKEN=YOUR_AUTH_TOKEN
    ここでは、我々は電話番号を加えていません...Envファイル、私は知らないが、ENVから電話番号を使用して動作しません.それで、我々はすぐに我々がちょうどそうするそれを通過しなければなりません.
    さて、新しいファイルをsendMessage.ts ユーザスクリプトとsendMessage.js JavaScriptユーザーの内部pages/api そして、以下の内容をタイプスクリプトに加えてください.
    import { NextApiRequest, NextApiResponse } from 'next';
import twilio from 'twilio';

export default function sendMessage(req: NextApiRequest, res: NextApiResponse) {
  const accountSid = <string>process.env.TWILIO_ACCOUNT_SID;
  const token = <string>process.env.TWILIO_AUTH_TOKEN;
  const client = twilio(accountSid, token);
  const { phone, message } = req.body;
  // console.log(phone, message);
  client.messages
    .create({
      body: message,
      from: 'YOUR_PHONE_NUMBER',
      to: phone,
    })
    .then((message) =>
      res.json({
        success: true,
      })
    )
    .catch((error) => {
      console.log(error);
      res.json({
        success: false,
      });
    });
}
    JavaScriptは次のコードをペーストします.
    import twilio from 'twilio';

export default function sendMessage(req, res) {
  const accountSid = process.env.TWILIO_ACCOUNT_SID;
  const token = process.env.TWILIO_AUTH_TOKEN;
  const client = twilio(accountSid, token);
  const { phone, message } = req.body;
  // console.log(phone, message);
  client.messages
    .create({
      body: message,
      from: 'YOUR_PHONE_NUMBER',
      to: phone,
    })
    .then((message) =>
      res.json({
        success: true,
      })
    )
    .catch((error) => {
      console.log(error);
      res.json({
        success: false,
      });
    });
}
    上のコードでは、メッセージを送信するコードがここにあります.
    client.messages
    .create({
      body: message,
      from: 'YOUR_PHONE_NUMBER',
      to: phone,
    })
    APIでは、私たちは{success: true} メッセージが送信された場合に{success: false} メッセージが送られなかった場合の応答.
    さて、これは動作します.

    Trial account can only send messages to verified phone numbers, so you can only send the messages to the number that you used while verifying the Twilio account and if you want to send messages to other numbers, then either you have to upgrade your account or add that number to Verified Caller IDs.

    Protip: If you're a student, then you can apply for Github Student Pack and it will provide $50 credits to your Twilio account.



    結論
    これは、次の使用してテキストメッセージを送信する方法についてのすべてです.ツイリオ.
    この記事が好きです.何か問題があればコメント欄で共有してください.
    GithubのリンクClick Here
    接続してください.

  • Polywork

    • ローカルホストにhttpsを追加する
    SWEA-2001:ハエ退治[java]