यह पेज, Chrome ऐप्स प्लैटफ़ॉर्म के दस्तावेज़ का हिस्सा है. इस प्लैटफ़ॉर्म को 2020 में बंद कर दिया गया था. यह ChromeOS का इस्तेमाल करने वाले, Enterprise और Education के ग्राहकों के लिए, कम से कम जनवरी 2025 तक उपलब्ध रहेगा. अपने ऐप्लिकेशन को माइग्रेट करने के बारे में ज़्यादा जानें.

इस पेज का अनुवाद Cloud Translation API से किया गया है.

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 अपलोडर

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

(अगला सेक्शन देखें). ऐप्लिकेशन को बेहतर तरीके से मैनेज करने के लिए, कस्टम बंद करें बटन तब तक छिपा रहता है, जब तक उपयोगकर्ता इस क्षेत्र से इंटरैक्ट नहीं करता:

<style>
nav:hover #close-button {
  opacity: 1;
}

#close-button {
  float: right;
  padding: 0 5px 2px 5px;
  font-weight: bold;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
</style>

<button class="btn" id="close-button" title="Close">x</button>

app.js में, यह बटन window.close() से जुड़ा हुआ है.

ऐप्लिकेशन को ऐंग्युलर तरीके से डिज़ाइन करना

Angular एक MVC फ़्रेमवर्क है, इसलिए हमें ऐप्लिकेशन को इस तरह से परिभाषित करना होगा कि कोई मॉडल, व्यू, और कंट्रोलर सही तरीके से इससे बाहर हो जाता है. अच्छी बात यह है कि Angular का इस्तेमाल करते समय यह आसान नहीं है.

दृश्य सबसे आसान है, इसलिए आइए वहीं से शुरू करते हैं.

व्यू बनाया जा रहा है

main.html "V" है MVC में; जिसमें हम डेटा रेंडर करने के लिए एचटीएमएल टेंप्लेट तय करते हैं. ऐंगुलर में, टेंप्लेट, एचटीएमएल के आसान ब्लॉक होते हैं. इनमें कुछ खास तरह की सॉस शामिल होती है.

आखिर में हम उपयोगकर्ता की फ़ाइलों की सूची दिखाना चाहते हैं. इसके लिए, एक आसान

<ul>
  <li data-ng-repeat="doc in docs">
    <img data-ng-src=""> <a href=""></a>

    <span class="date"></span>
  </li>
</ul>

यह ठीक वैसा ही दिखता है जैसा यह दिखता है:

हमारे डेटा मॉडल "दस्तावेज़" के हर दस्तावेज़ के लिए. हर आइटम इसमें फ़ाइल का आइकॉन, फ़ाइल को वेब पर खोलने के लिए लिंक, और पिछली बार अपडेट की गई तारीख की जानकारी मौजूद होती है.

ध्यान दें: टेंप्लेट को मान्य एचटीएमएल बनाने के लिए, हम Angular के लिए data-* एट्रिब्यूट का इस्तेमाल कर रहे हैं ngRepeat इटरेटर, लेकिन आपको ऐसा करने की ज़रूरत नहीं है. रिपीटर को इस तरह आसानी से लिखा जा सकता है <li ng-repeat="doc in docs">.

इसके बाद, हमें Angular को बताना होगा कि इस टेंप्लेट की रेंडरिंग की निगरानी कौनसा कंट्रोलर करेगा. इसके लिए, हम DocsController को यह बताने के लिए कि टेंप्लेट पर नियम लागू करना है, ngController निर्देश का इस्तेमाल करें :
```
<body data-ng-controller="DocsController">
<section id="main">
  <ul>
    <li data-ng-repeat="doc in docs">
      <img data-ng-src=""> <a href=""></a> 
      <span class="date"></span>
    </li>
  </ul>
</section>
</body>
```
ध्यान दें कि आपको यहां नहीं दिख रहा है कि हम डेटा के लिए इवेंट लिसनर या प्रॉपर्टी को जोड़ रहे हैं बाइंडिंग. ऐंग्युलर यह काम हमारे लिए कर रहा है!

आखिरी कदम, Angular को हमारे टेंप्लेट के लिए तैयार करना है. ऐसा करने का सामान्य तरीका यह है कि ngApp डायरेक्टिव के बारे में पूरी जानकारी :
```
<html data-ng-app="gDriveApp">
```
अगर आप चाहें, तो ऐप्लिकेशन को पेज के छोटे हिस्से पर भी दिखाया जा सकता है. हमारे पास केवल एक कंट्रोलर आ सकता है. हालांकि, बाद में और कंट्रोलर को जोड़ने के लिए, ngApp को सबसे ऊपर रखें एलिमेंट, पूरे पेज को Angular के लिए तैयार करता है.

