कैसे करें: क्लाउड फ़्लो को किसी साइट के साथ एकीकृत करें Power Automate Power Pages

यह आलेख बताता है कि MSN मौसम ऐप शुरू करने के लिए Power Pages कैसे बनाएँ और Power Automate क्लाउड फ़्लो का उपयोग कैसे करें, जो पृष्ठ पर वर्तमान मौसम विवरण प्रदर्शित करता है.

पूर्वावश्यकता

इन चरणों को पूरा करने के लिए, आपको एक Power Automate और Power Pages परिवेश की आवश्यकता है. यदि आपके पास लाइसेंस नहीं है, तो आप Power Pages और Power Automate ट्रायल के लिए साइन अप कर सकते हैं.

चरण 1: क्लाउड फ़्लो बनाएँ

Power Pages ट्रिगर का उपयोग करके एक प्रवाह बनाएँ और मौसम डेटा लाने के लिए MSN मौसम क्रिया का उपयोग करें.

1. Power Pages में साइन इन करें.

2. साइट चुनें + संपादित करें

3. कार्यस्थान सेट अप करें पर जाएँ, फिर ऐप एकीकरण के अंतर्गत क्लाउड फ़्लो चुनें.

4. चुनें+ नया प्रवाह बनाएं

5. Power Pages के लिए खोज करें.

   • जब Power Pages फ़्लो ट्रिगर को कॉल करता है, का चयन करें.

   

6. + एक इनपुट जोड़ें चुनें.

7. टेक्स्ट चुनें.

8. स्थान के रूप में एक नाम जोड़ें.

9. + नया चरण चुनें.

10. MSN Weather के लिए खोजें.

11. वर्तमान मौसम प्राप्त करें क्रिया का चयन करें.

12. कर्सर को स्थान इनपुट टेक्स्ट पर फोकस करें डानेमिक कॉन्टेंट से जब Power Pages फ़्लो को कॉल करता है के तहत स्थान पैरामीटर चुनें.

    

    नोट

    आप या तो इंपीरियल इकाइयाँ रख सकते हैं या मीट्रिक में बदल सकते हैं.

13. + नया चरण चुनें.

14. Power Pages के लिए खोज करें.

15. Power Pages में वैल्यू वापस करें क्रिया चुनें.

16. + जोड़ें और आउटपुट दें का चयन करें.

17. टेक्स्ट चुनें.

18. शीर्षक के रूप में दबाव दर्ज करें.

19. वर्तमान मौसम प्राप्त करें अंतर्गत, डायमेमिक कॉन्टेंट दबाव चुनें.

20. टेक्स्ट प्रकार का उपयोग करके निम्नलिखित आउटपुट चरणों को बनाने के लिए दोहराएँ:

    1. आर्द्रता
    2. तापमान
    3. UV इंडेक्स
    4. हवा की गति
    5. स्थान
    6. दृश्यता दूरी
    7. अक्षांश
    8. देशांतर
    9. तापमान की इकाइयाँ
    10. दबाव इकाइयाँ
    11. गति की इकाइयाँ
    12. दूरी इकाइयाँ
    13. स्थितियां

21. सहेजें चुनें

22. वर्तमान मौसम प्राप्त करें प्रवाह को नाम दें.

चरण 2: साइट पर प्रवाह जोड़ें

प्रवाह को सहेजने के बाद, आपको इसे साइट पर जोड़ना होगा और एक उचित वेब भूमिका निर्दिष्ट करनी होगी.

1. Power Pages में साइन इन करें.

2. किसी एक स्टार्टर लेआउट के साथ एक साइट बनाएँ.

3. साइट चुनें और संपादित करें का चयन करें.

4. स्थापित करें कार्यस्थान पर नेविगेट करें.

5. ऐप एकीकरण के अंतर्गत, क्लाउड प्रवाह चुनें.

6. + क्लाउड फ़्लो जोड़ें का चयन करें.

7. वर्तमान मौसम प्रवाह प्राप्त करें को खोजें.

8. भूमिकाओं के अंतर्गत + भूमिकाएँ जोड़ें चुनें.

9. गुमनाम उपयोगकर्ता भूमिका चुनें.

10. जोड़ें चुनें.

11. URL कॉपी करें.

    

    नोट

    यह अद्वितीय URL है जिसका उपयोग संबंधित क्लाउड फ़्लो से कनेक्ट करने के लिए किया जाता है. वर्तमान मौसम प्रवाह कॉल करने के लिए आप बाद में इस URL का उपयोग करेंगे.

चरण 3: MSN मौसम डेटा प्रदर्शित करने के लिए एक पृष्ठ बनाएँ

प्रवाह बनाने और उसे Power Pages साइट से जोड़ने के बाद, अब आप इसे JavaScript का उपयोग करके नियंत्रण इवेंट से कॉल कर सकते हैं.

1. पृष्ठ कार्यस्थान का चयन करें.

2. + पृष्ठ चुनें.

3. पेज को "आज की मौसम रिपोर्ट" नाम दें.

4. Visual Studio Code खोलने के लिए कोड संपादित करें चुनें.

