Swagger что это для чайников

Swagger – умная документация вашего RESTful web-API — обзор Junior back-end developer-а для новичков

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Предисловие

Команда, в которой я сделала свои первые шаги на поприще написания промышленного кода, занималась разработкой удобного API к функциональности программного продукта на C# (для удобства назовем его, скажем, буквой E), существовавшего уже много лет и зарекомендовавшего себя на рынке с весьма положительной стороны. И здесь вроде бы у юного падавана пока не должно возникать вопросов, однако же представим себе, что ранее вы, скорей всего, конечно, писали собственные web-API, но вряд ли для широкой аудитории, а значит жили по принципу «Сам создал – сам пользуюсь», и если вдруг кого-то бы заинтересовала функциональность вашего API, то вы, наверное, кинули бы ему pdf-файл с подробной инструкцией (по крайней мере я бы сделала именно так). «Где посмотреть функционал апи» — спросила я тимлида ожидая получить ссылку на текстовый документ. «Загляни в Swagger» — ответил он.

Постой, как так получается, что продукт успешно функционирует уже давно, а API вы к нему пишете только сейчас?


Все верно, как такового удобного публичного API у E до недавнего времени не существовало. Фактически вся работа происходила через web-интерфейс, а back-end состоял из множества внутренних микросервисов, с которыми невозможно было интегрироваться извне без четкого понимания внутренней бизнес-логики, уж не говоря о том, что сами они на значительную долю состояли из легаси. Нужно было обратить внимание на клиентов, которые хотят непосредственно напрямую взаимодействовать с сервером, а значит предоставить им красивое и удобное API. Что для этого потребуется? Все, о чем было написано чуть раньше – самим взять и наладить работу со всеми внутренними микросервисами, а также обеспечить удобную и красивую документацию, сделав это красиво, понятно, и самое главное – коммерчески успешно.

Хорошо, так что же есть такое Swagger и в чем его полезность миру?

По сути Swagger – это фреймворк для спецификации RESTful API. Его прелесть заключается в том, что он дает возможность не только интерактивно просматривать спецификацию, но и отправлять запросы – так называемый Swagger UI, вот так это выглядит:

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Как мы видим – полное описание методов, включая модели, коды ответов, параметры запроса – в общем, наглядно.

И как это работает?

Отличное руководство для внедрения Swagger в ASP.NET Core
с нуля есть вот в этой этой статье.

Идея в конфигурации отображения с помощью специальных аннотаций у методов API, вот пример:

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Swagger Codegen

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Если очень хочется, то можно сгенерировать непосредственно клиента или сервер по спецификации API Swagger, для этого нужен генератор кода Swagger-Codegen. Описание из документации, думаю, пояснять не требуется:

This is the Swagger Codegen project, which allows generation of API client libraries (SDK generation), server stubs and documentation automatically given an OpenAPI Spec. Currently, the following languages/frameworks are supported:

Прочая информация, в частности инструкция по использованию, представлена здесь:
Общая информация

Источник

Swagger (OpenAPI 3.0)

Всем привет. Это мой первый пост на Хабре и я хочу поделиться с вами своим опытом в исследовании нового для себя фреймворка.

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

Сейчас хочу поделиться ею в надежде, что кому-то она поможет в изучение Swagger (OpenApi 3.0)

Введение

Я на 99% уверен у многих из вас были проблемы с поиском документации для нужного вам контроллера. Многие если и находили ее быстро, но в конечном итоге оказывалось что она работает не так как описано в документации, либо вообще его уже нет.
Сегодня я вам докажу, что есть способы поддерживать документацию в актуальном виде и в этом мне будет помогать Open Source framework от компании SmartBear под названием Swagger, а с 2016 года он получил новое обновление и стал называться OpenAPI Specification.

Также возможно сгенерировать непосредственно клиента или сервер по спецификации API Swagger, для этого понадобится Swagger Codegen.

Основные подходы

Swagger имеет два подхода к написанию документации:

Документация пишется на основании вашего кода.

Данный подход позиционируется как «очень просто». Нам достаточно добавить несколько зависимостей в проект, добавить конфигурацию и уже мы будем иметь нужную документацию, хоть и не настолько описанной какою мы хотели.

Код проекта становиться не очень читабельным от обилия аннотаций и описания в них.

Вся документация будет вписана в нашем коде (все контроллеры и модели превращаются в некий Java Swagger Code)

