{"id":1979,"date":"2015-09-21T19:34:26","date_gmt":"2015-09-21T17:34:26","guid":{"rendered":"http:\/\/developex.com\/blog\/?p=1979"},"modified":"2025-08-07T21:55:43","modified_gmt":"2025-08-07T19:55:43","slug":"sharing-the-api-with-swagger-api-framework","status":"publish","type":"post","link":"https:\/\/developex.com\/blog\/sharing-the-api-with-swagger-api-framework\/","title":{"rendered":"Sharing the API with Swagger API Framework"},"content":{"rendered":"Every manager or project owner wants to control development of their software but not all are able to do it. Aiming to make development clear for all participants of project the DevelopEx company has started to use the Swagger Framework \u2014 a tool for REST API representation and interactive documentation. That is especially useful for popular approach where we separate (web) services from front-end. Now the team members are able to view not only front-end of the project, but also play with back-end. And see how does it works inside.\n\nFor one of our project we use our own API that written with <a href=\"https:\/\/github.com\/domaindrivendev\/Swashbuckle\" target=\"_blank\" rel=\"noopener\">ASP.NET WebApi<\/a>. Our API implements a set of operations with common entities such as '<em>Client<\/em>', '<em>User<\/em>', '<em>Order<\/em>', '<em>Certificate<\/em>' and so on. And we use Swagger rules to describe the API. Since we did it we've got well described REST API methods that helped both customer, and developers and testers.The project became more clear and more stable.\n\nLet's look at the User interface and the code for small part of API that is described by Swagger.\n<h3>User Interface<\/h3>\n<strong>Screenshot #1<\/strong> represents common general view of our API that converted to REST API by Swagger Framework. In our sample we have objects of API such as Certificates, Clients, Dummy, etc.\n\n<div id=\"attachment_1982\" style=\"width: 1372px\" class=\"wp-caption aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" aria-describedby=\"caption-attachment-1982\" class=\"size-full wp-image-1982\" src=\"https:\/\/developex.com\/wp-content\/uploads\/2024\/06\/ngbeyCtS99BU7LUKyibuOPuq0tleADNZguv-y5i36wlNCsQYBXLD15LAIPSJV3ATIC8iaQs2048.png\" alt=\"Screenshot #1 - common general view of our API that converted to REST API by Swagger Framework\" width=\"1362\" height=\"746\" \/><p id=\"caption-attachment-1982\" class=\"wp-caption-text\">Screenshot #1 - common general view of our API that converted to REST API by Swagger Framework<\/p><\/div>\n\nLet's see how both DevelopEx's customer and our testers could estimate functionality the Client API. Look at the<strong> Screenshot #2<\/strong>, the right side of it shows JSON structure of data for Client entity.\n\n<div id=\"attachment_1985\" style=\"width: 986px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-1985\" class=\"size-full wp-image-1985 lazyload\" data-src=\"https:\/\/developex.com\/wp-content\/uploads\/2024\/06\/iagn8HZeJtHRpfpok0JlmJHZLbXNXsQ9sn81c8VIuBIBWMy1INgF2vYPI2vqRueZF1jiOAs2048.png\" alt=\"Look at the Screenshot #2, the right side of it shows json-structure of data for Client entity.\" width=\"976\" height=\"682\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 976px; --smush-placeholder-aspect-ratio: 976\/682;\" \/><p id=\"caption-attachment-1985\" class=\"wp-caption-text\">Look at the Screenshot #2, the right side of it shows json-structure of data for Client entity.<\/p><\/div>\n\nFor Client also accessible different API's responses that will be in case of 1) valid values or 2) wrong values (<em>ClientRegisterResponse<\/em> and <em>ValidationErrorResponse<\/em> respectively, <strong>Screenshot #3<\/strong>) when we try to create a new Client.\n\n<div id=\"attachment_1984\" style=\"width: 758px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-1984\" class=\"size-full wp-image-1984 lazyload\" data-src=\"https:\/\/developex.com\/wp-content\/uploads\/2024\/06\/EcTZAIDynwleDmHdhpcV1CKhYS0vrrkTvzAvPvmds5C-dEsFb-xJ_waJME4N0N3g0kgDcAs2048.png\" alt=\"For Client also accessible different API\u2019s responses that will be in case of 1) valid values or 2) wrong values (ClientRegisterResponse and ValidationErrorResponse respectively, Screenshot #3) when we try to create a new Client.\" width=\"748\" height=\"470\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 748px; --smush-placeholder-aspect-ratio: 748\/470;\" \/><p id=\"caption-attachment-1984\" class=\"wp-caption-text\">For Client also accessible different API's responses that will be in case of 1) valid values or 2) wrong values (ClientRegisterResponse and ValidationErrorResponse respectively, Screenshot #3) when we try to create a new Client.<\/p><\/div>\n\nBut how to check it? Click on data type of Client entity, immediately its structure is copied to the left side of Client viewer and stay editable. Input needing data ('<em>string<\/em>' for string, etc.), press '<strong>Try it<\/strong>' button and see how the API treat the request.\n\nThe behavior of such interactive documentation is strictly the same as behavior of real functions inside the application that works on the real data base. Let's fill the email field with '<em>foo@bar.com<\/em>' value first time and send the request (displayed on the <strong>Listing #1<\/strong>). Then try to send the second request with the same email. Oops, the Swagger Framework says something like this (see <strong>Listing #2<\/strong>):\n<pre>curl \"https:\/\/................\/Swag2.Web\/api\/v2\/geeks\/register\" -H \"Content-Type: application\/json\" -H \"Accept: application\/json\"  -data-binary \"{\"^\n\"  \"\"rate\"\": 0,\"^\n\"  \"\"phone\"\": \"\"0958317000\"\",\"^\n\"  \"\"description\"\": \"\"\"\",\"^\n\"  \"\"offlineLocation\"\": \"\"\"\",\"^\n\"  \"\"isPhoneMobile\"\": true,\"^\n\"  \"\"workOptions\"\": \"\"remote\"\",\"^\n\"  \"\"firstName\"\": \"\"Michael\"\",\"^\n\"  \"\"lastName\"\": \"\"Jackinson\"\",\"^\n\"  \"\"email\"\": \"\"mjack@domain.com\"\",\"^\n\"  \"\"password\"\": \"\"123\"\",\"^\n\"  \"\"confirmPassword\"\": \"\"123\"\",\"^\n\"  \"\"socialProviderName\"\": \"\"string\"\",\"^\n\"  \"\"socialProviderToken\"\": \"\"string\"\"\"^\n\"}\" --compressed\n<\/pre>\n<h5>Listing #1<\/h5>\n<pre>HTTP\/1.1 422 Unprocessable Entity\nCache-Control: no-cache\nPragma: no-cache\nContent-Type: application\/json; charset=utf-8\nExpires: -1\nX-Request-Id: 0dda489f-dafd-479e-80af-0154e0128237\nDate: Thu, 10 Sep 2015 15:57:02 GMT\nContent-Length: 344\n{\n  \"errors\": [\n    {\n      \"field\": \"email\",\n      \"message\": \"Email already exists\",\n      \"code\": \"emailExists\"\n    }\n  ],\n  \"message\": \"Validation failed\"\n}\n<\/pre>\n<h5>Listing #2.<\/h5>\nIn case of correct values we receive something like on the <strong>Screenshot #4<\/strong>.\nThere is nothing like clear code, isn't it?!\n\n<div id=\"attachment_1987\" style=\"width: 695px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-1987\" class=\"size-full wp-image-1987 lazyload\" data-src=\"https:\/\/developex.com\/wp-content\/uploads\/2024\/06\/x4q3l9VbAI3v-pJrwr6wWeNtfTIczW6Wo_-cDvWgD87bv6G_zIWb0gBDBUAZoxyzLljbGws2048.png\" alt=\"In case of correct values we receive something like on the Screenshot #4. There is nothing like clear code, isn\u2019t it?!\" width=\"685\" height=\"740\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 685px; --smush-placeholder-aspect-ratio: 685\/740;\" \/><p id=\"caption-attachment-1987\" class=\"wp-caption-text\">In case of correct values we receive something like on the Screenshot #4.<br \/>There is nothing like clear code, isn\u2019t it?!<\/p><\/div>\n<h3>Code<\/h3>\nFinally, let's look at those part of code where REST API describes new client registration.\n<pre>\/\/ POST api\/v2\/clients\/register\n\/\/\/\n\n\/\/\/ Registers new client\n\/\/\/\n[HttpPost]\n   [Route(\"register\")]\n     [SwaggerResponse(201, \"Created\", typeof(ClientRegisterResponse))]\n\n     [SwaggerResponse(422, \"Validation error\", typeof(ValidationErrorResponse))]\npublic async Task Register([FromBody] ClientRegisterRequest request)\n{\n     ...\n}\n<\/pre>\n<h5>Listing #3.<\/h5>\n[<strong>SwaggerResponse<\/strong>] are attributes that Swagger uses to define how the API should proceed the queries.\nDefinitely, the visible part of User Interface and the code is the small part of all sides of interfaces and codes that the Swagger provides. But we showed the essentials:\n<ol>\n \t<li>clear code for all: developers and customer,<\/li>\n \t<li>ability to check a software deeply and easier, for both testers and customer too.<\/li>\n<\/ol>","protected":false},"excerpt":{"rendered":"<p>Every manager or project owner wants to control development of their software but not all are able to do it. Aiming to make development clear for all participants of project the DevelopEx company has started to use the Swagger Framework \u2014 a tool for REST API representation and interactive documentation. That is especially useful for popular approach where we separate (web) services from front-end. Now the team members are able to view not only front-end of the project, but also play with back-end. And see how does it works inside. For one of our project we use our own API that written with ASP.NET WebApi. Our API implements a set of operations with common entities such as &#8216;Client&#8217;, &#8216;User&#8217;, &#8216;Order&#8217;, &#8216;Certificate&#8217; and so on. And we use Swagger rules to describe the API. Since we did it we&#8217;ve got well described REST API methods that helped both customer, and developers and testers.The project became more clear and more stable. Let&#8217;s look at the User interface and the code for small part of API that is described by Swagger. User Interface Screenshot #1 represents common general view of our API that converted to REST API by Swagger Framework. In our sample we have objects of API such as Certificates, Clients, Dummy, etc. Screenshot #1 &#8211; common general view of our API that converted to REST API by Swagger Framework Let&#8217;s see how both DevelopEx&#8217;s customer and our testers could estimate functionality the Client API. Look at the Screenshot #2, the right side of it shows JSON structure of data for Client entity. Look at the Screenshot #2, the right side of it shows json-structure of data for Client entity. For Client also accessible different API&#8217;s responses that will be in case of 1) valid values or 2) wrong values (ClientRegisterResponse and ValidationErrorResponse respectively, Screenshot #3) when we try to create a new Client. For Client also accessible different API&#8217;s responses that will be in case of 1) valid values or 2) wrong values (ClientRegisterResponse and ValidationErrorResponse respectively, Screenshot #3) when we try to create a new Client. But how to check it? Click on data type of Client entity, immediately its structure is copied to the left side of Client viewer and stay editable. Input needing data (&#8216;string&#8217; for string, etc.), press &#8216;Try it&#8217; button and see how the API treat the request. The behavior of such interactive documentation is strictly the same as behavior of real functions inside the application that works on the real data base. Let&#8217;s fill the email field with &#8216;foo@bar.com&#8217; value first time and send the request (displayed on the Listing #1). Then try to send the second request with the same email. Oops, the Swagger Framework says something like this (see Listing #2): curl &#8220;https:\/\/&#8230;&#8230;&#8230;&#8230;&#8230;.\/Swag2.Web\/api\/v2\/geeks\/register&#8221; -H &#8220;Content-Type: application\/json&#8221; -H &#8220;Accept: application\/json&#8221; -data-binary &#8220;{&#8220;^ &#8221; &#8220;&#8221;rate&#8221;&#8221;: 0,&#8221;^ &#8221; &#8220;&#8221;phone&#8221;&#8221;: &#8220;&#8221;0958317000&#8243;&#8221;,&#8221;^ &#8221; &#8220;&#8221;description&#8221;&#8221;: &#8220;&#8221;&#8221;&#8221;,&#8221;^ &#8221; &#8220;&#8221;offlineLocation&#8221;&#8221;: &#8220;&#8221;&#8221;&#8221;,&#8221;^ &#8221; &#8220;&#8221;isPhoneMobile&#8221;&#8221;: true,&#8221;^ &#8221; &#8220;&#8221;workOptions&#8221;&#8221;: &#8220;&#8221;remote&#8221;&#8221;,&#8221;^ &#8221; &#8220;&#8221;firstName&#8221;&#8221;: &#8220;&#8221;Michael&#8221;&#8221;,&#8221;^ &#8221; &#8220;&#8221;lastName&#8221;&#8221;: &#8220;&#8221;Jackinson&#8221;&#8221;,&#8221;^ &#8221; &#8220;&#8221;email&#8221;&#8221;: &#8220;&#8221;mjack@domain.com&#8221;&#8221;,&#8221;^ &#8221; &#8220;&#8221;password&#8221;&#8221;: &#8220;&#8221;123&#8243;&#8221;,&#8221;^ &#8221; &#8220;&#8221;confirmPassword&#8221;&#8221;: &#8220;&#8221;123&#8243;&#8221;,&#8221;^ &#8221; &#8220;&#8221;socialProviderName&#8221;&#8221;: &#8220;&#8221;string&#8221;&#8221;,&#8221;^ &#8221; &#8220;&#8221;socialProviderToken&#8221;&#8221;: &#8220;&#8221;string&#8221;&#8221;&#8221;^ &#8220;}&#8221; &#8211;compressed Listing #1 HTTP\/1.1 422 Unprocessable Entity Cache-Control: no-cache Pragma: no-cache Content-Type: application\/json; charset=utf-8 Expires: -1 X-Request-Id: 0dda489f-dafd-479e-80af-0154e0128237 Date: Thu, 10 Sep 2015 15:57:02 GMT Content-Length: 344 { &#8220;errors&#8221;: [ { &#8220;field&#8221;: &#8220;email&#8221;, &#8220;message&#8221;: &#8220;Email already exists&#8221;, &#8220;code&#8221;: &#8220;emailExists&#8221; } ], &#8220;message&#8221;: &#8220;Validation failed&#8221; } Listing #2. In case of correct values we receive something like on the Screenshot #4. There is nothing like clear code, isn&#8217;t it?! In case of correct values we receive something like on the Screenshot #4.There is nothing like clear code, isn\u2019t it?! Code Finally, let&#8217;s look at those part of code where REST API describes new client registration. \/\/ POST api\/v2\/clients\/register \/\/\/ \/\/\/ Registers new client \/\/\/ [HttpPost] [Route(&#8220;register&#8221;)] [SwaggerResponse(201, &#8220;Created&#8221;, typeof(ClientRegisterResponse))] [SwaggerResponse(422, &#8220;Validation error&#8221;, typeof(ValidationErrorResponse))] public async Task Register([FromBody] ClientRegisterRequest request) { &#8230; } Listing #3. [SwaggerResponse] are attributes that Swagger uses to define how the API should proceed the queries. Definitely, the visible part of User Interface and the code is the small part of all sides of interfaces and codes that the Swagger provides. But we showed the essentials: clear code for all: developers and customer, ability to check a software deeply and easier, for both testers and customer too.<\/p>\n","protected":false},"author":4,"featured_media":21403,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1175,1170],"tags":[334,150,622,623,624,563,625,626],"class_list":["post-1979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all-categories","category-technical-implementation","tag-api","tag-asp-net","tag-back-end","tag-framework","tag-front-end","tag-rest","tag-rest-api","tag-swagger"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/developex.com\/wp-json\/wp\/v2\/posts\/1979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developex.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developex.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developex.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/developex.com\/wp-json\/wp\/v2\/comments?post=1979"}],"version-history":[{"count":1,"href":"https:\/\/developex.com\/wp-json\/wp\/v2\/posts\/1979\/revisions"}],"predecessor-version":[{"id":30204,"href":"https:\/\/developex.com\/wp-json\/wp\/v2\/posts\/1979\/revisions\/30204"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/developex.com\/wp-json\/wp\/v2\/media\/21403"}],"wp:attachment":[{"href":"https:\/\/developex.com\/wp-json\/wp\/v2\/media?parent=1979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developex.com\/wp-json\/wp\/v2\/categories?post=1979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developex.com\/wp-json\/wp\/v2\/tags?post=1979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}