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 Kevin Thompson
    How to Build Chat into Ruby on Rails Applications M3gM5qVbtMu9XneBCDDDlPXgDITbX1aUvzgLAdF7D4ks04jbNslXJrzNA-jDBKfk2X181Y3G5ip95xws5ETyHSk5i-n1apG_ITJ_U9BFrEv74S-8fXlFodBDUnSdl5sMlkvUdtNk

    We build web applications for all kinds of projects. If you want to give support agents a way to communicate with customers, or provide your users with a place to share ideas, you might find yourself wanting to add messaging to your application. Let's use Twilio Programmable Chat and Ruby on Rails to build a full-featured chat application from scratch.

    Creating a New Rails App

    First we'll make sure we've got a recent version of Ruby installed, then we'll install Rails and create a new application.

    gem install rails
    rails new twilio-chat
    

    The last command will generate our Rails application in the twilio-chat directory. If we move into our newly created directory and start our server, then visit http://localhost:3000 in our browser, we should see the default Rails server page.

    cd twilio-chat
    rails s
    

    Adding a Default Action

    Now let's return to our terminal and stop our Rails server …

    Read More
  • By Kevin Thompson
    Implementing Chat in JavaScript, Node.js and React Apps rsJHVkPzN6JInuKhnWzcYNV2eCa8K8HZbz6BypiKPkV2YOXF5wQ3spsJlKUNd3afUK9hP1Btb8-3Hz2dWliQcZz_2I3HXzXVzBv8nOaRO7Ywx7LwWTSiCFdhmYnKDINoo-geh_Wx

    If you’re building a chat user interface using JavaScript React, how do you integrate the rest of the backend functionality into your application? In this article, we’ll start by cloning a Git repository with the completed chat interface, then implement Programmable Chat and test sending and receiving messages between multiple users.

    Getting Started

    We’re going to start with a simple React application that has just a few components for submitting and displaying messages. With git and npm installed, we can clone the repository, install the application’s dependencies, and start the application:

    git clone https://github.com/kevinthompson/react-chat-interface
    cd react-chat-interface
    npm install
    npm start
    

    When we start the application, we’ll see a simple chat interface where we can enter a few messages and see them displayed in our message list.

    So far we can only have a one-sided conversation. In order to allow multiple people to chat, …

    Read More
  • By Kevin Thompson
    Building Chat Interfaces Using JavaScript and React Chat interface built with React

    If you’re integrating a service like Twilio’s Programmable Chat into your website, you’re going to need an interface for users to interact with. Let’s use React and a suite of modern development tools to create an application for submitting and displaying chat messages.

    Designing Our Interface

    Before we begin building our chat interface, we should have an idea of what we want to create. Our chat application will have a container with a list of messages, and a form for writing and submitting messages. A simple design might look something like this:

    As we build our our interface, we’ll identify any isolated piece of the UI that might contain its own state and behavior. Those will be our initial React components. In this simple design, the two most distinct areas are the message list and the message form.

    Setting Up Our Development Environment

    Developers working with React commonly use a …

    Read More
  • By Kevin Thompson
    Hacking Pixel Art on Twilio’s SIGNAL Conference Video Wall with Ruby and 23,000 Text Messages

    In May, Twilio set up a massive 40-foot video wall for their SIGNAL conference and handed out hackable wireless badges to every attendee. Once you activated your badge by placing it in one of the podiums in front of the display, you could send commands to a short code that would affect your personal block on the video wall.


    As attendees began activating their badges, you could see squares of the display post their “Ahoy, World!” message and identify their location. It didn’t take long for shapes, words, and large patches of color to begin taking shape on the wall. As soon as I saw what was possible, I had to find a way to draw pixel art on the display.

    Sorting Out SMS Short Code Delivery

    Knowing that all I needed to do was send text messages in order to move and colorize squares on the display, and being …

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