Build the future of communications.
Start Building for Free

React posts

  • By Oluyemi Olususi
    SymfonyとReactでシングルページアプリケーションを構築する SymfonyとReactでシングルページアプリケーションを構築する

    この記事はOluyemi Olususiこちらで公開した記事(英語)を日本語化したものです。

    はじめに

    PHPで構築されたWebアプリケーションは、優れたユーザー体験を提供するために、フロントエンドで処理される膨大な量のロジックを必要とします。LaravelなどのPHPフレームワークには、Vue.jsを使用してクライアント側のロジックを作成するためのサポートが含まれています。これにより、開発者はこれらの技術を組み合わせることで、アプリケーションを迅速に構築できます。

    Laravelの構造とは逆に、再利用可能なPHPコンポーネントを提供するSymfonyは、特定のライブラリやフロントエンドフレームワークを選びません。開発者は、アプリケーションのフロントエンドのロジックを担うツールを柔軟に選ぶことができます。このチュートリアルでは、SymfonyとReactを使ってシングルページのアプリケーションをシームレスに構築する方法をご紹介します。

    このチュートリアルを最後まで進めると、ReactとSymfonyで作られた再利用可能なユーザーインターフェースコンポーネントを作る方法を学べます。

    前提条件

    このチュートリアルを最後まで進めるには、ReactやSymfonyでアプリケーションを構築するための基本的な知識と、PHPによるオブジェクト指向プログラミングの適度な知識が必要です。

    また、開発するマシンにはNode.jsYarnパッケージマネージャがインストールされていることが必要となります。最後に、依存関係を管理するために、Composerをインストールする必 …

    Read More
  • By Miguel Grinberg
    Synchronized State Variables for React using Twilio Sync Synchronized State Variables for React using Twilio Sync

    State variables are one of the most important building blocks in front end applications developed with the React library. When a state variable is updated, React automatically re-renders any application components that depend on it, ensuring that the application always displays updated information to the user.

    The automatic state update mechanisms in React are fantastic, but they are limited to a single instance of the application. Sometimes, however, an application needs state variables that are automatically synchronized across all running instances of the application. In this tutorial you are going to learn how to create a custom React hook that implements synchronized state variables using Twilio Sync as a cloud storage back end.

    Tutorial demonstration

    Requirements

    To work on this tutorial you will need the following items:

    Read More
  • By Phil Nash
    TwilioとReactでSMSを送信する方法 TwilioとReactでSMSを送信する方法

    この記事はPhil Nashこちらで公開した記事(英語)を日本語化したものです。

    SMSメッセージをWebアプリケーションから送信する方法はよく紹介されていますが、SMSメッセージをReactアプリケーションから送信することは可能でしょうか?実は、意外と簡単に実装できます。

    本稿では、SMSメッセージをセキュアに送信するReactアプリケーションを構築する方法をご紹介します。

    クライアント側からREST APIを使うべきでない理由

    技術的には、JavaScriptのクライアント側アプリケーションから直接Twilio REST APIを使いSMSを送信できます。ただし、それを実際に実行すると、Twilio認証情報がサイトを使用中の他人に公開される可能性があります。悪意のあるユーザーは、その認証情報を悪用し、アカウントに高額な請求を発生させる可能性もあります。

    ハッカーのイメージ

    認証情報の悪用を避けるために、Twilio REST APIを実装し、認証情報を晒さずにSMSメッセージを送信する、サーバーサイドアプリケーションを作成します。次に、Reactアプリケーションからバックエンドを呼び出し、認証情報をインターネット上に公開せずに、SMSメッセージを送信します。

    必要なツール

    Twilio REST APIを使用し、アプリケーションからテキストメッセージを送信するには、以下の項目が必要になります。

    Read More
  • By Kelley Robinson
    Build phone verification in React Native with Twilio Verify Build phone verification in React Native with Twilio Verify

    SMS verification is a great way to onboard your users, especially in a mobile app where they have access to their text messages. Phone verification can also help ensure unique users, decrease spam and fraud, or can be used for ongoing login verification. There are many options for verifying users, but SMS verification remains a popular choice for its ease of use.

    This blog post will walk you through how to set up a React Native application from scratch and how to use Twilio's purpose built Verify API for SMS phone verification. If you want to skip ahead, you can find the completed code on my GitHub.

    Prerequisites for building phone verification in React Native & Expo

    Set up your React Native developer environment

    We're using ​​Expo CLI and Expo GO for this tutorial which is quick to set up and get running. You can learn more …

    Read More
  • By Mia Adjei
    Build an Audio Livestream App with Twilio Live Build an Audio Livestream App with Twilio Live

    The amount of online audio content and livestreams is increasing every day. More and more, people are tuning into audio for news, music, fitness, study, and entertainment. So if you have been thinking about creating something in the audio space, maybe you have considered building your own live audio application.

    Perhaps you've already explored Twilio Live to livestream your video feed or create a live screen share. But did you know you can use Twilio Live to create an audio-only experience as well?

    In this tutorial, you will learn how to build an audio livestream application with Twilio Live and React, and then deploy it using Twilio Functions and the Twilio Serverless Toolkit. This will allow you to start sharing your live audio with your friends and community right away. In this project, you'll also use the Twilio Paste design system to quickly build and style your …

    Read More
  • By Ashley Boucher
    ReactとTwilio Programmable Videoでカスタムビデオチャットアプリを作成する ReactとTwilio Programmable Videoで作成するカスタムビデオチャットアプリ

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

    このチュートリアルでは、ReactとTwilio Programmable Videoを使用してグループビデオチャット用のWebアプリケーションを作成します。ビデオチャットは友人や家族、同僚とのコミュニケーションに大変便利なツールです。それでは、以下にカスタムビデオチャットアプリを作成する基本手順を紹介します。

    必要条件

    作成するアプリケーションは2つのパートで構成されています。

    1. React.jsのフロントエンド
    2. 任意の言語・プラットフォームで作成されたバックエンド。

    バックエンドはアクセストークンの生成に使用し、ユーザーに権限を付与します。フロントエンドはTwilio Programmable Video JavaScript SDKを使用してビデオチャットロジックを処理します。バックエンドの作成は本稿では説明しませんが、Node.jsユーザー向けにブログ記事「Twilio Functionsを使ってTwilio Chat、Video、Voice用のアクセストークンを生成する」で詳しく説明しています。

    クライアントの作成

    Reactアプリをクローンする

    プログラムの …

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