вступление

Amock.io — бесплатный веб-сервис для имитации API. Это позволяет людям, работающим с внешними веб-сервисами, не зависящими от них, легко создавать бесплатные макеты своих веб-сервисов и API для использования во время разработки и тестирования.

Со временем amock.io превратился из простого веб-сервиса для имитации REST/SOAP API в возможность имитировать очень широкий спектр типов медиа-контента, включая text/html. Это означает, что на самом деле можно создать макет, который возвращает HTML-контент через HTTP GET, или, проще говоря, веб-сайт. В этой статье я собираюсь показать вам, как именно это сделать.

Предостережение

Прежде чем мы начнем, обратите внимание:

amock.io не является платформой веб-хостинга и не должен использоваться как таковая. Хотя может быть довольно легко обслуживать многостраничные веб-сайты с amock.io, эта функция, очевидно, не предназначена для фактического хостинга крупномасштабных, живых веб-сайтов, но может оказаться очень удобной для размещения макетов веб-сайтов для демонстрационные цели.

Предположения

Для остальной части этой демонстрации мы будем работать со следующими предположениями:

  • У вас есть понимание HTML, CSS и основных принципов веб-дизайна.
  • Вы собираетесь использовать эти знания во благо. Помните, с большой силой приходит большая ответственность.

Теперь, когда мы со всем этим разобрались, давайте приступим к размещению нашего веб-сайта на amock.io.

Домашняя страница

Итак, допустим, у нас есть следующая веб-страница

с исходным кодом, выглядящим так

Разместить указанную выше страницу на amock так же просто, как:

  1. Посетите https://www.amock.io.
  2. Войдите в свой аккаунт. Если у вас еще нет учетной записи, создайте учетную запись (это бесплатно), а затем войдите в систему.
  3. Нажмите на кнопку «Создать макет».
  4. В поле «HTTP Method» выберите GET.
  5. В поле «HTTP Response Code» выберите 200 Ok.
  6. В поле «Request Endpoint» введите любое выбранное вами значение. Это составит URL-адрес, который вы можете использовать для доступа к своему веб-сайту в форме https://www.amock.io/api/v1/<your_username/<your_chosen_endpoint>. В этом случае мы будем использовать amock/index.html в качестве конечной точки.
  7. В поле Content-Type выберите «text/html». Этот шаг очень важен, потому что он говорит amock.io возвращать ваш макет в качестве веб-страницы всякий раз, когда он запрашивается.
  8. Затем введите код HTML для своего веб-сайта в текстовое поле response body.
  9. Нажмите кнопку «Создать макет», чтобы сохранить и создать свою веб-страницу.
  10. Вы увидите подтверждающее сообщение, и отобразится сгенерированная фиктивная конечная точка.

Теперь наш макет создан. Чтобы увидеть это в действии, мы копируем сгенерированную фиктивную конечную точку в адресную строку браузера, а затем нажимаем Enter. И вуаля!

Другие страницы

Теперь вы могли заметить, что у нас есть ссылки на другие страницы (about.html и contact.html) в верхней части нашей домашней страницы. И в настоящее время нажатие любой из этих ссылок возвращает ошибку invalid mock endpoint XML.

Чтобы эти ссылки работали и приводили нас на нужные страницы, нам нужно сначала создать эти страницы. Мы повторяем шаги, которые мы выполнили при создании макета индексной страницы, чтобы создать макеты для «о» и «контакт». Для этой демонстрации мы будем использовать amock/about.html и amock/contact.html в качестве фиктивных конечных точек, потому что мы использовали amock/index.html на странице индекса, а гиперссылки на всех страницах указывают на index.html, about.html и contact.html соответственно.

Обратите внимание, что мы также можем использовать абсолютные URL-адреса для наших гиперссылок, в отличие от относительных URL-адресов, которые мы использовали выше.

Исходный код страницы about

И для страницы контактов

Теперь у нас есть макет всех трех страниц.

Теперь мы можем посетить любой из фиктивных URL-адресов в браузере и перейти на любую другую страницу, щелкнув гиперссылку в верхней части страницы.

Шаг вперед

В большинстве случаев наши веб-сайты содержат внешние ресурсы, такие как CSS и JavaScript, во внешних файлах, которые мы включаем на наши страницы с тегами <style /> и <script /> соответственно. В таких случаях, независимо от того, размещена ли сама веб-страница на amock.io или нет, мы можем создавать макеты для таких ресурсов и просто ссылаться на них на нашей веб-странице.

Например, у нас есть следующий CSS на нашем веб-сайте выше:

<style>
    .nav-right {
       width:auto !important;
    }
 </style>

Если мы переместим приведенный выше CSS с нашей html-страницы в файл CSS, скажем, style.css, мы заменим тег стиля тегом ссылки следующим образом:

<link rel=”stylesheet” type=”text/css” href=”style.css” />

Теперь, сделав еще один шаг, мы можем создать макет на amock.io со следующими настройками:

  • Тип контента: text/css
  • HTTP-метод: GET
  • Код HTTP-ответа: 200 Ok
  • Конечная точка: выберите любой понравившийся URL-адрес конечной точки. (скажем amock/style.css)
  • Тело ответа: код CSS, без тега <style/>, конечно.

и обновите свойство href тега ссылки, указав сгенерированную фиктивную конечную точку:

<link rel=”stylesheet” type=”text/css” href=”https://www.amock.io/api/v1/k32y/amock/style.css” />

И вот так наш CSS теперь обслуживается с amock.io.

Мы можем сделать то же самое и для JavaScript. Единственная разница будет заключаться в том, что наш Content-Type для JavaScript будет application/javascript вместо text/css. И мы включим JavaScript на нашу страницу с кодом:

<script type=”application/javascript” src=”https://www.amock.io/api/v1/k32y/amock/script.js"></script>

Где https://www.amock.io/api/v1/k32y/amock/script.js — сгенерированная фиктивная конечная точка для скрипта.

Ну наконец то

И это подводит нас к концу этой демонстрации. И если вы остались со мной до конца, вот кое-что для вас:

Поздравляем! Теперь заходите на amock.io и дайте волю своим веб-сайтам.

Вы можете разветвить или клонировать весь веб-сайт, использованный в этой демонстрации, здесь https://github.com/k32yr04n/amockwebsite на Github.