Jira — популярный инструмент управления проектами, который помогает отслеживать задачи в проекте. Однако при работе над большим проектом ваша панель управления Jira может загромождаться из-за увеличения количества задач и членов команды.

Чтобы решить эту проблему, вы можете использовать Jira REST API для создания упрощенного приложения списка дел, в котором отображаются назначенные вам задачи и их сроки. API позволяет программно взаимодействовать с Jira для создания, получения, обновления и удаления задач, а также доступа к пользовательским данным и деталям проекта.

В этом руководстве рассказывается о разработке приложения списка дел с использованием Node.js в качестве сервера для получения проблем из вашей учетной записи Jira и приложения React для их отображения. Вы также узнаете, как разместить интерфейс и сервер в Kinsta.

Предварительные условия

Чтобы следовать дальше, вам нужно:

  • Node.js и Node Package Manager (npm), установленные на вашем компьютере разработки.
  • Учетная запись Jira для доступа к задачам.
  • Уверенное понимание Node.js и React.

Как создать бэкэнд с помощью Node.js и Express

Express — это популярная платформа Node.js, предоставляющая оптимизированную среду для создания серверных приложений. Express упрощает обработку маршрутов и облегчает взаимодействие с внешними ресурсами, такими как API, базы данных и внешние приложения.

Чтобы настроить сервер, выполните следующие действия:

  1. Создайте новый каталог и перейдите в него. Затем инициализируйте Node.js, выполнив следующую команду: 
    npm init -y

    Эта команда создает пакет.json файл с настройками по умолчанию в корне папки вашего приложения.

  2. Затем установите все необходимые зависимости для вашего проекта, выполнив следующую команду: 
    npm install express dotenv axios

    Команда выше устанавливает следующее:

    • express — Минимальный фреймворк Node.js для создания API.
    • dotenv — Модуль, загружающий .env переменные для process.env чтобы предоставить вам безопасный доступ к ним.
    • axios — HTTP-клиент на основе обещаний для Node.js. Вы используете его для вызовов API в Jira.
  3. После успешной установки создайте .env файл в корне вашего проекта и добавьте PORT число: 
    PORT=3000

    Это номер порта, который прослушивает сервер. Вы можете изменить его на порт по вашему выбору.

  4. Создать index.js в корневой папке вашего проекта и добавьте следующий код для импорта Express, создания экземпляра приложения Express и запуска сервера: 
    const express = require('express');
require('dotenv').config()
const app = express();
const PORT = process.env.PORT;

// Define routes here

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
  5. Наконец, в вашем пакет.json файл, добавьте скрипт для запуска вашего сервера: 
    "scripts": {
   "start": "node index"
  },

    Теперь вы можете запустить стартовый скрипт в своем терминале:

    npm run start

    Эта команда запускает ваш сервер. Вы должны увидеть следующий текст, зарегистрированный в терминале:

    Server is running on port 3000

    Когда сервер запущен и работает, вы можете настроить свое приложение Jira.

Как настроить приложение Jira

Чтобы использовать Jira REST API, вам необходимо пройти аутентификацию учетной записи пользователя на вашем сайте Jira. Созданный вами API приложения для дел использует базовую аутентификацию с использованием адреса электронной почты учетной записи Atlassian и токена API.

Вот как это настроить:

  1. Создайте учетную запись Jira или войдите в систему, если она у вас есть.
  2. Перейдите в раздел безопасности вашего профиля Atlassian и нажмите Создать токен API.
  3. В появившемся диалоговом окне введите метку для вашего токена (например, «jira-todo-list») и нажмите Создавать.
  4. Скопируйте токен в буфер обмена.
  5. Наконец, сохраните токен API в своем .env файл: 
    JIRA_API_TOKEN="your-api-token"

    Теперь вы можете получить доступ к API Jira, используя базовую аутентификацию.

Настройка маршрутов для получения задач из Jira

