Автор оригинала: Peter Mbanugo.
А Канбанское доску Это инструмент визуализации рабочего процесса, который позволяет оптимизировать поток вашей работы. В этом посте я покажу вам, как построить доску в реальном времени в Vue.
Следовать вдоль того, что вам нужно иметь знания о Vue и его Один файловый компонент Отказ Вам также понадобится следующие инструменты:
- Node.js & npm (следуйте этим ссылка для загрузки установщика для вашей ОС)
- Vue Cli. Если у вас нет этого, запустите
NPM Установить -G Vue-CLIВ командной строке, чтобы установить ее.
Если у вас нет знаний о VUE, вы можете прочитать мой Предыдущий пост прежде чем продолжить с этим.
Мы настроим проект, используя Vue CLI, который представляет собой простой интерфейс командной строки (CLI) для проектов Scaffolting Vue.js. Откройте терминал и запустите Vue init Webpack-Simple Realte-Kanban-Board Отказ Вы получите некоторые подсказки, примите значения по умолчанию, нажав Enter и выберите y Когда спросили, хотите ли вы использовать Саас Отказ Перед запуском команды вы можете изменить 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
Мы подкрепили приложение, которое теперь содержит необходимые файлы для запуска приложения. Откройте файл src/app.vue с вашим текстовым редактором (или IDE) и замените его содержимое следующим образом:
Код выше использует Канбан-доска Компонент с 2 реквизитами, Этапы и Блоки Отказ Этапы Опреры определяют колонны для доски, а Блоки Содержит данные, представляющие элемент задач, размещенного на столбце. @ Обновление-блок Мероприятие срабатывает, когда блок перемещается с одного этапа в другую. Мы будем использовать это событие для обновления доски в режиме реального времени.
Мы добавили необходимый код для оказания доски Kanban на страницу. В этом разделе мы настроим Hamoni Sync Хранить и синхронизировать данные для Блоки Отказ Hamoni Sync – это услуга, которая позволяет синхронизировать состояние вашего приложения в режиме реального времени.
Чтобы использовать Hamoni Sync, нам нужно инициатировать его и подключиться к серверу Hamoni. Для этого нам нужна учетная запись и идентификатор приложения. Выполните следующие шаги, чтобы создать приложение в Hamoni.
- Зарегистрируйтесь и войдите в Hamoni приборная панель
- Введите предпочтительное имя приложения в поле Text и нажмите кнопку Создать. Это должно создать приложение и отображать его в разделе списка приложений.
- Развернуть Идентификатор аккаунта карта, чтобы получить свой аккаунт
Добавьте следующий код в App.vue на линии 35.
mounted: function() {
const accountId = "YOUR_ACCOUNT_ID";
const appId = "YOUR_APP_ID";
let hamoni;
fetch("https://api.sync.hamoni.tech/v1/token", {
method: "POST",
headers: {
"Content-Type": "application/json; charset=utf-8"
},
body: JSON.stringify({ accountId, appId })
}).then(token => {
hamoni = new Hamoni(token);
hamoni
.connect()
.then(() => {
hamoni
.get("board")
.then(listPrimitive => {
this.listPrimitive = listPrimitive;
this.blocks = listPrimitive.getAll();
listPrimitive.onItemUpdated(item => {
this.blocks.splice(item.index, 1, item.value);
});
})
.catch(error => {
if (error == "Error getting state from server") {
hamoni
.createList("board", blocks)
.then(listPrimitive => {
this.listPrimitive = listPrimitive;
this.blocks = listPrimitive.getAll();
listPrimitive.onItemUpdated(item => {
this.blocks.splice(item.index, 1, item.value);
});
})
.catch(console.log);
}
});
})
.catch(console.log);
});
}
Добавьте следующее до закрытия тег:
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"
}
];
Мы инициализировали его, позвонив Новый Hamoni (токен); с токеном, полученным из токена синхронизации. Рекомендуется вызывать Sync Token Server с вашего бэкэнда и отправка токена ответа на клиентское приложение. Для этого примера я буду держать их всех в одном месте.
Замените строковые заполнители с помощью своей учетной записи и идентификатор приложения, который вы получите от Dashboard Hamoni. Затем мы подключили приложение, используя hamoni.connect () Отказ Мы получили данные, позвонив hamoni.get () С именем состояния приложения, хранящегося на синхронизации Hamoni. Если оно пока не существует, мы создадим его, а затем добавьте функцию, чтобы обновить состояние Vue, когда элемент обновляется. Это достигается, позвонив OniteMupdated () С кодом для обновления Блок на item.index Отказ Hamoni Sync предоставляет тому, что называется Список примитив Что мы использовали здесь, позвонив hamoni.createlist () и проезжая его массив.
Теперь нам нужно обновить состояние на Hamoni, когда блок перемещается с одного этапа в другую. Мы обновим функцию updateblock (идентификатор, статус) который мы добавили ранее
methods: {
updateBlock(id, status) {
let block = this.blocks[id];
this.listPrimitive.update(id, { id, title: block.title, status });
}
},
Этот код говорит синхронно обновлять состояние, и как только это будет сделано, он будет синхронизирован всем подключенным клиентам/устройствам.
Это все код, необходимый. Теперь запустите приложение, запустив NPM запустить dev из командной строки, и это запустит веб-приложение в вашем браузере по умолчанию.
Там у вас есть в реальном времени в реальном времени в Канбанском доске.
Таким образом, мы построили плату в реальном времени, используя Sync Vue-Kanban и Hamoni. Hamoni Sync позволяет легко интегрировать функции в реальном времени в ваших приложениях. Вы можете получить завершенный код на Github Отказ Счастливое кодирование! 👍.