This project was built as part of the SIGNAL 2021 Developer Spotlight Session. It served as the demo application that we developed on during the session but it's also the code that powers the actual Talon 1 microsite.

This page serves as a collection of all of the resources and demo code covered during the SIGNAL session. If you want to try out the different tools you can use the Twilio CLI and SIGNAL Developer Mode and it's checkout functionality by copy pasting the respective code snippet at the beginning of each section which will open all relevant resources or clone the respective projects onto your system.

Example:

twilio signal:checkout 6f7d66b

📊 You can find the slides over on Speaker Deck

twilio signal:checkout b380e61

Covered Products

• Twilio CodeExchange - Your go-to spot to find prototypes and proof of concept applications
• Quick Deploy - Find applications that you can deploy with the push of a button into your own Twilio account
• Verified Broadcast Template - The template we used during the session to build a subscribe/notify functionality
• Twilio Functions

Source Code

• Verified Broadcast Source Code

Relevant Docs

• Twilio Functions Docs
• Available Runtime Handler Versions
• Request Headers and Cookies Access

twilio signal:checkout 051c794

💻 View Code Changes prototype...ui-setup

Covered Products

• Twilio CLI
• Serverless Toolkit
• Twilio Paste

Source Code

Setup Project

twilio serverless:init example --template=verified-broadcast

Run local development

cd example
twilio serverless:start

Setup build tools and scripts in your package.json

npm install --save-dev react react-dom prop-types parcel-bundler concurrently ncp rimraf

In your package.json

  "scripts": {
+    "prebuild": "rimraf dist"
+    "build": "parcel build src/index.html -d dist",
+    "postbuild": "ncp assets dist",
+    "predeploy": "npm run build",
    "deploy": "twilio-run deploy",
+    "start:web": "parcel watch src/index.html -d dist",
+    "start:twilio": "twilio-run",
+    "prestart": "ncp assets dist",
-    "start": "twilio-run",
+    "start": "concurrently npm:start:web npm:start:twilio"
  },

Modify .twilioserverlessrc to specify an output directory for Assets

{
	"commands": {},
	"environments": {},
	"projects": {},
	// "assets": true 	/* Upload assets. Can be turned off with --no-assets */,
-	// "assetsFolder": "" 	/* Specific folder name to be used for static assets */,
+	"assetsFolder": "dist" 	/* Specific folder name to be used for static assets */,
	// "buildSid": null 	/* An existing Build SID to deploy to the new environment */,

Twilio Paste UI Code

Checkout the code in the src/ directory

Relevant Docs

• Twilio CLI Docs
• Serverless Toolkit Docs
• Twilio Paste Getting Started
• Using a Front-End Framework with Twilio Serverless
• Using Functions with TypeScript

twilio signal:checkout 7b42975

💻 View Code Changes devops-start...devops

Covered Products

• Twilio Provider for Terraform
• Twilio Open API Specs
• Serverless Toolkit (specifically twilio-run)

Source Code

Terraform script for establishing resources

• Check out the main.tf file

Deployment process

• Check out the deploy.bash script

Automatic End-to-End (E2E) test with Mock API

• ci-test-server.js for the script that sets up the different servers and runs Cypress
• e2e_spec.js for the actual Cypress Test
• MockHttpClient.js for the HTTP Client to use in the Twilio library
• prism-server.js for the code to set up a mock server using OpenAPI specs

GitHub Actions CI/CD Example

• Check out the main.yml file

Relevant Docs

• Mock API Generation Docs
• OpenAPI Structure Docs
• Terraform Examples
• Guide on using the Serverless Toolkit in CI/CD
• Guide for using Terraform and Twilio Serverless

twilio signal:checkout 797e820

💻 View Code Changes monitoring-start...monitoring

Covered Products

• Twilio Event Streams
• Segment Twilio Developer Plan
• Segment Developer Toolkit
• Segment Dashboard

Source Code

Create track events from the UI

In useOtp.js:

  function sendVerifyToken(phoneNumber) {
+    analytics.track('Start subscription');

    fetch('/start-verify', {

Retrieving an anonymous ID to send to the backend

In useOtp.js:

+    let anonymousId;
+    try {
+      anonymousId = analytics.user().anonymousId();
+    } catch (err) {
+      anonymousId = undefined;
+    }

    fetch('/subscribe', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
-      body: JSON.stringify({ to: phoneNumber, code, tags }),
+      body: JSON.stringify({ to: phoneNumber, code, tags, anonymousId }),
    })

Create a track event from Twilio Functions

In subscribe.js

    } else {
+      if (event.anonymousId) {
+        analytics.track({
+          anonymousId: event.anonymousId,
+          event: 'Failed Verification',
+        });
+        await analytics.flush();
+      }
      console.error('Incorrect token.');
      response.setStatusCode(401);

Relevant Docs

• Event Streams Docs
• Analytics.js 2.0 docs
• Analytics for Node.js docs

• International Docs:
  • 🇩🇪  Deutsche/German Docs a4854ba
  • 🇫🇷  Français/French Docs afad3fd
  • 🇯🇵  日本語/Japanese Docs 1754b6b
• Twilio Microvisor Pilot Docs f10ab46
• Twilio Go Client 236261c
• Twilio Video Insights 8509081

For a full set of instructions on how to set up this application for local development check out the contributing guide.

MIT