DEV Community: Amanda Cavallaro

Build a Storytelling Service With RCS Rich Cards and Gemini

Amanda Cavallaro — Tue, 19 Aug 2025 14:27:06 +0000

Introduction

This tutorial shows you how to build a generative AI storytelling service using the Vonage Messages API for RCS and Google’s Gemini AI. You'll learn what RCS is, how to send and receive RCS Rich Card messages, and how to integrate Gemini to generate short bedtime stories.

Inspired by my toddler's bedtime routines, I wanted to create something useful. So I combined RCS messaging with Gemini AI to develop a simple storytelling service.

You can find the complete source code on the Vonage Community GitHub repository.

Prerequisites

Node.js is installed on your machine.
An API tunneling service, such as ngrok.
A registered RCS Business Messaging (RBM) agent.
A phone with RCS capabilities.
A Vonage API account.
Vonage API Account
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

How to Get RCS Working on Your Phone

To send and receive RCS messages in your Vonage application, you need a registered RBM agent and a phone with RCS capabilities.

RCS through Vonage is currently only available for managed accounts. You’ll need to contact your account manager to activate Developer Mode, which allows testing with allowlisted numbers.

If you don't have a managed account, reach out to the Vonage Sales Team for support.

Terminology

RCS (Rich Communication Services): An industry standard that enhances traditional messaging with rich media, branded content, and read receipts. If a recipient’s device or network doesn’t support RCS, messages automatically fall back to SMS to ensure they are still delivered.

Learn more in our RCS documentation.

SMS (Short Message Service): Traditional SMS supports only plain text. RCS allows branded buttons, images, and message status updates. Learn to send SMS messages with Node.js.

MMS (Multimedia Messaging Service): Unlike MMS, which often has lower media quality and file size limits, RCS supports high-quality media and features such as typing indicators and delivery status updates. Learn what you can do with MMS and how to send MMS with Node.js.

To create an application, go to the Create an Application page on the Vonage Dashboard, and define a Name for your Application. \
If needed, click on "generate public and private key". A private key (.key file) will be generated. Download and store it securely. This key is needed for authentication when making API requests. Note: Private keys will not work unless the application is saved.
Choose the capabilities you need (e.g., Voice, Messages, RTC, etc.) and provide the required webhooks (e.g., event URLs, answer URLs, or inbound message URLs). These will be described in the tutorial.
To save and deploy, click "Generate new application" to finalize the setup. Your application is now ready to use with Vonage APIs.

Messages API Capability

Start an ngrok Tunneling Instance

If you haven’t used ngrok before, you can start here. I’ve added the steps to run an instance below the image in the next section.

Run the following command to start an ngrok tunneling instance.

ngrok http 3000

In the output, you’ll find a URL that starts with https:// and ends in .ngrok.app/. Make a note of it as you’ll need it for the next step to configure your webhooks.

Forwarding https://94cd51b63460.ngrok.app/ -> http://localhost:8000

Configure Webhooks

Back in the Vonage API Dashboard, under your Apps, toggle the Messages option under capabilities and set your server's public URL from ngrok as the endpoint for inbound messages and events. it should look like: https://94cd51b63460.ngrok.app/webhooks/inbound for inbound and https://94cd51b63460.ngrok.app/webhooks/status for status. If you’d like to learn more about webhooks, you can find information on our Vonage documentation.

Initial Project Setup for Vonage Messages API

Clone the Vonage Community GitHub repository for this project and npm install the dependencies.

npm install express debug @vonage/messages @vonage/server-sdk dotenv

Create the Environment Variables File

Create a .env file in your project root.

VONAGE_APPLICATION_ID=YOUR_VONAGE_APPLICATION_ID, can be found within the application you’ve created

VONAGE_PRIVATE_KEY=./private.key, is the path to the private.key file that was generated when you created your application

RCS_SENDER_ID=YOUR_RCS_SENDER_ID

PHONE_NUMBER=YOUR_PHONE_NUMBER_E164 that will receive the RCS messages

PORT=3000

VONAGE_API_SIGNATURE_SECRET= is the secret used to sign the request that corresponds to the signature secret associated with the api_key included in the JWT claims. You can identify your signature secret on the Dashboard settings

In your project, you'll also find a vonage.js file that contains the Dotenv and Vonage Client Setup.

Add JWT Verification

Add a JWT verification function to verify if the incoming request (e.g., message or call) came from Vonage.

The VONAGE_API_SIGNATURE_SECRET variable is the secret used to sign the request corresponding to the signature secret associated with the API key included in the JWT claims. You can identify your signature secret on the Dashboard settings.

You can learn more about verifying the request.

const verifyJWT = (req) => {
  // Verify if the incoming request came from Vonage
  const jwtToken = req.headers.authorization.split(" ")[1];
  if(!verifySignature(jwtToken, process.env.VONAGE_API_SIGNATURE_SECRET)) {
    console.error("Signature does not match");
    throw new Error("Not a Vonage API request");
  }

  console.log("JWT verified");
}

Make sure to install the @vonage/jwt dependency.

npm install @vonage/jwt

Send an RCS Rich Card Message

In your server.js file, you'll find the finalized code with Gemini integration, but I wanted to give you a starting point on how to send a Rich Card Message in RCS with a hardcoded text so you can have a first experience with it and see it running before any more complex setup, with everything we've set up so far.

Start off by adding the imports and defining your variables.

import Express from "express";

import { RCSCustom, RCSText } from "@vonage/messages";

import { vonage } from "./vonage.js";

import "dotenv/config";

const app = new Express();

const port = process.env.PORT || 3000;

const recipientNumber = process.env.PHONE_NUMBER;

if (!recipientNumber) {

  process.exit(1);

}

if (!process.env.RCS_SENDER_ID) {

  process.exit(1);

}

We'll also use an async wrapper for error handling in routes.

const catchAsync = (fn) => (req, res, next) => {

  fn(req, res, next).catch(next);

};

app.use(Express.json());

app.get(

  "/send-story-request",

  catchAsync(async (req, res) => {

    await sendBedtimeStoryRequest(recipientNumber);

    res.status(200).json({ message: "Bedtime story request sent!" });

  })

);

Create the /webhooks/status endpoint.

app.post(

  "/webhooks/status",

  catchAsync(async (req, res) => {

    res.status(200).json({ ok: true });

  })

);

Create the /webhooks/inbound endpoint.

app.post(

  "/webhooks/inbound",

  catchAsync(async (req, res) => {

    const { channel, message_type, reply, from } = req.body;

    if (channel === 'rcs' && message_type === 'reply' && reply) {

      const receivedId = reply.id;

      const receivedTitle = reply.title;

      if (receivedId === 'GENERATE_STORY_REQUEST' || receivedTitle === 'Generate Story') {

        const replyToNumber = from;

        const helloWorldMessage = "Hello world!";

        await sendRCSGreeting(replyToNumber, helloWorldMessage);

      } else {

        // Unhandled reply

      }

    } else if (channel === 'rcs' && message_type === 'text') {

      if (req.body.text && req.body.text.toLowerCase() === 'generate story') {

        await sendRCSGreeting(from, "Hello world!");

      } else {

        await sendRCSGreeting(from, "I received your message: " + req.body.text);

      }

    }

    res.status(200).json({ ok: true });

  })

);

Add some error handling messages, and the app listens on the defined port (3000).

app.all("*", (req, res) => {

  res.status(404).json({

    status: 404,

    title: "Not Found",

  });

});

app.use((err, req, res, next) => {

  res.status(500).json({

    status: 500,

    title: "Internal Server Error",

    detail: err.message,

  });

});

app.listen(port);

Create the sendBedtimeStoryRequest that sends a new RCS Custom message that says ‘Bedtime Story Generator’, containing a button to generate a new story.

