كيفية جدولة رسالة SMS في جافا سكريبت

أبسط طريقة لإرسال رسائل SMS مجدولة من جافا سكريبت هي استخدام واجهة برمجة تطبيقات HTTP/Rest المدمجة في بوابة Ozeki SMS. عند استخدام هذه الواجهة، ستقوم بإرسال رسائل SMS عن طريق إرسال طلب HTTP Post إلى بوابة الرسائل. سيحتوي طلب HTTP Post على رسالة بتنسيق json. ستقوم بوابة الرسائل بإرسال هذه الرسالة إلى هاتف المستلم، وستعيد رد HTTP 200 OK إلى طلبك.

كيفية جدولة رسالة SMS في جافا سكريبت
الشكل 1 - كيفية جدولة رسالة SMS في جافا سكريبت

كود جافا سكريبت لإرسال رسالة SMS مجدولة إلى الهاتف المحمول

نموذج كود جافا سكريبت لإرسال SMS أدناه يوضح كيف يمكنك إرسال رسائل SMS مجدولة باستخدام واجهة برمجة تطبيقات HTTP Rest الخاصة ببوابة Ozeki SMS باستخدام مكتبة Ozeki.Libs.Rest في جافا سكريبت. هذه المكتبة متاحة لك مجانًا، ويمكنك استخدامها وتعديلها في أي من مشاريعك.

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>إرسال رسالة SMS مجدولة مع بوابة Ozeki SMS</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>إلى العنوان:</b>
            <input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
            <b>النص:</b>
            <input class="form-control" type="text" id="Text" placeholder="مرحبًا بالعالم!">
            <b>وقت الإرسال:</b>
            <input class="form-control" type="text" id="TimeToSend" placeholder="2021-07-30 10:00:00">
            <button class="btn btn-primary" id="btnSend">
                <b>إرسال</b>
            </button>
        </div>

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

كيفية استخدام مثال جافا سكريبت لإرسال SMS:

يمكن استخدام مثال جافا سكريبت لإرسال SMS في أي تطبيق ويب. لاستخدامه، يجب عليك إضافة ملف Ozeki.Libs.Rest.js إلى مشروعك. بعد إضافته إلى مشروعك، يجب عليك وضع التوجيه import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; في قسم الرأس من كود جافا سكريبت المصدر. سيسمح لك ذلك باستخدام الفئات المقدمة من مكتبة Ozeki.Libs.Rest. يمكنك استخدام فئة Message لإنشاء الرسالة. يمكنك استخدام فئة MessageApi لإرسال الرسالة إلى بوابة الرسائل. ستقوم بوابة الرسائل بإعادة توجيه رسالتك إلى شبكة الهاتف المحمول إما عبر اتصال لاسلكي أو عبر الإنترنت.

تحميل SendScheduledSms.js

يمكن تنزيل كود المصدر الموضح في هذه المقالة واستخدامه وتعديله مجانًا.
تحميل: SendScheduledSms.js.zip (5.59 كيلوبايت)

ما الموجود في ملف SendScheduledSms.js.zip؟

يحتوي ملف SendScheduledSms.js.zip على مكتبة Ozeki.Libs.Rest، والتي تمنحك جميع الأدوات اللازمة لإرسال واستقبال رسائل SMS. ستجد أيضًا مشروع SendScheduledSms في الملف المضغوط، والذي يحتوي على كود المثال ليوضح لك كيفية إرسال رسالة SMS. كود المثال هذا مدرج أدناه.

دليل إرسال رسالة SMS مجدولة في جافا سكريبت
الشكل 2 - ما الموجود داخل SendScheduledSms.js.zip

كيفية إرسال رسائل SMS من JavaScript (إرشادات بسيطة)

