Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now
Build the future of communications.
Start building for free

Node.js posts

  • By Dhruv Patel
    Build a Contact Form in Node.js with SendGrid Header

    Contact forms on web applications are essential as it’s great for signups, customer engagement, or even getting feedback from visitors. There are many solutions when it comes to creating contact forms such as using embedded forms. And although embedded forms are easy to implement, building out your own form allows you to have complete transparency and customization of the form and its processing.

    A great solution to send out emails through contact forms is Twilio Sendgrid. SendGrid offers deliverability, scalability and even in-depth metrics and analytics when it comes to email-based solutions such as contact forms. In this post, you’ll learn how to build a basic contact form with SendGrid to let your visitors contact you which can be incorporated into your Node application.

    Stylized contact form

    Prerequisites

    Here is what you will need to complete this tutorial:

    Read More
  • By Dhruv Patel
    Send Email Notifications to Subscribers with SendGrid and Node.js Send Email Notifications to Subscribers with SendGrid and Node.js Header

    Introduction

    Sitting at your device all day waiting for a price drop on a product can be a cumbersome task. An email notification system will ensure that you never miss out on your most coveted item. Whether you’re looking for the hottest pair of shoes or a couch for your living room, it can all be automated to your benefit and make technology work for you.

    In this article, you will learn how to build an email price notification system. To do this, you’ll use the Sneaks API to track sneaker prices and deliver SendGrid email alerts whenever the price of a particular sneaker decreases.

    Prerequisites

    Here is what you will need to follow along with this article:

    Configure Your Environment

    In this section, you will first configure your environment by setting up your SendGrid account, …

    Read More
  • By Stephenie Minami Nakajima
    Creating an OCR Communication App with Tesseract.js and React (Part 2) Creating an OCR Communication App with Tesseract.js and React (Part 2)

    This tutorial is divided into 2 parts: part 1 covers the project setup and front end development, while part 2 covers the back end development and testing of the app.

    Part 1: Creating an OCR Communication App with Tesseract.js and React (Part 1)

    In part 1, we built the front end of this OCR communication app:


    completed app

    Let’s now build the back end.

    Building the back end

    Create .env and server.js files in the root directory of the project.

    First, let’s store the Twilio credentials in the .env file.

    Open the .env file in a text editor and paste the following code:

    TWILIO_ACCOUNT_SID=XXXXX
    TWILIO_AUTH_TOKEN=XXXXX
    TWILIO_PHONE_NUMBER=XXXXX
    

    XXXXX represents a placeholder for Twili …

    Read More
  • By Stephenie Minami Nakajima
    Tesseract.jsとReactでOCRコミュニケーションアプリを作る(前編) Tesseract.jsとReactでOCRコミュニケーションアプリを作る(前編)

    背景

    「OCR」という技術を耳にしたことがありますか?OCRは、Optical Character Recognition(光学文字認識)の略です。手書きや印刷された文字を光学的な手段でデータとして取り込み、文字認識することによってコンピュータープログラムなどで使用できるように変換する技術です。OCRは様々な分野で利用されています。使用例としては、車のナンバープレートを認識し盗難車を検知したり、書籍をデジタル化したりという例があります。Tesseract.jsは100以上の言語に対応するオープンソースのOCRライブラリです。Tesseract.jsは、C言語で開発されたTesseractOCRエンジンをJavaScriptのWebAssemblyにコンパイルしています。Tesseract.jsを使うと、ブラウザでOCRを簡単に利用できます。

    Tesseract.jsの精度は完全ではありません。誤認識する可能性がありますので、これまで手作業で行っていた作業をTesseract.jsで自動化し効率を上げるためなど、補助的な用途での利用を推奨します。

    本稿では、Tesseract.jsとReactを使用し、ブラウザ上で画像のOCR処理を行い、読み取ったテキストをSMSとして送信するアプリの作成方法をご紹介します。

    本稿は前編と後編に分かれており、前編ではプロジェクトのセットアップからフロントエンドの構築までを、後編ではバックエンド側の構築と動作検証についてご紹介いたします。

    後編はこちら:Tesseract.jsとReactでOCRコミュニケ …

    Read More
  • By Stephenie Minami Nakajima
    Tesseract.jsとReactでOCRコミュニケーションアプリを作る(後編) Tesseract.jsとReactでOCRコミュニケーションアプリを作る(後編)

    本稿は前編と後編に分かれており、前編ではプロジェクトのセットアップからフロントエンドの構築までを、後編ではバックエンド側の構築と動作検証についてご紹介いたします。
    前編はこちら:Tesseract.jsとReactでOCRコミュニケーションアプリを作る(前編)

    前編では、以下のOCRコミュニケーションアプリケーションのフロントエンドを構築しました。続いて、バックエンドを構築しましょう。

    アプリ完成イメージ


    バックエンドを構築する

    次に、バックエンドを構築します。

    プロジェクトのルートディレクトリに.envserver.jsファイルを作成してください。

    まずは、Twilioの認証情報を.envファイルに格納します。

    テキストエディタで.envファイルを開き、以下のコードをペーストしてください。

    TWILIO_ACCOUNT_SID=XXXXX
    TWILIO_AUTH_TOKEN=XXXXX
    TWILIO_PHONE_NUMBER=XXXXX
    

    XXXXXの文字列は、Twilioの認証情報のプレースホールダーを表しています。

    TWILIO_ACCOUNT_SIDTWILIO_AUTH_TOKENは、Twilio ConsoleからAccount SIDとAuth Tokenを取得し、XXXXXにペーストしてください。Account SIDとAuth Tokenの取得方法について詳しくは、ヘルプセンターの「Account SIDとAuthTokenの確認方法」を参照してください。

    TWILIO_PHONE_NUMBERは、Twilioから取得した電話番 …

    Read More
  • By Mia Adjei
    Build a Livestreaming Application with Twilio Live and Express Build a Livestreaming Application with Twilio Live and Express

    Twilio Live is finally here! If you have ever wanted to build your own livestreaming application, now is your chance.

    In this tutorial, you will learn how to build a livestreaming application and share your live video feed with your friends, followers, and maybe even the world. For this project, you'll be using Node.js and Express to build the server side of the application, and vanilla JavaScript on the client side.

    Let's get started!

    Prerequisites

    • A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account!)
    • Node.js v14+ and npm installed on your machine.
    • ngrok

    What you will build

    In this tutorial, you will be creating an application that allows a person to livestream video and audio from their device to people who have the link to the stream. The Express server you'll build will handle both the streamer …

    Read More
  • By Stephenie Minami Nakajima
    Building a Delivery Reminder System with Twilio’s Answering Machine Detection (AMD) and Node.js Building a Delivery Reminder System with Twilio’s Answering Machine

    Background

    Twilio offers a wide range of phone related features. Among them, Answering Machine Detection or “AMD” allows you to identify the incoming caller and adjust the call flow accordingly. With AMD, you can determine whether an outgoing call issued from a voice API was answered by a human, an answering machine, or a fax machine. Based on this information, you can update the call and trigger different actions after the call ends.

    This tutorial will show you not only the basic features of AMD, but also how to create a delivery reminder system with it.

    Goal

    By the end of this tutorial, you will learn the basic features of AMD and have a delivery reminder system built using Node.js. This system plays a reminder message if a human answers the call, but if the call is answered by an answering machine it also sends an SMS message like so: …

    Read More
  • By Stephenie Minami Nakajima
    Twilioの留守番電話検出機能(AMD)とNode.jsで配達リマインドシステムを構築する Twilioの留守番電話検出機能(AMD)とNode.jsで配達リマインドシステムを構築する

    背景

    Twilioは電話に関する機能を多岐にわたって提供しています。留守番電話検出機能(Answer Machine Detection、以下「AMD」)もその 1つです。AMDは、着信側を特定し、それに合わせて通話フローを調整できる機能です。AMDを使えば、音声APIからの着信を人間、留守番電話、ファックスのどちらが対応したかを判断できます。この情報に基づいた通話の更新処理や通話終了後の処理の分岐を実装できます。

    このチュートリアルでは、AMDの基本機能や設定方法だけでなく、AMDを使った配達リマインドシステムの作成方法までを紹介します。

    目標

    このチュートリアルを最後まで進めると、AMDの基本機能、設定方法を実践的に学べるとともに、Node.jsを使った配達リマインドシステムを作成できます。この配達リマインドシステムでは、着信者が電話に出た場合は音声リマインドを、留守電だった場合は留守電メッセージを残したうえで以下のようなSMSメッセージを送信します。

    SMSイメージ

    以下の処理フローを実装します。

    実装フローチャート

    想定される技術知識

    本稿では以下の知識を想定しています。

    • JavaScriptの基礎知識
    • Node.jsの基礎知識

    必要なツール

    Read More
  • By Ashley Boucher
    Node.jsとTwilio Functionsを使って音声メッセージを書き起こす Node.jsとTwilio Functionsを使って音声メッセージを書き起こす

    この記事はTwilio Developer VoicesチームのAshley Boucherこちらで公開した記事(英語)を日本語化したものです。

    このチュートリアルでは、Twilio Programmable Voiceを利用して、Twilioの電話番号で電話を受信し、電話の発信者が残した音声メッセージを書き起こす方法をご紹介します。ぜひボイスメールシステムを構築する際の基盤作りにご活用ください。

    必要なもの

    このチュートリアルをスムーズに進めるには、以下の項目が必要です。

    Twilio Functions Serviceを作成する

    Twilioでは、Twilioの電話番号への着信を処理するWebhookを設定できます。

    Webhookを使うには、Webhook用のコードをホストする場所が必要になります。これはサーバーやローカルで動作するアプリケーションでも構いませんが、このチュートリアルではTwilio Functionsを使用します。Twilio Functionsは、サーバーを設置する手間なしにバックエンドサービスを展開できるサーバーレス環境です。

    まず、新しいTwilio Functionを作成しましょう。Twilio ConsoleのFunctionsにアクセスしてください。Create Serviceをクリックしてください。ServiceはFunction、Asset、Environ …

    Read More
  • By Stephenie Minami Nakajima
    Creating a web chat app with Twilio Conversations and Vue.js (Part 1) Creating a web chat app with Twilio Conversations and Vue.js (Part 1)

    Background

    Twilio Conversations is an API that creates a virtual space for users to communicate across multiple channels. Twilio Conversations supports multiple chat platforms for cross and multi-channel communication. For example, a chat started via SMS can be continued via MMS, WhatsApp or web chat. Using the API, you can create conversations, add users, and monitor events during conversations via webhooks, making it possible to implement a communication method tailored to your needs.

    In this tutorial, I will show you how to create a simple web chat app with Twilio Conversations and Vue.js.

    This tutorial is divided into 2 parts: part 1 covers the project setup and back end development, while part 2 covers the front end development and testing of the app.

    Part 2: Creating a web chat app with Twilio Conversations and Vue.js (Part 2)

    Goal

    By the end of this tutorial, you will be able to learn …

    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.