main.html का फ़ाइनल प्रॉडक्ट कुछ ऐसा दिखता है:
```
<html data-ng-app="gDriveApp">
<head>
  …

  <base target="_blank">
</head>
<body data-ng-controller="DocsController">
<section id="main">
  <nav>
    <h2>Google Drive Uploader</h2>
    <button class="btn" data-ng-click="fetchDocs()">Refresh</button>
    <button class="btn" id="close-button" title="Close"></button>
  </nav>
  <ul>
    <li data-ng-repeat="doc in docs">
      <img data-ng-src=""> <a href=""></a>  
      <span class="date"></span>
    </li>
  </ul>
</section>
```
कॉन्टेंट की सुरक्षा के बारे में जानकारी

कई अन्य JS MVC फ़्रेमवर्क के उलट, Angular v1.1.0+ के लिए, सख्त नियमों का पालन करने के लिए किसी तरह के बदलाव की ज़रूरत नहीं होती सीएसपी. यह खास तरह से काम करता है!

हालांकि, अगर वर्शन 1.0.1 और v1.1.0 के बीच, Angular का पुराना वर्शन इस्तेमाल किया जा रहा है, तो आपको "कॉन्टेंट सुरक्षा मोड" में चलाने के लिए ऐंग्युलर. ऐसा करने के लिए, ngCsp डायरेक्टिव को शामिल किया जाता है ngApp के साथ-साथ:
```
<html data-ng-app data-ng-csp>
```
अनुमति मैनेज करना

डेटा मॉडल, ऐप्लिकेशन से अपने-आप जनरेट नहीं होता. इसके बजाय, इसे किसी बाहरी एपीआई ( Google Drive API). इसलिए, ऐप्लिकेशन का डेटा अपने-आप भरने के लिए, कुछ काम करना पड़ता है.

एपीआई अनुरोध करने से पहले, हमें उपयोगकर्ता के Google खाते के लिए OAuth टोकन फ़ेच करना होगा. इसके लिए, हमने chrome.identity.getAuthToken() के साथ कॉल को रैप करने और accessToken. इसका इस्तेमाल हम Drive API में, आने वाले समय में कॉल करने के लिए कर सकते हैं.
```
GDocs.prototype.auth = function(opt_callback) {
  try {
    chrome.identity.getAuthToken({interactive: false}, function(token) {
      if (token) {
        this.accessToken = token;
        opt_callback && opt_callback();
      }
    }.bind(this));
  } catch(e) {
    console.log(e);
  }
};
```
ध्यान दें: वैकल्पिक कॉलबैक पास करने से, हमें यह जानने में आसानी होती है कि OAuth टोकन कब है तैयार हैं.

ध्यान दें: चीज़ों को थोड़ा आसान बनाने के लिए, हमने gdocs.js नाम की एक लाइब्रेरी बनाई है, ताकि एपीआई टास्क मैनेज किए जा सकें.

टोकन मिलने के बाद, Drive API के लिए अनुरोध करने और मॉडल को पॉप्युलेट करने का समय आ जाता है.

स्केलेटन कंट्रोलर

"मॉडल" अपलोडर के लिए ऑब्जेक्ट की एक सरल सारणी (जिसे दस्तावेज़ कहा जाता है) है जिसे वे
टेंप्लेट में:
```
var gDriveApp = angular.module('gDriveApp', []);

gDriveApp.factory('gdocs', function() {
  var gdocs = new GDocs();
  return gdocs;
});

function DocsController($scope, $http, gdocs) {
  $scope.docs = [];

  $scope.fetchDocs = function() {
     ...
  };

  // Invoke on ctor call. Fetch docs after we have the oauth token.
  gdocs.auth(function() {
    $scope.fetchDocs();
  });

}
```
ध्यान दें कि gdocs.auth() को DocsController कंस्ट्रक्टर के हिस्से के तौर पर कॉल किया जाता है. जब ऐंग्युलर्स इंटर्नल कोड कंट्रोलर बनाते हैं, तो हम उपयोगकर्ता के लिए एक नया OAuth टोकन बनाए रखने के लिए सुरक्षित हैं.

डेटा फ़ेच किया जा रहा है

टेंप्लेट तैयार किया गया है. कंट्रोलर बनाया गया है. OAuth टोकन हाथ में है. अब क्या करें?

