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
  • 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 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
  • By Stephenie Minami Nakajima
    Creating a web chat app with Twilio Conversations and Vue.js (Part 2) Creating a web chat app with Twilio Conversations and Vue.js (Part 2)

    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 1: Creating a web chat app with Twilio Conversations and Vue.js (Part 1)

    In part 1, we set up the project and built the back end of the below chat app. Let’s continue and build the front end.

    Expected user interface of the completed app

    Building the front end

    The front end of the chat app is built using Vue components. The components used in this chat app with a .vue file extension are called single file components. Single file components combine HTML templates, JavaScript logic, and CSS styling into a single file.

    Let’s create single file components for the chat app. Open a new window in the terminal.

    Delete the HelloWorld.vue component that the Vue CLI created by default, and create files named Chat.vue …

    Read More
  • By Stephenie Minami Nakajima
    Twilio ConversationsとVue.jsでチャットアプリケーションを作る(後編) Twilio ConversationsとVueでチャットアプリケーションを作る

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

    前編はこちら:「Twilio ConversationsとVue.jsでチャットアプリケーションを作る(前編)

    フロントエンドを構築する

    フロントエンド側はVueコンポーネントを使って構築します。このチャットアプリケーションで使用するコンポーネントはシングルファイルコンポーネント(Single file component)と呼ばれる、.vue拡張子のコンポーネントです。シングルファイルコンポーネントを使うと、HTMLテンプレート、JavaScriptのロジック、CSSのスタイリングを一つのファイルにまとめることができます。

    まずはVue CLIがデフォルトで作成するHelloWorld.vueコンポーネントを削除し、Chat.vueConversation.vueコンポーネントを作成します。ターミナルで新しいウィンドウを開き、プロジェクトのルートディレクトリから以下のコマンドを実行してください。

    cd src/components
    rm HelloWorld.vue
    touch Chat.vue Conversation.vue
    

    Chat.vueを作成する

    まずは、チャット画面全体を構成するコンポーネントとなるChat.vueを構築します。

    シングルファイルコンポーネントは<template><script>< …

    Read More
  • By Stephenie Minami Nakajima
    Twilio ConversationsとVue.jsでチャットアプリケーションを作る(前編) Twilio ConversationsとVue.jsでチャットアプリケーションを作る(前編)

    背景


    Twilio Conversationsは仮想空間を作成し複数のチャネルでユーザー間のコミュニケーションを実現できる機能です。Twilio Conversationsは複数のチャットプラットフォームに対応しており、クロス、マルチチャネルでのコミュニケーションをサポートします。たとえば、SMSで始めたチャットをMMS、WhatsAppやウェブチャットで続行することができます。また、APIを使って会話の作成やユーザーの追加をしたり、Webhookによる会話中のさまざまなイベントのモニタリングをすることで、あなたのニーズに合わせたコミュニケーション方法を実装できます。

    このチュートリアルでは、Twilio ConversationsとVue.jsでシンプルなウェブチャットアプリケーションを作る方法をご紹介します。


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

    後編はこちら:「Twilio ConversationsとVue.jsでチャットアプリケーションを作る(後編)

    目標

    このチュートリアルを最後まで進めると、Twilio ConversationsとTwilio Conversations JavaScriptクライアントライブラリの使い方を実践的に学べるとともに、以下のようなVue.jsを使ったシンプルなウェブチャットアプリケーションを作成できます。

    完成したアプリのイメージ

    想定される技術知識

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

    • JavaSc …
    Read More
  • By Stephenie Minami Nakajima
    Introducing JavaScript Developer of Technical Content, Stephenie Minami Nakajima Stephenie Minami Nakajima's introduction post banner image

    Ahoy! I’m very excited to be joining Developer Voices at Twilio.

    Have you ever tried learning a second language? Most of us have, perhaps in the form of a mandatory subject at school or out of pure passion. Growing up in a bicultural Australian-Japanese household and having lived in both countries, I have observed both the joy and many headaches of learning languages.

    Becoming fluent in both languages is hard enough. But you’re not done there. There are many aspects of learning languages that you need to take in, and lifelong learning is essential. Keeping both Japanese and English skills sharp, understanding and embracing cultural differences, forming your identity across starkly different cultures and traditions, and the list goes on.

    On moving to Australia from Japan, at first it was overwhelming to be completely immersed in another language. Thanks to my family, friends and teachers who were incredibly patient and …

    Read More
  • By Stephenie Minami Nakajima
    自己紹介:中嶋ステファニーみなみ ー JS Developer of Technical Contentとして入社しました Profile picture of Stephenie Minami Nakajima

    英語版はこちらでご覧いただけます。
    Introducing JavaScript Developer of Technical Content, Stephenie Minami Nakajima

    Ahoy! はじめまして、TwilioのDeveloper VoicesチームにDeveloper of Technical Contentとして入社した中嶋ステファニーみなみです。

    突然ですが、あなたは第二言語を学んだことはありますか?多くの人は学校の必修科目として、あるいは純粋な興味から勉強したことがあるのではないでしょうか。私個人としては、オーストラリアと日本の2つの文化を持つ家庭で育ち、両国に住んだ経験から、言語を学ぶことの楽しさと難しさの両方を実感してきました。

    二つの言語を話せるようになるまでは簡単な道のりではありません。 いざ話せるようになっても、それで終わりではありません。語学学習には様々な側面があり、生涯学習が欠かせません。 両方の言語のスキルを磨き続けること、文化の違いを理解して受け入れること、文化や伝統が大きく異なる中で自分のアイデンティティを形成することなど、直面するハードルは数えればきりがありません。

    私自身も日本からオーストラリアに移住したころ、最初は完全に別の言語に浸る環境に圧倒されました。ですが、家族や友人、先生方からの温かいサポートのおかげで会話を楽しみ、人とのつながりを深め、最終的には失敗することへの恐れを克服し、新しい環境と言語に深い絆を築くことができるようになりました。

    このようなチャレンジは様々な形で、そしてしばしば思いがけない形で報われ …

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