كيف استطيع ربط موقعي بمزود خدمة WSDL؟

المقالات والنقاشات
#1

السلام عليكم في عندي سؤال اريد ان اربط موقعي بموقع مزود خدمات معينة vendors. يعني اريد ان تكون منتجاته معروضة في صفحتي وابيعها للعملاء.
طبعا مزود الخدمة اعطاني ملفات فيها اكواد الخاصة به مكتوبة بلغة XML والتي هي:


<?xml version="1.0" encoding="UTF-8"?>
<newsearch>
           	<generalInfo>
                       	<TCIMessage></TCIMessage>  (Login Authentication Message*)
                       	<size></size> (Size searched for)
          		<tcistorenum></tcistorenum> (TCi Store Number Searched)
                       	<quoteback</quoteback> (User Supplied Quote Back)
                       	<totalresults></totalresults> (Total Results Found)
          	 </generalInfo>
           	 <results>
          		 <tire> (<tire> section will repeat for each result)
          			<description></description> (Tire Description)
          			<tciPN></tciPN> (Part Number with TCi Prefix)
           			<manuPN></manuPN> (Part Number without prefix)
          			<invqty></invqty> (Tire Quantity)
          			 <price></price> (Tire Price. Does not include FET)
          			 <fet></fet> (Federal Excise Tax if applicable)
<tipsmainprice></tipsmainprice> (TIPS Main Price level)
                        	<tipsdiscprice></tipsdiscprice> (TIPS Discount Price level)
           			<vendor></vendor> (TCi Vendor Number)
           		 </tire>
 <specs> (Data book info if TCi has obtained the information)
                           	 <formatSize></formatSize> (Formatted Tire Size)
                           	 <servDesc></servDesc> (Service Description)
                         <sideWall></sideWall> (Sidewall)
                            	<rimWidth></rimWidth> (Rim Width Range)
                            	<secWidth></secWidth> (Section Width on Measuring Rim)
                           	<diam></diam> (Overall Diameter)
                            	<treadDepth></treadDepth> (Tread Depth)
                            	<revsPer></revsPer> (Revolutions per mile @ 45 mph)
                            	<maxSing></maxSing> (Max Load Single lbs@psi)
                            	<maxDual></maxDual> (Max Load Dual lbs@psi)
                            	<treadwear></treadwear> (Tread Wear UTQG) 
                            	<traction></traction> (Traction UTQG)
                            	<temperature></temperature> (Temperature UTQG)
                        </specs>
                        <imgs> (Image of the tire if TCi has obtained an image)
        			<halfSmall></halfSmall> (Half tire image 140px × 91px)
            		<large></large> (Large tire image. Dimensions vary.)
        		</imgs>
           	</results>
</newsearch>

وهذا API تبعهم

Web Service Path: https://www.tcitips.com/api/TCi_searchSizeTIPS.cfc?wsdl
WSDL file path:    https://www.tcitips.com/api/TCi_searchSizeTIPS.wsdl

موقعي موجود على Godaddy وبعد بحث طويل نصحني @YaserAlnajjar ان استخدام ال fetch JavaScript وبعدين اقوم بتحويل الكود الى كود json وبعدها يتم عرض البيانات على الصفحة.

fetch ('https://crossorigin.me/https://www.tcitips.com/api/TCi_searchSizeTIPS/wsdl')// past a url into the fetch function using url incide a single quote
.then(result => {
    console.log(result);
    return result.json();
})
.then(data =>{
    console.log(data); 
})
.catch (error => console.log (error));

عملت هذا الكود لكن وقت التجربة يحصل فشل في جلب البيانات ، اين الخطأ في هذا الكود؟

3 Likes
#3

مرحبا حسين :wave:

لاحظت أن الرابط ينتهي بكلمة wsdl لذا بحثت عن الأمر ووجدت أنها مرتبطة مع بروتوكول SOAP، وهي معروفة جداً في العقد الماضي في عالم التقنية، والتقنية التي صار الجميع يتبناها لعمل web services هي RESTful APIs.

أول شيء نحتاج نعرف حول XML

صيغة XML تبدو بهذا الشكل، وهي مشابهه للـ HTML:

