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

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

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

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

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

Google Drive अपलोडर

Google Drive अपलोडर की मदद से उपयोगकर्ता अपने Google Drive खाते में सेव की गई फ़ाइलों को तुरंत देख सकते हैं और उनसे इंटरैक्ट कर सकते हैं. साथ ही, HTML Drag and Drop API का इस्तेमाल करके नई फ़ाइलें अपलोड कर सकते हैं. यह एक ऐसा ऐप्लिकेशन बनाने का एक अच्छा उदाहरण है जो Google के किसी एक एपीआई से काम करता है; इस मामले में, 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'). डिफ़ॉल्ट रूप से, विंडो ओएस के डिफ़ॉल्ट बंद/बड़ा/छोटा करने वाले बार के साथ रेंडर होती हैं:

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

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

व्यू बनाना

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

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

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

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

यह बिलकुल वैसा ही है जैसा वह दिखता है:

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

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

इसके बाद, हमें Angular को बताना होगा कि इस टेंप्लेट की रेंडरिंग को कौनसा कंट्रोलर मैनेज करेगा. इसके लिए, हम ngController डायरेक्टिव का इस्तेमाल करके, DocsController को यह बताने के लिए कहते हैं कि उसे टेंप्लेट पर कंट्रोल करना है :
```
<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 एमवीसी फ़्रेमवर्क के उलट, Angular v1.1.0+ में सख्त सीएसपी में काम करने के लिए किसी बदलाव की ज़रूरत नहीं है. यह सब काम करता है!

हालांकि, अगर आप v1.0.1 और v1.1.0 के बीच Angular के पुराने वर्शन का इस्तेमाल कर रहे हैं, तो आपको "कॉन्टेंट सिक्योरिटी मोड" में Angular को चलाने के लिए बताना होगा. ऐसा करने के लिए, ngApp के साथ-साथ ngCsp डायरेक्टिव भी शामिल करें:
```
<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 कंस्ट्रक्टर के हिस्से के तौर पर कॉल किया जाता है. जब Angular के इंटरनल कंट्रोलर बनाते हैं, तो हम भरोसा करते हैं कि उपयोगकर्ता के लिए नया OAuth टोकन मौजूद होगा.

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

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

अब मुख्य कंट्रोलर तरीका fetchDocs() तय करने का समय आ गया है. यह कंट्रोलर का काम होता है. यह उपयोगकर्ता की फ़ाइलों का अनुरोध करने और एपीआई रिस्पॉन्स से मिले डेटा के साथ Docs कलेक्शन फ़ाइल करने की ज़िम्मेदारी है.
```
$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);
};
```
XHR पर मुख्य फ़ीड वापस पाने के लिए fetchDocs(), Angular की $http सेवा का इस्तेमाल करता है. oauth ऐक्सेस टोकन को Authorization हेडर में दूसरे कस्टम हेडर और पैरामीटर के साथ शामिल किया जाता है.

successCallback, एपीआई के रिस्पॉन्स को प्रोसेस करता है और फ़ीड में हर एंट्री के लिए, एक नया दस्तावेज़ ऑब्जेक्ट बनाता है.

अगर अभी fetchDocs() का इस्तेमाल किया जा रहा है, तो सभी सुविधाएं काम करेंगी. साथ ही, यहां फ़ाइलों की सूची दिखेगी:

हुर्रे!

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

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

रिमोट इमेज एसेट इंपोर्ट की जा रही हैं

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

यहां जोड़ा गया 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);
      }
    });
  });
};
```
अब सीएसपी हमसे फिर से संतुष्ट है. इसलिए, हमें अच्छे फ़ाइल आइकॉन मिलते हैं:

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

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

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

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

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

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

बस इसे 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;
});
```