fx API और वेब ऐप्स
ENहिन्दी

doGet/doPost से वेब ऐप बनाएं

⏱ 25 मिनट

आप क्या सीखेंगे

  • script को web page या JSON API में बदलना
  • doGet(e) और doPost(e) और उनके parameters
  • deploy करना, access settings और versions update करना
  • शीट पर चलने वाला छोटा "order status देखें" app

समझिए

दो ख़ास functions

Script को web app के रूप में deploy करने पर Google उसे एक URL देता है। URL खोलने पर चलता है:

  • doGet(e) — सामान्य visits और links के लिए (GET requests)
  • doPost(e) — जब कोई form या दूसरा program data भेजे (POST requests)

ये जो लौटाते हैं, visitor को वही दिखता है।

Web page लौटाना

Index नाम की HTML file जोड़ें:

<!DOCTYPE html>
<html>
  <head><base target="_top"><meta name="viewport" content="width=device-width, initial-scale=1"></head>
  <body style="font-family: Arial; max-width: 420px; margin: 24px auto;">
    <h2>Check your order</h2>
    <input id="orderNo" placeholder="Order number, e.g. ORD-1042">
    <button onclick="check()">Check</button>
    <p id="result"></p>
    <script>
      function check() {
        const no = document.getElementById('orderNo').value.trim();
        document.getElementById('result').textContent = 'Checking…';
        google.script.run
          .withSuccessHandler(msg => { document.getElementById('result').textContent = msg; })
          .getStatus(no);
      }
    </script>
  </body>
</html>

और Code.gs में:

const SHEET_ID = 'PASTE_SHEET_ID';

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('Order status')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function getStatus(orderNo) {
  if (!orderNo) return 'Please enter an order number.';
  const rows = SpreadsheetApp.openById(SHEET_ID).getSheetByName('Orders').getDataRange().getValues();
  const match = rows.find(r => String(r[0]).toUpperCase() === orderNo.toUpperCase());
  return match ? `Status: ${match[3]}` : 'Order not found.';
}

सिर्फ़ Status लौटाया जाता है — पूरी row (phone numbers, amounts) कभी public page पर न भेजें।

JSON लौटाना (छोटा API)

function doGet(e) {
  const no = (e.parameter.order || '').toUpperCase();   // ?order=ORD-1042
  const rows = SpreadsheetApp.openById(SHEET_ID).getSheetByName('Orders').getDataRange().getValues();
  const match = rows.find(r => String(r[0]).toUpperCase() === no);

  const body = match ? { order: match[0], status: match[3] } : { error: 'not found' };
  return ContentService.createTextOutput(JSON.stringify(body))
    .setMimeType(ContentService.MimeType.JSON);
}

खोलें https://script.google.com/macros/s/<DEPLOYMENT_ID>/exec?order=ORD-1042।

e.parameter में query-string की values होती हैं। एक project में एक ही doGet हो सकता है, इसलिए HTML वाला या JSON वाला रूप चुनें — या किसी parameter (जैसे e.parameter.format === 'json') से तय करें कि क्या लौटाना है।

Data लेना: doPost

function doPost(e) {
  try {
    const data = JSON.parse(e?.postData?.contents || '{}');
    const token = PropertiesService.getScriptProperties().getProperty('WEBHOOK_TOKEN');
    if (!token || data.token !== token) throw new Error('Unauthorized');
    for (const key of ['name', 'phone', 'source']) {
      if (typeof data[key] !== 'string' || !data[key].trim() || data[key].length > 200) {
        throw new Error('Invalid ' + key);
      }
    }
    // Keep submitted strings as text, never spreadsheet formulas.
    const text = value => /^[=+@-]/.test(value.trim()) ? "'" + value.trim() : value.trim();
    SpreadsheetApp.openById(SHEET_ID).getSheetByName('Leads')
      .appendRow([new Date(), text(data.name), text(data.phone), text(data.source)]);
    return ContentService.createTextOutput(JSON.stringify({ ok: true }))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (err) {
    return ContentService.createTextOutput(JSON.stringify({ ok: false, error: String(err.message) }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

अब आपकी website, WhatsApp/automation tool या कोई दूसरा script leads को सीधे शीट में POST कर सकता है।

पहले Script Properties में WEBHOOK_TOKEN सेट करें। विश्वसनीय सर्वर से भेजे गए JSON में ही यह टोकन दें; सार्वजनिक ब्राउज़र कोड में न रखें। त्रुटि के लिए जवाब में ok: false जाँचें। सीखते समय Only myself और काल्पनिक डेटा लें। असली ग्राहक के ऑर्डर दिखाने के लिए पहचान और उस ऑर्डर तक पहुँच की जाँच भी ज़रूरी है।

Deploy करना

  1. Deploy → New deployment → Select type: Web app।
  2. Execute as: Me (script शीट तक आपकी पहुँच से चलता है)।
  3. Who has access: Only myself, Anyone with a Google account, या Anyone।
  4. Deploy पर click करें और /exec URL copy करें।

Update करना: code save करने से live app नहीं बदलता। Deploy → Manage deployments → Edit (pencil) → Version: New version → Deploy करें। URL वही रहता है। Testing के लिए Test deployments एक /dev URL देता है जो हमेशा आपका ताज़ा saved code चलाता है (सिर्फ़ प्रोजेक्ट के संपादकों के लिए)।

Start with Only myself and synthetic data. A real customer-facing order lookup also needs authentication and authorization; an order number alone is not proof of ownership.

Security checklist

  • Anyone access का मतलब है URL जिसके पास हो वह इसे चला सकता है — हर input जाँचें।
  • सिर्फ़ वही fields लौटाएँ जो visitor के काम की हों।
  • अपने systems से आने वाले doPost के लिए shared secret माँगें, जैसे if (data.token !== PropertiesService.getScriptProperties().getProperty('WEBHOOK_TOKEN')) return ...।
  • अगर एक साथ कई requests append कर सकती हैं तो LockService लगाएँ।

मुख्य बातें

  • doGet / doPost + Deploy = एक URL जो आपका code चलाता है।
  • Pages के लिए HtmlService, JSON के लिए ContentService।
  • हर बदलाव के बाद new version deploy करें।
  • Public web apps को किसी भी public website की तरह मानें: inputs जाँचें, कम से कम data दिखाएँ।

अभ्यास

अभ्यासअभ्यास 1

एक ही doGet में format parameter जोड़िए ताकि ?order=ORD-1042&format=json JSON लौटाए और बिना parameter के HTML page दिखे।

प्रश्नोत्तरी

आपने नया code save किया लेकिन live URL अब भी पुराना दिखा रहा है। क्यों? a) सिर्फ़ browser cache b) नया version deploy नहीं किया c) doGet ख़राब है
नया version deploy नहीं किया
?order=ORD-1 जैसी query-string values कहाँ मिलती हैं? a) e.postData b) e.parameter c) e.range
e.parameter
doGet/doPost से वेब ऐप बनाएं · हिंदी | ExcelWalaa