Vue.js + Firebase 動手做

hackmd

hackpad

Init Setup

安裝 vue-cli, firebase-tools

1
npm install -g vue-cli firebase-tools

安裝 vue-devtools

安裝 firebase

1
npm install --save firebase

查看vue預設範本

1
vue list

建立 vue 專案

1
2
3
4
vue init webpack-simple vue-taken
cd vue-taken
npm install
npm run dev
  • webpack-simple範本內含webpack設定
    • 分成dev和deploy兩種
    • babel-loader可編譯ES6

取得第三方 resource

Firebase

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1. 先到 Firebase Console 取得 API Key
2. 加入
<script>
import firebase from 'firebase'
const config = {
  apiKey: "AIzaSyBViACd0PRoj3M33fMxpVs7PegSdSz3ofg",
  authDomain: "fire-geo-bdc76.firebaseapp.com",
  databaseURL: "https://fire-geo-bdc76.firebaseio.com",
  storageBucket: "fire-geo-bdc76.appspot.com",
};
load('你的Google Map API Key')
firebase.initializeApp(config);
3. 如果寫進資料庫的權限不足 要到 firebase規則裡面改
{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

Google map api

定位功能

1
2
3
4
Geolocation:
navigator.geolocation.watchPosition((position) =>  {
  do_something(position.coords.latitude, position.coords.longitude);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
在script中加入：
data () {
  return {
    position: {
      lat: 0,
      lng: 0
    }
  }
},
ready () {
  navigator.geolocation.watchPosition((position) => {
    this.position.lat = position.coords.latitude
    this.position.lng = position.coords.longitude
    this.center = this. position
  })
}
template:
<p>目前位置：, </p>

安裝 vue-google-maps

1
npm install --save vue-google-maps

App.vue Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<template>
  <div id="app">
    <h1></h1>
    <button @click="setCenter">
      目前位置： , 
    </button>
    g-map sdk上有
    <map
     :center.sync="center"
     :map-type-id.sync="terrian"
     :zoom.sync="18" >
      <marker
          v-for="m in markers"
          :position.sync="m.position">
      </marker>
    </map>
  </div>
</template>
<script>
import{ Map, Marker, load} from 'vue-google-maps'
import firebase from 'firebase'
// API key
load('你的 map api key');
var config = {
    apiKey: "xxxxxx",
    authDomain: "xxxxxx",
    databaseURL: "xxxxx",
    stroageBucket: "xxxxxx",
};
firebase.initializeApp(config);
export default {
  components: {
    Map, Marker
  },
  data () {
    return {
      msg: 'Hello ikea!',
      center: {
        lat: 0,
        lng: 0
      },
      // 位置data
      position: {
        lat: 0,
        lng: 0
      },
      mapId: '',
      userId: '',
      markers: []
    }
  },
  // ready:
  ready () {
    // get mapID    
    this.mapId = location.hash.slice(1)
    if (this.mapId === '') {
      this.mapId = firebase.database().ref('/maps/').push().key
      location.hash = this.mapId
    }
    // get userID
    this.userId = localStorage.getItem('fire-geo-userId')
    if (!this.userId) {
      localStorage.setItem('fire-geo-userId', this.userId)
      this.userId = firebase.database().ref('/maps/' + this.mapId).push().key
    }
    // bable 語法
    const ref = firebase.database().ref(`/maps/$(this.mapId)/`)
    ref.on('child_added', (data) => {
          const marker = data.val()
          this.markers.push({
              key: data.key,
              position: data.val().position
          })
    })
    ref.on('child_changed', (data) => {
          let marker = this.markers.find((m) => m.key === data.key)
          marker.position = data.val().position
    })
    navigator.geolocation.watchPosition((position) => {
      this.position.lat = position.coords.latitude
      this.position.lng = position.coords.longitude
      ref.child(this.userId).set({
          position: this.position  
      })
    })
  },
  methods:{
      setCenter(){
          this.center = this.position
      }
  }
</script>
<style>
body {
  font-family: Helvetica, sans-serif;
}
map {
  display: block;
  width: 100%;
  height: 500px;
}
</style>

佈署到firebase

1
2
3
4
5
npm run build
cp index.html ./dist
firebase login
firebase init
firebase deploy
  • deploy結束會有網址，進去就是成品囉

附錄

1
2
3
4
5
6
7
node版本太舊要更新喔
Mac
    homebrew update
    brew upgrade node
    npm install -g npm
    (if mac os X + homebrew)
1
2
3
4
5
6
7
8
Vue editor plugin
Atom
    vue-snippets
    language-vue
Sublime
    Vuejs Snippets
    Vue Syntax Highlight