Центр ресурсов для начала работы
Сообщество Обучение AWS re:Post

Начало работы с AWS

Создание базового интернет-приложения

Развертывание интернет-приложения и добавление интерактивных элементов с помощью API и базы данных

Введение
Создание статического веб‑сайта
Создание бессерверной функции
Создание таблицы данных
Добавление интерактивных элементов на веб-сайт

Модуль 5. Добавление интерактивных элементов на веб-сайт

В этом модуле мы будем модифицировать статический веб-сайт для вызова API и отображения пользовательского текста.

Введение

В рамках этого модуля мы обновим статический веб-сайт, созданный в модуле 1, чтобы можно было вызывать интерфейс REST API, который мы создали в модуле 3. Это даст возможность отображать на сайте текст, который вводит пользователь.

Обсуждаемые темы

  • Вызов интерфейса программирования API Gateway с HTML-страницы
  • Загрузка новой версии файла в хранилище S3

Основные понятия

Публичный доступ для чтения. Предоставление всем пользователям, имеющим ссылку на файл, доступа на его просмотр.

Вызов API. Отправка события в API для инициации определенного поведения.

 Время выполнения

5 минут

 Используемые сервисы

Amazon API Gateway
Amazon Simple Storage Service (S3)

Реализация

    • Откройте файл index.html, который вы создали в модуле 1.
    • Замените имеющийся в нем код следующим:
    <!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. Убедитесь, что в строку 41 добавлен URL вызова API (из модуля 3). ПРИМЕЧАНИЕ. Если у вас нет URL вашего API, его можно посмотреть в консоли API Gateway, выбрав нужный API, а затем щелкнув панель Stages (Этапы).

    4. Сохраните файл.

    5. Откройте консоль S3.

    6. Щелкните корзину, созданную в модуле 1.

    7. Нажмите синюю кнопку Upload (Загрузить).

    8. Нажмите синюю кнопку Add Files (Добавить файлы).

    9. Выберите обновленный файл index.html.

    10. Нажмите синюю кнопку Next (Далее).

    11. В раскрывающемся списке Manage public permissions (Управление публичными разрешениями) выберите пункт Grant public read access to this object(s) (Предоставить публичный доступ для чтения к объектам).

    12. Нажмите синюю кнопку Upload (Загрузить) (слева).

    1. Щелкните файл index.html.
    2. Найдите в нижней части экрана строку Object URL и щелкните ее.
    3. Ваше обновленное интернет-приложение должно загрузиться в браузере.
    4. Введите свое имя (или любой другой текст) и нажмите кнопку Call API (Вызов API).
    5. Должно отобразиться приветствие «Hello from Lambda» и введенный вами текст.
    6. Поздравляем, теперь у вас есть работающий веб-сайт в сервисе S3, который может вызывать функцию Lambda через API Gateway!

Архитектура приложения

После выполнения всех модулей выстроенная нами архитектура будет иметь следующий вид.

Все сервисы AWS, которые мы настроили, могут безопасно обмениваться данными друг с другом. Если пользователь нажимает какую-нибудь кнопку в HTML-клиенте, происходит обращение к нашему API, который вызывает функцию Lambda. Эта функция Lambda производит запись в базу данных и отправляет ответное сообщение клиенту посредством шлюза API Gateway. Всеми разрешениями управляет IAM.

Был ли полезен этот модуль?

 Обратная связь

Поздравляем!

Вы успешно создали интернет-приложение на AWS! На следующем этапе советуем глубже изучить бессерверные технологии и базы данных, расширяя свои знания о службах облачных вычислений AWS.

Больше информации о бессерверных технологиях
Больше информации о базах данных