DEV Community

Mubarak
Mubarak

Posted on

Streamline Frontend API Development with Apidog

As a front-end developer, I often encounter situations where endpoints are already designed, yet the backend isn't finished. Waiting for the backend to complete these tasks would be a huge time drain and unnecessarily extend the development cycle. To address this issue, I have been on the lookout for tools that empower front-end developers to independently use Mock services, allowing simultaneous development across front and back ends.

After experimenting with several popular Mock tools, I have chosen Apidog as a reliable aide in my daily work. Although Mocking is just one of the many useful features of Apidog, its exceptional performance in this arena compels me to share my experience with everyone.

In this article, I will provide a detailed introduction to Apidog's Mock functionality and how to use it. Through my experience, I hope to offer other developers valuable insights to improve work efficiency and ensure a smoother development process.

Preparing Ahead: Importing Documents into Apidog

Before we delve into the Mock functionality, let's explore Apidog's API document import feature, another significant reason I am attracted to Apidog. Apidog supports 15 different data formats, allowing easy import by simply dragging and dropping files. For long-term Apidog users, automatic scheduled imports are available, offering another user-friendly feature that I intend to cover in detail in future discussions.

Most of the documentation I worked with previously used Swagger, and importing it is as simple as pasting the Swagger data URL, making the process incredibly smooth.

Importing Documents into Apidog

After dragging files or pasting the URL as I did, an "Import Preview" window appears, showcasing all endpoints and use cases in a clear hierarchical structure, making it easy to grasp the imported content. Impressively, Apidog can import not just endpoint information but also Schemas and Environments, seamlessly integrating them into the platform, significantly boosting work efficiency and simplifying API document management.

Apidog takes it a step further by offering extensive migration settings on the right side of the preview window. The "overwrite specific fields" option when dealing with identical endpoints is what I frequently use, perfectly accommodating various complex update scenarios.

Import Preview

Once imported, we can start exploring the Mock functionality.

Zero Configuration: Automatically Mock Data Through Field Names

In my opinion, Apidog's intelligent Mock feature is a developer's best assistant. Its core advantage lies in simplifying the workflow: by merely defining API specifications, Apidog automatically generates the corresponding Mock data without the need for tedious additional configurations. This capability stems from Apidog’s deep understanding of actual development needs. Considering that most API responses include common data types like names, phone numbers, timestamps, emails, and addresses, Apidog has designed a comprehensive set of built-in matching rules. These rules intelligently recognize attribute types and names to generate appropriate simulated data.

For instance, let's consider an endpoint for user orders. In this scenario, I needed the endpoint to return the ordering user's personal information. After defining the return data's names and types, without any other configuration, Apidog could automatically generate mock data that felt genuinely realistic, including authentic-looking images. This smart Mock functionality enables me to quickly proceed with endpoint integration, page development, and functional testing, greatly simplifying my workflow and significantly benefiting my daily tasks!

Automatically Mock Data Through Field Names

Simple Configuration: Visual Selection of Mock Rules

Built-in Faker.js Rules

Naturally, while Apidog already matches rules to generate Mock data based on field names, some fields may not generate data that meets actual needs due to unclear name semantics. Here, Apidog's flexibility becomes crucial. It integrates the Faker.js library, allowing users to directly use its syntax and rules to customize data.

Built-in Faker.js Rules

Here's how you can do it:

  1. Select rules directly from the dropdown : Apidog provides a rich set of pre-set rules in the Mock column's dropdown, enabling easy selection of the most suitable option.
  2. Use the input box for fuzzy rule searches : If you're certain about the required data type, directly input the keyword in the Mock box. Apidog will instantaneously display all related Mock rules, helping you quickly find the needed option.

For example, if I need to return a user's full name, I enter "name" in the Mock field to see all Mock rules related to "name," where I can effortlessly select the "fullName" option. I appreciate this dynamic interaction, as Apidog successfully marries powerful Mock capabilities with a simple and intuitive user experience, making the API process both efficient and enjoyable.

Select rules directly from the dropdown

Advanced Settings for Mock Rules

For more advanced settings of field attributes, click the "Advanced Settings" button next to the data type. In the popup window, you can set more detailed properties like maximum and minimum values, enumerations, and more.

For instance, if the "status" field currently returns an irrelevant string, but I need it to return one of "available," "sold," or "pending," there’s no need to manually write rules. Just use Apidog's aesthetically pleasing visual interface to efficiently complete the task:

  • Open the "Advanced Settings" for the "status" field.
  • Toggle on the "Enumeration" button.
  • Input the three state values.
  • Save the settings.

After this, rerunning the endpoint will show the "status" field returning a "sold" value from these pre-set states.

Advanced Settings for Mock Rules

For developers who prefer coding directly, Apidog also offers options to write rules directly in the JSON schema, allowing precise definition of Mock data generation rules according to personal preferences or project-specific needs.

Custom Mock Rules

Beyond the rich built-in rules, Apidog also allows users to create custom rules to meet specific business needs. In the "Mock Settings," the "Smart Mock Matching Rules" module enables these custom operations.

Let's take a pet store customer ID as an example:

  • Rule requirement : ID should start with "PM" followed by a random 12-digit number.
  • Rule type : Select "String" type.
  • Matching Rule : Set to "id" (so all fields named id will use this rule).
  • Mock Rule :
  1. Double-click the edit box to display the Dynamic Value popup.
  2. In "String," choose "numeric."
  3. Click "length" and set it to 12.
  4. Click Insert to ensure the generated syntax is added to the edit box.
  5. Add "PM" before this syntax.

