knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

IndexedDB + Vue CLI, Chart.js で、測定値の表示 ファイルのインポート可 #Vue.js #IndexedDB #Vue-cli

概要:

前と同様、IndexedDB + Vue CLI
Dexie.js ライブラリを使用した構成となり。
測定値の登録、chart.jsグラフ表示

・ブラウザ内IndexedDBデータの エクスポート、インポート機能で
jsonファイル経由で可能で、
別PCや、外出先PCのブラウザにインポートできます。

環境

Chrome 83
Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router
chart.js
SinglePageApplication / SPA
Progressive Web Apps / PWA

参考のコード

github.com

npm 追加

Vue CLIで、chart.jsだけでは、描画できず。
vue-chartjs ライブラリも。追加しました。

npm install vue-chartjs chart.js --save

chart.js sample

canvas が、動作しないようで
 chart部分を、コンポートネントにする例で。描画できそうでした
親の呼出し側
chart_sample.vue
https://github.com/kuc-arc-f/vue_spa3b_4mdats/blob/master/src/components/IndexMdats/chart_sample.vue

import ChartView from './ChartView'

//
export default {
  name: 'LineSample',
  data () {
    return {
    }
  },
  components: {
    ChartView
  }
}

・子の chart
ChartView.vue
https://github.com/kuc-arc-f/vue_spa3b_4mdats/blob/master/src/components/IndexMdats/ChartView.vue

import { Line } from 'vue-chartjs'
 
export default {
  extends: Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data-1',
          fill: false,
          backgroundColor: '#FF6384',
          borderColor: '#FF6384',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    },
    { responsive: true, maintainAspectRatio: false }
    )
  }
}

・上記の、サンプル グラフの画像
f:id:knaka0209:20200701142231p:plain

画面

・グラフ
f:id:knaka0209:20200701144807p:plain

・リスト
 上部分に、エクスポート、インポートの
 ボタンを配置
f:id:knaka0209:20200701144818p:plain

Update 2020/07/02

CSV エクスポート, インポート機能を追加しました。

CSVの書式は、1件データを登録して、CSV export すると確認できます
・日付/date 書式は、 YYYY-MM-DD となります。
・エクセルデータ等からインポートする場合、YYYY/MM/DD の場合は、
 Google Drive表計算等で、YYYY-MM-DD に変換が必要です。
・エクスポートの、日付書式も、YYYY-MM-DDになります

f:id:knaka0209:20200702165201p:plain

・起動方法は、一覧に CSVドロップメニューを追加し
 CSV Export, CSV Import メニューを選択すると
 実行できます。
Import は、Import画面に移動します。
 インポート単位は、1カ月分です。

f:id:knaka0209:20200702165530p:plain




.

参考のページ

knaka0209.hatenablog.com





.

File , Blob で、ファイルのエクスポート/ インポート機能とIndexedDB登録, Vue CLI版 #Vue.js #IndexedDB #Vue-cli

概要:

前と同様、IndexedDB + Vue CLI
Dexie.js ライブラリを使用した構成となり。
json ファイルのエクポート、インポートの調査してみました
File API , Blob等で実現できそうでした。

・インポートした jsonファイルを IndexedDB
 登録まで。可能でした

環境

Chrome 83
Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router

参考のコード

github.com

デモのページ

・エクスポート、jsonファイル出力
https://idx-kuc.netlify.app/#/files/test

https://code-kuc.netlify.app/#/files/test
・上記、都合により。URL変更しました

・インポート、 jsonファイル読込
https://idx-kuc.netlify.app/#/files/test2

https://code-kuc.netlify.app/#/files/test2

実装など

json生成、エクスポート
test.vue
https://github.com/kuc-arc-f/vue_spa3b_3files/blob/master/src/components/Files/test.vue

            var arr = [
                {id: 1  , name: "n1"},
                {id: 2  , name: "n2"},
                {id: 3  , name: "n3"},
                {id: 4  , name: "n4"},
                {id: 5  , name: "n5"},
            ];
            var content = JSON.stringify( arr );
            var blob = new Blob([ content ], { "type" : "application/json" });

jsonアップロード, db登録
test2.vue
https://github.com/kuc-arc-f/vue_spa3b_3files/blob/master/src/components/Files/test2.vue

        change_proc: function(){
            console.log("#-change_proc")
            var self = this
            var files = window.document.getElementById('file1').files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                console.log("i: " + i );                
                console.log("Name: " + file.name);
                console.log("Size: " + file.size);
                console.log("Type: " + file.type);
                console.log("Date: " + file.lastModified);
                console.log("Date: " + file.lastModifiedDate);
                var reader = new FileReader();
                reader.onload = function(evt) {
                    console.log("State: " + evt.target.readyState);
                    console.log("Result: " + evt.target.result);
                    var result =evt.target.result;
                    var dat = JSON.parse(result || '[]')
                    self.add_item(dat)
                    self.items = dat
                    console.log(dat)
                //document.getElementById("output1").innerHTML = evt.target.result;
                };
                reader.onerror = function(evt) {
                    console.log(evt.target.error.name);
                };
                reader.readAsText(file, "utf-8");             
            }            
        },

