<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Mario Dias</title>
    <description>The latest articles on DEV Community by Mario Dias (@devxme).</description>
    <link>https://dev.to/devxme</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1169712%2F9ed24787-8a5d-417c-8c18-810f9af593d0.jpg</url>
      <title>DEV Community: Mario Dias</title>
      <link>https://dev.to/devxme</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/devxme"/>
    <language>en</language>
    <item>
      <title>The Importance of Webhooks in APIs: Best Practices for Reliable and Secure Event Notifications</title>
      <dc:creator>Mario Dias</dc:creator>
      <pubDate>Fri, 25 Apr 2025 13:52:50 +0000</pubDate>
      <link>https://dev.to/devxme/the-importance-of-webhooks-in-apis-best-practices-for-reliable-and-secure-event-notifications-549i</link>
      <guid>https://dev.to/devxme/the-importance-of-webhooks-in-apis-best-practices-for-reliable-and-secure-event-notifications-549i</guid>
      <description>&lt;p&gt;As APIs become more central to how systems communicate and integrate, the need for real-time notifications grows exponentially. Polling an API repeatedly to check for updates is inefficient, costly, and rarely scalable. That’s where webhooks come in — a simple yet powerful mechanism that allows APIs to proactively notify external systems when specific events occur.&lt;/p&gt;

&lt;p&gt;In this article, I’ll explore why webhooks are essential in modern API design, and dive into a set of best practices to ensure they are implemented reliably and securely.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Webhooks Matter
&lt;/h2&gt;

&lt;p&gt;Webhooks enable event-driven architectures, meaning clients don’t need to constantly check if something has changed. Instead, they receive a push notification as soon as a relevant event occurs.&lt;/p&gt;

&lt;p&gt;Some key benefits include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reduced latency&lt;/strong&gt;: Systems react instantly to events.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Efficiency&lt;/strong&gt;: No need for constant API polling.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Improved user experience&lt;/strong&gt;: Systems can provide real-time updates to end users.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But to deliver these benefits consistently, webhooks must be built with resilience and flexibility in mind.&lt;/p&gt;

&lt;h2&gt;
  
  
  Best Practices for Implementing Webhooks
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Notify on Every Status Change&lt;/strong&gt;&lt;br&gt;
APIs should emit a webhook for every change of status in a resource. Whether it’s an order being shipped, a payment being confirmed, or a transfer being completed, clients must be kept in the loop with accurate and timely updates.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Implement a Clear Retry Policy&lt;/strong&gt;&lt;br&gt;
Failures can and will happen. If the receiving system doesn’t respond with a 2xx HTTP status, the originating system must retry the webhook delivery. Retries should follow an exponential backoff strategy to avoid flooding the recipient.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Notify Users After Exhausting Retries&lt;/strong&gt;&lt;br&gt;
If, after several retry attempts, the destination still does not return a 2xx response, the system should stop trying and send an email to the client, explaining:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The specific event that failed&lt;/li&gt;
&lt;li&gt;That the webhook won't be retried again&lt;/li&gt;
&lt;li&gt;Instructions on how to manually recover from the failure&lt;/li&gt;
&lt;li&gt;This promotes transparency and avoids silent failures.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Allow Manual and Bulk Redelivery&lt;/strong&gt;&lt;br&gt;
Clients should be able to manually trigger redelivery of failed webhooks. Even better, systems should provide an interface or API to resend events in bulk, helping with large-scale recovery efforts or testing scenarios.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Send Only Necessary Data&lt;/strong&gt;&lt;br&gt;
To minimize payload size and reduce the risk of data leakage, webhook payloads should contain only the essential information required by the client to handle the event. If more data is needed, the client can fetch it using the event’s associated resource ID.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Use Signatures to Verify Authenticity&lt;/strong&gt;&lt;br&gt;
Security is paramount. Every webhook should include a signature header, generated using a secret known only to the API provider and the client. Clients should validate the signature to ensure the webhook is genuinely from the source and hasn’t been tampered with.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Allow Clients to Register Webhook URLs via API&lt;/strong&gt;&lt;br&gt;
APIs should allow clients to programmatically register their webhook URLs, along with custom headers if needed. This makes automation easier and helps manage environments like staging and production more effectively.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Enable Granular Event Subscription&lt;/strong&gt;&lt;br&gt;
Not every client wants to receive every single event. APIs should support granular subscriptions, allowing clients to specify the resources and statuses they care about. For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ORDERS.*  
PAYMENTS.PAID  
PAYMENTS.CANCELED  
TRANSFERS.COMPLETED
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This level of control reduces noise and allows clients to tailor event consumption to their specific use cases.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;br&gt;
Webhooks transform APIs from passive data providers into active communicators. But with great power comes great responsibility — poor implementations can lead to missed events, security vulnerabilities, and frustrated clients.&lt;/p&gt;

&lt;p&gt;By following the best practices outlined above, API providers can ensure that their webhook systems are reliable, secure, and developer-friendly, ultimately leading to better integrations and happier users.&lt;/p&gt;

&lt;p&gt;Photo by &lt;a href="https://unsplash.com/@brett_jordan?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash" rel="noopener noreferrer"&gt;Brett Jordan&lt;/a&gt; on &lt;a href="https://unsplash.com/photos/green-and-white-apple-logo-jdm0UlDkOEI?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash" rel="noopener noreferrer"&gt;Unsplash&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>API as a Project vs. API as a Product</title>
      <dc:creator>Mario Dias</dc:creator>
      <pubDate>Thu, 27 Mar 2025 14:41:25 +0000</pubDate>
      <link>https://dev.to/devxme/api-as-a-project-vs-api-as-a-product-4gbe</link>
      <guid>https://dev.to/devxme/api-as-a-project-vs-api-as-a-product-4gbe</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/devxme" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1169712%2F9ed24787-8a5d-417c-8c18-810f9af593d0.jpg" alt="devxme"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/devxme/api-as-a-project-vs-api-as-a-product-why-companies-should-treat-their-apis-as-products-14k9" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;API as a Project vs. API as a Product: Why Companies Should Treat Their APIs as Products&lt;/h2&gt;
      &lt;h3&gt;Mario Dias ・ Mar 27&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#api&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#devrel&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#product&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>api</category>
      <category>devrel</category>
      <category>product</category>
    </item>
    <item>
      <title>API as a Project vs. API as a Product: Why Companies Should Treat Their APIs as Products</title>
      <dc:creator>Mario Dias</dc:creator>
      <pubDate>Thu, 27 Mar 2025 14:40:34 +0000</pubDate>
      <link>https://dev.to/devxme/api-as-a-project-vs-api-as-a-product-why-companies-should-treat-their-apis-as-products-14k9</link>
      <guid>https://dev.to/devxme/api-as-a-project-vs-api-as-a-product-why-companies-should-treat-their-apis-as-products-14k9</guid>
      <description>&lt;p&gt;In the rapidly evolving world of technology, APIs (Application Programming Interfaces) have become critical enablers of digital transformation. However, many companies still treat their APIs as projects rather than products. This fundamental difference in perspective can significantly impact a company's ability to scale, integrate seamlessly with partners, and deliver a superior developer experience (Dev-X). &lt;/p&gt;

