Menangkap Kemajuan Gulir Halaman Web dengan Amazon Kinesis - AWS SDK for JavaScript
SkenarioTugas PrasyaratHalaman BlogMengkonfigurasi SDKMembuat Catatan GulirMengirimkan Catatan ke Kinesis

Kami mengumumkan yang akan datang end-of-support untuk AWS SDK for JavaScript v2. Kami menyarankan Anda bermigrasi ke AWS SDK for JavaScript v3. Untuk tanggal, detail tambahan, dan informasi tentang cara bermigrasi, silakan merujuk ke pengumuman tertaut.

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

Menangkap Kemajuan Gulir Halaman Web dengan Amazon Kinesis

JavaScript code example that applies to browser execution

Contoh skrip browser ini menunjukkan:

  • Cara menangkap progres gulir di halaman web dengan Amazon Kinesis sebagai contoh metrik penggunaan halaman streaming untuk analisis selanjutnya.

Skenario

Dalam contoh ini, halaman HTML sederhana mensimulasikan konten halaman blog. Saat pembaca menggulir posting blog yang disimulasikan, skrip browser menggunakan SDK untuk merekam jarak gulir JavaScript ke bawah halaman dan mengirim data tersebut ke Kinesis menggunakan metode putRecordskelas klien Kinesis. Data streaming yang diambil oleh Amazon Kinesis Data Streams kemudian dapat diproses oleh instans Amazon EC2 dan disimpan di salah satu dari beberapa penyimpanan data termasuk Amazon DynamoDB dan Amazon Redshift.

Tugas Prasyarat

Untuk mengatur dan menjalankan contoh ini, Anda harus terlebih dahulu menyelesaikan tugas-tugas ini:

  • Buat aliran Kinesis. Anda perlu menyertakan ARN sumber daya aliran dalam skrip browser. Untuk informasi selengkapnya tentang membuat Amazon Kinesis Data Streams, lihat Mengelola Aliran Kinesis di Panduan Pengembang Amazon Kinesis Data Streams.

  • Buat kumpulan identitas Amazon Cognito dengan akses diaktifkan untuk identitas yang tidak diautentikasi. Anda perlu menyertakan ID kumpulan identitas dalam kode untuk mendapatkan kredensyal untuk skrip browser. Untuk informasi selengkapnya tentang kumpulan identitas Amazon Cognito, lihat Kumpulan Identitas di Panduan Pengembang Amazon Cognito.

  • Buat peran IAM yang kebijakannya memberikan izin untuk mengirimkan data ke aliran Kinesis. Untuk informasi selengkapnya tentang membuat peran IAM, lihat Membuat Peran untuk Mendelegasikan Izin ke AWS Layanan di Panduan Pengguna IAM.

Gunakan kebijakan peran berikut saat membuat peran IAM.

{
   "Version": "2012-10-17",
   "Statement": [
      {
         "Effect": "Allow",
         "Action": [
            "mobileanalytics:PutEvents",
            "cognito-sync:*"
         ],
         "Resource": [
            "*"
         ]
      },
      {
         "Effect": "Allow",
         "Action": [
            "kinesis:Put*"
         ],
         "Resource": [
            "STREAM_RESOURCE_ARN"
         ]
      }
   ]
}

Halaman Blog

HTML untuk halaman blog terutama terdiri dari serangkaian paragraf yang terkandung dalam suatu <div> elemen. Ketinggian yang dapat digulir <div> ini digunakan untuk membantu menghitung seberapa jauh pembaca telah menggulir konten saat mereka membaca. HTML juga berisi sepasang <script> elemen. Salah satu elemen ini menambahkan SDK untuk JavaScript ke halaman dan yang lainnya menambahkan skrip browser yang menangkap kemajuan gulir pada halaman dan melaporkannya ke Kinesis.

