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 1: Membuat Aplikasi Web

Dalam modul ini, Anda akan men-deploy sumber daya statis untuk aplikasi web Anda menggunakan konsol AWS Amplify

Gambaran Umum

Dalam modul ini, Anda akan menggunakan konsol AWS Amplify untuk men-deploy sumber daya statis bagi aplikasi web Anda. Di modul berikutnya, Anda akan menambahkan fungsi dinamis ke halaman ini menggunakan AWS Lambda dan Amazon API Gateway untuk memanggil API RESTful jarak jauh. (REST yang merupakan singkatan dari Representational State Transfer (Transfer Status Representasi) adalah pola arsitektur untuk membuat layanan web. API merupakan singkatan dari application programming interface (antarmuka pemrograman aplikasi). Jadi, RESTful API adalah API yang mengimplementasikan pola arsitektur tersebut.)

Semua konten web statis Anda, termasuk HTML, CSS, JavaScript, gambar, dan file lainnya, akan di-hosting oleh AWS Amplify. Kami memilih layanan Amplify karena memudahkan meng-hosting dan men-deploy situs web statis. Pengguna akhir Anda akan mengakses situs Anda menggunakan URL yang diekspos oleh Amplify.

Jika Anda gugup karena harus bekerja dengan begitu banyak hal baru, jangan khawatir! Anda tidak akan menggunakan layanan AWS lain saat ini, dan Anda juga tidak perlu menjalankan server web apa pun untuk menyediakan situs web Anda. (“Server” adalah perangkat lunak atau perangkat keras yang menerima dan menanggapi permintaan yang dibuat melalui jaringan.)

Situs web ini akan menjadi halaman "Hello World" yang sangat sederhana dan kita akan tambahkan lebih banyak fungsi di modul-modul selanjutnya.

Untuk aplikasi paling nyata, sebaiknya gunakan domain kustom untuk meng-hosting situs Anda. Domain kustom adalah nama merek unik yang mengidentifikasi situs web, seperti www.amazon.com. Jika Anda tertarik dengan hal ini, Amplify juga menyediakan dukungan untuk domain kustom.

Hal-hal yang akan Anda capai

Dalam modul ini, Anda akan:

  • Membuat aplikasi Amplify
  • Mengunggah file untuk situs web langsung ke Amplify
  • Men-deploy halaman web versi baru dengan Amplify

Konsep utama

Situs web statis – Situs web statis memiliki konten tetap, tidak seperti situs web dinamis. Situs web statis adalah jenis situs web yang paling mendasar dan paling mudah dibuat. Yang diperlukan hanyalah membuat beberapa halaman HTML dan memublikasikannya ke server web.

Hosting web – Menyediakan teknologi/layanan yang diperlukan agar situs web dapat dilihat di internet.

Wilayah AWS – Area geografis terpisah yang digunakan AWS untuk menampung infrastrukturnya. Wilayah ini tersebar di seluruh dunia sehingga pelanggan dapat memilih wilayah terdekat untuk meng-hosting infrastruktur cloud-nya di sana.

 Waktu penyelesaian minimum

5 menit

 Layanan yang digunakan

AWS Amplify

 Prasyarat modul

 Terakhir diperbarui

4 April 2023

Implementasi

    1. Buka editor teks favorit Anda di komputer. Buat file baru dan tempelkan HTML berikut ini di dalamnya:
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>
    Hello World
</body>
</html>

    2. Simpan file sebagai index.html.

    3. ZIP (kompres) hanya file HTML.

    4. Di jendela peramban baru, masuk ke konsol Amplify. Catatan: Kami akan menggunakan Wilayah Oregon (us-west-2) untuk tutorial ini.

    5. Di bagian Mulai, pada Host aplikasi web Anda, pilih tombol Mulai berwarna oranye.

    6. Pilih Deploy tanpa penyedia Git. Inilah yang akan Anda lihat di layar:

    7. Pilih tombol Lanjutkan.

    8. Di kolom Nama aplikasi, masukkan GettingStarted.

    9. Untuk nama Lingkungan, masukkan dev.

    10. Pilih metode Seret dan lepas. Inilah yang akan Anda lihat di layar:

    11. Pilih tombol Pilih file.

    12. Pilih file ZIP yang Anda buat di Langkah 3.

    13. Pilih tombol Simpan dan deploy.

    14. Setelah beberapa detik, Anda akan melihat pesan Deployment berhasil diselesaikan.

  • 1. Pilih Manajemen Domain di menu navigasi kiri.

    2. Salin dan tempel URL yang ditampilkan dalam formulir ke peramban Anda.

    Aplikasi web Anda akan dimuat di tab peramban baru dan me-render "Hello World." Selamat!

Arsitektur aplikasi

Seperti inilah tampilan arsitektur kita sekarang:

Diagram arsitektur yang menunjukkan AWS Amplify yang di-hosting di AWS Cloud, dengan koneksi ke pengguna eksternal.

Diagram ini cukup minimal saat ini karena kita hanya menggunakan konsol AWS Amplify. Kita sekarang memiliki aplikasi web langsung yang dapat berinteraksi dengan pengguna. Berikutnya, kita akan membuat fungsi Lambda.

Apakah halaman ini membantu?

 Umpan Balik
Mulai Modul Dua

Membangun Fungsi Tanpa Server