Подход не советуют использовать, если есть возможности, но его очень просто интегрировать.

Документация пишется отдельно от кода.

Данный подход требует знать синтаксис Swagger Specification.

Документация пишется либо в YAML/JSON файле, либо в редакторе Swagger Editor.

Swagger Tools

Swagger или OpenAPI framework состоит из 4 основных компонентов:

Теперь давайте поговорим о каждом компоненте отдельно.

Swagger Core

Для того что бы использовать Swagger Core во все орудие, требуется:

Apache Maven 3.0.3 или больше

Jackson 2.4.5 или больше

Что бы внедрить его в проект, достаточно добавить две зависимости:

Также можно настроить maven плагин, что бы наша документация при сборке проект генерировалсь в YAML

Дальше нам необходимо добавить конфиг в проект.

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

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

Вот некоторые из них:

Swagger Codegen

В настоящее время поддерживаются следующие языки / фреймворки:

Java (Jersey1.x, Jersey2.x, OkHttp, Retrofit1.x, Retrofit2.x, Feign, RestTemplate, RESTEasy, Vertx, Google API Client Library for Java, Rest-assured)

Scala (akka, http4s, swagger-async-httpclient)

Node.js (ES5, ES6, AngularJS with Google Closure Compiler annotations)

Haskell (http-client, Servant)

C# (.net 2.0, 3.5 or later)

C++ (cpprest, Qt5, Tizen)

Java (MSF4J, Spring, Undertow, JAX-RS: CDI, CXF, Inflector, RestEasy, Play Framework, PKMST)

C# (ASP.NET Core, NancyFx)

C++ (Pistache, Restbed)

Ruby (Sinatra, Rails5)

API documentation generators:

Что бы внедрить его в проект, достаточно добавить зависимость, если используете Swagger:

и если используете OpenApi 3.0, то:

Можно настроить maven плагин, и уже на процессе сборки мы можем сгенерировать нужный для нас клиент либо мок сервиса.

Также все это можно выполнить с помощью командной строки.

Запустив джарник codegen и задав команду help можно увидеть команды, которые предоставляет нам Swagger Codegen:

Для нас самые нужные команды это validate, которая быстро проверять на валидность спецификации и generate, с помощью которой мы можем сгенерировать Client на языке Java

Swagger UI

Вот пример Swagger UI который визуализирует документацию для моего pet-project:

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Нажавши на кнопку «Try it out», мы можем выполнить запрос за сервер и получить ответ от него:

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Swagger Editor

На верхнем уровне в спецификации OpenAPI 3.0 существует восемь объектов. Внутри этих верхнеуровневых объектов есть много вложенных объектов, но на верхнем уровне есть только следующие объекты:

Для работы над документацией со спецификацией используется онлайн-редактор Swagger Редактор Swagger имеет разделенное представление: слева пишем код спецификации, а справа видим полнофункциональный дисплей Swagger UI. Можно даже отправлять запросы из интерфейса Swagger в этом редакторе.

Редактор Swagger проверит контент в режиме реального времени, и укажет ошибки валидации, во время кодирования документа спецификации. Не стоит беспокоиться об ошибках, если отсутствуют X-метки в коде, над которым идет работа.

Первым и важным свойством для документации это openapi. В объекте указывается версия спецификации OpenAPI. Для Swagger спецификации это свойство будет swagger:

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

Объект components уникален среди других объектов в спецификации OpenAPI. В components хранятся переиспользуемые определения, которые могут появляться в нескольких местах в документе спецификации. В нашем сценарии документации API мы будем хранить детали для объектов parameters и responses в объекте components

Conclusions

Документация стала более понятней для бизнес юзера так и для техническим юзерам (Swagger UI, Open Specifiation)

Можно проверять насколько совместимы изменения. Можно настраивать это в дженкинсе

Нет ни какой лишней документации к коде, код отдельно, документация отдельно

Источник

Руководство Swagger UI

Swagger UI предоставляет Фреймворк, который читает спецификацию OpenAPI. и создает веб-страницу с интерактивной документацией. В этом руководстве показано, как интегрировать документ спецификации OpenAPI в интерфейс Swagger.

Концептуальный обзор OpenAPI и Swagger можно посмотреть в разделе Знакомство со спецификациями OpenAPI и Swagger. Пошаговое руководство по созданию документа спецификации OpenAPI смотрим в Обзоре руководства OpenAPI 3.0.

