Proyek di AWS:

Membangun Aplikasi Web Tanpa Server

dengan AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB, dan Amazon Cognito

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

Pengantar

Progression-Bar-07

Meng-hosting situs web statis

Progression-Bar-08

Mengelola pengguna

Progression-Bar-09

Membangun backend tanpa server

Progression-Bar-16

Menerapkan API RESTful

Progression-Bar-11

Mengakhiri sumber daya

Modul 4. API RESTful

Dalam modul ini Anda akan menggunakan Amazon API Gateway untuk memaparkan fungsi Lambda yang dibangun dalam modul sebelumnya sebagai API RESTful. API ini akan dapat diakses di Internet publik. Akan diamankan menggunakan Amazon Cognito kumpulan pengguna yang Anda buat dalam modul sebelumnya. Menggunakan konfigurasi ini, lalu Anda akan mengubah situs web yang dihosting secara statis menjadi aplikasi web yang dinamis dengan menambahkan JavaScript dari sisi klien yang membuat panggilan AJAX pada API yang terpapar.

Ikhtisar Arsitektur

Serverless_Web_App_LP_assets-05

Diagram di atas menunjukkan bagaimana komponen API Gateway yang akan Anda bangun dalam modul ini berintegrasi dengan komponen lama yang Anda bangun sebelumnya. Item berwarna abu-abu adalah bagian yang telah Anda implementasikan dalam langkah sebelumnya.

Situs web statis yang Anda terapkan dalam modul pertama telah memiliki halaman yang dikonfigurasi untuk berinteraksi denga API yang akan Anda bangun dalam modul ini. Halaman di /ride.html memiliki antarmuka berbasis peta yang sederhana untuk meminta kendaraan unicorn. Setelah autentikasi menggunakan halaman /signin.html, pengguna Anda akan dapat memilih lokasi pengambilan mereka dengan mengklik lokasi pada peta lalu meminta perjalanan dengan memilih tombol "Minta Unicorn" di sudut kanan atas.

Modul ini akan berfokus pada langkah yang diperlukan untuk membangun komponen cloud API, namun jika Anda tertarik dengan bagaimana kode browser bekerja yang memanggil API ini, Anda dapat memeriksa file ride.js dari situs web. Dalam hal ini, aplikasi menggunakan metode ajax() jQuery untuk membuat permintaan jarak jauh.

Waktu untuk Menyelesaikan Modul: 15 Menit

Layanan yang digunakan: Amazon API Gateway dan AWS Lambda

Instruksi Implementasi

