Implementasi

• Membuat API REST baru
  1. Di konsol Amazon API Gateway, pilih API di panel navigasi kiri. 
  2. Pilih Bangun pada REST API.
  3. Di bagian Pilih protokol, pilih REST. 
  4. Di bagian Buat API baru, pilih API Baru.
  5. Di bagian Pengaturan, masukkan WildRydes untuk Nama API dan pilih Edge yang dioptimalkan di menu tarik turun Tipe Titik Akhir.
     Catatan: Gunakan tipe titik akhir yang dioptimalkan edge untuk layanan publik yang diakses dari Internet. Titik akhir wilayah biasanya digunakan untuk API yang diakses terutama dari dalam Wilayah AWS yang sama.
  6. Pilih Buat API.
• Buat otorisator

  Anda harus membuat Otorisator Kolam Pengguna Amazon Cognito. Amazon API Gateway menggunakan token web JSON (JWT), yang dikembalikan oleh Kolam Pengguna Amazon Cognito (dibuat di Modul 2) untuk mengautentikasi panggilan API. Di bagian ini, kita akan membuat Pengotorisasi untuk API, sehingga kita dapat menggunakan kolam pengguna.

  Gunakan langkah-langkah berikut untuk mengonfigurasi Pengotorisasi di konsol Amazon API Gateway:

  1. Di panel navigasi kiri WildRydes API yang baru saja Anda buat, pilih Pengotorisasi.
  2. Pilih Buat Pengotorisasi Baru. 
  3. Masukkan WildRydes ke dalam kolom Nama Pengotorisasi.
  4. Pilih Cognito sebagai Tipe. 
  5. Pada Kolam Pengguna Cognito, di menu tarik-turun Wilayah, pilih Wilayah yang sama yang telah Anda gunakan selama tutorial. Masukkan WildRydes di kolom nama Kolam Pengguna Cognito.
  6. Masukkan Pengotorisasi untuk Sumber Token. 
  7. Pilih Buat.
  8. Untuk memverifikasi konfigurasi pengotorisasi, pilih Pengujian. 
  9. Tempelkan Token Otorisasi yang disalin dari halaman web ride.html di bagian Validasikan implementasi Anda dari Modul 2 ke kolom Pengotorisasi (header), dan pastikan bahwa Kode respons status HTTP adalah 200. 

   

   

• Membuat sumber daya dan metode baru

  Di bagian ini, Anda akan membuat sumber daya baru dalam API Anda. Kemudian, buat metode POST untuk sumber daya tersebut dan konfigurasikan untuk menggunakan integrasi proksi Lambda yang didukung oleh fungsi RequestUnicorn yang Anda buat dalam langkah pertama modul ini.

  1. Di panel navigasi kiri WildRydes API Anda, pilih Sumber daya.
  2. Dari menu traik-turun Tindakan, pilih Buat Sumber Daya.
  3. Masukkan ride sebagai Nama Sumber Daya, yang secara otomatis akan membuat Jalur Sumber Daya /ride.
  4. Pilih kotak centang untuk Aktifkan API Gateway CORS.
  5. Pilih Buat Sumber Daya.
  6. Dengan memilih sumber daya /ride yang baru dibuat, dari menu tarik-turun Tindakan, pilih Buat Metode.
  7. Pilih POST dari menu tarik-turun baru yang muncul di bawah OPTIONS, lalu pilih ikon tanda centang.
  8. Pilih Fungsi Lambda untuk Tipe integrasi.
  9. Pilih kotak centang untuk Gunakan integrasi Proxy Lambda.
  10. Pilih Wilayah yang sama yang telah Anda gunakan di seluruh tutorial untuk Wilayah Lambda.
  11. Masukkan RequestUnicorn untuk Fungsi Lambda.
  12. Pilih Simpan.
      Catatan: jika Anda mendapatkan kesalahan bahwa fungsi Anda tidak ada, periksa apakah wilayah yang dipilih cocok dengan yang Anda gunakan di modul sebelumnya.
  13. Ketika diminta untuk memberikan izin Amazon API Gateway untuk menginvokasi fungsi Anda, pilih OK.
  14. Pilih kartu Permintaan Metode.
  15. Pilih ikon pensil di sebelah Otorisasi.
  16. Pilih pengotorisasi kolam pengguna Cognito WildRydes dari menu tarik-turun, dan pilih ikon tanda centang.
• Men-deploy API Anda

  Di bagian ini, Anda akan men-deploy API Anda dari konsol Amazon API Gateway. 

  1. Pada daftar tarik-turun Tindakan, pilih Deploy API.
  2. Pilih [Tahap Baru] di daftar tarik-turun Tahap deployment.
  3. Masukkan prod untuk Nama Tahap.
  4. Pilih Deploy.
  5. Salin URL Permintaan. Anda akan menggunakannya di bagian berikutnya.
     