Обзор Swagger UI

Прежде чем мы углубимся в Swagger, нужно прояснить ключевые термины.

Swagger

OpenAPI

Официальное название спецификации OpenAPI. Спецификация OpenAPI предоставляет набор свойств, которые можно использовать для описания REST API. Рабочий, валидный документ можно использовать для создания интерактивной документации, создания клиентских SDK, запуска модульных тестов и многого другого. Подробности спецификации можно изучить на GitHub по адресу https://github.com/OAI/OpenAPI-Specification. В рамках инициативы Open API с Linux Foundation спецификация OpenAPI направлена ​​на то, чтобы быть независимой от производителя (многие компании участвуют в ее разработке).

Swagger Editor

Онлайн-редактор, который проверяет документацию OpenAPI на соответствие правилам спецификации OpenAPI. Редактор Swagger помечает ошибки и дает советы по форматированию.

Swagger UI

Swagger Codegen

Знакомство со Swagger при помощи Petstore

Чтобы лучше понять интерфейс Swagger, давайте рассмотрим пример Swagger Petstore. В примере Petstore сайт генерируется с помощью Swagger UI.

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

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

Авторизация запроса

Прежде чем делать какие-либо запросы, нужна авторизация. Нажимаем кнопку Authorize и заполняем информацию, требуемую в окне «Авторизация», изображенном ниже:

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Пример Petstore имеет модель безопасности OAuth 2.0. Код авторизации только для демонстрационных целей. Нет никакой реальной логики авторизации этих запросов, поэтому просто закрываем окно Авторизации.

Создание запроса

Теперь создадим запрос:

Пользовательский интерфейс Swagger отправляет запрос и показывает отправленный curl. Раздел Ответы показывает ответ. (Если выбрать JSON вместо XML в раскрывающемся списке «Response content type», формат ответа будет показан в формате JSON.)

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Проверка создания питомца

Примеры сайтов с документаций по Swagger UI

Прежде чем мы перейдем к другому API с этим пособием по Swagger (кроме демонстрации Petstore), посмотрим на другие реализации Swagger:

Некоторые из этих сайтов выглядят одинаково, но другие, такие как The Movie Database API и Zomato, были легко интегрированы в остальную часть их сайта документации.

👨‍💻 Практическое занятие: Создание спецификации OpenAPI в Swagger UI

На этом занятии мы создадим документацию в Swagger UI в спецификации OpenAPI. Если вы используете один из предварительно созданных файлов OpenAPI, вы можете увидеть демонстрацию того, что мы создадим здесь: OpenWeatherMap Swagger UI или Sunrise/sunset Swagger UI).

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Для интеграции спецификации OpenAPI в Swagger UI:

Источник

Документирование #микросервисов

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Оригинальная статья является размышления на тему почему документация в мире микросервисов критично необходима и как ее можно создавать и публиковать используя swagger. Пошаговой инструкцией по настройке она точно не является.

Вступление

Несколько месяцев назад один из наших бекенд разработчиков интернов получил задачу — разработать новый простой сервис. Сервис должен был генерировать емайл отчеты о пользовательской активности. В задаче не было ничего сложного и у интерна все получилось. Однако через несколько недель мы захотели включить в отчет более детальную информацию о некоторых конкретных пользователях. Я решил обновить этот сервис самостоятельно. “Просто получи данные из нашего пользовательского сервиса и вставь их в емайл”, — думал тогда я.

На это у меня ушло несколько часов, и даже пришлось подключить двоих других разработчиков только для того, чтобы найти правильные REST endpoints и необходимые мен структуры. “Никогда больше. Должен быть более правильный метод это сделать…”, — крутилось у меня в голове все это время.

Микросервисная архитектура подразумевает набор самостоятельных сервисов, которые общаются друг с другом, а для конечного пользователя выглядит как единая программа. Один из самых популярных протоколов для обмена сообщениями между микросервисами — это REST. Проблема в том, что REST не является само описательным протоколом. Это значит, что клиент должен знать конкретную комбинацию URL, HTTP метода и формата ответа. В некоторых случаях необходимо также знать также формат тела запроса. Обычно реализация REST интерфейса базируется на общих принципах и традициях, принятых в вашей организации. В любом случае, REST endpoints всегда должны быть описаны в одном конкретном документе, доступном для всех остальных разработчиков. О том, как и где хранить, мы поговорим чуть позже, а пока давайте обсудим основы — формат документации.

