AngularJS की मदद से ऐप्लिकेशन बनाएं

इस गाइड से, आपको AngularJS एमवीसी फ़्रेमवर्क के साथ Chrome ऐप्लिकेशन बनाने में मदद मिलती है. यहां की यात्रा पर हूं हम Angular के बारे में बताने के लिए, फ़्रेमवर्क का इस्तेमाल करके बनाए गए असल ऐप्लिकेशन के बारे में बताएंगे, Google Drive अपलोडर. GitHub पर सोर्स कोड उपलब्ध है.

ऐप्लिकेशन के बारे में जानकारी

Google Drive अपलोडर

Google डिस्क अपलोडर उपयोगकर्ताओं को HTML खींचें और छोड़ें API का उपयोग करके नई फ़ाइलें अपलोड करें और Google डिस्क खाते में लॉग इन करें. यह है Google के API में से किसी एक से बात करने वाले ऐप्लिकेशन को बनाने का शानदार उदाहरण; ऐसे मामले में, Google Drive API.

अपलोड करने वाला, उपयोगकर्ता के डेटा को ऐक्सेस करने के लिए OAuth2 का इस्तेमाल करता है. chrome.identity API हैंडल की मदद से, लॉग-इन किए हुए उपयोगकर्ता के लिए OAuth टोकन, ताकि हमारे लिए कड़ी मेहनत कर दी गई हो! एक बार हमारे लंबे ऐक्सेस टोकन देता है, तो ऐप्लिकेशन उपयोगकर्ता का डेटा ऐक्सेस करने के लिए Google Drive API का इस्तेमाल करते हैं.

यह ऐप्लिकेशन, खास सुविधाओं का इस्तेमाल करता है:

  • सीएसपी के लिए, AngularJS की अपने-आप पहचान करने वाली सुविधा
  • Google Drive API से फ़ेच की गई फ़ाइलों की सूची बनाएं
  • फ़ाइल आइकॉन ऑफ़लाइन सेव करने के लिए HTML5 Filesystem API
  • डेस्कटॉप से नई फ़ाइलों को इंपोर्ट/अपलोड करने के लिए HTML5 खींचें और छोड़ें
  • क्रॉस-डोमेन और इमेज लोड करने के लिए XHR2
  • OAuth की मदद से पुष्टि करने के लिए, chrome.identity API
  • ऐप्लिकेशन के नेवबार के लुक और स्टाइल को तय करने के लिए Chromeलेस फ़्रेम

मेनिफ़ेस्ट बनाना

सभी Chrome ऐप्स के लिए एक manifest.json फ़ाइल की ज़रूरत होती है, जिसमें वह जानकारी शामिल होती है जिसे Chrome को लॉन्च करना होता है ऐप खोलें. मेनिफ़ेस्ट में काम का मेटाडेटा शामिल होता है. साथ ही, इसमें ऐप्लिकेशन को जिन खास अनुमतियों की ज़रूरत होती है उनकी सूची भी शामिल होती है दौड़ना.

अपलोडर के मेनिफ़ेस्ट का छोटा किया गया वर्शन इस तरह दिखता है:

{
  "name": "Google Drive Uploader",
  "version": "0.0.1",
  "manifest_version": 2,
  "oauth2": {
    "client_id": "665859454684.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/drive"
    ]
  },
 ...
  "permissions": [
    "https://docs.google.com/feeds/",
    "https://docs.googleusercontent.com/",
    "https://spreadsheets.google.com/feeds/",
    "https://ssl.gstatic.com/",
    "https://www.googleapis.com/"
  ]
}

इस मेनिफ़ेस्ट का सबसे अहम हिस्सा "oauth2" है और "अनुमतियां" सेक्शन.

"oauth2" सेक्शन में OAuth2 के ज़रिए बताए गए ज़रूरी पैरामीटर के बारे में बताया गया है, ताकि इसे बेहतर तरीके से दिखाया जा सके. बनाने के लिए "client_id", अपना क्लाइंट आईडी पाएं में दिए गए निर्देशों का पालन करें. "स्कोप" सूची में अनुमति देने के दायरे के मुताबिक, OAuth टोकन मान्य होगा. उदाहरण के लिए, ऐप्लिकेशन को जिन एपीआई की ज़रूरत है ऐक्सेस करें).

"अनुमतियां" सेक्शन में ऐसे यूआरएल शामिल हैं जिन्हें ऐप्लिकेशन XHR2 के ज़रिए ऐक्सेस करेगा. यूआरएल प्रीफ़िक्स हैं ताकि Chrome को यह पता चल सके कि कौनसे क्रॉस-डोमेन अनुरोधों को अनुमति देनी है.

इवेंट पेज बनाना

ऐप्लिकेशन को लॉन्च करने और सिस्टम इवेंट का जवाब देने के लिए, सभी Chrome ऐप्स को एक बैकग्राउंड स्क्रिप्ट/पेज की ज़रूरत होती है.

अपनी background.js स्क्रिप्ट में, Drive अपलोडर मुख्य पेज पर 500x600px विंडो खोलता है. यह भी विंडो की कम से कम ऊंचाई और चौड़ाई तय करता है, ताकि कॉन्टेंट बहुत ज़्यादा खराब न हो:

chrome.app.runtime.onLaunched.addListener(function(launchData) {
  chrome.app.window.create('../main.html', {
    id: "GDriveExample",
    bounds: {
      width: 500,
      height: 600
    },
    minWidth: 500,
    minHeight: 600,
    frame: 'none'
  });
});

विंडो को क्रोमलेस विंडो (फ़्रेम: 'none') के रूप में बनाया जाता है. डिफ़ॉल्ट रूप से, विंडो OS का डिफ़ॉल्ट बंद करें/बड़ा करें/छोटा करें बार:

बिना फ़्रेम वाला Google Drive अपलोडर

विंडो को "ब्लैंक स्लेट" के रूप में रेंडर करने के लिए, वीडियो अपलोड करने वाला frame: 'none' का इस्तेमाल करता है और अपने हिसाब से क्लोज़िंग करता है main.html में बटन:

कस्टम फ़्रेम के साथ Google Drive अपलोडर

पूरा नेविगेशन एरिया,