RESTool - Инструмент пользовательского интерфейса с открытым исходным кодом для управления API RESTful

Когда я работал в Outbrain, у нас была очень хорошая традиция дней открытых исходников. Раз в месяц мы встречались за пределами офиса и посвящали полный рабочий день тому, чтобы внести свой вклад в сообщество разработчиков открытого исходного кода.

Одним из результатов этих дней стал проект с открытым исходным кодом, разработанный моей командой (- Орели Леви, Джонатан Селлам) и мной под названием RESTool.

Что такое RESTool?

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

Идея RESTool проста. Учитывая тот факт, что каждая сущность в вашем API имеет реализацию RESTful, RESTool поможет вам разработать инструмент для управления этими сущностями в кратчайшие сроки, просто отредактировав файл конфигурации. Нет JavaScript. Без CSS. Без HTML. Всего один файл JSON.

Чем он отличается от пользовательского интерфейса Swagger?

Swagger UI - отличный инструмент для разработчиков, но для нетехнических людей это может быть немного сложно. Пользовательский интерфейс RESTool прост и разработан для всех.

Вот ссылка на образец приложения, которое мы создали, чтобы вы могли изучить интерфейс RESTool (не стесняйтесь добавлять в список больше персонажей Игры престолов):

Https://restool-sample-app.herokuapp.com/

Хорошо, вы меня убедили. Как мне начать?

RESTool доступен в следующем репозитории GitHub: https://github.com/dsternlicht/RESTool

Хотя это хорошо документировано, я дам вам краткий обзор процесса установки, настройки и развертывания приложения RESTool.

Установка

Начните с загрузки репозитория RESTool с GitHub:

git clone https://github.com/dsternlicht/RESTool.git

2. Войдите в папку приложения:

cd RESTool

3. Установите зависимости узлов:

npm install

4. Установите Angular CLI:

npm install -g @angular/cli

5. Запустите сервер разработки:

ng serve

6. Перейдите к http: // localhost: 4200 / в своем браузере, чтобы увидеть приложение.

Конфигурация

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

Файл, с которым мы собираемся работать, называется config.json, и вы можете найти пример его структуры в разделе src/config-sample.json.
Измените имя файла JSON с config-sample.json на config.json.
Вот пример структуры конфигурации:

{
  "name": "RESTool app",
  "pages": [
    {
      "default": true,
      "name": "Contacts",
      "id": "contacts",
      "description": "An example of RESTool configuration file usage with a simple mocking server",
      "methods": {
        "getAll": {
          "label": "Get Contacts",
          "url": "https://restool-sample-app.herokuapp.com/api/contacts",
          "dataPath": null,
          "queryParams": [
            {
              "name": "q",
              "value": "",
              "label": "Query"
            }
          ],
          "display": {
            "type": "table",
            "fields": [
              {
                "name": "thumbnail",
                "type": "image",
                "label": "Thumbnail"
              },
              {
                "name": "id",
                "type": "text",
                "label": "ID"
              },
              {
                "name": "name",
                "type": "text",
                "label": "Name"
              },
              {
                "name": "email",
                "type": "text",
                "label": "Email"
              },
              {
                "name": "work",
                "type": "text",
                "label": "Phone #",
                "dataPath": "phone"
              }
            ]
          }
        },
        "getSingle": {
          "url": "https://restool-sample-app.herokuapp.com/api/contacts/:id",
          "dataPath": null,
          "queryParams": [],
          "requestHeaders": {}
        },
        "put": {
          "url": "https://restool-sample-app.herokuapp.com/api/contacts/:id",
          "actualMethod": null,
          "fields": [
            {
              "name": "name",
              "label": "Name",
              "type": "text"
            },
            {
              "name": "email",
              "label": "Email",
              "type": "email"
            },
            {
              "name": "thumbnail",
              "label": "Thumbnail",
              "type": "text"
            },
            {
              "name": "work",
              "label": "Work Phone",
              "type": "text",
              "dataPath": "phone"
            },
            {
              "name": "mobile",
              "label": "Mobile Phone",
              "type": "text",
              "dataPath": "phone"
            },
            {
              "name": "numbers",
              "label": "Numbers",
              "type": "array",
              "arrayType": "text"
            },
            {
              "name": "friends",
              "label": "Friends",
              "type": "array",
              "arrayType": "object"
            }
          ]
        },
        "post": {
          "url": "https://restool-sample-app.herokuapp.com/api/contacts",
          "fields": [
            {
              "name": "name",
              "label": "Name",
              "type": "text"
            },
            {
              "name": "email",
              "label": "Email",
              "type": "email"
            },
            {
              "name": "thumbnail",
              "label": "Thumbnail",
              "type": "text"
            },
            {
              "name": "work",
              "label": "Work Phone",
              "type": "text",
              "dataPath": "phone"
            },
{
              "name": "mobile",
              "label": "Mobile Phone",
              "type": "text",
              "dataPath": "phone"
            },
            {
              "name": "numbers",
              "label": "Numbers",
              "type": "array",
              "arrayType": "text"
            },
            {
              "name": "friends",
              "label": "Friends",
              "type": "array",
              "arrayType": "object"
            }
          ]
        },
        "delete": {
          "url": "https://restool-sample-app.herokuapp.com/api/contacts/:id"
        }
      }
    }
  ]
}

