Создайте интерфейсное приложение, которое может получать данные из внутреннего API.

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

Это вторая часть этого цикла, состоящего из двух частей. Если вы еще не читали первую часть, можете посмотреть ее здесь.

Шаг 1. Настройте наш проект

Чтобы следовать этому руководству, вам понадобится следующее:

  • Текстовый редактор (я использую VS Code)
  • Браузер (я использую Chrome, но Firefox должен работать нормально)
  • API, встроенный в Часть 1 этой серии

Теперь давайте получим стартовые файлы для этого проекта. Вы можете найти их на моем Github.

После клонирования или загрузки файлов откройте их в текстовом редакторе. Вы должны увидеть такую ​​файловую структуру:

/Fake-Weather-Form-Starter
  README.md
  index.html
  script.js

У нас там всего три файла, и только два из них имеют отношение к тому, что мы делаем. Файл script.js пуст, поэтому давайте начнем с открытия нашего index.html файла. Вот что вы должны увидеть:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Fake Weather Data</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    form {
      display: flex;
      /* flex-direction: column; */
      justify-content: center;
      align-items: flex-end;
      margin-top: 10%;
    }
    .form-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    label, input, button {
      padding: 10px;
      margin-left: 10px;
    }
    label {
      padding-left: 0px;
    }
    .weather-info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .error-message {
      color: red;
      text-align: center;
    }
  </style>
</head>
<body>
<form>
    <div class="form-item">
      <label for="city">City Name: </label>
      <input type="text" placeholder="Enter a city name" id="city" name="city" required>
    </div>
    <button type="submit">SUBMIT</button>
  </form>
  <div class="error-message"></div>
<div class="weather-info">
    <h1 class="cityName"></h1>
    <h4 class="celsius"></h4>
    <h4 class="fahrenheit"></h4>
  </div>
  <script src="script.js"></script>
</body>
</html>

Тело html-файла просто содержит форму с одним вводом, кнопкой отправки и div, содержащим три пустых элемента. Эти элементы будут отображать наши данные. Кроме того, у нас есть div под формой, который будет отображать любые сообщения об ошибках, связанные с формой.

Я добавил немного стиля в тег html head, чтобы наша форма выглядела удобнее. Это не лучший способ укладки или лучший стиль, но он справляется со своей задачей. В этом руководстве мы больше заботимся о функциональности, чем об анестетиках. Вы можете просмотреть форму, открыв index.html в своем браузере. Если вы это сделаете, вы должны увидеть:

Хорошо, теперь мы готовы написать код!

Шаг 2. Создайте функциональность основной формы

Мы будем выполнять очень простые манипуляции с DOM для этого проекта, поэтому мы будем использовать ванильный JavaScript для этого. Откройте ваш script.js файл в текстовом редакторе и приступим.

Мы хотим, чтобы наша форма получала данные при их отправке, поэтому давайте выберем нашу форму и добавим прослушиватель событий для события отправки.

// Select our form
const form = document.querySelector('form');
// When form is submitted print 'submitted' to the browser console
form.addEventListener('submit', function(e) {
  // prevent form default behavior
  e.preventDefault();
  console.log('submitted');
})

На данный момент все, что будет делать наша форма, - это распечатать "отправлено" в консоли браузера. Мы просто следим за тем, чтобы форма работала нормально. Если это так, вы должны увидеть следующее:

Отлично! наша форма работает. Однако мы хотим, чтобы наша форма имела доступ ко всему, что пользователь вставляет во входные данные. Давайте выберем наш текстовый ввод, а затем сохраним его значение в переменной. Каждый раз, когда пользователь запускает событие ввода, эту переменную необходимо обновить.

