AWS SDK untuk JavaScript V2 telah mencapai end-of-support. Kami menyarankan Anda bermigrasi ke [AWS SDK untuk JavaScript v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/). Untuk detail dan informasi tambahan tentang cara bermigrasi, silakan lihat [pengumuman](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/) ini.

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Melihat Foto di Bucket Amazon S3 dari Browser
<a name="s3-example-photos-view"></a>

![\[JavaScript code example that applies to browser execution\]](http://docs.aws.amazon.com/id_id/sdk-for-javascript/v2/developer-guide/images/browsericon.png)

**Contoh kode skrip browser ini menunjukkan:**
+ Cara membuat album foto di bucket Amazon Simple Storage Service (Amazon S3) Simple Storage S3) dan memungkinkan pengguna yang tidak diautentikasi untuk melihat foto.

## Skenario
<a name="s3-example-photos-view-scenario"></a>

Dalam contoh ini, halaman HTML sederhana menyediakan aplikasi berbasis browser untuk melihat foto di album foto. Album foto ada dalam ember Amazon S3 tempat foto diunggah.

![\[JavaScript dalam skrip browser menggunakan ember Amazon S3 untuk album foto.\]](http://docs.aws.amazon.com/id_id/sdk-for-javascript/v2/developer-guide/images/s3-photo-album-example.png)


Skrip browser menggunakan SDK JavaScript untuk berinteraksi dengan bucket Amazon S3. Skrip menggunakan [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property)metode kelas klien Amazon S3 untuk memungkinkan Anda melihat album foto.

## Tugas Prasyarat
<a name="s3-example-photos-view-scenario-prerequisites"></a>

Untuk mengatur dan menjalankan contoh ini, pertama-tama selesaikan tugas-tugas ini.

**catatan**  
Dalam contoh ini, Anda harus menggunakan AWS Wilayah yang sama untuk bucket Amazon S3 dan kumpulan identitas Amazon Cognito.

### Buat Bucket
<a name="s3-example-photos-view-prereq-bucket"></a>

Di [konsol Amazon S3](https://console.aws.amazon.com/s3/), buat bucket Amazon S3 tempat Anda dapat menyimpan album dan foto. Untuk informasi selengkapnya tentang menggunakan konsol untuk membuat bucket S3, lihat [Membuat Bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket.html) di *Panduan Pengguna Layanan Penyimpanan Sederhana Amazon*.

Saat Anda membuat bucket S3, pastikan untuk melakukan hal berikut:
+ Catat nama bucket sehingga Anda dapat menggunakannya dalam tugas prasyarat berikutnya, Mengonfigurasi Izin Peran.
+ Pilih AWS Region untuk membuat bucket. Ini harus Wilayah yang sama yang akan Anda gunakan untuk membuat kumpulan identitas Amazon Cognito dalam tugas prasyarat berikutnya, Buat Kumpulan Identitas.
+ Konfigurasikan izin bucket dengan mengikuti [Pengaturan izin untuk akses situs web](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html) di *Panduan Pengguna Layanan Penyimpanan Sederhana Amazon*.

### Buat Identity Pool
<a name="s3-example-photos-view-prereq-idpool"></a>

Di [konsol Amazon Cognito](https://console.aws.amazon.com/cognito/), buat kumpulan identitas Amazon Cognito, seperti yang dijelaskan [Langkah 1: Buat Kolam Identitas Amazon Cognito](getting-started-browser.md#getting-started-browser-create-identity-pool) dalam topik *Memulai dalam Skrip* Browser.

Saat Anda membuat kumpulan identitas, catat nama kumpulan identitas, serta nama peran untuk identitas yang **tidak diautentikasi**.

### Konfigurasikan Izin Peran
<a name="s3-example-photos-view-prereq-perms"></a>

Untuk memungkinkan melihat album dan foto, Anda harus menambahkan izin ke peran IAM dari kumpulan identitas yang baru saja Anda buat. Mulailah dengan membuat kebijakan sebagai berikut.

1. Buka [konsol IAM](https://console.aws.amazon.com/iam/).

1. Di panel navigasi di sebelah kiri, pilih **Kebijakan**, lalu pilih tombol **Buat kebijakan**.

1. Pada tab **JSON**, masukkan definisi JSON berikut, tetapi ganti *BUCKET\$1NAME dengan nama bucket*.

------
#### [ JSON ]

****  

   ```
   {
      "Version":"2012-10-17",		 	 	 
      "Statement": [
         {
            "Effect": "Allow",
            "Action": [
               "s3:ListBucket"
            ],
            "Resource": [
               "arn:aws:s3:::BUCKET_NAME"
            ]
         }
      ]
   }
   ```

------

1. Pilih tombol **Tinjau kebijakan**, beri nama kebijakan dan berikan deskripsi (jika Anda mau), lalu pilih tombol **Buat kebijakan**.

   Pastikan untuk mencatat nama sehingga Anda dapat menemukannya dan melampirkannya ke peran IAM nanti.

Setelah kebijakan dibuat, navigasikan kembali ke [konsol IAM](https://console.aws.amazon.com/iam/). Temukan peran IAM untuk identitas **tidak terautentikasi yang** dibuat Amazon Cognito di tugas prasyarat sebelumnya, Buat Kumpulan Identitas. Anda menggunakan kebijakan yang baru saja dibuat untuk menambahkan izin ke identitas ini.

Meskipun alur kerja untuk tugas ini umumnya sama [Langkah 2: Tambahkan Kebijakan ke Peran IAM yang Dibuat](getting-started-browser.md#getting-started-browser-iam-role) dengan topik *Memulai dalam Skrip Browser*, ada beberapa perbedaan yang perlu diperhatikan:
+ Gunakan kebijakan baru yang baru saja Anda buat, bukan kebijakan untuk Amazon Polly.
+ Pada halaman **Lampirkan Izin**, untuk menemukan kebijakan baru dengan cepat, buka daftar **Filter kebijakan** dan pilih **Pelanggan yang dikelola**.

Untuk informasi tambahan tentang membuat peran IAM, lihat [Membuat Peran untuk Mendelegasikan Izin ke AWS Layanan di Panduan](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) Pengguna *IAM*.

### Konfigurasikan CORS
<a name="s3-example-photos-view-cors-configuration"></a>

Sebelum skrip browser dapat mengakses bucket Amazon S3, Anda harus mengatur [konfigurasi CORS-nya](cors.md#configuring-cors-s3-bucket) sebagai berikut.

**penting**  
Pada konsol S3 baru, konfigurasi CORS harus JSON.

------
#### [ JSON ]

```
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ]
    }
]
```

------
#### [ XML ]

```
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
```

------

### Buat Album dan Unggah Foto
<a name="s3-example-photos-view-create-albums"></a>

Karena contoh ini hanya memungkinkan pengguna untuk melihat foto yang sudah ada di ember, Anda perlu membuat beberapa album di ember dan mengunggah foto ke mereka.

**catatan**  
Untuk contoh ini, nama file file foto harus dimulai dengan satu garis bawah (“\$1”). Karakter ini penting nanti untuk penyaringan. Selain itu, pastikan untuk menghormati hak cipta pemilik foto.

1. Di [konsol Amazon S3](https://console.aws.amazon.com/s3/), buka bucket yang Anda buat sebelumnya.

1. Pada tab **Ikhtisar**, pilih tombol **Buat folder** untuk membuat folder. Untuk contoh ini, beri nama folder “album1", “album2", dan “album3".

1. Untuk **album1** dan kemudian **album2**, pilih folder dan kemudian unggah foto ke dalamnya sebagai berikut:

   1. Pilih tombol **Unggah**.

   1. Seret atau pilih file foto yang ingin Anda gunakan, lalu pilih **Berikutnya**.

   1. Di bawah **Kelola izin publik****, pilih Berikan akses baca publik ke objek ini**.

   1. Pilih tombol **Upload** (di pojok kiri bawah).

1. Biarkan **album3 kosong**.

## Mendefinisikan Halaman Web
<a name="s3-example-photos-view-html"></a>

HTML untuk aplikasi melihat foto terdiri dari `<div>` elemen di mana skrip browser membuat antarmuka tampilan. `<script>`Elemen pertama menambahkan SDK ke skrip browser. `<script>`Elemen kedua menambahkan JavaScript file eksternal yang memegang kode skrip browser. 

Untuk contoh ini, file tersebut diberi nama`PhotoViewer.js`, dan terletak di folder yang sama dengan file HTML. [Untuk menemukan SDK\$1VERSION\$1NUMBER saat ini, lihat Referensi API untuk SDK untuk Panduan Referensi API. JavaScript AWS SDK untuk JavaScript](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/)

```
<!DOCTYPE html>
<html>
  <head>
    <!-- **DO THIS**: -->
    <!--   Replace SDK_VERSION_NUMBER with the current SDK version number -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.js"></script>
    <script src="./PhotoViewer.js"></script>
    <script>listAlbums();</script>
  </head>
  <body>
    <h1>Photo Album Viewer</h1>
    <div id="viewer" />
  </body>
</html>
```



## Mengkonfigurasi SDK
<a name="s3-example-photos-view-config"></a>

Dapatkan kredensional yang Anda perlukan untuk mengonfigurasi SDK dengan memanggil metode. `CognitoIdentityCredentials` Anda harus memberikan ID kumpulan identitas Amazon Cognito. Kemudian buat objek `AWS.S3` layanan.

```
// **DO THIS**:
//   Replace BUCKET_NAME with the bucket name.
//
var albumBucketName = "BUCKET_NAME";

// **DO THIS**:
//   Replace this block of code with the sample code located at:
//   Cognito -- Manage Identity Pools -- [identity_pool_name] -- Sample Code -- JavaScript
//
// Initialize the Amazon Cognito credentials provider
AWS.config.region = "REGION"; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: "IDENTITY_POOL_ID",
});

// Create a new service object
var s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  params: { Bucket: albumBucketName },
});

// A utility function to create HTML.
function getHtml(template) {
  return template.join("\n");
}
```

Sisa kode dalam contoh ini mendefinisikan fungsi-fungsi berikut untuk mengumpulkan dan menyajikan informasi tentang album dan foto dalam ember.
+ `listAlbums`
+ `viewAlbum`

## Daftar Album di Bucket
<a name="s3-example-photos-view-list-albums"></a>

Untuk mencantumkan semua album yang ada di bucket, `listAlbums` fungsi aplikasi memanggil `listObjects` metode objek `AWS.S3` layanan. Fungsi ini menggunakan `CommonPrefixes` properti sehingga panggilan hanya mengembalikan objek yang digunakan sebagai album (yaitu, folder).

Sisa fungsi mengambil daftar album dari bucket Amazon S3 dan menghasilkan HTML yang diperlukan untuk menampilkan daftar album di halaman web.

```
// List the photo albums that exist in the bucket.
function listAlbums() {
  s3.listObjects({ Delimiter: "/" }, function (err, data) {
    if (err) {
      return alert("There was an error listing your albums: " + err.message);
    } else {
      var albums = data.CommonPrefixes.map(function (commonPrefix) {
        var prefix = commonPrefix.Prefix;
        var albumName = decodeURIComponent(prefix.replace("/", ""));
        return getHtml([
          "<li>",
          '<button style="margin:5px;" onclick="viewAlbum(\'' +
            albumName +
            "')\">",
          albumName,
          "</button>",
          "</li>",
        ]);
      });
      var message = albums.length
        ? getHtml(["<p>Click on an album name to view it.</p>"])
        : "<p>You do not have any albums. Please Create album.";
      var htmlTemplate = [
        "<h2>Albums</h2>",
        message,
        "<ul>",
        getHtml(albums),
        "</ul>",
      ];
      document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    }
  });
}
```

## Melihat Album
<a name="s3-example-photos-view-viewing-album"></a>

Untuk menampilkan konten album di bucket Amazon S3, `viewAlbum` fungsi aplikasi mengambil nama album dan membuat kunci Amazon S3 untuk album itu. Fungsi kemudian memanggil `listObjects` metode objek `AWS.S3` layanan untuk mendapatkan daftar semua objek (foto) dalam album.

Sisa fungsi mengambil daftar objek yang ada di album dan menghasilkan HTML yang diperlukan untuk menampilkan foto di halaman web.

```
// Show the photos that exist in an album.
function viewAlbum(albumName) {
  var albumPhotosKey = encodeURIComponent(albumName) + "/";
  s3.listObjects({ Prefix: albumPhotosKey }, function (err, data) {
    if (err) {
      return alert("There was an error viewing your album: " + err.message);
    }
    // 'this' references the AWS.Request instance that represents the response
    var href = this.request.httpRequest.endpoint.href;
    var bucketUrl = href + albumBucketName + "/";

    var photos = data.Contents.map(function (photo) {
      var photoKey = photo.Key;
      var photoUrl = bucketUrl + encodeURIComponent(photoKey);
      return getHtml([
        "<span>",
        "<div>",
        "<br/>",
        '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>',
        "</div>",
        "<div>",
        "<span>",
        photoKey.replace(albumPhotosKey, ""),
        "</span>",
        "</div>",
        "</span>",
      ]);
    });
    var message = photos.length
      ? "<p>The following photos are present.</p>"
      : "<p>There are no photos in this album.</p>";
    var htmlTemplate = [
      "<div>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
      "</div>",
      "<h2>",
      "Album: " + albumName,
      "</h2>",
      message,
      "<div>",
      getHtml(photos),
      "</div>",
      "<h2>",
      "End of Album: " + albumName,
      "</h2>",
      "<div>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
      "</div>",
    ];
    document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    document
      .getElementsByTagName("img")[0]
      .setAttribute("style", "display:none;");
  });
}
```