Этот файл конфигурации относится к нашему образцу приложения. Давайте разберемся.

name: название приложения. Он появится на главном экране приложения.

страницы: массив объекта. Каждый объект будет определять страницу в приложении. В нашем примере приложения Medium нашими страницами будут: Пользователи, публикации, серии, истории и т. Д.

Не вводя каждое поле в объекте страницы (все описано в официальном файле README.md), вы можете увидеть, что объект описывает страницу в приложении (имя, идентификатор, описание и т. д.) и что более важно - методы RESFul страницы:

{
  "default": true,
  "name": "Stories",
  "id": "stories",
  "description": "A description of the page",
  "methods": {
    "getAll": {...},
    "getSingle": {...},
    "put": {...},        
    "post": {...},
    "delete": {...}
  }
}

Подумайте, например, о блоге Medium. С какими организациями мы имеем дело? У нас есть пользователи, публикации, истории, серии и т. Д. Предполагая, что Medium API - это RESTful API, вы можете получать, создавать, обновлять и удалять каждую из указанных выше сущностей.

Давайте возьмем объект Истории в качестве примера и разберем его на методы REST.

(примечание: когда я имею в виду «пользователя», я имею в виду менеджера продукта, менеджера аккаунта и т. д.)

getAll: отвечает за получение массива историй в приложении. В этом методе вы также определите, какие поля будут представлены в главном окне приложения.

getSingle: вызывается, когда пользователь нажимает кнопку «Изменить». Он будет использоваться для получения данных одной истории.

put: будет вызываться, когда пользователь обновит историю в приложении RESTool.

post: будет вызываться, когда пользователь создаст новую историю в приложении RESTool.

delete: (как вы угадали) будет вызываться, когда пользователь удалит историю.

Опять же, каждый метод имеет свой собственный набор полей, и вы можете прочитать об этом здесь:

dsternlicht / RESTool
RESTool - это инструмент пользовательского интерфейса с открытым исходным кодом для управления RESTful API. Это поможет вам сэкономить время на разработке собственных внутренних инструментов… github.com

Развертывание

Когда вы почувствуете, что ваше приложение RESTool готово к развертыванию, выполните следующую команду:

ng build -prod

Это соберет проект Angular, так что он будет готов к выпуску. Результатом выполнения этой команды будет папка с именем dist в корневой папке.

В папке dist находятся все файлы, которые вам нужны (все статические) для запуска приложения на вашем сервере.

Ярлык

Если вы не хотите заниматься Angular и всем процессом установки, вы можете просто загрузить последнюю версию RESTool здесь и работать с папкой dist.

Не стесняйтесь оставлять свои отзывы о RESTool в комментариях, вносить свой вклад в проект на GitHub и помогать мне распространять информацию! :)