// Select text input
const textInput = document.getElementById('city');
// Store the value of the input in a variable
let cityName = textInput.value;
// When an input event is triggered update cityName
textInput.addEventListener('input', function(e) {
  cityName = e.target.value;
})
// Select our form
const form = document.querySelector('form');
// When form is submitted print 'submitted' to the browser console
form.addEventListener('submit', function(e) {
  // prevent form default behavior
  e.preventDefault();
// print input value
  console.log(cityName);
// clear input
  textInput.value = '';
})

Наша форма теперь печатает значение во вводе при его отправке, а затем очищает вводимое текстовое значение. Теперь ваше приложение должно выглядеть так:

Идеально! теперь давайте позвоним в наш API.

Шаг 3. Получение данных из Fake Weather API

Прежде чем мы начнем получать данные, нам нужно убедиться, что наш API активен. Все, что вам нужно сделать в этом случае, - это перейти в каталог API погоды и запустить его с помощью node index.js. Как только он запустится, вы можете оставить его на заднем плане и вернуться к нашей форме.

Есть много способов делать HTTP-запросы с помощью JavaScript. Вы можете использовать XMLHttpRequest или fetch API, но в моем случае я предпочитаю использовать axios. Здесь нет правильных ответов, только личные предпочтения.

Чтобы добавить аксиомы в наше приложение, все, что нам нужно сделать, это включить cdn в наш html файл.

<!DOCTYPE html>
<html>

...
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

В моем случае я добавил его прямо над тегом сценария для script.js.

Теперь мы должны иметь возможность использовать axios в нашем script.js файле, чтобы сделать запрос к нашему API.

// Select text input
const textInput = document.getElementById('city');
// Store the value of the input in a variable
let cityName = textInput.value;
// When an input event is triggered update cityName
textInput.addEventListener('input', function(e) {
  cityName = e.target.value;
})
// Select our form
const form = document.querySelector('form');
// When form is submitted print 'submitted' to the browser console
form.addEventListener('submit', function(e) {
  // prevent form default behavior
  e.preventDefault();
// make request to our API
  axios.get('http://localhost:3000/weather/?city=' + cityName)
    .then(function(response) {
      console.log(response.data);
    })
    .catch(function(error) {
      console.log(error);
    })
// clear input
  textInput.value = '';
})

Теперь, когда форма отправлена, мы должны получить ответ от нашего API, напечатанный на консоли нашего браузера.

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

// Select text input
const textInput = document.getElementById('city');
// Store the value of the input in a variable
let cityName = textInput.value;
// When an input event is triggered update cityName
textInput.addEventListener('input', function(e) {
  cityName = e.target.value;
})
// Select our form
const form = document.querySelector('form');
// When form is submitted print 'submitted' to the browser console
form.addEventListener('submit', function(e) {
  // prevent form default behavior
  e.preventDefault();
// make request to our API
  axios.get('http://localhost:3000/weather/?city=' + cityName)
    .then(function(response) {
      // select elements
      let city = document.querySelector('.cityName');
      let celsius = document.querySelector('.celsius');
      let fahrenheit = document.querySelector('.fahrenheit');
      let errorMessage = document.querySelector('.error-message');
if (response.data.city) {
        city.innerHTML = 'City: ' + response.data.city;
        celsius.innerHTML = 'Temperature (C): ' + response.data['temperature (C)'];
        fahrenheit.innerHTML = 'Temperature (F): ' + response.data['temperature (F)'];
      } else {
        errorMessage.innerHTML = "This city is not in our database"
      }
    })
    .catch(function(error) {
      console.log(error);
    })
// clear input
  textInput.value = '';
})

Приведенный выше код должен дать следующий результат.

Поздравляю! Если вы зашли так далеко, значит, вы успешно создали API и интерфейсное приложение, которое может извлекать из него данные. Это была очень простая демонстрация, но я надеюсь, что она вдохновит вас на создание чего-то более надежного и интересного.

Если у вас есть какие-либо вопросы или предложения, связанные с этим постом, не стесняйтесь комментировать ниже или найти меня в моем твиттере и оставить мне сообщение!