画面

・ input type=file で、ファイルを指定して。 changeイベントで
 dbインポート処理しています。 

f:id:knaka0209:20200628164311p:plain

参考のページ

knaka0209.hatenablog.com





.

IndexedDB + Vue CLI, markdown対応のtodo機能。ファイルインポート可 #Vue.js #IndexedDB #Vue-cli

概要:

前と同様、IndexedDB + Vue CLI
Dexie.js ライブラリを使用した構成となります。

RDB, APIサービス等を使用しない。
ブラウザ側の IndexedDBにデータ保存する。シンプル構成となります。

・Update : 2020/06/29
IndexedDBデータの エクスポート、インポート機能を追加しました。
 別PCや、外出先PCのブラウザにインポート可能になり。
 データを復元できます。バックアップ等にも利用できます

環境

Chrome 83
Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router
marked: 1.1.0

画面

・詳細
f:id:knaka0209:20200627184009p:plain

・リスト
f:id:knaka0209:20200627184021p:plain

参考のコード

github.com

デモのページ

・netlify様の、無償プラン
https://idx-kuc.netlify.app/#/dexie_todos

idx-kuc.netlify.app

https://code-kuc.netlify.app/#/dexie_todos

・上記、都合により。URL変更しました(別ドメイン)

.

Update 2020/06/29

todo機能の、エクスポート/ インポート機能を追加しました。
・import画面、追加
f:id:knaka0209:20200629151636p:plain

・index、export ,importボタン追加
f:id:knaka0209:20200629151644p:plain

参考のページ

knaka0209.hatenablog.com





.

IndexedDB + Dexie.js で CRUDの作成。ファイルインポート可、Vue CLI版 #Vue.js #IndexedDB #Vue-cli

概要:

IndexedDB で、Dexie.js ライブラリを使用した
CRUD の作成となります。
vue-router と組み合わせて、ほぼサーバレス的な構成にできるか検討してみました。

・ブラウザ内の、LocalStorageと似ているイメージで
 データは、他のPCから利用できない為。
 オフライン機能で、何か作る場合は。良さそうでした

・開発の面では、通常DBサービス起動も不要で
 Vue-cli サービスのみで。開発できるので準備は楽でした

・Update : 2020/06/29
IndexedDBデータの エクスポート、インポート機能を追加しました。
 別PCや、外出先PCのブラウザにインポート可能になり。
 データを復元できます。バックアップ等にも利用できます

環境

Vue CLI
dexie : 3.0.1
vue: 2.6.11
vue-router

参考のコード

github.com

デモのページ

https://idx-kuc.netlify.app/#/dexie_tasks
idx-kuc.netlify.app

https://code-kuc.netlify.app/#/dexie_tasks

・上記、都合により。URL変更しました(別ドメイン)


.

npm 追加

npm install --save dexie

実装など

・db定義
db-name, store ,db-version
storeは、テーブルみたいな扱いのようです

          var db = new Dexie("friend_database");
          db.version(1).stores({
              friends: 'name,shoeSize'
          });

・書く、読み込み

          db.friends.put({name: "Nicolas", shoeSize: 8}).then (function(){
              return db.friends.get('Nicolas');
          }).then(function (friend) {
              alert ("Nicolas has shoe size " + friend.shoeSize);
          }).catch(function(error) {
             alert ("Ooops: " + error);
          });

画面

・リストの部分です
f:id:knaka0209:20200627094308p:plain

Update 2020/06/29

IndexedDB CRUDの、エクスポート/ インポート機能を追加しました。
・import画面、追加
f:id:knaka0209:20200629142025p:plain

・index、export ,importボタン追加
f:id:knaka0209:20200629142047p:plain




.

Vuex の初級編 #Vue.js #vuex

概要:

Vuex の初級編的な内容で
Vue CLI で実装例となります。

・ components間で、prop等で
 値を受け渡した時に。反映できない場合がありましたので
 vuexに、変更してみました。

環境

Vue CLI
vuex : 3.4.0
vue: 2.6.11

vuex 追加

npm install vuex --save

実装など

 getters, mutations を定義しています。

・store.js
https://github.com/kuc-arc-f/vuex_sample_1/blob/master/src/store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//
export default new Vuex.Store({
    state: {
        products: [
            { id: 1, name: "Hoge", stock: 0 },
            { id: 2, name: "Fuga", stock: 3 },
            { id: 3, name: "Piyo", stock: 0 },
        ],
        tasks:[],
        count: 5,
    },
    getters: {
        depletedProducts: state => {
            return state.products
        },
        getTasks: state => {
            return state.tasks
        }
    }, 
    mutations: {
        increment(state) {
            state.count++
        },
        setTasks(state, payload) {
            state.tasks = payload.tasks
        }
    },
})

・main.js
store を、読み込んでいます

import Vue from 'vue'
import router from './router'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

//
new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

components

・読込、computed で、getters からstore.js
で、設定した。固定値を取得

・this.$store.getters.定義した取得関数で、読めるので
 importなして。グローバル参照が可能でした

