knaka Tech-Blog

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

機械学習の予測結果をsqlite3に保存して、chart.jsでグラフ表示する。

index:

概要:

前のVue.js + express  関連になりますが、
機械学習の予測結果を
sqlite3に保存する例となります

流れとしては、下記となります
・測定データCSVを学習処理
・予測の出力を、CSV保存
・予測CSVを、sqliteにインポート
・DBから、グラフ表示

環境

node.js 10.16.0
express : 4.16.1
sqlite3

参考のコード

ML側
github.com

node/express
github.com

画面

f:id:knaka0209:20190907114036p:plain

CSVデータから sqlite3に保存して、chart.jsでグラフ表示する。

index:

概要:

前のVue.js + express  関連になりますが、
sqlite3版で、 CSVデータ保存で、chart.jsで表示となります。

・リスト部分は、Vue.js です。

環境

node.js 10.16.0
express : 4.16.1
sqlite3

参考のコード

github.com

画面

f:id:knaka0209:20190905192904p:plain

実装など

・表の作成
https://github.com/kuc-arc-f/app7_sqlite_chart/blob/master/doc/mdats.sql

・グラフ表示
https://github.com/kuc-arc-f/app7_sqlite_chart/blob/master/views/mdats/chart.ejs

・読み込み
https://github.com/kuc-arc-f/app7_sqlite_chart/blob/master/csv_import.js

/******************************** 
*
*********************************/
function insert_db(db ,item ){
    var sql = "INSERT INTO mdats (mdate, hnum, lnum, up_date) VALUES "
    sql += " (date('"+ item.date +"'), ?, ?, CURRENT_TIMESTAMP)"
//console.log( sql );
    var stmt = db.prepare(sql )
    stmt.run(
        item.hnum,
        item.lnum
    )
    stmt.finalize()
    db.close()
}
/******************************** 
*
*********************************/
function proc_arr_check(items){
    var utl = new mdl_util( )
    items.forEach(function (item) {
        var date = item[0]
//console.log( date.length );
        if(date.length > 0){
            date = utl.convert_str2date( date )
            date = utl.convert_date2yymmdd( date )
//console.log( date );
            var hnum = item[1]
            var lnum = item[2]
            var arr ={
                "date" : date,
                "hnum" : hnum,
                "lnum" : lnum,
            }
            var db = new sqlite3.Database( dbfileName )
            insert_db(db, arr)
        }
    });
}
/******************************** 
*
*********************************/
function read_csvFile(input_file ){
    var rs = fs.createReadStream( input_file );
    var readline = require('readline');   
    var rl = readline.createInterface(rs, {});
   
    var items = []
    var i = 0;
    rl.on('line', function(line) {
        if(i > 0){
            if(line.length > 0){
               col = line.split(",")
//console.log( col.length );
                if(col.length >= 3){
                    items.push( col )
                }
            }
        }
        i += 1;
    })    
    .on('close', function() {
//        console.log( items );
        proc_arr_check(items)
    });            
}
/******************************** 
* main
*********************************/
var items = read_csvFile("dat/import.csv");

React.js +node/express + sqlite3 で、CRUDの作成

index:

概要:

前の React.js+ express 関連となりますが
sqlite3 で CRUDの作成 となります。

環境

node.js 10.16.0
express : 4.16.1

React
react-dom
sqlite3

参考のコード

github.com

実装など

・表の作成
https://github.com/kuc-arc-f/app7_react_sqlite/blob/master/doc/tasks.sql



・index / api

router.get('/tasks_index', function(req, res) {
    var db = new sqlite3.Database( dbfileName )
    var items = []
    db.serialize(function() {
        db.all('SELECT id,title, content FROM tasks order by id desc;', function(err, rows) {
            rows.forEach( function (item) {
                items.push(item  );
            });
            var param = {"docs": items };
            res.json(param);
        });
    });
    db.close();
});

Vue.js + node/express + sqlite3 で、 CRUDの作成

index:

