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 Phil Nash
    How to download image files in Ruby MSjyG8qNtcrbONBpWKztYRJqSpr4R2M6K83KXW4dj05n5p1Q2Ez4kQyLxiX69xnjo2gBNd-KleVK_tnzFhPbqCK70HVdlI-BR9H8Dk8KRL8RcwlpsYT5uysgm5ado7pxcASFHP4

    Have you ever needed to download and save an image in your Ruby application? Read on to find out how.

    Plain old Ruby

    The most popular way to download a file without any dependencies is to use the standard library open-uri.

    Kernel#open is a method that you can use to open files, streams, or processes to read to or write from. For example, you can open a file and read its contents with the following code:

    open("./test.txt") do |file|
      puts file.read
    end
    

    open-uri extends Kernel#open so that it can open URIs as if they were files. We can use this to download an image and then save it as a file.

    To do so, we first require open-uri then use the open method to access an image URL. We can then open up a file and write the contents of the image …

    Read More
  • By Phil Nash
    Build a chat app with Twilio and KendoReact Erily36WoEFAAxG6ABO0xY05CilCUyNxBWf1-AiAabiMrPgXYTtyYIm-0d5X5i7p8PXW_Iq1CkmMmlKhi0YKJb0QsmCsGkAF4zQ_QN8oXyYpXujfcso7cO2c9rtRVIej51glTiE

    Twilio Programmable Chat provides an SDK and robust back-end for real time chat applications, but it's missing a front-end. If you need a chat UI, as well as a whole bunch of other useful components, then KendoReact might be what you're looking for.

    Kendo UI provides well designed and tested components that you can use within your React, Angular, Vue and jQuery applications. In this post we will build a Twilio Chat application with React and the KendoReact conversational UI components.

    What you'll need

    If you want to build along with this tutorial, then you'll need a few things:

    Read More
  • By Phil Nash
    Forward fax to email with SendGrid and Node.js gyC1XkaURW4Yt1lWiJTDEtRu2X6-6zDRupZvN337EJbOwMZpu_aL74AYMZvh_xLRxr4qBAYqAP50X1vkbBgjxmWN4eH02Rs91e0E-3Gp5wZXmEu4kuDpoWJG3a7cxUYwPL-KQUE

    It's 2019 and you need to receive a fax. What do you do? You could buy a fax machine, hook it up to a phone line and hand out your number. But it's 2019 not 1979, we're living in the future, so let's grab Node.js, pick a couple of APIs and turn that fax into an email instead.

    We're living in the future, but not the future where we're surrounded by fax machines!

    You're going to need a Twilio account, a SendGrid account and this noise to remind you what you're missing out on as you build your very own fax-to-email converter.

    Receiving a fax

    Rather than bulky machinery we're going to use a Twilio number to receive our incoming faxes. You're going to need a Twilio number that supports fax to build this app, so log in to your Twilio account. You can buy a new number or you may already have one, just look for this icon to show that …

    Read More
  • By Phil Nash
    How to send an SMS from React with Twilio How to send an SMS from React with Twilio

    We talk a lot about sending SMS messages from web applications, but what about sending SMS messages from a React application? There's a bit more to it than just the server-side version, but it won't take us long.

    Why shouldn't I use the REST API from the client-side?

    Technically you could send an SMS using the Twilio REST API directly from a JavaScript client-side application. But (and it's a very big "but") if you were to do that, you would expose your Twilio credentials to anyone using your site. A malicious user could then take those credentials and abuse them, running up a huge bill with your account.

    An animation showing a fake hacker, with a balaclava and extra hands.

    Live view of a hacker with your account credentials

    To avoid this we will create a back end application that implements the Twilio REST API, wraps up your credentials and sends SMS messages for you. Then you can call your …

    Read More
  • By Phil Nash
    Set up a React app with a Node.js server proxy s2-0wBJwglXgY-J1SEQqjxzePIRwX0hewng9LVRP7tyf2KFKfLXJRdvtiSuexoeEpp-h3dsoH7cqqIwNghRfCZdd6ACB9x8FN8K9LwTA-cjdqmYXsGpEkaj_0D_4T3Z-uwEp6eU

    Create React App is a great tool for getting a React application up and running. It's a little less clear when you're building or prototyping an application that requires a server side component, like generating access tokens for Twilio Video or Chat, though. I've found it easiest to work with a server within the same project so that you can start everything up with one command.

    By the end of this post you will learn how to set up an Express server that runs alongside a React app. If you can't wait then you can jump straight into the starter project on GitHub.

    How it works

    There is an option that you can set in Create React App's package.json that proxies non text/html requests through to an alternative back end. You can use this feature to proxy to applications running elsewhere, but today we want to be …

    Read More
  • By Phil Nash
    Audio visualisation with the Web Audio API and React lI7CV0Ljd8jXb6wL-YJevh0h0D2eItC8P9mJtHZ_JgdSzFeR6OqMFcDobpxl73BqKUe-ilMj0BlJumcg8MzNOA11FcSCkR8B-Bx8wRdySdx_3W-UCRUtuLX-nr2jKKG_MrQpbjY

    The Web Audio API is a powerful browser API for creating, manipulating and analysing audio. I'm no musician, so I'll leave the creating and manipulating to the experts. Instead, in this post we're going look at analysing audio. To make things extra interesting, we're going to see how to visualise the audio in a React component with <canvas>.

    When we're done we'll have a React application that can listen to the microphone on your computer and show a waveform to visualise the data.

    Getting started

    We'll need Node.js to run the application, so make sure you have it installed. I've started the application for us, so follow these instructions to get it running:

    1. Clone or download the repo from GitHub
    git clone -b getting-started https://github.com/philnash/react-web-audio.git
    
    1. Change into the directory and install the dependencies with npm
    cd react-web-audio
    npm install
    
    1. Start the application
    npm start
    
    1. Visit localhost:3000 to see the …
    Read More
  • By Phil Nash
    Build a collaborative playlist over WhatsApp with Rails, Twilio, and Spotify ugrWaR5LljMMUPyVEqxuZ926T4rpyZUj4vpt0ObjwSQEo7kWscZbctRvJpNMbTakGAQLg7WF9gitzaELHYRhI9eFxJRHJjd6HRg6kkyBLkqTcrzU9qbx9M4L1Amr6iKSmS_5Dds

    Sharing music over playlists is a great way to discover new and old music. Spotify has collaborative playlists, but I don't like how they let your friends re-order and delete songs from the list. We can fix this by building our own collaborative playlist that only allows additions using the Spotify Web API. With the Twilio API for WhatsApp we can let our friends send in a song whenever they are struck by inspiration.

    In this post we are going to build a WhatsApp bot that can do all of the above using Ruby on Rails.

    Getting started

    To build this application we will need a few things:

    Read More
  • By Phil Nash
    👉 Emoji translations with the 📞 Twilio API for 💬 WhatsApp and Node.js twilio-loves-whatsapp

    I 💖 emojis, so when I heard about the new Twilio API for WhatsApp I wanted to build something emojiriffic. Inspired by Monica Dinculescu’s to_emoji Twitter bot and emoji translator I decided to build a WhatsApp text-to-emoji translator. You can try it out now by sending your message to our WhatsApp number +441745472072.

    An example of sending a message to the app we're going to build. The WhatsApp number responds with the message translated to emoji.

    Here’s how you too can build this app.

    🛠 Tools

    I decided to build this project using Node.js, following in the footsteps of Monica’s projects. WhatsApp messages via Twilio result in webhooks, much the same as receiving an SMS message to a Twilio number, so if you’ve built a Twilio SMS application before this will be familiar. For ease of deploying this, I’m going to build this as a Twilio Function.

    If you want to follow along with building the emoji translator you’ll need:

    Read More
  • By Phil Nash
    Switching cameras during a video chat with Twilio Video switch2

    We’ve looked at how to choose cameras in JavaScript using the mediaDevices API, particularly for the case of mobile devices with a front and back camera, and now it’s time to put that into practice in an application. In this post we will use what we learned to build a camera switcher into a video chat application using Twilio Video.

    Getting started

    We’re going to build this off a slightly modified version of the Twilio Video quickstart application. In order to build this app you will need:

    Clone the repo for this application, …

    Read More
  • By Phil Nash
    Screen capture in Microsoft Edge dhaghi8gCz4DR7oDsoL03H6jOPy25zPmMkdmCmPc7njb01BXjnTaz7hk9ygcwXbaqs__WUfZB7ZZvLhBdjcUjkEaO4IZcvuaeCrXmXPtK5Lr7LvjKB-b9Wq3-XlYOUT5cQ9xtI0

    We’ve looked before at how to capture a user’s screen in Chrome and Firefox. Good news, another browser has support now, Microsoft’s Edge.

    Let’s see how we can capture the screen with Edge.

    The result of the code in this post. When you visit the project in Edge, you can capture the screen and show it in a video on the page.

    What you need

    • The latest version of Edge, which is currently version 42 with EdgeHTML version 17 (if you’re on a Mac like me, you can get a free virtual machine with Windows 10 and Edge installed to test on)
    • A text editor
    • A local web server – I like to use serve for things like this
    • Either ngrok or an equivalent tunnelling service or TLS certificates set up for localhost (we’ll see why later)

    Screen Capture

    Whereas Chrome required an extension to be built and Firefox used getUserMedia with a mediaSource constraint of "screen" to get a handle on the stream of the screen, once again Edge uses a different method. While this doesn’t …

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