-
-
Notifications
You must be signed in to change notification settings - Fork 230
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
11471ab
commit 0243f29
Showing
11 changed files
with
127 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
--- | ||
title: "Understanding Swagger using JSON" | ||
date: "2024-02-14" | ||
tags: | ||
- Fundamentals | ||
type: Engineering | ||
cover: /img/posts/2024/understanding-swagger-using-json/cover.webp | ||
authors: | ||
- name: Abhishek Jaiswal | ||
photo: /img/avatars/abhishekJaiswal.webp | ||
twitter: abhishek__iiit | ||
excerpt: "Unlock the Power of Swagger: Mastering JSON for Comprehensive API Documentation and Development." | ||
--- | ||
|
||
Whether you're new to the concept of combining Swagger with JSON Schema or you're already familiar with it, this article has something valuable to offer, ensuring that you'll gain new insights and knowledge. | ||
|
||
By the end of this article, you will have: | ||
|
||
- Introduction to Swagger | ||
- Understanding of Swagger tool framework | ||
- Generating Swagger Documentation from JSON | ||
|
||
## Introduction to Swagger | ||
[Swagger](https://swagger.io/), now recognized as the OpenAPI Initiative under the Linux Foundation's umbrella, is an open-source API testing framework. It enables developers and testers to describe APIs using a user-friendly language that is accessible and comprehensible, even for those with limited source code expertise. | ||
|
||
Think of Swagger like a blueprint for a house. You have the freedom to choose the building materials, but you must stay within the blueprint's guidelines. | ||
|
||
Swagger offers several advantages over other frameworks: | ||
|
||
1. It's understandable for both developers and non-developers. Product managers, partners, and potential clients can contribute to API design because they can visualize it clearly in the user-friendly interface. | ||
2. It's readable by humans and machines. This means you can share the documentation internally with your team and also automate API-related processes using the same documentation. | ||
3. It's easily customizable, which is beneficial for testing and troubleshooting API issues. | ||
|
||
 | ||
|
||
## Swagger tool framework | ||
Swagger provides a set of great tools for designing APIs and improving the work with web services: | ||
|
||
**Swagger Editor** – enables us to write API documentation, design and describe new APIs, and edit the existing ones. The first open-source editor visually renders OAS/Swagger’s definition with error handling and real-time feedback. | ||
|
||
 | ||
*Image Courtesy: https://swagger.io/docs/specification/basic-structure/* | ||
|
||
**Swagger Codegen** – allows developers to generate client library code for different platforms. As the tool helps facilitate the dev process by generating server stubs and client SDKs, software engineers get the ability to faster build your API and better focus on its adoption. | ||
|
||
 | ||
*Image Courtesy: https://swagger.io/tools/swagger-editor/* | ||
|
||
**Swagger UI** – allows engineers to get self-generated documentation for different platforms. Swagger UI is a fully customizable tool that can be hosted in any environment. A great plus is that it enables developers to save a lot of time for API documentation. | ||
|
||
 | ||
*Image Courtesy: https://connexion.readthedocs.io/en/latest/swagger_ui.html* | ||
|
||
## Swagger Documentation from JSON | ||
#### Step 1: Acquiring/Generating the JSON Specification | ||
The first step is to define your API using a JSON or YAML specification file. This file acts as a blueprint, outlining all the essential details about your API. It will include information like the different access points (endpoints), the format for sending requests and receiving responses, and how users can authenticate themselves with your API. | ||
|
||
To illustrate this concept, we'll be working with a simplified JSON specification for a Inventory Management API. | ||
|
||
```json | ||
{ | ||
"swagger": "2.0", | ||
"info": { | ||
"title": "Inventory Management API", | ||
"version": "1.1.0" | ||
}, | ||
"paths": { | ||
"/products": { | ||
"get": { | ||
"summary": "Get a list of products", | ||
"responses": { | ||
"200": { | ||
"description": "Successful response", | ||
"schema": { | ||
"type": "array", | ||
"items": { | ||
"type": "object", | ||
"properties": { | ||
"name": { | ||
"type": "string" | ||
}, | ||
"id": { | ||
"type": "integer" | ||
} | ||
} | ||
} | ||
} | ||
} | ||
} | ||
} | ||
} | ||
} | ||
} | ||
``` | ||
|
||
#### Step 2: Accessing the Swagger Editor | ||
Bring your JSON specification to life! Tools like Swagger Editor can easily import it and translate it into clear, user-friendly Swagger documentation. Just open [Swagger Editor](https://editor-next.swagger.io/) in your web browser and get started. | ||
|
||
 | ||
|
||
#### Step 3: Importing the JSON Specification | ||
In Swagger Editor, go to "File" and choose "Import File." Then, select the JSON file you created in step 1. | ||
|
||
 | ||
|
||
#### Step 4: Verifying and previewing the API | ||
Once you import your JSON, Swagger Editor will give it a thumbs-up (or point out any problems) to make sure it follows the Swagger format. If there are any bumps in the road, the editor will help you fix them. Take a look and make any corrections to keep your documentation on point. | ||
|
||
 | ||
|
||
#### Step 5: Reviewing the API documentation | ||
Great! Now you have a foundation of Swagger documentation generated from your JSON. | ||
|
||
Use Swagger Editor to make your API documentation shine! Add descriptions, examples, and more to make it crystal clear and user-friendly. | ||
|
||
## Next steps / Further Reading | ||
With this newfound knowledge of Swagger and JSON Schema, you can take your API development to the next level! Here are some exciting possibilities: | ||
|
||
- Deepen your Swagger and JSON Schema expertise: Explore the official [Swagger documentation](https://swagger.io/docs/) to delve deeper into advanced functionalities and explore the entire suite of tools. Additionally, research [JSON Schema](https://json-schema.org/) specifications to become a master of data validation. | ||
|
||
- Design and document your own API with JSON Schema validation: Put your learnings into practice! Leverage Swagger Editor and JSON Schema to design and document your personal or professional APIs, making them clear, accessible, and well-structured for users. | ||
|
||
- Integrate Swagger and JSON Schema into your workflow: If you're part of a development team, consider incorporating Swagger and JSON Schema into your existing workflow for seamless API development, data validation, and clear documentation. | ||
|
||
By embracing Swagger and JSON Schema, you can streamline your API development process, enhance communication with developers and users, and ultimately create well-defined, user-friendly, and robust APIs. | ||
|
||
Photo by <a href="https://www.pexels.com/photo/programmer-holding-a-paper-cutout-with-an-api-quote-11035364/">RealToughCandy.com</a> from Pexels. |
Binary file not shown.
Binary file not shown.
Binary file added
BIN
+17.4 KB
public/img/posts/2024/understanding-swagger-using-json/swagger-architecture.webp
Binary file not shown.
Binary file added
BIN
+20.1 KB
public/img/posts/2024/understanding-swagger-using-json/swagger-codegen.webp
Binary file not shown.
Binary file added
BIN
+87 KB
public/img/posts/2024/understanding-swagger-using-json/swagger-editor.webp
Binary file not shown.
Binary file added
BIN
+31.4 KB
public/img/posts/2024/understanding-swagger-using-json/swagger-step2.webp
Binary file not shown.
Binary file added
BIN
+35.5 KB
public/img/posts/2024/understanding-swagger-using-json/swagger-step3.webp
Binary file not shown.
Binary file added
BIN
+93.2 KB
public/img/posts/2024/understanding-swagger-using-json/swagger-step4.webp
Binary file not shown.
Binary file not shown.
Binary file not shown.