Swagger

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Документацию должно быть легко читать, писать, парсить, генерировать, исправлять, обновлять и прочее. Решение должно быть настолько простым, чтобы даже самые ленивые разработчики им пользовались. После небольшого исследования мы в Ataccama решили использовать Swagger для документирования наших REST APIs.

Swagger — это фреймворк и спецификация для определения REST APIs в формате, дружественном к пользователю и компьютеру (в нашем случае JSON или YAML). Но Swagger — это не просто спецификация. Основная его мощь заключается в дополнительных инструментах. Для Swagger существует огромное количество бесплатных утилит (как официальных, так и написанных сообществом), которые могут сделать жизнь (вашу и ваших коллег) немного более счастливой. Вы можете установить все это на свои собственные сервера и посмотреть, как это работает — например, попробовать работу с браузером документов или Swagger онлайн-редактором.

Как мы это делаем?

Если вы тоже думаете, что Swagger — это здорово, то читайте дальше. Сейчас будет немного подробностей о том, как мы используем его в Ataccama, в таинственном мире микросервисов.

У каждого микросервиса в определенной папке лежит файл со Swagger описанием и хранится это все прямо в git-репозитории. Описания могут быть как сгенерированы при помощи Swagger generator, так и записаны туда вручную. Прелесть заключается в том, что для записи определений используются JSON и YAML форматы. Их легко распарсить, и во время сборки проекта мы можем автоматически проверять соответствие REST endpoints и документации. Несоответствия будут генерировать предупреждения, и тем самым стимулировать разработчика поддерживать документацию в актуальном состоянии.

Хранение документации внутри микросервиса позволяет нам отображать её в любое время прямо из этого микросервиса в процессе работы. Это помогает тестировать и отлаживать REST endpoints в процессе развертывания сервиса на собственной машине. А ещё у Swagger есть инструмент с веб интерфейсом для тестирования REST endpoints.

Поскольку каждый микросервис предоставляет собственную документацию, мы можем настроить специальную задачу для Дженкинса (или любого другого CI сервера), которая сгенерирует полную документацию для всего проекта. Эта задача собирает Swagger файлы из всех микросервисов, производит некоторые минимальные модификации (дедупликация, удаление ненужных атрибутов) и на выходе генерирует единый Swagger файл, содержащий полную актуальную информацию для всего проекта.

Публикация документации.

Централизованное хранение и редактирование документации — это только первый шаг. Следующий — сделать ее доступной для всех разработчиков, тестеров и остальных заинтересованных людей в компании. И Swagger UI — это именно то, что вам для этого понадобится. При помощи небольшой JavaScript библиотеки Swagger UI генерирует HTML элементы для всех ваших REST endpoints, которые далее можно упорядочивать с помощью HTML разметки.

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

По умолчанию Swagger UI подгружает собственный Swagger файл с примерами. Все остальные API должны быть загружены вручную. Но конфигурация занимает всего несколько секунд.

Теперь у нас есть сгенерированная документация в читабельном виде. Время отправить её на сервер.
Некоторое время назад мы в Ataccama начали использовать Docker, и поэтому подумали, а почему бы не упаковать всю документацию в отдельный докер контейнер, загрузить его в наш частный репозитарий, а потом задеплоить в докер кластер? Дженкинc может это сделать буквально за несколько секунд. Как результат мы всегда имеем обновленную документацию доступную к просмотру через браузер.

Кроме того, использование докера дает нам еще несколько преимуществ:

Каждый разработчик может просто загрузить документацию и запустить её на собственном компьютере всего одной командой.

И это только начало.

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

Несмотря на расхваливание Swaggerа мы все еще не нашли удобного метода документирования асинхронных сообщений. По факту, в Атаккаме мы недовольны нашим текущим решением и все еще пытаемся найти что-нибудь более простое и красивое для описания очередей сообщений и их структур. Если у вас есть идеи как это можно сделать лучше, пишите в комментариях. Любые интересные идеи приветствуются.

Автор Lubos Palisek
Backend software developer in Ataccama. Greedy for new cloud based technologies and ideas.

Ataccama Corporation – международная компания, производитель программного обеспечения, специализирующаяся в области решений по управлению качеством данных, управлению мастер-данными и управления данными предприятия (data governance), решениями которого уже воспользовались более 250 компаний, начиная от предприятий среднего размера и заканчивая международными компаниями из различных отраслей.