<!DOCTYPE html>
<html>
    <head>
        <title>AWS SDK for JavaScript - Amazon Kinesis Application</title>
    </head>
    <body>
        <div id="BlogContent" style="width: 60%; height: 800px; overflow: auto;margin: auto; text-align: center;">
            <div>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nulla eget nisl bibendum feugiat. Fusce rhoncus felis at ultricies luctus. Vivamus fermentum cursus sem at interdum. Proin vel lobortis nulla. Aenean rutrum odio in tellus semper rhoncus. Nam eu felis ac augue dapibus laoreet vel in erat. Vivamus vitae mollis turpis. Integer sagittis dictum odio. Duis nec sapien diam. In imperdiet sem nec ante laoreet, vehicula facilisis sem placerat. Duis ut metus egestas, ullamcorper neque et, accumsan quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                </p>
                <!-- Additional paragraphs in the blog page appear here -->
            </div>
        </div>
        <script src="https://sdk.amazonaws.com/js/aws-sdk-2.283.1.min.js"></script>
        <script src="kinesis-example.js"></script>
    </body>
</html>

Mengkonfigurasi SDK

Dapatkan kredensyal yang diperlukan untuk mengonfigurasi SDK dengan memanggil CognitoIdentityCredentials metode, dengan menyediakan ID kumpulan identitas Amazon Cognito. Setelah berhasil, buat objek layanan Kinesis dalam fungsi callback.

Cuplikan kode berikut menunjukkan langkah ini. (Lihat Menangkap Kode Kemajuan Gulir Halaman Web contoh lengkapnya.)

// Configure Credentials to use Cognito
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: "IDENTITY_POOL_ID",
});

AWS.config.region = "REGION";
// We're going to partition Amazon Kinesis records based on an identity.
// We need to get credentials first, then attach our event listeners.
AWS.config.credentials.get(function (err) {
  // attach event listener
  if (err) {
    alert("Error retrieving credentials.");
    console.error(err);
    return;
  }
  // create Amazon Kinesis service object
  var kinesis = new AWS.Kinesis({
    apiVersion: "2013-12-02",
  });

Membuat Catatan Gulir

Progres gulir dihitung menggunakan scrollHeight dan scrollTop properti yang <div> berisi konten posting blog. Setiap catatan gulir dibuat dalam fungsi pendengar acara untuk scroll acara tersebut dan kemudian ditambahkan ke array catatan untuk pengiriman berkala ke Kinesis.

Cuplikan kode berikut menunjukkan langkah ini. (Lihat Menangkap Kode Kemajuan Gulir Halaman Web contoh lengkapnya.)

  // Get the ID of the Web page element.
  var blogContent = document.getElementById("BlogContent");

  // Get Scrollable height
  var scrollableHeight = blogContent.clientHeight;

  var recordData = [];
  var TID = null;
  blogContent.addEventListener("scroll", function (event) {
    clearTimeout(TID);
    // Prevent creating a record while a user is actively scrolling
    TID = setTimeout(function () {
      // calculate percentage
      var scrollableElement = event.target;
      var scrollHeight = scrollableElement.scrollHeight;
      var scrollTop = scrollableElement.scrollTop;

      var scrollTopPercentage = Math.round((scrollTop / scrollHeight) * 100);
      var scrollBottomPercentage = Math.round(
        ((scrollTop + scrollableHeight) / scrollHeight) * 100
      );

      // Create the Amazon Kinesis record
      var record = {
        Data: JSON.stringify({
          blog: window.location.href,
          scrollTopPercentage: scrollTopPercentage,
          scrollBottomPercentage: scrollBottomPercentage,
          time: new Date(),
        }),
        PartitionKey: "partition-" + AWS.config.credentials.identityId,
      };
      recordData.push(record);
    }, 100);
  });

Mengirimkan Catatan ke Kinesis

Sekali setiap detik, jika ada catatan dalam array, catatan yang tertunda dikirim ke Kinesis.

Cuplikan kode berikut menunjukkan langkah ini. (Lihat Menangkap Kode Kemajuan Gulir Halaman Web contoh lengkapnya.)

  // upload data to Amazon Kinesis every second if data exists
  setInterval(function () {
    if (!recordData.length) {
      return;
    }
    // upload data to Amazon Kinesis
    kinesis.putRecords(
      {
        Records: recordData,
        StreamName: "NAME_OF_STREAM",
      },
      function (err, data) {
        if (err) {
          console.error(err);
        }
      }
    );
    // clear record data
    recordData = [];
  }, 1000);
});