概要:

前のVue.js + express  関連になりますが、
sqlite3版で、 CRUD作成となります。

環境

node.js 10.16.0
express : 4.16.1
sqlite3
vue.js

参考のコード

github.com

api実装など

・準備/ 表の作成
https://github.com/kuc-arc-f/app7_vue_sqlite_1/blob/master/doc/tasks.sql

api.js
https://github.com/kuc-arc-f/app7_vue_sqlite_1/blob/master/routes/api.js

・new

router.post('/tasks_new', (req, res) => {
    data = req.body
//    console.log(data )
    var db = new sqlite3.Database( dbfileName )
    var items = []
    db.serialize(function() {
        var stmt = db.prepare('INSERT INTO tasks (title, content) VALUES (?, ?)')
        stmt.run(data.title, data.content )
        stmt.finalize()
        res.json(data);
    });
    db.close();
}); 


・index

router.get('/tasks_index', function(req, res) {
    var db = new sqlite3.Database( dbfileName )
    var items = []
    db.serialize(function() {
        db.all('SELECT id,title, content FROM tasks order by id desc;', function(err, rows) {
            rows.forEach( function (item) {
                items.push(item  );
            });
            var param = {"docs": items };
            res.json(param);
        });
    });
    db.close();
});

・TIMESTAMP/ 日付時刻の変換は、下記を参考しました。
https://qiita.com/TomK/items/132831ab45e2aba822a8

node.jsから sqlite3 を使う。設定編

index:

概要:

node.js で、sqlite3の設定等になります。

環境

node.js 10.16.0
sqlite3

追加方法

npm install sqlite3

表作成など

・create table / insert

var sqlite3 = require('sqlite3').verbose()
var db = new sqlite3.Database('app1.sqlite')

db.serialize(function () {
    db.run('CREATE TABLE temp (id, name)')
    var stmt = db.prepare('INSERT INTO temp (id, name) VALUES (?, ?)')
  
    for (var i = 0; i < 10; i++) {
      stmt.run(i, 'name'+ i)
    }
    stmt.finalize()
  })
  
db.close()

・select

db.serialize(function() {
    db.each('SELECT id,name FROM temp order by id', function (err, row) {
        console.log(row.id + ': ' + row.name)
    })
});
db.close();

・update

db.serialize(function() {
    var stmt = db.prepare('update temp set name= ? where id= ?')
  
//    stmt.run('update-0', 0)
    stmt.run('update-1', 1)
    stmt.finalize()    
});
db.close();

・delete

db.serialize(function() {
    var stmt = db.prepare('delete from temp  where id= ?')
    stmt.run(1)
    stmt.finalize()    
});
db.close();

ツール関連

・windows10 の場合で。exeをDLしました

https://www.sqlite.org/download.html

sqlite-tools-win32-x86-3290000.zip
(1.71 MiB)

・解凍して、実行する場合

sqlite-tools-win32\sqlite3 app1.sqlite

関連のページ

knaka0209.hatenablog.com

React.js +node/express +mongoDB で markdown対応の todo作成

index:

概要:

前の React.js+ express 関連となりますが
mongoDb で markdown対応の todo作成

markedで、MDから html変換しています。

環境

node.js 10.16.0
express : 4.16.1

React
react-dom
mongo DB 2.4.14

画面

f:id:knaka0209:20190831210136p:plain

参考のコード

github.com

React.js +node/express +mongoDB で CRUDの作成

index:

概要:

前の React.js+ express 関連となりますが
mongoDb で CRUD作成となります

api側は、Vue.js+ node.js版とほぼ同じです
・ejsテンプレートに、React.js書いて、
axios で通信となります。

環境

node.js 10.16.0
express : 4.16.1

React
react-dom
mongo DB 2.4.14

参考のコード

github.com

実装など

・new

