Ako naplánovať SMS v Javascripte

Najjednoduchší spôsob, ako odoslať naplánované SMS z JavaScriptu, je použiť vstavané HTTP/Rest SMS API Ozeki SMS Gateway. Keď použijete toto API, budete odosielať SMS správy vytvorením HTTP POST požiadavky na SMS bránu. HTTP POST požiadavka bude obsahovať správu formátovanú v json formáte. SMS brána odošle túto SMS na príjemcove telefónne číslo a vráti HTTP 200 OK odpoveď na vašu požiadavku.

ako naplánovať sms v javascripte
Obrázok 1 - Ako naplánovať SMS v Javascripte

JavaScript kód na odoslanie naplánovanej SMS na mobil

Ukážka JavaScript kódu pre SMS nižšie demonštruje, ako môžete odosielať naplánované SMS správy pomocou http rest sms api Ozeki SMS Gateway s použitím knižnice JavaScript Ozeki.Libs.Rest. Táto knižnica je poskytovaná bezplatne a môžete ju používať a upravovať v akomkoľvek z vašich projektov.

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>Odoslanie naplánovanej SMS s 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>ToAddress:</b>
            <input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
            <b>Text:</b>
            <input class="form-control" type="text" id="Text" placeholder="Hello world!">
            <b>TimeToSend:</b>
            <input class="form-control" type="text" id="TimeToSend" placeholder="2021-07-30 10:00:00">
            <button class="btn btn-primary" id="btnSend">
                <b>ODOSLAŤ</b>
            </button>
        </div>

        <div class="log-container">
            <ul class="card log" id="container">
                <li class="list-group-item"><b>Logy:</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>

Ako použiť JavaScript príklad pre SMS:

Tento JavaScript príklad pre SMS môže byť použitý v akejkoľvek webovej aplikácii. Na použitie je potrebné pridať Ozeki.Libs.Rest.js do vášho projektu. Po pridaní do projektu musíte vložiť direktívu import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; do hlavičkovej časti vášho JavaScript zdrojového kódu. To vám umožní používať triedy poskytované knižnicou Ozeki.Libs.Rest. Triedu Message môžete použiť na vytvorenie SMS. Triedu MessageApi môžete použiť na odoslanie SMS na SMS bránu. SMS brána prepošle vašu správu do mobilnej siete buď cez bezdrôtové pripojenie alebo cez internet.

Stiahnuť SendScheduledSms.js

Zdrojový kód vysvetlený v tomto článku môže byť stiahnutý, použitý a upravený bezplatne.
Stiahnuť: SendScheduledSms.js.zip (5.59Kb)

Čo obsahuje súbor SendScheduledSms.js.zip?

Súbor SendScheduledSms.js.zip obsahuje knižnicu Ozeki.Libs.Rest, ktorá vám poskytuje všetky potrebné nástroje na odosielanie a prijímanie SMS správ. Nájdete tu aj projekt SendScheduledSms, ktorý obsahuje ukážkový kód, ktorý vám ukáže, ako odoslať SMS. Tento ukážkový kód je uvedený nižšie.

adresár pre odoslanie naplánovanej sms v js
Obrázok 2 - Čo je vo vnútri SendScheduledSms.js.zip

Ako poslať SMS z JavaScriptu (Jednoduché pokyny)

Na odoslanie SMS z JavaScriptu:

  1. Nainštalujte si používateľa HTTP API
  2. Povoľte Logovanie komunikačných udalostí na karte Pokročilé
  3. Nastavte WampServer
  4. Stiahnite a rozbaľte súbor SendScheduledSms.js.zip
  5. Vložte obsah zip súboru do priečinka \www\ wampserveru: C:\wamp64\www
  6. Spustite aplikáciu Ozeki SMS Gateway
  7. Otvorte webovú stránku zadaním http://localhost/SendScheduledSms.php do vášho prehliadača
  8. Po otvorení webovej stránky môžete odoslať SMS kliknutím na tlačidlo Odoslať
  9. Skontrolujte logy, či bola SMS odoslaná

Nainštalujte Ozeki SMS Gateway a vytvorte používateľa HTTP API

Na odoslanie SMS z JavaScriptu musíte najprv nainštalovať Ozeki SMS Gateway. SMS bránu je možné nainštalovať na rovnakom počítači, kde vyvíjate svoj JavaScript kód v Visual studio. Po inštalácii je ďalším krokom pripojenie Ozeki SMS Gateway k mobilnej sieti. Môžete odoslať testovaciu SMS z Ozeki GUI, aby ste overili, že vaše pripojenie k mobilnej sieti funguje. Posledným krokom pri príprave vášho prostredia je vytvorenie používateľa HTTP SMS API. Vytvorte používateľa s používateľským menom "http_user" a heslom "qwe123", aby príklad fungoval bez úprav.

Po nastavení prostredia môžete spustiť svoj JavaScript kód.

URL HTTP API na odoslanie SMS z JavaScriptu

Na odoslanie SMS z JavaScriptu bude váš JavaScript musieť odoslať HTTP požiadavku na SMS bránu. API url je uvedené nižšie. Upozorňujeme, že IP adresa (127.0.0.1) by mala byť nahradená IP adresou vašej SMS brány. Ak je Ozeki SMS Gateway nainštalovaný na rovnakom počítači, kde beží JavaScriptová SMS aplikácia, môže to byť 127.0.0.1. Ak je nainštalovaný na inom počítači, mala by to byť IP adresa toho počítača. 

http://127.0.0.1:9509/api?action=rest

HTTP autentifikácia na odoslanie SMS z JavaScriptu

Na autentifikáciu JavaScriptového SMS klienta musíte odoslať používateľské meno a heslo v base64 kódovanom reťazci na server v HTTP požiadavke. Používa sa formát: base64(používateľské meno+":"+heslo). V JavaScripte môžete na toto kódovanie použiť nasledujúci kód: 

// Base64 kódovač nájdete v súbore Ozeki.Libs.Rest.js 
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;

Napríklad, ak zakódujete používateľské meno 'http_user' a heslo 'qwe123', dostanete nasledujúci base64 kódovaný reťazec: aHR0cF91c2VyOnF3ZTEyMw==. Na odoslanie

Hlavička HTTP požiadavky na odoslanie SMS z JavaScriptu

Na odoslanie SMS správ musíte do HTTP požiadavky zahrnúť nasledujúce riadky ako hlavičky. Upozorňujeme, že zaraďujeme hlavičku typu obsahu a autorizácie. 

Content-Type: application/json
Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

HTTP požiadavka na odoslanie SMS z JavaScriptu

Na odoslanie SMS vaša JavaScriptová aplikácia odošle HTTP požiadavku podobnú nižšie uvedenej. Upozorňujeme, že táto požiadavka obsahuje časť HTTP hlavičky a časť HTTP tela. HTTP telo je JSON kódovaný dátový reťazec. Obsahuje číslo príjemcu, text správy a čas, kedy chceme odoslať našu správu. 

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
		}
	]
}

HTTP odpoveď prijatá JavaScriptovou SMS ukážkou

Keď SMS brána prijme túto požiadavku, vygeneruje HTTP odpoveď. HTTP odpoveď bude obsahovať stavový kód, ktorý indikuje, či bola požiadavka na odoslanie SMS úspešná alebo nie. Tiež vráti JSON kódovanú štruktúru, ktorá vám poskytne užitočné informácie o odoslaní správy. 

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"
	    }
	  ]
	}
}

Ako odoslať naplánovanú SMS z JavaScriptu pomocou JavaScriptovej SMS API (Video tutoriál)

Toto video vám ukáže, ako si stiahnuť súbor SendScheduledSms.js.zip z tejto stránky. Ak si pozriete video, všimnete si, že obsah súboru SendScheduledSms.js zip je umiestnený do priečinka \www\ servera WampServer. Uvidíte tiež, že sme spustili WampServer dvojklikom na jeho ikonu a potom sme do webového prehliadača zadali http://localhost:8080/SendScheduledSms.js.

Video 2 - Ako stiahnuť a spustiť ukážkový projekt (Video tutoriál)

JavaScript SMS príklad: SendScheduledSms.js

Ukážkový kód nižšie je súčasťou PHP súboru SendScheduledSms.php. Okrem toho uvidíte dva ďalšie súbory s názvom SendScheduledSms.css a Ozeki.Libs.Rest.js.

  • Súbor Ozeki.Libs.Rest.js obsahuje všetky potrebné nástroje na odosielanie, mazanie, označovanie a prijímanie SMS správ.
  • SendScheduledSms.php obsahuje javascriptový kód a niektoré hlavičky, ktoré nám umožnia odosielať HTTP požiadavky bez chýb CORS.
  • SendScheduledSms.css obsahuje štýly pre webovú stránku.

ako odoslať naplánovanú sms pomocou javascriptu
Obrázok 3 - SendScheduledSms.php

Ako skontrolovať, že SMS bola prijatá HTTP používateľom (Video tutoriál)

Po odoslaní SMS je dobré skontrolovať svoju SMS bránu, aby ste videli, čo prijala. Protokol môžete skontrolovať otvorením detailov HTTP používateľa v konzole na správu Ozeki SMS Gateway. Nasledujúce video vám ukáže, čo hľadať. Video začína otvoreným kódom a končí detailami odoslanej správy. Dozviete sa, ako spustiť projekt, ako projekt vyzerá počas behu a ako vyzerá protokolový súbor po jeho spustení. Video je dlhé len 42 sekúnd a je ľahko zrozumiteľné. Nebudete mať problém s jeho sledovaním.

Video 3 - Ako odoslať SMS pomocou vyššie uvedeného JavaScriptového kódu (Video tutoriál)

Zhrnutie

Tento článok vysvetlil, ako vytvoriť riešenie pre plánovanie SMS v JavaScripte s pomocou HTTP používateľa Ozeki SMS Gateway. Ak ste všetko pozorne prečítali, plánovanie SMS by malo byť veľmi jednoduché. Plánovanie SMS je výhodné, pretože informácie zdieľate so zákazníkmi v čase, keď majú čas venovať pozornosť vašej správe. To urobí hromadné SMS marketing efektívnejším a dosiahnete ním viac ľudí.

Nájdite viac informácií na webovej stránke Ozeki a pokračujte v čítaní. Pozrite si ako prijímať SMS v JavaScripte, môže vám to pomôcť zorganizovať si úložisko správ.

Stiahnite si Ozeki SMS Gateway teraz a uvidíte zmenu!

More information