5. यह कोड पेस्ट करें:

       <style>
           div.weatherdetail {
               border: 1px solid #F3F2F1;
               border-radius: 12px;
               box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
               padding: 24px;
           }
           .weather label {
               font-family: 'Nunito';
               font-style: normal;
               font-weight: 600;
               font-size: 18px;
               color: #323130;
           }
           .weather button {
               font-family: 'Segoe UI';
               padding: 8px 16px;
               font-size: 16px;
               background-color: #6219D9;
               color: white;
               border: none;
               border-radius: 4px;
               cursor: pointer;
               outline: none;
           } 
           div.weather {
               display: flex;
               flex-direction: column;
               align-items: flex-start;
               padding: 100px;
               gap: 36px;
               width: 840px;
           }
           span.temperature {
               font-family: Segoe UI;
               font-size: 96px;
               font-style: normal;
               font-weight: 600;
               color: #6219d9;
           }
           span.weatherinfov1 {
               font-family: Segoe UI;
               font-size: 28px;
               font-style: normal;
               font-weight: 400;
               color: #201f1e;
           }
           span.weatherinfov2 {
               font-family: Segoe UI;
               font-size: 24px;
               font-style: normal;
               font-weight: 600;
               color: #a19f9d;
           }
       </style>
   
       <div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
           <div class="container" style="display: flex; flex-wrap: wrap;">
               <div class="col-md-12 columnBlockLayout weather" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 310px; word-break: break-word; padding: 0 180px; margin: 60px 0px;">
                   <h1>What's the weather?</h1>
                   <form id="cityForm">
                       <label for="locationInput">Enter a location to find out</label>
                       <br>
                       <input type="text" style="width: 840px; border: 1px solid #D2D0CE;" id="locationInput" required />
                       <p>
                       <p>
                           <button type="submit">Submit</button>
                       </p>
                   </form>
                   <div id="weatherdetail" class="weatherdetail" style="display: none;width: 840px">
                       <div>
                           <div>
                               <span class="temperature" id="temperature"> </span>
                               <span class="weatherinfov1" id="temperature_units"></span>
                           </div>
                           <div>
                               <span class="weatherinfov1" style="font-size: 36px;" id="location"> </span>
                               <br>
                               <span class="weatherinfov1" style="font-size: 24px;" id="cordinates"></span>
                               <p>
                           </div>
                       </div>
                       <div style="display: flex;">
                           <div style="flex: 1;">
                               <span class="weatherinfov2">Wind: </span>
                               <span class="weatherinfov1" id="windspeed"></span>
                               <span class="weatherinfov1" id="speed_units"> </span>
                           </div>
                           <div style="flex: 1;">
                               <span class="weatherinfov2">Visibility: </span>
                               <span class="weatherinfov1" id="visibility"></span>
                               <span class="weatherinfov1" id="distance_units"></span>
                           </div>
                       </div>
                       <div style="display: flex;">
                           <div style="flex: 1;">
                               <span class="weatherinfov2">UV Index: </span>
                               <span class="weatherinfov1" id="uv"></span>
                           </div>
                           <div style="flex: 1;">
                               <span class="weatherinfov2">Conditions: </span>
                               <span class="weatherinfov1" id="condition"></span>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   
       <script>
           document.getElementById("cityForm").addEventListener("submit", function (event) {
               event.preventDefault(); // Prevent form submission
               var weatherDiv = document.getElementById("weatherdetail");
               weatherDiv.style.display = "none";
   
               var location = document.getElementById("locationInput").value;
   
               var _url = "<Cloud flow URL>";
   
             var data = {};
             data["Location"] = location;
   
               var payload = {};
               payload.eventData = JSON.stringify(data);
               shell
                   .ajaxSafePost({
                       type: "POST",
                       url: _url,
                       data: payload
                   })
                   .done(function (response) {
                       const result = JSON.parse(response);
                       document.getElementById("temperature").innerHTML = result["temperature"];
                       document.getElementById("windspeed").innerHTML = result["wind_speed"];
                       document.getElementById("visibility").innerHTML = result["visibility_distance"];
                       document.getElementById("uv").innerHTML = result["uv_index"];
                       document.getElementById("location").innerHTML = result["location"];
                       document.getElementById("condition").innerHTML = result["conditions"];
                       document.getElementById("temperature_units").innerHTML = result["temperature_units"];
                       document.getElementById("speed_units").innerHTML = result["speed_units"];
                       document.getElementById("distance_units").innerHTML = result["distance_units"];
                       document.getElementById("cordinates").innerHTML = parseFloat(result["latitude"]).toFixed(2) + ', ' + parseFloat(result["longitude"]).toFixed(2);
                       weatherDiv.style.display = "block";
                   })
                   .fail(function () {
                       alert("failed");
                   });
           });
       </script>
   

6. इस URL को उस URL से बदलें जिसे आपने पिछले चरण में कॉपी किया था.

7. कोड को CTRL+S चुनकर सहेजें.

8. डिज़ाइन स्टूडियो में सिंक चुनें.

चरण 4: प्रवाह एकीकरण का परीक्षण करें

प्रवाह एकीकरण कार्यक्षमता का परीक्षण करने के लिए:

1. साइट खोलने के लिए पूर्वावलोकन चुनें.

2. स्थान टेक्स्ट बॉक्स में एक डाक कोड या शहर दर्ज करें.

3. सबमिट करें बटन का चयन करें.