لإرسال رسائل SMS من JavaScript:

  1. تثبيت مستخدم HTTP API
  2. تمكين تسجيل أحداث الاتصال في علامة التبويب المتقدمة
  3. إعداد WampServer
  4. تنزيل ثم استخراج ملف SendScheduledSms.js.zip
  5. وضع محتويات ملف zip في مجلد \www\ الخاص بـ wampserver: C:\wamp64\www
  6. تشغيل تطبيق Ozeki SMS Gateway
  7. فتح الموقع عن طريق كتابة http://localhost/SendScheduledSms.php في متصفحك
  8. بعد فتح الموقع، يمكنك إرسال رسالة SMS بالنقر على زر الإرسال
  9. تحقق من السجلات لمعرفة ما إذا تم إرسال الرسالة

تثبيت Ozeki SMS Gateway وإنشاء مستخدم HTTP API

لتتمكن من إرسال رسائل SMS من JavaScript، تحتاج أولاً إلى تثبيت Ozeki SMS Gateway. يمكن تثبيت بوابة الرسائل القصيرة على نفس الكمبيوتر الذي تقوم فيه بتطوير كود JavaScript في Visual Studio. بعد التثبيت، الخطوة التالية هي ربط Ozeki SMS Gateway بشبكة الهاتف المحمول. يمكنك إنشاء مستخدم HTTP SMS API. قم بإنشاء مستخدم باسم مستخدم "http_user"، وكلمة مرور "qwe123" لجعل المثال يعمل دون تعديل.

بعد إعداد البيئة، يمكنك تشغيل كود JavaScript الخاص بك.

رابط HTTP API لاستخدام إرسال SMS من JavaScript

لإرسال رسائل SMS من JavaScript، سيتعين على JavaScript الخاص بك إصدار طلب HTTP إلى بوابة الرسائل القصيرة. يظهر رابط API أدناه. لاحظ أنه يجب استبدال عنوان IP (127.0.0.1) بعنوان IP الخاص ببوابة الرسائل القصيرة. إذا كان Ozeki SMS Gateway مثبتًا على نفس الكمبيوتر الذي يعمل عليه تطبيق JavaScript لإرسال الرسائل القصيرة، يمكن أن يكون هذا 127.0.0.1. إذا كان مثبتًا على كمبيوتر مختلف، فيجب أن يكون عنوان IP لذلك الكمبيوتر. 

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

مصادقة HTTP لاستخدام إرسال SMS من JavaScript

لمصادقة عميل SMS الخاص بـ JavaScript، تحتاج إلى إرسال اسم المستخدم وكلمة المرور في سلسلة مشفرة بـ base64 إلى الخادم في طلب HTTP. التنسيق المستخدم هو: base64(username+":"+password). في JavaScript، يمكنك استخدام الكود التالي لإجراء هذا التشفير: 

// يمكنك العثور على مشفر Base64 في ملف Ozeki.Libs.Rest.js 
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;

على سبيل المثال، إذا قمت بتشفير اسم المستخدم 'http_user' وكلمة المرور 'qwe123'، فستحصل على السلسلة المشفرة بـ base64 التالية: aHR0cF91c2VyOnF3ZTEyMw==. للإرسال

رأس طلب HTTP لإرسال SMS من JavaScript

لإرسال رسائل SMS، تحتاج إلى تضمين الأسطر التالية كرؤوس في طلب HTTP. لاحظ أننا نضمن نوع المحتوى ورأس المصادقة. 

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

طلب HTTP لإرسال SMS من JavaScript

لإرسال الرسالة القصيرة، سيقوم تطبيق JavaScript الخاص بك بإرسال طلب HTTP مشابه للطلب أدناه. لاحظ أن هذا الطلب يحتوي على جزء رأس HTTP وجزء جسم HTTP. جسم HTTP هو سلسلة بيانات مشفرة بـ JSON. يحتوي على رقم المستلم، ونص الرسالة، والوقت الذي نريد إرسال رسالتنا فيه. 

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": "مرحبًا بالعالم!",
			"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 التي يتلقاها مثال JavaScript لإرسال الرسائل القصيرة

