Bu sayfa, 2020'de kullanımdan kaldırılan Chrome Uygulamaları platformu dokümanlarının bir parçasıdır. ChromeOS Enterprise ve Education müşterileri için bu özellik en az Ocak 2025'e kadar desteklenmeye devam edecektir. Uygulamanızı taşıma hakkında daha fazla bilgi edinin.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

AngularJS ile Uygulama Geliştirme

Bu kılavuz, AngularJS MVC çerçevesiyle Chrome Uygulamaları geliştirmeye başlamanıza yardımcı olur. Alıcı: örneğimizde, bu çerçeve kullanılarak oluşturulmuş gerçek bir uygulamaya, Google Drive Yükleme Aracı. Kaynak koda GitHub'dan ulaşabilirsiniz.

Uygulama hakkında

Google Drive Yükleme Aracı

Google Drive Yükleme Aracı, kullanıcıların kendi dosyalarında depolanan dosyaları hızlı bir şekilde görüntülemesine ve bu dosyalarla Google Drive hesabınızın yanı sıra HTML Sürükle ve Bırak API'lerini kullanarak yeni dosyalar yükleyebilirsiniz. Bu bir Google'ın API'lerinden biriyle iletişim kuran bir uygulama oluşturmak için iyi bir örnek; Bu örnekte Google Drive API'si.

Yükleyici, kullanıcının verilerine erişmek için OAuth2'yi kullanır. chrome.identity API, bir Giriş yapmış kullanıcının OAuth jetonu olduğundan işin zor kısmı bizim için tamamlanmıştır. Köklü bir üslup erişim jetonu kullanıyorsanız uygulamalar, kullanıcının verilerine erişmek için Google Drive API'sini kullanır.

Bu uygulamanın kullandığı temel özellikler:

CSP için AngularJS'nin otomatik algılaması
Google Drive API'den getirilen dosyaların bir listesini oluştur
Dosya simgelerini çevrimdışı depolamak için HTML5 Filesystem API
Masaüstünden yeni dosyaları içe/yüklemek için HTML5 Sürükle ve Bırak
Resimleri yüklemek için XHR2, alanlar arası
OAuth yetkilendirmesi için chrome.identity API
Uygulamanın kendi gezinme çubuğu görünümünü ve tarzını tanımlayan Chrome'suz çerçeveler

Manifest'i oluşturma

Tüm Chrome Uygulamaları için Chrome'un başlatması gereken bilgileri içeren bir manifest.json dosyası gerekir görebilirsiniz. Manifest, ilgili meta verileri içerir ve uygulamanın ihtiyaç duyduğu tüm özel izinleri listeler gerekir.

Yükleyici'nin manifest dosyasının sadeleştirilmiş sürümü şu şekilde görünür:

{
  "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/"
  ]
}

Bu manifestin en önemli bölümleri "oauth2"dir ve "izinler" bölümlerini kontrol edin.

"oauth2" bölümü, OAuth2 tarafından gereken parametreleri tanımlar. Bir "client_id" varsa Müşteri kimliğinizi alma başlıklı makaledeki talimatları uygulayın. "Kapsamlar" listele: OAuth jetonunun geçerli olacağı yetkilendirme kapsamları (örneğin, uygulamanın istediği API'ler) erişim).

"İzinler" bölümü, uygulamanın XHR2 aracılığıyla erişeceği URL'leri içerir. URL önekleri Chrome'un hangi web alanları arası isteklere izin vereceğini bilmesi için gereklidir.

Etkinlik sayfasını oluşturma

Tüm Chrome Uygulamaları, uygulamayı başlatmak ve sistem etkinliklerine yanıt vermek için bir arka plan komut dosyası/sayfası gerektirir.

Drive Yükleyici, background.js komut dosyasında ana sayfaya 500x600 piksel boyutunda bir pencere açar. Aynı zamanda içeriğin çok fazla bükülmemesi için pencere için minimum yükseklik ve genişliği belirtir:

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'
  });
});

Pencere, denetim içermeyen bir pencere olarak oluşturulur (çerçeve: 'none'). Varsayılan olarak, pencereler İşletim sisteminin varsayılan kapatma/genişlet/küçült çubuğu:

Çerçevesiz Google Drive Yükleyici

Yükleyici, pencereyi "boş seçenek listesi" olarak görüntülemek için frame: 'none' kullanır ve özel bir kapanış main.html içindeki:

Özel çerçeveli Google Drive Yükleyici

Tüm gezinme alanı bir