class Create extends React.Component {
  constructor(props){
    super(props)
    this.state = {title: '', description: ''}
  }
  handleChangeTitle(e){
    this.setState({title: e.target.value})
  }
  handleChangeDesc(e){
    this.setState({description: e.target.value})
  }
  handleSubmit(e){
    e.preventDefault()
    const task = {
      title: this.state.title,
      content: this.state.description
    }
    let uri = '/api/tasks_new'
    axios.post(uri, task ).then((response) => {
      // browserHistory.push('/list')
      window.location.href="/tasks"
      console.log("success")
    })
  }
  render() {
    return (
    <div>
      <h1>Create a ToDo</h1>
      <hr />
      <form onSubmit={this.handleSubmit.bind(this)}>
        <div className="row">
          <div className="col-md-6">
            <div className="form-group">
              <label>Title:</label>
              <input type="text" className="form-control" onChange={this.handleChangeTitle.bind(this)}/>
            </div>
          </div>
          </div>
          <div className="row">
            <div className="col-md-6">
              <div className="form-group">
                <label>Description:</label>
                <input type="text" className="form-control col-md-6" onChange={this.handleChangeDesc.bind(this)}/>
              </div>
            </div>
          </div><br />
          <div className="form-group">
            <button className="btn btn-primary">Create</button>
          </div>
      </form>
    </div>
    )
  }
}
ReactDOM.render(<Create />, document.getElementById('app'));


・index

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: ''}
    }
    componentDidMount(){
        axios.get('/api/tasks_index').then(response => {
            this.setState({ data: response.data.docs })
            console.log( response.data.docs )
        })
        .catch(function (error) {
            console.log(error)
        })
    }
    tabRow(){
        if(this.state.data instanceof Array){
            return this.state.data.map(function(row, index){
                return (
                    <tr key={index}>
                        <td>
                            <a href={"/tasks/show/"+row._id}>{row._id}</a><br />
                        </td>
                        <td>{row.title}</td>
                        <td>{row.content}</td>
                        <td><a href={"/tasks/edit/"+row._id}>[ edit ]</a></td>                        
                    </tr>            
                )
            })
        }
    }
    render(){
        return (
            <div>
                <h1>index</h1>
                <table className="table table-hover">
                    <thead>
                    <tr>
                        <td>ID</td>
                        <td>Title</td>
                        <td>content</td>
                    </tr>
                    </thead>
                    <tbody>
                    {this.tabRow()}
                    </tbody>
                </table>            
            </div>
        )
    }
  
}

ReactDOM.render(<List />, document.getElementById('app'));

update

・ 見直しで、form の登録で、
 少しコード量削減、改良してみました。

タグの削除
INPUT / onChangeイベントからの関数共通化
ボタンの、A要素のonClickイベント変更、
bind関数の追加

・new
https://github.com/kuc-arc-f/app6_react2/blob/master/views/task2/new.ejs

class Create extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            title: '', 
            content: ''
        }
    }
    handleChange = event => {
        const { name, value } = event.target
        this.setState({
            [name]: value
        })
    }
    add_task(){
//        console.log(this.state)
        const task = {
            title: this.state.title,
            content: this.state.content
        }
        let uri = '/api/tasks_new'
        axios.post(uri, task ).then((response) => {
            window.location.href="/task2"
            console.log("success")
        })        
    }
    render() {
//        console.log(this.state)
        const { title, content } = this.state;
        return (
        <div>
            <div className="row">
            <div className="col-md-6">
                <div className="form-group">
                <label>Title:</label>
                <input type="text" className="form-control" name="title"
                onChange={this.handleChange}/>
                </div>
            </div>
            </div>
            <div className="row">
                <div className="col-md-6">
                <div className="form-group">
                    <label>content:</label>
                    <input type="text" className="form-control" name="content"
                    onChange={this.handleChange}
                    />
                </div>
                </div>
            </div><br />
            <hr />
            <a className="btn btn-primary" href='#' onClick={this.add_task.bind(this )}>Add</a>
        </div>
        )
    }
}
ReactDOM.render(<Create />, document.getElementById('app'));