AngularJS ile Uygulama Geliştirme

Önemli: Chrome, tüm platformlarda Chrome Uygulamaları desteğini kaldıracak. Chrome tarayıcı ve Chrome Web Mağazası, uzantıları desteklemeye devam edecektir. Duyuruyu okuyun ve uygulamanızı taşıma hakkında daha fazla bilgi edinin.

Bu kılavuz, AngularJS MVC çerçevesiyle Chrome Uygulamaları oluşturmaya başlamanızı sağlar. Angular'ı çalışırken göstermek için, çerçeve kullanılarak oluşturulan gerçek bir uygulamaya, yani Google Drive Yükleyici'ye atıfta bulunacağız. Kaynak kodu GitHub'da mevcuttur.

Uygulama hakkında

Google Drive Yükleme Aracı, kullanıcıların Google Drive hesaplarında depolanan dosyaları hızlı bir şekilde görüntülemesine ve bu dosyalarla etkileşimde bulunmasına, ayrıca HTML Sürükle ve Bırak API'lerini kullanarak yeni dosyalar yüklemesine olanak tanır. Bu, Google'ın API'lerinden biriyle (bu örnekte Google Drive API) iletişim kuran bir uygulama oluşturma örneğidir.

Not: OAuth2 özellikli üçüncü taraf API'leriyle/hizmetleriyle çalışan uygulamalar da oluşturabilirsiniz. Google Hesabı dışı hesap kimlik doğrulaması bölümünü inceleyin.

Yükleme Aracı, kullanıcının verilerine erişmek için OAuth2'yi kullanır. chrome.identity API, giriş yapmış olan kullanıcı için OAuth jetonu getirme işlemini gerçekleştirir; bu nedenle işin zor kısmı bitmiştir. Uzun süreli bir erişim jetonunuz olduğunda, uygulamalar kullanıcının verilerine erişmek için Google Drive API'yi kullanır.

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

• AngularJS'nin CSP için otomatik algılama özelliği
• Google Drive API'den getirilen dosyaların listesini oluşturma
• 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 dosyasını oluşturma

Tüm Chrome Uygulamaları, Chrome'un uygulamayı başlatmak için ihtiyaç duyduğu bilgileri içeren bir manifest.json dosyasına ihtiyaç duyar. Manifest, ilgili meta verileri içerir ve uygulamanın çalıştırmak için ihtiyaç duyduğu özel izinleri listeler.

Yükleyicinin manifestinin 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" ve "izinler" bölümleridir.

