Представьте, что вы можете взаимодействовать со всей серверной частью из среды кодирования одним нажатием кнопки. Добро пожаловать в Филиал!
Почему?
Серверы могут содержать множество различных маршрутизаторов, маршрутов и конечных точек. Навигация по всем этим различным конечным точкам может быть сложной задачей. Кроме того, тестирование требует выхода из среды кодирования, чтобы открыть внешний клиент API, и вставки связанного маршрута без проверки того, существует ли он даже в вашем собственном приложении. После того, как вы сделали свой запрос, эти результаты затем будут жить в другом клиенте API, а не в вашей среде кодирования.
Branch предлагает разработчикам простой и удобный способ визуализировать свою серверную среду в режиме реального времени, когда они вносят изменения в свой собственный код. Наш инструмент автоматически создает иерархическое дерево всех существующих маршрутов, поэтому нет необходимости копаться в каталоге сервера, чтобы мысленно собрать каждый из них по отдельности. Дерево формируется простым открытием расширения, и после его завершения проверить конечную точку так же просто, как щелкнуть узел. При необходимости просто введите тело запроса или идентификатор в параметр URL-адреса и нажмите выделенную кнопку запроса. После завершения запроса вы увидите данные ответа от сервера в поле данных ответа.
Как это работает?
Под капотом Branch работают два уникальных алгоритма, которые были разработаны для двух конкретных целей:
- Очистите файлы клиентов в поисках традиционной архитектуры маршрутов RESTful.
- Форматируйте очищенные необработанные данные во вложенный объект JSON, представляющий иерархический путь от порта к маршрутизатору и к каждой уникальной конечной точке.
Первый алгоритм порождает дочерний процесс Node.js для тихого выполнения команд оболочки в рабочей области пользователя. Branch использует RipGrep для рекурсивного поиска в текущем каталоге различных шаблонов регулярных выражений. Это дает Branch неформатированные необработанные очищенные маршруты.
Прежде чем мы перейдем ко второму алгоритму, давайте поговорим о том, зачем все это нужно. Ключом к нашему расширению является инструмент визуализации маршрута. Branch может сделать это, используя библиотеку javascript D3.js. D3 описывает себя как «воплощение данных в жизнь». В этом случае мы можем взять весь каталог сервера и использовать его для построения интерактивного дерева.
Второй алгоритм, на который опирается Branch, затем берет очищенные данные и форматирует их во вложенный объект JSON. Этот вложенный объект является ключом к созданию нашей визуализации динамического дерева и требует определенной структуры ключей и значений, достаточно гибкой для работы с любой схемой.
Чтобы достичь иерархии:
- Мы просматриваем каталог сервера, чтобы найти PORT, который станет родительским узлом в дереве.
- Мы просматриваем каталог маршрутизатора, чтобы найти всех детей, внуков и т. д., пока не достигнем конечной точки каждого маршрута.
- Наконец, мы добавляем любые доступные методы, соответствующие каждой конечной точке.
Вот пример части нашего вложенного объекта:
Прежде чем мы перейдем к функциям отображения дерева нашего продукта, мы должны упомянуть, как весь этот контент отображается в окне VS Code. WebView отличается от браузера отсутствием index.html. Мы используем VS Code WebView API для написания HTML и вставки наших тегов сценария для функций javascript с помощью метода getWebViewContent.
После того как Branch извлек и отформатировал данные, через API VS Code мы передаем вложенный объект JSON в качестве сообщения в файл визуализации с помощью прослушивателя событий. API VS Code предпочитает, чтобы данные передавались из файла в WebView с использованием метода window.postMessage.
После того, как дерево сформировано, пользователь может щелкнуть узлы и добавить параметры запроса или тело запроса для проверки конкретных методов маршрута. Под капотом Branch использует манипуляции с DOM для чтения входных данных клиентов, а затем передает все в API выборки. Затем Branch аккуратно отображает данные ответа в редакторе кода CodeMirror, который дает пользователю вид среды кодирования.
Поддержка архитектуры RESTful
Вы постоянно слышите об архитектуре RESTful, но как уверенно реализовать ее в своем приложении? Branch предоставляет вам инструменты, необходимые для того, чтобы вы принимали наилучшие решения при настройке своих запросов, чтобы их было легко увидеть и протестировать, и все это в том же пространстве, с которым вы уже работаете. Вы отправляете клиенту правильную информацию? Правильно ли база данных получает информацию по каждому запросу? Любые проблемы, вытекающие из этих вопросов, можно быстрее решить с помощью Branch, чтобы определить необходимые изменения и настройки, которые могут сделать ваше приложение более плавным и с меньшим количеством побочных эффектов.
В заключение
Branch может сэкономить ваше время и энергию, позволяя вам визуализировать и тестировать маршруты RESTful в одном месте, в вашем редакторе кода!
Если вы хотите установить расширение, найдите Branch на боковой панели VS Code Extensions или нажмите здесь.
Если вы заинтересованы в том, чтобы внести свой вклад в этот продукт с открытым исходным кодом, посетите нашу Ветвь страницы GitHub, чтобы начать!
Если у вас остались вопросы, посетите нашу заставку или обратитесь к члену команды.
Следите за участниками Team Branch по ссылкам ниже:
