Trang này là một phần của tài liệu về nền tảng Ứng dụng Chrome. Nền tảng này đã ngừng hoạt động vào năm 2020. Chính sách này vẫn được hỗ trợ cho khách hàng Enterprise và Education trên ChromeOS cho đến ít nhất là tháng 1 năm 2025. Hãy tìm hiểu thêm về cách di chuyển ứng dụng.

Trang này được dịch bởi Cloud Translation API.

Xây dựng ứng dụng bằng AngularJS

Hướng dẫn này giúp bạn bắt đầu tạo Ứng dụng Chrome bằng khung MVC AngularJS. Người nhận minh hoạ cách Angular hoạt động, chúng ta sẽ tham chiếu đến một ứng dụng thực tế được xây dựng bằng khung này, Trình tải lên của Google Drive. Mã nguồn này có trên GitHub.

Giới thiệu về ứng dụng

Trình tải lên của Google Drive

Trình tải lên của Google Drive cho phép người dùng xem và tương tác nhanh với các tệp được lưu trữ trong Google Drive cũng như tải tệp mới lên bằng cách sử dụng API Kéo và thả HTML. Đó là ví dụ hay về cách tạo một ứng dụng giao tiếp với một trong các API của Google; trong trường hợp này, gói thuê bao Google API Drive.

Trình tải lên sử dụng OAuth2 để truy cập dữ liệu của người dùng. API chrome.identity xử lý việc tìm nạp Mã thông báo OAuth cho người dùng đã đăng nhập, vì vậy, chúng tôi đã hoàn tất công việc khó khăn! Khi có khoảng thời gian mã truy cập, các ứng dụng sẽ dùng API Google Drive để truy cập vào dữ liệu của người dùng.

Các tính năng chính mà ứng dụng này sử dụng:

Tính năng tự động phát hiện của AngularJS cho CSP
Kết xuất danh sách các tệp được tìm nạp từ API Google Drive
API hệ thống tệp HTML5 để lưu trữ các biểu tượng tệp khi không có mạng
Kéo và thả HTML5 để nhập/tải tệp mới lên từ màn hình
XHR2 để tải hình ảnh, trên nhiều miền
API chrome.identity để uỷ quyền OAuth
Khung không Chrome giúp xác định giao diện thanh điều hướng riêng của ứng dụng

Tạo tệp kê khai

Tất cả ứng dụng Chrome đều cần có tệp manifest.json chứa thông tin mà Chrome cần để khởi chạy ứng dụng. Tệp kê khai chứa siêu dữ liệu có liên quan và liệt kê mọi quyền đặc biệt mà ứng dụng cần chạy.

Phiên bản rút gọn của tệp kê khai của Người tải lên sẽ có dạng như sau:

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

Các phần quan trọng nhất của tệp kê khai này là "oauth2" và "quyền" .

" OAuth2" xác định các tham số cần thiết bằng OAuth2 để thực hiện điều kỳ diệu của nó. Để tạo một "client_id", làm theo hướng dẫn trong bài viết Lấy mã ứng dụng khách của bạn. "Phạm vi" liệt kê các phạm vi uỷ quyền mà mã thông báo OAuth sẽ có hiệu lực (ví dụ: các API mà ứng dụng muốn truy cập).

"Quyền" bao gồm các URL mà ứng dụng sẽ truy cập qua XHR2. Các tiền tố URL là bắt buộc để Chrome biết được cần cho phép yêu cầu giữa nhiều miền nào.

Tạo trang sự kiện

Tất cả ứng dụng Chrome đều yêu cầu tập lệnh/trang nền để khởi chạy ứng dụng và phản hồi các sự kiện hệ thống.

Trong tập lệnh background.js, Trình tải lên của Drive sẽ mở cửa sổ 500x600px dẫn đến trang chính. Điều này cũng chỉ định chiều cao và chiều rộng tối thiểu cho cửa sổ để nội dung không bị quá méo:

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

Cửa sổ này được tạo dưới dạng cửa sổ không có Chrome (khung: "none"). Theo mặc định, cửa sổ hiển thị với Thanh đóng/mở rộng/thu nhỏ mặc định của hệ điều hành:

Trình tải lên của Google Drive không có khung

Trình tải lên sử dụng frame: 'none' để hiển thị cửa sổ dưới dạng "phương tiện chặn trống" và tạo một chốt giao dịch tuỳ chỉnh trong main.html:

Trình tải lên của Google Drive với khung tuỳ chỉnh

Toàn bộ khu vực điều hướng được bọc trong một

(xem phần tiếp theo). Để ứng dụng trông gọn gàng hơn, nút đóng tuỳ chỉnh bị ẩn cho đến khi người dùng tương tác với khu vực này:

<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>

Trong app.js, nút này được nối với window.close().

Thiết kế ứng dụng theo Angular

Angular là một khung MVC, vì vậy, chúng ta cần xác định ứng dụng theo cách mà mô hình, khung hiển thị và bộ điều khiển sẽ bị loại bỏ một cách hợp lý. May mắn thay, điều này không đáng kể khi sử dụng Angular.

Chế độ xem là dễ nhất, vì vậy, hãy bắt đầu từ đó.

Tạo chế độ xem

main.html là chữ "V" trong MVC; nơi chúng ta xác định mẫu HTML để kết xuất dữ liệu. Trong Angular, các mẫu là các khối HTML đơn giản có một số tính năng đặc biệt.

Cuối cùng, chúng ta muốn hiện danh sách các tệp của người dùng. Để làm được điều đó, một đơn giản

Danh sách

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

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

Lệnh này có nội dung giống hệt như nội dung nó: đóng dấu

cho mỗi tài liệu trong "tài liệu" về mô hình dữ liệu của chúng tôi. Mỗi mục có chứa biểu tượng tệp, đường liên kết để mở tệp trên web và ngày cập nhật gần đây nhất.

Lưu ý: Để tạo HTML hợp lệ cho mẫu, chúng ta sẽ sử dụng thuộc tính data-* cho mã của Angular Trình lặp lại ngRepeat, nhưng bạn không cần phải làm như vậy. Bạn có thể dễ dàng viết trình lặp là <li ng-repeat="doc in docs">.

Tiếp theo, chúng ta cần cho Angular biết bộ điều khiển nào sẽ giám sát quá trình kết xuất của mẫu này. Để làm được điều đó, chúng tôi dùng lệnh ngController để yêu cầu DocsController thống trị mẫu :
```
<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>
```
Xin lưu ý rằng những gì bạn không thấy ở đây là chúng tôi kết nối trình nghe hoặc thuộc tính sự kiện để thu thập dữ liệu ràng buộc. Angular đang đảm nhận phần việc khó khăn đó cho chúng tôi!

Bước cuối cùng là làm cho Angular bật các mẫu của chúng ta. Cách thông thường để làm việc đó là đưa vào ngApp cho đến hết ngày :
```
<html data-ng-app="gDriveApp">
```
Bạn cũng có thể thu hẹp phạm vi của ứng dụng xuống một phần nhỏ hơn của trang nếu muốn. Chúng tôi chỉ có một bộ điều khiển trong ứng dụng này, nhưng nếu chúng ta bổ sung thêm sau này, hãy đặt ngApp ở trên cùng giúp toàn bộ trang sẵn sàng cho Angular.

Sản phẩm hoàn thiện của main.html sẽ có dạng như sau:
```
<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>
```
Lưu ý về Chính sách bảo mật nội dung

Không giống như nhiều khung JS MVC khác, Angular v1.1.0+ không yêu cầu tinh chỉnh để hoạt động trong môi trường nghiêm ngặt CSP. Tính năng này hoạt động bình thường!

Tuy nhiên, nếu bạn đang sử dụng phiên bản cũ hơn của Angular giữa v1.0.1 và v1.1.0, bạn sẽ cần biết Góc để chạy trong "chế độ bảo mật nội dung". Bạn có thể thực hiện việc này bằng cách thêm lệnh ngCsp cùng với ngApp:
```
<html data-ng-app data-ng-csp>
```
Xử lý việc uỷ quyền

Mô hình dữ liệu không phải do ứng dụng tạo ra. Thay vào đó, dữ liệu này được điền từ một API bên ngoài ( API Google Drive). Do đó, bạn cần thực hiện một vài thao tác để điền dữ liệu của ứng dụng.

Trước khi có thể đưa ra yêu cầu API, chúng ta cần tìm nạp mã thông báo OAuth cho Tài khoản Google của người dùng. Do đó, chúng ta đã tạo một phương thức để gói lệnh gọi đến chrome.identity.getAuthToken() và lưu trữ accessToken để chúng ta có thể sử dụng lại cho các lệnh gọi đến API Drive trong tương lai.
```
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);
  }
};
```
Lưu ý: Khi truyền lệnh gọi lại không bắt buộc, chúng ta có thể linh hoạt biết được khi nào mã thông báo OAuth được sẵn sàng.

Lưu ý: Để đơn giản hoá một chút, chúng tôi đã tạo thư viện gdocs.js để xử lý các tác vụ API.

Sau khi có mã thông báo, đã đến lúc tạo yêu cầu đối với API Drive và điền dữ liệu vào mô hình.

Bộ điều khiển bộ xương

"Mô hình" đối với Trình tải lên là một mảng đơn giản (còn gọi là tài liệu) gồm các đối tượng sẽ được kết xuất dưới dạng những

trong mẫu:

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

}

Xin lưu ý rằng gdocs.auth() được gọi trong hàm khởi tạo DocsController. Khi Angular nội bộ tạo ra bộ điều khiển thì chúng ta được đảm bảo sẽ có một mã thông báo OAuth mới cho người dùng.

Đang tìm nạp dữ liệu

Đã bố trí mẫu. Bộ điều khiển được nâng cao. Có mã thông báo OAuth. Bây giờ bạn phải làm gì?

