Канбан-доска - это инструмент визуализации рабочего процесса, который позволяет оптимизировать поток вашей работы. В этом посте я покажу вам, как создать доску канбан в реальном времени во Vue.
Чтобы продолжить, вам необходимо иметь некоторые знания о Vue и его однофайловом компоненте. Вам также понадобятся следующие инструменты:
- Node.js и npm (перейдите по этой ссылке, чтобы загрузить установщик для вашей ОС)
- Vue CLI. Если у вас его нет, запустите
npm install -g vue-cli
в командной строке, чтобы установить его.
Если вы ничего не знаете о Vue, вы можете прочитать мой предыдущий пост, прежде чем продолжить этот.
Настроить проект
Мы настроим проект с помощью Vue CLI, который представляет собой простой интерфейс командной строки (CLI) для создания шаблонов проектов Vue.js. Откройте терминал и запустите vue init webpack-simple realtime-kanban-board
. Вы получите несколько запросов, примите значения по умолчанию, нажав клавишу ВВОД, и выберите y
, когда вас спросят, хотите ли вы использовать saas
. Перед запуском команды вы можете изменить realtime-kanban-board
на желаемое имя проекта. После настройки выполните следующую команду, чтобы установить зависимости из шаблона шаблона:
cd realtime-kanban-board
npm install
Мы будем использовать vue-kanban в качестве компонента доски канбан с функциями перетаскивания. Мы также будем использовать Hamoni Sync для хранения и синхронизации состояния приложения в реальном времени. Они оба находятся в npm, и мы установим их, выполнив следующую команду:
npm install vue-kanban hamoni-sync
Нам нужны дополнительные пакеты для Babel. Установите их, выполнив следующую команду:
npm install --save-dev babel-plugin-transform-runtime babel-preset-stage-2
Добавить vue-kanban
Мы создали приложение, которое теперь содержит файлы, необходимые для его запуска. Откройте файл src/App.vue
в текстовом редакторе (или в среде IDE) и замените его содержимое следующим:
<template> <div id="app"> <kanban-board :stages="stages" :blocks="blocks" @update-block="updateBlock"> <div v-for="block in blocks" :slot="block.id" :key="block.id"> <div> <strong>id:</strong> {{ block.id }} </div> <div> {{ block.title }} </div> </div> </kanban-board> </div> </template>
<script> import Vue from "vue"; import vueKanban from "vue-kanban"; import Hamoni from "hamoni-sync";
Vue.use(vueKanban);
export default { name: "app", data() { return { stages: ["on-hold", "in-progress", "needs-review", "approved"], blocks: [], listPrimitive: null }; }, methods: { updateBlock(id, status) { //TODO: add code to update the block } }, }; </script>
<style lang="scss"> @import "./assets/kanban.scss"; </style>
В приведенном выше коде используется компонент kanban-board
с двумя реквизитами, stages
и blocks
. Опора stages
определяет столбцы для доски, а blocks
содержит данные, представляющие элемент задачи, помещенный в столбец. Событие @update-block
запускается, когда блок перемещается с одной стадии на другую. Мы будем использовать это событие для обновления доски в реальном времени.
Добавить Hamoni Sync
Мы добавили необходимый код для отображения на странице доски канбан. В этом разделе мы настроим Hamoni Sync для хранения и синхронизации данных для blocks
. Hamoni Sync - это сервис, который позволяет синхронизировать состояние вашего приложения в режиме реального времени.
Чтобы использовать Hamoni Sync, нам нужно инициализировать его и подключиться к серверу Hamoni. Для этого нам понадобится учетная запись и идентификатор приложения. Выполните следующие действия, чтобы создать приложение в Hamoni.
- Зарегистрируйтесь и войдите в личный кабинет Hamoni.
- Введите желаемое имя приложения в текстовое поле и нажмите кнопку «Создать». Это должно создать приложение и отобразить его в разделе списка приложений.
- Нажмите кнопку «Показать идентификатор учетной записи», чтобы увидеть идентификатор своей учетной записи.
Добавьте следующий код в App.vue
в строке 35.
mounted: function() { let hamoni = new Hamoni("ACCOUNT_ID", "APP_ID");
hamoni .connect() .then(() => { hamoni .get("blocks") .then(listPrimitive => { this.listPrimitive = listPrimitive; this.blocks = listPrimitive.getAll();
listPrimitive.onItemUpdated(item => { //update the item at item.index this.blocks.splice(item.index, 1, item.value); }); }) .catch(error => { if (error == "Error getting state from server") { hamoni .createList("blocks", blocks) .then(listPrimitive => { this.listPrimitive = listPrimitive; this.blocks = listPrimitive.getAll();
listPrimitive.onItemUpdated(item => { //update the item at item.index this.blocks.splice(item.index, 1, item.value); }); }) .catch(console.log); } }); }) .catch(console.log); }
Добавьте следующее перед закрывающим тегом </script>
:
const blocks = [
{
id: 0,
status: "approved",
title: "Buy coffee machine"
},
{
id: 1,
status: "in-progress",
title: "Find better AirBnB options"
},
{
id: 2,
status: "on-hold",
title: "Approve Q3 budget"
},
{
id: 3,
status: "approved",
title: "Travel to Colombia"
},
{
id: 4,
status: "needs-review",
title: "Add Redux to the app"
},
{
id: 5,
status: "approved",
title: "Well, Sleep all day 👩🎤"
},
{
id: 6,
status: "in-progress",
title: "Find language exchange partner"
}
];
Мы инициализировали его, вызвав new Hamoni("ACCOUNT_ID", "APP_ID");
. Замените заполнители строк на свою учетную запись и идентификатор приложения, которые вы получите на панели инструментов Hamoni. Затем мы подключили приложение с помощью hamoni.connect()
. Мы получили данные, вызвав hamoni.get()
с именем состояния приложения, хранящегося в Hamoni Sync. Если его еще нет, мы создадим его, а затем добавим функцию для обновления состояния Vue при обновлении элемента. Это достигается вызовом onItemUpdated()
с кодом для обновления блока на item.index
. Hamoni Sync предоставляет так называемый примитив списка, который мы использовали здесь, вызвав hamoni.createList()
и передав ему массив.
Теперь нам нужно обновить состояние на Hamoni, когда блок перемещается с одной стадии на другую. Мы обновим функцию updateBlock(id, status)
, которую добавили ранее
methods: {
updateBlock(id, status) {
let block = this.blocks[id];
this.listPrimitive.update(id, { id, title: "block.title, status });"
}
},
Этот код сообщает sync об обновлении состояния, и как только это будет сделано, оно будет синхронизировано со всеми подключенными клиентами / устройствами.
Это весь код, который нужен. Теперь запустите приложение, запустив npm run dev
из командной строки, и это запустит веб-приложение в браузере по умолчанию.
Вот и все - доска канбан в реальном времени.
Вот и все!
Итак, мы создали доску канбан в реальном времени, используя vue-kanban и Hamoni Sync. Hamoni Sync упрощает интеграцию функций реального времени в ваши приложения. Получить готовый код можно на GitHub. Удачного кодирования! 👍
Ресурсы
Первоначально опубликовано на DEV