Начало работы с микросервисами с использованием кодовых коробок Syncano

 username = ARGS.POST.username, repo = ARGS.POST.repo, pullLabel = ARGS.POST.label; 

Затем мы начинаем настраивать наш HTTP-запрос, который мы хотим сделать, к GitHub. Мы настроили URL, который хотим отправить HTTP-запрос в API проблем GitHub . В моем собственном примере я ищу запрос https://api.github.com/repos/patcat/GreatestRepoOfAllTime/issues?state=all . Я установил для all так, чтобы как открытые, так и закрытые запросы на получение ответов проходили. Технически этот вызов будет извлекать как проблемы, так и запросы извлечения, поэтому мы могли бы переименовать заголовок в «Проблемы и запросы извлечения» на нашей странице, если бы захотели! Я оставил все как есть, так как в моем репо нет проблем.

 var options = { url: "https://api.github.com/repos/" + username + "/" + repo + "/issues?state=all", 

Другая важная опция для нашего HTTP-запроса — включить заголовок User-Agent, поскольку GitHub использует их для отслеживания того, откуда поступают вызовы. Вы можете называть свое как угодно, просто попытайтесь сделать его уникальным.

 headers: { "User-Agent": "syncano-sample-pull-app" } }; 

Если нашему CodeBox не было присвоено имя пользователя или имя репо в аргументах, он возвращает ошибку и не идет дальше.

 if (!username || !repo) { console.log("Error: Need more info!"); return false; } 

В противном случае мы запускаем HTTP-запрос, который мы определили выше. Если есть ошибка, она появится в переменной error . Мы обнаружим эту переменную и зарегистрируем ее. Если ошибок нет и мы получили успешный ответ HTTP 200, наш CodeBox продолжит интерпретацию полученных данных запроса на извлечение.

 request(options, function (error, response, body) { if (error) { console.log("Error: ", JSON.stringify(error)); } else if (!error && response.statusCode == 200) { 

Наши данные запроса на получение будут находиться в возвращаемой переменной body . Он представлен в виде строки JSON, поэтому мы разбираем его во что-то, что JavaScript может просматривать, и сохраняем его в переменной, называемой pulls . Мы также запускаем новую переменную с именем returnValue которой мы скомпилируем массив данных JSON, которые мы предоставим в результате тому, кто запускает CodeBox.

 var pulls = JSON.parse(body), returnValue = "["; 

Затем мы используем функцию forEach() модуля lodash, чтобы просмотреть каждый запрос на выборку, который возвращает GitHub, и поработать с ним:

 _(pulls).forEach(function(pull) { ... } 

В этой функции forEach() мы устанавливаем новую переменную с именем display которая будет определять, следует ли отображать каждый запрос на извлечение тому, кто запрашивал запросы на извлечение из CodeBox. Если у CodeBox есть аргумент pullLabel , он знает, что мы ищем результаты по одной конкретной метке. В этом случае он проходит по каждой из меток в pull.labels возвращаемых из GitHub, и, если есть какие-либо совпадения, он устанавливает этот запрос извлечения для отображения.

 var display = false; if (pullLabel) { if (_.filter(pull.labels, _.matches({"name": pullLabel})).length > 0) { display = true; } } 

В противном случае, если нет аргумента pullLabel , мы не фильтруем по pullLabel , и мы определенно хотим, чтобы этот запрос показывался.

 else { display = true; } 

После принятия решения о том, хотим ли мы отображать запрос на извлечение, мы проверяем эту переменную display и затем добавляем строку JSON к нашему returnValue с помощью pull.title , pull.state и pull.labels . pull.labels превращается в строку JSON, поскольку из GitHub может быть возвращено несколько меток, и мы хотим, чтобы они хорошо вписывались в возвращаемый нами JSON.

 if (display) { returnValue += "{\"title\":\"" + pull.title + "\", \"url\":\"" + pull.html_url + "\", \"state\":\"" + pull.state + "\", \"labels\":" + JSON.stringify(pull.labels) + "},"; } }).value(); 

returnValue как мы просмотрели каждый запрос на извлечение, мы удаляем последний символ из returnValue (это запятая, потому что каждый цикл запроса на добавление добавляется через запятую к этой строке), и затем мы закрываем массив объектов JSON.

 returnValue = returnValue.substring(0, returnValue.length - 1); returnValue += "]"; 

Чтобы завершить это и отправить эти данные, мы регистрируем их в консоли, чтобы они могли быть получены нашим веб-приложением.

 console.log(returnValue); } }); 

Обновление HTML нашего приложения

Код интерфейса нашего приложения довольно прост. Мы добавили несколько стилей, чтобы он выглядел немного чище, и мы обновили JavaScript, чтобы он выглядел так:

 (function() { $.ajax({ type: "POST", url: "https://api.syncano.io/v1/instances/YOUR-INSTANCE-NAME/webhooks/p/abcd/findpullrequests/", data: {"username":"patcat", "repo":"GreatestRepoOfAllTime", "label":"invalid"} }) .done(function(res) { var pulls = JSON.parse(res.result.stdout), pullsHTML = ""; for (var i = 0; i " + pulls[i].labels[j].name + ""; } pullsHTML += " " + pulls[i].title + stateHTML + " " } document.getElementById('pull-requests').innerHTML = pullsHTML; }); }()); 

Объясненные обновления нашего интерфейса JavaScript

Части CodeBox, которые были настроены:

Наша выполняющая функция CodeBox теперь имеет полезную нагрузку аргументов, которые мы хотим отправить в значении data — это позволяет нам запрашивать конкретное имя пользователя, хранилище и метку, от которой мы хотим получать запросы извлечения. Для моего собственного примера я показываю только запросы извлечения с именем «invalid»:

 data: {"username":"patcat", "repo":"GreatestRepoOfAllTime", "label":"invalid"} 

После успешного выполнения запроса мы анализируем строку JSON из ответа res.result.stdout нашего res.result.stdout (именно здесь можно найти ответ console.log ) и сохраняем его в переменной с именем pulls . Мы также создали переменную с именем pullsHTML для вывода HTML, который мы будем помещать на страницу.

 var pulls = JSON.parse(res.result.stdout), pullsHTML = ""; 

Подобно тому, как мы просматривали наш массив GitHub, но без lodash (вы могли бы вводить lodash в свой интерфейс, если хотите!), Мы перебираем каждый запрос на извлечение и отображаем его в виде ссылки. Если есть какие-либо ярлыки, мы также добавляем их в смесь. Мы также определяем состояние запросов на удаление с помощью класса, называемого pull-open или pull-closed .

 for (var i = 0; i < pulls.length; i++) { var stateHTML = ""; for (var j = 0; j < pulls[i].labels.length; j++) { stateHTML += "<div class=\"label\">" + pulls[i].labels[j].name + "</div>"; } pullsHTML += "<a class=\"pull pull-" + pulls[i].state + "\" href=\"" + pulls[i].url + "\" target=\"_blank\">" + pulls[i].title + stateHTML + "</a>" } 

Наконец, мы помещаем этот код в наш элемент #pull-requests на странице:

 document.getElementById('pull-requests').innerHTML = pullsHTML; 

В бою

Если мы посмотрим на мой репозиторий GitHub, который мы будем использовать в качестве примера, мы увидим четыре ожидающих запроса. Два из них помечены как недействительные, и один из недействительных запросов извлечения закрыт:

Если мы запустим наше веб-приложение, загрузив index.html , Syncano предоставит нашему приложению только два из запросов извлечения GitHub — два запроса, помеченные как недействительные. Один из запросов вычеркнут, который является частью стилизации для закрытого билета в моем примере CSS (вы можете стилизовать все приложение в любом случае или посмотреть демонстрационный код!).

Вывод

CodeBoxes и Syncano предоставляют действительно хороший и простой способ настройки модульной и многоразовой бессерверной платформы для ваших веб-приложений. Пример запроса на загрузку GitHub полностью работает на службе Syncano, только со статической HTML-страницей и некоторым базовым JavaScript для извлечения данных. Для тех, кто не слишком взволнован идеей создания бэкэнд-среды для вашего следующего проекта, Syncano и его CodeBox могут быть идеальным выбором.