Đã đến lúc xác định phương thức bộ điều khiển chính, fetchDocs(). Đây là con ngựa của bộ điều khiển, chịu trách nhiệm yêu cầu tệp của người dùng và gửi mảng tài liệu cùng với dữ liệu từ phản hồi của API.

$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() sử dụng dịch vụ $http của Angular để truy xuất nguồn cấp dữ liệu chính qua XHR. Quyền truy cập OAuth mã thông báo được đưa vào tiêu đề Authorization cùng với các tiêu đề và thông số tuỳ chỉnh khác.

successCallback xử lý phản hồi của API và tạo một đối tượng tài liệu mới cho mỗi mục nhập trong nguồn cấp dữ liệu.

Nếu bạn chạy fetchDocs() ngay bây giờ, mọi thứ sẽ hoạt động và danh sách các tệp xuất hiện:

Danh sách các tệp đã tìm nạp trong Trình tải lên của Google Drive

Tuyệt!

Đợi đã,...chúng tôi thiếu các biểu tượng tệp gọn gàng. What gives? Kiểm tra nhanh bảng điều khiển cho thấy nhiều lỗi liên quan đến CSP:

Lỗi CSP trong bảng điều khiển dành cho nhà phát triển

Lý do là chúng ta đang cố đặt các biểu tượng img.src thành URL bên ngoài. Nội dung này vi phạm Chính sách bảo mật nội dung (CSP). Ví dụ: https://ssl.gstatic.com/docs/doclist/images/icon_10_document_list.png. Để khắc phục vấn đề này, chúng tôi cần đưa những thành phần từ xa này vào ứng dụng.

Nhập thành phần hình ảnh từ xa

Để Chính sách quyền riêng tư (CSP) không còn phàn nàn với chúng ta, chúng ta sử dụng XHR2 để "nhập" các biểu tượng tệp dưới dạng Blobs, sau đó đặt img.src với một blob: URL do ứng dụng tạo.

Dưới đây là successCallback đã cập nhật với mã XHR được thêm:

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

Bây giờ, CSP đã hài lòng trở lại với chúng ta, nên chúng ta sẽ nhận được các biểu tượng tệp đẹp mắt:

Trình tải lên của Google Drive với biểu tượng tệp

Chuyển sang chế độ ngoại tuyến: lưu tài nguyên bên ngoài vào bộ nhớ đệm

Cần thực hiện tối ưu hoá rõ ràng: không thực hiện hàng trăm yêu cầu XHR cho mỗi biểu tượng tệp trên mỗi lệnh gọi đến fetchDocs(). Xác minh điều này trong bảng điều khiển Công cụ dành cho nhà phát triển bằng cách nhấn nút "Làm mới" nút vài lần. Mỗi lần, n hình ảnh sẽ được tìm nạp:

Hãy sửa đổi successCallback để thêm một lớp lưu vào bộ nhớ đệm. Những nội dung bổ sung được in đậm:

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

Lưu ý rằng trong lệnh gọi lại webkitResolveLocalFileSystemURL(), chúng ta sẽ gọi $scope.$apply() khi đã xem mục nhập cuối cùng. Thông thường, bạn không cần gọi $apply(). Angular phát hiện các thay đổi đối với dữ liệu tự động. Tuy nhiên, trong trường hợp này, chúng ta có thêm một lớp lệnh gọi lại không đồng bộ Angular không biết đến. Chúng ta phải thông báo rõ ràng cho Angular thời điểm cập nhật mô hình.

Trong lần chạy đầu tiên, các biểu tượng sẽ không có trong Hệ thống tệp HTML5 và các lệnh gọi đến window.webkitResolveLocalFileSystemURL() sẽ khiến lệnh gọi lại lỗi được gọi. Để làm được việc đó chúng ta có thể sử dụng lại kỹ thuật trước đó và tìm nạp hình ảnh. Sự khác biệt duy nhất ở lần này là mỗi blob được ghi vào hệ thống tệp (xem writeFile()). Bảng điều khiển sẽ xác minh thông tin này hành vi:

Trong lần chạy tiếp theo (hoặc nhấn nút "Refresh" (Làm mới), URL được chuyển đến webkitResolveLocalFileSystemURL() tồn tại vì tệp đã được lưu vào bộ nhớ đệm trước đó. Ứng dụng sẽ đặt doc.icon vào filesystem: URL của tệp và tránh tạo XHR tốn kém cho biểu tượng.

Tải lên bằng cách kéo và thả

Ứng dụng tải lên không quảng cáo sai khi không thể tải tệp lên!

app.js xử lý tính năng này bằng cách triển khai một thư viện nhỏ xung quanh tính năng Kéo và thả HTML5 được gọi là DnDFileController. Ứng dụng này cho phép kéo vào các tệp từ máy tính và tải các tệp đó lên vào Google Drive.

Chỉ cần thêm đoạn mã này vào dịch vụ gdocs là xong:

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