Membangun Aplikasi Web Dasar

TUTORIAL

Pengantar
Membuat aplikasi web
Membangun fungsi nirserver
Membuat tabel data
Klik di sini
menambahkan interaktivitas di aplikasi web
Klik di sini
Membersihkan Sumber Daya

Di modul ini, Anda akan men-deploy fungsi nirserver dengan menggunakan Amazon API Gateway

Gambaran Umum

Dalam modul ini, kita akan menggunakan Amazon API Gateway untuk membuat RESTful API agar dapat melakukan panggilan ke fungsi Lambda kita dari klien web (biasanya mengacu pada peramban web pengguna). API Gateway akan bertindak sebagai lapisan tengah antara klien HTML yang dibuat di modul satu dan backend nirserver yang kita buat di modul dua.

Hal-hal yang akan Anda capai

Dalam modul ini, Anda akan:

  • Membuat API baru menggunakan Gateway API
  • Menentukan metode HTTP di API Anda
  • Memicu fungsi Lambda dari API
  • Mengaktifkan pembagian sumber daya lintas sumber (CORS) di API sehingga Anda dapat menggunakan sumber daya dari asal (domain) yang berbeda
  • Menguji API yang dibuat dengan Gateway API dari Konsol Manajemen AWS

Konsep utama

API RESTful – REST adalah singkatan dari 'Representational State Transfer’ (Transfer Status Representasi) dan merupakan pola arsitektur untuk membuat layanan web. API merupakan singkatan dari “application programming interface (antarmuka pemrograman aplikasi).” Jadi, API RESTful adalah yang mengimplementasikan pola arsitektur tersebut.

Metode Permintaan HTTP – Metode HTTP dirancang untuk memungkinkan komunikasi antara klien dan server. Metode, seperti GET atau PUT yang ditentukan oleh protokol HTTP, digunakan untuk menunjukkan tindakan apa yang harus diambil pada sumber daya.

CORS — Fitur keamanan peramban CORS menggunakan header HTTP untuk memberi tahu peramban agar mengizinkan aplikasi web tertentu berjalan di suatu asal (domain) untuk mengakses sumber daya yang dipilih dari server di asal yang berbeda.

Edge yang dioptimalkan – Sumber daya yang menggunakan infrastruktur global AWS untuk melayani beragam klien di seluruh dunia dengan lebih baik.

 Waktu penyelesaian minimum

5 menit

 Layanan yang digunakan

Amazon API Gateway

 Terakhir diperbarui

4 April 2023

Implementasi

    1. Masuk ke Konsol Gateway API.
    2. Di bagian Pilih jenis API, temukan kartu API REST dan pilih tombol Build pada kartu.
    3. Pada Pilih protokol, pilih REST.
    4. Pada Buat API baru, pilih API Baru.
    5. Di kolom Nama API, masukkan HelloWorldAPI.
    6. Pilih Edge yang dioptimalkan dari menu tarik-turun Jenis Titik Akhir. (Catatan: Titik akhir yang dioptimalkan edge adalah yang terbaik untuk klien yang tersebar secara geografis. Hal ini menjadikannya pilihan yang baik untuk layanan publik yang diakses dari Internet. Titik akhir wilayah biasanya digunakan untuk API yang diakses terutama dari Wilayah AWS yang sama.)
    7. Pilih tombol Buat API berwarna biru. Pengaturan Anda akan terlihat seperti tangkapan layar yang menyertainya.
    Buat halaman API, yang menampilkan pilihan dan pengaturan API.
    1. Di panel navigasi kiri, pilih Sumber daya di bawah API: HelloWorldAPI.
    2. Pastikan sumber daya “/” dipilih.
    3. Dari menu tarik-turun Tindakan, pilih Buat Metode.
    4. Pilih POSTING dari menu tarik-turun baru yang muncul, lalu pilih tanda centang.
    5. Pilih Fungsi Lambda untuk Tipe integrasi.
    6. Pilih Wilayah Lambda yang Anda gunakan saat membuat fungsi tersebut (atau Anda akan melihat kotak peringatan bertuliskan "Anda tidak memiliki Fungsi Lambda di...").
    7. Masukkan HelloWorldFunction di kolom Fungsi Lambda.
    8. Pilih tombol Simpan berwarna biru.
    9. Akan terlihat pesan yang memberi tahu bahwa Anda memberi izin kepada API yang Anda buat untuk memanggil fungsi Lambda Anda. Pilih tombol OK.
    10. Dengan metode POSTING yang baru dibuat, pilih Aktifkan CORS dari menu tarik-turun Tindakan.
    11. Biarkan kotak centang POSTING dipilih dan klik tombol biru Aktifkan CORS dan ganti header CORS yang ada.
    Aktifkan halaman konfigurasi CORS.

    10. Akan terlihat pesan yang meminta Anda untuk mengonfirmasi perubahan metode. Klik tombol biru Ya, ganti nilai yang ada.

    Konfirmasikan pesan perubahan metode.
    1. Pada daftar tarik-turun Tindakan, pilih Deploy API.
    2. Pilih [Tahap Baru] di daftar tarik-turun Tahap deployment.
    3. Masukkan dev untuk Nama Tahap.
    4. Pilih Deploy.
    5. Salin dan simpan URL di sebelah Invokasi URL (Anda akan memerlukannya di modul lima).
    1. Di panel navigasi kiri, pilih Sumber daya.
    2. Sekarang, metode untuk API kita akan tercantum di sebelah kanan. Pilih POSTING.
    3. Pilih petir biru muda kecil.
    4. Tempelkan yang berikut ini di kolom Badan Permintaan:
    {
    "firstName":"Grace",
    "lastName":"Hopper"
}

    5. Pilih tombol biru Uji.

    6. Maka di sebelah kanan akan terlihat respons dengan Kode 200.

    7. Bagus! Kita telah membangun dan menguji API yang memanggil fungsi Lambda.

Arsitektur aplikasi

Modul tiga kini telah selesai. Saatnya meninjau arsitektur kita:

Diagram arsitektur yang menunjukkan layanan yang di-hosting di AWS Cloud, dengan koneksi yang ditampilkan dari pengguna eksternal ke layanan AWS yang saling berhubungan.

Kita telah menambahkan Gateway API dan menghubungkannya ke fungsi Lambda yang ada. Sekarang, kita dapat memicu fungsi dengan panggilan API. Kita masih belum mampu menghasilkan panggilan ini dari klien web. Kita akan menambahkan tabel data terlebih dahulu di modul empat dan menghubungkan semuanya sekaligus di modul lima.

Apakah halaman ini membantu?

 Umpan Balik
Mulai Modul Empat

Membuat Tabel Data