Vue.js + Firebase 動手做
===
by Kevin Liao
----
###### tags: `talk`
---
## 我是誰
- Kevin Liao （廖偉丞）
- 好想工作室
- Front-End +++++++
---
## Hackpad
https://goo.gl/Yk7g9B
---
## 大家可能有過這種經驗
- 路痴朋友迷路了
- 跟朋友雞同鴨講
- 發現自己也是路癡
---
## Taken
---
## Demo
https://fire-geo-bdc76.firebaseapp.com/#-KJcti5zSbrD8cD8490T
---
## 首先你需要有
- [node.js](https://nodejs.org/en/download/)
- chrome with [vue-devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
- vue-cli
- firebase-tools
```shell
npm install -g vue-cli firebase-tools
```
---
## 建立專案
- 建立 Vue 專案
```
vue init webpack-simple vue-taken
cd vue-taken
npm install
npm run dev
```
- [Firebase](https://firebase.google.com)
- [取得 Google Map API 金鑰](https://developers.google.com/maps/documentation/javascript/get-api-key)
---
## Single File Components
- `<template>`
- `<script>`
- `<style>`
[Playground](http://www.webpackbin.com/)
---
## 加入定位功能
### Geolocation
example:
```javascript
navigator.geolocation.watchPosition((position) => {
do_something(
position.coords.latitude,
position.coords.longitude
)
})
```
- via [MDN](https://developer.mozilla.org/zh-TW/docs/Using_geolocation)
----
在 script 中加入：
```javascript
<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
}
})
}
```
在 template 中加入：
```
<h3>我的位置：{{ position.lat }}, {{ position.lng }}</h3>
```
---
## 在地圖上呈現
[vue-google-maps](https://github.com/GuillaumeLeclerc/vue-google-maps)
```
npm install --save vue-google-maps
```
----
script：
```javascript
import { Map, Marker, load } from 'vue-google-maps'
load('你的API Key')
export default {
//...
components: {
Map, Marker
},
//...
data () {
return {
//...
center: { lat: 0, lng: 0 },
}
},
//...
}
//...
```
----
template：
```
<map
:center.sync="center"
:map-type-id.sync="terrian"
:zoom.sync="18"
>
<marker
:position.sync="position"
></marker>
</map>
```
----
style：
```css
<style>
body {
margin: 0px;
padding: 0px;
}
map {
width: 100%;
height: 450px;
display: block;
}
```
---
## 將畫面置中
template：
```
<button @click="setCenter()">
我的位置：{{ position.lat }}, {{ position.lng }}
</button>
```
script：
```javascript
methods: {
setCenter (m) {
if (m) {
this.center = m.position
} else {
this.center = this.position
}
}
}
```
---
## Firebase SDK
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);
```
---
## 識別不同使用者 & 地圖
script：
```javascript
// ...
data () {
return {
// ...
mapId: '',
userId: '',
markers: []
}
},
ready () {
this.mapId = location.hash.slice(1)
if (this.mapId === '') {
this.mapId = firebase.database().ref('/maps/').push().key
location.hash = this.mapId
}
this.userId = localStorage.getItem('vue-taken-userId')
if (!this.userId) {
this.userId = firebase.database().ref('/maps/' + this.mapId).push().key
localStorage.setItem('vue-taken-userId', this.userId)
}
// ...
```
----
```javascript
// ...
ref.on('child_added', (data) => {
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
})
// ...
```
---
## 列出所有 marker
template：
```
<button @click="toggleMenu()">座標列表</button>
<ul :class="{ 'menu': hideMenu }">
<li v-for="m in markers">
<b v-if="m.key === userId">4ni </b>
<a @click="setCenter(m)">
{{ m.key }}
</a>
</li>
</ul>
<map
:center.sync="center"
:map-type-id.sync="terrian"
:zoom.sync="18"
>
<marker
v-for="m in markers"
:position.sync="m.position"
></marker>
</map>
```
----
script：
```javascript
data () {
return {
// ...
hideMenu: true
}
},
//...
methods: {
// ...
toggleMenu () {
this.hideMenu = !this.hideMenu
}
}
```
----
style：
```
.menu {
display: none;
}
a {
cursor: pointer;
text-decoration: underline;
}
```
---
## Deploy 到 Firebase
```
npm run build
cp index.html dist/
firebase login
firebase init
firebase deploy
```
---
## 其他功能
- 每個人都有名字
- 定時刪除無用的標記
- ...自己想 XD
---
# 謝謝大家
## <(\_ \_)>
{"metaMigratedAt":"2023-06-14T11:34:39.427Z","metaMigratedFrom":"Content","title":"Vue.js + Firebase 動手做","breaks":true,"contributors":"[]"}