<?xml version="1.0" encoding="utf-8"?>
<tag>
    info
</info>

واجهات تطبيقات أندرويد يتم بناءها باستعمال لغة XML :smile:

ماهي WSDL - Web Services Description Language؟

في عام 2001، كانت هناك مشكلة عويصة للتواصل بين لغات البرمجة العريقة وهذا ما دفع المبرمجين لإيجاد طريقة للتواصل بين لغات البرمجة بجعل كل برمجية تعتبر service وتتواصل مع بعضها البعض (غالبا باستعمال بروتوكول HTTP).

لكن بروتوكول HTTP لا يكفي، كونه فقط لتبادل البيانات، أي أننا نحتاج بروتوكول (يستعمل HTTP أو غيره)، ويحدد كيفية ارسال بارامتر معين واستقبال نتيجة محددة.

مثلاً: نحتاج web service حينما نطلب منها اسم الدولة، تعطينا اسم العاصمة.

إذا مالحل :thinking:

هنا يأتي دور SOAP - Simple Object Access Protocol
بحيث يستعمل لغة WSDL لوصف مالذي يمكنك القيام به بهذه الـ web service (يحدد لك الـ parameters والـ results).

أحتاج تفاصيل أكثر حول WSDL

لفهم ماهي WSDL بالضبط إليك هذه الأربع المقالات:

  1. https://www.tutorialspoint.com/wsdl/index.htm
  2. https://www.tutorialspoint.com/wsdl/wsdl_introduction.htm
  3. https://www.tutorialspoint.com/wsdl/wsdl_elements.htm
  4. https://www.tutorialspoint.com/wsdl/wsdl_example.htm

لحظة: المفاهيم كثيرة… ممكن تعيد تعريفها؟

أكيد :grin:

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

  2. لغة WSDL ببساطة هي لغة لوصف الـ web services باستعمال صيغة XML.

  3. برتوكول SOAP هو بروتوكول للتواصل بين الـ web services (يستعمل برتوكول HTTP + لغة WSDL).

فهمنا الآن كل المفاهيم… بقي الجزء الأهم، كيف نستفيد منها؟

استعمال Postman لطلب معلومات من SOAP service؟

شاهد هذا الفيديو الذي يشرح خطوة بخطوة كيفية جلب بيانات الدول باستعمال Postman

هذا رابط الـ web service للتجربة:

http://webservices.oorsprong.org/websamples.countryinfo/CountryInfoService.wso?WSDL

وهذا الـ body الذي سنضيفه على Postman لجلب عاصمة دولة تركيا مثلا:

<Envelope xmlns="http://schemas.xmlsoap.org/soap/envelope/">
    <Body>
        <CapitalCity xmlns="http://www.oorsprong.org/websamples.countryinfo">
            <sCountryISOCode>TR</sCountryISOCode>
        </CapitalCity>
    </Body>
</Envelope>

النتيجة التي ترجع:

<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
    <soap:Body>
        <m:CapitalCityResponse xmlns:m="http://www.oorsprong.org/websamples.countryinfo">
            <m:CapitalCityResult>Ankara</m:CapitalCityResult>
        </m:CapitalCityResponse>
    </soap:Body>
</soap:Envelope>

القيمة التي نحتاجها هي Ankara (أنقرة عاصمة تركيا).

أوكي، قمنا بعمل الطلبات من خلال postman بقي نعملها باستخدام javascript لعرض البيانات على صفحة ويب… كيف نكتب كود جافاسكربت؟

كود XMLHTTPRequest

<html>

<head>
    <title>SOAP JavaScript Client Test</title>
</head>

<body>
    <form name="Demo" action="" method="post">
        <div>
            <input type="button" value="Soap" onclick="soap();" />
        </div>
    </form>
</body>

</html>

