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 Phil Nash
    Build a competition entry chat bot with Twilio Autopilot and Facebook Messenger Build a competition entry chat bot with Twilio Autopilot and Facebook Messenger

    The Apprentice is back on TV screens around Asia, and Twilio is the official technology partner. Throughout the series Twilio APIs have supported the show and candidates; delivering notification messages to the teams, powering their solutions in episode 11, and running a Watch & Win competition for the viewers.

    The Watch & Win competition was implemented as a chatbot over Facebook Messenger. In this post we will look at how you can build your own competition bot using Twilio Autopilot, Twilio Functions and Airtable.

    A screen grab of talking with a bot over Facebook Messenger. It asks a question, I respond with the answer, then it asks for my name which I also respond to.

    Defining the competition

    To build a watch and win competition bot, we need a few parameters for how the bot will work:

    • The competition will run every week that the show is broadcasting, with a new question per episode
    • The question will include a phrase that was said during the week's episode and three options for who said it
    • Viewers can enter …
    Read More
  • By Phil Nash
    Umwandeln von Sprache in Text im Browser mit der Web Speech API Umwandeln von Sprache in Text im Browser mit der Web Speech API


    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von Speech to text in the browser with the Web Speech API. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Die Web Speech API bietet zwei Funktionen: die Sprachsynthese, auch als Text-to-Speech bezeichnet, und die Spracherkennung, also das Umwandeln von Sprache in Text. In einem früheren Blog bin ich auf die Sprachsynthese eingegangen, hier untersuche ich, wie Browser mithilfe der SpeechRecognition API Sprache erkennen und transkribieren.

    Wenn wir in der Lage sind, Sprachbefehle von Benutzern zu verarbeiten, können wir immersivere Benutzeroberflächen entwerfen. Dies ist wichtig, weil Benutzer gerne ihre Stimme verwenden. Google meldete 2018, dass 27 % der weltweiten Online-Bevölkerung die Sprachsuche auf Mobilgeräten nutzen. Mit Spracherkennung im Browser sorgen wir …

    Read More
  • By Phil Nash
    Einrichten einer React-App mit einem Node.js-Server-Proxy Einrichten einer React-App mit einem Node.js-Server-Proxy

    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von Set up a React app with a Node.js server proxy. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Create React App ist ein hervorragendes Tool zur Einrichtung einer reibungslos funktionierenden React-Anwendung. Beim Entwickeln oder Erstellen eines Prototyps für eine Anwendung, die eine serverseitige Komponente erfordert, z. B. die Generierung von Zugriffstokens für Twilio Video oder Chat, ist der Vorteil nicht sofort offensichtlich. Ich empfand es am einfachsten, mit einem Server innerhalb desselben Projekts zu arbeiten, um alles über nur einen Befehl zu starten.

    In diesem Artikel erfährst du, wie du einen Express-Server einrichtest, der zusammen mit der React-App ausgeführt wird. Falls du nicht so lange warten möchtest, kannst du direkt zum Startprojekt …

    Read More
  • By Phil Nash
    ReactアプリにNode.jsサーバープロキシを設定する方法 Node.js + Express

    この記事はTwilio Developer EvangelistのPhil Nashがこちらで執筆した記事の日本語版です。執筆から時間が経過しているため、2021年5月時点で動作確認を行い、一部オリジナルの記事よりコードを修正しています。

    Create React Appは、Reactアプリケーションを稼働させるための優れたツールです。Twilio Videoチャット用のアクセストークン生成など、サーバーサイドコンポーネントを必要とするアプリケーションを構築、試作する場合ではどうでしょうか。1つのコマンドですべてを動かせるため、同じプロジェクト内で1台のサーバーを操作するのが最も簡単です。

    この記事を最後まで読むと、Reactアプリと連動するExpressサーバーの設定方法を理解できるようになります。お急ぎの場合は、GitHubのスタータープロジェクトをご覧ください。

    動作の仕組み

    Create React Apppackage.jsonで設定できるオプションには、text/html以外のリクエストを別のバックエンドにプロキシするものがあります。この機能を利用すると、あらゆる場所で稼働しているアプリケーションにプロキシすることができますが、今回はReactプロジェクト内でサーバーを実行できるようにしたいと思います。

    ここでは、1つのコマンドでReactアプリとExpressサーバーを同時に実行できるようにするために、いくつかのnpmモジュールをまとめて、プロキシできるようにします。

    はじめに

    以降の手順では、Node.jsとnpmをインストールしてお …

    Read More
  • By Phil Nash
    Web Speech APIを利用しブラウザで音声を認識する方法 Speech recognition browser web speech api jp

    この記事はTwilio Developer EvangelistのPhil Nashこちらで公開した記事の日本語版です。

    Web Speech APIには、音声合成(text to speech)と、音声認識(speech to text)という2つの機能があります。以前の記事では音声合成について解説しましたが、今回はSpeechRecognition APIを利用したブラウザの音声認識、音声書き起こし方法について解説します。

    ユーザーが発する音声コマンドを認識できれば、通常よりも没入感のあるインターフェースを提供でき、音声操作を好むユーザーを獲得しやすくなります。2018年のGoogleの報告によると、全世界のオンライン人口のうち27%がモバイルデバイスで音声検索を使用しています。今回解説するブラウザの音声認識機能を用いて、あなたのWebアプリケーションで基本的な音声検索からインタラクティブbotまで、多岐にわたる機能を提供できます。

    次のセクションからAPIのしくみを理解し、何ができるか実際に確認してみましょう。

    必要なもの

    APIを実際に体験できるサンプルアプリケーションを作成するために次のツールを用意します。


    今回はHTML、CSS、JavaScriptを使用してアプリケーションを作成します。作業用の新しいディレクトリを作成し、このディレクトリにstarter HTMLCSSを保存します。保存したHTMLファイルをブラウザで開くと以下のスクリーンショットと同じ画面が表示されます。

    speech to text sample app

    次のセクション …

    Read More
  • By Phil Nash
    Build a stock quote SMS bot with Twilio and TypeScript Build a stock quote SMS bot with Twilio and TypeScript

    We've seen how to send an SMS with TypeScript and how to receive and reply to SMS messages with TypeScript. Now let's create something we could use! If you're into investing, you can never have too many ways to check in on the stock market, so let's build an application you can send a stock symbol to and get back a stock quote.

    In this post we will build a Node.js application with TypeScript, using Express, the Twilio Node package, and the Finnhub API to reply to incoming SMS messages with stock quotes.

    What you will need

    To build the application in this post you will need:

    Read More
  • By Phil Nash
    HTML属性を使い、ユーザーに優しい2要素認証を実現する方法 HTML attributes to improve your user's two factor authentication experience

    この記事はTwilio Developer EvangelistのPhil Nashこちらで公開した記事の日本語版です。

    ユーザーから見ると、ログイン操作、特に2要素認証コードの入力は面倒なものです。開発者として、アカウントセキュリティ要件を満たすアプリケーション構築は必須ですが、快適な操作性にも気を配る必要があります。この2つの要件がトレードオフに感じることもあるでしょう。

    この記事では、基本的な<input>要素とHTML属性に焦点を当て、スピーディーな2要素認証を実現する方法を解説します。

    デフォルトのユーザー体験

    <form action="/sessions/check-2fa" method="POST">
      <div>
        <label for="token">Please enter the code you were sent:</label>
        <input type="text" name="token" id="token" /> 
      </div>
      <button type="submit">Check token</button>
    </form>
    

    このままでも、使いやすいフォームです。<input>には名前と一意のIDを割り当てます。<label>には、適切なfor属性を明確に割り当てます。これはアクセス性を確保するために重要です。<input& …

    Read More
  • By Phil Nash
    Como implementar o compartilhamento de tela no seu app de Vídeo da Twilio Como implementar o compartilhamento de tela no seu app de Vídeo da Twilio

    Em posts recentes vimos como gravar a tela de um usuário usando o Chrome e o Firefox. Agora está na hora de combinarmos esta funcionalidade com uma aplicação de videoconferência, agregando o compartilhamento de tela com nosso chat de vídeo.

    O que estamos construindo

    Neste post, vamos começar pelo quickstart de aplicação de vídeo da Twilio e adicionar o compartilhamento de tela nele. Quando terminarmos, a aplicação vai te permitir fazer chamadas entre navegadores e compartilhar a tela entre eles.

    Exemplo do projeto final em execução

    Do que você vai precisar

    Para construir esta aplicação, você vai precisar de algumas coisas:

    Read More
  • By Phil Nash
    Configurer une application React avec un serveur proxy Node.js react-node-js-serveur-proxy-express

    Create react app est un excellent outil pour avoir une application React qui tourne en un rien de temps. Mais c’est un peu plus brouillon quand il s’agit de créer ou de prototyper une application nécessitant un composant côté serveur - comme la création de token d'accès pour Twilio Video ou Chat.

    J'ai trouvé qu'il était plus facile de travailler sur un serveur au sein du même projet, afin de pouvoir tout démarrer avec une seule commande.

    À la fin de cet article, vous aurez appris à configurer un serveur Express qui fonctionne avec une application React.

    Si vous êtes pressés, vous pouvez directement aller voir le code sur GitHub.

    Comment ça marche ?

    Il existe une option que vous pouvez définir dans le package.json de Create React App. Elle permet de rediriger les requêtes qui ne sont pas au format text/html vers un autre back-end.

    Aujourd'hui, …

    Read More
  • By Phil Nash
    How to receive and reply to SMS messages with TypeScript and Twilio Hoqw to receive and reply to SMS messages with TypeScript and Twilio

    We've looked at how to send an SMS using TypeScript, but with Twilio you can also receive and reply to incoming SMS messages.

    When you send an SMS message to your Twilio phone number, Twilio will send a webhook, an HTTP request with all the details about the message, to a URL you associate with that number. You can reply to the message by responding to the webhook with TwiML (Twilio Markup Language).

    In this post we will build a Node.js application with TypeScript, using Express and the Twilio Node package to reply to incoming SMS messages.

    What you need

    To follow this tutorial you will need:

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