Crie aplicativos de mensagens com mais rapidez

Introdução

Vonage Cloud Runtime é nossa plataforma de desenvolvimento nativa da nuvem e sem servidor, projetada para acelerar seu processo de desenvolvimento. O Code Hub é o local onde você encontra soluções pré-construídas para fluxos de trabalho comuns de comunicação e ambientes de programação baseados em navegador. Aproveitar essas soluções pré-construídas pode reduzir significativamente seu tempo de desenvolvimento. Já se foram os dias em que era preciso baixar um exemplo, configurar dependências e definir manualmente as chaves de API.

A interface intuitiva do Code Hub permite que você explore casos de uso que abrangem nossa API de mensagens da Vonage Messages API, bem como nossa Voice API, Video API, Number Insight API, entre outras.

Para nossa Messages API, já temos vários casos de uso disponíveis, entre os quais:

• Front.com - Canal SMS da Vonage - Neste projeto, utilizando a Messages API do Vonage, você criará um conector de SMS que enviará e receberá mensagens por meio das caixas de entrada do Front.com e dos canais do aplicativo Front.

• Bot ChatGPT para imagens - Neste projeto, utilizando a API DALL-E da OpenAI, você criará um chatbot de SMS capaz de gerar imagens com base em comandos de texto enviados por SMS e também gerar imagens alternativas ao enviar sua própria imagem por MMS.

• Bot do ChatGPT para SMS - Neste projeto, utilizando a API da OpenAI, você criará um chatbot por SMS que enviará e receberá mensagens com o ChatGPT.

• Agendar um SMS - Neste projeto, você criará um site estático que permite agendar e enviar um SMS para um determinado número usando a SMS API.

• Encaminhamento automático de SMS - Este projeto permite que você encaminhe mensagens recebidas para um número por meio da API — você especificará o número de encaminhamento ao configurar o aplicativo. A partir daí, todas as mensagens enviadas para o seu número de telefone da Vonage serão encaminhadas para o seu número.

• Integração do HubSpot com a Messages API do Vonage - Neste projeto, você aprenderá a criar um conector que poderá ser usado no HubSpot para definir cartões de CRM personalizados em seus contatos e enviar SMS por meio de fluxos de trabalho automatizados.

A postagem de hoje no blog vai se concentrar em apresentar um caso de uso de mensagens. Se você quiser ver como o Code Hub pode ajudar com aplicativos de Voice, então clique aqui. Outros casos de uso serão apresentados em posts futuros.

Introdução

Visite Code Hub e percorra a lista de soluções disponíveis para se familiarizar com a interface do usuário. Você também pode usar a barra de pesquisa caso esteja procurando por algo específico.

Code Hub Main Menu

Fazer login

Antes de começarmos a trabalhar com o caso de uso de Mensagens, você deve fazer login na sua conta da Vonage. Se você ainda não tiver uma, clique em “Cadastre-se”. Depois de criar uma conta e fazer login, você verá algumas opções adicionais, conforme mostrado abaixo.

Signing In

Vamos examinar as opções, começando pela opção “Página inicial” e seguindo da esquerda para a direita.

• Página inicial - Sempre leva você de volta ao menu principal.

• Espaços de trabalho - Mostra os espaços de trabalho de código que você criou.

• Instâncias - Mostra as instâncias implantadas que você criou.

• Produtos implantados - Permite gerenciar, iniciar ou visualizar os registros das instâncias dos produtos instalados.

• Documentação - Links para nossa documentação oficial do projeto.

• Região - Mostra a região atual em que você está trabalhando.

• Account de usuário conectada - Sua chave de API atribuída, que será usada em futuras implantações. Se você tiver várias chaves de API, selecione no menu suspenso aquela que deseja usar.

Guia passo a passo do caso de uso “Agendar um SMS”

Vamos dar uma olhada no caso de uso “Agendar um SMS” como nosso primeiro exemplo.

Schedule an SMS

Depois de acessar a seção “Agendar um SMS”, você verá três seções:

Visão geral - Uma breve descrição dos objetivos da amostra.

Obter código - Permite que você use a versão do Visual Studio Code para navegador para testar o código, fazer alterações e implantá-lo instantaneamente.

Implantar código - Permite que você implante o aplicativo e veja como ele funciona.

Você também vai perceber que é possível ver quando a amostra foi criada ou atualizada no canto superior direito da tela. Se houver várias versões, você pode clicar em “Versões” para visualizá-las.

Para começar, selecione “Implantar código”. Dê a ela um nome de instância, verifique se a Região escolhida seja a mais próxima de você e clique em “Implantar código”.

Instance Name

Você verá uma janela pop-up informando que este exemplo requer um número.

Set up your project deployment

Na opção de implantação, você pode atribuir um número que você já tenha ou Comprar um novo.

Se você não tiver um número, será exibida esta tela:

Add phone number

Se você tiver um número, o sistema perguntará se deseja usá-lo.

Add phone number app

Depois que você atribuir um número, a implantação será iniciada.

Deployed App

Você será redirecionado automaticamente para a Visão geral da instância, que contém informações sobre o projeto e uma opção para iniciar o aplicativo. Há também uma opção para Visualizar logs para auxiliar no rastreamento e na solução de problemas.

Schedule an SMS

Inicie o aplicativo

Vá em frente e clique no Iniciar. Uma nova janela do navegador será exibida, mostrando o seguinte conteúdo:

Web App

Preencha o formulário com alguns dados, como um um número de celular válido, uma mensageme uma hora de envio e pressione Enviar. Uma nova janela do navegador será aberta, e a mensagem será colocada na fila para ser enviada na data especificada.

Implantar um novo ambiente e editar o código

Agora que implantamos com sucesso um exemplo, vamos tentar alterar o código e implantá-lo instantaneamente para ver as alterações em tempo real. Certifique-se de estar de volta à página de caso de uso e clique em “Obter Código” e, em seguida, “Criar um novo ambiente de desenvolvimento”.

Schedule an SMS

Forneça um Região e nome do espaço de trabalho , juntamente com um número da Vonage. Se você não souber o que é isso, pode clicar em “Atribuir um número”, e os números disponíveis na sua conta da Vonage serão listados. O meu fica assim:

Set up your workspace

Imprensa Continue, e o projeto será exibido no Visual Studio Code dentro do seu navegador.

Running in the browser

Comece lendo o arquivo README.md, que contém informações importantes sobre como executar o exemplo.

Se você acessar um dos arquivos de origem (como o index.js), poderá modificar o código diretamente no navegador!

Fique à vontade para experimentar e fazer algumas alterações. Por exemplo, na linha 53 do arquivo index.js, você poderia definir a mensagem diretamente no código, em vez de usar a que vem do formulário.

Conclusão

Estamos ansiosos para ver todas as novas e empolgantes maneiras como os clientes utilizam essa ferramenta. Para mais informações, consulte nossa documentação. Além disso, se você tiver dúvidas ou sugestões, junte-se a nós no Slack dos desenvolvedores da Vonage ou me envie um tweet no Twitter, e eu entrarei em contato com você. Mais uma vez, obrigado pela leitura, e nos vemos no próximo artigo!