<script>
    function soap() {
        var data = "<Envelope xmlns=\"http://schemas.xmlsoap.org/soap/envelope/\"><Body><CapitalCity xmlns=\"http://www.oorsprong.org/websamples.countryinfo\"><sCountryISOCode>TR</sCountryISOCode></CapitalCity></Body></Envelope>";

        var xhr = new XMLHttpRequest();
        xhr.withCredentials = true;

        xhr.addEventListener("readystatechange", function () {
            if (this.readyState === 4) {
                console.log('done');
                console.log(this.responseText);
            }
        });

        xhr.open("POST", "http://webservices.oorsprong.org/websamples.countryinfo/CountryInfoService.wso?WSDL");
        xhr.setRequestHeader("Content-Type", "text/xml");

        xhr.send(data);
    }
</script>
  • قمت بالتخلص من الأسطر في الـ body لكي اكتب قيمة المتغير بدون جعل الكود غريب.

التخلص من مشكلة CORS محليا

ستواجه مشكلة CORS عند تشغيل هذا الكود وللتخلص منها محليا، أطلع على هذا الحل:

بقي الشيء الأخير… تحويل هذا xml إلى javascript object

وجدت هذه المقالة تشرح كل شيء (لازم تغلق كروم أولاً)

إضافتها إلى الكود خاصتنا:

<html>

<head>
    <title>SOAP JavaScript Client Test</title>
</head>

<body>
    <form name="Demo" action="" method="post">
        <div>
            <input type="button" value="Soap" onclick="soap();" />
        </div>
    </form>
</body>

</html> <!-- typo -->

<script>
    // Changes XML to JSON
    function xmlToJson(xml) {

        // Create the return object
        var obj = {};

        if (xml.nodeType == 1) { // element
            // do attributes
            if (xml.attributes.length > 0) {
                obj["@attributes"] = {};
                for (var j = 0; j < xml.attributes.length; j++) {
                    var attribute = xml.attributes.item(j);
                    obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
                }
            }
        } else if (xml.nodeType == 3) { // text
            obj = xml.nodeValue;
        }
        
        // do children
        if (xml.hasChildNodes()) {
            for (var i = 0; i < xml.childNodes.length; i++) {
                var item = xml.childNodes.item(i);
                var nodeName = item.nodeName;
                if (typeof (obj[nodeName]) == "undefined") {
                    obj[nodeName] = xmlToJson(item);
                } else {
                    if (typeof (obj[nodeName].push) == "undefined") {
                        var old = obj[nodeName];
                        obj[nodeName] = [];
                        obj[nodeName].push(old);
                    }
                    obj[nodeName].push(xmlToJson(item));
                }
            }
        }
        return obj;
    };


    function soap() {
        var data = "<Envelope xmlns=\"http://schemas.xmlsoap.org/soap/envelope/\"><Body><CapitalCity xmlns=\"http://www.oorsprong.org/websamples.countryinfo\"><sCountryISOCode>TR</sCountryISOCode></CapitalCity></Body></Envelope>";

        var xhr = new XMLHttpRequest();
        xhr.withCredentials = true;

        xhr.addEventListener("readystatechange", function () {
            if (this.readyState === 4) {
                console.log('done');
                console.log(this.responseText);
                
                console.log(this.responseXML);
                jsObject = xmlToJson(this.responseXML);
                console.log(jsObject);
            }
        });

        xhr.open("POST", "http://webservices.oorsprong.org/websamples.countryinfo/CountryInfoService.wso?WSDL");
        xhr.setRequestHeader("Content-Type", "text/xml");

        xhr.send(data);
    }
</script>

ستجد في الكونسول الأوبجكت بإمكانك النظر إليه لتجد أنه بإمكانك الوصول للمعلومة التي نحتاجها بكتابة:

console.log(jsObject['soap:Envelope']["soap:Body"]["m:CapitalCityResponse"]["m:CapitalCityResult"]["#text"]);

بهذا نكون حصلنا على ما نحتاج :grin:

في حال لديك أي سؤال، لا تتردد بطرحه.

4 Likes
#4

احتاج لapi يعطيني اسما الدول باللغة العربية

2 Likes
#5

صحيح انني مافهمت شي
لان ماعندي خلفية ولا حتى اساس
لاكن يعلم الله انني استمتعت بالمقالة وقرأتها حرف حرف
وزرت كل الروابط
شكراً لك استاذ ياسر

1 Like