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

Modul 5: Menambahkan Interaktivitas di Aplikasi Web Anda

Di modul ini, Anda akan memodifikasi situs web statis untuk menginvokasi API Anda dan menampilkan teks kustom

Gambaran Umum

Di modul ini, kita akan memperbarui situs web statis yang dibuat di modul satu untuk menginvokasi API REST yang kita buat di modul tiga. Hal ini akan menambahkan kemampuan menampilkan teks berdasarkan input Anda.

Hal-hal yang akan Anda capai

Dalam modul ini, Anda akan:
  • Memanggil API Gateway API dari halaman HTML
  • Mengunggah aplikasi web versi baru ke konsol Amplify

Konsep utama

Men-deploy situs web — Menyediakan situs web bagi pengguna.

Lingkungan — Tahap seperti “prod,” “dev,” atau “staging”, tempat aplikasi atau situs web dapat dijalankan.

Menginvokasi API – Mengirimkan peristiwa ke API untuk memicu perilaku tertentu.

 Waktu penyelesaian minimum

5 menit

 Layanan yang digunakan

Amazon API Gateway
AWS Amplify

 Terakhir diperbarui

4 April 2023

Implementasi

    1. Buka file index.html yang Anda buat di modul satu.
    2. 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 URL Invokasi API di Baris 41 (dari modul tiga). Catatan: Jika Anda tidak memiliki URL API, Anda bisa memperolehnya dari konsol Gateway API dengan memilih API Anda lalu memilih tahap.

    4. Simpan file.

    5. ZIP (kompres) hanya file HTML.

    6. Buka konsol Amplify.

    7. Pilih aplikasi web yang dibuat di modul satu.

    8. Pilih tombol Pilih file berwarna putih.

    9. Pilih file ZIP yang Anda buat di Langkah 5.

    10. Saat file diunggah, proses deployment akan dimulai secara otomatis. Setelah Anda melihat bilah hijau, deployment Anda akan selesai.

    1. Pilih URL di bawah Domain.
    2. Aplikasi web Anda yang telah diperbarui akan muncul di peramban.
    3. Isikan nama Anda (atau apa pun yang Anda sukai) dan pilih tombol Panggil API.
    4. Anda akan melihat sebuah pesan yang diawali dengan Halo from Lambda disusul teks yang Anda isikan tadi.
     
    Selamat! Anda sekarang memiliki aplikasi web yang berfungsi yang di- deploy oleh konsol Amplify dan dapat memanggil fungsi Lambda melalui Gateway API.

Arsitektur aplikasi

Karena semua modul kini telah selesai, berikut adalah arsitektur dari apa yang Anda bangun:

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

Semua layanan AWS yang kita siapkan dapat saling berkomunikasi dengan aman. Ketika pengguna memilih tombol di aplikasi web, tombol tersebut akan membuat panggilan ke API kita, yang memicu fungsi Lambda kita. Fungsi Lambda menuliskan ke basis data dan mengembalikan pesan ke klien melalui Gateway API. IAM mengelola semua izin.

Selamat!

Anda telah berhasil membangun aplikasi web di AWS! Pada modul berikutnya, kami akan membersihkan sumber daya yang digunakan dalam tutorial ini sehingga biaya yang tidak diinginkan tidak dibebankan ke akun Anda.

Apakah halaman ini membantu?

 Umpan Balik
Mulai Modul Enam

Membersihkan Sumber Daya