const sendBedtimeStoryRequest = async (number) => {

  const message = new RCSCustom({

    to: number,

    from: process.env.RCS_SENDER_ID,

    custom: {

      contentMessage: {

        richCard: {

          standaloneCard: {

            cardOrientation: "VERTICAL",

            cardContent: {

              title: "Bedtime Story Generator",

              description: 'Tap "Generate Story" for a magical tale!',

              media: {

                height: "MEDIUM",

                contentInfo: {

                  fileUrl:

                    "https://cdn-icons-png.flaticon.com/512/2917/2917637.png",

                },

              },

              suggestions: [

                {

                  reply: {

                    text: "Generate Story",

                    postbackData: "GENERATE_STORY_REQUEST",

                  },

                },

              ],

            },

          },

        },

      },

    },

  });

  try {

    await vonage.messages.send(message);

  } catch (err) {

    if (err.response) {

      err.response.text().catch(() => {});

    }

  }

};

Create the sendRCSGreeting that sends an RCS message using the Vonage Messages API.

const sendRCSGreeting = async (to, messageText) => {

  const message = new RCSText({

    to: to,

    from: process.env.RCS_SENDER_ID,

    text: messageText,

  });

  try {

    await vonage.messages.send(message);

  } catch (err) {

    if (err.response) {

      err.response.text().catch(() => {});

    }

  }

};

To run the app, start the server:

node server.js

Then visit the following URL in your browser, which triggers the first message to the user’s phone, inviting them to generate a story. The JSON confirmation in your browser, along with the received RCS message on your phone, are signs that the system is working.

http://localhost:3000/send-story-request

Integrate Google Gemini

Now that we have the RCS messaging and webhook working, let's add Google Gemini to our storytelling service.

When you navigate to AI Studio), log in, and create a new chat, you can see ‘<>Get Code' at the top right and select your programming language of choice. Choose the model. I've used “Gemini 1.5 Flash Experimental,” but you can choose the one that makes the most sense for your project.

To learn more, visit the Gemini Developer API documentation page.

Install the Gemini SDK

npm install @google/generative-ai

Add your Gemini API key to .env.

GEMINI_API_KEY="YOUR_GEMINI_API_KEY"

Initialize Gemini

import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

const geminiModel = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

Generate Stories with Gemini

With Gemini initialized, we update our/webhooks/inbound handler. When the user clicks "Generate Story," instead of replying "Hello world!", we now call geminiModel.generateContent with a specific prompt for a bedtime story.

The generated text is then sent back to the user using sendGeneratedStory. We also added handling for users who might type "Generate Story" manually.

The sendGeneratedStory function now takes the generated story text and uses RCSText to send it back as a regular RCS text message.

Test the Storytelling Service

To run the app, (re)start the server:

node server.js

Then visit the following URL in your browser: http://localhost:3000/send-story-request

From your device, you'll receive an RCS message. Tap the "Generate Story" to receive a Gemini-created bedtime story.

Conclusion

This tutorial showed you how to build a Gemini-powered storytelling service using Vonage’s RCS API. The last time I did anything related to RCS was in 2020. I participated in a workshop where each attendee was sent an RCS-enabled SIM card. It was nice to get back to working with RCS again, and I can't wait to write more blog posts about this.

Have a question or something to share? Join the conversation on the Vonage Community Slack, stay up to date with the Developer Newsletter, follow us on X (formerly Twitter), and subscribe to our YouTube channel for video tutorials. Stay connected, share your progress, and keep up with the latest developer news, tips, and events!

New Backend Integrations for the Firebase Studio App Prototyping Agent

Amanda Cavallaro — Tue, 20 May 2025 21:26:15 +0000

Announcement

New backend integrations for the Firebase Studio App Prototyping agent were announced today at the Google I/O 2025 Developer Keynote.

Shall we try it out together? Go to the Firebase Studio, and use the App Prototyping agent.

The Use Case We Will Prototype: Improve Your Multifactor Auth With Vonage APIs and Firebase

I've one project I've created (without the Studio), titled Improve Your Multifactor Auth With Vonage APIs and Firebase, which uses Firebase Services to store functions with Cloud Functions, data in the Cloud Firestore database, and Firebase hosting.

While this project wasn't created using the Prototyping agent, I am keen to build something similar and try it out, in theory I should describe an application that needs database and authentication then it is all created using emulators, which is how I do during my testing anyway and then once we click to publish after we set up the Firebase project and project billing account information, Firebase provisions the Firestore, Firebase Auth and App Hosting.

So let's try it out!

Prototype the Agent with AI

I've prototyped the agent using AI, explaining its purpose in the text area.

Blueprint Generation

The blueprint then showed me the features, the style guidelines, and the Authentication and Cloud Firestore under a new section called “Stack”.

I then clicked on the "Prototype this app" button at the bottom of the page.

Preview and Testing

It created a preview, assigned my app the name "SecurePass," which I had not initially given it, and generated a cool UI for me. It's super cool; it's added a login and register button to the navigation bar. It all uses the Firebase Emulator Suite.

It got back to me with the following message:

"OK, let's prototype this app!

The first iteration of your app prototype is ready! Try it out in the preview window and describe the changes you'd like to make below.

Want to make changes directly? Hit the </> button at the top to switch to the code editor, or click below."

As I attempted to interact with the UI, I encountered some dependency issues. I had the option to either edit the code myself or use Gemini to help resolve the issues. I then had to adjust the dependencies and any necessary environment variables.

Publish

When I was ready and happy with the code in the preview at the top right, I clicked on "Publish", which gave me a Firebase project ID, a billing account to choose from and a button to enable firebase services, then finally I could choose between publishing now or later - and there it was, hosted on the cloud, with auth and database enabled!

Final Remarks

This was cool and fast to create. It feels like I'm talking to Gemini, being integrated with Firebase, and everything is magical. It goes beyond using project IDX. Funny thing, I went on the project IDX website to copy and paste for this link, and I see it now turned into Firebase Studio. As they state: "As part of evolving IDX past its preview stages, we are happy to announce that IDX is joining the Firebase family! Firebase Studio will build upon what we've created with IDX by further blending AI-assistance to help you build the next generation of apps.

Your existing IDX workspaces, settings, sharing URLs, and more will continue to work in Firebase Studio. Let's get started!".

Ha, that makes total sense, and I love that it's connected now. Makes the developer's life easier; everything you need is in one tool. I can see myself using this more often. Do you have any specific use cases in mind for how you plan to use this?

Check out the
Top Firebase Studio updates from Google I/O 2025.

Attending Tech Conferences With a Toddler: A DevRel Mom’s Story

Amanda Cavallaro — Mon, 27 Jan 2025 15:49:53 +0000

Introduction

My career didn't have to stop because I became a mother; if anything, my daughter’s existence complements and adds to my story. I am thankful I gave my daughter the experiences I will share in this blog post!

Traveling to speak and attend conferences with a toddler can be an enjoyable experience. You both experience a new place together, meet new people, and learn about new cultures.

Reading a blog post with tips like the ones I’ll share could have saved me from overpacking, learning to set my pride aside and ask for help when needed, managing my expectations, and being realistic.

Pro Tips for Travelling with a Toddler by Plane

When I pack to leave the house before the trip, everything seems to be highly organized and easy to store, but what I've realized is that on the way back, I've never managed to fully put everything back in its state and especially during the trip when you need to get a cup, or a change of clothes quickly, it's hard to keep items tidy. So I find it necessary to leave with a bag that's easy to grab and see things and to leave some empty room because things tend to occupy more space when they are not tidy.

Here’s a list of the main things I would bring for a multi-day tech conference trip. I wouldn’t expect everything to be tidy all the time, but having a home to put things back in and find them does make things more visually accessible.

Cluster Organize per Categories

Toy Bag

My toddler's first flights were all about waving at everyone, opening and closing the tray, and looking out the window; everything was new and fun to explore. Nowadays, she's traveled quite a bit, and at times, long-haul flights, so these are some of the toys I usually have with me that help out.

Magnetic tiles
Mess-free coloring books
Re-stickable stickers

Food Bag

None of the flights I've ever been on offered food suitable for babies, so I had to carry them.

Powdered milk (you might not have access to a fridge, so if it's formula or any powered milk that works for you, that's a good idea)
Milk that comes in liquid form can be stored outside the fridge
Baby food that can be stored outside of the fridge
Bibs/ cutlery
Wipes, muslins

Documents Bag

My document bag is always within hand's reach because I carry many things and a baby, so I wear it as a cross-body bag.

Passports
Letter from the other parent/ responsible in case of traveling solo
Note down your blood type, allergies, or everything else. If you can, translate it into the local language

Electronics Bag

Think of everything you'll need to give your talk at the conference.

Portable charger
Outlet adapter
Phone charger
Laptop
Laptop charger

Baby Change Bag

You get to change diapers in different places and face new challenges.

Diapers/ Underwear (extra potty training items if that's the case)
Wet wipes/ cotton disks
One change of clothes

Medicines Bag

Check if the over-the-counter medications you can buy where you live can be brought with you, and make sure they meet the liquid limits for hand luggage.

Paracetamol / Ibuprofen under 100 ml at most airports or any other medicine you might need with a prescription
Teething medicine

Clothes Bag

I bring a lot of clothes changes. For Devfest Modena, my baby wore a Firebase shirt, and I could hear the comments: "Oh look, that baby is wearing a Firebase shirt—so cool!"

Get stretchy, easy-to-dress clothes, not ones that require too much effort to put on when dressing the child.
Avoid traveling with the clothes you love too much. You might not have access to washing them quickly with the right products, and getting rid of stains after they've been there for days can be harsh. Instead, look for local laundry services or travel with necessary laundry products.

Airport Tips

Going Through X-Ray Security

Usually, you put all your stuff on the belt, take your laptop out of the bag, take the belt off, and take off your shoes. Ugh, that's so annoying! Now, imagine doing it alone with a baby. How?

First, you won't be allowed to use your stroller to walk through. You'll have to carry your baby with you. Ok, alright. What about collecting your things and ensuring the toddler doesn't run away? You can wait to collect the stroller and fasten their seatbelt; you can wait for your baby carrier to come through the x-ray and wear it. You can hold their hands as you're doing everything.

Read Both Airline and Airport Regulations

Milk

When I traveled to a conference in Berlin, I read thoroughly through the airline regulations that allowed me to transport breast milk. However, the airport only allowed breast milk if the baby was with me. She wasn't. A lot of tears were shed from throwing away a liter of milk. I managed to collect and store it throughout the conference, and a sad story: this happened on International Breastfeeding Day.

Liquids

Some airports have started allowing you to carry more than 100 ml. But that's only the case sometimes at both the departure and arrival airports, so double-check everything to save everything.

Some airlines allow toddlers to leave two items by the aircraft's door before they board, but others, especially low-cost airlines, only allow one. Since you'll need the car seat if you use cars or taxis to your destination, it should also go with you. Check before you book, though, because if you have more than one piece and it's not allowed, you'll have to check them.

Arrival

This part is particularly challenging for me because I have a hard time asking for help, so I tried for several trips only to have bags that would go under my seat and not depend on the overhead compartment because that would require asking someone to collect whatever I put up there for me.

I find it particularly challenging at this point when the toddler has sat down for a whole flight, sees everyone standing, wants to walk, and there's a long queue of people waiting. At this point, I already have them in the baby carrier, and my backpack and my cross-body bag are ready.

However, on my last few flights, I've decided to put my pride aside and accept that I need help. I chose this option because of the time I had to walk from leaving the plane to passport control to waiting for the bags on each flight. The embarked bags and stroller could arrive in different areas, even within the same airport and terminal.

The amount of time I already had to babywear a baby and carry bags while waiting became a pain. It made sense to take the babywear and a 4-wheeled handbag in the overhead compartment with me. As I wait for my bag, it's easier and lighter to roll my luggage and let my toddler wander around and stretch their legs rather than worry about a toddler carrying a heavy bag on my back.

Conference Tips

You might be in a different city or country or have timezone differences. Food and sleep times can be changed, and your child might be over- or understimulated, having to sit or walk more than usual. There can be more tantrums, and we need to help them self-regulate, so plan accordingly and allow them time to adapt and adjust.

Not all conferences have the same accessibility and inclusion initiatives. Some events do not allow individuals under a certain age, so it's worth checking beforehand if your child is allowed there. You should also check the code of conduct and the conference website and reach out to the organizers about any questions, especially if policies aren’t clear.

Some events have a parent or quiet room, while others don't. Some are accessible for you to wander around with your stroller, while others don't. Some events have baby-changing rooms, while others don't. You don't have to worry about carrying too many toys at some events, as some sponsored toys keep children entertained. So, if any of these points are overwhelming, reach out to the organizers beforehand and/or plan how to manage these situations in case some are absent.

People treat you exceptionally well at some events, and you feel welcome. Others are looked at and frowned upon for bringing a baby there. It’s essential to manage your expectations; you know yourself better than anyone else, so if a place doesn’t feel very welcoming, maybe consider attending/ speaking at a conference where your presence is valued. At the same time, this is also an opportunity to help the organizers share your feedback.

Networking at conferences with a toddler is fun—you always have an icebreaker topic to start! Because toddlers require attention, I have only as long and deep conversations as possible with the present, but I can catch up with people and make new connections.

There are so many kind people out there; they’ve offered to help by playing a cartoon on their phone, or if they’d like them to serve and bring any food or beverages for me during mealtimes, even offering to let me jump the food line.

I’ve been able to watch some talks and attend workshops when nap time would coincide, but other than that, I’d save to watch the recordings at a later time.

It’s essential to look around and understand how safe the place is; if there are stairs, escalators, places they might have a fall, or objects that could break and hurt them, assessing your surroundings is key to knowing when you can leave them run around a bit and not lose them.

I’ve had not-so-ideal experiences at some conferences; I was so overwhelmed. I thought to myself, I don’t want to attend this conference in the future because some of my breast milk-expressing requests that were asked ahead of the conference time were unmet. After I traveled and arrived home safely, I contacted the organizers, letting them know of everything I went through, and they promised their best efforts to make sure no other new parent would have to go through that in the future. That resonated with me, and I felt comfortable sharing feedback because I am a developer advocate. I advocate for technical content and experience and how included and appreciated, we are to be present at conferences.

Where is the Baby While You're on Stage?

So far, I've asked for help from my friends and family while speaking at conferences. I'd still let organizers know I had a baby to account for unforeseen circumstances.

Depending on the child’s age and the people they’ve been used to seeing or being around, they might resist being in the company of others. What I can share that worked for me was a selection of toys and activities prepared beforehand, in addition to favorite snacks and beverages packed. No one can know my child better than the ones who see her around more often, so being able to share with those who look after your child for that limited amount of time how to offer comfort and entertain her is key.

When I gave a talk at F3 in Prague, Czech Republic, I went on stage baby-wearing my child. I had my friend Laura Morinigo, also a speaker at the event, sit in the front row and be ready to take her if she started crying, so she did. She looked after her, and I babywore her for the talk's first and last minutes.
When I spoke at Devtalks Cluj-Napoca, Romania, my friend Sam Pavlovic looked after her. She was sitting on her stroller, and one exciting thing Sam shared was that because my voice was the one echoing in the room, she kept calm while being in the same room listening to her mom's voice.
At Devfest Modena, Italy, her uncle and aunt looked after her as they lived there. That day, she was very distressed and crying very loudly because she wanted to be near me; their approach was to take her out of the venue so as not to disturb everyone else and offer comfort.

Final Remarks

It's been an incredible ride for me to travel with my under-2-year-old daughter and show her different tech events in various countries. We have visited the Czech Republic, Romania, and Italy and attended countless events together in the UK.

She has been on stage, given away swag, taken public transport, tried local food, slept on planes, and been on plane rides, only wanting to walk the whole time. I've carried strollers up and down stairs, and she's met several people from different nationalities and backgrounds.

If you have more questions or want to share your story, connect with us on the Vonage Developer Slack or @VonageDev on X.

Improve Your Multifactor Auth With Verify and SIM Swap APIs

Amanda Cavallaro — Fri, 23 Aug 2024 13:36:52 +0000

Introduction

SIM Swap attacks impose many risks, including identity theft and identity takeover, to name a few. This tutorial will showcase how to improve security when resetting passwords by checking whether your SIM card was swapped from your mobile phone and sending an SMS to recover the account. The flow uses the Verify API to verify a token and the SIM Swap API to detect if a SIM card was swapped in the last few days. If so, the verification code won’t be sent.

Note: The Network APIs are available in the following countries and Communication Service Providers (CSPs)

Source Code

The application's source code can be found on our GitHub repo.

Prerequisites

A Vonage developer account.
Node.js and npm installed on your machine.
A code/text editor and basic JavaScript knowledge.

Application Architecture

The application follows a client-server architecture. The client handles user interactions through HTML and JavaScript, including entering phone numbers and submitting verification codes. The client and the server communicate via GET/POST requests. The server, developed in Node.js with Express, manages backend logic, including interfacing with Vonage’s SIM Swap and Verify v2 APIs for security checks and authentication.

Create a New Project

Create a new project and change into its directory.
mkdir improve-your-auth && cd improve-your-auth

Start a New Node Project

In your newly created project directory, initialize a new node project. This will create a new package.json file. The -y flag automatically fills in the defaults without asking for the details.

npm init -y

Install the Dependencies

To install all the dependencies in one go, run the following command. It will automatically add them to your package.json file and install them in your project's node_modules directory.

npm install @vonage/server-sdk @vonage/auth axios dotenv express

Create a New Vonage Application

Now that we have specified the folders and dependencies we will use for the project, it's time to create a Vonage Application with Verify and SIM swap capabilities.

After signing up/in for a Vonage account, you can create a new application in the dashboard by navigating to 'Your Applications', clicking to create a new application, giving it a name, such as 'multifactor authentication,' and toggling Verify V2 and Network APIs.

Note: Register your application with Vonage and the Communication Service Providers (CSP) before using the SIM Swap API. If your registration is already approved, you can start building your solution right away. If not, check out our guide on Vonage Network Registration for more details.

Create a public/private key pair for API authentication; this will download a private.key. Add that file to your node project folder.

Server Side Implementation

SIM Swap Overview

The important aspect of the SIM Swap API we will use for this demonstration is the ability to check whether the swap happened in the last few days to let the user know there could have been a potential fraud in case the swap wasn't made by them.

The SIM Swap API strengthens SIM-based authentication methods, including SMS One-Time Passwords and silent authentication. It keeps track of the last SIM swap on a specific mobile number and checks the activation date of a SIM card in real time.

Create the Server File

The server.js file is our main server script that integrates with the Vonage SIM Swap and Verify v2 APIs to authenticate users securely. It also serves the web pages for our banking dashboard and handles user login and verification.

Authentication Function

We need to authenticate our requests to communicate with the SIM Swap API. Here's how we can set up an authentication function using OAuth2. It requires two POST requests, one to retrieve the auth_req_id and the other to get a new access token.

async function authenticate(phone, scope) {
  try {
    const authReqResponse = await axios.post(
      authReqUrl,
      {
        login_hint: phone,
        scope: scope,
      },
      {
        headers: {
          Authorization: `Bearer ${process.env.JWT}`,
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }
    );
    const authReqId = authReqResponse.data.auth_req_id;

    const tokenResponse = await axios.post(
      tokenUrl,
      {
        auth_req_id: authReqId,
        grant_type: "urn:openid:params:grant-type:ciba",
      },
      {
        headers: {
          Authorization: `Bearer ${process.env.JWT}`,
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }
    );
    return tokenResponse.data.access_token;
  } catch (error) {
    console.error(
      "Error during authentication:",
      error.response?.data || error.message
    );
    throw error;
  }
}

SIM Swap Check

The checkSim function checks if the phone number has been swapped recently. It uses the authenticate function to get an access token and then queries the SIM Swap API. I've set a MAX_AGE environment variable, which you can set to the number of hours ago you want to check if the SIM swap happened.

async function checkSim(phoneNumber) {
  try {
    const accessToken = await authenticate(scope);
    const response = await axios.post(simSwapApiUrl, {
      phoneNumber: phoneNumber,
      maxAge: process.env.MAX_AGE,
    }, {
      headers: {
        Authorization: `Bearer ${accessToken}`,
        "Content-Type": "application/json",
      },
    });
    return response.data.swapped;
  } catch (error) {
    console.error("Error checking SIM swap:", error.response?.data || error.message);
    throw error;
  }
}

Add Verify V2 API

The Verify V2 API in our use case allows us to send a verification code to a user's phone number if no recent SIM swap has been detected.

Verification Request

Below, we handle a verification request. If no SIM swap is detected, we proceed with sending a verification code using Verify V2 API:

app.post("/sendcode", async (req, res) => {
  const phone = req.body.phone; // phone number to verify
  if (!await checkSim(phone)) {
    try {
      const response = await vonage.verify2.newRequest({
        brand: "Vonage Bank",
        workflow: [{ channel: Channels.SMS, to: phone }]
      });
      res.json({ message: "Verification code sent.", request_id: response.requestId });
    } catch (error) {
      console.error("Error during verification:", error);
      res.status(500).json({ message: "Error processing request." });
    }
  } else {
    console.log("SIM swap detected. Verification code not sent.");
    res.status(403).json({ message: "Verification denied due to recent SIM swap." });
  }
});

PIN Submission

After receiving the verification code, the user can submit it through our service. Here's how we verify the submitted PIN:

app.post("/verify", async (req, res) => {
  const { pin, requestId } = req.body; // pin and request ID from user input
  try {
    const result = await vonage.verify2.checkCode(requestId, pin);
    if (result === "completed") {
      res.json({ message: "Verification successful." });
    } else {
      res.json({ message: "Invalid PIN. Please try again." });
    }
  } catch (error) {
    console.error("Error during PIN verification:", error);
    res.status(500).json({ message: "Error during PIN verification." });
  }
});

Create the Environment Variables File

Create a .env file for your project and add the environment variables found in the code snippet below. Refer to Michael's blog post for a wonderful explanation of using environment variables in Node.js.

The VONAGE_API_SECRET and VONAGE_API_SECRET can be found on the Vonage Dashboard.

# Your Vonage application 
VONAGE_API_KEY=your_api_key
VONAGE_API_SECRET=your_api_secret
VONAGE_APPLICATION_ID=your_application_id
VONAGE_APPLICATION_PRIVATE_KEY=/path/to/your/private.key

# Use this URL to generate a new JWT: https://developer.vonage.com/en/jwt
JWT=your_jwt_token

# Number of hours to check SIM Swap events
MAX_AGE=72

Client Side Implementation

Add the Content and Styling

In the index.html file, we will add two forms: one for entering a phone number and another for logging in with a PIN. This layout enables the user to authenticate their identity securely. For simplicity and clarity, I am leaving the password in plain text. Of course, in real-life/ production scenarios, you’ll need to encrypt the password and eventually add a Salt value to strengthen the security.

In the main.html file, we will have our bank dashboard, which is accessible once the user successfully logs in.

The style.css file contains the styling for both HTML files. You can use the simple styles I've added for this project, or be creative and create your own!

Add the `client.js` File

In the client.js file, we handle what happens when users fill out forms on our website. It manages the steps where users type in their phone numbers and get a verification code if their SIM card hasn't been swapped out recently.

The script quickly lets users know if they can't be authenticated because of a recent SIM swap or if they will receive a code to proceed with logging in. This ensures that only users with secure accounts can access sensitive features.

Test It Out

To see everything in action, start up the application by running:
node server.js
Then, open your web browser and navigate to:
http://localhost:3000/

Here’s what you should expect: imagine you've forgotten your password. Click on 'Forgot Password' to start the recovery. You'll be prompted to enter your phone number and request verification.

If the application detects a recent SIM swap, a warning pops up: Warning! A recent SIM pairing change related to the User’s mobile account occurred. Proceed?" If you didn't initiate this swap, and you choose 'No, it wasn't me', it's a sign there might be fraud happening with your number. This is your cue to check in with your mobile provider.

Note: In the demonstration, you're prompted to confirm that you've swapped the SIM card, in a real-life scenario likely the user would be invited to directly contact the service provider for additional identity checks.

Similarly, this approach could be applied to multifactor authentication on log in, where a check would occur before sending the one-time token, and if a recent SIM swap is detected, user would be invited to directly contact the service provider for additional identity checks.

On the other hand, if you swapped your SIM and selected 'Yes, it was me,' the app uses the Verify API to send a verification code to your phone. Enter this code on the next screen and set a new password. Once that's done, you can use your new credentials to log into your simulated bank account.

Conclusion

Congratulations, you've reached the end of this tutorial! You've learned to use the Verify API to verify a token and the SIM Swap API to detect if the phone number was swapped in the last few days.

If you have further questions, contact Vonage Community Slack or message us on X.

Read Further

Check out the blog post: Check Verification Code.

You can also learn more about the SIM Swap API in our Developer Documentation.

Learn about Getting Started with The SIM Swap API.

Send SMS Messages with Cloud Functions For Firebase Gen 2

Amanda Cavallaro — Thu, 11 Apr 2024 09:53:37 +0000

Overview

We have a tutorial on How to Send and Receive SMS With Firebase Functions; this blog post tackles the same use case. However, we will create and deploy a second-generation HTTP function using the Google Cloud console and the Vonage Messages API instead of the SMS API.

Setup

You will need a few items to get going:

Firebase Setup

Create a Firebase project in the Firebase console.

Give your project a name that will generate a project ID that you will later choose from the terminal/ command prompt.

If you use Google Analytics, I will not do this project.

Note: Remember to choose the pay-as-you-go billing plan; otherwise, you might get an error similar to "Error: Your project must be on the Blaze (pay-as-you-go) plan to complete this command. Required API artifactregistry.googleapis.com can't be enabled until the upgrade is complete."

Install the Firebase CLI from the command prompt/ terminal:

npm install -g firebase-tools

firebase login
firebase init

You will be prompted to select diverse options, as seen below.

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance, Functions: Configure a Cloud Functions directory and its files

? Please select an option: Use an existing project ? Select a default Firebase project for this directory: vonage-sms-project (vonage-sms-project) (Select here the name of the project you have created. In my case, it is vonage-sms-project (vonage-sms-project)

? It seems like you haven’t initialized Realtime Database in your project yet. Do you want to set it up? (Y/n) Choose Y

? Please choose the location for your default Realtime Database instance:

us-central1

❯ europe-west1

asia-southeast1

In my case Europe-west1 is the closest to me; choose the one that makes more sense to you.

? What file should be used for Realtime Database Security Rules? (database.rules.json)

? What language would you like to use to write Cloud Functions? (Use arrow keys)

❯ JavaScript (Choose JavaScript)

TypeScript

Python

? Do you want to use ESLint to catch probable bugs and enforce style? (y/N)

? Do you want to install dependencies with npm now? (Y/n) ChooseYes. And wait for the dependencies to be installed.

This will set up the required folders and files to get started.

Enable Google Cloud APIs

From the Google Cloud Console, enable the Cloud Functions, Cloud Build, Artifact Registry, Cloud Run, Logging, and Pub/Sub APIs.

First Function: InboundSMS

I’ll show you how to create and deploy the function from the IDE/ code editor. Alternatively, you can create functions from the Google Cloud Functions dashboard.

Open functions/index.js, delete all the code you can see and add the following code to capture incoming SMS messages and log them to the Firebase Realtime Database.

const { onRequest } = require("firebase-functions/v2/https");

const admin = require("firebase-admin");

admin.initializeApp();

exports.inboundSMS = onRequest(async (request, response) => {
  params = request.body;
  await admin.database().ref("/msgq").push(params);
  response.sendStatus(200);
});

Deploy the function from the functions folder.

firebase deploy --only functions

After the function is deployed, you will be given an HTTP URL needed to add to our webhook in the Vonage setup in the next session. It should look like something along the lines of https://us-central1-vonage-project.cloudfunctions.net/inboundSMS; or https://inboundsms-njjebckulq-uc.a.run.app.

Note: Note it because we will need it soon. In case you didn’t make a note of it, you can go to the Google Cloud Functions Overview page, click on the inboundSMS function, and you can find the URL right at the top.

Vonage Setup

From the Vonage Dashboard, set the webhook URL for your number to the function endpoint URL from deployment. It should look like something along the lines of https://us-central1-vonage-project.cloudfunctions.net/inboundSMS or https://inboundsms-njjebckulq-uc.a.run.app.

Install the Vonage Server SDK for Node.js (@vonage/server-sdk).

npm install @vonage/server-sdk

Next, add dotenv to the dependency list.

npm install dotenv --save

Add a file named .env with your Vonage credentials, which can be found in the Vonage Dashboard, and add the following environment variables:

VONAGE_API_KEY=
VONAGE_API_SECRET=
VONAGE_APPLICATION_ID=
VONAGE_PRIVATE_KEY=

Add Vonage to your functions/index.js file.

const { Vonage } = require("@vonage/server-sdk");

const vonage = new Vonage({
  apiKey: VONAGE_API_KEY,
  apiSecret: VONAGE_API_SECRET,
  applicationId: VONAGE_APPLICATION_ID,
  privateKey: VONAGE_PRIVATE_KEY
});

Make sure there's a phone number linked to this application.

Send an SMS to the virtual phone number you purchased and linked to this application.

If you head for your Firebase Realtime database on the dashboard, you can see the msgq node has been updated with the message you sent from your phone.

Second Function: SendSMS

Add the send function that will allow us to send the SMS Message Using the Vonage Messages API that will be logged in the Firebase Realtime database.

const { SMS } = require("@vonage/messages");

const { onValueCreated } = require("firebase-functions/v2/database"); 

exports.sendSMS = onValueCreated("/msgq/{pushId}", async (message) => {
  const { from, text } = message.data.val();

  vonage.messages
    .send(
      new SMS({
        text: text,
        to: from,
        from: "Vonage APIs",
      })
    )
    .then((resp) => console.log(resp))
    .catch((err) => console.error(err));
});

Deploy the functions again from the functions folder.

firebase deploy --only functions

Send an SMS to the virtual phone number you purchased and linked to this application.

If you head for your Firebase Realtime database on the dashboard, you can see the msgq node has been updated with the message you sent from your phone.

When a new message is added to /msgq, this function will be triggered. It will use the Vonage Messages API to respond to the user. The messages sent and submitted will be logged in our Firebase Realtime database.

Note: If you get an error message “Error: secretOrPrivateKey must be an asymmetric key when using ES256” make sure your private key is valid and correct and being imported correctly.

Test it Out

After it is deployed, test it out by sending an SMS message to the number linked to the Vonage application, and you will see the message added to the Firebase Realtime database.

Conclusion

Now, you can send and receive SMS messages using Firebase Cloud Functions Gen 2 and the Vonage Messages API! You have now completed all the steps for this tutorial. You can see the full code on GitHub.

Do you have any questions about this blog post? Join our Vonage Community Slack or message us on X.

Build an Escape Plan With the Vonage Voice API and Get a Ghost Call

Amanda Cavallaro — Wed, 13 Mar 2024 16:57:39 +0000

Overview

In this tutorial, I'll show you how to use the Vonage Voice API to create a subtle way to excuse yourself from a situation you'd rather not be in. You can trigger a ghost call by sending an SMS to a virtual number!

This project's code is on GitHub.

Prerequisites

Before starting to build the project, ensure you have:

A Vonage developer account.
Node.js and npm installed on your machine.
Ngrok for creating a secure tunnel to your localhost.
A text editor and basic JavaScript knowledge.

Use Ngrok to Expose Your Local Server

Ngrok exposes your local webhooks on the public internet and allows you to receive external calls on them:

Start ngrok with ngrok http 3000.
Note the HTTPS forwarding address (e.g., https://xyz.ngrok.com).

Setting Up the Vonage Application

After signing up for a Vonage account:

Create a New Application: Go to 'Your Applications' in the dashboard and toggle the Voice and Messages capabilities.
Generate Credentials: Create a public/private key pair for API authentication; this will download a private.key to be added to our project folder.
Link a Virtual Number: Acquire and link a virtual number to your application.
Configure Webhooks: Set your server's public URL from ngrok as the endpoint for inbound messages and events. it should look like: https://xyz.ngrok.com/inbound for inbound and https://xyz.ngrok.com/event for events.

![Messages Inbound and Status URLs. It shows that the Inbound URL and the Status URL should be filled with the ngrok url followed by /inbound and /status respectively]

Server-Side Implementation

Initial Project Setup

Create a New Project Directory: Open your terminal and navigate where you want to create your new project. Then, use the following command to create and change to a new directory for your project:

   mkdir vonage-ghost-call && cd vonage-ghost-call

Initialize a Node.js Project: In your new project directory, initialize a Node.js project. This will create a package.json file that manages your project's dependencies and scripts. Use the npm init command to specify details or press Enter to accept defaults. The -y flag automatically fills in the defaults without asking for the details.

   npm init -y

Install the Dependencies: Now, it's time to install the dependencies required for the project:

express: A web framework for Node.js.
dotenv: Used to load environment variables from a .env file.
@vonage/server-sdk: The Vonage Server SDK for Node.js.
@vonage/voice: The Vonage Voice API SDK.

To install all these in one go, run the following command, which will automatically add these packages to your package.json file and add them to your project's node_modules directory.

   npm install express dotenv @vonage/server-sdk @vonage/voice

Create the Environment Variables File

Create a .env file in your project and add the following environment found in the code snippet below.

The VONAGE_KEY and VONAGE_SECRET can be found on the Vonage Dashboard.

![Vonage Dashboard. It shows where the API Key and API Secrets are. Right under the text 'API key and API Secret']

The VONAGE_APPLICATION_ID can be found in the application you have created, which can be found in the Vonage Applications.
The FROM_IMPORTANT_FRIEND is the phone number for the phone call.
The ANSWER_URL determines how to handle a call and who to connect the call to. It does that by executing an NCCO that utilizes numerous capabilities of the Voice API; an example value could be https://raw.githubusercontent.com/nexmo-community/ncco-examples/gh-pages/text-to-speech.json.
The PRIVATE_KEY_PATH is the path of the private.key file we downloaded earlier when we generated the public/private key pair for API authentication.

VONAGE_KEY=
VONAGE_SECRET=
VONAGE_APPLICATION_ID=
PRIVATE_KEY_PATH=
ANSWER_URL=
FROM_IMPORTANT_FRIEND=

Implement the Server Side Code

In your index.js file, start the project by importing the required modules. You'll set up Express to handle incoming HTTP requests and configure the Vonage client with credentials stored in your environment variables:

// Import dependencies
require('dotenv').config();
const express = require('express');
const { Vonage } = require('@vonage/server-sdk');
const app = express();

// Middleware for parsing incoming requests
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// Initialize Vonage API client with environment variables
const vonage = new Vonage({
  apiKey: process.env.VONAGE_KEY,
  apiSecret: process.env.VONAGE_SECRET,
  applicationId: process.env.VONAGE_APPLICATION_ID,
  privateKey: process.env.PRIVATE_KEY_PATH
});

Handle Inbound SMS Messages

The server is listening for new SMS messages to come in. When the server gets a new SMS message, it makes an outbound phone call to the phone number that sent the SMS message. This is contained in the server code's /inbound part.

// Route to handle inbound SMS
app.post('/inbound', (req, res) => {
  const { from } = req.body;
  const requesterNumber = from;

  // Function to trigger an outbound call
  triggerOutboundCall(requesterNumber);

  res.status(200).end();
});

// Server listens to a specified port
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`App listening on port ${PORT}`));

Outbound Call Without NCCO

If you need to make an outbound call with a pre-recorded message, you can make the call without specifying an NCCO. The Voice API lets you directly initiate an outbound call and play an audio file to the recipient without configuring advanced call control logic.

function triggerOutboundCall(requesterNumber) {
  const ANSWER_URL = process.env.ANSWER_URL; // URL to NCCO JSON

  vonage.voice.createOutboundCall({
    to: [{ type: type: 'phone', number: requesterNumber }],
    from: { type: 'phone', number: process.env.FROM_IMPORTANT_FRIEND },
    answer_url: [ANSWER_URL]
  }, handleResponse);
}

function handleResponse(err, resp) {
  if (err) console.error(err);
  else console.log(resp);
}

In this setup, ANSWER_URL points to a JSON file that dictates the call flow. For example:

[
  {
    "action": "talk",
    "voiceName": "Amy",
    "text": "There's an urgent need for you elsewhere. Please excuse yourself."
  }
]

Outbound Call With NCCO

For a more tailored call experience, NCCO provides greater flexibility. This is especially useful for dynamic call flows.

async function makeCallWithNCCO(requesterNumber) {
  const ncco = [
    {
      "action": "talk",
      "voiceName": "Amy",
      "text": "Hey, sorry to bother you, but I need your help; an urgent unforeseen circumstance has happened."
    } 
  ];

  try {
    const resp = await vonage.calls.create({
      to: [{ type: 'phone', requesterNumber }],
      from: { type: 'phone', number: process.env.FROM_IMPORTANT_FRIEND },
      ncco
    });
    console.log(resp);
  } catch (err) {
    console.error(err);
  }
}

This function makeCallWithNCCO dynamically creates the call flow based on the NCCO specifications.

In this example, the ncco variable holds an array of actions to control the call. The talk action reads a message when the call is answered.

Steps to Run the Application

Ensure .env has all credentials.
Start the server by running the node index.js command.
Send an SMS message to your virtual number to trigger the ghost call!
The app will place a call with your chosen method - get ready to have a reason to leave that situation you didn’t want to be in!

Conclusion

Today, you've learned how to avoid personal convenience. By sending an SMS message, you can trigger a call that provides a plausible reason to step out of that situation you don’t want to be in using JavaScript, Node.js, and the Vonage Voice API.

This project's code is on GitHub.

Join the discussion and share your insights with us in the Vonage Developer Community on Slack or follow us on X, previously known as Twitter!

Being a First-Time Mom in Developer Relations

Amanda Cavallaro — Wed, 06 Mar 2024 11:34:20 +0000

Life before the Baby

Ever since I was 17, I have lived a busy life juggling work, studies, and volunteer activities. My days were filled with productivity, and my free time was spent resting. I relished the freedom to control my schedule, working whenever I pleased. But then, life threw me a beautiful curveball.

I Am Pregnant! Now What?

When I found out I would have a baby, my head was spinning with so many thoughts and worries. My big question was: how will this affect my job? Like many women, I shared the fear of informing my boss and colleagues about my pregnancy. I was concerned about falling behind in my team's work, keeping up with the broader tech industry, and catching up when I returned from maternity leave. Thankfully, I was lucky to have a team that cares about work-life balance and the well-being of its members.

Conversations with Manager, HR, and the Team

My manager cultivated a culture of support and understanding within the team, making it easier for me to confide in him during the early months of my pregnancy. I felt shielded and protected, knowing I could count on my team's understanding and support. Balancing impending motherhood with work commitments was challenging, but with their assistance, I successfully managed to navigate this delicate phase.

I attended some meetings without turning my camera on and would ask to reschedule for some meetings when I wasn’t feeling my best. The team assigned me to work on some projects that took place during my maternity leave; at the time, they didn't know about my pregnancy, and I wasn't ready to share the big news yet. I didn’t want them to count on me for something I knew I couldn’t commit to, so my manager helped me shift some responsibilities without sharing the news with the broader team before I was ready to do so.

Telling the Developer Relations Team the Big News

When the time came to share my exciting news with the entire developer relations team, I was well-prepared. I had a plan in place that would allow our team workflow to be prepared and continue running smoothly; I prepared hands-off documents, and I made sure all my responsibilities would have enough people to look after them. When I shared the news, the moment grew even more special as I received heartwarming responses, later followed by thoughtful gifts and sweet messages.

What About My Studies?

Navigating university while pregnant was tough, especially at the beginning when I didn't know how to handle the changes. The first thing to suffer was my time management, and the struggle was real.

The thought of pausing my studies crossed my mind as I grappled with the challenges. I wanted to finish my post-graduate degree in Full Stack Web Development before the baby came. Gradually, I started learning to adapt and even reclaimed some of my time even when the struggles of studying some days with morning sickness and fatigue felt so hard.

The support from my family, friends, and understanding coworkers was invaluable. Despite the difficulties, I kept going and proudly graduated with my big pregnant belly!

Being on Maternity Leave and Being Able to Disconnect

I decided to save most of my vacation days for the period leading up to my parental leave. This strategy extended my leave and proved invaluable during the challenging final months of my pregnancy. Disconnecting from work was difficult for someone used to constant productivity because, on many levels, my coworkers became an extended circle of friends, and I found myself missing those interactions and the daily structure that work provides. However, I quickly found myself immersed in preparing for my baby's arrival.

The Baby Is Here!

The arrival of our baby brought immense joy, with grandparents and relatives traveling from afar to meet the newest member of our family. Due to COVID and a desire to keep her safe, we limited her early interactions, venturing out only for peaceful walks in our neighborhood and occasional virtual video introductions.

Coming Back to Work

During the last months of my leave, I had some check-in meetings with my manager, where we caught up and created a plan on what I would work on when I returned to work. It was imperative to me not to go back to work on the first day and feel overwhelmed or left behind, so together, we agreed on the work I would prioritize when coming back. That helped build my confidence, and when my leave was coming to an end, I felt so ready to be back!

I set up my breast pump on the computer table and took the necessary breaks. I also had numerous one-on-one meetings with my team members to share my news, catch up on the latest features and announcements, and found time to watch the weekly meeting recordings.

She Went on Stage as a Keynote Co-speaker

My baby girl joined me on stage as I presented my journey in tech during the keynote of the Women Techmakers International Women’s Day in London. Sharing my story about becoming a mom in tech was an emotional experience, and her presence added a beautiful touch to the moment.

Source - X

New Doors Opened for Me to Think of Inclusion

Becoming a mother fundamentally changed my perspective on tech events. Aspects I hadn't thought about pre-parenthood, like broader accessibility, the availability of parents' rooms, and baby-friendly environments, suddenly became crucial. This shift in focus not only influenced my own experiences but also inspired me to advocate for more inclusive spaces within the tech community, ensuring they cater to the needs of parents and their children.

Traveled to Prague with a Baby

My good friend puf invited me to speak at the Flutter Firebase Festival and I took on the traveling with a baby challenge, and I embarked on a journey to Prague with my little one in tow. I was exposed to a plethora of new experiences.

Planning for the Trip

As a frequent traveler for both personal and business purposes, I prided myself on being a light packer, efficiently organizing and packing what is important with room to bring souvenirs back. However, when the baby came, prioritizing what to pack, what to bring onboard, and how to best store and prepare baby food, among several other things, took it to a whole other level. I had fun in the process and learned a lot, but it was different from what I would call an easy experience.

Being with the Baby at the Tech Events

I brought her to the speaker’s dinner. I was positively overwhelmed with kindness and people offering to help if I needed anything; the same occurred throughout the festival.

I brought her to the keynote and took turns sitting down and letting her walk around on the floor. I sat in the back of the room near the exit in case she needed more attention. That way I could easily leave the room. It turned out that the only times you could hear her excitement was during the keynote moments when everyone was cheering, so she also wanted to show everyone her clapping skills and shout in excitement!

It turns out that having a baby at a conference is an icebreaker, as I had so many interesting conversations from her being there! The conversations ranged from people saying, “You inspired me to bring my kids,” to “I got tired of seeing everything you had to do for your baby. For the next event, I don’t even want to bring mine”.

The Actual Talk and Having the Baby on Stage

I gave a talk with my baby co-speaker and awesome Manuela about building an appointment scheduler using Firebase. I explained the implementation in JavaScript and demonstrated how to use the Vonage APIs to receive SMS messages on their devices; Manuela showed the same experience using Flutter.

I brought a baby carrier that only had a bottom base, without the arm straps, to make it easy to hand my baby over to my good friend Laura. Laura, who was also a speaker at the event, agreed to sit in the front row, ready to take the baby if she grew tired on stage. As expected, the baby needed a break at one point, and Laura took care of her. However, by the end of the talk, the baby was back on stage with me for the question and answer session and to help give away swag!

Support From the Community

The support I received from the community was heartwarming. Fellow attendees offered to help with my baby, ensuring I could eat and take breaks. This sense of camaraderie reinforced my belief in the power of community within the tech industry. I engaged in so many exciting conversations about people telling me how they felt inspired to also bring their little ones to future tech events they are going to attend, and people who asked to share tips as to what’s like to travel to a baby, what to pack, what to have in mind, etc. This exchange of experiences was enriching for all the parties!

When I returned home, I received this supportive message from puf. Ps. my nickname is ‘Chibi’:

“Chibi! I hope you and Marina (you'll have to imagine my best rolling r) made it home safely last night - and that at least one of you is soundly sleeping. What an adventure you've been on!

Marina's first flight, your first tech talk abroad since becoming a mom, and introducing her to the Flutter ＆ Firebase communities with such pizzaz. Sure, she's the cutest kid in the world, we all know that. But you're the one who decided to take all the plunges this trip and changed the shape of the event for all of us because of that.

I am so proud of you. More than that: I'm grateful, so incredibly grateful. Thank you! 🙏❤️”

Redefining Time

Motherhood has redefined my concept of time. I no longer solely control my schedule; I now work around my baby's needs and rely on my support network. My daughter has expanded my horizons, making me proud to bring her along on my developer relations journey.

In Conclusion

Becoming a mom in developer relations has been a remarkable adventure, reshaping my life and career in ways I never imagined. It has taught me the power of adaptability, community, and inclusivity. My journey as a developer advocate and a mother continues to evolve, and I'm excited to inspire others to embrace their unique paths.

Are you also a parent in tech? Let me know your journey as well! You are very welcome to join our Vonage Community Slack or send us a message on X, formerly known as Twitter.

Vonage Joins Bots Brasil Conference 2021

Amanda Cavallaro — Wed, 22 Dec 2021 15:26:04 +0000

Have You Heard of Bots Brasil?

Since 2016, Bots Brasil has been one of the most significant communities in Latin America for conversational interfaces, artificial intelligence, and bots. They have organized events, shared content, and helped professionals and companies in the conversational industry.

Bots Brasil 2021 Conference

In 2021, Bots Brasil organized its 4th annual and first remote conference. This year's theme was "bringing conversations together". As the world has had to adapt to the pandemic, there's been a digital transformation on a global scale. The rise of new technologies and new media has brought communications closer to people at scale.

At Bots Brasil 2021 conference, we explored how the conversational market has helped people and companies to stay close even though they are far away. We were proud to be a gold sponsor.

There were eight tracks:

Careers
Success Cases and Learnings
Curatorship and Computational Linguistics
Diversity and Inclusion
Artificial Intelligence
Integration and Development
Trends and Market
UX Design and Writing

Watch the Talks We’ve Given at the Conference

In this session, we learned to build a Facebook Messenger bot with the Vonage Messages API. This bot tells users whether the restaurant is currently delivering. If the restaurant is closed, it notifies the user when deliveries resume.

In this session, we discussed the Vonage AI solution and described a use case we have done for the Israeli Employment office, in which we reached over 1 million citizens monthly, using voice and WhatsApp bots. This success story was a great way to understand how to use conversational AI to increase the conversation rate and reduce costs in the business communication world.

In this session, we looked at how to assign a phone number to a chatbot created using Dialogflow, Google Cloud, Node.js, and Vonage API integrations. The architecture shown allows the user to call their agent by phone and integrate other services such as SMS and WhatsApp.

There were more than 1500 registrations and 60 live and recorded talks with Brazilian Sign Language (LIBRAS) interpretation. You can check them out in this youtube playlist on Bots Brasil Youtube Channel.

Vonage Booth

Vonage had a booth with Amanda Cavallaro (me!), Daniel Barna, Fábio Flores, and Sidney Gomes during the event's three days.

We had the opportunity and privilege to talk to different people at different levels in their careers and talk about our APIs and bots from different angles and perspectives.

It was a very different experience to be in an online stand at a conference compared to the experience of physically being at a booth. We talked to many different people throughout the day like usual, but showing them the demos was a challenge to replicate online. Regardless, we formed new connections and made an impact!

Final Remarks

It was a remarkable experience to be part of the story of the 4th edition of the Bots Brasil Conference, we even created a video in Brazilian Portuguese explaining what our Developer Relations team does here at Vonage. Watch it below if you're interested!

Next Steps

If you'd like to know more about Bots Brasil, check out their LinkTree.

And if you are interested in bots, please find some links below with content we've covered for you over the years:

Build a WhatsApp Currency Conversion Bot With Node.js

Using Dialogflow with Firebase and the Vonage Messages Sandbox

State Machines for WhatsApp Messaging Bots with Node.js

Add 2FA to a Microsoft bot with Nexmo's Verify API

Build a Facebook Messenger Bot with Messages API and Dialogflow

How to Build a Simple IVR with Ruby on Rails

Build a Simple Customer Support Channel with WhatsApp

Automatically Classify Call Recordings using NLP

Connecting Voice Calls to an Amazon Lex Bot

Build an Interactive Voice Response Menu using Node.js and Express

Creating a Complex IVR System with Ease with XState

Bots and AI: Launching a Bot and Getting It Discovered

Bots and AI: Great Bot Use Cases in Production Today

Bots and AI: Bot Messaging vs. Push Notifications vs. SMS

Bots and AI: What Is a Bot Platform, Exactly?

Bots and AI: Mastering Invocation Names for Alexa Skills

Bots and AI: How Personal Will Personal Assistants Be?

Send and Receive SMS Messages with Firebase Functions | One Dev Minute

Amanda Cavallaro — Wed, 22 Dec 2021 15:21:22 +0000

Welcome to One Dev Minute! This series is hosted on the Vonage Dev YouTube channel. The goal of this video series is to share knowledge in a bite-sized manner.

This quick walk-through will show you how to create an SMS message log and a response to the sender using Firebase Cloud Functions and the Real Time Database alongside the Vonage SMS API.

Transcript

You can send SMS messages using Cloud Functions for Firebase.

You'll need to create a couple of accounts:

a Firebase
and a Vonage API one.

Create the project in the Firebase console and choose whether or not you will use Analytics.

Wait for your project to be created.

Select the Firebase billing plan, in this case, it is the pay as you go.

In the Command line, install the Firebase tools.

Initialize the Cloud Functions for Firebase.

Install the dependencies we are going to use inside the functions folder.

Create a .env file and add the Vonage environment variables there.

Inside the file index.js, add all the required dependencies and environment variables and initialize Firebase.

In the same file, create the first function which will act as a webhook to capture and log incoming SMS messages from a Vonage phone number.

Let's then create a function for Firebase to send the response SMS and to react to database updates.

Deploy the function, send an SMS message from your phone to the Vonage application phone number.

You'll then receive a response SMS message on your phone and an update to Firebase Real-Time Database.

You can find the full code on GitHub. Thank you for watching and happy coding!

Links

This Tutorial's Code on GitHub.

Find the Written Tutorial Here.

Check Out the Developer Documentation.

Details About Vonage SMS Functionality.

Getting Started with Firebase Functions.

Call Control Objects (NCCOs) | One Dev Minute

Amanda Cavallaro — Wed, 22 Dec 2021 13:22:54 +0000

Welcome to One Dev Minute! This series is hosted on the Vonage Dev YouTube channel. The goal of this video series is to share knowledge in a bite-sized manner.

In this video, Amanda Cavallaro, our Developer Advocate, talks about the Call Control Objects, which are a set of actions that instruct Vonage how to control the call to your Vonage application. For instance, you can connect a call, send synthesized speech using talk, stream audio, or record a call.

Transcript

A Call Control Object - or an NCCO - is a set of instructions that a voice call will follow.

An NCCO is composed of one or more actions. Their order is important, as it describes the flow of the call. Options are used to customize an action. A Call Control Object is represented by a JSON array.

In this example, we can see a connect action with the options to make a call from a given number to an endpoint of type phone with a number.

This second example is similar to the first one, but instead, it makes a call from a given phone number to an endpoint of type app, connecting to a client app, and we are also sending updates from the event URL.

You can join multiple calls into one conversation conference call.
In this example, you can see one action talk with a descriptive text showing you’re joining a conference. It's followed by an action that creates the conversation for the conference call.

We can also leverage speech recognition. Here’s a code snippet that shows how to handle a user's input.

We can accept Dual Tone Multi Frequency (DTMF), speech, or both.

You can learn further from the links below.

Links

More resources related to NCCO:

NCCO Guide

NCCO Reference

NCCO Examples Collection

Call Flow

Join the Vonage Developer Community Slack

Speaking at a Twitter Space

Amanda Cavallaro — Thu, 24 Jun 2021 17:15:59 +0000

Have you seen Twitter Spaces before? It is a relatively new way to have live audio conversations with a group of people on Twitter.

@eddiejaoude invited me to speak at "Creating content like a pro" on Twitter Spaces.

I was a little anxious because the share button content was just to a "reminder" to join. I am so used to having a link to some actual call.

So when the clock stroke 17:30 there I was ready to click at the top of twitter space on the twitter app on my android phone.

I clicked to request speaker privileges and Eddie promptly accepted it. If at any time I no longer want this privilege I can click on the gear and select "switch to listening".

I started exploring the UI and seeing if I could...perhaps speak on the chat? There is no chat! Oh but there are reactions, ok that is familiar! There are live captions which is also great for accessibility!

The very first seconds I thought to myself: how does it work? How will I know when it's my turn to talk? How will I know I am not speaking over someone else?

To my good surprise Eddie started guiding us, asking us to introduce ourselves and whenever there was a question from the audience, Eddie would promptly keep track of the speakers who unmuted themselves and get back to them after the other speaker gave their response.

I must say I enjoyed this type of interaction because even if you are a "speaker" it is a conversation so I could learn a lot from the others as well!

Tools I Use

Amanda Cavallaro — Thu, 10 Jun 2021 09:31:51 +0000

Microphone and Headphones
Focusrite Scarlett 2i2 (Professional recording)
AudioTechnica BPSH1 (Professional recording)
Trust GXT 232 (Everyday)
Bose 7000 (Everyday)

Lights
2 Neewman

Webcam
Logitech BRIO 4k
OBS Virtual camera.

Background
Greenscale attached to the chair
This OBS tutorial by Hanselman really helped me out.

Video Recording/Streaming Software
I show u instant
OBS

Screen controller
Switch Res X

Online Platforms
Streamyard
Youtube
Twitch

Post Production/ Editing
iMovie
Adobe suite

Desktop setup ideas:
// Detect dark theme var iframe = document.getElementById('tweet-1393617682780598275-226'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1393617682780598275&theme=dark" }

What about you, which tools do you use?

DEV Community: Amanda Cavallaro

Build a Storytelling Service With RCS Rich Cards and Gemini

Introduction

Prerequisites

How to Get RCS Working on Your Phone

Terminology

Messages API Capability

Start an ngrok Tunneling Instance

Configure Webhooks

Initial Project Setup for Vonage Messages API

Create the Environment Variables File

Add JWT Verification

Send an RCS Rich Card Message

Integrate Google Gemini

Install the Gemini SDK

Initialize Gemini

Generate Stories with Gemini

Test the Storytelling Service

New Backend Integrations for the Firebase Studio App Prototyping Agent

Announcement

The Use Case We Will Prototype: Improve Your Multifactor Auth With Vonage APIs and Firebase

Prototype the Agent with AI

Blueprint Generation

Preview and Testing

Publish

Final Remarks

Attending Tech Conferences With a Toddler: A DevRel Mom’s Story

Introduction

Pro Tips for Travelling with a Toddler by Plane

Cluster Organize per Categories

Toy Bag

Food Bag

Documents Bag

Electronics Bag

Baby Change Bag

Medicines Bag

Clothes Bag

Airport Tips

Going Through X-Ray Security

Read Both Airline and Airport Regulations

Milk

Liquids

Arrival

Conference Tips

Where is the Baby While You're on Stage?

Final Remarks

Improve Your Multifactor Auth With Verify and SIM Swap APIs

Introduction

Source Code

Prerequisites

Application Architecture

Create a New Project

Start a New Node Project

Install the Dependencies

Create a New Vonage Application

Server Side Implementation

SIM Swap Overview

Create the Server File

Authentication Function

SIM Swap Check

Add Verify V2 API

Verification Request

PIN Submission

Create the Environment Variables File

Client Side Implementation

Add the Content and Styling

Add the client.js File

Test It Out

Conclusion

Read Further

Send SMS Messages with Cloud Functions For Firebase Gen 2

Overview

Setup

Firebase Setup

Enable Google Cloud APIs

First Function: InboundSMS

Vonage Setup

Second Function: SendSMS

Test it Out

C﻿onclusion

Add the `client.js` File

Conclusion