Теперь, когда вы настроили приложение Jira. Давайте настроим маршруты для получения задач из Jira на вашем сервере Node.js.

Чтобы инициировать запрос к API Jira, вы должны использовать токен API Jira, который вы сохранили в .env файл. Получите токен API, используя process.env и присвойте его переменной с именем JIRA_API_TOKEN в вашей index.js файл:

const JIRA_API_TOKEN = process.env.JIRA_API_TOKEN

Теперь вам нужно определить URL-адрес конечной точки для вашего запроса API. Этот URL-адрес содержит ваш домен Jira и оператор языка запросов Jira (JQL). Домен Jira относится к URL-адресу вашей организации Jira и выглядит следующим образом: org.atlassian.netгде org это название вашей организации. JQL, с другой стороны, — это язык запросов для взаимодействия с проблемами в Jira.

Начните с добавления домена Jira в .env файл:

JIRA_DOMAIN="your-jira-domain"

Вам также необходимо сохранить электронную почту Jira в .env файл, поскольку он будет использоваться для авторизации при отправке запроса в Jira:

JIRA_EMAIL="your-jira-email"

Затем добавьте обе переменные среды и создайте URL-адрес конечной точки, используя домен и следующий оператор JQL. Этот запрос фильтрует проблемы со статусами «В работе» или «В работе» для вошедшего в систему пользователя, а затем упорядочивает их по статусу:

const jiraDomain = process.env.JIRA_DOMAIN;
const email= process.env.JIRA_EMAIL;

const jql = "status%20in%20(%22In%20progress%22%2C%20%22To%20do%22)%20OR%20assignee%20%3D%20currentUser()%20order%20by%20status";
 
const apiUrl = `https://${jiraDomain}/rest/api/3/search?jql=${jql}`;

Прежде чем создавать маршрут, также импортируйте Axios в файл index.js:

const axios = require("axios")

Теперь вы можете создать маршрут, отправить запрос GET к API Jira и вернуть проблемы. В index.js добавьте следующий код:

app.get('/issues/all', async (req, res) => {
  })

Теперь используйте axios.get метод для выполнения запроса GET к API REST Jira. Вы создаете Authorization заголовок с помощью base64-кодирования вашего адреса электронной почты Jira и токена API:

const response = await axios.get(apiUrl, {
        headers: {
        Authorization: `Basic ${Buffer.from(
          `${email}:${JIRA_API_TOKEN}`
        ).toString("base64")}`,
        Accept: "application/json",
      },
    });

Дождитесь ответа от Jira API и сохраните его в переменной. Ответ содержит свойство под названием issuesкоторый содержит массив объектов задач:

const data = await response.json();
const { issues } = data;

Далее перебирайте issues массив, извлеките только соответствующую информацию об элементах дел и верните ее в ответе JSON:

let cleanedIssues = [];
issues.forEach((issue) => {
      const issueData = {
        id: issue.id,
        projectName: issue.fields.project.name,
        status: issue.fields.status.name,
        deadline: issue.fields.duedate,
      };
      cleanedIssues.push(issueData);
});
res.status(200).json({ issues: cleanedIssues });

Если вы сделаете запрос на http://localhost:3000/issues/allвы должны получить объект JSON, содержащий проблемы:

curl localhost:3000/issues/all

Вы даже можете пойти дальше, используя такого поставщика, как SendGrid, и задание cron для отправки ежедневных электронных писем, содержащих назначенные вам задачи.

Разместите свое приложение Node.js на Kinsta

Прежде чем размещать свое приложение на Kinsta, включите совместное использование ресурсов между источниками (CORS), чтобы предотвратить access-control-allow-origin ошибка, поскольку вы размещаете серверную часть и интерфейс на разных доменах. Сделать это:

  1. Установите пакет cors npm, выполнив эту команду в своем терминале: 
    npm install cors
  2. Затем импортируйте пакет в index.js. 
    const cors = require('cors')
  3. Затем настройте CORS в качестве промежуточного программного обеспечения, чтобы включить его для каждого входящего запроса. Добавьте следующий код вверху вашего index.js файл: 
    app.use(cors());

    Теперь вы можете отправлять HTTP-запросы на свой сервер из другого домена, не сталкиваясь с ошибками CORS.