TestVuex.vue

https://github.com/kuc-arc-f/vuex_sample_1/blob/master/src/components/TestVuex.vue

export default {
    created(){
        console.log( "count =" + this.$store.state.count )

    },
    computed: {
        depletedProducts() {
            return this.$store.getters.depletedProducts;
        }
    },
  methods: {
    updateCount() {
      this.$store.commit("increment");
    }
  }        
}


・表示の部分

<template>
    <div>
        <h1>TestVuex.vue</h1>
        Test-1:
        <p>Count: {{ $store.state.count }}</p>
        <button @click="updateCount">increment</button>
        <hr />
        depletedProducts:
        <ul>
            <li v-for="(product, i) in depletedProducts" :key="i">
                name: {{ product.name }}
                , ID : {{ product.id }}
            </li>
        </ul>        
    </div>
</template>

親/子 components で、読み書きする場合

・親、TestVuex_2.vue
https://github.com/kuc-arc-f/vuex_sample_1/blob/master/src/components/TestVuex_2.vue

mutations で、commitします( this.$store.commit('setTasks', {'tasks' : items } ) )

import {Mixin} from '../mixin'
import TestChild from '../components/Element/TestChild'

//
export default {
    mixins:[Mixin],
    components: { TestChild },
    created(){
        console.log( "count =" + this.$store.state.count )
        this.updateTask()
    },
    methods: {
        updateCount() {
            this.$store.commit("increment");
        },
        updateTask() {
            var items =       [
                { 'id' : 1,  'name' : 'n1'},
                { 'id' : 2 , 'name' : 'n2'},
                { 'id' : 3 , 'name' : 'n3'},
            ]
            this.$store.commit('setTasks',  {'tasks' : items }  )
        },    
    }        
}

・子、TestChild.vue
https://github.com/kuc-arc-f/vuex_sample_1/blob/master/src/components/Element/TestChild.vue

computed , getters で、読み込み ( this.$store.getters.getTasks; )

import {Mixin} from '../../mixin'
//
export default {
    mixins:[Mixin],
    created () {
// console.log( "uid=" + this.user_id )        
    },
    computed: {
        getTasks(){
            return this.$store.getters.getTasks;
        }
    },    
    methods: {
    }
}

参考のコード

github.com





.

Vue CLI+ Laravel 5.8で チャット作成、firebase Cloud Messaging対応 #Laravel #Vue.js #firebase #SPA #PWA

概要

前の 、クロスドメイン構成の
Vue-CLI + Laravel 関連となり。チャット機能の作成です

・会員制となり、Google認証で
 ログインに対応しています。
・PWAも対応しています
・ 前のLaravel版チャットを、Vue CLIに移植した形です

構成

PWA
firebase Cloud Messaging / FCM
Notification API
Vue CLI
vue-router
vue/cli-service : 4.4.0
API サービス:
Laravel 5.8
nginx
mysql
・フロント設置ドメイン ,Vue-CLI:
netlify / ホスティングサービス

参考のコード

github.com

デモのページ

https://code-kuc.netlify.app

ヘッダ部分> Chats で、開けます。
code-kuc.netlify.app

画面

・web push 受信時の、通知API で。タスクバー表示
f:id:knaka0209:20200619163540p:plain

・チャット画面、詳細
f:id:knaka0209:20200619163548p:plain

・一覧
左側に、参加チャットの表示
f:id:knaka0209:20200619163559p:plain

実装など

・package.json
https://github.com/kuc-arc-f/vue_spa3a_4chat/blob/master/package.json

・コントローラ
https://github.com/kuc-arc-f/lara58a/blob/master/app/Http/Controllers/ApiCrosChatsController.php

・web push / FCMの設定を、mixin に記載しました。鍵、送信者ID
https://github.com/kuc-arc-f/vue_spa3a_4chat/blob/master/src/mixin.js

                messagingSenderId: ' ',
                FCM_PublicVapidKey : " ",
                FCM_SERVER_KEY : " ",

Vue CLI+ Laravel 5.8で、Notification API 通知対応の メッセージ機能の作成。

概要

前の 、クロスドメイン構成の
Vue-CLI + Laravel API サービス
SPAの関連となり。会員間メッセージ機能となります

・自動更新で、新着を受信できて
 通知API で、タスクバーに通知出せます。

・会員制となり、Google認証で
 ログインに対応しています。

・PWAも対応しています

構成

PWA
firebase
Notification API
Vue CLI
vue-router
@vue/cli-service : 4.4.0
API サービス:
Laravel 5.8
nginx
mysql
・フロント設置ドメイン ,Vue-CLI:
netlify / ホスティングサービス

デモのページ

https://code-kuc.netlify.app

ヘッダ部分> Message で、開けます。
code-kuc.netlify.app

参考のコード

github.com

画面

・通知APIで、新着の自動通知
f:id:knaka0209:20200612091607p:plain

・一覧
f:id:knaka0209:20200612091623p:plain

・詳細
f:id:knaka0209:20200612091653p:plain

・返信
f:id:knaka0209:20200612091704p:plain