Loading deck

LaravelとVueでスクラムのベロシティ管理ツールを

作った

Ryuta Hamasaki

@avosalmon

2018/1/23 (Tue)  Laravel/Vue.js勉強会#3

About Me

Ryuta Hamasaki

Laravel / Angular / Vue

Kurashicom Inc.

スクラムやってますか?

Project A

Project B

Project C

Project D

Team

7

3

15

5

30

Velocity

スプレッドシートで管理してみた

スプレッドシートつらい😵

それでも我慢して

半年間使い続けた

Laravel + Vueでツール作った 😎

Tech Stack

  • Laravel 5.5
  • Vue 2.5
  • Vuex 3.0
  • axios
  • Element UI
  • vue-chartjs

DEMO 🖥

スプリント計画15分短縮 🎊

1週間で大枠は完成 🚀 

  • Laravel Mix
  • Element UI components
  • VuexのState管理に乗っかった
  • 開発環境はDocker

スケールしやすい構成

import actions from './actions'
import getters from './getters'
import mutations from './mutations'

const state = {
  sprints: [],
  projects: [],
  users: []
}

export default {
  namespaced: true,
  state,
  actions,
  getters,
  mutations,
}

Namespaced Vuex module

modules/sprints/_store/index.js

<script>
export default {
  computed: {
    ...mapGetters({
      sprints: '$_sprints/sprints',
      users: '$_sprints/users',
      projects: '$_sprints/projects',
      velocity: '$_sprints/velocity',
    }),
  },

  created() {
    this.$store.registerModule('$_sprints', store)
  },

  mounted() {
    this.$store.dispatch('$_sprints/getSprints')
    this.$store.dispatch('$_sprints/getUsers')
    this.$store.dispatch('$_sprints/getProjects')
  },
}
</script>

modules/sprints/index.vue (container component)

Register Vuex module

Namespaced

Namespaced

async/await with Laravel Mix

{
  "presets": [
    "es2015",
    "stage-3"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

.babelrc

yarn add babel-preset-es2015 \
                babel-preset-stage-3 \
                babel-plugin-transform-runtime

今後の野望 💪

  • GitHubアカウントでログイン
  • カンバン機能
  • Slack連携
  • Websocketでリアルタイムに画面更新
  • Laraconで発表

Happy Sprint Planning 😇