(sonraki bölüme bakın). Uygulamayı biraz daha sadeleştirmek için Özel kapat düğmesi, kullanıcı bu alanla etkileşime girene kadar gizlenir:

<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'de bu düğme window.close() öğesine bağlıdır.

Uygulamayı Angular yöntemiyle tasarlama

Angular bir MVC çerçevesidir. Bu yüzden uygulamayı, bir model, görünüm ve bunun içine alır. Neyse ki, Angular kullanırken bu önemsizdir.

Görünüm, en kolay seçenek olduğu için başlayalım.

Görünümü oluşturma

main.html, "V"dir MVC'de; Bu bölümde, verilerin oluşturulacağı HTML şablonlarının tanımlanması gerekir. Angular'da, şablonlar, özel soslar içeren basit HTML bloklarıdır.

Sonuç olarak, kullanıcının dosya listesini görüntülemek istiyoruz. Bunun için

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

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

Bu, tam olarak göründüğü gibi:

her doküman için geçerli olacaktır. Her öğe Bir dosya simgesi, dosyanın web'de açılması için bir bağlantı ve last updatedDate ile.

Not: Şablonu geçerli HTML yapmak için Angular'ındata-* ngRepeat iteratörünü kullanın, ancak bu zorunlu değildir. Tekrarlayıcıyı kolayca <li ng-repeat="doc in docs">.

Ardından, Angular'a bu şablonun oluşturulmasını hangi denetleyicinin denetleyeceğini bildirmemiz gerekir. Bunun için DocsController öğesine şablon üzerinde kontrol sahibi olmasını bildirmek için ngController yönergesini kullanın. :
```
<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>
```
Burada görmediğiniz noktanın, veriler için etkinlik işleyicileri veya mülklerini bağlamamız olduğunu unutmayın. bağlama'yı tıklayın. Angular bu işin zor kısmını bizim için yapıyor.

Son adım, Angular'ın şablonlarımızı aydınlatmasını sağlamak. Bunu yapmanın tipik yolu, ngApp yönergesinin en sonuna kadar :
```
<html data-ng-app="gDriveApp">
```
İsterseniz uygulama kapsamını sayfanın daha küçük bir kısmını da kapsayacak şekilde daraltabilirsiniz. Yalnızca ancak daha sonra daha fazla kontrol ekleyecek olsaydık en üstteki ngApp'i öğesi, tüm sayfayı Angular özellikli hale getirir.

main.html için nihai ürün aşağıdaki gibi görünür:
```
<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>
```
İçerik Güvenliği Politikası hakkında

Diğer birçok JS MVC çerçevesinin aksine Angular v1.1.0+, katı bir CSP. Bu özellik kullanıma hazırdır.

Ancak, Angular'ın 1.0.1 ile v1.1.0 arasında eski bir sürümünü kullanıyorsanız "İçerik güvenliği modunda" çalışacak şekilde Angular. Bu, ngCsp yönergesi eklenerek gerçekleştirilir ngApp'in yanı sıra:
```
<html data-ng-app data-ng-csp>
```
Yetkilendirme işleme

Veri modeli, uygulamanın kendisi tarafından oluşturulmaz. Bunun yerine, harici bir API'den ( Google Drive API'si) ekleyebilirsiniz. Dolayısıyla, uygulamanın verilerinin doldurulması için küçük bir çalışma yapılması gerekir.

Bir API isteği gönderebilmemiz için önce kullanıcının Google Hesabı'na ait bir OAuth jetonu getirmemiz gerekir. Bu amaçla, chrome.identity.getAuthToken() çağrısının sarmalanması ve accessToken. İleride Drive API'ye yapılacak çağrılarda bunu yeniden kullanabiliriz.
```
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);
  }
};
```
Not: İsteğe bağlı geri çağırmanın iletilmesi, OAuth jetonunun ne zaman olduğunu bilme esnekliğini sunar. hazır.

Not: İşleri biraz basitleştirmek amacıyla, API görevlerini yerine getirmek için gdocs.js kitaplığı oluşturduk.

Jetonu aldıktan sonra, Drive API'ye yönelik istek gönderme ve modeli doldurma zamanı gelmiş demektir.

İskelet kumanda

"Model" bir nesne olarak oluşturulacak basit bir dizidir (dokümanlar olarak adlandırılır) onlar

'leri görmek için:

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() öğesinin, DocsController oluşturucunun bir parçası olarak çağrıldığına dikkat edin. Angular denetleyiciyi dahili olarak oluşturursa kullanıcıyı bekleyen yeni bir OAuth jetonumuz olacaktır.