अब मुख्य नियंत्रक विधि, fetchDocs() तय करने का समय आ गया है. यह कंट्रोलर का घोड़ा है. यह उपयोगकर्ता की फ़ाइलों का अनुरोध करने और एपीआई के रिस्पॉन्स से मिले डेटा के साथ दस्तावेज़ कलेक्शन को फ़ाइल करने के लिए ज़िम्मेदार है.
```
$scope.fetchDocs = function() {
  $scope.docs = []; // First, clear out any old results

  // Response handler that doesn't cache file icons.
  var successCallback = function(resp, status, headers, config) {
    var docs = [];
    var totalEntries = resp.feed.entry.length;

    resp.feed.entry.forEach(function(entry, i) {
      var doc = {
        title: entry.title.$t,
        updatedDate: Util.formatDate(entry.updated.$t),
        updatedDateFull: entry.updated.$t,
        icon: gdocs.getLink(entry.link,
                            'http://schemas.google.com/docs/2007#icon').href,
        alternateLink: gdocs.getLink(entry.link, 'alternate').href,
        size: entry.docs$size ? '( ' + entry.docs$size.$t + ' bytes)' : null
      };

      $scope.docs.push(doc);

      // Only sort when last entry is seen.
      if (totalEntries - 1 == i) {
        $scope.docs.sort(Util.sortByDate);
      }
    });
  };

  var config = {
    params: {'alt': 'json'},
    headers: {
      'Authorization': 'Bearer ' + gdocs.accessToken,
      'GData-Version': '3.0'
    }
  };

  $http.get(gdocs.DOCLIST_FEED, config).success(successCallback);
};
```
fetchDocs(), XHR पर मुख्य फ़ीड को फिर से पाने के लिए, Angular की $http सेवा का इस्तेमाल करता है. oauth ऐक्सेस टोकन, Authorization हेडर में अन्य कस्टम हेडर और पैरामीटर के साथ शामिल होता है.

successCallback, एपीआई के रिस्पॉन्स को प्रोसेस करता है और फ़ीड.

इस समय fetchDocs() का इस्तेमाल करने पर, सब कुछ काम करेगा और आपको फ़ाइलों की सूची दिखेगी:

हुर्रे!

इंतज़ार करें,...हमें वे साफ़ फ़ाइल आइकॉन याद नहीं आ रहे हैं. क्या देता है? कंसोल की तुरंत जांच करने पर, आपको कई तरह की जानकारी दिखती है में गड़बड़ियां हो सकती हैं:

इसकी वजह यह है कि हम img.src आइकॉन को एक्सटर्नल यूआरएल पर सेट करने की कोशिश कर रहे हैं. इससे सीएसपी का उल्लंघन होता है. इसके लिए उदाहरण: https://ssl.gstatic.com/docs/doclist/images/icon_10_document_list.png. इसे ठीक करने के लिए, हम इन रिमोट ऐसेट को स्थानीय तौर पर ऐप्लिकेशन में शामिल करना होगा.

रिमोट इमेज ऐसेट इंपोर्ट करें

सीएसपी हमें चिल्लाना बंद करने के लिए, "इंपोर्ट करने" के लिए XHR2 का इस्तेमाल करता है फ़ाइल के आइकॉन को Blobs के रूप में सेव करने का विकल्प है, तो ऐप्लिकेशन की ओर से बनाए गए blob: URL में img.src.

जोड़े गए XHR कोड के साथ अपडेट किया गया successCallback यहाँ दिया गया है:
```
var successCallback = function(resp, status, headers, config) {
  var docs = [];
  var totalEntries = resp.feed.entry.length;

  resp.feed.entry.forEach(function(entry, i) {
    var doc = {
      ...
    };

    $http.get(doc.icon, {responseType: 'blob'}).success(function(blob) {
      console.log('Fetched icon via XHR');

      blob.name = doc.iconFilename; // Add icon filename to blob.

      writeFile(blob); // Write is async, but that's ok.

      doc.icon = window.URL.createObjectURL(blob);

      $scope.docs.push(doc);

      // Only sort when last entry is seen.
      if (totalEntries - 1 == i) {
        $scope.docs.sort(Util.sortByDate);
      }
    });
  });
};
```
सीएसपी को हमसे फिर से खुशी हुई, इसलिए हमें अच्छे फ़ाइल आइकॉन मिलते हैं:

ऑफ़लाइन जाना: बाहरी रिसॉर्स को कैश मेमोरी में सेव करना

साफ़ तौर पर दिखने वाला ऑप्टिमाइज़ेशन: साइट के हर आइकॉन के लिए 100 XHR अनुरोध न करें fetchDocs() पर किए जाने वाले प्रत्येक कॉल. "रीफ़्रेश करें" दबाकर डेवलपर टूल कंसोल में इसकी पुष्टि करें बटन को कई बार इस्तेमाल करना होगा. हर बार, n इमेज फ़ेच की जाती हैं:

