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
    Beginner’s guide to Svelte - From basics to state management and animation Beginner's guide to Svelte

    Background

    Svelte is a JavaScript front-end framework that has been getting a lot of attention in recent years. Svelte was chosen as the most loved tool by developers in the Stack OverFlow Developer Survey 2021. In this tutorial, we’ll introduce Svelte’s basic development methods, as well as advanced topics such as state management and animation.

    Goal

    Learn the basics of Svelte, as well as some advanced development methods, by creating a task management application as shown below.


    Demo of the task management application. The user fills out a form asking for their first and last name. After filling out their name, the user deletes multiple tasks, creates new tasks using the task manager application.

    What’s Svelte?

    Svelte is an open-source front-end framework for creating interactive user interfaces that run in a browser.

    Differences with React and Vue.js

    Svelte, like React and Vue.js, is a component-based JavaScript framework for creating user interfaces.

    However, there is a crucial difference between Svelte and React or Vue.js. Svelte doesn’t use virtual DOM. Svelte is a compiler written in TypeScript that compiles JavaScript at build time, whereas React and …

    Read More
  • By Stephenie Minami Nakajima
    はじめてのSvelte - 基礎から応用まで はじめてのSvelte - 基礎から応用まで

    背景

    JavaScriptのフロントエンド開発に関わる技術は移り変わりが目まぐるしく、日々新しいツールやフレームワークが誕生しています。Svelteも近年注目を集めているフロントエンドフレームワークの一つです。2021年のStackOverFlowの開発者サーベイでは、Svelteが開発者から最も愛されているツールとして選ばれました。本稿では、Svelteの基礎的な開発方法から、Storeを使った状態管理やアニメーションの適用方法など、応用までご紹介します。

    目標

    このチュートリアルを最後まで進めると、Svelteの基礎から応用までを学べるとともに、以下のようなタスク管理アプリを作成できます。

    アプリ完成イメージ

    Svelteとは?

    Svelteは、ブラウザ上で動作するユーザーインターフェースを作成するためのオープンソースフレームワークです。

    ReactやVue.jsとの違い

    SvelteはReactVue.jsと同様に、ユーザーインターフェースを作成するためのコンポーネントベースのJavaScriptフレームワークです。

    しかし、SvelteとReactやVue.jsには決定的な違いがあります。Svelteは仮想DOMを使用しません。SvelteはTypeScriptで書かれたコンパイラであり、ビルド時にJavaScriptをコンパイルするのに対し、ReactやVue.jsは実行時に仮想DOMを使ってアプリケーションコードを解釈します。

    Svelteとほかのフレームワークの違いについて詳しくは、ブログ記事「SvelteとReactの基本を比較」を参照してください。

    Svelteを使う …

    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
    Creating an OCR Communication App with Tesseract.js and React (Part 1) Creating an OCR Communication App with Tesseract.js and React (Part 1)

    Background

    Optical Character Recognition (OCR) is a technology that optically recognizes handwritten or printed characters as data, and converts them into characters that can be used in computer programs. OCR is used in a variety of fields. For example, OCR is used to detect stolen vehicles by recognizing their license plates, and to digitize printed books.

    Tesseract.js is an open source OCR library that supports over 100 languages. Tesseract.js compiles the Tesseract OCR engine written in C into JavaScript WebAssembly. With Tesseract.js, you can easily build OCR programs that run in the browser.

    In this tutorial, we will show you how to build a React application using Tesseract.js to perform OCR on images directly in the browser, and send the recognized text to you as an SMS.

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

    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 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
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.