Как построить дорожную карту с клиентом с React

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

Эта статья проведет вас через каждый шаг, который вам нужен для создания инструмента Roadmap, используя React для вашего стартапа SaaS.

Начнем 🚀

📩 Шаг 1: Установка React Мы начнем с создания нового проекта React, используя Create-React-App Анкет

npx create-react-app roadmap

📝 Шаг 2: Создайте компонент дорожной карты

Мы создадим компонент – Дорожная карта – Это будет содержать наш дисплей и логика API – SRC/Компоненты/Дорожная карта Анкет

Создайте соответствующий Roadmap.js В index.js и Roadmap.css файлы Добавьте следующий код в соответствующий заказ.

import React from "react";

import "./Roadmap.css";

function Roadmap() {
  const columnMap = [
    {
      title: "\"Exploring\","
      tickets: [],
    },
    {
      title: "\"In Progress\","
      tickets: [],
    },
    {
      title: "\"Done\","
      tickets: [],
    },
    {
      title: "\"Leaving it for now\","
      tickets: [],
    },
  ];

  return (
    
      {columnMap.map((column, i) => (
        
          {column.title}
          
            {column.tickets.map((t, i) => (
              
                {t.title}
                
                
              
            ))}
          
        
      ))}
    
  );
}

export default Roadmap;

export { default } from "./Roadmap";

.roadmap {
  display: flex;
  width: 100%;
  max-width: 900px;
  min-height: 400px;
}

.roadmap > div:not(:last-child) {
  margin-right: 16px;
}

.roadmap-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #eef0fc;
  border-radius: 4px;
  padding: 6px 10px;
}