&lt;p&gt;In this article, we will explore the key differences between "API as a Project" and "API as a Product" and highlight why businesses should adopt a product-oriented approach to API development.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;The Pitfalls of API as a Project&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;When APIs are treated as projects, they are typically designed to solve a specific, short-term problem. While this approach might provide a quick fix, it leads to several challenges in the long run:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Lack of Standardization&lt;/strong&gt; – APIs developed as projects often do not follow a unified standard across the company, making integrations inconsistent and cumbersome for external developers and partners.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Limited Scalability&lt;/strong&gt; – Since project-based APIs do not have clear guidelines for maintenance and growth, they struggle to evolve and support long-term business goals.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Absence of Governance&lt;/strong&gt; – There are no established governance mechanisms to ensure security, compliance, and best practices, leading to fragmented and difficult-to-maintain solutions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;No Continuous Improvement&lt;/strong&gt; – These APIs are typically built to fulfill immediate needs, without a structured feedback loop to drive iterative enhancements.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;The Advantages of API as a Product&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;On the other hand, treating APIs as products means designing them with a user-centric mindset, ensuring they are well-governed, scalable, and continuously improved. Here are the key benefits of this approach:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;User-Centric Design&lt;/strong&gt; – APIs are built with developers in mind, focusing on usability, clear documentation, and intuitive onboarding experiences.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Feedback Loops&lt;/strong&gt; – Product APIs incorporate mechanisms to gather insights from users, enabling iterative improvements and optimizations.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Strategic Business Integration&lt;/strong&gt; – APIs are not just technical artifacts but an integral part of the company's strategy, helping to drive revenue and expand market reach.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Continuous Enhancements&lt;/strong&gt; – With a product mindset, APIs are regularly updated to meet evolving customer needs and industry trends.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Enhanced Developer Experience (Dev-X)&lt;/strong&gt; – APIs are designed to be reusable, discoverable, and well-documented, making integration seamless and efficient for developers.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Key Attributes of API as a Product&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Companies that adopt the API-as-a-product approach ensure that their APIs share the following core values:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Important Asset&lt;/strong&gt; – APIs are considered valuable digital assets that contribute to the company’s growth.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Value Proposition&lt;/strong&gt; – APIs provide clear and measurable value to developers and businesses.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Governance&lt;/strong&gt; – They follow well-defined policies for security, versioning, and compliance.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Reusable&lt;/strong&gt; – APIs are designed for reuse across multiple use cases, reducing redundancy.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Dev-X Focused&lt;/strong&gt; – A superior developer experience is a priority, ensuring APIs are easy to integrate and use effectively.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Conclusion&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;For companies looking to scale their API ecosystem and improve integration with partners, shifting from an API-as-a-project mindset to an API-as-a-product approach is crucial. By treating APIs as products, businesses can ensure standardization, enhance developer experience, and drive continuous improvements that align with their long-term strategic goals. &lt;/p&gt;

&lt;p&gt;The future of successful digital platforms depends on APIs that are not just built but thoughtfully designed, governed, and nurtured as valuable products.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Photo by &lt;a href="https://unsplash.com/@patrickperkins?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash" rel="noopener noreferrer"&gt;Patrick Perkins&lt;/a&gt; on &lt;a href="https://unsplash.com/photos/assorted-notepads-ETRPjvb0KM0?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash" rel="noopener noreferrer"&gt;Unsplash&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>api</category>
      <category>devrel</category>
      <category>product</category>
    </item>
    <item>
      <title>HubSpot offers a powerful platform for creating user interfaces (UI) and serverless functions using React, allowing users to develop highly customizable pages and forms directly within the CRM itself.</title>
      <dc:creator>Mario Dias</dc:creator>
      <pubDate>Thu, 19 Dec 2024 16:21:36 +0000</pubDate>
      <link>https://dev.to/devxme/hubspot-offers-a-powerful-platform-for-creating-user-interfaces-ui-and-serverless-functions-using-548h</link>
      <guid>https://dev.to/devxme/hubspot-offers-a-powerful-platform-for-creating-user-interfaces-ui-and-serverless-functions-using-548h</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/devxme" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1169712%2F9ed24787-8a5d-417c-8c18-810f9af593d0.jpg" alt="devxme"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="/devxme/a-guide-to-creating-a-serverless-function-for-fetching-external-data-on-hubspot-5dj0" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;A Guide to Creating a Serverless Function for Fetching External Data on Hubspot&lt;/h2&gt;
      &lt;h3&gt;Mario Dias ・ Dec 19&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#hubspot&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#crm&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#serverless&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#api&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>react</category>
      <category>serverless</category>
      <category>ui</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>A Guide to Creating a Serverless Function for Fetching External Data on Hubspot</title>
      <dc:creator>Mario Dias</dc:creator>
      <pubDate>Thu, 19 Dec 2024 16:20:25 +0000</pubDate>
      <link>https://dev.to/devxme/a-guide-to-creating-a-serverless-function-for-fetching-external-data-on-hubspot-5dj0</link>
      <guid>https://dev.to/devxme/a-guide-to-creating-a-serverless-function-for-fetching-external-data-on-hubspot-5dj0</guid>
      <description>&lt;p&gt;HubSpot offers a powerful platform for creating user interfaces (UI) and serverless functions using React, allowing users to develop highly customizable pages and forms directly within the CRM itself. &lt;/p&gt;

&lt;p&gt;This approach enables the creation of tailor-made solutions without the need to configure additional servers or infrastructure. Using React provides a smooth and interactive experience, making it easy to customize elements efficiently. &lt;/p&gt;

&lt;p&gt;This integration offers greater flexibility and control, allowing marketing, sales, and customer service professionals to create pages that meet their exact needs, all within the HubSpot environment. &lt;/p&gt;