Ikuti instruksi langkah demi langkah di bawah ini untuk membuat API REST Anda. Klik tiap nomor langkah untuk memperluas bagian.

  • Langkah 1. Buat API REST Baru

    Buat API REST Baru

    1. Di AWS Management Console, klik Layanan lalu pilih API Gateway di bawah Layanan Aplikasi.

    2. Pilih Buat API.

    3. Pilih API Baru dan masukkan WildRydes untuk Nama API.

    4. Tetap pilih Edge dioptimalisasi dalam menu turun Tipe Titik Akhir. Catatan: Edge dioptimalkan paling cocok untuk layanan publik yang diakses dari Internet. TitiK akhir wilayah biasanya digunakan untuk API yang diakses terutama dari dalam Wilayah AWS yang sama.

    5. Pilih Buat API

  • Langkah 2. Buat Pengotorisasi Kumpulan Pengguna Cognito

    Buat Pengotorisasi Kumpulan Pengguna Cognito

    Amazon API Gateway dapat menggunakan token JWT yang dikembalikan oleh Kumpulan Pengguna Cognito untuk mengautentikasi panggilan API. Dalam langkah ini Anda akan mengonfigurasi pengautorisasi untuk API, untuk menggunakan kumpulan pengguna yang Anda buat dalam Modul 2.

    Dalam konsol Amazon API Gateway, buat pengautorisasi kumpulan pengguna Cognito baru untuk API Anda. Buat dengan perincian kumpulan pengguna yang Anda buat dalam modul sebelumnya. Anda dapat menguji konfigurasi di konsol dengan menyalin dan merekat token otorisasi yang ditampilkan pada Anda setelah login melalui halaman /signin.html di situs web saat ini.

    1. Di bawah API yang baru dibuat, pilih Pengotorisasi.

    2. Pilih Buat Pengotorisasi Baru.

    3. Masukkan WildRydes untuk nama Pengotorisasi.

    4. Pilih Cognito untuk jenisnya.

    5. Di menu menurun Wilayah di bawah Kumpulan Pengguna Cognito, pilih Wilayah tempat Anda membuat kumpulan pengguna Cognito di modul 2 (secara default wilayah saat ini harus dipilih).

    6. Masukkan WildRydes (atau nama yang Anda berikan pada kumpulan pengguna) di input Kumpulan Pengguna Cognito.

    7. Masukkan Otorisasi untuk Sumber Token.

    8. Pilih Buat.

    Verifikasi konfigurasi pengotorisasi Anda

    1. Buka tab browser baru dan kunjungi /ride.html di bawah domain situs web Anda.

    2. Jika Anda dialihkan ke halaman masuk, masuklah dengan pengguna yang Anda buat di modul terakhir. Anda akan dialihkan kembali ke /ride.html.

    3. Salin token otorisasi dari notifikasi pada /ride.html,

    4. Kembali ke tab sebelumnya tempat Anda baru saja menyelesaikan pembuatan Pengotorisasi

    5. Klik Uji di bagian bawah kartu untuk pengotorisasi.

    6. Tempel token autentikasi ke dalam bidang Token Otorisasi di popup.

    7. Klik tombol Uji dan verifikasi bahwa kode tanggapannya adalah 200 dan Anda melihat klaim untuk pengguna Anda yang ditampilkan.

  • Langkah 3. Buat sumber daya dan metode baru

    Buat sumber daya dan metode baru

    Buat sumber daya baru yang disebut /ride di dalam API Anda. Lalu buat metode POST untuk sumber daya tersebut dan konfigurasi untuk menggunakan integrasi proksi Lambda yang didukung oleh fungsi RequestUnicorn yang Anda buat dalam langkah pertama modul ini.

    1. Di nav kiri, klik Sumber daya di bawah API WildRydes Anda.

    2. Dari daftar menurun Tindakan pilih Buat Sumber Daya.

    3. Masukkan perjalanan sebagai Nama Sumber Daya.

    4. Pastikan Jalur Sumber Daya diatur menjadi perjalanan.

    5. Pilih Aktifkan CORS API Gateway untuk sumber daya tersebut.

    6. Klik Buat Sumber Daya.

    7. Dengan memilih sumber daya /ride yang baru dibuat, dari daftar menurun Tindakan pilih Buat Metode.

    8. Pilih POST dari daftar menurun baru yang muncul, lalu klik tanda centang.

    9. Pilih Fungsi Lambda untuk jenis integrasi.

    10. Centang kotak untuk Gunakan integrasi Proksi Lambda.

    11. Pilih Wilayah yang Anda gunakan untuk Wilayah Lambda.

    12. Masukkan nama fungsi yang Anda buat dalam modul sebelumnya, RequestUnicorn, untuk Fungsi Lambda.

    13. Pilih Simpan. Harap ketahui, jika Anda mendapatkan kesalahan bahwa fungsi Anda tidak ada, periksa apakah wilayah yang dipilih cocok dengan yang Anda gunakan dalam modul sebelumnya.

    14. Ketika diperintahkan untuk memberikan izin Amazon API Gateway untuk memanggil fungsi Anda, pilih OK.

    15. Pilih pada kartu Permintaan Metode.

    16. Pilih ikon pensil di sebelah Otorisasi.

    17. Pilih pengotorisasi kumpulan pengguna WildRydes Cognito dari daftar menurun dan klik ikon tanda centang.

  • Langkah 4. Terapkan API Anda

    Terapkan API Anda

    Dari konsol Amazon API Gateway, pilih Tindakan, Terapkan API. Anda akan diperintahkan untuk membuat tahap baru. Anda dapat menggunakan prod untuk nama tahap.

    1. Dalam daftar menurun Tindakan pilih Terapkan API.

    2. Pilih [Tahap Baru] dalam daftar menurun tahap Penerapan.

    3. Masukkan prod untuk Nama Tahap.

    4. Pilih Terapkan.

    5. Catat URL Pemanggilan. Anda akan menggunakannya di bagian berikutnya.

  • Langkah 5. Perbarui Konfig Situs Web

    Perbarui Konfig Situs Web

    Perbarui file /js/config.js di penerapan situs web Anda agar menyertakan URL pemanggilan tahap yang baru saja dibuat. Anda harus menyalin URL pemanggilan langsung dari atas halaman editor tahap di konsol Amazon API Gateway dan menempelkannya ke dalam kunci _config.api.invokeUrl file /js/config.js file situs Anda. Pastikan ketika memperbarui file konfig bahwa pembaruan yang Anda buat dalam modul sebelumnya untuk kumpulan pengguna Cognito tetap ada.

    1. Buka file config.js dalam editor teks.

    2. Perbarui pengaturan invokeUrl di bawah kunci api dalam file config.js. Atur nilai pada URL Pemanggilan untuk tahap penerapan yang Anda buat dalam bagian sebelumnya.

      Contoh dari file config.js lengkap disertakan di bawah ini. 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, 

    } 

};

    1. Simpan file yang telah dimodifikasi dan dorong ke repositori git guna menerapkannya secara otomatis ke Konsol Amplify.

    $ git push

  • Langkah 5. Validasi implementasi Anda

    Validasi implementasi Anda

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

    1. Kunjungi /ride.html di bawah domain situs web Anda.

    2. Jika Anda dialihkan ke halaman masuk, masuklah dengan pengguna yang Anda buat di modul sebelumnya.

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

    4. Pilih Minta Unicorn. Anda seharusnya melihat notifikasi di bilah sisi kanan bahwa unicorn tengah berada di perjalanan lalu melihat ikon unicorn terbang ke lokasi pengambilan Anda.

Berikutnya: Mengakhiri Sumber Daya