"oauth2" bölümü, sihrini yapmak için OAuth2 tarafından gerekli olan parametreleri tanımlar. "client_id" oluşturmak için İstemci kimliğinizi alma bölümündeki talimatları uygulayın. "Kapsamlar", OAuth jetonunun geçerli olacağı yetkilendirme kapsamlarını (örneğin, uygulamanın erişmek istediği API'ler) listeler.

"İzinler" bölümünde, uygulamanın XHR2 üzerinden erişeceği URL'ler yer alır. Chrome'un hangi web alanları arası isteklere izin verileceğini bilmesi için URL önekleri gereklidir.

Etkinlik sayfası oluşturma

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

Drive Yükleme Aracı, background.js komut dosyasında ana sayfaya yönlendiren 500x600 piksellik bir pencere açar. Ayrıca, içeriğin fazla ezilmemesi için pencere için bir minimum yükseklik ve genişlik de 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 (frame: 'none'). Varsayılan olarak, pencereler işletim sisteminin varsayılan kapatma/genişlet/küçültme çubuğuyla oluşturulur:

Yükleme Aracı, pencereyi "boş seçenek listesi" olarak oluşturmak için frame: 'none' kullanır ve main.html içinde özel bir kapatma düğmesi oluşturur:

Gezinme alanının tamamı

(sonraki bölüme bakın). Uygulamada biraz dağınıklığı önlemek için kullanıcı bu alanla etkileşimde bulunana kadar özel kapatma düğmesi 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 şekilde tasarlama

Angular bir MVC çerçevesidir; bu yüzden uygulamayı bir modelin, görünümün ve denetleyicinin mantıksal olarak dışına çıkacağı şekilde tanımlamamız gerekir. Neyse ki Angular kullanırken bu önemsiz bir durumdur.

Görünüm en kolay yol bu yüzden başlayalım.

Görünüm oluşturma

main.html, MVC'deki "V" harfidir. Burada veri oluşturulacak HTML şablonlarını tanımlarız. Angular'da şablonlar, özel sos içeren basit HTML bloklarıdır.

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

listesi mantıklıdır. Açı bitleri kalın olarak vurgulanır:

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

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

Bu metin, aynen göründüğü gibidir:

• her doküman için geçerli "belgeler" yer almaktadır. Her öğede bir dosya simgesi, dosyayı web'de açmak için kullanılan bağlantı ve son güncellenme tarihi bulunur.
  Not: Şablonun HTML'sini geçerli hale getirmek amacıyla Angular'ın ngRepeat yinelemesi için data-* özelliklerini kullanıyoruz, ancak bunu yapmak zorunda değilsiniz. Tekrarlayıcıyı kolayca <li ng-repeat="doc in docs"> biçiminde yazabilirsiniz.

  Ardından, Angular'a bu şablonun oluşturulmasını hangi denetleyicinin denetleyeceğini belirtmemiz gerekir. Bunun için DocsController öğesine şablon üzerinde hakim olmasını bildirmek üzere ngController yönergesini kullanırız:

  <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öremeyeceğiniz, veri bağlama için etkinlik işleyiciler veya özellikler eklememizdir. Angular bizim için işin zahmetli kısmını yaşıyor.

  Son adım, Angular'ın şablonlarımızı aydınlatmasını sağlamaktır. Bunu yapmanın tipik bir yolu, ngApp yönergesini en sonuna kadar kullanmaktır :

  <html data-ng-app="gDriveApp">
  

  İsterseniz uygulamayı sayfanın daha küçük bir kısmına da daraltabilirsiniz. Bu uygulamada yalnızca bir denetleyicimiz var, ancak daha sonra daha fazla denetleyici ekleyecek olsaydık ngApp'i en üstteki öğeye yerleştirmek tüm sayfayı Açısal açıdan hazır 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 açıklama

  Diğer birçok JS MVC çerçevesinin aksine Angular 1.1.0+ sürümü, katı bir CSP ile çalışmak için ince ayar gerektirmez. Hemen işe yarıyor!

  Ancak Angular'ın v1.0.1 ile 1.1.0 arasındaki eski bir sürümünü kullanıyorsanız Angular'a "içerik güvenliği modunda" çalışmasını bildirmeniz gerekir. Bu işlem, ngApp'in yanına ngCsp yönergesi eklenerek yapılır:

  <html data-ng-app data-ng-csp>
  

  İşleme yetkilendirmesi

  Veri modeli, uygulamanın kendisi tarafından oluşturulmaz. Bunun yerine, harici bir API'den (Google Drive API) doldurulur. Dolayısıyla, uygulamanın verilerini doldurmak için biraz iş yapmak gerekir.

  Bir API isteğinde bulunmadan önce kullanıcının Google Hesabı için bir OAuth jetonu getirmemiz gerekir. Bu amaçla chrome.identity.getAuthToken() çağrısını sarmalamak ve accessToken öğesini depolamak için bir yöntem oluşturduk. Bu yöntemi gelecekteki Drive API çağrılarında 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ğırmayı iletmek, OAuth jetonunun ne zaman hazır olduğunu bilme esnekliğini sağlar.
  Not: İşleri biraz basitleştirmek için API görevlerini yerine getirmek üzere gdocs.js adlı bir kitaplık oluşturduk.

  Jetonu aldıktan sonra, sıra Drive API'ye yönelik isteklerde bulunmaya ve modeli doldurmaya gelir.

  İskelet kumanda

  Yükleyicinin "modeli", bu tür nesneler olarak oluşturulacak basit bir nesne dizisidir (dokümanlar olarak adlandırılır)

• 'leri tıklayın:

  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'ın dahili çalışanları denetleyiciyi oluşturduğunda kullanıcıyı bekleyen yeni bir OAuth jetonumuz olacaktır.

  Veriler alınıyor

  Şablon hazır. Kumandanın iskelesi oluşturuldu. OAuth jetonu elinizde. Şimdi önemli olan nedir?

  Şimdi ana kumanda yöntemini (fetchDocs()) tanımlama zamanı geldi. Kullanıcının dosyalarını istemekten ve dokümanlar dizisini API yanıtlarından gelen verilerle dosyalamaktan sorumlu olan denetleyicinin işidir.

  $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şim jetonu, diğer özel üstbilgiler ve parametrelerle birlikte Authorization başlığına eklenir.

  successCallback, API yanıtını işler ve feed'deki her giriş için yeni bir doküman nesnesi oluşturur.

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

  

  Tebrikler!

  Bir dakika,...bu şık dosya simgeleri eksik. What gives? Konsolu hızlıca kontrol ettiğinizde CSP ile ilgili bazı hatalar gösterilir:

  

  Bunun nedeni, img.src simgelerini harici URL'lere ayarlamaya çalışmamızdır. Bu, İGP'yi ihlal eder. Örneğin: https://ssl.gstatic.com/docs/doclist/images/icon_10_document_list.png. Bunu düzeltmek için bu uzak öğeleri yerel olarak uygulamaya çekmemiz gerekir.

  Uzak resim öğelerini içe aktarma

  CSP'nin bize bağırmayı bırakması için dosya simgelerini Blob olarak "içe aktarmak" üzere XHR2'yi kullanırız, ardından img.src özelliğini uygulama tarafından oluşturulan bir blob: URL olarak ayarlarız.

  Eklenen XHR koduyla güncellenen successCallback şöyle:

  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 bizimle tekrar mutlu olduğuna göre, güzel dosya simgeleri alıyoruz:

  

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

  Yapılması gereken optimizasyon şudur: Her fetchDocs() çağrısında her dosya simgesi için yüzlerce XHR isteği göndermeyin. Bunu Geliştirici Araçları konsolunda "Yenile" düğmesine birkaç kez basarak doğrulayın. Her seferinde n resim getirilir:

  

  Önbelleğe alma katmanı eklemek için successCallback öğesini değiştirelim. Eklemeler kalın harflerle 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 son giriş görüldüğünde $scope.$apply() yöntemini çağırdığımıza dikkat edin. Normalde $apply() numaralı telefonu aramak gerekli değildir. Angular, veri modellerindeki değişiklikleri otomatik olarak algılar. Ancak bizim örneğimizde, Angular'ın farkında olmadığı ek bir eşzamansız geri çağırma katmanımız bulunuyor. Modelimiz güncellendiğinde Angular'a bunu açıkça bildirmemiz gerekir.

  İlk çalıştırmada simgeler HTML5 dosya sisteminde yer almaz ve window.webkitResolveLocalFileSystemURL() için yapılan çağrılar, hatalı geri çağırmanın çağrılmasına neden olur. Bu durumda, önceki tekniği tekrar kullanarak görüntüleri getirebiliriz. Bu sıradaki tek fark, her blob'un dosya sistemine yazılmasıdır (writeFile() bölümüne bakın). Konsol bu davranışı doğrular:

  

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

  Sürükleyip bırakarak yükleme

  Bir yükleyici uygulaması, dosya yükleyemezse sahte reklamdır!

  app.js bu özelliği, HTML5 Sürükle ve Bırak etrafında DnDFileController adlı küçük bir kitaplık uygulayarak işler. Dosyaları masaüstünden sürükleyip Google Drive'a yükleme olanağı tanır.

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