本当の初心者がmonaca(cordova)+vue+typeormでハイブリッドアプリを作るまでの試行錯誤（随時更新）

# 初めに

試行錯誤のログです。
間違いも書きますがなおします。
だってメモだから。
アドバイスは随時募集です！

--------

# 背景

昨年末に
「アプリを作ってほしいんだよね
monaca使うと楽なんでしょ？
もうやること決まっているから」
って言われて着手。
割と殺意わきました。

--------

# 構築者のスキルセット

ここ数年Ruby+Railsしか書いていないロートルです。

* 理解度  
    * vue?...聞いたことある  
    * webpack?...聞いたことある  
    * babel?...塔？  
    * ES5?ES6?ES2015?TypeScript...なぜ1言語にこんなに多数の書き方あるのか意味不明  
    * Cordova...Javascriptで開発出来るってさ  
    * monacaとcordovaの違い...monacaはcordovaを使いやすくしてくれるサービス！  

--------

# 構築の想定ステップ

1. 画面モックを作る
2. OB周りの構築（ローカルのブラウザ開発では何のDBを使えばいいのでしょうか?  
    typeorm使ってローカルWebSQL・実機SQLiteで動きました°˖☆◝(⁰▿⁰)◜☆˖°
3. アプリケーションスコープの情報の扱い方考える（Vuex?なの?  
    vuex使うっきゃないよね
4. nativeのブリッジどうしようっかなー  
    cordova plugin内製で乗り切り
5. CI/CDとかdeployとか・・・  
    vue標準？？？のmocha+headlesschromeで回しました

--------

# 環境構築

公式手順にのっとって、プロジェクト作ってみる

```bash:setup
# 社内環境ってproxy面倒ですよね😞
# git global settings
git config --global http.proxy XXXXXXX
git config --global https.proxy XXXXXXX
git config --global http.sslVerify false
git config --global url."https://".insteadOf ssh://

# npm global settings
npm -g config set proxy XXXXXXX
npm -g config set https-proxy XXXXXXX
npm -g config set strict-ssl false
npm install -g monaca
npm install -g vue-cli
set NODE_TLS_REJECT_UNAUTHORIZED=0

monaca config proxy XXXXXXX
monaca login

npm install
monaca transpile

monaca preview
```
--------

# 開発環境の設定

VSCodeで行くぞ！

* extension List  
    * doiuse  
    CSSチェッカー
    * ESLint  
    構文check
    * HTML Snippets  
    HTML のスニペット  
    * language-stylus  
    vscodeのstylusサポート
    * Vetur  
    vscodeのvueサポート  
    ※もしシンタックスハイライト効かない場合はVeter Eを入れてみたください
    * VueHelper  
    vueのコード補完

* setting ファイル=>基本設定=>設定

``` settings.json
{
  /*
   Html, JavaScript, Vue
  */
  "files.associations": {
    "*.vue": "vue"
  },
  // 1 つのタブに相当するスペースの数。`editor.detectIndentation` がオンの場合、この設定はファイル コンテンツに基づいて上書きされます。
  "editor.tabSize": 2,
  // vueにcssのemmet追加
  "emmet.syntaxProfiles": {
    "vue": "css"
  },
  // vueだけで追加したい設定
  "[vue]": {
    "editor.formatOnSave": true
  },
  "eslint.enable": true,
  // 適応するファイルタイプを決定
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // プロジェクト配下のeslintrc.jsを読み込み
  "eslint.options": {
    "configFile": "C:/${ファイルパス}/.eslintrc.js"
  },
  // 保存時に自動フォーマット
  "eslint.autoFixOnSave": true,
  // 保存時に末尾の空白削除
  "files.trimTrailingWhitespace": true,
  //-------- HTTP configuration --------
  // The proxy setting to use. If not set will be taken from the http_proxy and https_proxy environment variables
  "http.proxy": "XXXXXX,
  // Whether the proxy server certificate should be verified against the list of supplied CAs.
  "http.proxyStrictSSL": false,
  "extensions.ignoreRecommendations": true,
  "window.zoomLevel": 0,
}
```

--------
# ソフトウェアスタック

* テーマ  
    * 今風  
    * OSS使い倒す  
    * 共通処理は薄く・薄く・薄く・ruby的にmixinで必要な時に必要なものだけを入れる感じで
    * ORMapper使いたい（Rails長いから・・・ほら・・・
    * 可能な限り実機から離れてブラウザ開発したい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/84539/ef2110da-0dc9-7a9c-5248-d87f2fd516ea.png)


--------
# モック作るよー

1. フォルダ構成  
2. ファイル名
3. ファイル単位
4. vueファイルにすべきか、jsファイルにすべきか

更新中°˖☆◝(⁰▿⁰)◜☆˖°

--------
# OB周り構築するよー

1. ORMapper調査

|プロダクト|TypeORM|Sequelize|
|---|---|---|
|websql|〇|×|
|sqljs|〇|×|
|cordova対応|〇|×|

2. TypeORM
    *  browserとcordovaの両環境で動くナイスなORMだと思いました。  
https://github.com/typeorm/typeorm

3. not TypeScript環境
名前が示す通り、TypeORMはTypeScriptを前提としたORMです。
しかし、サンプルを見ればわかるのですがES6でも動くし、何でもできちゃう感を感じるORMですね。

3. ローカル・端末をワンソースで

4. 実装方式
    1. async/await 
5. 色々発生したエラー

6. 使い方
    1. select
    2. insert
    3. update
    4. delete
    5. join
    6. eager_load

7. テストデータ

8. トラブル・・・


--------
# vuex使うよー

1. 利用方針
2. 管理方針
3. 管理単位
4. 実装方式
5. 使い方
6. トラブル・・・
7. 
更新中°˖☆◝(⁰▿⁰)◜☆˖°

--------
# Bluetooth機器と繋ぐよー

1. 実装方針
2. ローカル・・・だと・・・？
3. トラブル・・・

更新中°˖☆◝(⁰▿⁰)◜☆˖°

--------
# CI回すよー

1. karma設定
2. mocha設定
3. chromeheadless（もうphantomは嫌だ！
4. gilab runner
5. UTで本物DB使う
6. トラブル・・・

更新中°˖☆◝(⁰▿⁰)◜☆˖°

--------
# できたよー

まだできてません
更新中°˖☆◝(⁰▿⁰)◜☆˖°