.roadmap-column-heading {
  color: #4d5273;
  font-size: 14px;
  font-weight: 500;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.roadmap-cards {
  display: flex;
  flex-direction: column;
}

.roadmap-cards > div:not(:last-child) {
  margin-bottom: 12px;
}

.roadmap-cards-item {
  background: #fff;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 1px 0 #091e4240;
}
.roadmap-cards-item-heading {
  font-size: 14px;
  font-weight: 500;
}

.roadmap-cards-item-upvote {
  display: flex;
  font-size: 12px;
  line-height: 18px;
}

.roadmap-cards-item-upvote-count {
  margin-left: 6px;
}

.roadmap-cards-item p {
  font-size: 12px;
  margin-top: 7px;
  line-height: 1.5;
}

svg.not-filled path {
  fill: #fff;
  stroke: #000;
  stroke-width: 8px;
}

@media (max-width: 600px) {
  .roadmap {
    flex-direction: column;
  }

  .roadmap > div:not(:last-child) {
    margin-right: 0;
    margin-bottom: 26px;
  }
}

Теперь, когда наш компонент отображения создан, давайте приведем его на App.js И посмотрите, как выглядит наш компонент.

👨‍🔧 Шаг 3: Добавьте компонент в приложение Мы импортируем наш компонент в App.js и удалить все ненужные файлы и код. Наш код – App.js , App.css и компонент должен выглядеть ниже.

Добавить следующий код в App.js и App.css соответственно.

import React from "react";

import Roadmap from "./components/Roadmap";
import "./App.css";

function App() {
  return (
    
      Roadmap
      
    
  );
}

export default App;

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");

html,
body {
  font-family: "Roboto", sans-serif;
}

.wrapper-heading {
  padding: 16px;
  text-align: center;
  margin-bottom: 18px;
  max-width: 900px;
  color: #4d5273;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}

Теперь беги пряжа старт В корне нашего проекта и нашего компонента должны выглядеть так.

Теперь пришло время интегрировать это с бэкэнд, чтобы получить наши билеты на дорожную карту и отобразить их. 👩‍🔧

👩‍💻 Шаг 4: Получите свои API

Следуйте указанным ниже указателям и получите свои API!

Клонирование образца проекта – Чтобы получить API, вы можете посетить это Ссылка и нажмите на верхнюю правую кнопку, чтобы клонировать проект.

Развернуть и получить бэкэнд URL – Клонировав проект, пришло время развернуть его, чтобы мы могли размещать наши API и бэкэнд. Откройте клонированный проект, если вас еще нет И вы увидите Развернуть кнопка в правом верхнем углу.

Нажмите Развернуть → Выберите среду → Хит развертывание.

После завершения проекта он предоставит URL API.

📝 Проверка документации Прежде чем мы начнем с интеграции бэкэнд, давайте перейдем к документации, нажав на документы на левой боковой панели, чтобы лучше понять задействованные API.

Бэкэнд интеграция с GraphQL 👇

После того, как вы будете готовы к API, мы можем начать с установки GraphQL.

📩 Шаг 5: Установите пакеты GraphQL Нам понадобится два пакета для этого шага, так как мы будем использовать GraphQL для извлечения наших данных из Backend – Apollo Client и GraphQL.

yarn add @apollo/client graphql

⚒ Шаг 6: Настройка GraphQL

Настройте клиент Apollo в каталоге проекта, внутри App.js Так что это будет общаться с бэкэнд.

Обязательно замените Uri С тем, что вы получите от Canonic.

import React from "react";
import { ApolloProvider, InMemoryCache, ApolloClient } from "@apollo/client";

import Roadmap from "./components/Roadmap";

import "./App.css";

/**
 * Connecting with the backend using apollo client
 */
const client = new ApolloClient({
  // make sure you update the URI here to point to your backend
  uri: "https://roadmap-35a418.can.canonic.dev/graphql",
  cache: new InMemoryCache(),
});

function App() {
  return (
    
      
        Roadmap
        
      
    
  );
}

export default App;

👨‍🔧 Шаг 7: Запрос данных

Мы храним наши запросы GraphQL в каталоге SRC/GQL . Внутри, который мы создаем файл и называем его Queries.js Анкет

Здесь мы напишем запросы GraphQL для запроса данных.

import { gql } from "@apollo/client";

/**
 * gql query to get roadmap
 * The query parameters we got straight from Canonic autogenerated documentation
 */
export const GET_ROADMAP = gql`
  query {
    roadmaps {
      _id
      title
      description
      upvotes {
        count
      }
      stage {
        value
      }
    }
  }
`;

Следующий шаг – Запрос данных и отображение наших билетов на дорожную карту. Мы выполним запрос GraphQL в компоненте Roadmap и отобразим билеты, извлеченные в соответствии с их статусом.

Модифицируем Roadmap.js Чтобы достичь вышеупомянутой логики и получить билеты.

import React from "react";
import { useQuery } from "@apollo/client";

import { GET_ROADMAP } from "../../gql/queries";

import "./Roadmap.css";

function Roadmap() {
  const { data = {}, loading } = useQuery(GET_ROADMAP);

  const { roadmaps = [] } = data;

  // dividing tickets into their respective categories
  const exploringTickets = roadmaps.filter(
    (t) => t.stage.value === "EXPLORING"
  );
  const inProgressTickets = roadmaps.filter(
    (t) => t.stage.value === "IN_PROGRESS"
  );
  const doneTickets = roadmaps.filter((t) => t.stage.value === "DONE");
  const leavingItForNowTickets = roadmaps.filter(
    (t) => t.stage.value === "LEAVING_IT_FOR_NOW"
  );

  const columnMap = [
    {
      title: "Exploring",
      tickets: exploringTickets,
    },
    {
      title: "In Progress",
      tickets: inProgressTickets,
    },
    {
      title: "Done",
      tickets: doneTickets,
    },
    {
      title: "Leaving it for now",
      tickets: leavingItForNowTickets,
    },
  ];

  return (
    
      {loading ? (
        
      ) : (
        <>
          {columnMap.map((column, i) => (
            
              {column.title}
              
                {column.tickets.map((t, i) => (
                  
                    {t.title}
                    
                    
                  
                ))}
              
            
          ))}
        
      )}
    
  );
}

export default Roadmap;

🙌bonus: Сложение Upvote к билетам на дорожную карту

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

Шаг 8: Мутирующие данные

Мы создаем новый файл для хранения наших мутаций в src/gql/mutations.js Анкет Получив ссылку на автоматическую документацию, мы можем указать параметры мутации.

import { gql } from "@apollo/client";

/**
 * gql query to get roadmap
 * The query parameters we got straight from Canonic autogenerated documentation
 */
export const UPVOTE = gql`
  mutation Upvote($ticketId: ID!) {
    createUpvote(input: { ticket: $ticketId }) {
      _id
    }
  }
`;

Шаг 9: Сложите логику Upvote в компоненте

Теперь мы можем соединить нашу мутацию в Дорожная карта составная часть. В этом случае мы сохраним подъем не только на бэкэнде, но и в локальном хранилище, поскольку мы не будем создавать пользователя на бэкэнд, и мы хотим сохранить информацию о Upvote.

Мы делаем следующие изменения в Roadmap.js и добавить логику мутации. Наш последний файл выглядит ниже.

import React from "react";
import { useQuery, useMutation } from "@apollo/client";

import { GET_ROADMAP } from "../../gql/queries";
import { UPVOTE } from "../../gql/mutations";

import "./Roadmap.css";

function Roadmap() {
  const { data = {}, loading } = useQuery(GET_ROADMAP);
  const [upvoteTicket] = useMutation(UPVOTE, {
    context: {
      headers: {
        Authorization:
          "617bdcfc530d0d0009c04985-c2ca6caf-485c-4bc1-8ac8-4b9defe2707e",
      },
    },
  });

  const { roadmaps = [] } = data;

  const [upvotes, setUpvotes] = React.useState([]);

  // dividing tickets into their respective categories
  const exploringTickets = roadmaps.filter(
    (t) => t.stage.value === "EXPLORING"
  );
  const inProgressTickets = roadmaps.filter(
    (t) => t.stage.value === "IN_PROGRESS"
  );
  const doneTickets = roadmaps.filter((t) => t.stage.value === "DONE");
  const leavingItForNowTickets = roadmaps.filter(
    (t) => t.stage.value === "LEAVING_IT_FOR_NOW"
  );

  const columnMap = [
    {
      title: "Exploring",
      tickets: exploringTickets,
    },
    {
      title: "In Progress",
      tickets: inProgressTickets,
    },
    {
      title: "Done",
      tickets: doneTickets,
    },
    {
      title: "Leaving it for now",
      tickets: leavingItForNowTickets,
    },
  ];

  const handleUpvoteTicket = React.useCallback(
    async (id) => {
      setUpvotes((upvotes) => [...upvotes, id]);
      localStorage.setItem(`${id}`, true);

      upvoteTicket({ variables: { ticketId: id } });
    },
    [upvoteTicket]
  );

  const isTicketUpvoted = React.useCallback(
    (id) => !!upvotes.find((t) => t === id) || localStorage.getItem(id),
    [upvotes]
  );

  return (
    
      {loading ? (
        
      ) : (
        <>
          {columnMap.map((column, i) => (
            
              {column.title}
              
                {column.tickets.map((t, i) => (
                  
                    {t.title}
                    
                    
                  
                ))}
              
            
          ))}
        
      )}
    
  );
}

export default Roadmap;

Примечание Обязательно создайте Access_tokens для ваших Canonic API для мутирования данных. Подробнее об этом здесь

И вот и все, вы построили дорожную карту! 🎉

Заключение:

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

Следуйте этому шагу, чтобы пошатнуться и построить дорожные карты для своих собственных стартапов SaaS.

Проверьте Live Demo Link здесь

И вы можете проверить пример кода здесь

Вы также можете проверить другие наши руководства здесь.

Присоединяйтесь к нам в Discord, чтобы обсудить или поделиться с нашим сообществом. Напишите нам для любых запросов поддержки в support@canonic.dev Анкет Проверьте наш Веб -сайт узнать больше о Canonic. Дайте нам знать в комментариях ниже того, что вы думаете о руководстве. Благодарю вас!

Оригинал: “https://dev.to/canonic/how-to-build-a-customer-facing-roadmap-with-react-1gal”

Начнем 🚀

Бэкэнд интеграция с GraphQL 👇

🙌bonus: Сложение Upvote к билетам на дорожную карту

И вот и все, вы построили дорожную карту! 🎉

Читайте ещё по теме: