Como agendar um SMS em Javascript
A maneira mais simples de enviar SMS agendados a partir de JavaScript é usar a API HTTP/Rest de SMS integrada do Ozeki SMS Gateway. Quando você usa esta API, você enviará mensagens SMS enviando uma requisição HTTP Post para o gateway de SMS. A requisição HTTP Post irá conter uma mensagem formatada em formato json. O gateway de SMS irá enviar este SMS para o telefone do destinatário e retornará uma resposta HTTP 200 OK para a sua requisição.
O exemplo de código JavaScript para SMS abaixo demonstra como você pode enviar mensagens SMS agendadas usando a API REST de SMS do Ozeki SMS Gateway com a biblioteca JavaScript Ozeki.Libs.Rest. Esta biblioteca é fornecida gratuitamente e você pode usá-la e modificá-la em qualquer um dos seus projetos.
SendScheduledSms.php
<?php
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400');
header("Access-Control-Allow-Headers: Authorization, Accept, Content-Type");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enviar SMS Agendado com Ozeki SMS Gateway</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="SendScheduledSms.css">
</head>
<body>
<div class="form-group form-container">
<b>Para:</b>
<input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
<b>Texto:</b>
<input class="form-control" type="text" id="Text" placeholder="Olá mundo!">
<b>Horário de Envio:</b>
<input class="form-control" type="text" id="TimeToSend" placeholder="2021-07-30 10:00:00">
<button class="btn btn-primary" id="btnSend">
<b>ENVIAR</b>
</button>
</div>
<div class="log-container">
<ul class="card log" id="container">
<li class="list-group-item"><b>Logs:</b></li>
</ul>
</div>
<script type="module">
import { Configuration, Message, MessageApi } from "./Ozeki.Libs.Rest.js";
var btnSend = document.getElementById("btnSend");
var configuration = new Configuration();
configuration.Username = 'http_user';
configuration.Password = 'qwe123';
configuration.ApiUrl = 'http://127.0.0.1:9509/api';
var api = new MessageApi(configuration);
btnSend.addEventListener("click", async function() {
if (document.getElementById("ToAddress").value != '' && document.getElementById("Text").value != '' && document.getElementById('TimeToSend').value)
{
var msg = new Message();
var datetime = (document.getElementById('TimeToSend').value).split(' ');
var date = datetime[0].split('-');
var time = datetime[1].split(':');
msg.ToAddress = document.getElementById("ToAddress").value;
msg.Text = document.getElementById("Text").value;
msg.TimeToSend = new Date(Date.UTC(date[0], (parseInt(date[1].replace('0', ''))-1),
date[2], time[0], time[1], time[2]));
let result = await api.Send(msg);
document.getElementById("ToAddress").value = '';
document.getElementById("Text").value = '';
document.getElementById('TimeToSend').value = '';
document.getElementById('container').innerHTML += `<li class="list-group-item">${result}</li>`;
}
});
</script>
</body>
</html>
Como usar o exemplo de SMS em JavaScript:
Este exemplo de SMS em JavaScript pode ser usado em qualquer aplicação web. Para usá-lo, você deve adicionar o Ozeki.Libs.Rest.js ao seu projeto. Depois de adicioná-lo ao seu projeto, você deve colocar a diretiva import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; na seção de cabeçalho do seu código-fonte JavaScript. Isso permitirá que você use as classes fornecidas pela biblioteca Ozeki.Libs.Rest. Você pode usar a classe Message para criar o SMS. Você pode usar a classe MessageApi para enviar o SMS para o gateway de SMS. O gateway de SMS encaminhará sua mensagem para a rede móvel através de uma conexão sem fio ou pela Internet.
Baixar SendScheduledSms.js
O código-fonte explicado neste artigo pode ser baixado, usado e modificado gratuitamente.
Download: SendScheduledSms.js.zip (5.59Kb)
O arquivo SendScheduledSms.js.zip contém a biblioteca Ozeki.Libs.Rest, que fornece todas as ferramentas necessárias para enviar e receber mensagens SMS. Você também encontrará o projeto SendScheduledSms no zip, que contém o código de exemplo para mostrar como enviar um SMS. Este código de exemplo está listado abaixo.
Como enviar SMS a partir de JavaScript (Diretrizes simples)
Para enviar SMS a partir de JavaScript:
- Instale um usuário de API HTTP
- Ative a opção "Log communication events" na aba Advanced
- Configure o WampServer
- Baixe e extraia o arquivo SendScheduledSms.js.zip
- Coloque os conteúdos do arquivo zip na pasta \www\ do wampserver: C:\wamp64\www
- Inicie o aplicativo Ozeki SMS Gateway
- Abra o site digitando http://localhost/SendScheduledSms.php no seu navegador
- Após abrir o site, você pode enviar um SMS clicando no botão Send
- Verifique os logs para confirmar se o SMS foi enviado
Instale o Ozeki SMS Gateway e crie um usuário de API HTTP
Para poder enviar SMS a partir de JavaScript, primeiro você precisa instalar o Ozeki SMS Gateway. O gateway SMS pode ser instalado no mesmo computador onde você desenvolve seu código JavaScript no Visual Studio. Após a instalação, o próximo passo é conectar o Ozeki SMS Gateway à rede móvel. Você pode criar um usuário de API HTTP para SMS. Crie um usuário com o nome "http_user" e senha "qwe123" para que o exemplo funcione sem modificações.
Após configurar o ambiente, você pode executar seu código JavaScript.
URL da API HTTP para enviar SMS a partir de JavaScript
Para enviar SMS a partir de JavaScript, seu código JavaScript precisará fazer uma requisição HTTP para o gateway SMS. A URL da API é mostrada abaixo. Observe que o endereço IP (127.0.0.1) deve ser substituído pelo endereço IP do seu gateway SMS. Se o Ozeki SMS Gateway estiver instalado no mesmo computador onde o aplicativo JavaScript está sendo executado, pode ser 127.0.0.1. Se estiver instalado em um computador diferente, deve ser o endereço IP desse computador.
http://127.0.0.1:9509/api?action=rest
Autenticação HTTP para enviar SMS a partir de JavaScript
Para autenticar o cliente SMS em JavaScript, você precisa enviar o nome de usuário e senha em uma string codificada em base64 para o servidor em uma requisição HTTP. O formato usado é: base64(nome_de_usuário+":"+senha). Em JavaScript, você pode usar o seguinte código para fazer essa codificação:
// Você pode encontrar o codificador Base64 no arquivo Ozeki.Libs.Rest.js
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;
Por exemplo, se você codificar o nome de usuário 'http_user' e a senha 'qwe123', você obterá a seguinte string codificada em base64: aHR0cF91c2VyOnF3ZTEyMw==. Para enviar
Cabeçalho da requisição HTTP para enviar SMS a partir de JavaScript
Para enviar as mensagens SMS, você precisa incluir as seguintes linhas como cabeçalhos na requisição HTTP. Observe que incluímos um cabeçalho de tipo de conteúdo e um cabeçalho de Autorização.
Content-Type: application/json Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Requisição HTTP para enviar SMS a partir de JavaScript
Para enviar o SMS, seu aplicativo JavaScript enviará uma requisição HTTP semelhante à mostrada abaixo. Observe que essa requisição contém uma parte de cabeçalho HTTP e uma parte de corpo HTTP. O corpo HTTP é uma string de dados codificada em JSON. Ela contém o número do destinatário, o texto da mensagem e o horário em que queremos enviar nossa mensagem.
POST /api?action=sendmsg HTTP/1.1
Connection: close
Content-Length: 418
Content-Type: text/plain;charset=UTF-8
Accept: */*
Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw==
Host: 127.0.0.1:9509
User-Agent: node-XMLHttpRequest
{
"messages": [
{
"message_id": "d4420450-3db1-1452-91eb-1145b2126495",
"to_address": "+36201111111",
"text": "Hello world!",
"create_date": "2021-07-30T13:04:49",
"vaild_date": "2021-08-06T13:04:49",
"time_to_send": "2021-07-30T14:00:00",
"submit_report_requested": true,
"delivery_report_requested": true,
"view_report_requested": true
}
]
}
Resposta HTTP recebida pelo exemplo de SMS em JavaScript
Assim que o gateway SMS receber essa requisição, ele gerará uma resposta HTTP. A resposta HTTP conterá um código de status para indicar se a requisição de envio de SMS foi bem-sucedida ou não. Ela também retornará uma estrutura codificada em JSON para fornecer detalhes úteis sobre o envio da mensagem.
HTTP/1.1 200 OK
User-Agent: OZEKI 10.3.123 (www.myozeki.com)
Content-Type: application/json; charset=utf8
Last-Modified: Fri, 30 Jul 2021 12:58:47 GMT
Server: 10/10.3.123
Transfer-Encoding: chunked
{
"http_code": 200,
"response_code": "SUCCESS",
"response_msg": "Messages queued for delivery.",
"data": {
"total_count": 1,
"success_count": 1,
"failed_count": 0,
"messages": [
{
"message_id": "d4420450-3db1-1452-91eb-1145b2126495",
"from_station": "%",
"to_address": "+36201111111",
"to_station": "%",
"text": "Hello world!",
"create_date": "2021-07-30 13:04:49",
"valid_until": "2021-08-06 13:04:49",
"time_to_send": "2021-07-30 14:00:00",
"submit_report_requested": true,
"delivery_report_requested": true,
"view_report_requested": false,
"tags": [
{
"name": "Type",
"value": "SMS:TEXT"
}
],
"status": "SUCCESS"
}
]
}
}
Como enviar SMS agendados a partir de JavaScript usando a API de SMS JavaScript (Tutorial em vídeo)
Este vídeo mostra como baixar o arquivo SendScheduledSms.js.zip desta página. Se assistir ao vídeo, você notará que o conteúdo do arquivo zip SendScheduledSms.js é colocado na pasta \www\ do WampServer. Você também verá que iniciamos o WampServer clicando duas vezes em seu ícone e, depois disso, digitamos http://localhost:8080/SendScheduledSms.js no navegador da web.
Exemplo de SMS em JavaScript: SendScheduledSms.js
O código de exemplo abaixo faz parte do arquivo PHP SendScheduledSms.php.
Além disso, você verá outros dois arquivos chamados SendScheduledSms.css e Ozeki.Libs.Rest.js.
- O arquivo Ozeki.Libs.Rest.js contém todas as ferramentas necessárias para enviar, excluir, marcar e receber mensagens SMS.
- O SendScheduledSms.php contém o código JavaScript e alguns cabeçalhos que nos permitirão enviar solicitações HTTP sem erros de CORS.
- O SendScheduledSms.css contém a folha de estilo para a página da web.
Depois que o SMS for enviado, é uma boa ideia verificar seu gateway SMS para ver o que foi recebido. Você pode verificar o log abrindo os detalhes do usuário HTTP no console de gerenciamento do Ozeki SMS Gateway. O vídeo a seguir mostra o que procurar. O vídeo começará com o código aberto e terminará com os detalhes da mensagem enviada. Você aprenderá como iniciar o projeto, como o projeto se parece durante a execução e como o arquivo de log fica depois. O vídeo tem apenas 42 segundos e é fácil de entender. Você não terá problemas para acompanhá-lo.
Para resumir
Este artigo explicou como criar uma solução para agendamento de SMS em JavaScript com a ajuda do usuário HTTP do Ozeki SMS Gateway. Se você leu tudo com atenção, o agendamento de SMS deve ser muito fácil. O agendamento de SMS é benéfico porque você compartilha informações com os clientes quando eles têm tempo para prestar atenção à sua mensagem. Isso tornará o marketing de SMS em massa mais eficiente, e você alcançará mais pessoas com ele.
Aprenda mais no site da Ozeki e continue lendo. Confira como receber um SMS em JavaScript, isso pode ajudá-lo a organizar seu armazenamento de mensagens.
Baixe o Ozeki SMS Gateway agora e veja a diferença!
More information
- Enviar SMS em Javascript com a API HTTP rest (exemplo de código)
- Enviar múltiplos SMS em Javascript com a API HTTP rest (exemplo de código)
- Agendar SMS em Javascript com a API HTTP rest (exemplo de código)
- Receber SMS em Javascript com a API HTTP rest (exemplo de código)
- Excluir SMS em Javascript com a API HTTP rest (exemplo de código)
- Como baixar a biblioteca mais recente da API de SMS em JavaScript do Github