Veriler alınıyor

Şablon hazır. Kumanda ekranı oluşturuldu. OAuth jetonu hazır. Şimdi önemli olan nedir?

Şimdi, fetchDocs() adlı ana denetleyici yöntemini tanımlama zamanı. Bu, kumandanın görev gücüdür. kullanıcının dosyalarını istemekten ve docs dizisini, API yanıtlarından gelen verilerle doldurmaktan sorumludur.

$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(), ana feed'i XHR üzerinden almak için Angular'ın $http hizmetini kullanır. OAuth erişimi jetonu, diğer özel başlıklar ve parametrelerle birlikte Authorization başlığında yer alır.

successCallback, API yanıtını işler ve feed'i seçin.

fetchDocs() uygulamasını şu anda çalıştırırsanız her şey çalışır ve dosya listesi gösterilir:

Google Drive Yükleyici'deki dosyaların listesi alındı

Tebrikler!

Bir dakika, o düzgün dosya simgeleri eksik. What gives? Konsola hızlıca göz attığınızda CSP ile ilgili hatalardan biri:

Geliştirici konsolunda CSP hataları

Bunun nedeni, img.src simgelerini harici URL'lere ayarlamaya çalışıyoruz. Bu, CSP'ye aykırıdır. Örneğin, örnek: https://ssl.gstatic.com/docs/doclist/images/icon_10_document_list.png. Bunu düzeltmek için yerel olarak uygulamaya çekmeleri gerekir.

Uzak resim öğelerini içe aktarma

CSP'nin bize bağırmayı durdurması için XHR2 kullanarak "içeri al" dosya simgelerini Blob'lar olarak ayarlayın, ardından img.src, uygulama tarafından oluşturulan bir blob: URL olarak değiştirildi.

Eklenen XHR koduyla güncellenen successCallback aşağıda verilmiştir:

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);
      }
    });
  });
};

Artık CSP bizden tekrar memnun olduğuna göre, güzel dosya simgeleri alıyoruz:

Dosya simgeleriyle Google Drive Yükleyici

Çevrimdışı olma: harici kaynakları önbelleğe alma

Yapılması gereken en bariz optimizasyon: web sitesindeki her dosya simgesi için yüzlerce XHR isteği yapılmamalıdır yapılan her çağrı: fetchDocs(). Geliştirici Araçları konsolunda "Yenile" düğmesine basarak bunu doğrulayın düğmesine birkaç kez basın. Her seferinde n resim getirilir:

Önbelleğe alma katmanı eklemek için successCallback öğesini değiştirelim. Eklemeler kalın olarak vurgulanır:

$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() geri çağırmasında, aşağıdaki durumlarda $scope.$apply() öğesini çağırdığımıza dikkat edin: son giriş görünür. Normalde $apply() yönteminin çağrılması gerekmez. Angular, verilerde yapılan değişiklikleri algılar otomatik olarak oluşturabilirsiniz. Ancak bizim örneğimizde, yeni bir eşzamansız geri çağırma katmanımız Angular bunun farkında değil. Modelimiz güncellendiğinde Angular'a bunu açıkça bildirmemiz gerekir.

İlk çalıştırmada simgeler HTML5 Dosya Sistemi'nde olmaz ve window.webkitResolveLocalFileSystemURL(), hata geri çağırmasının çağrılmasına neden olur. Bunun için tekniği tekrar kullanarak resimleri getirebiliriz. Bu seferki tek fark her blob'un dosya sistemine yazıldığını doğrulayın (bkz. writeFile()). Konsol bunu doğrular davranış:

Bir sonraki çalıştırmada (veya "Yenile" düğmesine basıldığında), webkitResolveLocalFileSystemURL(), dosya daha önce önbelleğe alındığı için var. Uygulama grupları doc.icon öğesini dosyanın filesystem: URL öğesine ekler ve simge için maliyetli XHR uygulamaktan kaçınır.

Sürükleyip bırakarak yükleme

Bir yükleyici uygulaması, dosya yükleyemezse sahte reklam yayınlıyordur!

app.js bu özelliği, HTML5 Sürükle ve Bırak adlı küçük bir kitaplık uygulayarak işler. DnDFileController. Dosyaları masaüstünden sürükleyip bırakma olanağı sağlar Google Drive'a ekleyin.

Bu işlemi gdocs hizmetine eklemeniz yeterlidir:

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;
});