Затем отправьте свой код предпочитаемому провайдеру Git (Bitbucket, GitHub или GitLab) и выполните следующие действия, чтобы разместить его:

  1. Войдите в систему или создайте учетную запись, чтобы просмотреть панель управления MyKinsta.
  2. Авторизуйте Kinsta у своего провайдера Git.
  3. Нажмите Приложения на левой боковой панели, затем нажмите Добавить приложение.
  4. Выберите репозиторий и ветку, из которой вы хотите выполнить развертывание.
  5. Присвойте своему приложению уникальное имя и выберите расположение дата-центра.
  6. Добавьте переменные среды. Нет необходимости добавлять PORT в качестве переменной среды, поскольку Kinsta обрабатывает его автоматически. Установите флажки рядом с Доступно во время выполнения и Доступно в процессе сборки:

    Переменные среды приложения Kinsta.

  7. Просмотрите другую информацию (вы можете оставить значения по умолчанию) и нажмите Создать заявку.

Теперь ваш сервер успешно развернут в Kinsta. В меню слева нажмите Домены и скопируйте основной домен. Это конечная точка URL-адреса вашего сервера.

Создайте приложение React для отображения проблем

Затем вы используете React для создания интерфейса вашего приложения и CSS для его стилизации. Выполните следующие шаги, чтобы создать проект React с помощью Vite:

  1. Создайте новый проект React с именем jira-todo: 
    npx create-vite jira-todo --template react
  2. Перейдите в каталог проекта и установите необходимые зависимости: 
    npm install
  3. Запустите сервер разработки: 
    npm run dev

Получить проблемы с сервера

  1. Очистите содержимое в Приложение.jsx и добавьте следующий код:
function App() {

  return (
    <div className="App">
      <h1>What's on my list today?</h1>
      {/* Display issues */}

   </div>
 );
}

export default App;
  1. Прежде чем начать получать выпуски, сохраните URL-адрес сервера Kinsta в .env файл в корне папки вашего приложения:
VITE_SERVER_BASE_URL="your-hosted-url"
  1. Введите URL-адрес Приложение.jsx добавив следующую строку в начало файла:
const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL
  1. В своем компоненте создайте асинхронную функцию с именем fetchData и сделайте GET-запрос к /issues/all конечная точка на сервере Express. Получив ответ, проанализируйте его как JSON и сохраните данные в значении состояния с именем data:
import { useCallback, useEffect, useState } from "react";

function App() {
  const SERVER_BASE_URL=import.meta.env.VITE_SERVER_BASE_URL

  const [data, setData] = useState([]);
  const fetchData = useCallback(async () => {
    try {
      const response = await fetch(`${SERVER_BASE_URL}/issues/all`);
      if (!response.ok) {
        throw new Error('Network response was not ok');
     }
      const data = await response.json();
      	setData(data.issues);
    } catch (error) {
      console.error('Error fetching data:', error);
  }
     },[SERVER_BASE_URL]);

  useEffect(() => {
    // Fetch data when the component mounts
    fetchData();
     },[fetchData]);

  return (
    <div className="App">
        <h1>What's on my list today?</h1>
      
    </div>
  );
}

export default App;

Обратите внимание, что вы используете useEffect крючок для выполнения fetchData функционировать при монтировании компонента.

Визуализация задач из Jira в браузере

  1. Теперь вы можете изменить оператор return вашего компонента, чтобы перебирать проблемы и перечислять их в браузере:
return (
  <div>
    <h1>What's on my list today?</h1>
    <section>
      	{data && data.map(issue => {
      	return <div className="issues" key={issue.id}>
        <div>
         <div>{issue.summary}</div>
          <small>{issue.deadline}</small>
        </div>
        <div>
          <div> className="status">{issue.status}</div>
        </div>
      </div>
    })}
    </section>
  </div>
);
  1. Чтобы стилизовать это приложение, добавьте следующий код CSS в Приложение.css:
h1 {
    text-align: center;
  font-size: 1.6rem;
  margin-top: 1rem;
}
section {
  display: flex;
  flex-direction: column;
 justify-content: center;
  align-items: center;
  margin-top: 2rem;
 }

 .issues {
  display: flex;
  min-width: 350px;
  justify-content: space-between;
  padding: 1rem;
  background-color: #eee;
  margin-bottom: 1rem;
}

 small {
  color: gray;
}

.status-btn {
  padding: 4px;
  border: 1px solid #000;
  border-radius: 5px;
}
  1. Затем импортируйте Приложение.css в index.js применить стили:
import './App.css'

Теперь, когда вы запускаете приложение, вы должны увидеть в браузере список назначенных вам задач с их статусом и сроком выполнения:

Скриншот страницы приложения React
Список задач Jira, назначенных пользователю.

Разверните свое приложение React на Kinsta

Для простоты используйте статический хостинг сайтов Kinsta для развертывания приложения. Хостинг статических сайтов Kinsta помогает превратить ваши сайты в статический сайт и развернуть статические файлы, обеспечивая быструю доставку контента и минимальное время простоя.

Создайте репозиторий на GitHub для размещения исходного кода. Как только ваш репозиторий будет готов, выполните следующие действия, чтобы развернуть статический сайт в Kinsta:

  1. Войдите в систему или создайте учетную запись, чтобы просмотреть панель управления MyKinsta.
  2. Авторизуйте Kinsta у своего провайдера Git.
  3. Нажмите Статические сайты на левой боковой панели, затем нажмите Добавить сайт.
  4. Выберите репозиторий и ветку, из которой вы хотите выполнить развертывание.
  5. Присвойте уникальное имя своему сайту.
  6. MyKinsta автоматически определяет настройки сборки для этого проекта React. Вы увидите следующие предварительно заполненные настройки:
    • Команда сборки: npm run build
    • Версия узла: 18.16.0
    • Каталог публикации: dist
  1. Добавьте URL-адрес вашего сервера в качестве переменной среды, используя VITE_SERVER_BASE_URL.
  2. Наконец, нажмите Создать сайт.

Вот и все! Теперь у вас есть развернутый сайт за несколько секунд. Предоставляется ссылка для доступа к развернутой версии вашего сайта. Если вы перейдете на домен своего сайта, вы увидите список проблем Jira. Если хотите, позже вы сможете добавить свой собственный домен и SSL-сертификат.

В качестве альтернативы хостингу статических сайтов вы можете выбрать развертывание статического сайта с помощью хостинга приложений Kinsta, который обеспечивает большую гибкость хостинга, более широкий спектр преимуществ и доступ к более надежным функциям. Например, масштабируемость, индивидуальное развертывание с использованием Dockerfile и комплексная аналитика, охватывающая данные в реальном времени и исторические данные.

Краткое содержание

В этом руководстве вы узнали, как создать приложение Express для получения назначенных задач Jira с помощью API REST Jira. Кроме того, вы подключили интерфейсное приложение React к приложению Express, чтобы отобразить эти проблемы в браузере.

Это приложение представляет собой элементарную демонстрацию того, чего можно достичь с помощью Jira REST API. Вы можете расширить свое приложение, добавив в него функции, позволяющие отмечать выполненные задачи, выполнять расширенную фильтрацию и многое другое.

Кроме того, с помощью Kinsta вы можете разместить свой сервер и сайт на одной панели управления, используя наши различные услуги. Ознакомьтесь с надежным и гибким веб-хостингом Kinsta для всех ваших приложений.