&lt;p&gt;For this project, the prerequisites are having a HubSpot developer account and a solid understanding of React, JavaScript, and serverless functions. These skills are essential for building and customizing pages and forms within the HubSpot CRM. &lt;/p&gt;

&lt;p&gt;To get started, HubSpot provides a detailed quickstart guide that will walk you through the process of setting up your development environment and building your first private app. You can access the guide &lt;a href="https://developers.hubspot.com/docs/guides/crm/private-apps/quickstart" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;Serverless functions are an efficient way to handle lightweight backend logic without managing a full server infrastructure. In this guide, we'll create a serverless function that fetches commercial group information based on a CNPJ (Cadastro Nacional da Pessoa Jurídica, Brazil's company registration number).&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Define the Serverless Function in &lt;code&gt;serverless.json&lt;/code&gt; file in your project
&lt;/h2&gt;

&lt;p&gt;To integrate the function into your application, you first need to register it in the &lt;code&gt;serverless.json&lt;/code&gt; file. This file informs your system about available serverless functions and where to find their implementations. This file is on app.functions folder.&lt;/p&gt;

&lt;p&gt;Add the following configuration to your &lt;code&gt;serverless.json&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"handleGetCommercialGroupFunc"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"file"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"get-commercial-group.js"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"secrets"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This entry maps the function name &lt;code&gt;handleGetCommercialGroupFunc&lt;/code&gt; to the file &lt;code&gt;get-commercial-group.js&lt;/code&gt;, which we will create next.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 2: Create the Serverless Function
&lt;/h2&gt;

&lt;p&gt;In app.functions folder, create a file named &lt;code&gt;get-commercial-group.js&lt;/code&gt; and implement the following logic:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;exports&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;main&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;cnpj&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;parameters&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;cnpj&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;400&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;CNPJ is required.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Replace with your actual API URL&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;apiUrl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`https://YOUR-API-ENDPOINT?cnpj=&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nf"&gt;encodeURIComponent&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cnpj&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="c1"&gt;// Make the API request&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;apiResponse&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;apiUrl&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;method&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;GET&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;headers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Content-Type&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;application/json&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;

    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;apiResponse&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ok&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`API Error: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;apiResponse&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;status&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; - &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;apiResponse&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;statusText&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;apiResponse&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Serverless function error:&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="na"&gt;statusCode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;500&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Failed to fetch data.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;details&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explanation:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Input Validation&lt;/strong&gt;: The function checks if the &lt;code&gt;cnpj&lt;/code&gt; parameter is provided. If not, it returns a &lt;code&gt;400 Bad Request&lt;/code&gt; error.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;API Call&lt;/strong&gt;: It makes a GET request to the specified API using the provided CNPJ.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Error Handling&lt;/strong&gt;: The function handles errors gracefully, returning meaningful error messages for debugging.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Response&lt;/strong&gt;: On success, it returns the API response as-is, allowing the frontend to handle it.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Step 3: Frontend Integration
&lt;/h2&gt;

&lt;p&gt;We create a simple interface within HubSpot using React that allows the user to provide a CNPJ and retrieve information related to the business group associated with that key. &lt;/p&gt;