The final rule will be: PM+{{$string.numeric(length=12)}}.

After saving, when we initiate a request containing the id field, Apidog automatically generates an ID conforming to the defined format, such as "PM077870170662."

Custom Mock Rules

Now you'll see the endpoint returns data closely resembling real-world scenarios.

Extracting Assertions from Response

While discussing this, I must mention how Apidog's product team genuinely focuses on user experience. Not only do they listen to user feedback, but they also swiftly incorporate it into practical functionalities.

When hovering my mouse over the id value returned after setting up custom Mock rules, two icons appear on the right: "Assertion" and "Extract Variable." I previously provided feedback about the repetitive task of manually writing JSONPath expressions each time I set assertions. To my delight, the latest version of Apidog introduced a feature to directly set assertions from the response, directly addressing my prior concern and easing the assertion setup process. They even considered the case of extracting variables directly from the response.

As a developer using API testing tools, I genuinely appreciate Apidog’s team for these meticulous improvements. Though seemingly minor, such enhancements can significantly elevate efficiency and experience in daily work. This is precisely why Apidog stands out among numerous API development tools, making it one of my top choices.

Apidog's Exclusive Feature "Dynamic Value"

In our earlier discussion on custom Mock rules, we briefly encountered the "Data Generator" feature of Apidog's "Dynamic Value." The "Data Generator" offers a vast and detailed classification of common data types, including:

  • Date/Time : Advanced time control supporting various date and time formats, including time offsets and timezone handling for complex time operations.
  • Utility Functions : A variety of processing functions like regex, increments, enumerations, and more for data generation.
  • Airlines : Data for generating airline names and codes.
  • Animals : Mock data for animal names and breeds.
  • Business : Business-related data such as product categories, materials, prices, etc.
  • Companies : Data related to company names and slogans.
  • Databases : Data generation for database table names, field names, etc.
  • Finance : Generating financial-related data like credit card numbers, amounts, etc.
  • Git : Git-related data, including branch names and commit messages.
  • Music : Music-related data such as song names and artist names.
  • Science : Science-related data like chemical elements, unit symbols, etc.
  • System : Generation of system-related information like file paths and filenames.
  • Vehicles : Data generation for vehicle brands, manufacturers, etc.

The timestamp feature is what I use the most, as it allows easy configuration for date offsets, formats, and timezones, catering to various complex time scenarios.

Dynamic Value of The timestamp

Mocking data is just one aspect of Dynamic Value's capabilities; it can also read variables, including global and environment variables, allowing for the direct use of data results from preceding steps during automated testing, which is truly convenient.

Advanced Configuration: Customizing Mock Expectations

Despite intelligent Mocking satisfying most daily simulation needs, certain scenarios demand more precise and specific response control. This is where Apidog's "Mock Expectations" feature comes into play, allowing specific data returns based on different request parameters.

For instance, I need to return different data based on varying tags in the Query parameter:

  • When Query parameter tags = 1, return a JSON object containing details of available pets.
  • When Query parameter tags = 2, return a JSON object with sold pet information.
  • When Query parameter tags = 4, return a JSON object containing error messages.

This feature allows precise control over different response types and status codes for each scenario, almost simulating a complete backend server!

Customizing Mock Expectations

Expert-level Configuration: Custom Mock Scripts

For those with more complex scenario needs, Apidog also provides custom script functionalities.

However, for me, intelligent Mocking and Mock Expectations cover most scenarios I encounter in daily work. Hence, I rarely use it. If you're interested in custom scripts, I highly recommend checking out Apidog's official help documentation, where you'll find detailed script syntax introductions and many ready-made script examples to help you get started quickly and explore more advanced Mock techniques. I hope you'll find them helpful.

Custom Mock Scripts

Apidog's Diverse Mock Server Options

Understanding the diverse needs of different teams and projects, Apidog offers three distinct types of Mock Servers. Each type has its unique advantages, catering to various use cases. Let’s delve into each option:

  • Local Mock : Runs on the user's own computer without requiring internet connectivity. Each team member can independently maintain their Mock data. However, it becomes unavailable when the computer is off.
  • Cloud Mock : Hosted by Apidog's cloud service, providing a fixed access address that other team members can use to access the Cloud Mock Server. It suits collaborative scenarios within a team.
  • Self-Hosted Mock : Ideal for scenarios needing Mock services within an intranet or proprietary network, where requests are sent to the Runner's server and returned with Mock results. It suits teams with high data security requirements.

Whether you're an independent developer, a small start-up, or a large enterprise, Apidog offers the most suitable Mock solutions for you.

Conclusion

Apidog’s comprehensive Mock functionality suite is the most complete and user-friendly API Mock tool I've encountered, easily meeting both simple and complex needs. Not only does it enhance my work efficiency, but it also makes API development and testing more flexible and engaging. Plus, Apidog's product team is user-centric, focusing not just on feature completeness but also on usability and efficiency. Their continued improvements and rapid iterations are hallmarks of excellent products.

Apidog offers far more than just outstanding Mock functionality; as an integrated API development platform, it covers the entire API development lifecycle. If you haven't tried it yet, I strongly encourage you to explore Apidog's features — they might completely transform your API development approach.

Top comments (0)