Level 0: Twilio Explorer

Project: Getting Started with Twilio - TwiML

Task 1: Configure a development environment

Download a starter project

Let's begin by downloading and configuring a simple starter web app to jump start your Twilio development. The project will provide a basic structure to get up and running quickly with Twilio. The project includes a Twilio helper library , which conveniently wraps requests to Twilio's API into function calls. All Twilio helper libraries are open source, and you can find their source code at the Twilio Github Page .

To download the the starter projects, you will follow the link below then click the 'download zip' button on the right side of the page. To configure the project, follow the instructions detailed in the README file.

  • JavaScript Starter Project
  • .NET Starter Project
  • Java Starter Project
  • PHP Starter Project
  • Python Starter Project
  • Ruby Starter Project
  • note: these links redirect to another website. After you download and configure the project please return back to the Twilio <Skills> site to continue on.


    After you have downloaded the starter project, configure and launch project according to the directions in the README file. Please note that each project uses a unique web framework and has different configuration steps and ways to map code files to URLs to the browser. While the included README file guides you through the setup process, for better perspective you may also want to take a few moments to understand review the your specific framework's documentation to better understand the application.

    Once the project is configured and running you can test that it's setup correctly. Open a web browser and access the starter project home page. Enter your mobile number in the fields provided to test both text messages and phone calls are being sent to the mobile number you provided. If your phone receives both a call and text message, you're ready to go!

    Make your localhost visible to Twilio

    Twilio makes requests to your web application over the public Internet. Most development servers are behind firewalls or NAT , so we need to open a path for Twilio to connect to your server. There are several ways to accomplish this, and if your server is already visible over the Internet you may skip this step.

    To make your application visible over the Internet, we'll make use of ngrok, a utility which provides a public tunnel to your development server, as well as other helpful tools.

    ngrok installation

    1. Review the ngrok website
    2. To install, download ngrok and unzip the executable. Windows install may require additional steps, please see this blog post and configuration utility for more information.
    3. Run ngrok and specify the port of your development server. For example, if your development server is running on port 3000, start ngrok with: ./ngrok http 3000
    4. The ngrok status screen appears. Observe the 'Forwarding' entry. For example: Forwarding http://220a8dee.ngrok.com -> 127.0.0.1:3000. This forwarding entry is an internet accessible URL for your local development environment.
    5. Go ahead and paste your own forwarding URL in a browser and confirm you see the 'hello world' page for the starter project.
    6. View ngrok's 'Inbound Request' logs at http://localhost:4040 . This screen displays all requests to your ngrok URL. This will be helpful to understand and troubleshoot Twilio's webhook requests.

    Please note:

    • REST API requests may be initiated from a local script, a web server is required for TwiML development. Twilio must fetch TwiML files over the net and local XML files won't work be visible to Twilio.
    • If you encounter an invalid hostname response from your application, try this option: ngrok http 1234 -host-header="localhost:1234"
    Test your starter project

    In this step you should have accomplished the following:

    Test Step Troubleshooting
    1. Download the starter project for your language and configure it with your Twilio credentials (instructions are in the project's README file). Launch the project in your web server.
    • If your application doesn't start, you may need to install other dependencies such as a language runtime or framework. Refer to your application or framework's setup page for more details.
    2. View the 'Hello World' page over a public URL using ngrok
    • Ensure you've included the correct port number for your web server as an argument for ngrok
    • Windows issues such as error 400 can be resolved by following these instructions
    • If you receive an application error, check your application server error logs for any related messages
      3. Entered your mobile number in the demo app to send yourself a text message and voice call.
      • Ensure you've accurately set environment variables for your Twilio AccountSid, AuthToken and phone number. Refer to the account dashboard and phone numbers page to find this information.

      When you have completed a test, open your Twilio Call Logs and Twilio Message Logs and view the appropriate entries in the logs. You will need to submit their CallSid and Message Sid in the next section.

      Automated validation

      Loading...

      Please grant Twilio <Skills> read-only access to your Twilio account using the Twilio Connect API. We will use this to validate account configuration and log data related to the project you are submitting. You should only use a dedicated developer account for submitting projects and should not grant access to any production accounts.

      You can revoke access to your account at any time from your Twilio billing page


      You are authorized with Twilio Connect for read-only access to your account and logs.

      You can revoke access to your account at any time from your Twilio billing page

      Now that you have a working app, submit it for automatic validation. Enter the Call SID and Message SID from your tests above:

      Call SID:  
      Message SID:  

       I verify that the work I am submitting is my own and that I comply with the Code of Ethics.

         

      Status: {{validationC.currentAttempt.status}}

      Status: {{validationC.currentAttempt.status}}

      Status: {{validationC.currentAttempt.status}}

      Status: {{test.status}}
       {{item}}

      Next Task: Inbound Calls & Messages



       


      Powered by