بمجرد أن تتلقى بوابة الرسائل القصيرة هذا الطلب، ستقوم بإنشاء استجابة HTTP. ستكون استجابة HTTP تحتوي على رمز حالة، للإشارة إلى ما إذا كان طلب إرسال الرسالة القصيرة ناجحًا أم لا. كما ستعود بهيكل مشفر بـ JSON لتزويدك بتفاصيل مفيدة حول إرسال الرسالة. 

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": "تمت إضافة الرسائل إلى قائمة الانتظار للتسليم.",
	"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": "مرحبًا بالعالم!",
	      "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"
	    }
	  ]
	}
}
كيفية إرسال رسائل SMS مجدولة من JavaScript باستخدام واجهة برمجة تطبيقات الرسائل القصيرة في JavaScript (فيديو تعليمي)

يوضح هذا الفيديو كيفية تنزيل ملف SendScheduledSms.js.zip من هذه الصفحة. إذا شاهدت الفيديو، ستلاحظ أن محتويات ملف SendScheduledSms.js المضغوط توضع في مجلد \www\ لخادم WampServer. ستلاحظ أيضًا أننا نشغل خادم WampServer بالنقر على أيقونته مرتين، وبعد ذلك ندخل http://localhost:8080/SendScheduledSms.js في متصفح الويب.

الفيديو 2 - كيفية تنزيل وتشغيل مشروع المثال (فيديو تعليمي)

مثال على الرسائل القصيرة باستخدام JavaScript: SendScheduledSms.js

كود المثال أدناه هو جزء من ملف PHP المسمى SendScheduledSms.php. بالإضافة إلى ذلك، ستجد ملفين آخرين يُدعيان SendScheduledSms.css و Ozeki.Libs.Rest.js.

  • يحتوي ملف Ozeki.Libs.Rest.js على جميع الأدوات اللازمة لإرسال وحذف وتمييز واستقبال رسائل SMS.
  • يحتوي ملف SendScheduledSms.php على كود JavaScript وبعض العناوين التي تسمح لنا بإرسال طلبات HTTP دون أخطاء CORS.
  • يحتوي ملف SendScheduledSms.css على ورقة الأنماط لصفحة الويب.

كيفية إرسال رسائل SMS مجدولة باستخدام JavaScript
الشكل 3 - SendScheduledSms.php

كيفية التحقق من قبول الرسالة القصيرة من قبل مستخدم HTTP (فيديو تعليمي)

بعد إرسال الرسالة القصيرة، من الجيد التحقق من بوابة الرسائل القصيرة لمعرفة ما تم استلامه. يمكنك التحقق من السجل بفتح تفاصيل مستخدم HTTP من وحدة تحكم إدارة بوابة Ozeki للرسائل القصيرة. يوضح الفيديو التالي ما يجب البحث عنه. سيبدأ الفيديو بالكود المفتوح وينتهي بتفاصيل الرسالة المرسلة. ستتعلم كيفية إطلاق المشروع، وكيف يبدو المشروع أثناء التشغيل، وكيف يبدو ملف السجل بعد ذلك. طول الفيديو 42 ثانية فقط وسهل الفهم. لن تواجه أي مشكلة في متابعته.

الفيديو 3 - كيفية إرسال الرسائل القصيرة باستخدام كود JavaScript أعلاه (فيديو تعليمي)

خلاصة القول

شرح هذا المقال كيفية إنشاء حل لجدولة الرسائل القصيرة في JavaScript بمساعدة مستخدم HTTP في بوابة Ozeki للرسائل القصيرة. إذا قرأت كل شيء بعناية، يجب أن تكون جدولة الرسائل القصيرة سهلة للغاية. جدولة الرسائل القصيرة مفيدة لأنك تشارك المعلومات مع العملاء عندما يكون لديهم الوقت للانتباه إلى رسالتك. سيجعل ذلك تسويق الرسائل القصيرة الجماعي أكثر كفاءة، وسيصل إلى المزيد من الأشخاص.

اعثر على المزيد لتتعلمه على موقع Ozekي واستمر في القراءة. تحقق من كيفية استقبال رسالة SMS في JavaScript، يمكن أن يساعدك في تنظيم تخزين الرسائل.

حمل بوابة Ozekي للرسائل القصيرة الآن، وشاهد التغيير!

More information