By 
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.
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 …
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 …
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 …
この記事はTwilio Developer EvangelistのPhil Nashがこちらで執筆した記事の日本語版です。執筆から時間が経過しているため、2021年5月時点で動作確認を行い、一部オリジナルの記事よりコードを修正しています。
Create React Appは、Reactアプリケーションを稼働させるための優れたツールです。Twilio Videoやチャット用のアクセストークン生成など、サーバーサイドコンポーネントを必要とするアプリケーションを構築、試作する場合ではどうでしょうか。1つのコマンドですべてを動かせるため、同じプロジェクト内で1台のサーバーを操作するのが最も簡単です。
この記事を最後まで読むと、Reactアプリと連動するExpressサーバーの設定方法を理解できるようになります。お急ぎの場合は、GitHubのスタータープロジェクトをご覧ください。
動作の仕組み
Create React Appのpackage.jsonで設定できるオプションには、text/html以外のリクエストを別のバックエンドにプロキシするものがあります。この機能を利用すると、あらゆる場所で稼働しているアプリケーションにプロキシすることができますが、今回はReactプロジェクト内でサーバーを実行できるようにしたいと思います。
ここでは、1つのコマンドでReactアプリとExpressサーバーを同時に実行できるようにするために、いくつかのnpmモジュールをまとめて、プロキシできるようにします。
はじめに
以降の手順では、Node.jsとnpmをインストールしてお …
Web Speech APIには、音声合成（text to speech）と、音声認識（speech to text）という2つの機能があります。以前の記事では音声合成について解説しましたが、今回はSpeechRecognition APIを利用したブラウザの音声認識、音声書き起こし方法について解説します。
ユーザーが発する音声コマンドを認識できれば、通常よりも没入感のあるインターフェースを提供でき、音声操作を好むユーザーを獲得しやすくなります。2018年のGoogleの報告によると、全世界のオンライン人口のうち27%がモバイルデバイスで音声検索を使用しています。今回解説するブラウザの音声認識機能を用いて、あなたのWebアプリケーションで基本的な音声検索からインタラクティブbotまで、多岐にわたる機能を提供できます。
次のセクションからAPIのしくみを理解し、何ができるか実際に確認してみましょう。
必要なもの
APIを実際に体験できるサンプルアプリケーションを作成するために次のツールを用意します。
- Google Chrome
- テキストエディタ
今回はHTML、CSS、JavaScriptを使用してアプリケーションを作成します。作業用の新しいディレクトリを作成し、このディレクトリにstarter HTMLとCSSを保存します。保存したHTMLファイルをブラウザで開くと以下のスクリーンショットと同じ画面が表示されます。
次のセクション …
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:
- A Twilio account (if you don't have one yet, sign up for a free Twilio account here and receive $10 credit when you upgrade)
- A Twilio phone number that can send and receive SMS messages
- Node.js installed
- ngrok …
ユーザーから見ると、ログイン操作、特に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& …
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.
Do que você vai precisar
Para construir esta aplicação, você vai precisar de algumas coisas:
- Uma conta no Twilio – você pode se registrar de graça aqui.
- Node.js – Precisamos rodar um servidor para gerar tokens de acesso para o serviço de Vídeo do Twilio.
- A extensão do Chrome que construímos no primeiro post (se você não seguiu este post, haverá uma cópia da extensão no repositório). …
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, …
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:
- A Twilio account (if you don't have one yet, sign up for a free Twilio account here and receive $10 credit when you upgrade)
- A Twilio phone number that can send and receive SMS messages
- Node.js installed
- ngrok so that …