Mulai Menggunakan AWS
Membangun Aplikasi Web Dasar
Menerapkan aplikasi web dan menambah interaktivitas dengan API dan database
menambah interaktivitas di situs web
Modul 5: Menambah Interaktivitas di Situs Web Anda
Di modul ini Anda akan memodifikasi situs web statis untuk memanggil API Anda dan menampilkan teks yang diinput secara kustom.
Pengantar
Di modul ini, kita akan memperbarui situs web statis yang dibuat di Modul Satu untuk memanggil API REST yang kita buat di Modul Tiga. Ini akan menambah kemampuan menampilkan teks berdasarkan apa yang Anda input.
Apa yang Akan Anda Pelajari
- Memanggil API Gateway API dari halaman HTML
- Mengunggah file versi baru ke S3
Konsep Utama
Akses Baca Publik Memberi akses kepada siapa pun yang memiliki tautan ke suatu file untuk melihatnya.
Memanggil API Mengirim peristiwa ke API untuk memicu perilaku tertentu.
Waktu Penyelesaian
5 menit
Layanan yang Digunakan
Implementasi
-
Perbarui File HTML yang Tersimpan di S3
- Buka file index.html yang Anda buat di Modul Satu.
- Ganti kode yang ada dengan yang berikut ini:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World</title> <!-- Add some CSS to change client UI --> <style> body { background-color: #232F3E; } label, button { color: #FF9900; font-family: Arial, Helvetica, sans-serif; font-size: 20px; margin-left: 40px; } input { color: #232F3E; font-family: Arial, Helvetica, sans-serif; font-size: 20px; margin-left: 20px; } </style> <script> // define the callAPI function that takes a first name and last name as parameters var callAPI = (firstName,lastName)=>{ // instantiate a headers object var myHeaders = new Headers(); // add content type header to object myHeaders.append("Content-Type", "application/json"); // using built in JSON utility package turn object to string and store in a variable var raw = JSON.stringify({"firstName":firstName,"lastName":lastName}); // create a JSON object with parameters for API call and store in a variable var requestOptions = { method: 'POST', headers: myHeaders, body: raw, redirect: 'follow' }; // make API call with parameters and use promises to get response fetch("YOUR-API-INVOKE-URL", requestOptions) .then(response => response.text()) .then(result => alert(JSON.parse(result).body)) .catch(error => console.log('error', error)); } </script> </head> <body> <form> <label>First Name :</label> <input type="text" id="fName"> <label>Last Name :</label> <input type="text" id="lName"> <!-- set button onClick method to call function we defined passing input values as parameters --> <button type="button" onclick="callAPI(document.getElementById('fName').value,document.getElementById('lName').value)">Call API</button> </form> </body> </html>3. Pastikan Anda menambahkan Invoke URL API di Baris 41 (dari Modul Tiga). CATATAN: Jika tidak memiliki URL API, Anda bisa ambil dari Konsol Gateway API dengan mengeklik pada API Anda lalu klik pada "stages (tahap)."
4. Simpan file.
5. Buka Konsol S3.
6. Klik pada bucket yang dibuat di Modul Satu.
7. Klik tombol biru “Upload (Unggah)”.
8. Klik tombol biru “Add File (Tambah File)”.
9. Pilih file index.html yang diperbarui.
10. Klik tombol biru "Next (Berikutnya)".
11. Dari daftar menurun "Kelola izin publik", pilih "Grant public read access to this object(s) (Berikan akses baca publik ke objek(-objek) ini)."
12. Klik tombol biru “Upload (Unggah)” (di sebelah kiri).
- Buka file index.html yang Anda buat di Modul Satu.
-
Uji Klien Web yang Diperbarui
- Klik pada index.html.
- Cari "Object URL (URL Objek)" di bagian bawah layar dan klik pada url itu.
- Maka aplikasi web yang diperbarui akan muncul di browser.
- Isikan nama Anda (atau apa pun yang Anda suka) dan klik tombol "Panggil API".
- Maka akan terlihat sebuah pesan yang diawali dengan “Halo dari Lambda” disusul teks yang Anda isikan tadi.
- Selamat, Anda sekarang memiliki situs web yang di-host di S3 yang dapat memanggil fungsi Lambda melalui API Gateway!
Arsitektur Aplikasi
Dengan semua modul kini telah selesai, berikut adalah arsitektur dari apa yang Anda bangun:
Semua layanan AWS yang kita siapkan dapat berkomunikasi dengan aman satu sama lain. Bila pengguna mengeklik tombol pada klien HTML, itu berarti melakukan panggilan ke API yang memicu fungsi Lambda. Fungsi Lambda menulis ke database dan mengembalikan pesan ke klien melalui API Gateway. Semua izin dikelola oleh IAM.
Selamat!
Anda telah berhasil membangun aplikasi web di AWS! Sebagai langkah besar berikutnya, gali lebih dalam tanpa server dan database dan tingkatkan pengetahuan AWS cloud Anda.