&lt;p&gt;The code below uses the &lt;code&gt;@hubspot/ui-extensions&lt;/code&gt; library to build the interface, including input fields and a button that triggers a serverless function. The serverless function is called with the CNPJ as a parameter, and the response is displayed in the interface.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;Divider&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;Input&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;Flex&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;hubspot&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@hubspot/ui-extensions&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;hubspot&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;extend&lt;/span&gt;&lt;span class="p"&gt;(({&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;runServerlessFunction&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;actions&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Extension&lt;/span&gt;
    &lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="nx"&gt;runServerless&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;runServerlessFunction&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="nx"&gt;sendAlert&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;actions&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;addAlert&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="nx"&gt;openIframe&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;actions&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;openIframeModal&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="c1"&gt;// Define the Extension component, taking in runServerless, context, &amp;amp; sendAlert as props&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Extension&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;runServerless&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;sendAlert&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;openIframe&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;cnpj&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setCnpj&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;commercialGroup&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setCommercialGroup&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;handleGetCommercialGroup&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Calling handleGetCommercialGroupFunc with CNPJ:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cnpj&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;runServerless&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;handleGetCommercialGroupFunc&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;parameters&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;cnpj&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Serverless function response:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="nf"&gt;setCommercialGroup&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

      &lt;span class="nf"&gt;sendAlert&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Error searching for business group:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="nf"&gt;sendAlert&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Text&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Text&lt;/span&gt; &lt;span class="nx"&gt;format&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{{&lt;/span&gt; &lt;span class="na"&gt;fontWeight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bold&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="nx"&gt;My&lt;/span&gt; &lt;span class="nx"&gt;Custom&lt;/span&gt; &lt;span class="nx"&gt;Form&lt;/span&gt; &lt;span class="nx"&gt;on&lt;/span&gt; &lt;span class="nx"&gt;HubSpot&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Text&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Text&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Flex&lt;/span&gt; &lt;span class="nx"&gt;direction&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;row&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;align&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;end&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;gap&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;small&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Input&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;cnpj&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;label&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;CNPJ&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;onInput&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{(&lt;/span&gt;&lt;span class="nx"&gt;cnpj&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setCnpj&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cnpj&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Button&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;submit&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleGetCommercialGroup&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="nx"&gt;Get&lt;/span&gt; &lt;span class="nx"&gt;Commercial&lt;/span&gt; &lt;span class="nx"&gt;Group&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Flex&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Divider&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Flex&lt;/span&gt; &lt;span class="nx"&gt;direction&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;row&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;align&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;end&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;gap&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;small&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Input&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;commercial_group&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;label&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Commercial Group&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;commercialGroup&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Flex&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Divider&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Explanation:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;State Management&lt;/strong&gt;: The cnpj and commercialGroup values are stored in the component's state using useState. The cnpj input is updated when the user types into the input field, while the commercialGroup value is updated when the serverless function response is received.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Calling the Serverless Function&lt;/strong&gt;: The runServerless function is invoked when the user clicks the "Get Commercial Group" button. It sends the CNPJ as a parameter to the serverless function (handleGetCommercialGroupFunc).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Response Handling&lt;/strong&gt;: Once the serverless function responds, the component captures the response and updates the commercialGroup state with the response data. The result is displayed in the commercialGroup input field. Additionally, if there’s an error, it’s captured and shown as an alert using the sendAlert function.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Step 4: Testing the Function
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Run the Frontend&lt;/strong&gt;: Launch your application and enter a CNPJ in the input field.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Check Logs&lt;/strong&gt;: Monitor console logs in both the frontend and serverless function to debug issues.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Validate API Responses&lt;/strong&gt;: Ensure the API returns the expected data format:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="w"&gt;   &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
     &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Company Name"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
     &lt;/span&gt;&lt;span class="nl"&gt;"value"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mf"&gt;12345.67&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
     &lt;/span&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Business Type"&lt;/span&gt;&lt;span class="w"&gt;
   &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;This serverless function demonstrates how to fetch data on Hubspot from an external API using a CNPJ as input. By following the steps above, you can integrate similar serverless functionality into your projects, reducing backend complexity and enhancing scalability. For further improvements, consider adding caching mechanisms or input sanitization to make the function more robust.&lt;/p&gt;

&lt;p&gt;Leveraging this approach within the HubSpot CRM provides users with an extremely high level of customization. Not only can you create dynamic user interfaces directly within the CRM pages, but you can also dynamically manipulate values and data via APIs, giving you complete flexibility to tailor the CRM experience to your specific needs and workflows. This integration streamlines your processes, offering greater control and efficiency across your CRM operations.&lt;/p&gt;

&lt;p&gt;Photo by &lt;a href="https://unsplash.com/@campaign_creators?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash" rel="noopener noreferrer"&gt;Campaign Creators&lt;/a&gt; on &lt;a href="https://unsplash.com/photos/man-sitting-on-chair-using-silver-laptop-3WNi-5s4LVg?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash" rel="noopener noreferrer"&gt;Unsplash&lt;/a&gt;&lt;/p&gt;

</description>
      <category>hubspot</category>
      <category>crm</category>
      <category>serverless</category>
      <category>api</category>
    </item>
    <item>
      <title>API as Product: Prioritizing Developer Experience from Concept to Delivery</title>
      <dc:creator>Mario Dias</dc:creator>
      <pubDate>Thu, 19 Dec 2024 00:21:05 +0000</pubDate>
      <link>https://dev.to/devxme/api-as-product-prioritizing-developer-experience-from-concept-to-delivery-56hf</link>
      <guid>https://dev.to/devxme/api-as-product-prioritizing-developer-experience-from-concept-to-delivery-56hf</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/devxme" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1169712%2F9ed24787-8a5d-417c-8c18-810f9af593d0.jpg" alt="devxme"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="/devxme/api-as-product-prioritizing-developer-experience-from-concept-to-delivery-2l2d" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;API as Product: Prioritizing Developer Experience from Concept to Delivery&lt;/h2&gt;
      &lt;h3&gt;Mario Dias ・ Dec 19&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#api&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#devrel&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#product&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#corebusiness&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>api</category>
      <category>product</category>
      <category>devrel</category>
      <category>discuss</category>
    </item>
    <item>
      <title>API as Product: Prioritizing Developer Experience from Concept to Delivery</title>
      <dc:creator>Mario Dias</dc:creator>
      <pubDate>Thu, 19 Dec 2024 00:15:05 +0000</pubDate>
      <link>https://dev.to/devxme/api-as-product-prioritizing-developer-experience-from-concept-to-delivery-2l2d</link>
      <guid>https://dev.to/devxme/api-as-product-prioritizing-developer-experience-from-concept-to-delivery-2l2d</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;APIs have transcended their technical origins to become pivotal products in the digital economy. Nowadays the APIs is core to business and they must be guided by Dev-X logic from their conception.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Their role is no longer confined to connecting systems; they are foundational enablers of business strategies, fostering partnerships, driving innovation, and generating revenue. Given this evolution, companies providing APIs must embrace a product-first mindset, prioritizing the Developer Experience (Dev-X) as a core pillar of their strategy.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Shift to Dev-X as a Competitive Edge&lt;/strong&gt;&lt;br&gt;
Modern developers are discerning users who evaluate APIs based on ease of integration, quality of documentation, and overall usability.&lt;/p&gt;

&lt;p&gt;A seamless developer experience can mean the difference between an API that thrives and one that is abandoned. To succeed, API providers must think beyond mere functionality and ensure that every interaction with their API is as frictionless as possible. This shift demands attention across multiple dimensions of the API lifecycle:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Specialized Technical Support&lt;/strong&gt;&lt;br&gt;
Technical support is a cornerstone of Dev-X. While comprehensive documentation can address many questions, developers often encounter unique challenges. To address these effectively, API providers must:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Offer responsive and knowledgeable support: Provide multiple channels, such as live chat, email, or community forums, where developers can seek assistance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Empower support teams with expertise: Equip support personnel with deep technical knowledge of the API, enabling them to resolve complex issues quickly.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Facilitate collaboration: Establish clear escalation paths for issues requiring engineering intervention, ensuring developers receive timely solutions.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Exceptional Technical References&lt;/strong&gt;&lt;br&gt;
Documentation and references are often the first point of contact for developers exploring an API. These resources must:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Be clear and comprehensive: Include step-by-step guides, interactive examples, and detailed explanations of API endpoints.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Leverage modern tooling: Offer interactive API explorers, such as Swagger UI or Postman collections, to help developers test endpoints in real-time.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Prioritize accessibility: Structure documentation to cater to developers of varying skill levels, with beginner-friendly guides and advanced use cases.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Client-Focused Project Support&lt;/strong&gt;&lt;br&gt;
APIs often integrate into mission-critical systems. To ensure successful implementations, API providers should:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Collaborate closely with clients: Assign technical account managers or solution architects to guide clients through complex integrations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Provide customization options: Offer flexible SDKs, plugins, or tailored API configurations to meet unique client needs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Measure success: Work with clients to define and achieve key performance indicators (KPIs), ensuring mutual alignment on project goals.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Designing APIs as Products&lt;/strong&gt;&lt;br&gt;
Treating APIs as products requires a holistic approach that spans their entire lifecycle from design to maintenance. Here’s how Dev-X can guide this process:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;API Design&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Adopt API-first principles: Begin with a focus on API design before backend implementation. Tools like OpenAPI can help define clear and consistent interfaces.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Prioritize usability: Favor intuitive endpoints, clear naming conventions, and robust error handling.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Ensure versioning stability: Offer well-documented versioning strategies to minimize disruptions during updates.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Onboarding&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Simplify integration: Provide quick-start guides and starter kits to help developers get up and running within minutes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Streamline authentication: Offer straightforward authentication mechanisms, such as API keys or OAuth 2.0, with clear setup instructions.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Feedback Loops&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Engage with developers: Actively seek feedback through surveys, developer communities, and analytics.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Iterate rapidly: Use feedback to improve the API, fix pain points, and add features that align with user needs.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;The Business Case for Dev-X&lt;/strong&gt;&lt;br&gt;
Investing in Dev-X is not just a technical imperative but a business necessity. A developer-friendly API can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Accelerate adoption: Developers who have a positive experience are more likely to integrate and promote the API.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Reduce churn: A well-designed and supported API minimizes frustration, retaining users over the long term.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Foster partnerships: Companies with outstanding Dev-X gain credibility, opening doors to strategic collaborations.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In today’s API-driven landscape, developer experience is the linchpin of success. APIs are no longer ancillary tools but full-fledged products that require meticulous design, robust support, and a client-centric approach. By embracing Dev-X as a guiding principle, API providers can not only meet developer expectations but also create lasting value for their businesses. Ultimately, APIs are products, and like any great product, they should delight users at every touchpoint—from conception to delivery.&lt;/p&gt;

&lt;p&gt;Photo by &lt;a href="https://unsplash.com/@firmbee?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash" rel="noopener noreferrer"&gt;Firmbee.com&lt;/a&gt; on &lt;a href="https://unsplash.com/photos/person-writing-on-white-paper-gcsNOsPEXfs?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash" rel="noopener noreferrer"&gt;Unsplash&lt;/a&gt;&lt;/p&gt;

</description>
      <category>api</category>
      <category>devrel</category>
      <category>product</category>
      <category>corebusiness</category>
    </item>
    <item>
      <title>Monitoring APIs with Postman and Slack Integration: A Step-by-Step Guide</title>
      <dc:creator>Mario Dias</dc:creator>
      <pubDate>Fri, 18 Oct 2024 14:05:59 +0000</pubDate>
      <link>https://dev.to/devxme/monitoring-apis-with-postman-and-slack-integration-a-step-by-step-guide-58hp</link>
      <guid>https://dev.to/devxme/monitoring-apis-with-postman-and-slack-integration-a-step-by-step-guide-58hp</guid>
      <description>&lt;p&gt;Postman is a widely used tool for API development, testing, and monitoring. One of its powerful features is Monitors, which allows you to automate API request collections at scheduled intervals. This helps ensure that your APIs are functioning correctly around the clock, without manual intervention. Additionally, you can configure Postman Monitors to send real-time alerts to Slack, allowing you to automatically receive status updates on your API's health.&lt;/p&gt;

&lt;p&gt;In this guide, we'll cover:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The importance of monitoring your APIs.&lt;/li&gt;
&lt;li&gt;How to write tests for your API calls.&lt;/li&gt;
&lt;li&gt;Setting up Postman Monitors to send automatic Slack notifications based on test results.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Let's dive in!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What Is Postman Monitor and Why Is It Important?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Postman Monitors enable you to automate the execution of your API collections at regular intervals. This is crucial for maintaining the health of your APIs, detecting issues early, and ensuring a seamless experience for your users.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why Use Monitors?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Catch failures early&lt;/strong&gt;: Regularly test your APIs and catch potential issues before they become critical.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Automation&lt;/strong&gt;: Reduce the manual workload by automating collection runs at set intervals.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Real-time notifications&lt;/strong&gt;: Get real-time updates on API health, allowing your team to react quickly to issues.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Adding Tests to API Calls&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;To get the most out of Postman Monitors, you need to define tests within your API requests. These tests can validate responses and ensure your APIs are behaving as expected.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How to Add Tests:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1. Open your API collection in Postman.&lt;/li&gt;
&lt;li&gt;2. Select the request you want to add tests to.&lt;/li&gt;
&lt;li&gt;3. Click on the Tests tab in the request editor.&lt;/li&gt;
&lt;li&gt;4. Add your test scripts in JavaScript. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Here’s a basic example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Check if the response status is 200&lt;/span&gt;
&lt;span class="nx"&gt;pm&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Status code is 200&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;pm&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;to&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;have&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;status&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Ensure the response time is less than 1 second&lt;/span&gt;
&lt;span class="nx"&gt;pm&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Response time is under 1 second&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;pm&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;pm&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;responseTime&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;to&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;be&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;below&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Validate that the response contains a specific key&lt;/span&gt;
&lt;span class="nx"&gt;pm&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Response contains userId&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;pm&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;pm&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;()).&lt;/span&gt;&lt;span class="nx"&gt;to&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;have&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;property&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;userId&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;5. Click Save to save your tests.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These tests will run each time the request is made, whether manually or via a Monitor.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Setting Up a Monitor in Postman&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;With tests in place, let’s set up a Monitor to automate the execution of your API requests.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Steps to Create a Monitor:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1. In the Postman sidebar, click on Monitors.&lt;/li&gt;
&lt;li&gt;2. Select Create a Monitor (plus icon).&lt;/li&gt;
&lt;li&gt;3. Fill in the basic details:
&lt;strong&gt;Name&lt;/strong&gt;: Give your monitor a relevant name.
&lt;strong&gt;Collection&lt;/strong&gt;: Choose the collection you want to monitor.
&lt;strong&gt;Environment&lt;/strong&gt;: Select an environment if you’re using one for your API variables.&lt;/li&gt;
&lt;li&gt;4. Set the frequency: Choose how often the monitor should run (e.g., every 5 minutes, 30 minutes, or daily).&lt;/li&gt;
&lt;li&gt;5. Add notification recipients, and we'll configure Slack integration next.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Setting Up Slack Notifications&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;To automatically receive API status updates in Slack, we'll integrate Postman with your Slack workspace.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How to Set Up Slack Integration&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1. In Postman, go to the Home tab and select Integrations.&lt;/li&gt;
&lt;li&gt;2. Search for Slack and click to select it.&lt;/li&gt;
&lt;li&gt;3. Under Post Monitoring Results, click Add Integration and follow the prompts to connect your Slack workspace.&lt;/li&gt;
&lt;li&gt;4. Set a nickname for the integration, select your Slack workspace and the API monitor you want to track. Then, choose the Slack channel where you want to receive notifications.&lt;/li&gt;
&lt;li&gt;5. Configure the notification settings based on your preference (e.g., receive notifications only on test failures or after every monitor run).&lt;/li&gt;
&lt;li&gt;6. Click Save Integration to complete the setup.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now, every time Postman runs your Monitor and a test fails (or passes, depending on your settings), you'll get a notification in Slack with the results.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Executing Monitors and Reviewing Results&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Once your Monitor and Slack integration are set up, you can monitor the health of your APIs and check results both in Postman and Slack.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1. Go to Monitors in Postman.&lt;/li&gt;
&lt;li&gt;2. Select the monitor you’ve created.&lt;/li&gt;
&lt;li&gt;3. You’ll see a list of runs and their outcomes. If a test fails, Postman will highlight the issues, and you’ll receive a detailed Slack message, such as:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff8eg4v6ie6akcgfloqg1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff8eg4v6ie6akcgfloqg1.png" alt="Postman Notification" width="800" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This automated process ensures you’re always in the loop about your API health and can respond to issues promptly.&lt;/p&gt;

&lt;p&gt;Using Postman Monitors to automate API tests is essential for maintaining the reliability of your services. With monitors, you can schedule regular tests, add automated validation to your requests, and receive real-time notifications via Slack, all of which contribute to better API uptime and smoother development workflows.&lt;/p&gt;

&lt;p&gt;Start setting up your monitors today and gain peace of mind knowing your APIs are constantly being checked.&lt;/p&gt;

</description>
      <category>postman</category>
      <category>postmanapi</category>
      <category>monitoring</category>
      <category>api</category>
    </item>
    <item>
      <title>The Importance of Developer Experience (Dev-X) for API-Providing Tech Companies</title>
      <dc:creator>Mario Dias</dc:creator>
      <pubDate>Mon, 22 Jul 2024 17:53:30 +0000</pubDate>
      <link>https://dev.to/devxme/the-importance-of-developer-experience-dev-x-for-api-providing-tech-companies-52bb</link>
      <guid>https://dev.to/devxme/the-importance-of-developer-experience-dev-x-for-api-providing-tech-companies-52bb</guid>
      <description>&lt;p&gt;In the modern technology landscape, providing robust APIs is essential for tech companies aiming to integrate their services into various applications and platforms. However, the quality and success of these APIs are heavily influenced by the developer experience (Dev-X) associated with them. &lt;/p&gt;

&lt;p&gt;A dedicated Dev-X team can make a significant difference in how easily and effectively developers can use your APIs, impacting overall satisfaction and adoption rates. This article explores the importance of a Dev-X team and outlines the ideal structure and roles within such a team.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why Dev-X Matters&lt;/strong&gt;&lt;br&gt;
Developer Experience (Dev-X) encompasses all aspects of a developer's interaction with your APIs. A positive Dev-X can lead to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Increased adoption&lt;/strong&gt;: Developers are more likely to choose and stick with APIs that are easy to understand and use.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reduced support costs&lt;/strong&gt;: Well-documented APIs reduce the number of support requests and the time needed to resolve issues.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Enhanced reputation&lt;/strong&gt;: Companies known for excellent Dev-X attract more developers and potential clients.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Faster time to market&lt;/strong&gt;: Clear documentation and efficient support help developers integrate APIs more quickly, speeding up their own product development cycles.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;The Ideal Dev-X Team&lt;/strong&gt;&lt;br&gt;
An effective Dev-X team should be diverse, with members bringing a mix of technical, communication, and interpersonal skills. Here’s a breakdown of the key roles and their responsibilities:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Technical Writers&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Role&lt;/strong&gt;: Writing Technical and API Documentation&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Responsibilities&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Create and maintain comprehensive API documentation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Ensure documentation is clear, concise, and accessible.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Design and document new APIs following the OpenAPI Specification (OAS).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Continuously update documentation to reflect API changes and enhancements.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Skills&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Strong writing and communication skills.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Experience in technical writing and understanding of API design principles.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Familiarity with OAS and other documentation standards.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Developer Advocates&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Role&lt;/strong&gt;: Supporting Sales and Promoting APIs&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Responsibilities&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Work closely with the sales team to support the selling of API-based services.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Conduct workshops, webinars, and presentations to showcase API capabilities.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Gather feedback from developers to improve API offerings.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Act as a liaison between the developer community and the product team.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Skills&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Excellent communication and presentation skills.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Strong technical background with an understanding of API use cases.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Ability to build and maintain relationships with developers and stakeholders.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. API Support Engineers&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Role&lt;/strong&gt;: Providing API Support&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Responsibilities&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Offer technical support to developers using the APIs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Troubleshoot issues related to API integration and usage.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Develop sample code and tutorials to assist developers.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Skills&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Proficiency in multiple programming languages and frameworks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Experience with API development and integration.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Strong problem-solving skills and ability to work under pressure.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;4. SDK Developers&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Role&lt;/strong&gt;: Developing and Maintaining SDKs&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Responsibilities&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Develop software development kits (SDKs) for different programming languages.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Ensure SDKs are well-documented and easy to use.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Maintain and update SDKs to reflect API changes and improvements.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Collaborate with the API support team to address developer feedback.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Skills&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Expertise in software development and SDK creation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Familiarity with multiple programming languages.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Strong documentation and testing skills.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;5. API Governance Managers&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Role&lt;/strong&gt;: Overseeing API Governance with Technology Vendors&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Responsibilities&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Guide technology vendors in the development of new APIs to ensure compliance with the company’s API patterns and best practices.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Work closely with third-party teams to guarantee that externally developed APIs adhere to internal standards.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Conduct regular reviews and audits of APIs developed by vendors to ensure quality and consistency.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Provide training and resources to vendors to align their development processes with the company’s standards.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Skills&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Strong understanding of API design patterns and best practices.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Excellent project management and communication skills.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Ability to work collaboratively with external vendors and internal teams.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Experience in governance and compliance roles, particularly in a technical context.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;br&gt;
A well-structured Dev-X team is crucial for any tech company providing APIs. By focusing on documentation, developer advocacy, support, SDK development, and governance, a Dev-X team can significantly enhance the usability and adoption of your APIs. &lt;/p&gt;

&lt;p&gt;Investing in a dedicated Dev-X team not only benefits the developers using your APIs but also boosts your company’s reputation and market success.&lt;/p&gt;

&lt;p&gt;Creating an exceptional Dev-X requires a concerted effort from skilled professionals across various domains. By understanding and addressing the needs of your developer audience, you can create APIs that are not only functional but also a pleasure to work with.&lt;/p&gt;

&lt;p&gt;Photo by &lt;a href="https://unsplash.com/@neonbrand?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash" rel="noopener noreferrer"&gt;Kenny Eliason&lt;/a&gt; on &lt;a href="https://unsplash.com/photos/basketball-team-standing-on-courtside-O4zhy0zLAQc?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash" rel="noopener noreferrer"&gt;Unsplash&lt;/a&gt;&lt;/p&gt;

</description>
      <category>api</category>
      <category>devrel</category>
    </item>
    <item>
      <title>Developer Experience (Dev-X): The Central Role in Crafting Exceptional APIs</title>
      <dc:creator>Mario Dias</dc:creator>
      <pubDate>Sat, 27 Jan 2024 11:30:00 +0000</pubDate>
      <link>https://dev.to/devxme/developer-experience-dev-x-the-central-role-in-crafting-exceptional-apis-55fa</link>
      <guid>https://dev.to/devxme/developer-experience-dev-x-the-central-role-in-crafting-exceptional-apis-55fa</guid>
      <description>&lt;p&gt;In the ever-evolving landscape of technology, the development of APIs (Application Programming Interfaces) has become a cornerstone of innovation and efficiency. These APIs serve as bridges between different systems, enabling them to communicate seamlessly and power a wide array of applications. But what lies at the heart of designing APIs that not only work but excel in delivering value? Enter the Dev-X analyst, the driving force behind crafting exceptional APIs. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Dev-X: The Architect of API Innovation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Dev-X, short for Developer Experience, is not merely a support function; it's a central figure in the conception of new APIs. Its contribution is multi-faceted, influencing every aspect of API development. Let's explore the pivotal roles Dev-X plays in the API creation process: &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Business Analysis: Connecting API to Business Logic&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;At the outset, Dev-X aligns the API's development with the core business model, legal regulations, and market standards it aims to address. This critical step ensures that the API is not just a technical solution but a strategic tool that solves real-world problems, automates processes, or simplifies workflows. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Standardization: Shaping the API Ecosystem&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;APIs must be user-friendly and consistent within the company's ecosystem. The Dev-X analyst takes on the task of standardizing APIs, addressing data formats, API language, parameter formats, HTTP responses for various use cases, development and staging environments, error responses (complete with error codes, messages, and reference links), and endpoint formats. This standardization streamlines integration and fosters a cohesive API environment. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Flow Optimization: Simplifying User Experience&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The Dev-X analyst meticulously designs APIs with user experience in mind, ensuring a seamless and efficient flow of interactions. By minimizing unnecessary calls and streamlining processes, Dev-X enhances the overall usability of the API. For instance, instead of having separate endpoints to register a user and register a user's document, Dev-X may create a unified endpoint that accomplishes both tasks, reducing complexity and improving efficiency. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Soft Skills and Negotiation: Advocating for Excellence&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Once the API design is in place, Dev-X steps into the role of a negotiator and advocate. With a deep understanding of both technical and business aspects, Dev-X engages with cross-functional teams to champion the API's development. This requires not only technical prowess but also effective negotiation skills to ensure that the API aligns with the organization's strategic goals. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Infrastructure-Centric Design: Smart APIs for Seamless Integration&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;The Dev-X analyst believes in crafting APIs that align with the company's infrastructure. This means designing APIs that actively push essential data to the client systems, rather than requiring constant queries. For instance, when handling payment transactions, instead of forcing developers to poll for status changes, Dev-X advocates for sending real-time updates to client systems via webhooks. This approach minimizes the client's need to query for updates actively and fosters a more efficient and responsive integration. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"The Dev-X Analyst shapes the API to be Developer-Centric." &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In the world of API development, where precision and user experience are paramount, Dev-X stands as the architect of innovation. By orchestrating business alignment, standardization, efficient flow, negotiation, and infrastructure-centric design, Dev-X ensures that APIs are not just technical solutions but exceptional tools that empower developers. &lt;/p&gt;

&lt;p&gt;The Dev-X Analyst understands that at the core of every API is a developer, and its mission is to create APIs that not only work but also delight developers at every stage of their journey. As the technology landscape continues to evolve, organizations that prioritize Developer Experience will thrive, leading the way to new heights of innovation excellence.&lt;/p&gt;

&lt;p&gt;Photo by &lt;a href="https://unsplash.com/@jstrippa?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash"&gt;James Harrison&lt;/a&gt; on &lt;a href="https://unsplash.com/photos/black-laptop-computer-turned-on-on-table-vpOeXr5wmR4?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash"&gt;Unsplash&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devrel</category>
      <category>api</category>
      <category>integration</category>
    </item>
    <item>
      <title>Optimizing Developer Experience: The Crucial Role of a Robust API Documentation</title>
      <dc:creator>Mario Dias</dc:creator>
      <pubDate>Thu, 07 Dec 2023 14:44:24 +0000</pubDate>
      <link>https://dev.to/devxme/optimizing-developer-experience-the-crucial-role-of-a-robust-api-documentation-5f5o</link>
      <guid>https://dev.to/devxme/optimizing-developer-experience-the-crucial-role-of-a-robust-api-documentation-5f5o</guid>
      <description>&lt;p&gt;&lt;em&gt;This article aims to explore the possibilities of effective documentation to assist in API integration, enhancing the overall developer experience.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;In the ever-evolving landscape of software development, the quality of API documentation holds the key to a seamless developer experience. Developer Experience (Dev-X) encompasses the overall perception a developer forms when engaging with a technology solution or API. This article delves into the paramount importance of well-crafted documentation and outlines the essential elements that guarantee an exceptional Dev-X.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Significance of Exceptional Documentation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;APIs (Application Programming Interfaces) serve as the backbone of modern software development, enabling the smooth integration of diverse services and systems. However, realizing their full potential requires developers to easily comprehend, interact with, and implement them. This is where a robust API documentation becomes indispensable.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Direct Testing Capabilities&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;An outstanding API documentation should provide direct testing capabilities within the documentation itself. Developers must be able to make real requests to the API directly from the documentation, enabling immediate validation of API functionality and serving as an invaluable sandbox for experimentation. This feature empowers developers to test various endpoints, methods, and parameters, facilitating a deeper understanding of the API's capabilities.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Code Examples (Snippets)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Code examples, or snippets, are essential components of a comprehensive API documentation. They serve as practical, real-world illustrations of effective API usage. Well-documented code snippets showcase various use cases, demonstrating how to authenticate, make requests, handle responses, and navigate the API's nuances. These examples should be concise, well-commented, and cover a range of scenarios to cater to developers with varying levels of expertise.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bridging Business and Technical Insights&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;An exceptional documentation transcends technical specifications by combining them with a clear understanding of the business context. Documentation should provide developers with insights into not just how to use the API, but also why it's valuable. By highlighting business use cases, potential benefits, and outcomes of API integration, documentation becomes more engaging and relevant to developers aligning technical solutions with business goals.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Flow-Oriented Documentation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Another key prerequisite for remarkable API documentation is its organization in the flow of API usage, from start to finish. Documentation should guide developers through the entire journey of using, starting with authentication and progressing through common workflows. This approach streamlines the developer's learning curve and ensures effective implementation of the API from the ground up.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In the realm of software development, a positive Dev-X is crucial for fostering efficient and enjoyable work. A well craft documentation plays a pivotal role in shaping this experience. By offering direct testing capabilities, code examples, a blend of business and technical insights, and a flow-oriented structure, the documentation empowers developers to leverage APIs to their fullest potential. As APIs continue to drive innovation and integration, investing in a exceptional API documentation is not just a good practice – it's a strategic necessity that elevates the entire developer experience.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;*Photo by &lt;a href="https://unsplash.com/pt-br/@altumcode?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash"&gt;AltumCode&lt;/a&gt; na &lt;a href="https://unsplash.com/pt-br/fotografias/macbook-prateado-ligado-XMFZqrGyV-Q?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash"&gt;Unsplash&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>documentation</category>
      <category>devrel</category>
      <category>api</category>
    </item>
    <item>
      <title>Unleashing the Power of Dev-X: Elevating Developer Experience to New Heights</title>
      <dc:creator>Mario Dias</dc:creator>
      <pubDate>Thu, 07 Dec 2023 14:16:45 +0000</pubDate>
      <link>https://dev.to/devxme/unleashing-the-power-of-dev-x-elevating-developer-experience-to-new-heights-d72</link>
      <guid>https://dev.to/devxme/unleashing-the-power-of-dev-x-elevating-developer-experience-to-new-heights-d72</guid>
      <description>&lt;p&gt;In the ever-evolving landscape of technology and innovation, one thing remains constant: the developer is at the heart of it all. Every line of code, every application, every API – they all find their genesis in the hands of developers. It's no wonder, then, that Developer Experience, or Dev-X, has emerged as a pivotal concept in the realm of technology. &lt;/p&gt;

&lt;p&gt;In this article I will discuss the importance of Dev-X in the integration and API development.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Dev-X: Where Developers Take Center Stage&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Dev-X, often regarded as a subset within the broader Customer Experience (CX) domain, shines a spotlight on developers as the primary customers. Just as CX revolves around ensuring that end-users have seamless and delightful interactions with a product or service, Dev-X places the developer in the center of attention. This shift in focus represents a significant paradigm shift, where the satisfaction and success of developers are paramount. &lt;/p&gt;

&lt;p&gt;But what does Dev-X entail, and why is it crucial for organizations providing technology-based products and services? Dev-X is a multifaceted discipline that encompasses a wide range of activities and responsibilities. At its core, it goes beyond traditional technical support – it's about providing high-level support that understands the intricacies of programming languages, development workflows, and business logic. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Art of Dev-X: A Blend of Soft and Hard Skills&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For a Dev-X team to thrive, it must possess a unique blend of soft and hard skills. Soft skills include an in-depth understanding of business operations and the ability to communicate effectively with developers, understanding their needs and pain points. Dev-X professionals need to become engineers of solutions, translating client demands into actionable API functionalities. &lt;/p&gt;

&lt;p&gt;In addition to soft skills, Dev-X demands a strong technical foundation. Proficiency in various programming languages, knowledge of best practices in API design, and a keen sense of user experience (UX) are all essential. Dev-X professionals wear the hats of architects, defining how a company's APIs can address customer demands. They craft API designs that are not only functional but also user-friendly. This emphasis on UX ensures that developers can effortlessly understand and work with the APIs, enhancing their overall experience. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Collaborative and Creative Documentation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A hallmark of exceptional Dev-X is the creation of comprehensive and collaborative documentation. In this era of interconnected systems and fast-paced development, documentation becomes the bedrock upon which developers build their solutions. It should be more than just a reference manual – it should be a guiding light. &lt;/p&gt;

&lt;p&gt;Collaborative documentations allows developers to actively engage with the material. It's not a static resource but a living, evolving entity. Developers should have the freedom to propose corrections, suggest improvements, and share their insights directly within the documentation platform. This collaborative approach not only enhances the accuracy and usefulness of the documentation but also fosters a sense of community and shared learning. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Road to Seamless Integration&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;Dev-X professionals are not just support agents; they are architects of integration journeys. They ensure that developers have access to real-world examples of code, test accounts with credentials, and insights into the API's underlying business logic. This comprehensive support paves the way for developers to seamlessly integrate APIs into their projects, minimizing friction and frustration. &lt;/p&gt;

&lt;p&gt;Furthermore, Dev-X professionals are instrumental in standardizing data formats and error handling, creating codes and error messages that are clear and easy to understand. They bridge the gap between technical intricacies and the developer's perspective, making the integration process smoother and more efficient. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Elevating Developer Experience for Success&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In conclusion, Dev-X is not just another buzzword; it's a fundamental shift in how organizations approach technology solutions. Placing developers at the center of the equation and prioritizing their experience is not just good practice; it's a strategic imperative. &lt;/p&gt;

&lt;p&gt;Dev-X professionals, armed with a blend of soft and hard skills, act as the catalysts for innovation. They provide the expertise, support, and collaborative documentation necessary to empower developers to create exceptional solutions. &lt;/p&gt;

&lt;p&gt;By embracing Dev-X as a core philosophy, organizations can foster a culture of developer-centricity, drive product excellence, and ultimately, delight their customers. In this age of relentless innovation, those who prioritize Developer Experience will be the torchbearers of progress, leading the way to new heights of technological achievement.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;*Photo by &lt;a href="https://unsplash.com/pt-br/@anniespratt?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash"&gt;Annie Spratt&lt;/a&gt; na &lt;a href="https://unsplash.com/pt-br/fotografias/pessoas-sittin-ao-lado-da-mesa-dentro-da-sala-hCb3lIB8L8E?utm_content=creditCopyText&amp;amp;utm_medium=referral&amp;amp;utm_source=unsplash"&gt;Unsplash&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devrel</category>
      <category>developers</category>
      <category>api</category>
    </item>
  </channel>
</rss>
