Мы только что запустили новую конечную точку бесплатных номеров uclapi.com/roombookings/freerooms в нашем API бронирования номеров и хотели показать вам, насколько легко с ее помощью создать веб-приложение.
В этом уроке мы создадим очень простое приложение, которое покажет все комнаты, свободные в настоящее время в UCL. Вот как будет выглядеть финальное приложение.
Шаг 1. Создайте новое приложение на панели управления.
Перейдите на uclapi.com/dashboard, войдите в систему и нажмите большую синюю кнопку, чтобы создать новое приложение. Дайте ему любое имя и нажмите Создать.
Это приложение понадобится нам, чтобы получить токен API, который мы будем использовать для вызова конечной точки бесплатных комнат.
Шаг 2. Настройте Glitch
Как только это будет сделано, щелкните ссылку ниже, чтобы создать собственное приложение Glitch.
Glitch - дружелюбное сообщество, в котором вы создадите приложение своей мечты.
Вы должны увидеть что-то вроде изображения ниже.
Glitch позволяет нам кодировать наше приложение, не беспокоясь о его развертывании. После того, как мы закончим, это также позволит нам увидеть предварительный просмотр нашего приложения в реальном времени.
В приложении Glitch мы уже настроили для вас файлы HTML и CSS. Теперь мы заполним script.js, чтобы совершать звонки на конечную точку свободных комнат.
Мы будем использовать jQuery для вызова API и динамического добавления элементов на нашу HTML-страницу.
Шаг 3: Настройте параметры
Наше приложение покажет пользователям все текущие свободные комнаты в UCL. Начнем с настройки параметров. Конечная точка свободных комнат требует трех параметров (token, start_time, end_time).
token - это токен доступа к API, который вы получаете из приложения на панели инструментов UCL API, созданного на шаге 1.
start_time - время начала в формате ISO, для которого нужно найти свободные комнаты.
end_time - минимальное время, до которого запрашиваемые комнаты должны быть свободны.
Теперь давайте добавим первые строки кода в наш script.js файл. (Не забудьте заменить ‹здесь свой токен› на токен доступа из панели управления UCL API).
let token = "<your token here>"; let now = new Date(); let currentTime = now.toISOString(); now.setHours(now.getHours()+1); // move forward one hour let endTime = now.toISOString(); let url = "https://uclapi.com/roombookings/freerooms" let params = { token: token, start_datetime: currentTime, end_datetime: endTime }
В коде мы сначала получаем текущее время с помощью объекта даты JavaScript, а затем получаем его строковое представление ISO, вызывая для него метод .toISOString().
Затем мы настраиваем параметры, которые нам нужно будет передать нашему вызову API.
Шаг 4. Вызов конечной точки свободных переговорных комнат
Настроив параметры, теперь вызовем API. Мы будем использовать вызов jQuery, как показано ниже.
$.get(url, params, function(data) {
if (data["ok"]) {
data["free_rooms"].forEach(addRoom);
}
else {
$("#rooms").append("Can't find any free rooms now.");
}
});
$.get() вызывает нашу конечную точку (хранящуюся в переменной url) со всеми params и сохраняет ответ в переменной data.
Пример ответа от конечной точки свободных комнат выглядит следующим образом.
{
"ok": true,
"free_rooms": [
{
"siteid": "014",
"location": {
"address": [
"Gower Street",
"London",
"WC1E 6BT",
""
],
"coordinates": {
"lat": 51.23412,
"lng": 51.23123
}
},
"classification": "ER",
"sitename": "Front Lodges",
"roomname": "North Lodge 001",
"automated": "N",
"roomid": "001",
"capacity": 10
},
...
]
}
Итак, в вызове get мы затем проверяем, был ли ответ успешным, проверяя значение data["ok"].
В случае успеха мы перебираем массив free_rooms и вызываем функцию addRoom для каждого элемента. Теперь мы определим функцию addRoom, как показано ниже.
function addRoom(room) {
let latitude = room["location"]["coordinates"]["lat"];
let longitude = room["location"]["coordinates"]["lng"];
let mapsLink = `http://maps.google.com/maps?q=${latitude},${longitude}`;
$("#rooms").append(
`<div class="room">
<a href=${mapsLink}>${room["roomname"]}</a>
<p>Capacity: <b>${room["capacity"]}</b></p>
</div>`
);
}
В функции addRoom мы получаем детали комнаты, которую используем для создания div. Мы одновременно добавляем этот новый div в div с идентификатором rooms в нашем HTML-файле.
`$ {..}` - это новая функция JavaScript, называемая литералами шаблона. Они в основном заменяют значение переменной внутри фигурных скобок во внешнюю строку. Например, в переменной `mapsLink`,` $ {latitude} `будет заменено значением переменной` latitude`.
Наконец, вот как выглядит полный script.js файл.
let token = "<your token here>" let now = new Date(); let currentTime = now.toISOString(); now.setHours(now.getHours()+1); // move forward one hour let endTime = now.toISOString(); let url = "https://uclapi.com/roombookings/freerooms" let params = { token: token, start_datetime: currentTime, end_datetime: endTime } $.get(url, params, function(data) { if (data["ok"]) { data["free_rooms"].forEach(addRoom); } else { $("#rooms").append("Can't find any free rooms now."); } }); function addRoom(room) { let latitude = room["location"]["coordinates"]["lat"]; let longitude = room["location"]["coordinates"]["lng"]; let mapsLink = `http://maps.google.com/maps?q=${latitude},${longitude}`; $("#rooms").append( `<div class="room"> <a href=${mapsLink}>${room["roomname"]}</a> <p>Capacity: <b>${room["capacity"]}</b></p> </div>` ); }
Шаг 5. Наслаждайтесь недавно созданным бесплатным поиском комнат
Теперь нажмите кнопку «Показать в прямом эфире» на Glitch.
Должна открыться новая вкладка с вашим «UCL Free Room Finder».
Следующие шаги
Как видите, конечная точка свободных комнат позволяет очень легко найти все свободные комнаты без необходимости запрашивать все доступные комнаты и анализировать данные, чтобы найти, какие из них свободны в заданном диапазоне времени.
Теперь, когда вы знаете, как использовать конечную точку свободных комнат, вы можете расширить приложение. Одна из идей состоит в том, чтобы получить минимальную емкость, необходимую пользователю для комнат, а затем использовать ее, чтобы ограничить количество комнат, которые вы показываете. Конечная точка свободных комнат принимает множество дополнительных параметров запроса, которые вы можете использовать для фильтрации получаемых данных.
Мы с нетерпением ждем возможности увидеть, как вы будете использовать конечную точку бесплатных комнат в своих приложениях.
Мы здесь, чтобы помочь! Если вы застряли или столкнетесь с какими-либо проблемами, оставьте комментарий здесь, напишите нам по электронной почте, напишите нам в Твиттере или отправьте нам сообщение на facebook.