• Memperbarui konfigurasi situs web

  Dalam langkah ini, Anda akan memperbarui file /js/config.js di deployment situs web Anda agar menyertakan URL Permintaan tahap yang baru saja dibuat. Anda akan menyalin URL Permintaan langsung dari atas halaman editor tahap di konsol Amazon API Gateway dan menempelkannya ke dalam kunci invokeUrl file config.js situs Anda. File konfigurasi Anda akan tetap berisi pembaruan yang Anda buat di modul sebelumnya untuk userPoolID, userPoolClientID, dan wilayah Amazon Cognito Anda.

  1. Pada mesin lokal Anda, navigasikan ke folder js, dan buka file config.js di editor teks pilihan Anda
  2. Tempelkan URL Permintaan yang Anda salin dari konsol Amazon API Gateway di bagian sebelumnya ke dalam nilai invokeUrl file config.js. 
  3. Simpan file.

  Lihat contoh berikut dari file config.js yang sudah selesai. Ingat, nilai sebenarnya dalam file Anda akan berbeda.
  

  window._config = {
  
      cognito: {
  
          userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         
  
          userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
  
          region: 'us-west-2' // e.g. us-east-2 
  
      }, 
  
      api: { 
  
          invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 
  
      } 
  
  };

  Code snippet copied

  Copy

      3. Tambahkan, commit, dan dorong file config.js yang diperbarui ke repositori Git Anda agar secara otomatis di-deploy ke Konsol Amplify.

  $ git add .
  $ git commit -m "new_configuration"
  $ git push
  

  Code snippet copied

  Copy
• Memvalidasi implementasi Anda

  Catatan: Anda mungkin akan melihat keterlambatan antara pembaruan file config.js di bucket S3 dan ketika konten yang diperbarui terlihat di peramban Anda. Anda juga harus memastikan bahwa Anda sudah membersihkan cache peramban sebelum melaksanakan langkah berikutnya.

  1. Perbarui versi ArcGIS JS dari 4.3 ke 4.6 (versi yang lebih baru tidak akan berfungsi dalam tutorial ini) di file ride.html sebagai:
     

  <script src="https://js.arcgis.com/4.6/"></script>
   <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

  Code snippet copied

  Copy

  Contoh file config.js yang selesai disertakan di bawah ini. Catatan, beberapa nilai dalam file Anda mungkin berbeda.

  <div id="noApiMessage" class="configMessage" style="display: none;">
          <div class="backdrop"></div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">Successfully Authenticated!</h3>
              </div>
              <div class="panel-body">
                  <p>This page is not functional yet because there is no API invoke URL configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 3.</p>
                  <p>In the meantime, if you'd like to test the Amazon Cognito user pool authorizer for your API, use the auth token below:</p>
                  <textarea class="authToken"></textarea>
              </div>
          </div>
      </div>
  
      <div id="noCognitoMessage" class="configMessage" style="display: none;">
          <div class="backdrop"></div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">No Cognito User Pool Configured</h3>
              </div>
              <div class="panel-body">
                  <p>There is no user pool configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 2 of the workshop.</p>
              </div>
          </div>
      </div>
  
      <div id="main">
          <div id="map">
          </div>
      </div>
  
      <div id="authTokenModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="authToken">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">Your Auth Token</h4>
                  </div>
                  <div class="modal-body">
                      <textarea class="authToken"></textarea>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
              </div>
          </div>
      </div>
  
  
      <script src="js/vendor/jquery-3.1.0.js"></script>
      <script src="js/vendor/bootstrap.min.js"></script>
      <script src="js/vendor/aws-cognito-sdk.min.js"></script>
      <script src="js/vendor/amazon-cognito-identity.min.js"></script>
      <script src="https://js.arcgis.com/4.6/"></script>
      <script src="js/config.js"></script>
      <script src="js/cognito-auth.js"></script>
      <script src="js/esri-map.js"></script>
      <script src="js/ride.js"></script>
  </body>
  
  </html>

  Code snippet copied

  Copy

      2. Simpan file yang dimodifikasi. Tambahkan, commit, dan dorong git ke repositori Git agar di-deploy secara otomatis ke konsol AWS Amplify.

      3. Kunjungi /ride.html di domain situs web Anda.

      4. Jika Anda dialihkan ke halaman masuk ArcGIS, masuk dengan kredensial pengguna yang Anda buat sebelumnya di bagian Pendahuluansebagai prasyarat dari tutorial ini.

      5. Setelah peta dimuat, klik di mana saja pada peta untuk mengatur lokasi pengambilan.

      6. Pilih Permintaan Unicorn. Anda akan melihat notifikasi di bilah sisi kanan bahwa unicorn akan segera hadir, lalu Anda akan melihat ikon unicorn terbang ke lokasi pengambilan Anda.