Все ваши вопросы и рекомендации с удовольствием переведу автору.

Источник

Руководство по работе с Django REST Framework, Swagger и созданию клиента TypeScript для API

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Цели:

Создать API с помощью Django REST Framework;

Создать динамическую документацию Swagger;

Сгенерировать для API код клиента на TypeScript;

Создать базовое приложение на ReactJS, которое будет использовать сгенерированный код на TypeScript для отображения данных из API.

Исходный код:

Требования:

В этом руководстве нам понадобятся конкретные пакеты в случае, если вы не будете использовать шаблон проекта Djangitos:

Установка проекта

Создайте аккаунт суперпользователя:

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

Перейдите на http://0.0.0.0:8060/admin/ и войдите под этими учетными данными.

Создание приложения и моделей:

Давайте создадим приложение, в котором будут наши модели и API.

Добавьте приложение в PROJECT_APPS в djangito/settings.py:

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

У нас есть три модели: Category, Book, Author.

Вот код, который будет в myapi/models.py:

Для этих моделей нам понадобится интерфейс администратора, поэтому следующий код мы положим в myapi/admin.py:

Теперь нам нужно сделать миграции для наших моделей:

Теперь мы можем перейти к панели администратора и посмотреть на наши модели: http://0.0.0.0:8060/admin/myapi/

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

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Создание API

Во время создания API мы не будем делать аутентификацию и отложим эту часть, чтобы сосредоточить на документации Swagger и клиентской библиотеке на TypeScript.

Сначала давайте создадим сериализаторы для наших моделей.

Создайте файл myapi/serializers.py:

Я предпочитаю хранить представление API и представления, которые генерируют HTML, в отдельных файлах.

Создаем файл myapi/api.py:

Положите эти URL-адреса для нашего API в файл myapi/urls.py:

Добавьте URL-адреса в URLConf в djangito/urls.py:

Теперь вы можете открыть эндпоинт books в браузере и посмотреть, как все работает: http://0.0.0.0:8060/api/books

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Документация Swagger

Давайте создадим динамическую документацию для нашего API.

Для этого давайте добавим URL-адреса в корневой URLconf в djangito/urls.py:

Мы добавили два импорта и два новых URL-адреса. Один для описания схемы в форматах JSON или YAML, а второй для отображения TemplateView в удобном интерактивном интерфейсе.

Для TemplateView нам понадобится создать шаблон в /templates/swaggerui/swaggerui.html:

Попробуйте открыть документацию в браузере: http://0.0.0.0:8060/swagger-ui/

Теперь вы видите, что все эндпоинты определены и каждый созданный нами сериализатор, который мы использовали в эндпоинтах API, указан в разделе Models.

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Давайте подробнее взглянем на эндпоинт books:

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Благодаря нашим сериализаторам мы видим ожидаемый тип ответа без вызова эндпоинтов.

Обратите особое внимание на поле authors_names нашего BookSerializer и поле authors_names в ответе эндпоинта.

Последнее, что нужно посмотреть, это то, как сериализаторы описаны в документации в блоке Models :

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Заголовки CORS

Создание приложения React и генерация TypeScript API Client из swagger.json

Чтобы показать клиентскую библиотеку, давайте создадим очень простое приложение ReactJS.

Для начала удалим предыдущую версию create-react-app :

А теперь давайте создадим демо-приложение React:

Глобально установите OpenAPI Typescript Codegen:

И давайте сгенерируем API клиента:

Теперь наш проект React выглядит так:

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Для каждой модели в документации Swagger у нас есть файл TypeScript в папке models. Эндпоинты нашего API представлены сервисами.

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

Создайте файл src/BooksList.tsx в проекте React:

А затем замените src/App.tsx следующим кодом:

А теперь в корне проекта React выполните эту команду, чтобы запустить dev-сервер:

После нее должно открыться окно браузера. Если не открылось, перейдите на http://localhost:3000/.

Как видите, наше приложение React успешно загрузило список книг из нашего API:

Swagger что это для чайников. Смотреть фото Swagger что это для чайников. Смотреть картинку Swagger что это для чайников. Картинка про Swagger что это для чайников. Фото Swagger что это для чайников

Материал подготовлен в рамках курса «Web-разработчик на Python». Если вам интересно узнать подробнее о формате обучения и программе, познакомиться с преподавателем курса — приглашаем на день открытых дверей онлайн. Регистрация здесь.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *