Kako načrtovati SMS v Javascriptu

Najenostavnejši način za pošiljanje načrtovanih SMS sporočil iz JavaScripta je uporaba vgrajenega HTTP/Rest SMS API-ja Ozeki SMS Gateway. Ko uporabljate ta API, boste SMS sporočila pošiljali z izdajo HTTP Post zahteve proti SMS prehodu. HTTP Post zahteva bo vsebovala sporočilo v json formatu. SMS prehod bo poslal ta SMS prejemniku in vrnil HTTP 200 OK odgovor na vašo zahtevo.

kako načrtovati sms v javascriptu
Slika 1 - Kako načrtovati SMS v Javascriptu

JavaScript koda za pošiljanje načrtovanih sms na mobilne naprave

Spodnji JavaScript sms primer kode prikazuje, kako lahko pošiljate načrtovana SMS sporočila z uporabo http rest sms api Ozeki SMS Gateway z uporabo knjižnice JavaScript Ozeki.Libs.Rest. Ta knjižnica vam je na voljo brezplačno in jo lahko uporabljate in spreminjate v katerem koli od vaših 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>Pošlji načrtovan SMS z 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>Naslov prejemnika:</b>
            <input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
            <b>Besedilo:</b>
            <input class="form-control" type="text" id="Text" placeholder="Pozdravljen svet!">
            <b>Čas pošiljanja:</b>
            <input class="form-control" type="text" id="TimeToSend" placeholder="2021-07-30 10:00:00">
            <button class="btn btn-primary" id="btnSend">
                <b>POŠLJI</b>
            </button>
        </div>

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

Kako uporabiti JavaScript sms primer:

Ta JavaScript sms primer se lahko uporablja v kateri koli spletni aplikaciji. Za uporabo morate dodati Ozeki.Libs.Rest.js v vaš projekt. Po dodajanju v vaš projekt morate vstaviti import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; navodilo v glavo vaše JavaScript izvorne kode. To vam bo omogočilo uporabo razredov ki jih ponuja knjižnica Ozeki.Libs.Rest. Razred Message lahko uporabite za ustvarjanje SMS. Razred MessageApi lahko uporabite za pošiljanje SMS proti SMS prehodu. SMS prehod bo vaše sporočilo posredoval mobilnemu omrežju prek brezžične povezave ali prek interneta.

Prenesite SendScheduledSms.js

Izvorna koda, razložena v tem članku, je na voljo za brezplačen prenos, uporabo in spreminjanje.
Prenos: SendScheduledSms.js.zip (5.59Kb)

Kaj je v datoteki SendScheduledSms.js.zip?

Datoteka SendScheduledSms.js.zip vsebuje knjižnico Ozeki.Libs.Rest, ki vam ponuja vsa orodja, potrebna za pošiljanje in prejemanje SMS sporočil. V zip datoteki boste našli tudi projekt SendScheduledSms, ki vsebuje primer kode, ki vam pokaže kako poslati SMS. Ta primer kode je naveden spodaj.

mapa za pošiljanje načrtovanih sms v javascriptu
Slika 2 - Kaj je v SendScheduledSms.js.zip

Kako poslati SMS iz JavaScripta (Preprosta navodila)

Za pošiljanje SMS iz JavaScripta:

  1. Namestite uporabnika HTTP API
  2. Omogočite beleženje komunikacijskih dogodkov na zavihku Napredno
  3. Nastavite WampServer
  4. Prenesite in razširite datoteko SendScheduledSms.js.zip
  5. Vsebino zip datoteke postavite v mapo \www\ wampserverja: C:\wamp64\www
  6. Zaženite aplikacijo Ozeki SMS Gateway
  7. Odprite spletno stran z vnosom http://localhost/SendScheduledSms.php v brskalnik
  8. Ko odprete spletno stran, lahko pošljete SMS s klikom na gumb Pošlji
  9. Preverite dnevniške zapise, da vidite, ali je bil SMS poslan
Namestite Ozeki SMS Gateway in ustvarite uporabnika HTTP API

Za pošiljanje SMS iz JavaScripta morate najprej namestiti Ozeki SMS Gateway. SMS gateway lahko namestite na isti računalnik, kjer razvijate svojo JavaScript kodo v Visual studiu. Po namestitvi je naslednji korak povezovanje Ozeki SMS Gateway z mobilnim omrežjem. Lahko pošljete testno SMS sporočilo iz Ozeki GUI, da preverite, ali vaša povezava z mobilnim omrežjem deluje. Zadnji korak pri pripravi okolja je ustvarjanje uporabniškega računa HTTP SMS API. Ustvarite uporabnika z uporabniškim imenom "http_user" in geslom "qwe123", da primer deluje brez sprememb.

Ko je okolje pripravljeno, lahko zaženete svojo JavaScript kodo.

URL HTTP API za pošiljanje SMS iz JavaScripta

Za pošiljanje SMS iz JavaScripta mora vaša JavaScript izdati HTTP zahtevek proti SMS gatewayu. API URL je prikazan spodaj. Upoštevajte, da je treba IP naslov (127.0.0.1) zamenjati z IP naslovom vašega SMS gatewaya. Če je Ozeki SMS Gateway nameščen na istem računalniku, kjer teče JavaScript SMS aplikacija, lahko to ostane 127.0.0.1. Če je nameščen na drugem računalniku, mora biti to IP naslov tega računalnika. 

http://127.0.0.1:9509/api?action=rest
Avtentikacija HTTP za pošiljanje SMS iz JavaScripta

Za avtentikacijo JavaScript SMS odjemalca morate uporabniško ime in geslo poslati v nizu, kodiranem z base64, na strežnik v HTTP zahtevku. Uporabljen format je: base64(uporabniško_ime+":"+geslo). V JavaScriptu lahko za to kodiranje uporabite naslednjo kodo: 

// Base64 kodirnik najdete v datoteki Ozeki.Libs.Rest.js 
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;

Na primer, če kodirate uporabniško ime 'http_user' in geslo 'qwe123', boste prejeli naslednji base64 kodiran niz: aHR0cF91c2VyOnF3ZTEyMw==. Za pošiljanje

Glava HTTP zahtevka za pošiljanje SMS iz JavaScripta

Za pošiljanje SMS sporočil morate vključiti naslednje vrstice kot glave v HTTP zahtevku. Upoštevajte, da vključujemo vrsto vsebine in glavo za avtorizacijo. 

Content-Type: application/json
Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
HTTP zahtevek za pošiljanje SMS iz JavaScripta

Za oddajo SMS bo vaša JavaScript aplikacija poslala HTTP zahtevek, podoben spodnjemu. Upoštevajte, da ta zahtevek vsebuje del z glavo HTTP in del s telesom HTTP. Telo HTTP je niz podatkov, kodiranih v JSON. Vsebuje številko prejemnika, besedilo sporočila in čas, ko želimo poslati naše sporočilo. 

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 odziv, prejet v JavaScript SMS primeru

Ko SMS gateway prejme ta zahtevek, bo ustvaril HTTP odziv. HTTP odziv bo vseboval statusno kodo, ki označuje, ali je bila zahteva za oddajo SMS uspešna ali ne. Prav tako bo vrnil strukturo, kodirano v JSON, ki vam bo zagotovila koristne podrobnosti o oddaji sporočila. 

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

Kako poslati načrtovana SMS sporočila iz JavaScripta z uporabo JavaScript SMS API-ja (Video vadnica)

Ta video vam pokaže, kako prenesti datoteko SendScheduledSms.js.zip s te strani. Če si ogledate video, boste opazili, da so vsebine datoteke SendScheduledSms.js zip postavljene v mapo \www\ strežnika WampServer. Videli boste tudi, da zaženemo WampServer z dvoklikom na njegovo ikono, nato pa v brskalnik vpišemo http://localhost:8080/SendScheduledSms.js.

Video 2 - Kako prenesti in zagnati primer projekta (Video vadnica)

Primer SMS pošiljanja z JavaScriptom: SendScheduledSms.js

Spodnja primer kode je del PHP datoteke SendScheduledSms.php. Poleg tega boste videli še dve drugi datoteki, imenovani SendScheduledSms.css in Ozeki.Libs.Rest.js.

  • Datoteka Ozeki.Libs.Rest.js vsebuje vsa potrebna orodja za pošiljanje, brisanje, označevanje in prejemanje SMS sporočil.
  • SendScheduledSms.php vsebuje kodo JavaScript, in nekatere glave, ki nam omogočajo pošiljanje HTTP zahtev brez napak CORS.
  • SendScheduledSms.css vsebuje slogovno datoteko za spletno stran.

kako poslati načrtovana sms sporočila z uporabo javascripta
Slika 3 - SendScheduledSms.php

Kako preveriti, ali je SMS sprejel HTTP uporabnik (Video vadnica)

Po oddaji SMS-a je dobro preveriti vaš SMS prehod, da vidite, kaj je prejel. Dnevnik lahko preverite tako, da odprete podrobnosti HTTP uporabnika v upravljalski konzoli Ozeki SMS Gateway. Naslednji video vam pokaže, kaj morate iskati. Video se bo začel z odprto kodo in končal s podrobnostmi poslanega sporočila. Naučili se boste, kako zagnati projekt, kako izgleda projekt med izvajanjem in kako izgleda dnevniški zapis po tem. Video je dolg le 42 sekund in ga je enostavno razumeti. Sledenje vam ne bo povzročalo težav.

Video 3 - Kako poslati SMS z zgornjo kodo JavaScript (Video vadnica)

Če povzamemo

Ta članek je pojasnil, kako narediti rešitev za načrtovanje SMS-ov v JavaScriptu s pomočjo HTTP uporabnika Ozeki SMS Gateway. Če ste vse natančno prebrali, bi moralo biti načrtovanje SMS-ov zelo enostavno. Načrtovanje SMS-ov je koristno, ker informacije delite s strankami, ko imajo čas, da posvetijo pozornost vašemu sporočilu. To bo naredilo množično SMS trženje učinkovitejše, in z njim boste dosegli več ljudi.

Na spletni strani Ozeki se lahko naučite še več in nadaljujte z branjem. Oglejte si kako prejeti SMS v JavaScriptu, kar vam lahko pompri organizaciji shrambe sporočil.

Prenesite Ozeki SMS Gateway zdaj in opazite spremembo!

More information