कैश मेमोरी में एक लेयर जोड़ने के लिए, successCallback में बदलाव करें. जोड़ी गई जानकारी को बोल्ड करके हाइलाइट किया जाता है:
```
$scope.fetchDocs = function() {
  ...

  // Response handler that caches file icons in the filesystem API.
  var successCallbackWithFsCaching = function(resp, status, headers, config) {
    var docs = [];
    var totalEntries = resp.feed.entry.length;

    resp.feed.entry.forEach(function(entry, i) {
      var doc = {
        ...
      };

      // 'https://ssl.gstatic.com/doc_icon_128.png' -> 'doc_icon_128.png'
      doc.iconFilename = doc.icon.substring(doc.icon.lastIndexOf('/') + 1);

      // If file exists, it we'll get back a FileEntry for the filesystem URL.
      // Otherwise, the error callback will fire and we need to XHR it in and
      // write it to the FS.
      var fsURL = fs.root.toURL() + FOLDERNAME + '/' + doc.iconFilename;
      window.webkitResolveLocalFileSystemURL(fsURL, function(entry) {
        doc.icon = entry.toURL(); // should be === to fsURL, but whatevs.

        $scope.docs.push(doc); // add doc to model.

        // Only want to sort and call $apply() when we have all entries.
        if (totalEntries - 1 == i) {
          $scope.docs.sort(Util.sortByDate);
          $scope.$apply(function($scope) {}); // Inform angular that we made changes.
        }

      }, function(e) {
        // Error: file doesn't exist yet. XHR it in and write it to the FS.

        $http.get(doc.icon, {responseType: 'blob'}).success(function(blob) {
          console.log('Fetched icon via XHR');

          blob.name = doc.iconFilename; // Add icon filename to blob.

          writeFile(blob); // Write is async, but that's ok.

          doc.icon = window.URL.createObjectURL(blob);

          $scope.docs.push(doc);

          // Only sort when last entry is seen.
          if (totalEntries - 1 == i) {
            $scope.docs.sort(Util.sortByDate);
          }
        });

      });
    });
  };

  var config = {
    ...
  };

  $http.get(gdocs.DOCLIST_FEED, config).success(successCallbackWithFsCaching);
};
```
ध्यान दें कि webkitResolveLocalFileSystemURL() कॉलबैक में हम $scope.$apply() को तब कॉल करते हैं, जब आखिरी एंट्री दिखती है. आम तौर पर, $apply() को कॉल करना ज़रूरी नहीं होता. Angular, डेटा में हुए बदलावों का पता लगाता है और मॉडल को मशीन लर्निंग मॉडल में मूव करें. हालांकि हमारे मामले में, हमारे पास एसिंक्रोनस कॉलबैक की एक अतिरिक्त लेयर है, Angular को इसकी जानकारी नहीं है. हमारा मॉडल अपडेट होने पर, हमें Angular को साफ़ तौर पर बताना होगा.

पहली बार चलाने पर, आइकन HTML5 फ़ाइलसिस्टम में नहीं होंगे और आइकन window.webkitResolveLocalFileSystemURL() की वजह से, गड़बड़ी वाला कॉलबैक शुरू हो जाएगा. इसके लिए केस, हम पहले की तकनीक का फिर से इस्तेमाल कर सकते हैं और इमेज फ़ेच कर सकते हैं. इस बार अंतर सिर्फ़ यह है हर ब्लॉब को फ़ाइल सिस्टम में लिखा जाता है (writeFile() देखें). कंसोल इसकी पुष्टि करता है व्यवहार:

अगली बार चलाने (या "रीफ़्रेश करें" बटन दबाने पर), URL को webkitResolveLocalFileSystemURL() मौजूद है, क्योंकि फ़ाइल पहले से कैश मेमोरी में सेव की गई है. ऐप्लिकेशन सेट करता है doc.icon को फ़ाइल के filesystem: URL से जोड़ दिया जाता है और इससे आइकॉन के लिए महंगे XHR का इस्तेमाल नहीं किया जा सकता.

अपलोड करने के लिए, खींचें और छोड़ें

अगर कोई अपलोड करने वाला ऐप्लिकेशन फ़ाइलें अपलोड नहीं कर सकता, तो वह नकली विज्ञापन दिखाता है!

app.js, HTML5 'खींचें और छोड़ें' सुविधा के आस-पास एक छोटी लाइब्रेरी लागू करके इस सुविधा को मैनेज करता है DnDFileController. यह डेस्कटॉप से फ़ाइलों को खींचकर उन्हें अपलोड करने की सुविधा देता है को भी ऐक्सेस किया जा सकता है.

इसे gdocs सेवा में जोड़ने से काम हो जाते हैं:
```
gDriveApp.factory('gdocs', function() {
  var gdocs = new GDocs();

  var dnd = new DnDFileController('body', function(files) {
    var $scope = angular.element(this).scope();
    Util.toArray(files).forEach(function(file, i) {
      gdocs.upload(file, function() {
        $scope.fetchDocs();
      });
    });
  });

  return gdocs;
});
```