家の温度/湿度を監視できる時計1

hoge

ここ最近の主にラズベリーパイを触っていたのですが
ようやく

RaspberryPi側で得た値を吐き出す

↓

firebaseで管理

↓

ブラウザへ出力

ができました！！

今回はfirebaseとフロント周りを記事にしていきたいと思います！

仕様

フロント: VueCli,

サーバーサイド: FireBase,

ホスティング: Vercel,

ソースコード

FireBase

まずFireBaseへ登録して、プロダクトを作成していきます。
今回はクリティカルな部分ではないのでわからない方は下記を参考にやってみてください！

[Firebase初学者向け] Firebaseのはじめかた – 新規で「プロジェクトA」を作ってみよう

hoge

プロダクトが作成できたらFirebaseコンソールにあるプロジェクトを設定をクリックして下までスクロールし、
アプリを追加を押して下のようなKeyをコピーします。

var firebaseConfig = {
  apiKey: "********",
  authDomain: "********",
  projectId: "********",
  storageBucket: "********",
  messagingSenderId: "********",
  appId: "********",
  measurementId: "********"
};

hoge
次にFirebaseコンソール内のFirestore Databaseを開いて画像を参考にドキュメントを一つ作成し、tempとhumをフィールドへ追加します。

これでひとまずデータベースができたので、フロント側でtempとhumを出力していきましょう。

Vue

git clone https://github.com/yusakuOono/temp-hum-clock.git

自分の方で作成したこちらのリポジトリをクローンします。

npm ci

次にnode_moduleを作成していきます。

コード解説

// src/plugins/firebase.js

// firebaseをインポート
import firebase from "firebase/app";
// firebaseのデータベースをインポート
import 'firebase/firestore'

// 先ほどのKeyをペースト
var firebaseConfig = {
    apiKey: "********",
    authDomain: "********",
    projectId: "********",
    storageBucket: "********",
    messagingSenderId: "********",
    appId: "********",
    measurementId: "********"
};

// 先ほどのKeyをfirebaseに設定
firebase.initializeApp(firebaseConfig);

// データベースを定義
const db = firebase.firestore()

// 上記をエクスポート
export {
  firebase,
  db
}

// src/components/HelloWorld.vue

<template>
  <div class="wrap">
    <div class="day">
    // 日付を出力
      {{day}}
    </div>
    <div class="date">
      // 時間を出力
      {{time}}<span>{{sec}}</span>
    </div>
    <div class="content">
      <div class="tem">
      // 気温を出力
        {{temp}}
      </div>
      <div>
        /
      </div>
      <div class="hum">
        // 湿度を出力
        {{hum}}
      </div>
    </div>
  </div>
</template>

<script>
// firebaseのデータベースをインポート
import { db } from '@/plugins/firebase'

export default {
  name: 'HelloWorld',
  // 出力する値を定義
  data() {
    return {
      date: "",
      day: "",
      time: "",
      sec:  "",
      temp: "",
      hum: ""
    }
  },
  mounted () {
    // firebaseで定義したDatabaseを監視し更新されたら最新の１つを持ってくる
    db.collection('Database').limit(1).onSnapshot((snapshot) => {
      // データの全体像を写し取ったもの(snapshot)のデータベースの変更点をdocChangesで取得し、forEachする 
      snapshot.docChanges().forEach((change) => {
        // 変更点をvalueへ代入
        const value = change.doc;
        // データベースの値をthis.tempへ
        this.temp = value.data().temp
        // データベースの値をthis.humへ
        this.hum = value.data().hum
      })
    })
  },
  methods: {
    refresh () {
      // 日付を定義
      this.date = new Date()
      // 年/月/日を取得
      this.day = this.date.getFullYear() + '/' + this.zero(this.date.getMonth()+1,2) + '/' + this.zero(this.date.getDate(),2)
      // 時間を取得
      this.time = this.zero(this.date.getHours(),2) + ':' + this.zero(this.date.getMinutes(),2)
      this.sec = ':' + this.zero(this.date.getSeconds(),2)
      const self = this
      // 1秒に一回更新
      setTimeout(() => { self.refresh() }, 1000)
    },
    // 1という表示から01にする
    zero(num, len) {
    let zero = '';
    for(var i = 0; i < len; i++) {
      zero += '0';
    }
      return (zero + num).slice(-len);
    },     
  }, 
  created() {
    // 関数を実行
    this.refresh()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.wrap{
  padding: 200px 0;
  width: fit-content;
  margin: auto;
  font-family: 'DotGothic16', sans-serif;
}
.day{
  text-align: right;
  font-size: 32px;
  margin-bottom: 0px;
}
.date{
  font-size: 104px;
  font-weight: bold;
  margin-bottom: 0px;
  letter-spacing: .18em;
  span{
    font-size: 32px;
    letter-spacing: .18em;
  }
}
.content{
  display: flex;
  justify-content: center;
  font-size: 64px;
}
</style>

まとめ

フロントエンドの実務を積んで2.5年程ですが、最近ようやく自分の作りたい物が実現できるようになってきました！
次回はRaspberry Pi側のコードをPyhonで書いた話をしようと思います！

ブログの投稿ログ

# RaspberryPi側で得た値を吐き出す

# firebaseで管理

# ブラウザへ出力

# 仕様

# フロント: VueCli,

# サーバーサイド: FireBase,

# ホスティング: Vercel,

# FireBase

# Vue

# コード解説

# まとめ