Introduction

Vonage Cloud Runtime is our cloud-native, serverless development platform engineered to speed up your development process. Code Hub is the home for prebuilt solutions for common communication workflows and browser-based coding environments. Taking advantage of these prebuilt solutions can significantly reduce your development time. Gone are the days of downloading a sample, configuring dependencies, and manually configuring API Keys.

Code Hub's intuitive interface allows you to browse use cases that span our Vonage Messages API, as well as our Voice API, Video API, Number Insight API, and more.

For our Messages API, we have several use cases available today, which include:

• Front.com - Vonage SMS Channel - In this project, using the Vonage Messages API, you will create an SMS connector that will send and receive messages via Front.com Inboxes and Front Application Channels.

• Image ChatGPT Bot - In this project, using the OpenAI API DALL-E, you will create a SMS chatbot that can generate images based on SMS text prompts and also generate alternate images by sending your image via MMS.

• SMS ChatGPT Bot - In this project, using the OpenAI API, you will create an SMS chatbot that will send and receive messages with ChatGPT.

• Schedule an SMS - In this project, you will create a static website that enables you to schedule and send an SMS to a given number using this API.

• Automatic SMS Forwarding - This project enables you to forward incoming messaging to a number using the API - you will specify your forward number when setting up the application. Then, all messages sent to your Vonage phone number will be forwarded to your number.

• Hubspot integration with Vonage Messages API - In this project, you’ll learn how to create a connector that you can use in Hubspot to define custom CRM cards within your contacts and to send SMS via automation workflows.

Today’s blog post will focus on walking through a Messaging use case. If you want to see how Code Hub can help with Voice applications, then click here. Other use cases will be featured in future posts.

Getting Started

Visit Code Hub and scroll through the list of available solutions to familiarize yourself with the user interface. You may also use the search bar if there is something specific that you are looking for.

Code Hub Main Menu

Signing In

Before we begin working with the Messaging use case, you must Sign In to your Vonage account first. If you don't have one, click on Sign Up. Once you have an account and have signed in, you'll notice a few additional options, as shown below.

Signing In

Let's examine the options starting from the Home option going from left to right.

• Home - Always returns you to the main menu.

• Workspaces - Shows the code workspaces that you have created.

• Instances - Shows the deployed instances that you have created.

• Deployed Products - Allows you to manage, launch, or view logs of installed product instances.

• Documentation - Links to our official documentation for the project.

• Region - Shows the current region that you are working out of.

• Signed-in User Account - Your assigned API Key that future deployments will use. If you have multiple API Keys, select from the drop-down you'd like to use.

“Schedule an SMS” Use-case walkthrough

Let’s take the Schedule an SMS use case as our first example.

Schedule an SMS

After you visit the “Schedule an SMS” page, you’ll see three sections:

Overview - A short description of the sample's aims.

Get Code - Allows you to use the Visual Studio Code browser version to try the code, make changes, and instantly deploy it.

Deploy Code - Allows you to deploy the application and see it in action.

You'll also note that you can see when the sample was last created or updated on the upper right-hand side of the screen. If there are multiple versions, you can click on Releases to see them.

To begin, select Deploy Code. Give it an Instance name, ensure the Region selected is closest to you, and click Deploy Code.

Instance Name

You'll notice a popup that denotes that this sample requires a number.

Set up your project deployment

Within the deployment option, you can Assign a number that you already have or Buy a New One.

If you don’t have a number, then you’ll be presented with this screen:

Add phone number

If you have a number, it will ask if you want to use it.

Add phone number app

Once you've assigned a number, it begins deploying.

Deployed App

You will be automatically brought to the Instance overview, which contains information about the project and a way to Launch the application. There is also an option to View logs to assist with tracking and troubleshooting.

Schedule an SMS

Launch the application

Go ahead and click on the Launch. A new browser window will appear that displays the following content:

Web App

Fill in the form with some details such as a valid cell phone number, a message, and a send time and press Submit. A new browser window will pop up, and the message will be queued to send at the date specified.

Deploy a New Environment and Edit the Code

Now that we have successfully deployed a sample, let's try to change the code and instantly deploy it to see the changes live. Ensure you are back on the use-case page and click on Get Code and then Create a new development environment.

Schedule an SMS

Provide a Region and Workspace Name along with a Vonage Number. If you don't know what that is, then you can click Assign a number, and available numbers in your Vonage account will be listed. Mine looks like the following:

Set up your workspace

Press Continue, and you'll be presented with the project in Visual Studio Code inside your browser.

Running in the browser

Begin by reviewing the README.md, which contains important information on how to run the sample.

If you navigate to one of the source files (such as index.js), you can modify the code in the browser!

Feel free to play around and make some changes. For example, on Line 53 in index.js, you could hardcode the message instead of using the one coming from the form.

Wrap-up

We're excited to see all the new and exciting ways customers use this tool. For further information, consult our documentation. Also, if you have questions or feedback, join us on the Vonage Developer Slack or send me a Tweet on Twitter, and I will get back to you. Thanks again for reading, and I will catch you on the next one!