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

JavaScript posts

  • By Ashley Boucher
    Let Users Share Their Online Status in Your App with Express, React, and Twilio Sync syncreact.png

    Twilio Sync is the very cool technology that underpins other Twilio APIs, such as Twilio Conversations. It allows you to add cloud-stored shared state in your app, opening up totally new opportunities for real-time collaboration and connection.

    In this article, you’ll be learning how to use Twilio Sync to show who’s online in your app.

    Prerequisites

    Before you get started with this tutorial, make sure you’ve got the following:

    Set up your app and environment

    This app has two parts: a frontend and a backend. The frontend is the part of your app that your users will actually interact with. Your frontend will use the Twilio Sync JavaScript SDK, which requires a special Access Token in order to get permission to interact with …

    Read More
  • By Mia Adjei
    Build a Video Chat Application with Ruby, JavaScript, and Twilio Programmable Video Build a Video Chat Application with Ruby, JavaScript, and Twilio Programmable Video

    Video chat is a great way to keep in touch with the people you care about or collaborate with others remotely. Perhaps you've always wanted to build your own video chat application but were unsure where to start. Well, you have come to the right place!

    In this tutorial, you will learn how to build your own video chat application using Twilio Programmable Video, Ruby, and JavaScript. The server-side part of the project will be built using Ruby and the Sinatra microframework, while the client side is going to be built with vanilla JavaScript, HTML, and CSS. Sinatra is a lightweight, flexible framework for building Ruby applications. It is also a great place to get started if you are new to Ruby development.

    Prerequisites

    • A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account!)
    • Ruby version 3.0.0+ …
    Read More
  • 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 Lizzie Siegle
    Write to a Notion Database via SMS with Twilio Serverless header image

    Notion is an app that bills itself as "an all-in-one workspace where you can write, plan, collaborate and get organized", letting you take notes, add tasks, manage projects, and more. They recently released their API. Read on to see how to write to a Notion database using Twilio Programmable Messaging, the Twilio Serverless Toolkit, and Twilio Functions.

    video text example

    Prerequisites

    1. A Twilio account - sign up for a free one here and receive an extra $10 if you upgrade through this link.
    2. A Twilio phone number with SMS capabilities - configure one here.
    3. Node.js installed - download it here.
    4. Notion account - download the Mac or iOS app here and make an account (or you can just make an account at that link and use Notion in the browser).
    5. A personal phone number to test the project.

    Get Started with the Notion API

    Go to …

    Read More
  • By Ashley Boucher
    How to Send an MMS with Node.js How to Send an MMS with Node.js

    Twilio is all about powering communication and doing it conveniently and fast in any language.  

    With the help of Twilio and Node.js, you can deliver a quick media message to someone without having to pick up your mobile device.

    In this article, you'll be writing a short JavaScript program to send an MMS in an insanely fast manner. So why wait? Let's get started!

    Tutorial requirements

    Configuration

    You’ll start off by creating a directory to store the files of our project. Inside your favorite terminal, enter:

    mkdir node_mms
    cd node_mms
    

    Your next step is to …

    Read More
  • By Shiori Yamazaki
    Comprendre la différence entre composants fonctionnels et composants de classe dans React difference composants react

    Il existe dans le monde de React deux façons d'écrire des composants React. L'une utilise une fonction, et l'autre une classe. Les composants fonctionnels sont devenus ces derniers temps de plus en plus populaires, mais comment l'expliquer ?

    Grâce à cet article expliquant pas à pas chacun d'eux à travers des exemples de code, vous comprendrez les différences entre composants fonctionnels et composants de classe et pourrez vous plonger dans le monde du React moderne !

    Produire le rendu d'éléments JSX

    Avant toute chose, la grande différence, c'est la syntaxe. Comme son nom l'indique, un composant fonctionnel n'est qu'une simple fonction JavaScript qui renvoie du JSX. Un composant de classe, pour sa part, est une classe JavaScript qui étend React.Component, laquelle comprend une méthode de rendu. Vous trouvez ça déroutant ? Prenons un exemple simple.

    import React from "react";
     
    const FunctionalComponent = () => {
     return <h1>Hello, world</h1>;
    }; …
    Read More
  • By Marcus Battle
    Create a Real-Time Note Collaboration Tool using Twilio Sync, Node.js, and Express.js Create a Real-Time Note Collaboration Tool using Twilio Sync, Node.js, and Express.js

    One of the brightest spots in the future of communication-based apps is the ability to create real-time communication between various devices. Document apps such as Google Docs, Notion, and even iOS Notes are made possible due to the ability to synchronize state and data in real-time.

    Twilio Sync makes this same functionality possible by offering two-way, real-time communication between browsers, mobile devices, and the cloud.

    In this tutorial, we're going to use this state synchronization service to create a real-time note collaboration tool using Twilio Sync. When completed, all users will be able to co-browse the same notepad and type a document together in real-time.

    If you’re still not clear on what Sync does, consider that I wrote this tutorial in Notion. Their synchronization service allowed me to seamlessly switch between my phone and their desktop app without revision conflict. This is the power of real-time synchronization!

    NOTE: …

    Read More
  • By Sam Agnew
    Comment envoyer un message WhatsApp avec JavaScript et Node.js Comment envoyer un message WhatsApp avec JavaScript et Node.js

    WhatsApp est un service de messagerie utilisé partout dans le monde. Avec l'API de messagerie Twilio, vous pouvez envoyer des messages WhatsApp par programmation. Vous allez découvrir comment utiliser JavaScript pour envoyer un message via WhatsApp.

    Configuration de l'environnement de développement

    Commençons par vérifier que nous avons installé et configuré les bons outils pour les opérations que nous allons effectuer. Tout au long de cette publication, nous utiliserons les éléments ci-dessous :

    Voici un guide utile à consulter de manière générale si vous comptez utiliser davantage Twilio et Node.js, ou si vous avez d'autres questions.

    Inscription à Twilio et activation de la Sandbox

    Avant de pouvoir envoyer un message WhatsApp avec votre langage Web, vous devez vous inscrire pour créer un …

    Read More
  • By Luís Leão
    Envie lembretes diários via SMS usando as plataformas Firebase, Node.js e Twilio Enviar lembretes diários via SMS usando as plataformas Firebase, Node.js e Twilio

    Você não precisa amarrar um barbante ao redor do dedo. Usando o Node.js, o Firebase e o Twilio, você pode criar seu próprio aplicativo de lembrete diário via SMS.

    O que você vai precisar

    Usaremos algumas ferramentas para criar esse app. É necessário preparar estes recursos antes de continuar:

    • Twilio: para enviar e receber mensagens SMS. Não tem uma conta do Twilio? Cadastre-se gratuitamente.
    • Firebase: uma API de banco de dados em tempo real. Nós o usaremos para armazenar os usuários que se cadastraram em nosso serviço.
    • Node.js: uma plataforma baseada no tempo de execução JavaScript do Chrome que cria facilmente aplicativos de rede rápidos e escaláveis.

    Programar mensagens SMS com Cron

    Para começar, teremos que instalar alguns pacotes npm. Usaremos o pacote twilio para enviar mensagens de texto e o pacote cron para programar a hora em que queremos enviar essas mensagens. Você pode …

    Read More
  • By Luís Leão
    Atribua tokens de acesso ao vídeo com sua API de vídeo Express + TypeScript Atribua tokens de acesso ao vídeo com sua API de vídeo Express + TypeScript

    Bom, você criou uma API de vídeo com o Programmable Video da Twilio, o Node.js, o TypeScript e o Express. Você adicionou suporte CORS para que seu futuro aplicativo de vídeo seja capaz de acessar recursos em seu servidor. O que vem a seguir?

    Para que os usuários possam realmente se conectar às salas de vídeo em seu aplicativo, eles precisarão ser autenticados usando um token de acesso. Neste tutorial, você atualizará sua API de vídeo Express + TypeScript para adicionar uma nova rota que concede tokens de acesso aos usuários do seu app de vídeo. Vamos começar!

    Pré-requisitos

    Você precisará de:

    • Uma conta gratuita na Twilio. (Cadastre-se aqui e faça o upgrade para uma conta paga, recebendo $ 10 em crédito da Twilio!)
    • Node.js (versão 14.16.1 ou mais recente) e npm instalados na sua máquina.
    • HTTPie ou cURL.
    • O código do tutorial anterior (veja abaixo).

    O restante deste …

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