Streamlining Development: A Dive into Atlassian's Forge Platform

Introduction: Imagine having the ability to create a developer-experience app without having to worry about infrastructure or security. That's exactly what we set out to do while developing an application using Atlassian's Forge platform. In this blog post, we'll walk you through the process of developing an app entirely using Forge, emphasizing the seamless integration, efficiency, and unique features it provides.

Getting Started

Setting Up the Development Environment With Forge

npm install -g @forge/cli
forge init

the setup process is refreshingly straightforward. We installed the Forge Command Line Interface (CLI) and initialized our project with a single command. Within minutes, we were ready to start building.

App Logic Development

Development of App Logic Forge provides a serverless environment for building apps. We leveraged this capability to develop the core logic of our app.

import api from '@forge/api';

// Define an asynchronous function to handle the app logic
const handleAppLogic = async () => {
  try {
    // Your app logic goes here
    const result = await yourFunction();
    return result;
  } catch (error) {
    // Handle any errors gracefully
    console.error('An error occurred:', error);
    throw error; // Propagate the error for logging and debugging
  }
};

// Define a Forge function with error handling
api.defineFunction(async (request) => {
  try {
    const result = await handleAppLogic();
    return result;
  } catch (error) {
    // Handle errors and provide a user-friendly response if needed
    return {
      error: 'An error occurred while processing the request.',
    };
  }
});

Forge uses JavaScript as its primary language, making it accessible to many developers.

Product Integration

Integration with Atlassian Products One of the most impressive aspects of Forge is its seamless integration with Atlassian products like Jira, Confluence, and Bitbucket.

import api from '@forge/api';

// Initialize the Jira API client
const jira = api.asApp().products.jira;

// Define a function to fetch Jira issues
const fetchJiraIssues = async (projectKey) => {
  try {
    // Make an API call to fetch Jira issues
    const response = await jira.get(`/rest/api/3/project/${projectKey}/issues`);

    // Check if the response status is OK (200)
    if (response.status === 200) {
      const data = await response.json();
      // Process and return the Jira issues data
      return data;
    } else {
      throw new Error(`Failed to fetch Jira issues. Status: ${response.status}`);
    }
  } catch (error) {
    // Handle any errors gracefully
    console.error('An error occurred while fetching Jira issues:', error);
    throw error; // Propagate the error for logging and debugging
  }
};

// Example usage:
const projectKey = 'YOUR_PROJECT_KEY';
fetchJiraIssues(projectKey)
  .then((issues) => {
    // Process the Jira issues data here
    console.log('Fetched Jira issues:', issues);
  })
  .catch((error) => {
    // Handle errors and provide a user-friendly response if needed
    console.error('Error fetching Jira issues:', error.message);
  });

We used Forge's API access to integrate our app directly into these tools, allowing developers to access our app's functionality without leaving their familiar environment.

UI Customization

User Interface Design Forge's UI Kit made designing the app's user interface a breeze. We customized and styled-components to match our app's aesthetics and maintain a consistent look and feel with Atlassian products.

Testing and Debugging

Testing and Debugging Testing on Forge is a straightforward process. We used the Forge CLI to test our app locally and debug any issues.

forge tunnel

It provided a robust testing environment that closely resembled the production environment, ensuring a reliable app.

Deploying the app

Deployment and Distribution Deploying the app to Atlassian's cloud environment was effortless with Forge.

We followed the deployment guide, and within minutes, our app was live and accessible to our target audience.

Implementing User Feedback

Gathering and Implementing User Feedback Now, let's dive deeper into how we gathered and implemented user feedback, a critical part of our journey with Forge: Feedback Collection: We incorporated user-friendly feedback mechanisms directly within our app. This included a feedback button and a dedicated email address for users to reach out to us with their suggestions, concerns, or issues.

import { Button, Modal, Textarea } from '@forge/ui';

const FeedbackButton = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [feedbackText, setFeedbackText] = useState('');

  const handleFeedbackClick = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  const handleFeedbackSubmit = () => {
    // You can send the user's feedback here
    // For example, you can make an API call to store the feedback
    // or open an email composer to send the feedback via email
    // Remember to handle the feedback submission logic accordingly

    // After submitting feedback, close the modal
    setIsModalOpen(false);
  };

  return (
    <>
      <Button text="Provide Feedback" onClick={handleFeedbackClick} />

      {isModalOpen && (
        <Modal header="Provide Feedback" onClose={handleCloseModal}>
          <Textarea
            label="Your Feedback"
            value={feedbackText}
            onChange={(value) => setFeedbackText(value)}
          />
          <Button text="Submit" onClick={handleFeedbackSubmit} />
        </Modal>
      )}
    </>
  );
};

We encouraged user feedback through easy access, motivating them to share their ideas. Forge's built-in analytics helped us track feature popularity, usage patterns, and user issues. Active participation in Atlassian's developer forums allowed us to address user concerns promptly. We iteratively improved our app based on user input, quickly resolving reported problems thanks to our agile development approach.

Final Thoughts

our journey with Atlassian's Forge platform was marked by a strong commitment to user feedback. We actively collected, analyzed, and implemented user suggestions, which not only improved our app but also strengthened our connection with the developer community. Forge's flexibility and efficiency made it possible to adapt quickly and deliver an app that truly enhanced the developer experience.

Abhijit Roy